diff --git a/lib/zin/wg/history/css/v1.css b/lib/zin/wg/history/css/v1.css
index 38a6ccf1fe..856255a00c 100644
--- a/lib/zin/wg/history/css/v1.css
+++ b/lib/zin/wg/history/css/v1.css
@@ -6,6 +6,12 @@
     font-size: 14px;
     font-weight: 700;
     line-height: 20px;
+    display: flex;
+    align-items: center;
+}
+
+.histories {
+    background: #FCFDFE;
 }
 
 .histories .btn-mini {
@@ -22,7 +28,8 @@
 
 .histories .btn {
     background-color: #fff;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     margin-bottom: 0;
     font-weight: 400;
     text-align: center;
@@ -69,6 +76,7 @@
     background: 0 0;
     box-shadow: none;
     border-color: transparent;
+    text-decoration: none;
 }
 
 .detail-content {
@@ -77,7 +85,6 @@
 }
 
 .histories-list {
-    padding-left: 15px;
     margin-bottom: 0;
     margin-top: 0;
     list-style: decimal;
@@ -85,6 +92,21 @@
     flex-direction: column;
 }
 
+.histories-list .timeline {
+    top: 13px;
+    bottom: 13px;
+    left: 10px;
+    background: #EEE;
+}
+
+.histories-list .marker {
+    color: #5E626D;
+    border-color: #EEE;
+    border-width: 1px;
+    box-shadow: none;
+    background: #FCFDFE;
+}
+
 .histories-list.sort-reverse {
     flex-direction: column-reverse;
 }
@@ -93,6 +115,7 @@
     word-break: break-word;
     word-wrap: break-word;
     position: relative;
+    list-style: none;
 }
 
 .histories-list > li strong {
diff --git a/lib/zin/wg/history/v1.php b/lib/zin/wg/history/v1.php
index ac7c2c8a7e..ddea540d68 100644
--- a/lib/zin/wg/history/v1.php
+++ b/lib/zin/wg/history/v1.php
@@ -14,10 +14,24 @@ class history extends wg
         return file_get_contents(__DIR__ . DS . 'css' . DS . 'v1.css');
     }
 
+    private function marker(int $num)
+    {
+        return span
+        (
+            setClass('marker', 'label', 'rounded-full', 'aspect-square', 'inline-flex', 'justify-center', 'items-center', 'mr-2'),
+            $num
+        );
+    }
+
+    private function timeline()
+    {
+        return div(setClass('timeline w-px absolute'));
+    }
+
     private function checkEditCommentPriv($action)
     {
         global $app;
-        $methodName = $this->prop('methodName') ?? data('methodName');
+        $methodName = $this->prop('methodName') === null ? $this->prop('methodName') : data('methodName');
 
         return (!isset($canBeChanged) || !empty($canBeChanged))
             && end($actions) == $action
@@ -27,10 +41,9 @@ class history extends wg
             && common::hasPriv('action', 'editComment');
     }
 
-    private function createExpandBtn($i)
+    private function expandBtn($i)
     {
         global $lang;
-
         return button
         (
             setClass('btn btn-mini switch-btn btn-icon btn-expand'),
@@ -52,10 +65,9 @@ class history extends wg
         );
     }
 
-    private function createEditCommentBtn()
+    private function editCommentBtn()
     {
         global $lang;
-
         return button
         (
             setClass('btn btn-link btn-icon btn-sm btn-edit-comment'),
@@ -64,10 +76,9 @@ class history extends wg
         );
     }
 
-    private function createHistoryChangesView($action, $i)
+    private function historyChanges($action, $i)
     {
         global $app;
-
         return div
         (
             setClass('history-changes'),
@@ -76,18 +87,19 @@ class history extends wg
         );
     }
 
-    private function createActionItemView($action, $i)
+    private function actionItem($action, $i)
     {
         global $app;
-
         return li
         (
+            setClass('my-3'),
             set::value($i),
+            $this->marker($i),
             html($app->loadTarget('action')->renderAction($action))
         );
     }
 
-    private function generateComment($action)
+    private function getComment($action)
     {
         if(str_contains($action->comment, '<pre class="prettyprint lang-html">'))
         {
@@ -102,10 +114,9 @@ class history extends wg
             : $action->comment;
     }
 
-    private function createCommentView($action)
+    private function comment($action)
     {
-        $comment = $this->generateComment($action);
-
+        $comment = $this->getComment($action);
         return div
         (
             setClass('article-content comment'),
@@ -117,10 +128,9 @@ class history extends wg
         );
     }
 
-    private function createCommentEditForm($action)
+    private function commentEditForm($action)
     {
         global $lang;
-
         return form
         (
             setClass('comment-edit-form'),
@@ -156,51 +166,38 @@ class history extends wg
         );
     }
 
-    private function buildHistoriesList()
+    private function historyList()
     {
-        $actions    = $this->prop('actions') ?? data('actions');
-        $users      = $this->prop('users') ?? data('users');
-        $historiesListView = h::ol(setClass('histories-list'));
+        $actions = $this->prop('actions') === null ? $this->prop('actions') : data('actions');
+        $users   = $this->prop('users') === null ? $this->prop('users') : data('users');
+        $historiesListView = h::ol(setClass('histories-list relative'));
         $i = 0;
 
+        $historiesListView->add($this->timeline());
         foreach($actions as $action)
         {
-            if($action->action === 'assigned' || $action->action === 'toaudit')
-                $action->extra = zget($users, $action->extra);
+            if($action->action === 'assigned' || $action->action === 'toaudit') $action->extra = zget($users, $action->extra);
 
             $action->actor = zget($users, $action->actor);
-            if(str_contains($action->actor, ':'))
-                $action->actor = substr($action->actor, strpos($action->actor, ':') + 1);
+            if(str_contains($action->actor, ':')) $action->actor = substr($action->actor, strpos($action->actor, ':') + 1);
 
             $i++;
-            $actionItemView = $this->createActionItemView($action, $i);
+            $actionItemView = $this->actionItem($action, $i);
 
             if(!empty($action->history))
             {
-                $allExpandBtn = $this->createExpandBtn($i);
-                $actionItemView->add($allExpandBtn);
-
-                $historyChangesView = $this->createHistoryChangesView($action, $i);
-                $actionItemView->add($historyChangesView);
+                $actionItemView->add($this->expandBtn($i));
+                $actionItemView->add($this->historyChanges($action, $i));
             }
             if(strlen(trim(($action->comment))) !== 0)
             {
                 $canEditComment = $this->checkEditCommentPriv($action);
 
-                if($canEditComment)
-                {
-                    $editCommentBtn = $this->createEditCommentBtn();
-                    $actionItemView->add($editCommentBtn);
-                }
+                if($canEditComment) $actionItemView->add($this->editCommentBtn());
 
-                $commentView = $this->createCommentView($action);
-                $actionItemView->add($commentView);
+                $actionItemView->add($this->comment($action));
 
-                if($canEditComment)
-                {
-                    $commentEditForm = $this->createCommentEditForm($action);
-                    $actionItemView->add($commentEditForm);
-                }
+                if($canEditComment) $actionItemView->add($this->commentEditForm($action));
             }
             $historiesListView->add($actionItemView);
         }
@@ -208,6 +205,62 @@ class history extends wg
         return $historiesListView;
     }
 
+    private function reverseBtn()
+    {
+        global $lang;
+        return btn
+        (
+            setClass('btn-mini btn-icon btn-reverse mr-2'),
+            set::title($lang->reverse),
+            set::icon('arrow-up'),
+            on::click(<<<REVERSE
+            document.querySelector('.histories-list').classList.toggle('sort-reverse');
+            var icon = e.target.querySelector('.icon');
+            icon.classList.toggle('icon-arrow-up');
+            icon.classList.toggle('icon-arrow-down');
+            REVERSE)
+        );
+    }
+
+    private function expandAllBtn()
+    {
+        global $lang;
+        return btn
+        (
+            setClass('btn-mini btn-icon btn-expand-all'),
+            set::title($lang->switchDisplay),
+            set::icon('plus'),
+            on::click(<<<EXPANDALL
+            var icon = e.target.querySelector('.icon');
+            var isExpand = icon.classList.contains('icon-plus');
+            var changeBoxs = document.querySelectorAll('[id^="changeBox"]');
+            if(isExpand) {
+                changeBoxs.forEach(function(box) {
+                    box.classList.add('show');
+                });
+            } else {
+                changeBoxs.forEach(function(box) {
+                    box.classList.remove('show');
+                });
+            }
+            icon.classList.toggle('icon-plus');
+            icon.classList.toggle('icon-minus');
+            EXPANDALL)
+        );
+    }
+
+    private function commentBtn()
+    {
+        global $lang;
+        return btn
+        (
+            setClass('btn-comment btn-link ml-4'),
+            set::icon('chat-line'),
+            set::iconClass('text-primary'),
+            $lang->action->create
+        );
+    }
+
     protected function build()
     {
         global $lang;
@@ -221,51 +274,11 @@ class history extends wg
             (
                 setClass('detail-title'),
                 span($lang->history),
-                button
-                (
-                    setClass('btn btn-mini btn-icon btn-reverse'),
-                    setStyle('margin-right', '4px'),
-                    set::type('button'),
-                    set::title($lang->reverse),
-                    h::i(setClass('icon icon-arrow-up icon-sm')),
-                    on::click(<<<REVERSE
-                    document.querySelector('.histories-list').classList.toggle('sort-reverse');
-                    var icon = e.target.querySelector('.icon');
-                    icon.classList.toggle('icon-arrow-up');
-                    icon.classList.toggle('icon-arrow-down');
-                    REVERSE),
-                ),
-                button
-                (
-                    setClass('btn btn-mini btn-icon btn-expand-all'),
-                    set::type('button'),
-                    set::title($lang->switchDisplay),
-                    h::i(setClass('icon icon-plus icon-sm')),
-                    on::click(<<<EXPANDALL
-                    var icon = e.target.querySelector('.icon');
-                    var isExpand = icon.classList.contains('icon-plus');
-                    var changeBoxs = document.querySelectorAll('[id^="changeBox"]');
-                    if(isExpand) {
-                        changeBoxs.forEach(function(box) {
-                            box.classList.add('show');
-                        });
-                    } else {
-                        changeBoxs.forEach(function(box) {
-                            box.classList.remove('show');
-                        });
-                    }
-                    icon.classList.toggle('icon-plus');
-                    icon.classList.toggle('icon-minus');
-                    EXPANDALL),
-                ),
-                button
-                (
-                    setClass('btn btn-link pull-right btn-comment'),
-                    set::type('button'),
-                    h::i(setClass('icon icon-chat-line'), ' ' . $lang->action->create)
-                ),
+                $this->reverseBtn(),
+                $this->expandAllBtn(),
+                $this->commentBtn(),
             ),
-            div(setClass('detail-content'), $this->buildHistoriesList())
+            div(setClass('detail-content'), $this->historyList())
         );
     }
 }