diff --git a/lib/models/new_models/work_order_detail_model.dart b/lib/models/new_models/work_order_detail_model.dart
index 76449e23..ce3c1251 100644
--- a/lib/models/new_models/work_order_detail_model.dart
+++ b/lib/models/new_models/work_order_detail_model.dart
@@ -28,8 +28,7 @@ class WorkOrderDetail {
     );
   }
 
-  Map<String, dynamic> toJson() =>
-      {
+  Map<String, dynamic> toJson() => {
         "data": data?.toJson(),
         "message": message,
         "title": title,
@@ -84,48 +83,49 @@ class WorkOrderData {
     required this.activities,
     required this.activityAssetToBeRetireds,
   });
+
   int? requestId;
-   String? workOrderNo;
-   AssignedEmployee? workOrderCreatedBy;
-   DateTime? requestedDate;
+  String? workOrderNo;
+  AssignedEmployee? workOrderCreatedBy;
+  DateTime? requestedDate;
   WorkOrderAsset? asset;
-   Lookup? assetGroup;
-   Lookup? manufacturer;
-   Lookup? model;
-   Lookup? assetNdModel;
-   Site? site;
-   Lookup? building;
-   Lookup? floor;
-   AssetGroup? department;
-   int? room;
-   Lookup? assetType;
-   AssignedEmployee? assignedEmployee;
-   String? lastActivityStatus;
-   Lookup? status;
-   Lookup? nextStep;
-   int? assetVerificationType;
-   List<WorkOrderContactPerson> workOrderContactPerson;
-   Lookup? equipmentStatus;
-   Lookup? priority;
-   Lookup? requestedThrough;
-   Lookup? typeofRequest;
-   Lookup? loanAvailablity;
-   Lookup? assetLoan;
-   Lookup? safety;
-   Lookup? problemDescription;
-   String? comments;
-   String? voiceNote;
-   List<String> workOrderAttachments;
-   String? returnToService;
-   Lookup? serviceType;
-   Lookup? failureReasone;
-   Lookup? solution;
-   String? totalWorkingHours;
+  Lookup? assetGroup;
+  Lookup? manufacturer;
+  Lookup? model;
+  Lookup? assetNdModel;
+  Site? site;
+  Lookup? building;
+  Lookup? floor;
+  AssetGroup? department;
+  int? room;
+  Lookup? assetType;
+  AssignedEmployee? assignedEmployee;
+  String? lastActivityStatus;
+  Lookup? status;
+  Lookup? nextStep;
+  int? assetVerificationType;
+  List<WorkOrderContactPerson> workOrderContactPerson;
+  Lookup? equipmentStatus;
+  Lookup? priority;
+  Lookup? requestedThrough;
+  Lookup? typeofRequest;
+  Lookup? loanAvailablity;
+  Lookup? assetLoan;
+  Lookup? safety;
+  Lookup? problemDescription;
+  String? comments;
+  String? voiceNote;
+  List<String> workOrderAttachments;
+  String? returnToService;
+  Lookup? serviceType;
+  Lookup? failureReasone;
+  Lookup? solution;
+  String? totalWorkingHours;
   DateTime? needAVisitDateTime;
-   String?needAVisitComment;
-   List<WorkOrderHistory> workOrderHistory;
-   List<dynamic> activities;
-   List<dynamic> activityAssetToBeRetireds;
+  String? needAVisitComment;
+  List<WorkOrderHistory> workOrderHistory;
+  List<dynamic> activities;
+  List<dynamic> activityAssetToBeRetireds;
 
   factory WorkOrderData.fromJson(Map<String, dynamic> json) {
     return WorkOrderData(
@@ -174,8 +174,7 @@ class WorkOrderData {
     );
   }
 
-  Map<String, dynamic> toJson() =>
-      {
+  Map<String, dynamic> toJson() => {
         "id": requestId,
         "workOrderNo": workOrderNo,
         "workOrderCreatedBy": workOrderCreatedBy?.toJson(),
@@ -218,22 +217,33 @@ class WorkOrderData {
         "activities": activities.map((x) => x).toList(),
         "activityAssetToBeRetireds": activityAssetToBeRetireds.map((x) => x).toList(),
       };
+
   Map<String, dynamic> toFixRemotelyJson() {
-    return {'workOrderId': workOrderNo, 'startDate': workOrderHistory.isNotEmpty? workOrderHistory[0].fixRemotlyStartTime:'', 'endDate': workOrderHistory.isNotEmpty? workOrderHistory[0].fixRemotlyEndTime:'', 'workingHour':'', 'comment': comments};
+    return {
+      'workOrderId': workOrderNo,
+      'startDate': workOrderHistory.isNotEmpty ? workOrderHistory[0].fixRemotlyStartTime : '',
+      'endDate': workOrderHistory.isNotEmpty ? workOrderHistory[0].fixRemotlyEndTime : '',
+      'workingHour': '',
+      'comment': comments
+    };
   }
+
   //TODO feedback not defined...
   Map<String, dynamic> toMarkAsFixedJson() {
     return {'workOrderId': workOrderNo, 'feedback': comments};
   }
+
   Map<String, dynamic> toNeedVisitJson() {
-    return {'workOrderId': workOrderNo, 'visitDate': workOrderHistory.isNotEmpty? workOrderHistory[0].needAVisitDateTime:'', 'comment': comments};
+    return {'workOrderId': workOrderNo, 'visitDate': workOrderHistory.isNotEmpty ? workOrderHistory[0].needAVisitDateTime : '', 'comment': comments};
   }
+
   //TODO signatureNurse not defined...
   Map<String, dynamic> toNurseActionJson() {
     return {'workOrderId': workOrderNo, 'feedback': '', 'signatureNurse': 'signatureNurse'};
   }
+
   Map<String, dynamic> toWorkOrderJson() {
-    final Map<String, dynamic> data =  <String, dynamic>{};
+    final Map<String, dynamic> data = <String, dynamic>{};
     data['workOrderId'] = requestId;
     data['equipmentStatusId'] = equipmentStatus?.id;
     data['returnToService'] = returnToService;
@@ -253,8 +263,8 @@ class WorkOrderAsset {
     required this.assetNumber,
   });
 
-   int? id;
-   String? assetNumber;
+  int? id;
+  String? assetNumber;
 
   factory WorkOrderAsset.fromJson(Map<String, dynamic> json) {
     return WorkOrderAsset(
@@ -263,8 +273,7 @@ class WorkOrderAsset {
     );
   }
 
-  Map<String, dynamic> toJson() =>
-      {
+  Map<String, dynamic> toJson() => {
         "id": id,
         "assetNumber": assetNumber,
       };
@@ -276,8 +285,8 @@ class AssetGroup {
     required this.name,
   });
 
-   int? id;
-   String? name;
+  int? id;
+  String? name;
 
   factory AssetGroup.fromJson(Map<String, dynamic> json) {
     return AssetGroup(
@@ -286,8 +295,7 @@ class AssetGroup {
     );
   }
 
-  Map<String, dynamic> toJson() =>
-      {
+  Map<String, dynamic> toJson() => {
         "id": id,
         "name": name,
       };
@@ -301,10 +309,10 @@ class AssignedEmployee {
     required this.languageId,
   });
 
-   dynamic userId;
-   String? userName;
-   String? email;
-   int? languageId;
+  dynamic userId;
+  String? userName;
+  String? email;
+  int? languageId;
 
   factory AssignedEmployee.fromJson(Map<String, dynamic> json) {
     return AssignedEmployee(
@@ -315,8 +323,7 @@ class AssignedEmployee {
     );
   }
 
-  Map<String, dynamic> toJson() =>
-      {
+  Map<String, dynamic> toJson() => {
         "userId": userId,
         "userName": userName,
         "email": email,
@@ -330,8 +337,8 @@ class Site {
     required this.siteName,
   });
 
-   int? id;
-   String? siteName;
+  int? id;
+  String? siteName;
 
   factory Site.fromJson(Map<String, dynamic> json) {
     return Site(
@@ -340,8 +347,7 @@ class Site {
     );
   }
 
-  Map<String, dynamic> toJson() =>
-      {
+  Map<String, dynamic> toJson() => {
         "id": id,
         "siteName": siteName,
       };
@@ -359,14 +365,14 @@ class WorkOrderContactPerson {
     required this.contactUser,
   });
 
-   int? id;
-   String? name;
-   String? employeeId;
-   String? position;
-   dynamic extension;
-   String? email;
-   dynamic mobilePhone;
-   AssignedEmployee? contactUser;
+  int? id;
+  String? name;
+  String? employeeId;
+  String? position;
+  dynamic extension;
+  String? email;
+  dynamic mobilePhone;
+  AssignedEmployee? contactUser;
 
   factory WorkOrderContactPerson.fromJson(Map<String, dynamic> json) {
     return WorkOrderContactPerson(
@@ -381,8 +387,7 @@ class WorkOrderContactPerson {
     );
   }
 
-  Map<String, dynamic> toJson() =>
-      {
+  Map<String, dynamic> toJson() => {
         "id": id,
         "name": name,
         "employeeId": employeeId,
@@ -409,17 +414,17 @@ class WorkOrderHistory {
     required this.needAVisitDateTime,
   });
 
-   int? id;
-   Lookup? workorderStatus;
-   dynamic activityStatus;
-   DateTime? date;
-   AssignedEmployee? user;
-   Lookup? step;
-   DateTime? fixRemotlyStartTime;
-   DateTime? fixRemotlyEndTime;
-   num? fixRemotlyWorkingHours;
-   String? comments;
-   DateTime? needAVisitDateTime;
+  int? id;
+  Lookup? workorderStatus;
+  dynamic activityStatus;
+  DateTime? date;
+  AssignedEmployee? user;
+  Lookup? step;
+  DateTime? fixRemotlyStartTime;
+  DateTime? fixRemotlyEndTime;
+  num? fixRemotlyWorkingHours;
+  String? comments;
+  DateTime? needAVisitDateTime;
 
   factory WorkOrderHistory.fromJson(Map<String, dynamic> json) {
     return WorkOrderHistory(
@@ -437,8 +442,7 @@ class WorkOrderHistory {
     );
   }
 
-  Map<String, dynamic> toJson() =>
-      {
+  Map<String, dynamic> toJson() => {
         "id": id,
         "workorderStatus": workorderStatus?.toJson(),
         "activityStatus": activityStatus,
diff --git a/lib/new_views/app_style/app_color.dart b/lib/new_views/app_style/app_color.dart
index dfc7c3a1..6a292e6f 100644
--- a/lib/new_views/app_style/app_color.dart
+++ b/lib/new_views/app_style/app_color.dart
@@ -13,6 +13,7 @@ class AppColor {
   static const Color primary70 = Color(0xff163A51);
   static const Color primary80 = Color(0xff161D27);
   static const Color primary90 = Color(0xff1E95DE);
+  static const Color primary63 = Color(0xff63A4D1);
 
   //texts
   static const Color neutral10 = Color(0xffBCBCBC);
@@ -31,7 +32,6 @@ class AppColor {
   static const Color neutral140 = Color(0xffE6E6E6);
   static const Color neutral150 = Color(0xffA1A1A1);
 
-
   //background
   static const Color backgroundLight = Color(0xfff7f9fb);
   static const Color backgroundDark = Color(0xff111427);
@@ -45,10 +45,12 @@ class AppColor {
   static const Color white60 = Color(0xffEFEFEF);
   static const Color white70 = Color(0xffF1F1F1);
   static const Color white936 = Color(0xff212936);
+
 //black
   static const Color black10 = Color(0xff3B3D4A);
   static const Color black20 = Color(0xff212936);
   static const Color black35 = Color(0xff222A36);
+  static const Color black1E = Color(0xff1E1F20);
 
   //red
   static const Color red30 = Color(0xffF63939);
@@ -62,7 +64,7 @@ class AppColor {
   static const Color green50 = Color(0xff62BE96);
   static const Color green60 = Color(0xff065E38);
   static const Color green70 = Color(0xff54C166);
-
+  static const Color green15 = Color(0xff157D14);
 
   //orange
   static const Color orange30 = Color(0xffFDE19B);
@@ -81,6 +83,7 @@ class AppColor {
 
   // static Color yellowStatus(BuildContext context) => context.isDark ? const Color(0xffFFDA76) : orange40;
   static Color yellowStatus(BuildContext context) => context.isDark ? const Color(0xffFFC945) : orange30;
+
   static Color yellowIcon(BuildContext context) => context.isDark ? const Color(0xffFFC945) : orange70;
 
   static Color background(BuildContext context) => context.isDark ? neutral60 : Colors.white;
@@ -102,6 +105,40 @@ class AppColor {
     }
   }
 
+  static Color getHistoryLogStatusTextColorByName(String status) {
+    switch ((status).toLowerCase()) {
+      case "in progress":
+        return white936;
+      case "new":
+        return primary63;
+      case "closed":
+        return black1E;
+      case "completed":
+        return green15;
+      case "fixed":
+        return green15;
+      default:
+        return Colors.white;
+    }
+  }
+
+  static Color getHistoryLogStatusColorByName(String status) {
+    switch ((status).toLowerCase()) {
+      case "in progress":
+        return orange30;
+      case "new":
+        return primary10.withOpacity(.30);
+      case "closed":
+        return white936.withOpacity(.30);
+      case "completed":
+        return green70.withOpacity(.5);
+      case "fixed":
+        return green70.withOpacity(.5);
+      default:
+        return Colors.white;
+    }
+  }
+
   static Color getRequestStatusColorByName(BuildContext context, String? status) {
     switch ((status ?? "").toLowerCase()) {
       case "medium":
@@ -165,7 +202,7 @@ class AppColor {
       case 81:
         return Colors.white;
       case 82:
-      //high priority
+        //high priority
         return white10;
       default:
         return blueStatus(context);
@@ -174,10 +211,10 @@ class AppColor {
 
   static Color getPriorityStatusColor(BuildContext context, int id) {
     switch (id) {
-    //low priority
+      //low priority
       case 81:
         return greenStatus(context);
-    //high priority
+      //high priority
       case 82:
         return redStatus(context);
       default:
diff --git a/lib/service_request_latest/views/components/history_log_view.dart b/lib/service_request_latest/views/components/history_log_view.dart
index e3d8710c..18230b4a 100644
--- a/lib/service_request_latest/views/components/history_log_view.dart
+++ b/lib/service_request_latest/views/components/history_log_view.dart
@@ -5,6 +5,7 @@ import 'package:test_sa/extensions/int_extensions.dart';
 import 'package:test_sa/extensions/string_extensions.dart';
 import 'package:test_sa/extensions/text_extensions.dart';
 import 'package:test_sa/extensions/widget_extensions.dart';
+import 'package:test_sa/models/new_models/work_order_detail_model.dart';
 import 'package:test_sa/new_views/app_style/app_color.dart';
 import 'package:test_sa/service_request_latest/request_detail_provider.dart';
 import 'package:test_sa/views/widgets/loaders/no_data_found.dart';
@@ -28,6 +29,7 @@ class HistoryLogView extends StatelessWidget {
     ];
 
     return Consumer<RequestDetailProvider>(builder: (context, requestProvider, _) {
+      String status = "";
       return requestProvider.isLoading
           ? const CircularProgressIndicator(color: AppColor.primary10).center
           : (requestProvider.currentWorkOrder == null || (requestProvider.currentWorkOrder?.data?.workOrderHistory.isEmpty ?? true)
@@ -44,58 +46,66 @@ class HistoryLogView extends StatelessWidget {
                         endIndent: 10,
                       ),
                     ),
-                    ListView.builder(
-                      itemCount: dummyList.length,
-                      padding: EdgeInsets.zero,
-                      itemBuilder: (context, index) {
-                        return historyLogCard(context: context, historyLogModel: dummyList[index]);
-                      },
-                    ),
+                    Builder(builder: (cxt) {
+                      List<Widget> items = [];
+                      String lastStatus = "";
+                      for (var object in requestProvider.currentWorkOrder!.data!.workOrderHistory) {
+                        String currentStatus = object.workorderStatus!.name!;
+                        if (lastStatus.isEmpty) {
+                          lastStatus = currentStatus;
+                        }
+                        if (lastStatus == currentStatus) {
+                          items.add(historyLogCard(cxt, object));
+                        } else {
+                          items.add(statusCard(cxt, lastStatus));
+                          lastStatus = currentStatus;
+                          items.add(historyLogCard(cxt, object));
+                        }
+                      }
+                      items.add(statusCard(cxt, lastStatus));
+
+                      return SingleChildScrollView(
+                        padding: const EdgeInsets.all(16),
+                        child: Column(children: items),
+                      );
+                    }),
                   ],
                 ));
     });
   }
 
-  Widget historyLogCard({required BuildContext context, required HistoryLogModel historyLogModel}) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.end,
+  Widget historyLogCard(BuildContext context, WorkOrderHistory object) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      mainAxisAlignment: MainAxisAlignment.start,
       children: [
-        historyLogModel.status != null
-            ? Padding(
-                padding: EdgeInsets.only(top: 16.toScreenHeight, bottom: 16.toScreenHeight, right: 89.toScreenWidth),
-                child: StatusLabel(
-                  radius: 4,
-                  label: historyLogModel.status,
-                  textColor: AppColor.getRequestStatusTextColorByName(context, historyLogModel.status!),
-                  backgroundColor: AppColor.getRequestStatusColorByName(context, historyLogModel.status!),
-                ),
-              )
-            : 12.height,
-        Container(
-          width: double.infinity,
-          padding: EdgeInsets.only(left: 12.toScreenWidth, bottom: 16.toScreenHeight, top: 12.toScreenHeight),
-          child: Column(
-            children: [
-              Row(
-                crossAxisAlignment: CrossAxisAlignment.center,
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                children: [
-                  Text(
-                    historyLogModel.date.toString().toServiceRequestCardFormat,
-                    textAlign: TextAlign.end,
-                    style: AppTextStyles.tinyFont.copyWith(color: context.isDark ? AppColor.neutral30 : AppColor.neutral120),
-                  ),
-                  50.width,
-                  Expanded(
-                    child: historyLogModel.message.bodyText(context).custom(color: AppColor.black10),
-                  ),
-                ],
-              ),
-            ],
+        Align(
+          alignment: Alignment.centerLeft,
+          child: Text(
+            object.date.toString().toServiceRequestCardFormat,
+            textAlign: TextAlign.end,
+            style: AppTextStyles.tinyFont.copyWith(color: context.isDark ? AppColor.neutral30 : AppColor.neutral120),
           ),
-        ).toShadowContainer(context),
+        ).expanded,
+        Expanded(
+          flex: 2,
+          child: object.step!.name!.bodyText(context).custom(color: AppColor.black10),
+        ),
       ],
-    );
+    ).toShadowContainer(context, padding: 16).paddingOnly(bottom: 16);
+  }
+
+  Widget statusCard(BuildContext context, String status) {
+    return SizedBox(
+      width: 153.toScreenWidth,
+      child: StatusLabel(
+        radius: 4,
+        label: status,
+        labelInCenter: true,
+        textColor: AppColor.getHistoryLogStatusTextColorByName(status),
+        backgroundColor: AppColor.getHistoryLogStatusColorByName(status),
+      ),
+    ).paddingOnly(bottom: 16, start: 40);
   }
 }
 
diff --git a/lib/views/widgets/requests/request_status.dart b/lib/views/widgets/requests/request_status.dart
index db2e33cd..2f655bc3 100644
--- a/lib/views/widgets/requests/request_status.dart
+++ b/lib/views/widgets/requests/request_status.dart
@@ -9,8 +9,9 @@ class StatusLabel extends StatelessWidget {
   final Color? textColor;
   final bool isPriority;
   final double radius;
+  final bool labelInCenter;
 
-  StatusLabel({Key? key, this.id = 0, this.label, this.backgroundColor, this.textColor, this.isPriority = false, this.radius = 4}) : super(key: key);
+  StatusLabel({Key? key, this.id = 0, this.label, this.backgroundColor, this.textColor, this.isPriority = false, this.radius = 4,this.labelInCenter=false}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -26,6 +27,7 @@ class StatusLabel extends StatelessWidget {
 
     return Container(
       padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
+      alignment: labelInCenter ? Alignment.center: null,
       decoration: ShapeDecoration(
         color: backgroundColor,
         shape: RoundedRectangleBorder(
@@ -35,77 +37,4 @@ class StatusLabel extends StatelessWidget {
       child: Text(label ?? "", style: AppTextStyles.overline.copyWith(color: textColor)),
     );
   }
-
-// Color getRequestStatusColor1(String status) {
-//   switch (status) {
-//     case "in progress":
-//       return AColors.statusYellowLight;
-//     case "completed":
-//       return AColors.statusGreenLight;
-//     case "high priority":
-//       return AColors.statusRedLight;
-//     case "low priority":
-//       return AColors.statusGreenLight;
-//     case "open":
-//       return AColors.statusBlue;
-//     default:
-//       return AColors.statusDefault;
-//   }
-// }
-//
-// Color getRequestStatusTextColor(String status) {
-//   switch (status) {
-//     case "in progress":
-//       return AColors.statusYellow;
-//     case "completed":
-//       return AColors.statusGreen;
-//     case "high priority":
-//       return AColors.statusRed;
-//     case "low priority":
-//       return AColors.statusGreen;
-//     case "open":
-//       return AColors.statusBlue;
-//     default:
-//       return Colors.white;
-//   }
-// }
-//
-// static Color getRequestStatusColor(int id) {
-//   switch (id) {
-//     case 4:
-//       return AColors.deepRed;
-//     case 6:
-//       return AColors.green;
-//     case 5:
-//       return AColors.orange;
-//     case 8:
-//       return AColors.green;
-//     case 9:
-//       return AColors.orange;
-//     default:
-//       return AColors.grey;
-//   }
-// }
-//
-// static Color getGasStatusColor(int id) {
-//   switch (id) {
-//     case 0:
-//       return AColors.orange;
-//     case 1:
-//       return AColors.green;
-//     default:
-//       return AColors.grey;
-//   }
-// }
-//
-// static Color getPriorityStatusColor(int id) {
-//   switch (id) {
-//     case 0:
-//       return AColors.orange;
-//     case 1:
-//       return AColors.green;
-//     default:
-//       return AColors.grey;
-//   }
-// }
 }