diff --git a/ServiceHost/Areas/Admin/Pages/Company/Workshops/_ClassificationPartials/ClassificationGroupJobsTab.cshtml b/ServiceHost/Areas/Admin/Pages/Company/Workshops/_ClassificationPartials/ClassificationGroupJobsTab.cshtml
index 48ea5241..f3722754 100644
--- a/ServiceHost/Areas/Admin/Pages/Company/Workshops/_ClassificationPartials/ClassificationGroupJobsTab.cshtml
+++ b/ServiceHost/Areas/Admin/Pages/Company/Workshops/_ClassificationPartials/ClassificationGroupJobsTab.cshtml
@@ -1,12 +1,152 @@
 @model List<CompanyManagment.App.Contracts.ClassificationScheme.ClassificationGroupAndJobModel>
 @{
+    <style>
+        .tr-table-add {
+            background-color: #dfdfdf;
+            border-radius: 5px;
+            padding: 7px 1px;
+            margin: 20px;
+        }
+
+        .tr-table-edit {
+            background-color: #ddf4f4;
+            border-radius: 5px;
+            padding: 7px 1px;
+            margin: 20px;
+        }
+
+        .row-number {
+            background-color: rgb(187, 240, 240);
+            color: #0B5959;
+            width: 80px;
+            height: 24px;
+            line-height: 24px;
+            text-align: center;
+            border-radius: 5px;
+        }
+
+        .icon-span {
+            display: inline-block;
+            text-align: center;
+            vertical-align: middle;
+            line-height: 14px;
+            border-radius: 5px;
+            padding: 2px;
+        }
+
+            .icon-span svg {
+                vertical-align: middle;
+            }
+
+         .add-jobs{
+                background-color: #84cc16;
+                color:white;
+       
+         }
+       
+        .edit-jobs {
+            background-color: #009ee2;
+            color: white;
+        }
+
+    </style>
 }
 <div class="card card-pattern m-t-10">
-    <button class="btn btn-success"> ایجاد شغل</button>
-    @foreach (var item in Model)
-    {
-        <div><span>@item.GroupNo</span></div>
+
+
     
-    }
+    <div class="row">
+        
+        <!-- گروه 1 تا 10 -->
+        <div class="col-12 col-md-6">
+            @foreach (var itemRight in Model.Take(10))
+            {
+                <div class="row align-items-center mb-2 p-2  @(itemRight.EditClassificationGroupJob.Count < 1 ? "tr-table-add" : "tr-table-edit")">
+
+                    <div class="col-3 col-md-3">
+
+                        <div class="row-number">
+                            <span>گروه</span>
+                            <span>&nbsp;</span>
+                            <span>@itemRight.GroupNo</span>
+                   
+                        </div>
+                    </div>
+
+                    <div class="col-6 col-md-6"></div>
+
+                    <div class="col-3 col-md-3 align-items-center" style="float:left; direction:ltr">
+
+                        <a href="#">
+                            <span class="icon-span @(itemRight.EditClassificationGroupJob.Count < 1 ? "add-jobs" : "edit-jobs")" style="padding: 4px;font-size: 11px;">
+                                @if (itemRight.EditClassificationGroupJob.Count < 1)
+                                {
+                                    <span>افزودن شغل</span>
+                                }
+                                else
+                                {
+                                    <span>ویرایش شغل</span>
+                                }
+
+                                <svg width="19" height="18" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <circle cx="11" cy="11" r="8.25" stroke="white" />
+                                    <path d="M11 13.75L11 8.25" stroke="white" stroke-linecap="round" />
+                                    <path d="M13.75 11L8.25 11" stroke="white" stroke-linecap="round" />
+                                </svg>
+                            </span>
+
+
+                        </a>
+                    </div>
+                   
+                </div>
+            }
+        </div>
+        <!-- گروه 11 تا 20 -->
+        <div class="col-12 col-md-6">
+            @foreach (var itemLeft in Model.Skip(10))
+            {
+                <div class="row align-items-center mb-2 p-2  @(itemLeft.EditClassificationGroupJob.Count < 1 ? "tr-table-add" : "tr-table-edit")">
+
+                    <div class="col-3 col-md-3">
+
+                        <div class="row-number">
+                            <span>گروه</span>
+                            <span>&nbsp;</span>
+                            <span>@itemLeft.GroupNo</span>
+                   
+                        </div>
+                    </div>
+
+                    <div class="col-6 col-md-6"></div>
+
+                    <div class="col-3 col-md-3 align-items-center" style="float:left; direction:ltr">
+
+                        <a href="#">
+                            <span class="icon-span @(itemLeft.EditClassificationGroupJob.Count < 1 ? "add-jobs" : "edit-jobs")" style="padding: 4px;font-size: 11px;">
+                                @if (itemLeft.EditClassificationGroupJob.Count < 1)
+                                {
+                                   <span>افزودن شغل</span>
+                                }
+                                else
+                                {
+                                    <span>ویرایش شغل</span>
+                                }
+
+                                <svg width="19" height="18" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <circle cx="11" cy="11" r="8.25" stroke="white" />
+                                    <path d="M11 13.75L11 8.25" stroke="white" stroke-linecap="round" />
+                                    <path d="M13.75 11L8.25 11" stroke="white" stroke-linecap="round" />
+                                </svg>
+                            </span>
+
+
+                        </a>
+                    </div>
+                   
+                </div>
+            }
+        </div>
+    </div>
 </div>