diff --git a/lib/main.dart b/lib/main.dart
index 42b2f13b..b0cbeab9 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -38,7 +38,7 @@ class MyApp extends StatelessWidget {
         useMaterial3: true, // Enable Material 3
       ),
       home: isLoggedIn == 'Success'?
-       HomePage()
+       const HomePage()
           :
       const LoginPage(),
     );
diff --git a/lib/pages/home/view/home_card.dart b/lib/pages/home/view/home_card.dart
index 7f0dc57d..287bb4f4 100644
--- a/lib/pages/home/view/home_card.dart
+++ b/lib/pages/home/view/home_card.dart
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-
-import '../../../utils/color_manager.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
 
 class HomeCard extends StatelessWidget {
   final bool active;
@@ -23,12 +22,12 @@ class HomeCard extends StatelessWidget {
     return InkWell(
       onTap: active ? onTap : null,
       child: Container(
-        padding: const EdgeInsets.only(left: 10, bottom: 10,right: 10,),
+        padding: const EdgeInsets.only(left: 10,right: 10,bottom: 10),
         decoration: BoxDecoration(
-          color: evenNumbers&&active?
+          color: evenNumbers && active?
           ColorsManager.blueColor.withOpacity(0.8) :
           (active ?ColorsManager.blueColor
-              : ColorsManager.blueColor.withOpacity(0.2)),
+                  : ColorsManager.blueColor.withOpacity(0.2)),
           borderRadius: BorderRadius.circular(30),
         ),
         child: Column(
diff --git a/lib/pages/home/view/home_page.dart b/lib/pages/home/view/home_page.dart
index ff919cfc..b4225ae2 100644
--- a/lib/pages/home/view/home_page.dart
+++ b/lib/pages/home/view/home_page.dart
@@ -1,119 +1,16 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:flutter_svg/svg.dart';
-import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
-import 'package:syncrow_web/pages/home/view/home_card.dart';
-import 'package:syncrow_web/utils/color_manager.dart';
-import 'package:syncrow_web/utils/constants/assets.dart';
-import 'package:syncrow_web/web_layout/web_scaffold.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:syncrow_web/pages/home/view/home_page_mobile.dart';
+import 'package:syncrow_web/pages/home/view/home_page_web.dart';
+import 'package:syncrow_web/utils/responsive_layout.dart';
 
 class HomePage extends StatelessWidget {
-   HomePage({super.key});
+  const HomePage({super.key});
+
   @override
   Widget build(BuildContext context) {
-    Size size = MediaQuery.of(context).size;
-    return WebScaffold(
-      enableMenuSideba:false ,
-      appBarTitle: Row(
-        children: [
-          SvgPicture.asset(
-            Assets.loginLogo,
-            width: 150,
-          ),
-        ],
-      ),
-      scaffoldBody: BlocProvider(
-        create: (context) => HomeBloc(),
-        child: SizedBox(
-          height: size.height,
-          width: size.width,
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            crossAxisAlignment: CrossAxisAlignment.center,
-            children: [
-              SizedBox(height: size.height * 0.1),
-              const Text(
-                'ACCESS YOUR APPS',
-                style: TextStyle(fontSize: 40, fontWeight: FontWeight.w700),
-              ),
-              const SizedBox(height: 30),
-              Expanded(
-                flex: 4,
-                child: SizedBox(
-                  height: size.height * 0.6,
-                  width: size.width * 0.68,
-                  child: GridView.builder(
-                    itemCount: 8,
-                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                      crossAxisCount: 4,
-                      crossAxisSpacing: 20.0,
-                      mainAxisSpacing: 20.0,
-                      childAspectRatio: 1.5,
-                    ),
-                    itemBuilder: (context, index) {
-                      return  HomeCard(
-                        index:index,
-                        active:ceilingSensorButtons[index]['active'],
-                        name: ceilingSensorButtons[index]['title'],
-                        img:ceilingSensorButtons[index]['icon'] ,
-                        onTap: () {
-
-                       },);
-                    },
-                  ),
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
+    return  ResponsiveLayout(
+        desktopBody: HomeWebPage(),
+        mobileBody:HomeMobilePage()
     );
   }
-
-   dynamic ceilingSensorButtons =
-      [
-        {
-          'title': 'Access',
-          'icon': Assets.accessIcon,
-          'active': true,
-        },
-        {
-          'title': 'Space\nManagement',
-          'icon': Assets.spaseManagementIcon,
-          'color': ColorsManager.primaryColor,
-          'active': true,
-        },
-        {
-          'title': 'Devices',
-          'icon':Assets.devicesIcon,
-          'active': true,
-        },
-        {
-          'title': 'Move in',
-          'icon': Assets.moveinIcon,
-          'active': false,
-        },
-        {
-          'title': 'Construction',
-          'icon': Assets.constructionIcon,
-          'active': false,
-        },
-        {
-          'title': 'Energy',
-          'icon': Assets.energyIcon,
-          'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
-          'active': false,
-        },
-        {
-          'title': 'Integrations',
-          'icon': Assets.integrationsIcon,
-          'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
-          'active': false,
-        },    {
-          'title': 'Asset',
-          'icon': Assets.assetIcon,
-          'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
-          'active': false,
-        },
-      ];
 }
diff --git a/lib/pages/home/view/home_page_mobile.dart b/lib/pages/home/view/home_page_mobile.dart
new file mode 100644
index 00000000..02159c31
--- /dev/null
+++ b/lib/pages/home/view/home_page_mobile.dart
@@ -0,0 +1,118 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
+import 'package:syncrow_web/pages/home/view/home_card.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/web_layout/web_scaffold.dart';
+
+class HomeMobilePage extends StatelessWidget {
+  HomeMobilePage({super.key});
+  @override
+  Widget build(BuildContext context) {
+    Size size = MediaQuery.of(context).size;
+    return WebScaffold(
+      enableMenuSideba:false ,
+      appBarTitle: Row(
+        children: [
+          SvgPicture.asset(
+            Assets.loginLogo,
+            width: 150,
+          ),
+        ],
+      ),
+      scaffoldBody: BlocProvider(
+        create: (context) => HomeBloc(),
+        child: SizedBox(
+          height: size.height,
+          width: size.width,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              SizedBox(height: size.height * 0.05),
+              const Text(
+                'ACCESS YOUR APPS',
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
+              ),
+              const SizedBox(height: 30),
+              Expanded(
+                flex: 4,
+                child: SizedBox(
+                  height: size.height * 0.6,
+                  width: size.width * 0.68,
+                  child: GridView.builder(
+                    itemCount: 8,
+                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                      crossAxisCount: 2,
+                      crossAxisSpacing: 20.0,
+                      mainAxisSpacing: 20.0,
+                      childAspectRatio: 1.5,
+                    ),
+                    itemBuilder: (context, index) {
+                      return  HomeCard(
+                        index:index,
+                        active:ceilingSensorButtons[index]['active'],
+                        name: ceilingSensorButtons[index]['title'],
+                        img:ceilingSensorButtons[index]['icon'] ,
+                        onTap: () {},
+                      );
+                    },
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  dynamic ceilingSensorButtons =
+  [
+    {
+      'title': 'Access',
+      'icon': Assets.accessIcon,
+      'active': true,
+    },
+    {
+      'title': 'Space\nManagement',
+      'icon': Assets.spaseManagementIcon,
+      'color': ColorsManager.primaryColor,
+      'active': true,
+    },
+    {
+      'title': 'Devices',
+      'icon':Assets.devicesIcon,
+      'active': true,
+    },
+    {
+      'title': 'Move in',
+      'icon': Assets.moveinIcon,
+      'active': false,
+    },
+    {
+      'title': 'Construction',
+      'icon': Assets.constructionIcon,
+      'active': false,
+    },
+    {
+      'title': 'Energy',
+      'icon': Assets.energyIcon,
+      'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
+      'active': false,
+    },
+    {
+      'title': 'Integrations',
+      'icon': Assets.integrationsIcon,
+      'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
+      'active': false,
+    },    {
+    'title': 'Asset',
+    'icon': Assets.assetIcon,
+    'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
+    'active': false,
+  },
+  ];
+}
diff --git a/lib/pages/home/view/home_page_web.dart b/lib/pages/home/view/home_page_web.dart
new file mode 100644
index 00000000..f7c4e988
--- /dev/null
+++ b/lib/pages/home/view/home_page_web.dart
@@ -0,0 +1,119 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
+import 'package:syncrow_web/pages/home/view/home_card.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/web_layout/web_scaffold.dart';
+
+class HomeWebPage extends StatelessWidget {
+  HomeWebPage({super.key});
+  @override
+  Widget build(BuildContext context) {
+    Size size = MediaQuery.of(context).size;
+    return WebScaffold(
+      enableMenuSideba:false ,
+      appBarTitle: Row(
+        children: [
+          SvgPicture.asset(
+            Assets.loginLogo,
+            width: 150,
+          ),
+        ],
+      ),
+      scaffoldBody: BlocProvider(
+        create: (context) => HomeBloc(),
+        child: SizedBox(
+          height: size.height,
+          width: size.width,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              SizedBox(height: size.height * 0.1),
+              const Text(
+                'ACCESS YOUR APPS',
+                style: TextStyle(fontSize: 40, fontWeight: FontWeight.w700),
+              ),
+              const SizedBox(height: 30),
+              Expanded(
+                flex: 4,
+                child: SizedBox(
+                  height: size.height * 0.6,
+                  width: size.width * 0.68,
+                  child: GridView.builder(
+                    itemCount: 8,
+                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                      crossAxisCount: 4,
+                      crossAxisSpacing: 20.0,
+                      mainAxisSpacing: 20.0,
+                      childAspectRatio: 1.5,
+                    ),
+                    itemBuilder: (context, index) {
+                      return  HomeCard(
+                        index:index,
+                        active:ceilingSensorButtons[index]['active'],
+                        name: ceilingSensorButtons[index]['title'],
+                        img:ceilingSensorButtons[index]['icon'] ,
+                        onTap: () {
+
+                        },);
+                    },
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  dynamic ceilingSensorButtons =
+  [
+    {
+      'title': 'Access',
+      'icon': Assets.accessIcon,
+      'active': true,
+    },
+    {
+      'title': 'Space\nManagement',
+      'icon': Assets.spaseManagementIcon,
+      'color': ColorsManager.primaryColor,
+      'active': true,
+    },
+    {
+      'title': 'Devices',
+      'icon':Assets.devicesIcon,
+      'active': true,
+    },
+    {
+      'title': 'Move in',
+      'icon': Assets.moveinIcon,
+      'active': false,
+    },
+    {
+      'title': 'Construction',
+      'icon': Assets.constructionIcon,
+      'active': false,
+    },
+    {
+      'title': 'Energy',
+      'icon': Assets.energyIcon,
+      'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
+      'active': false,
+    },
+    {
+      'title': 'Integrations',
+      'icon': Assets.integrationsIcon,
+      'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
+      'active': false,
+    },    {
+    'title': 'Asset',
+    'icon': Assets.assetIcon,
+    'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
+    'active': false,
+  },
+  ];
+}