diff --git a/lib/pages/spaces_management/widgets/add_device_type_widget.dart b/lib/pages/spaces_management/widgets/add_device_type_widget.dart
index 2c88b866..08c08997 100644
--- a/lib/pages/spaces_management/widgets/add_device_type_widget.dart
+++ b/lib/pages/spaces_management/widgets/add_device_type_widget.dart
@@ -46,40 +46,50 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
 
+    // Adjust the GridView properties based on screen width
+    final crossAxisCount = size.width > 1200
+        ? 8
+        : size.width > 800
+            ? 5
+            : 3;
+
     return AlertDialog(
       title: const Text('Add Devices'),
       backgroundColor: ColorsManager.whiteColors,
-      content: Container(
-        width: size.width * 0.65,
-        height: size.height * 0.57,
-        color: ColorsManager.textFieldGreyColor,
-        child: Column(
-          children: [
-            const SizedBox(height: 16),
-            Expanded(
-              child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 20.0),
-                child: Scrollbar(
-                  controller: _scrollController,
-                  thumbVisibility: false,
-                  child: GridView.builder(
+      content: SingleChildScrollView(
+        child: Container(
+          width: size.width * 0.9,
+          height: size.height * 0.65,
+          color: ColorsManager.textFieldGreyColor,
+          child: Column(
+            children: [
+              const SizedBox(height: 16),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 20.0),
+                  child: Scrollbar(
                     controller: _scrollController,
-                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                      crossAxisCount: 6,
-                      mainAxisSpacing: 10,
-                      crossAxisSpacing: 10,
-                      childAspectRatio: 0.7,
+                    thumbVisibility: false,
+                    child: GridView.builder(
+                      shrinkWrap: true,
+                      controller: _scrollController,
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                        crossAxisCount: crossAxisCount,
+                        mainAxisSpacing: 6,
+                        crossAxisSpacing: 4,
+                        childAspectRatio: .8,
+                      ),
+                      itemCount: widget.products?.length ?? 0,
+                      itemBuilder: (context, index) {
+                        final product = widget.products![index];
+                        return _buildDeviceTypeTile(product, size);
+                      },
                     ),
-                    itemCount: widget.products?.length ?? 0,
-                    itemBuilder: (context, index) {
-                      final product = widget.products![index];
-                      return _buildDeviceTypeTile(product);
-                    },
                   ),
                 ),
               ),
-            ),
-          ],
+            ],
+          ),
         ),
       ),
       actions: [
@@ -101,15 +111,15 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
     );
   }
 
-  Widget _buildDeviceTypeTile(ProductModel product) {
+  Widget _buildDeviceTypeTile(ProductModel product, Size size) {
     final selectedProduct = productCounts.firstWhere(
       (p) => p.productId == product.uuid,
       orElse: () => SelectedProduct(productId: product.uuid, count: 0),
     );
 
     return SizedBox(
-      width: 75,
-      height: 90,
+      width: size.width * 0.12,
+      height: size.height * 0.15,
       child: Card(
         elevation: 2,
         color: ColorsManager.whiteColors,
@@ -117,14 +127,15 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
           borderRadius: BorderRadius.circular(8),
         ),
         child: Padding(
-          padding: const EdgeInsets.all(6.0),
+          padding: const EdgeInsets.all(4.0),
           child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.center,
             children: [
-              _buildDeviceIcon(product),
-              const SizedBox(height: 8),
-              _buildDeviceName(product),
-              const SizedBox(height: 8),
+              _buildDeviceIcon(product, size),
+              const SizedBox(height: 4),
+              _buildDeviceName(product, size),
+              const SizedBox(height: 4),
               CounterWidget(
                 initialCount: selectedProduct.count,
                 onCountChanged: (newCount) {
@@ -153,10 +164,10 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
     );
   }
 
-  Widget _buildDeviceIcon(ProductModel product) {
+  Widget _buildDeviceIcon(ProductModel product, Size size) {
     return Container(
-      height: 80,
-      width: 80,
+      height: size.width > 800 ? 50 : 40,
+      width: size.width > 800 ? 50 : 40,
       decoration: BoxDecoration(
         shape: BoxShape.circle,
         color: ColorsManager.textFieldGreyColor,
@@ -168,16 +179,16 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
       child: Center(
         child: SvgPicture.asset(
           product.icon ?? Assets.sensors,
-          width: 45,
-          height: 45,
+          width: size.width > 800 ? 30 : 20,
+          height: size.width > 800 ? 30 : 20,
         ),
       ),
     );
   }
 
-  Widget _buildDeviceName(ProductModel product) {
+  Widget _buildDeviceName(ProductModel product, Size size) {
     return SizedBox(
-      height: 35,
+      height: size.width > 800 ? 35 : 25,
       child: Text(
         product.name ?? '',
         style: context.textTheme.bodySmall?.copyWith(color: ColorsManager.blackColor),
@@ -195,7 +206,7 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
     VoidCallback onPressed,
   ) {
     return SizedBox(
-      width: 200,
+      width: 120,
       child: DefaultButton(
         onPressed: onPressed,
         backgroundColor: backgroundColor,