diff --git a/assets/langs/ar-SA.json b/assets/langs/ar-SA.json
index b8a7eb4..e17edaa 100644
--- a/assets/langs/ar-SA.json
+++ b/assets/langs/ar-SA.json
@@ -407,6 +407,8 @@
   "rateUI": ".1 كيف تريد تقييم التطبيق",
   "submitSurvey":"ارسال الاستبيان",
   "typeHere": "اكتب هنا",
+  "info_detail": "تفاصيل المعلومات",
+  "amount_detail": "تفاصيل المبلغ",
   "currentBalance": "الرصيد الحالي",
   "currentLeaveBalance" : "رصيد الاجازات الحالي",
   "calculatedDays": "الايام المحسوبه",
diff --git a/assets/langs/en-US.json b/assets/langs/en-US.json
index 14f05c3..d16cfa1 100644
--- a/assets/langs/en-US.json
+++ b/assets/langs/en-US.json
@@ -407,6 +407,8 @@
   "rateUI": "1. How would you rate this UI?",
   "submitSurvey":"Submit Survey",
   "typeHere": "Type here",
+  "info_detail": "Info Detail",
+  "amount_detail": "Amount Detail",
   "currentBalance": "Current Balance",
   "currentLeaveBalance" : "Current Leave Balance",
   "calculatedDays": "Calculated Days",
diff --git a/lib/extensions/int_extensions.dart b/lib/extensions/int_extensions.dart
index f46d5bb..16bdd29 100644
--- a/lib/extensions/int_extensions.dart
+++ b/lib/extensions/int_extensions.dart
@@ -10,4 +10,6 @@ extension IntExtensions on int {
   Widget get divider => Divider(height: toDouble(), thickness: toDouble(), color: MyColors.lightGreyEFColor);
 
   Widget get makeItSquare => SizedBox(width: toDouble(), height: toDouble());
+
+
 }
diff --git a/lib/extensions/string_extensions.dart b/lib/extensions/string_extensions.dart
index 5fa9f8b..a9075c7 100644
--- a/lib/extensions/string_extensions.dart
+++ b/lib/extensions/string_extensions.dart
@@ -1,3 +1,4 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:intl/intl.dart';
 import 'package:mohem_flutter_app/classes/colors.dart';
@@ -45,6 +46,20 @@ extension EmailValidator on String {
         ),
       );
 
+  Widget toText12Auto({Color? color, bool isUnderLine = false, bool isBold = false, bool isCenter = false, int maxLine = 0}) => AutoSizeText(
+    this,
+    textAlign: isCenter ? TextAlign.center : null,
+    maxLines: (maxLine > 0) ? maxLine : null,
+    minFontSize: 8,
+    style: TextStyle(
+      fontSize: 12,
+      fontWeight: isBold ? FontWeight.bold : FontWeight.w600,
+      color: color ?? MyColors.darkTextColor,
+      letterSpacing: -0.72,
+      decoration: isUnderLine ? TextDecoration.underline : null,
+    ),
+  );
+
   Widget toText13({Color? color, bool isUnderLine = false}) => Text(
         this,
         style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.52, decoration: isUnderLine ? TextDecoration.underline : null),
diff --git a/lib/generated/locale_keys.g.dart b/lib/generated/locale_keys.g.dart
index 9f6195b..88d0468 100644
--- a/lib/generated/locale_keys.g.dart
+++ b/lib/generated/locale_keys.g.dart
@@ -408,6 +408,8 @@ abstract class  LocaleKeys {
   static const rateUI = 'rateUI';
   static const submitSurvey = 'submitSurvey';
   static const typeHere = 'typeHere';
+  static const info_detail = 'info_detail';
+  static const amount_detail = 'amount_detail';
   static const currentBalance = 'currentBalance';
   static const currentLeaveBalance = 'currentLeaveBalance';
   static const calculatedDays = 'calculatedDays';
diff --git a/lib/models/get_page_notification.dart b/lib/models/get_page_notification.dart
new file mode 100644
index 0000000..2209a87
--- /dev/null
+++ b/lib/models/get_page_notification.dart
@@ -0,0 +1,157 @@
+// To parse this JSON data, do
+//
+//     final getPageNotification = getPageNotificationFromJson(jsonString);
+
+import 'dart:convert';
+
+GetPageNotification getPageNotificationFromJson(String str) => GetPageNotification.fromJson(json.decode(str));
+
+String getPageNotificationToJson(GetPageNotification data) => json.encode(data.toJson());
+
+class GetPageNotification {
+  GetPageNotification({
+    this.statusCode,
+    this.message,
+    this.originalErrMsg,
+    this.result,
+  });
+
+  final int? statusCode;
+  final dynamic message;
+  final dynamic originalErrMsg;
+  final GetPageNotificationResult? result;
+
+  factory GetPageNotification.fromJson(Map<String, dynamic> json) => GetPageNotification(
+    statusCode: json["statusCode"] == null ? null : json["statusCode"],
+    message: json["message"],
+    originalErrMsg: json["originalErrMsg"],
+    result: json["result"] == null ? null : GetPageNotificationResult.fromJson(json["result"]),
+  );
+
+  Map<String, dynamic> toJson() => {
+    "statusCode": statusCode == null ? null : statusCode,
+    "message": message,
+    "originalErrMsg": originalErrMsg,
+    "result": result == null ? null : result!.toJson(),
+  };
+}
+
+class GetPageNotificationResult {
+  GetPageNotificationResult({
+    this.totalItemsCount,
+    this.data,
+    this.errormsg,
+  });
+
+  final dynamic totalItemsCount;
+  final GetPageNotificationData? data;
+  final dynamic errormsg;
+
+  factory GetPageNotificationResult.fromJson(Map<String, dynamic> json) => GetPageNotificationResult(
+    totalItemsCount: json["totalItemsCount"],
+    data: json["data"] == null ? null : GetPageNotificationData.fromJson(json["data"]),
+    errormsg: json["errormsg"],
+  );
+
+  Map<String, dynamic> toJson() => {
+    "totalItemsCount": totalItemsCount,
+    "data": data == null ? null : data!.toJson(),
+    "errormsg": errormsg,
+  };
+}
+
+class GetPageNotificationData {
+  GetPageNotificationData({
+    this.notificationMasterId,
+    this.notificationType,
+    this.referenceItemId,
+    this.notificationTitle,
+    this.enableAt,
+    this.applicationItemId,
+    this.startDate,
+    this.endDate,
+    this.isRepeat,
+    this.channelId,
+    this.serviceId,
+    this.channelName,
+    this.serviceName,
+    this.isDeleted,
+    this.showDelete,
+    this.advertisement,
+    this.survey,
+    this.isActive,
+    this.pageSize,
+    this.pageNo,
+    this.languageId,
+  });
+
+  final String? notificationMasterId;
+  final String? notificationType;
+  final int? referenceItemId;
+  final String? notificationTitle;
+  final String? enableAt;
+  final dynamic applicationItemId;
+  final dynamic startDate;
+  final dynamic endDate;
+  final bool? isRepeat;
+  final int? channelId;
+  final int? serviceId;
+  final String? channelName;
+  final String? serviceName;
+  final bool? isDeleted;
+  final bool? showDelete;
+  final dynamic advertisement;
+  final dynamic survey;
+  final dynamic isActive;
+  final dynamic pageSize;
+  final dynamic pageNo;
+  final dynamic languageId;
+
+  factory GetPageNotificationData.fromJson(Map<String, dynamic> json) => GetPageNotificationData(
+    notificationMasterId: json["notificationMasterId"] == null ? null : json["notificationMasterId"],
+    notificationType: json["notificationType"] == null ? null : json["notificationType"],
+    referenceItemId: json["referenceItemId"] == null ? null : json["referenceItemId"],
+    notificationTitle: json["notificationTitle"] == null ? null : json["notificationTitle"],
+    enableAt: json["enableAt"] == null ? null : json["enableAt"],
+    applicationItemId: json["applicationItemId"],
+    startDate: json["startDate"],
+    endDate: json["endDate"],
+    isRepeat: json["isRepeat"] == null ? null : json["isRepeat"],
+    channelId: json["channelId"] == null ? null : json["channelId"],
+    serviceId: json["serviceId"] == null ? null : json["serviceId"],
+    channelName: json["channelName"] == null ? null : json["channelName"],
+    serviceName: json["serviceName"] == null ? null : json["serviceName"],
+    isDeleted: json["isDeleted"] == null ? null : json["isDeleted"],
+    showDelete: json["showDelete"] == null ? null : json["showDelete"],
+    advertisement: json["advertisement"],
+    survey: json["survey"],
+    isActive: json["isActive"],
+    pageSize: json["pageSize"],
+    pageNo: json["pageNo"],
+    languageId: json["languageId"],
+  );
+
+  Map<String, dynamic> toJson() => {
+    "notificationMasterId": notificationMasterId == null ? null : notificationMasterId,
+    "notificationType": notificationType == null ? null : notificationType,
+    "referenceItemId": referenceItemId == null ? null : referenceItemId,
+    "notificationTitle": notificationTitle == null ? null : notificationTitle,
+    "enableAt": enableAt == null ? null : enableAt,
+    "applicationItemId": applicationItemId,
+    "startDate": startDate,
+    "endDate": endDate,
+    "isRepeat": isRepeat == null ? null : isRepeat,
+    "channelId": channelId == null ? null : channelId,
+    "serviceId": serviceId == null ? null : serviceId,
+    "channelName": channelName == null ? null : channelName,
+    "serviceName": serviceName == null ? null : serviceName,
+    "isDeleted": isDeleted == null ? null : isDeleted,
+    "showDelete": showDelete == null ? null : showDelete,
+    "advertisement": advertisement,
+    "survey": survey,
+    "isActive": isActive,
+    "pageSize": pageSize,
+    "pageNo": pageNo,
+    "languageId": languageId,
+  };
+}
diff --git a/lib/ui/dialogs/id/employee_digital_id_dialog.dart b/lib/ui/dialogs/id/employee_digital_id_dialog.dart
index fd4a266..034a133 100644
--- a/lib/ui/dialogs/id/employee_digital_id_dialog.dart
+++ b/lib/ui/dialogs/id/employee_digital_id_dialog.dart
@@ -1,5 +1,6 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:mohem_flutter_app/app_state/app_state.dart';
 import 'package:mohem_flutter_app/extensions/int_extensions.dart';
 import 'package:mohem_flutter_app/extensions/string_extensions.dart';
@@ -37,12 +38,17 @@ class EmployeeDigitialIdDialog extends StatelessWidget {
                         boxShadow: [BoxShadow(color: Colors.white60, blurRadius: 10, spreadRadius: 10)],
                       ),
                       clipBehavior: Clip.antiAlias,
-                      child: Image.memory(
-                        Utils.getPostBytes(
-                          AppState().memberInformationList!.eMPLOYEEIMAGE ?? "",
-                        ),
-                        fit: BoxFit.cover,
-                      ),
+                      child: (AppState().memberInformationList!.eMPLOYEEIMAGE == null || AppState().memberInformationList!.eMPLOYEEIMAGE!.isEmpty)
+                          ? Container(
+                              color: Colors.grey[300],
+                              child: SvgPicture.asset("assets/images/user.svg"),
+                            )
+                          : Image.memory(
+                              Utils.getPostBytes(
+                                AppState().memberInformationList!.eMPLOYEEIMAGE ?? "",
+                              ),
+                              fit: BoxFit.cover,
+                            ),
                     ),
                     16.width,
                     (AppState().memberInformationList!.eMPLOYEENUMBER ?? "").toText20(),
@@ -55,9 +61,9 @@ class EmployeeDigitialIdDialog extends StatelessWidget {
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       12.height,
-                      (AppState().memberInformationList!.eMPLOYEENAME ?? "").toText16(),
+                      (AppState().memberInformationList!.eMPLOYEEDISPLAYNAME ?? "").toText16(),
                       4.height,
-                      (AppState().memberInformationList!.pOSITIONNAME ?? "").toText12(isBold: false),
+                      (showJobName(AppState().memberInformationList!.pOSITIONNAME ?? "")).toText12(isBold: false),
                     ],
                   ),
                 ),
@@ -76,4 +82,14 @@ class EmployeeDigitialIdDialog extends StatelessWidget {
       ),
     );
   }
+
+  String showJobName(String position){
+    try{
+      var p=position.split(".");
+      return p[0]+" "+p[1];
+    }catch(e){
+      return "";
+    }
+
+  }
 }
diff --git a/lib/ui/login/login_screen.dart b/lib/ui/login/login_screen.dart
index ba90fbf..3518b18 100644
--- a/lib/ui/login/login_screen.dart
+++ b/lib/ui/login/login_screen.dart
@@ -130,8 +130,8 @@ class _LoginScreenState extends State<LoginScreen> {
     if (isAppOpenBySystem == null) {
       isAppOpenBySystem = (ModalRoute.of(context)!.settings.arguments ?? true) as bool;
       print('isAppOpenBySystem:$isAppOpenBySystem');
-      // username.text = "15153";
-      // password.text = "Abcd@12345";
+      username.text = "15153";
+      password.text = "Abcd@12345";
       if (isAppOpenBySystem!) checkFirebaseToken();
     }
 
diff --git a/lib/ui/work_list/itg_fragments/request_detail_fragment.dart b/lib/ui/work_list/itg_fragments/request_detail_fragment.dart
index 6c69c47..6092bef 100644
--- a/lib/ui/work_list/itg_fragments/request_detail_fragment.dart
+++ b/lib/ui/work_list/itg_fragments/request_detail_fragment.dart
@@ -11,9 +11,13 @@ class RequestDetailFragment extends StatelessWidget {
   List<Fields> fields;
 
   RequestDetailFragment({Key? key, this.fields = const <Fields>[]}) : super(key: key);
-
+  double itemHeight = 0;
+  double itemWidth = 0;
   @override
   Widget build(BuildContext context) {
+    var size = MediaQuery.of(context).size;
+    itemHeight = (size.height - kToolbarHeight - 24) / 9;
+    itemWidth = size.width / 2;
     List<Widget> uiList = [detailView()];
     return Container(
       width: double.infinity,
@@ -28,6 +32,43 @@ class RequestDetailFragment extends StatelessWidget {
   }
 
   Widget detailView() {
+    bool isOdd = false;
+    if (fields.length % 2 != 0) {
+      isOdd = true;
+      fields.add(new Fields());
+    }
+    return GridView.builder(
+      itemCount: fields.length,
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      itemBuilder: (context, index) {
+        if (fields[index].value == null) {
+          return ItemDetailViewGridItem(
+            index,
+            fields[index].title, fields[index].multipleValue?.join(", ") ?? "",
+            isNeedToShowEmptyDivider: (fields.length == index + 1)
+                ? isOdd
+                ? true
+                : false
+                : false,
+          );
+        }
+        return ItemDetailViewGridItem(
+          index,
+          fields[index].title,
+          fields[index].value ?? "",
+          isNeedToShowEmptyDivider: (fields.length == index + 1)
+              ? isOdd
+              ? true
+              : false
+              : false,
+        );
+      },
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 2,
+        childAspectRatio: (itemWidth / itemHeight),
+      ),
+    ).objectContainerView();
     return ListView.separated(
             shrinkWrap: true,
             physics: const NeverScrollableScrollPhysics(),
diff --git a/lib/ui/work_list/worklist_fragments/detail_fragment.dart b/lib/ui/work_list/worklist_fragments/detail_fragment.dart
index 3953a35..43b5d7d 100644
--- a/lib/ui/work_list/worklist_fragments/detail_fragment.dart
+++ b/lib/ui/work_list/worklist_fragments/detail_fragment.dart
@@ -23,37 +23,56 @@ class _DetailFragmentState extends State<DetailFragment> {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
-      children: [
-        Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            ItemDetailView(LocaleKeys.from.tr(), widget.workListData!.fROMUSER ?? ""),
-            ItemDetailView(LocaleKeys.to.tr(), widget.workListData!.tOUSER ?? ""),
-            ItemDetailView(LocaleKeys.sent.tr(), widget.workListData!.bEGINDATE ?? ""),
-            ItemDetailView(LocaleKeys.closed.tr(), widget.workListData!.eNDDATE ?? ""),
-            ItemDetailView(LocaleKeys.id.tr(), widget.workListData!.nOTIFICATIONID?.toString() ?? ""),
-            ItemDetailView(LocaleKeys.responder.tr(), widget.workListData!.rESPONDER ?? ""),
-          ],
-        ).objectContainerView(),
-        12.height,
-        Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            ItemDetailView(LocaleKeys.employeeNumber.tr(), widget.memberInformationListModel!.eMPLOYEENUMBER ?? ""),
-            ItemDetailView(LocaleKeys.name.tr(), (AppState().isArabic(context) ? widget.memberInformationListModel!.eMPLOYEENAMEAr : widget.memberInformationListModel!.eMPLOYEENAMEEn) ?? ""),
-            ItemDetailView(LocaleKeys.jobTitle.tr(), makePositionName(widget.memberInformationListModel!.pOSITIONNAME ?? "")),
-            ItemDetailView(LocaleKeys.grade.tr(), widget.memberInformationListModel!.gRADENAME ?? ""),
-            ItemDetailView(LocaleKeys.jobCategory.tr(), makePositionName(widget.memberInformationListModel!.pOSITIONNAME ?? "")),
-            ItemDetailView(LocaleKeys.category.tr(), widget.memberInformationListModel!.eMPLOYMENTCATEGORYMEANING ?? ""),
-            ItemDetailView(LocaleKeys.email.tr(), widget.memberInformationListModel!.eMPLOYEEEMAILADDRESS ?? ""),
-            ItemDetailView(LocaleKeys.payrollBranch.tr(), widget.memberInformationListModel!.pAYROLLNAME ?? ""),
-          ],
-        ).objectContainerView(),
-      ],
-    ).paddingAll(21);
+    return SingleChildScrollView(
+      child: Column(
+        children: [
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              ItemDetailGrid(
+                ItemDetailViewCol(LocaleKeys.from.tr(), widget.workListData!.fROMUSER ?? ""),
+                ItemDetailViewCol(LocaleKeys.to.tr(), widget.workListData!.tOUSER ?? ""),
+              ),
+              ItemDetailGrid(
+                ItemDetailViewCol(LocaleKeys.sent.tr(), widget.workListData!.bEGINDATE ?? ""),
+                ItemDetailViewCol(LocaleKeys.closed.tr(), widget.workListData!.eNDDATE ?? ""),
+              ),
+              ItemDetailGrid(
+                ItemDetailViewCol(LocaleKeys.id.tr(), widget.workListData!.nOTIFICATIONID?.toString() ?? ""),
+                ItemDetailViewCol(LocaleKeys.responder.tr(), widget.workListData!.rESPONDER ?? ""),
+                isItLast: true,
+              ),
+            ],
+          ).objectContainerView(),
+          12.height,
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              ItemDetailGrid(
+                ItemDetailViewCol(LocaleKeys.employeeNumber.tr(), widget.memberInformationListModel!.eMPLOYEENUMBER ?? ""),
+                ItemDetailViewCol(
+                    LocaleKeys.employeeName.tr(), (AppState().isArabic(context) ? widget.memberInformationListModel!.eMPLOYEENAMEAr : widget.memberInformationListModel!.eMPLOYEENAMEEn) ?? ""),
+              ),
+              ItemDetailGrid(
+                ItemDetailViewCol(LocaleKeys.jobTitle.tr(), makePositionName(widget.memberInformationListModel!.pOSITIONNAME ?? "")),
+                ItemDetailViewCol(LocaleKeys.grade.tr(), widget.memberInformationListModel!.gRADENAME ?? ""),
+              ),
+              ItemDetailGrid(
+                ItemDetailViewCol(LocaleKeys.jobCategory.tr(), makePositionName(widget.memberInformationListModel!.pOSITIONNAME ?? "")),
+                ItemDetailViewCol(LocaleKeys.category.tr(), widget.memberInformationListModel!.eMPLOYMENTCATEGORYMEANING ?? ""),
+              ),
+              ItemDetailGrid(
+                ItemDetailViewCol(LocaleKeys.employeeEmailAddress.tr(), widget.memberInformationListModel!.eMPLOYEEEMAILADDRESS ?? ""),
+                ItemDetailViewCol(LocaleKeys.payrollBranch.tr(), widget.memberInformationListModel!.pAYROLLNAME ?? ""),
+                isItLast: true,
+              ),
+            ],
+          ).objectContainerView(),
+        ],
+      ).paddingAll(21),
+    );
   }
 
   String makePositionName(String job) {
diff --git a/lib/ui/work_list/worklist_fragments/info_fragments.dart b/lib/ui/work_list/worklist_fragments/info_fragments.dart
index e7a2787..adab78c 100644
--- a/lib/ui/work_list/worklist_fragments/info_fragments.dart
+++ b/lib/ui/work_list/worklist_fragments/info_fragments.dart
@@ -42,21 +42,38 @@ class InfoFragment extends StatelessWidget {
     this.getContactNotificationBodyList,
   });
 
+  double itemHeight = 0;
+  double itemWidth = 0;
+
   @override
   Widget build(BuildContext context) {
+    var size = MediaQuery.of(context).size;
+    itemHeight = (size.height - kToolbarHeight - 24) / 9;
+    itemWidth = size.width / 2;
+
     List<Widget> uiList = [
       if ((workListData?.iTEMTYPE ?? "") == "INVMOA")
         Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisSize: MainAxisSize.min,
           children: [
-            ItemDetailView(LocaleKeys.from.tr(), workListData!.fROMUSER ?? ""),
-            ItemDetailView(LocaleKeys.to.tr(), workListData!.tOUSER ?? ""),
-            ItemDetailView(LocaleKeys.sent.tr(), workListData!.bEGINDATE ?? ""),
-            ItemDetailView(LocaleKeys.closed.tr(), workListData!.eNDDATE ?? ""),
-            ItemDetailView(LocaleKeys.id.tr(), workListData!.nOTIFICATIONID?.toString() ?? ""),
-            ItemDetailView(LocaleKeys.responder.tr(), workListData!.rESPONDER ?? ""),
-            ItemDetailView(LocaleKeys.subject.tr(), workListData!.sUBJECT ?? ""),
+            ItemDetailGrid(
+              ItemDetailViewCol(LocaleKeys.from.tr(), workListData!.fROMUSER ?? ""),
+              ItemDetailViewCol(LocaleKeys.to.tr(), workListData!.tOUSER ?? ""),
+            ),
+            ItemDetailGrid(
+              ItemDetailViewCol(LocaleKeys.sent.tr(), workListData!.bEGINDATE ?? ""),
+              ItemDetailViewCol(LocaleKeys.closed.tr(), workListData!.eNDDATE ?? ""),
+            ),
+            ItemDetailGrid(
+              ItemDetailViewCol(LocaleKeys.id.tr(), workListData!.nOTIFICATIONID?.toString() ?? ""),
+              ItemDetailViewCol(LocaleKeys.responder.tr(), workListData!.rESPONDER ?? ""),
+            ),
+            ItemDetailGrid(
+              ItemDetailViewCol(LocaleKeys.subject.tr(), workListData!.sUBJECT ?? ""),
+              Container(),
+              isItLast: true,
+            ),
           ],
         ).objectContainerView(),
       if (getStampMsNotifications?.isNotEmpty ?? false) getStampMsNotificationsListView(getStampMsNotifications ?? []).objectContainerView(title: "Stamp Notifications"),
@@ -89,32 +106,68 @@ class InfoFragment extends StatelessWidget {
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisSize: MainAxisSize.min,
               children: [
-                ItemDetailView(LocaleKeys.description.tr(), workListData!.fROMUSER ?? ""),
-                ItemDetailView(LocaleKeys.from.tr(), workListData!.fROMUSER ?? ""),
-                ItemDetailView(LocaleKeys.to.tr(), workListData!.tOUSER ?? ""),
-                ItemDetailView(LocaleKeys.sent.tr(), workListData!.bEGINDATE ?? ""),
-                ItemDetailView(LocaleKeys.closed.tr(), workListData!.eNDDATE ?? ""),
-                ItemDetailView(LocaleKeys.id.tr(), workListData!.nOTIFICATIONID?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.supplier.tr(), poHeaderList[index].vENDORNAME ?? ""),
-                ItemDetailView(LocaleKeys.site.tr(), poHeaderList[index].vENDORSITECODE ?? ""),
-                ItemDetailView(LocaleKeys.buyer.tr(), poHeaderList[index].bUYER ?? ""),
-                ItemDetailView(LocaleKeys.preparer.tr(), poHeaderList[index].pREPARER ?? ""),
-                ItemDetailView(LocaleKeys.creationDate.tr(), poHeaderList[index].cREATIONDATE ?? ""),
-                ItemDetailView(LocaleKeys.shipToLocation.tr(), poHeaderList[index].sHIPTOLOCATIONNAME ?? ""),
-                ItemDetailView(LocaleKeys.quotationNumber.tr(), poHeaderList[index].qUOTATIONNUMBER ?? ""),
-                ItemDetailView(LocaleKeys.quotationDate.tr(), poHeaderList[index].qUOTATIONDATE ?? ""),
-                ItemDetailView(LocaleKeys.paymentTerms.tr(), poHeaderList[index].pAYMENTTERMS ?? ""),
-                ItemDetailView(LocaleKeys.currency.tr(), poHeaderList[index].cURRENCYNAME ?? ""),
-                ItemDetailView(LocaleKeys.grossAmount.tr(), poHeaderList[index].gROSSAMOUNT?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.discountAmount.tr(), poHeaderList[index].dISCOUNTAMOUNT?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.customDuty.tr(), poHeaderList[index].cUSTOMDUTY?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.shipHandle.tr(), poHeaderList[index].sHIPHANDLE?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.otherCharges.tr(), poHeaderList[index].oTHERCHARGES?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.totalPOAmountWithVAT.tr(), poHeaderList[index].qUOTATIONDATE ?? ""),
-                ItemDetailView(LocaleKeys.totalPOAmountInWords.tr(), poHeaderList[index].tOTPOAMTWORD ?? ""),
+                Column(
+                  children: [
+                    ItemDetailGrid(
+                      ItemDetailViewCol(LocaleKeys.description.tr(), workListData!.fROMUSER ?? ""),
+                      ItemDetailViewCol(LocaleKeys.from.tr(), workListData!.fROMUSER ?? ""),
+                    ),
+                    ItemDetailGrid(
+                      ItemDetailViewCol(LocaleKeys.to.tr(), workListData!.tOUSER ?? ""),
+                      ItemDetailViewCol(LocaleKeys.sent.tr(), workListData!.bEGINDATE ?? ""),
+                    ),
+                    ItemDetailGrid(
+                      ItemDetailViewCol(LocaleKeys.closed.tr(), workListData!.eNDDATE ?? ""),
+                      ItemDetailViewCol(LocaleKeys.id.tr(), workListData!.nOTIFICATIONID?.toString() ?? ""),
+                    ),
+                    ItemDetailGrid(
+                      ItemDetailViewCol(LocaleKeys.supplier.tr(), poHeaderList[index].vENDORNAME ?? ""),
+                      ItemDetailViewCol(LocaleKeys.site.tr(), poHeaderList[index].vENDORSITECODE ?? ""),
+                    ),
+                    ItemDetailGrid(
+                      ItemDetailViewCol(LocaleKeys.buyer.tr(), poHeaderList[index].bUYER ?? ""),
+                      ItemDetailViewCol(LocaleKeys.preparer.tr(), poHeaderList[index].pREPARER ?? ""),
+                    ),
+                    ItemDetailGrid(
+                      ItemDetailViewCol(LocaleKeys.creationDate.tr(), poHeaderList[index].cREATIONDATE ?? ""),
+                      ItemDetailViewCol(LocaleKeys.shipToLocation.tr(), poHeaderList[index].sHIPTOLOCATIONNAME ?? ""),
+                    ),
+                    ItemDetailGrid(
+                      ItemDetailViewCol(LocaleKeys.quotationNumber.tr(), poHeaderList[index].qUOTATIONNUMBER ?? ""),
+                      ItemDetailViewCol(LocaleKeys.quotationDate.tr(), poHeaderList[index].qUOTATIONDATE ?? ""),
+                    ),
+                    ItemDetailGrid(
+                      ItemDetailViewCol(LocaleKeys.paymentTerms.tr(), poHeaderList[index].pAYMENTTERMS ?? ""),
+                      ItemDetailViewCol(LocaleKeys.currency.tr(), poHeaderList[index].cURRENCYNAME ?? ""),
+                      isItLast: true,
+                    ),
+                  ],
+                ).objectContainerView(title: LocaleKeys.info_detail.tr()),
+                12.height,
+                Column(
+                  children: [
+                    ItemDetailGrid(
+                      ItemDetailViewCol(LocaleKeys.grossAmount.tr(), poHeaderList[index].gROSSAMOUNT?.toString() ?? ""),
+                      ItemDetailViewCol(LocaleKeys.discountAmount.tr(), poHeaderList[index].dISCOUNTAMOUNT?.toString() ?? ""),
+                    ),
+                    ItemDetailGrid(
+                      ItemDetailViewCol(LocaleKeys.customDuty.tr(), poHeaderList[index].cUSTOMDUTY?.toString() ?? ""),
+                      ItemDetailViewCol(LocaleKeys.shipHandle.tr(), poHeaderList[index].sHIPHANDLE?.toString() ?? ""),
+                    ),
+                    ItemDetailGrid(
+                      ItemDetailViewCol(LocaleKeys.otherCharges.tr(), poHeaderList[index].oTHERCHARGES?.toString() ?? ""),
+                      ItemDetailViewCol(LocaleKeys.totalPOAmountWithVAT.tr(), poHeaderList[index].qUOTATIONDATE ?? ""),
+                    ),
+                    ItemDetailGrid(
+                      ItemDetailViewCol(LocaleKeys.totalPOAmountInWords.tr(), poHeaderList[index].tOTPOAMTWORD ?? ""),
+                      Container(),
+                      isItLast: true,
+                    ),
+                  ],
+                ).objectContainerView(title: LocaleKeys.amount_detail.tr()),
               ],
-            ).objectContainerView(),
-        separatorBuilder: (cxt, index) => 1.divider,
+            ),
+        separatorBuilder: (cxt, index) => 4.height,
         itemCount: poHeaderList.length);
   }
 
@@ -135,19 +188,35 @@ class InfoFragment extends StatelessWidget {
         itemBuilder: (cxt, index) => Column(
               mainAxisSize: MainAxisSize.min,
               children: [
-                ItemDetailView(LocaleKeys.employeeNumber.tr(), list[index].eMPLOYEENUMBER.toString()),
-                ItemDetailView(LocaleKeys.assignmentNumber.tr(), list[index].aSSIGNMENTNUMBER.toString()),
-                ItemDetailView(LocaleKeys.employeeName.tr(), list[index].eMPLOYEENAME.toString()),
-                ItemDetailView(LocaleKeys.scheduleDate.tr(), DateUtil.formatDateToDate(DateUtil.convertStringToDate(list[index].sCHEDULEDATE.toString()), false)),
-                ItemDetailView(LocaleKeys.shiftType.tr(), list[index].sHTTYPEDESC.toString()),
-                ItemDetailView(LocaleKeys.shift.tr(), list[index].sHTNAME.toString()),
-                ItemDetailView(LocaleKeys.breakText.tr(), list[index].bREAKNAME.toString()),
-                ItemDetailView(LocaleKeys.actualSwipeStart.tr(), list[index].sHTACTUALSTARTTIME.toString()),
-                ItemDetailView(LocaleKeys.actualSwipeEnd.tr(), list[index].sHTACTUALENDTIME.toString()),
-                ItemDetailView(LocaleKeys.approvedSwipeStart.tr(), list[index].aPPROVEDSTARTTIME.toString()),
-                ItemDetailView(LocaleKeys.approvedSwipeStartReason.tr(), list[index].aPPROVEDSTARTREASON.toString()),
-                ItemDetailView(LocaleKeys.approvedSwipeEnd.tr(), ""),
-                ItemDetailView(LocaleKeys.approvedSwipeEndReason.tr(), list[index].aPPROVEDENDREASONDESC.toString()),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.employeeNumber.tr(), list[index].eMPLOYEENUMBER.toString()),
+                  ItemDetailViewCol(LocaleKeys.assignmentNumber.tr(), list[index].aSSIGNMENTNUMBER.toString()),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.employeeName.tr(), list[index].eMPLOYEENAME.toString()),
+                  ItemDetailViewCol(LocaleKeys.scheduleDate.tr(), DateUtil.formatDateToDate(DateUtil.convertStringToDate(list[index].sCHEDULEDATE.toString()), false)),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.shiftType.tr(), list[index].sHTTYPEDESC.toString()),
+                  ItemDetailViewCol(LocaleKeys.shift.tr(), list[index].sHTNAME.toString()),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.breakText.tr(), list[index].bREAKNAME.toString()),
+                  ItemDetailViewCol(LocaleKeys.actualSwipeStart.tr(), list[index].sHTACTUALSTARTTIME.toString()),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.actualSwipeEnd.tr(), list[index].sHTACTUALENDTIME.toString()),
+                  ItemDetailViewCol(LocaleKeys.approvedSwipeStart.tr(), list[index].aPPROVEDSTARTTIME.toString()),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.approvedSwipeStartReason.tr(), list[index].aPPROVEDSTARTREASON.toString()),
+                  ItemDetailViewCol(LocaleKeys.approvedSwipeEnd.tr(), ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.approvedSwipeEndReason.tr(), list[index].aPPROVEDENDREASONDESC.toString()),
+                  Container(),
+                  isItLast: true,
+                ),
               ],
             ),
         separatorBuilder: (cxt, index) => 1.divider.paddingOnly(top: 8, bottom: 8),
@@ -161,10 +230,15 @@ class InfoFragment extends StatelessWidget {
         itemBuilder: (cxt, index) => Column(
               mainAxisSize: MainAxisSize.min,
               children: [
-                ItemDetailView(LocaleKeys.employeeNumber.tr(), list[index].eMPLOYEENUMBER.toString()),
-                ItemDetailView(LocaleKeys.assignmentNumber.tr(), list[index].aSSIGNMENTNUMBER.toString()),
-                ItemDetailView(LocaleKeys.name.tr(), list[index].eMPLOYEENAME.toString()),
-                ItemDetailView(LocaleKeys.scheduleDate.tr(), DateUtil.formatDateToDate(DateUtil.convertStringToDate(list[index].sCHEDULEDATE.toString()), false)),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.employeeNumber.tr(), list[index].eMPLOYEENUMBER.toString()),
+                  ItemDetailViewCol(LocaleKeys.assignmentNumber.tr(), list[index].aSSIGNMENTNUMBER.toString()),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.employeeName.tr(), list[index].eMPLOYEENAME.toString()),
+                  ItemDetailViewCol(LocaleKeys.scheduleDate.tr(), DateUtil.formatDateToDate(DateUtil.convertStringToDate(list[index].sCHEDULEDATE.toString()), false)),
+                  isItLast: true,
+                ),
               ],
             ),
         separatorBuilder: (cxt, index) => 1.divider.paddingOnly(top: 8, bottom: 8),
@@ -178,16 +252,26 @@ class InfoFragment extends StatelessWidget {
         itemBuilder: (cxt, index) => Column(
               mainAxisSize: MainAxisSize.min,
               children: [
-                ItemDetailView(LocaleKeys.operatingUnit.tr(), itemCreationHeader[index].oPERATINGUNIT?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.category.tr(), itemCreationHeader[index].cATEGORY?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.requester.tr(), itemCreationHeader[index].rEQUESTER?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.analyzedBy.tr(), itemCreationHeader[index].aNALYZEDBY?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.approvedDate.tr(), itemCreationHeader[index].aPPROVEDDATE?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.itemType.tr(), itemCreationHeader[index].iTEMTYPE?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.relatedTo.tr(), itemCreationHeader[index].rELATEDTO?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.requestDate.tr(), DateUtil.formatDateToDate(DateUtil.convertStringToDate(itemCreationHeader[index].rEQUESTDATE.toString()), false)),
-                ItemDetailView(LocaleKeys.analyzedDate.tr(), itemCreationHeader[index].aNALYZEDDATE?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.urgent.tr(), itemCreationHeader[index].uRGENTFLAGDISP?.toString() ?? ""),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.operatingUnit.tr(), itemCreationHeader[index].oPERATINGUNIT?.toString() ?? ""),
+                  ItemDetailViewCol(LocaleKeys.category.tr(), itemCreationHeader[index].cATEGORY?.toString() ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.requester.tr(), itemCreationHeader[index].rEQUESTER?.toString() ?? ""),
+                  ItemDetailViewCol(LocaleKeys.analyzedBy.tr(), itemCreationHeader[index].aNALYZEDBY?.toString() ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.approvedDate.tr(), itemCreationHeader[index].aPPROVEDDATE?.toString() ?? ""),
+                  ItemDetailViewCol(LocaleKeys.itemType.tr(), itemCreationHeader[index].iTEMTYPE?.toString() ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.relatedTo.tr(), itemCreationHeader[index].rELATEDTO?.toString() ?? ""),
+                  ItemDetailViewCol(LocaleKeys.requestDate.tr(), DateUtil.formatDateToDate(DateUtil.convertStringToDate(itemCreationHeader[index].rEQUESTDATE.toString()), false)),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.analyzedDate.tr(), itemCreationHeader[index].aNALYZEDDATE?.toString() ?? ""),
+                  ItemDetailViewCol(LocaleKeys.urgent.tr(), itemCreationHeader[index].uRGENTFLAGDISP?.toString() ?? ""),
+                ),
               ],
             ).objectContainerView(),
         separatorBuilder: (cxt, index) => 18.height,
@@ -201,13 +285,31 @@ class InfoFragment extends StatelessWidget {
       physics: const NeverScrollableScrollPhysics(),
       itemBuilder: (cxt, index) {
         List<CollectionNotificationEit> dataList = list.isEmpty ? [] : (list[index].collectionNotification ?? []);
-        return ListView.separated(
-                shrinkWrap: true,
-                physics: const NeverScrollableScrollPhysics(),
-                itemBuilder: (cxt, index) => dataList[index].displayFlag == "Y" ? ItemDetailView(dataList[index].segmentPrompt!, dataList[index].segmentValueDsp!) : Container(),
-                separatorBuilder: (cxt, index) => dataList[index].displayFlag == "Y" ? 4.height : 0.height,
-                itemCount: dataList.length)
-            .objectContainerView();
+        dataList = dataList.where((o) => o.displayFlag == "Y").toList();
+        bool isOdd = false;
+        if (dataList.length % 2 != 0) {
+          isOdd = true;
+          dataList.add(new CollectionNotificationEit());
+        }
+        return GridView.builder(
+          itemCount: dataList.length,
+          shrinkWrap: true,
+          physics: const NeverScrollableScrollPhysics(),
+          itemBuilder: (context, index) => ItemDetailViewGridItem(
+            index,
+            dataList[index].segmentPrompt,
+            dataList[index].segmentValueDsp,
+            isNeedToShowEmptyDivider: (dataList.length == index + 1)
+                ? isOdd
+                    ? true
+                    : false
+                : false,
+          ),
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: 2,
+            childAspectRatio: (itemWidth / itemHeight),
+          ),
+        ).objectContainerView();
       },
       separatorBuilder: (cxt, index) => 12.height,
       itemCount: list.length,
@@ -215,21 +317,75 @@ class InfoFragment extends StatelessWidget {
   }
 
   Widget getPhonesNotificationBodyListWidget(List<GetPhonesNotificationBodyList> list) {
-    return ListView.separated(
-        shrinkWrap: true,
-        physics: const NeverScrollableScrollPhysics(),
-        itemBuilder: (cxt, index) => ItemDetailView(LocaleKeys.subject.tr(), list[index].proposedPhoneNumber ?? ""),
-        separatorBuilder: (cxt, index) => 4.height,
-        itemCount: list.length);
+    bool isOdd = false;
+    if (list.length % 2 != 0) {
+      isOdd = true;
+      list.add(new GetPhonesNotificationBodyList());
+    }
+    return GridView.builder(
+      itemCount: list.length,
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      itemBuilder: (context, index) => ItemDetailViewGridItem(
+        index,
+        LocaleKeys.subject.tr(),
+        list[index].proposedPhoneNumber ?? "",
+        isNeedToShowEmptyDivider: (list.length == index + 1)
+            ? isOdd
+                ? true
+                : false
+            : false,
+      ),
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 2,
+        childAspectRatio: (itemWidth / itemHeight),
+      ),
+    );
+    return Container(
+      color: Colors.yellow,
+      child: ListView.separated(
+          shrinkWrap: true,
+          physics: const NeverScrollableScrollPhysics(),
+          itemBuilder: (cxt, index) => ItemDetailViewCol(LocaleKeys.subject.tr(), list[index].proposedPhoneNumber ?? ""),
+          separatorBuilder: (cxt, index) => 4.height,
+          itemCount: list.length),
+    );
   }
 
   Widget getBasicDetNtfBodyListWidget(List<GetBasicDetNtfBodyList> list) {
-    return ListView.separated(
-        shrinkWrap: true,
-        physics: const NeverScrollableScrollPhysics(),
-        itemBuilder: (cxt, index) => ItemDetailView(list[index].segmentPrompt!, list[index].segmentValueDsp!),
-        separatorBuilder: (cxt, index) => 4.height,
-        itemCount: list.length);
+    bool isOdd = false;
+    if (list.length % 2 != 0) {
+      isOdd = true;
+      list.add(new GetBasicDetNtfBodyList());
+    }
+    return GridView.builder(
+      itemCount: list.length,
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      itemBuilder: (context, index) => ItemDetailViewGridItem(
+        index,
+        list[index].segmentPrompt,
+        list[index].segmentValueDsp,
+        isNeedToShowEmptyDivider: (list.length == index + 1)
+            ? isOdd
+                ? true
+                : false
+            : false,
+      ),
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 2,
+        childAspectRatio: (itemWidth / itemHeight),
+      ),
+    );
+    return Container(
+      color: Colors.pink,
+      child: ListView.separated(
+          shrinkWrap: true,
+          physics: const NeverScrollableScrollPhysics(),
+          itemBuilder: (cxt, index) => ItemDetailViewCol(list[index].segmentPrompt!, list[index].segmentValueDsp!),
+          separatorBuilder: (cxt, index) => 4.height,
+          itemCount: list.length),
+    );
   }
 
   Widget getAbsenceCollectionNotificationBodyListWidget(List<GetAbsenceCollectionNotificationBodyList> list) {
@@ -238,10 +394,36 @@ class InfoFragment extends StatelessWidget {
       physics: const NeverScrollableScrollPhysics(),
       itemBuilder: (cxt, index) {
         List<CollectionNotificationAbsence> dataList = list.isEmpty ? [] : (list[index].collectionNotification ?? []);
+        dataList = dataList.where((o) => o.dISPLAYFLAG == "Y").toList();
+        bool isOdd = false;
+        if (dataList.length % 2 != 0) {
+          isOdd = true;
+          dataList.add(new CollectionNotificationAbsence());
+        }
+
+        return GridView.builder(
+          itemCount: dataList.length,
+          shrinkWrap: true,
+          physics: const NeverScrollableScrollPhysics(),
+          itemBuilder: (context, index) => ItemDetailViewGridItem(
+            index,
+            dataList[index].sEGMENTPROMPT,
+            dataList[index].sEGMENTVALUEDSP,
+            isNeedToShowEmptyDivider: (dataList.length == index + 1)
+                ? isOdd
+                    ? true
+                    : false
+                : false,
+          ),
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: 2,
+            childAspectRatio: (itemWidth / itemHeight),
+          ),
+        ).objectContainerView();
         return ListView.separated(
                 shrinkWrap: true,
                 physics: const NeverScrollableScrollPhysics(),
-                itemBuilder: (cxt, index) => dataList[index].dISPLAYFLAG == "Y" ? ItemDetailView(dataList[index].sEGMENTPROMPT!, dataList[index].sEGMENTVALUEDSP!) : Container(),
+                itemBuilder: (cxt, index) => dataList[index].dISPLAYFLAG == "Y" ? ItemDetailViewCol(dataList[index].sEGMENTPROMPT!, dataList[index].sEGMENTVALUEDSP!) : Container(),
                 separatorBuilder: (cxt, index) => dataList[index].dISPLAYFLAG == "Y" ? 4.height : 0.height,
                 itemCount: dataList.length)
             .objectContainerView();
@@ -252,11 +434,41 @@ class InfoFragment extends StatelessWidget {
   }
 
   Widget getContactNotificationBodyListWidget(GetContactNotificationBodyList data) {
-    return ListView.separated(
-        shrinkWrap: true,
-        physics: const NeverScrollableScrollPhysics(),
-        itemBuilder: (cxt, index) => ItemDetailView(data.contactNotificationBody![index].segmentPrompt!, data.contactNotificationBody![index].segmentValueDsp!),
-        separatorBuilder: (cxt, index) => 4.height,
-        itemCount: data.contactNotificationBody!.length);
+    bool isOdd = false;
+    try {
+      if (data.contactNotificationBody!.length % 2 != 0) {
+        isOdd = true;
+        data.contactNotificationBody!.add(new ContactNotificationBody());
+      }
+    } catch (e) {}
+
+    return GridView.builder(
+      itemCount: data.contactNotificationBody!.length,
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      itemBuilder: (context, index) => ItemDetailViewGridItem(
+        index,
+        data.contactNotificationBody![index].segmentPrompt,
+        data.contactNotificationBody![index].segmentValueDsp,
+        isNeedToShowEmptyDivider: (data.contactNotificationBody!.length == index + 1)
+            ? isOdd
+                ? true
+                : false
+            : false,
+      ),
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 2,
+        childAspectRatio: (itemWidth / itemHeight),
+      ),
+    ).objectContainerView();
+    return Container(
+      color: Colors.orange,
+      child: ListView.separated(
+          shrinkWrap: true,
+          physics: const NeverScrollableScrollPhysics(),
+          itemBuilder: (cxt, index) => ItemDetailViewCol(data.contactNotificationBody![index].segmentPrompt!, data.contactNotificationBody![index].segmentValueDsp!),
+          separatorBuilder: (cxt, index) => 4.height,
+          itemCount: data.contactNotificationBody!.length),
+    );
   }
 }
diff --git a/lib/ui/work_list/worklist_fragments/request_fragment.dart b/lib/ui/work_list/worklist_fragments/request_fragment.dart
index 5773ffa..27b1c29 100644
--- a/lib/ui/work_list/worklist_fragments/request_fragment.dart
+++ b/lib/ui/work_list/worklist_fragments/request_fragment.dart
@@ -25,14 +25,16 @@ class RequestFragment extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ListView(
-      physics: const BouncingScrollPhysics(),
-      padding: const EdgeInsets.all(21),
-      children: [
-        if (moNotificationBodyList.isNotEmpty) moNotificationDataView(),
-        if (poLinesList.isNotEmpty) poLinesDataView(),
-        if (itemCreationLines.isNotEmpty) itemCreationLinesView(),
-      ],
+    return Container(
+      child: ListView(
+        physics: const BouncingScrollPhysics(),
+        padding: const EdgeInsets.all(21),
+        children: [
+          if (moNotificationBodyList.isNotEmpty) moNotificationDataView(),
+          if (poLinesList.isNotEmpty) poLinesDataView(),
+          if (itemCreationLines.isNotEmpty) itemCreationLinesView(),
+        ],
+      ),
     );
   }
 
@@ -44,19 +46,34 @@ class RequestFragment extends StatelessWidget {
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisSize: MainAxisSize.min,
               children: [
-                ItemDetailView(LocaleKeys.code.tr(), poLinesList[index].iTEMCODE ?? ""),
-                ItemDetailView(LocaleKeys.mfg.tr(), poLinesList[index].uOM ?? ""),
-                ItemDetailView(LocaleKeys.lineType.tr(), poLinesList[index].qUANTITY?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.unit.tr(), poLinesList[index].uOM ?? ""),
-                ItemDetailView(LocaleKeys.price.tr(), poLinesList[index].uNITPRICE?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.lineAmount.tr(), poLinesList[index].lINEAMOUNT?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.quantity.tr(), poLinesList[index].qUANTITY?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.lineDiscount.tr(), poLinesList[index].lINEDISCPERCENTAGE?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.needByDate.tr(), poLinesList[index].nEEDBYDATE ?? ""),
-                ItemDetailView(LocaleKeys.promisedDate.tr(), poLinesList[index].pROMISEDDATE ?? ""),
-                ItemDetailView(LocaleKeys.deliverToLocation.tr(), poLinesList[index].dELIVERTOLOCATION ?? ""),
-                ItemDetailView(LocaleKeys.requisitionNumber.tr(), poLinesList[index].rEQUESTOR ?? ""),
-                ItemDetailView(LocaleKeys.requester.tr(), poLinesList[index].pRNUM ?? ""),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.code.tr(), poLinesList[index].iTEMCODE ?? ""),
+                  ItemDetailViewCol(LocaleKeys.mfg.tr(), poLinesList[index].uOM ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.lineType.tr(), poLinesList[index].qUANTITY?.toString() ?? ""),
+                  ItemDetailViewCol(LocaleKeys.unit.tr(), poLinesList[index].uOM ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.price.tr(), poLinesList[index].uNITPRICE?.toString() ?? ""),
+                  ItemDetailViewCol(LocaleKeys.lineAmount.tr(), poLinesList[index].lINEAMOUNT?.toString() ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.quantity.tr(), poLinesList[index].qUANTITY?.toString() ?? ""),
+                  ItemDetailViewCol(LocaleKeys.lineDiscount.tr(), poLinesList[index].lINEDISCPERCENTAGE?.toString() ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.needByDate.tr(), poLinesList[index].nEEDBYDATE ?? ""),
+                  ItemDetailViewCol(LocaleKeys.promisedDate.tr(), poLinesList[index].pROMISEDDATE ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.deliverToLocation.tr(), poLinesList[index].dELIVERTOLOCATION ?? ""),
+                  ItemDetailViewCol(LocaleKeys.requisitionNumber.tr(), poLinesList[index].rEQUESTOR ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.requester.tr(), poLinesList[index].pRNUM ?? ""),
+                  Container(),
+                ),
                 12.height,
                 Row(
                   children: [
@@ -92,21 +109,35 @@ class RequestFragment extends StatelessWidget {
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisSize: MainAxisSize.min,
               children: [
-                ItemDetailView(LocaleKeys.code.tr(), moNotificationBodyList[index].iTEMCODE ?? ""),
-                ItemDetailView(LocaleKeys.unit.tr(), moNotificationBodyList[index].uOM ?? ""),
-                ItemDetailView(LocaleKeys.quantity.tr(), moNotificationBodyList[index].qUANTITY?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.dateRequired.tr(), moNotificationBodyList[index].dATEREQUIRED ?? ""),
-                ItemDetailView(LocaleKeys.lineStatus.tr(), moNotificationBodyList[index].lINESTATUS ?? ""),
-                ItemDetailView(LocaleKeys.statusDate.tr(), moNotificationBodyList[index].sTATUSDATE ?? ""),
-                ItemDetailView(LocaleKeys.transactionType.tr(), moNotificationBodyList[index].tRANSACTIONTYPENAME ?? ""),
-                ItemDetailView(LocaleKeys.operatingUnit.tr(), moNotificationBodyList[index].oPERATINGUNIT ?? ""),
-                ItemDetailView(LocaleKeys.organizationCode.tr(), moNotificationBodyList[index].oRGANIZATIONCODE ?? ""),
-                ItemDetailView(LocaleKeys.organization.tr(), moNotificationBodyList[index].oRGANIZATIONNAME ?? ""),
-                ItemDetailView(LocaleKeys.fromSubInventory.tr(), moNotificationBodyList[index].fROMSUBINVENTORY ?? ""),
-                ItemDetailView(LocaleKeys.fromLocator.tr(), moNotificationBodyList[index].fROMLOCATOR ?? ""),
-                ItemDetailView(LocaleKeys.toSubInventory.tr(), moNotificationBodyList[index].tOSUBINVENTORY ?? ""),
-                ItemDetailView(LocaleKeys.toLocator.tr(), moNotificationBodyList[index].tOLOCATOR ?? ""),
-                ItemDetailView(LocaleKeys.shipToLocator.tr(), moNotificationBodyList[index].sHIPTOLOCATION ?? ""),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.code.tr(), moNotificationBodyList[index].iTEMCODE ?? ""),
+                  ItemDetailViewCol(LocaleKeys.unit.tr(), moNotificationBodyList[index].uOM ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.quantity.tr(), moNotificationBodyList[index].qUANTITY?.toString() ?? ""),
+                  ItemDetailViewCol(LocaleKeys.dateRequired.tr(), moNotificationBodyList[index].dATEREQUIRED ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.lineStatus.tr(), moNotificationBodyList[index].lINESTATUS ?? ""),
+                  ItemDetailViewCol(LocaleKeys.statusDate.tr(), moNotificationBodyList[index].sTATUSDATE ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.transactionType.tr(), moNotificationBodyList[index].tRANSACTIONTYPENAME ?? ""),
+                  ItemDetailViewCol(LocaleKeys.operatingUnit.tr(), moNotificationBodyList[index].oPERATINGUNIT ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.organizationCode.tr(), moNotificationBodyList[index].oRGANIZATIONCODE ?? ""),
+                  ItemDetailViewCol(LocaleKeys.organization.tr(), moNotificationBodyList[index].oRGANIZATIONNAME ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.fromSubInventory.tr(), moNotificationBodyList[index].fROMSUBINVENTORY ?? ""),
+                  ItemDetailViewCol(LocaleKeys.fromLocator.tr(), moNotificationBodyList[index].fROMLOCATOR ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.toSubInventory.tr(), moNotificationBodyList[index].tOSUBINVENTORY ?? ""),
+                  ItemDetailViewCol(LocaleKeys.toLocator.tr(), moNotificationBodyList[index].tOLOCATOR ?? ""),
+                ),
+                ItemDetailGrid(ItemDetailViewCol(LocaleKeys.shipToLocator.tr(), moNotificationBodyList[index].sHIPTOLOCATION ?? ""), Container()),
                 12.height,
                 DefaultButton(LocaleKeys.itemHistory.tr(), () {
                   Navigator.pushNamed(
@@ -129,28 +160,51 @@ class RequestFragment extends StatelessWidget {
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisSize: MainAxisSize.min,
               children: [
-                ItemDetailView(LocaleKeys.productName.tr(), itemCreationLines[index].pRODUCTNAME ?? ""),
-                ItemDetailView(LocaleKeys.productDescription.tr(), itemCreationLines[index].pRODUCTDESCRIPTION ?? ""),
-                ItemDetailView(LocaleKeys.unitPrice.tr(), itemCreationLines[index].uNITPRICE?.toString() ?? ""),
-                ItemDetailView(LocaleKeys.manufacturerName.tr(), itemCreationLines[index].uSERMANUFACTURERNAME ?? ""),
-                ItemDetailView(LocaleKeys.manufacturerPartName.tr(), itemCreationLines[index].uSERMFGPARTNUM ?? ""),
-                ItemDetailView(LocaleKeys.supplierName.tr(), itemCreationLines[index].sUPPLIERNAME ?? ""),
-                ItemDetailView(LocaleKeys.supplierContact.tr(), itemCreationLines[index].sUPPLIERCONTACT ?? ""),
-                ItemDetailView(LocaleKeys.chargeToPatient.tr(), itemCreationLines[index].cHARGETOPATIENT ?? ""),
-                ItemDetailView(LocaleKeys.justification.tr(), itemCreationLines[index].jUSTIFICATION ?? ""),
-                ItemDetailView(LocaleKeys.itemCode.tr(), itemCreationLines[index].iTEMCODE ?? ""),
-                ItemDetailView(LocaleKeys.itemDescription.tr(), itemCreationLines[index].iTEMDESCRIPTION ?? ""),
-                ItemDetailView(LocaleKeys.groupCode.tr(), itemCreationLines[index].iTEMGROUPCODE ?? ""),
-                ItemDetailView(LocaleKeys.groupDescription.tr(), itemCreationLines[index].iTEMGROUP ?? ""),
-                ItemDetailView(LocaleKeys.subgroupCode.tr(), itemCreationLines[index].iTEMSUBGROUPCODE ?? ""),
-                ItemDetailView(LocaleKeys.subgroupDescription.tr(), itemCreationLines[index].iTEMSUBGROUP ?? ""),
-                ItemDetailView(LocaleKeys.primaryUOM.tr(), itemCreationLines[index].pRIMARYUOM ?? ""),
-                ItemDetailView(LocaleKeys.manufacturerName.tr(), itemCreationLines[index].sTANDARDMANUFACTURERNAME ?? ""),
-                ItemDetailView(LocaleKeys.manufacturerPartName.tr(), itemCreationLines[index].sTANDARDMFGPARTNUM ?? ""),
-                ItemDetailView(LocaleKeys.templateName.tr(), itemCreationLines[index].tEMPLATENAME ?? ""),
-                ItemDetailView(LocaleKeys.itemCreationStatus.tr(), itemCreationLines[index].iTEMCREATIONSTATUS ?? ""),
-                ItemDetailView(LocaleKeys.standardizationApprovalStatus.tr(), itemCreationLines[index].sTANDARDSTATUS ?? ""),
-                ItemDetailView(LocaleKeys.standardizationApprovalRejectionReason.tr(), itemCreationLines[index].sTANDARDREJECTREASON ?? ""),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.productName.tr(), itemCreationLines[index].pRODUCTNAME ?? ""),
+                  ItemDetailViewCol(LocaleKeys.productDescription.tr(), itemCreationLines[index].pRODUCTDESCRIPTION ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.unitPrice.tr(), itemCreationLines[index].uNITPRICE?.toString() ?? ""),
+                  ItemDetailViewCol(LocaleKeys.manufacturerName.tr(), itemCreationLines[index].uSERMANUFACTURERNAME ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.manufacturerPartName.tr(), itemCreationLines[index].uSERMFGPARTNUM ?? ""),
+                  ItemDetailViewCol(LocaleKeys.supplierName.tr(), itemCreationLines[index].sUPPLIERNAME ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.supplierContact.tr(), itemCreationLines[index].sUPPLIERCONTACT ?? ""),
+                  ItemDetailViewCol(LocaleKeys.chargeToPatient.tr(), itemCreationLines[index].cHARGETOPATIENT ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.justification.tr(), itemCreationLines[index].jUSTIFICATION ?? ""),
+                  ItemDetailViewCol(LocaleKeys.itemCode.tr(), itemCreationLines[index].iTEMCODE ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.itemDescription.tr(), itemCreationLines[index].iTEMDESCRIPTION ?? ""),
+                  ItemDetailViewCol(LocaleKeys.groupCode.tr(), itemCreationLines[index].iTEMGROUPCODE ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.groupDescription.tr(), itemCreationLines[index].iTEMGROUP ?? ""),
+                  ItemDetailViewCol(LocaleKeys.subgroupCode.tr(), itemCreationLines[index].iTEMSUBGROUPCODE ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.subgroupDescription.tr(), itemCreationLines[index].iTEMSUBGROUP ?? ""),
+                  ItemDetailViewCol(LocaleKeys.primaryUOM.tr(), itemCreationLines[index].pRIMARYUOM ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.manufacturerName.tr(), itemCreationLines[index].sTANDARDMANUFACTURERNAME ?? ""),
+                  ItemDetailViewCol(LocaleKeys.manufacturerPartName.tr(), itemCreationLines[index].sTANDARDMFGPARTNUM ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.templateName.tr(), itemCreationLines[index].tEMPLATENAME ?? ""),
+                  ItemDetailViewCol(LocaleKeys.itemCreationStatus.tr(), itemCreationLines[index].iTEMCREATIONSTATUS ?? ""),
+                ),
+                ItemDetailGrid(
+                  ItemDetailViewCol(LocaleKeys.standardizationApprovalStatus.tr(), itemCreationLines[index].sTANDARDSTATUS ?? ""),
+                  ItemDetailViewCol(LocaleKeys.standardizationApprovalRejectionReason.tr(), itemCreationLines[index].sTANDARDREJECTREASON ?? ""),
+                  isItLast: true,
+                ),
               ],
             ).objectContainerView(title: itemCreationLines[index].iTEMDESCRIPTION!),
         separatorBuilder: (cxt, index) => 12.height,
diff --git a/lib/widgets/item_detail_view_widget.dart b/lib/widgets/item_detail_view_widget.dart
index 99f77d7..34b2eb3 100644
--- a/lib/widgets/item_detail_view_widget.dart
+++ b/lib/widgets/item_detail_view_widget.dart
@@ -7,6 +7,7 @@ import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
 class ItemDetailView extends StatelessWidget {
   final String title;
   final String value;
+
   const ItemDetailView(this.title, this.value, {Key? key}) : super(key: key);
 
   @override
@@ -21,3 +22,110 @@ class ItemDetailView extends StatelessWidget {
     );
   }
 }
+
+class ItemDetailViewCol extends StatelessWidget {
+  final String title;
+  final String value;
+
+  const ItemDetailViewCol(this.title, this.value, {Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        "$title:".toText12(isBold: true, color: const Color(0xff2BB8A6)),
+        4.width,
+        (value.isEmpty ? "--" : value).toText12(color: MyColors.normalTextColor),
+      ],
+    );
+  }
+}
+
+class ItemDetailViewGridItem extends StatelessWidget {
+  int index;
+  final String? title;
+  final String? value;
+  final bool isNeedToShowEmptyDivider;
+
+  ItemDetailViewGridItem(this.index, this.title, this.value, {Key? key, this.isNeedToShowEmptyDivider = false}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.only(left: index % 2 != 0 ? 12 : 0),
+      decoration: BoxDecoration(
+        color: Colors.transparent,
+        border: Border(
+          left: BorderSide(
+            //MyColors.lightGreyEFColor
+            //                   <--- left side
+            color: index % 2 != 0 ? MyColors.lightGreyEFColor : Colors.transparent,
+            width: 1.5,
+          ),
+          top: BorderSide(
+            //                   <--- left side
+            color: index > 1 ? MyColors.lightGreyEFColor : Colors.transparent,
+            width: 1.5,
+          ),
+        ),
+      ),
+      child: isNeedToShowEmptyDivider
+          ? Container()
+          : Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Flexible(child: "$title:".toText12Auto(isBold: true, color: const Color(0xff2BB8A6))),
+                4.width,
+                Flexible(child: (value!.isEmpty ? "--" : value).toString().toText12Auto(color: MyColors.normalTextColor)),
+              ],
+            ),
+    );
+  }
+}
+
+class ItemDetailGrid extends StatelessWidget {
+  Widget child1, child2;
+
+  bool isItLast;
+
+  ItemDetailGrid(this.child1, this.child2, {this.isItLast = false});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        IntrinsicHeight(
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Expanded(
+                flex: 1,
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 8),
+                  child: child1,
+                ),
+              ),
+              Container(
+                width: 1,
+                height: double.infinity,
+                color: MyColors.lightGreyEFColor,
+                margin: EdgeInsets.symmetric(horizontal: 8),
+              ),
+              Expanded(
+                flex: 1,
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 8),
+                  child: child2,
+                ),
+              ),
+            ],
+          ),
+        ),
+        if (!isItLast) 1.divider,
+      ],
+    );
+  }
+}
diff --git a/pubspec.yaml b/pubspec.yaml
index 9a54f6c..8cc52df 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -75,6 +75,7 @@ dependencies:
   url_launcher: ^6.0.15
   share: 2.0.4
   flutter_rating_bar: ^4.0.1
+  auto_size_text: ^3.0.0
   pull_to_refresh: ^2.0.0
 
 dev_dependencies: