diff --git a/lib/pages/spaces_management/view/spaces_management_page.dart b/lib/pages/spaces_management/view/spaces_management_page.dart
index ea58c600..4427234b 100644
--- a/lib/pages/spaces_management/view/spaces_management_page.dart
+++ b/lib/pages/spaces_management/view/spaces_management_page.dart
@@ -9,6 +9,7 @@ import 'package:syncrow_web/pages/spaces_management/model/space_model.dart';
 import 'package:syncrow_web/pages/spaces_management/view/community_list_view.dart';
 import 'package:syncrow_web/pages/spaces_management/view/curved_line_painter.dart';
 import 'package:syncrow_web/pages/spaces_management/view/dialogs/create_space_dialog.dart';
+import 'package:syncrow_web/pages/spaces_management/widgets/gradient_canvas_border_widget.dart';
 import 'package:syncrow_web/pages/spaces_management/widgets/sidebar_widget.dart';
 import 'package:syncrow_web/pages/spaces_management/widgets/space_card_widget.dart';
 import 'package:syncrow_web/pages/spaces_management/widgets/space_container_widget.dart';
@@ -84,7 +85,7 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
                     );
               },
             ),
-            SizedBox(width: 45),
+            const SizedBox(width: 45),
             showCommunityStructure
                 ? _buildCommunityStructureArea(context, screenSize)
                 : CommunityListViewWidget(
@@ -92,7 +93,7 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
                   ),
           ],
         ),
-        _buildGradientBorder(),
+        const GradientBorderWidget()
       ],
     );
   }
@@ -218,27 +219,6 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
     );
   }
 
-  Widget _buildGradientBorder() {
-    return Positioned(
-      top: 0,
-      bottom: 0,
-      left: 300,
-      width: 8,
-      child: Container(
-        decoration: BoxDecoration(
-          gradient: LinearGradient(
-            begin: Alignment.centerLeft,
-            end: Alignment.centerRight,
-            colors: [
-              ColorsManager.semiTransparentBlackColor.withOpacity(0.1),
-              ColorsManager.transparentColor,
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-
   void _showCreateSpaceDialog(Size screenSize,
       {Offset? position, int? parentIndex, String? direction}) {
     showDialog(
diff --git a/lib/pages/spaces_management/widgets/gradient_canvas_border_widget.dart b/lib/pages/spaces_management/widgets/gradient_canvas_border_widget.dart
new file mode 100644
index 00000000..638434dc
--- /dev/null
+++ b/lib/pages/spaces_management/widgets/gradient_canvas_border_widget.dart
@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class GradientBorderWidget extends StatelessWidget {
+  final double top;
+  final double bottom;
+  final double left;
+  final double width;
+
+  const GradientCanvasBorderWidget({
+    Key? key,
+    this.top = 0,
+    this.bottom = 0,
+    this.left = 300,
+    this.width = 8,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Positioned(
+      top: top,
+      bottom: bottom,
+      left: left,
+      width: width,
+      child: Container(
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.centerLeft,
+            end: Alignment.centerRight,
+            colors: [
+              ColorsManager.semiTransparentBlackColor.withOpacity(0.1),
+              ColorsManager.transparentColor,
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}