diff --git a/magnet_app/lib/main.dart b/magnet_app/lib/main.dart
index 4998a5b..a90b7d8 100644
--- a/magnet_app/lib/main.dart
+++ b/magnet_app/lib/main.dart
@@ -5,6 +5,8 @@ import 'package:provider/provider.dart';
 
 import 'package:cbl_flutter/cbl_flutter.dart';
 
+import 'package:horizontal_data_table/horizontal_data_table.dart';
+
 import 'package:magnet_app/splash_page.dart';
 import 'package:magnet_app/about.dart';
 import 'package:magnet_app/app_state_model.dart';
@@ -34,7 +36,7 @@ Future<void> main() async {
   });
 }
 
-class MyApp extends StatelessWidget {
+class MyApp extends StatelessWidget, State<SimpleTablePage> {
   const MyApp({super.key});
   // This widget is the root of your application.
   @override
@@ -174,12 +176,109 @@ class MyHomePage extends StatelessWidget {
                   style: TextStyle(color: _textColor(context)),
                 )),
                 */
+                HorizontalDataTable(
+                  leftHandSideColumnWidth: 100,
+                  rightHandSideColumnWidth: 600,
+                  isFixedHeader: true,
+                  headerWidgets: _getTitleWidget(),
+                  isFixedFooter: true,
+                  footerWidgets: _getTitleWidget(),
+                  leftSideItemBuilder: _generateFirstColumnRow,
+                  rightSideItemBuilder: _generateRightHandSideColumnRow,
+                  itemCount: widget.user.userInfo.length,
+                  rowSeparatorWidget: const Divider(
+                    color: Colors.black38,
+                    height: 1.0,
+                    thickness: 0.0,
+                  ),
+                  leftHandSideColBackgroundColor: const Color(0xFFFFFFFF),
+                  rightHandSideColBackgroundColor: const Color(0xFFFFFFFF),
+                  itemExtent: 55,
+                ),
           ],
         ),
       ),
     );
+
+    
+  }
+
+  List<Widget> _getTitleWidget() {
+    return [
+      _getTitleItemWidget('Name', 100),
+      _getTitleItemWidget('Status', 100),
+      _getTitleItemWidget('Phone', 200),
+      _getTitleItemWidget('Register', 100),
+      _getTitleItemWidget('Termination', 200),
+    ];
   }
 
+  Widget _getTitleItemWidget(String label, double width) {
+    return Container(
+      width: width,
+      height: 56,
+      padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
+      alignment: Alignment.centerLeft,
+      child: Text(label, style: const TextStyle(fontWeight: FontWeight.bold)),
+    );
+  }
+
+  Widget _generateFirstColumnRow(BuildContext context, int index) {
+    return Container(
+      width: 100,
+      height: 52,
+      padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
+      alignment: Alignment.centerLeft,
+      child: Text(widget.user.userInfo[index].name),
+    );
+  }
+
+  Widget _generateRightHandSideColumnRow(BuildContext context, int index) {
+    return Row(
+      children: <Widget>[
+        Container(
+          width: 100,
+          height: 52,
+          padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
+          alignment: Alignment.centerLeft,
+          child: Row(
+            children: <Widget>[
+              Icon(
+                  widget.user.userInfo[index].status
+                      ? Icons.notifications_off
+                      : Icons.notifications_active,
+                  color: widget.user.userInfo[index].status
+                      ? Colors.red
+                      : Colors.green),
+              Text(widget.user.userInfo[index].status ? 'Disabled' : 'Active')
+            ],
+          ),
+        ),
+        Container(
+          width: 200,
+          height: 52,
+          padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
+          alignment: Alignment.centerLeft,
+          child: Text(widget.user.userInfo[index].phone),
+        ),
+        Container(
+          width: 100,
+          height: 52,
+          padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
+          alignment: Alignment.centerLeft,
+          child: Text(widget.user.userInfo[index].registerDate),
+        ),
+        Container(
+          width: 200,
+          height: 52,
+          padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
+          alignment: Alignment.centerLeft,
+          child: Text(widget.user.userInfo[index].terminationDate),
+        ),
+      ],
+    );
+  }
+  
   Color? _iconsColor(BuildContext context) {
     final theme = NeumorphicTheme.of(context);
     if (theme!.isUsingDark) {
@@ -229,4 +328,6 @@ Widget switchScreen(AppState app_provider) {
     default:
       throw Exception("$app_provider.app_screen is not a valid screen state");
   }
+
+  
 }
\ No newline at end of file
diff --git a/magnet_app/macos/Runner.xcodeproj/project.pbxproj b/magnet_app/macos/Runner.xcodeproj/project.pbxproj
index 13e08f1..644f9eb 100644
--- a/magnet_app/macos/Runner.xcodeproj/project.pbxproj
+++ b/magnet_app/macos/Runner.xcodeproj/project.pbxproj
@@ -259,7 +259,7 @@
 			isa = PBXProject;
 			attributes = {
 				LastSwiftUpdateCheck = 0920;
-				LastUpgradeCheck = 1430;
+				LastUpgradeCheck = 1510;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					331C80D4294CF70F00263BE5 = {
diff --git a/magnet_app/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/magnet_app/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
index 1e7d2cb..899acfa 100644
--- a/magnet_app/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
+++ b/magnet_app/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1430"
+   LastUpgradeVersion = "1510"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
diff --git a/magnet_app/pubspec.lock b/magnet_app/pubspec.lock
index 8592c1d..b764265 100644
--- a/magnet_app/pubspec.lock
+++ b/magnet_app/pubspec.lock
@@ -313,6 +313,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
+  horizontal_data_table:
+    dependency: "direct main"
+    description:
+      name: horizontal_data_table
+      sha256: c8ab5256bbced698a729f3e0ff2cb0e8e97416cdbb082860370eaf883badf722
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.3.1"
   http:
     dependency: transitive
     description:
diff --git a/magnet_app/pubspec.yaml b/magnet_app/pubspec.yaml
index 0101bcb..f335433 100644
--- a/magnet_app/pubspec.yaml
+++ b/magnet_app/pubspec.yaml
@@ -48,6 +48,7 @@ dependencies:
   # For the Enterprise Edition add `cbl_flutter_ee` instead.
   cbl_flutter_ce: ^2.2.2
   iconic: ^0.0.3
+  horizontal_data_table: ^4.3.1
   flutter_neumorphic:
     git:
       url: https://github.com/truedat101/Flutter-Neumorphic