diff --git a/src/WorkFlowCheck.Web/Pages/BaseStock/CheckPoints/CheckPointEditPage.cshtml b/src/WorkFlowCheck.Web/Pages/BaseStock/CheckPoints/CheckPointEditPage.cshtml
index f82fae9..3ef6995 100644
--- a/src/WorkFlowCheck.Web/Pages/BaseStock/CheckPoints/CheckPointEditPage.cshtml
+++ b/src/WorkFlowCheck.Web/Pages/BaseStock/CheckPoints/CheckPointEditPage.cshtml
@@ -61,7 +61,27 @@
         </tfoot>
     </table>
 </div>
+<style>
+    .box {
+        display: inline-block;
+        width: 25px;
+        height: 25px;
+        margin: 1px;
+        text-align: center;
+        line-height: 25px;
+        font-size: 15px;
+        border: 1px solid black;
+        border-radius: 3px;
+    }
 
+    .yellow-box {
+        background-color: yellow;
+    }
+
+    .red-box {
+        background-color: red;
+    }
+</style>
 @section Scripts {
     <script>
 
@@ -75,7 +95,30 @@
                     { data: "id" },
                     { data: "rowIndex" },
                     { data: "operationDescription" },
-                    { data: "answerType" },
+                    {
+                            data: "answerType",
+                            searchable: false,
+                            sortable: false,
+                            render: function ( data, type, row ) {
+                                if (data === 'SI-N') {
+                                    return '<div class="text-center"><div class="box yellow-box">I</div><div class="box">N</div></div>';
+                                }
+                                if (data === 'I-SN') {
+                                    return '<div class="text-center"><div class="box">I</div><div class="box yellow-box">N</div></div>';
+                                }
+                                if (data === 'PI-N') {
+                                    return '<div class="text-center"><div class="box red-box">I</div><div class="box">N</div></div>';
+                                }
+                                if (data === 'I-PN') {
+                                    return '<div class="text-center"><div class="box">I</div><div class="box red-box">N</div></div>';
+                                }
+                                if (data==='P'){
+                                    return '<div class="text-center"><i class="fas fa-camera fa-2x"></i></div>';
+                                }
+                                return data;
+                            }
+
+                    },
                     { data: null, render: function (data, type, row) {
                          return renderActionButtons(row.id);
                     }}
diff --git a/src/WorkFlowCheck.Web/Pages/Shared/_Layout.cshtml b/src/WorkFlowCheck.Web/Pages/Shared/_Layout.cshtml
index 07ad969..6b377a9 100644
--- a/src/WorkFlowCheck.Web/Pages/Shared/_Layout.cshtml
+++ b/src/WorkFlowCheck.Web/Pages/Shared/_Layout.cshtml
@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="~/WorkFlowCheck.Web.styles.css" asp-append-version="true" />
     <link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.css" rel="stylesheet" integrity="sha384-6gM1RUmcWWtU9mNI98EhVNlLX1LDErxSDu2o/YRIeXq34o77tQYTXLzJ/JLBNkNV" crossorigin="anonymous">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+    @* <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> *@
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
 </head>
 <body>
     <header>
@@ -149,6 +151,7 @@
     <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/jquery-validation-unobtrusive@4.0.0/dist/jquery.validate.unobtrusive.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
     @await RenderSectionAsync("Scripts", required: false)
     <partial name="_ValidationScriptsPartial" />
diff --git a/src/WorkFlowCheck.Web/Services/BaseStockService.cs b/src/WorkFlowCheck.Web/Services/BaseStockService.cs
index 8761002..d8a8cd6 100644
--- a/src/WorkFlowCheck.Web/Services/BaseStockService.cs
+++ b/src/WorkFlowCheck.Web/Services/BaseStockService.cs
@@ -89,6 +89,7 @@ namespace WorkFlowCheck.Web.Services
                 {
                     if (response.IsSuccess)
                     {
+                        response.Data.CheckListTemplateRowDTO = response.Data.CheckListTemplateRowDTO?.OrderBy(o => o.RowIndex).ToList();
                         return response.Data;
                     }
                 }
@@ -142,7 +143,7 @@ namespace WorkFlowCheck.Web.Services
             return retVal;
         }
 
-        
+
         public async Task<ApiResponseDTO<CheckPointDTO>> UpdateCheckPoint(CheckPointDTO checkPointDTO)
         {
             try
