diff --git a/lib/pages/spaces_management/all_spaces/widgets/dialogs/create_space_dialog.dart b/lib/pages/spaces_management/all_spaces/widgets/dialogs/create_space_dialog.dart
index 054606cb..1ad8f52c 100644
--- a/lib/pages/spaces_management/all_spaces/widgets/dialogs/create_space_dialog.dart
+++ b/lib/pages/spaces_management/all_spaces/widgets/dialogs/create_space_dialog.dart
@@ -8,7 +8,7 @@ import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model
 import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/add_device_type_widget.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/dialogs/icon_selection_dialog.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/hoverable_button.dart';
-import 'package:syncrow_web/utils/asset_validator.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/selected_products_button_widget.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/constants/space_icon_const.dart';
@@ -60,8 +60,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
   }
 
   @override
-  @override
-  Future<Widget> build(BuildContext context) async {
+  Widget build(BuildContext context) {
     final screenWidth = MediaQuery.of(context).size.width;
 
     return AlertDialog(
@@ -92,9 +91,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                         ),
                       ),
                       SvgPicture.asset(
-                        await AssetValidator.isValidAsset(selectedIcon)
-                            ? selectedIcon
-                            : Assets.location,
+                        selectedIcon,
                         width: screenWidth * 0.04,
                         height: screenWidth * 0.04,
                       ),
@@ -107,7 +104,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                             width: screenWidth * 0.020,
                             height: screenWidth * 0.020,
                             decoration: const BoxDecoration(
-                              color: ColorsManager.whiteColors,
+                              color: Colors.white,
                               shape: BoxShape.circle,
                             ),
                             child: SvgPicture.asset(
@@ -146,8 +143,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                               }
                             });
                           },
-                          style:
-                              const TextStyle(color: ColorsManager.blackColor),
+                          style: const TextStyle(color: Colors.black),
                           decoration: InputDecoration(
                             hintText: 'Please enter the name',
                             hintStyle: const TextStyle(
@@ -199,7 +195,16 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                           ),
                         const SizedBox(height: 16),
                         if (selectedProducts.isNotEmpty)
-                          _buildSelectedProductsButtons(widget.products ?? [])
+                          SelectedProductsButtons(
+                            products: widget.products ?? [],
+                            selectedProducts: selectedProducts,
+                            onProductsUpdated: (updatedProducts) {
+                              setState(() {
+                                selectedProducts = updatedProducts;
+                              });
+                            },
+                            context: context,
+                          )
                         else
                           DefaultButton(
                               onPressed: () {
@@ -216,7 +221,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                                 );
                               },
                               backgroundColor: ColorsManager.textFieldGreyColor,
-                              foregroundColor: ColorsManager.blackColor,
+                              foregroundColor: Colors.black,
                               borderColor: ColorsManager.neutralGray,
                               borderRadius: 16.0,
                               padding: 10.0, // Reduced padding for smaller size
@@ -317,74 +322,6 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
     );
   }
 
-  Widget _buildSelectedProductsButtons(List<ProductModel> products) {
-    final screenWidth = MediaQuery.of(context).size.width;
-
-    return Container(
-      width: screenWidth * 0.6,
-      padding: const EdgeInsets.all(8),
-      decoration: BoxDecoration(
-        color: ColorsManager.textFieldGreyColor,
-        borderRadius: BorderRadius.circular(12),
-        border: Border.all(
-          color: ColorsManager.neutralGray,
-          width: 2,
-        ),
-      ),
-      child: Wrap(
-        spacing: 8,
-        runSpacing: 8,
-        children: [
-          for (var i = 0; i < selectedProducts.length; i++) ...[
-            HoverableButton(
-              iconPath:
-                  _mapIconToProduct(selectedProducts[i].productId, products),
-              text: 'x${selectedProducts[i].count}',
-              onTap: () {
-                setState(() {
-                  selectedProducts.remove(selectedProducts[i]);
-                });
-                // Handle button tap
-              },
-            ),
-            if (i < selectedProducts.length - 1)
-              const SizedBox(
-                  width: 2), // Add space except after the last button
-          ],
-          const SizedBox(width: 2),
-          GestureDetector(
-            onTap: () {
-              showDialog(
-                context: context,
-                builder: (context) => AddDeviceWidget(
-                  products: widget.products,
-                  initialSelectedProducts: selectedProducts,
-                  onProductsSelected: (selectedProductsMap) {
-                    setState(() {
-                      selectedProducts = selectedProductsMap;
-                    });
-                  },
-                ),
-              );
-            },
-            child: Container(
-              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-              decoration: BoxDecoration(
-                color: ColorsManager.whiteColors,
-                borderRadius: BorderRadius.circular(16),
-              ),
-              child: const Icon(
-                Icons.add,
-                color: ColorsManager.spaceColor,
-                size: 24,
-              ),
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-
   bool _isNameConflict(String value) {
     return (widget.parentSpace?.children.any((child) => child.name == value) ??
             false) ||
@@ -393,21 +330,4 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
         (widget.editSpace?.children.any((child) => child.name == value) ??
             false);
   }
-
-  String _mapIconToProduct(String uuid, List<ProductModel> products) {
-    // Find the product with the matching UUID
-    final product = products.firstWhere(
-      (product) => product.uuid == uuid,
-      orElse: () => ProductModel(
-        uuid: '',
-        catName: '',
-        prodId: '',
-        prodType: '',
-        name: '',
-        icon: Assets.presenceSensor,
-      ),
-    );
-
-    return product.icon ?? Assets.presenceSensor;
-  }
 }
diff --git a/lib/pages/spaces_management/all_spaces/widgets/selected_products_button_widget.dart b/lib/pages/spaces_management/all_spaces/widgets/selected_products_button_widget.dart
new file mode 100644
index 00000000..7076a580
--- /dev/null
+++ b/lib/pages/spaces_management/all_spaces/widgets/selected_products_button_widget.dart
@@ -0,0 +1,118 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/product_model.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/selected_product_model.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/add_device_type_widget.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/widgets/hoverable_button.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class SelectedProductsButtons extends StatelessWidget {
+  final List<ProductModel> products;
+  final List<SelectedProduct> selectedProducts;
+  final Function(List<SelectedProduct>) onProductsUpdated;
+  final BuildContext context;
+
+  const SelectedProductsButtons({
+    Key? key,
+    required this.products,
+    required this.selectedProducts,
+    required this.onProductsUpdated,
+    required this.context,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+
+    return Container(
+      width: screenWidth * 0.6,
+      padding: const EdgeInsets.all(8),
+      decoration: BoxDecoration(
+        color: ColorsManager.textFieldGreyColor,
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(
+          color: ColorsManager.neutralGray,
+          width: 2,
+        ),
+      ),
+      child: Wrap(
+        spacing: 8,
+        runSpacing: 8,
+        children: [
+          ..._buildSelectedProductButtons(),
+          _buildAddButton(),
+        ],
+      ),
+    );
+  }
+
+  List<Widget> _buildSelectedProductButtons() {
+    return [
+      for (var i = 0; i < selectedProducts.length; i++) ...[
+        HoverableButton(
+          iconPath: _mapIconToProduct(selectedProducts[i].productId, products),
+          text: 'x${selectedProducts[i].count}',
+          onTap: () {
+            _removeProduct(i);
+          },
+        ),
+        if (i < selectedProducts.length - 1)
+          const SizedBox(width: 2), // Add space except after the last button
+      ],
+    ];
+  }
+
+  Widget _buildAddButton() {
+    return GestureDetector(
+      onTap: _showAddDeviceDialog,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+        decoration: BoxDecoration(
+          color: ColorsManager.whiteColors,
+          borderRadius: BorderRadius.circular(16),
+        ),
+        child: const Icon(
+          Icons.add,
+          color: ColorsManager.spaceColor,
+          size: 24,
+        ),
+      ),
+    );
+  }
+
+  void _showAddDeviceDialog() {
+    showDialog(
+      context: context,
+      builder: (context) => AddDeviceWidget(
+        products: products,
+        initialSelectedProducts: selectedProducts,
+        onProductsSelected: (selectedProductsMap) {
+          onProductsUpdated(selectedProductsMap);
+        },
+      ),
+    );
+  }
+
+  void _removeProduct(int index) {
+    final updatedProducts = [...selectedProducts];
+    updatedProducts.removeAt(index);
+    onProductsUpdated(updatedProducts);
+  }
+
+  String _mapIconToProduct(String uuid, List<ProductModel> products) {
+    // Find the product with the matching UUID
+    final product = products.firstWhere(
+      (product) => product.uuid == uuid,
+      orElse: () => ProductModel(
+        uuid: '',
+        catName: '',
+        prodId: '',
+        prodType: '',
+        name: '',
+        icon: Assets.presenceSensor,
+      ),
+    );
+
+    return product.icon ?? Assets.presenceSensor;
+  }
+}