diff --git a/module/task/ui/view.html.php b/module/task/ui/view.html.php
index a372c8e65d..e4d4bbf4ad 100644
--- a/module/task/ui/view.html.php
+++ b/module/task/ui/view.html.php
@@ -3,80 +3,6 @@ declare(strict_types=1);
 namespace zin;
 global $lang;
 
-/**
- * Detail title wg.
- *
- * @param array $props type: array('title' => string, 'className' => ?string).
- * @return wg
- */
-function detailTitle(array $props): wg
-{
-    extract($props);
-    $className = isset($className) ? $className : null;
-
-    return div
-    (
-        setClass($className),
-        $title
-    );
-}
-
-/**
- * Detail subtitle wg.
- *
- * @param array $props type: array('title' => string, 'className' => ?string).
- * @return wg
- */
-function detailSubtitle(array $props): wg
-{
-    extract($props);
-    $className = isset($className) ? $className : null;
-
-    return div
-    (
-        setClass('detail-subtitle', $className),
-        $title
-    );
-}
-
-/**
- * Detail description wg.
- *
- * @param array $props type: array('desc' => string, 'className' => ?string).
- * @return wg
- */
-function detailDesc(array $props): wg
-{
-    extract($props);
-    $className = isset($className) ? $className : null;
-
-    return div
-    (
-        setClass('detail-desc', $className),
-        $desc
-    );
-}
-
-/**
- * Entity ID label wg.
- *
- * @param array $props type: array('id' => string|int, 'className' => ?string).
- * @return wg
- */
-function idLabel(array $props): wg
-{
-    extract($props);
-    $className = isset($className) ? $className : null;
-
-    return label
-    (
-        setClass('justify-center rounded-full', $className),
-        setStyle('height', '14px'),
-        setStyle('padding', '0 6px'),
-        $id
-    );
-}
-
 /**
  * Goback button wg.
  *
@@ -95,7 +21,7 @@ function backBtn(array $props): wg
         set::icon('back'),
         set::url($url),
         set::type('secondary'),
-        setClass($className),
+        setClass($className, 'mr-4'),
         $lang->goback
     );
 }
@@ -123,39 +49,6 @@ function createTaskBtn(array $props): wg
     );
 }
 
-/**
- * Detail section wg.
- *
- * @param wg|array $wg wg or wg array.
- * @return wg
- */
-function detailSection(wg|array $wg): wg
-{
-    return div
-    (
-        setClass('p-4'),
-        $wg
-    );
-}
-
-/**
- * Description heading wg.
- *
- * @param array $props type: array('title' => string, 'className' => ?string).
- * @return wg
- */
-function descHeading(array $props): wg
-{
-    extract($props);
-    $className = isset($className) ? $className : null;
-
-    return div
-    (
-        setClass('desc-heading', $className),
-        "[$title]"
-    );
-}
-
 /**
  * Vertical data table wg.
  * @param array $data
@@ -179,17 +72,6 @@ function vtable(array $data): wg
     );
 }
 
-function storySection(array $props): wg
-{
-    extract($props);
-    return div
-    (
-        setClass('my-4'),
-        descHeading(array('title' => $title, 'className' => $titleClass)),
-        detailDesc(array('desc' => $desc)),
-    );
-}
-
 div
 (
     setClass('detail-header flex justify-between mb-3'),
@@ -197,8 +79,12 @@ div
     (
         setClass('flex', 'items-center'),
         backBtn(array('url' => '')),
-        idLabel(array('id' => $task->id, 'className' => 'ml-4 mr-2')),
-        detailTitle(array('title' => $task->name, 'className' => 'text-lg text-title')),
+        entityLabel
+        (
+            set::entityID($task->id),
+            set::level(1),
+            set::text($task->name),
+        )
     ),
     createTaskBtn(array('url' => ''))
 );
@@ -209,29 +95,38 @@ div
     div
     (
         setClass('detail-main grow'),
-        detailSection
+        section
         (
-            array(
-                detailTitle(array('title' => $lang->task->legendDesc, 'className' => 'mb-3 mt-1 text-subtitle')),
-                detailDesc(array('desc' => empty($task->desc) ? $lang->noData : $task->desc)),
-            )
+            set::title($lang->task->legendDesc),
+            set::content(empty($task->desc) ? $lang->noData : $task->desc),
         ),
-        detailSection
+        section
         (
-            array(
-                detailTitle(array('title' => $lang->task->story, 'className' => 'text-subtitle')),
-                div
+            set::title($lang->task->story),
+            to::subTitle
+            (
+                entityLabel
                 (
                     setClass('my-3'),
-                    idLabel(array('id' => $task->storyID, 'className' => 'mr-2')),
-                    detailSubtitle(array('title' => $task->storyTitle, 'className' => 'text-base text-story-title inline-block')),
-                ),
-                div
-                (
-                    storySection(array('title' => $lang->story->legendSpec, 'titleClass' => 'mb-1 text-base', 'desc' => empty($task->storySpec) && empty($task->storyFiles) ? $lang->noData : $task->storySpec)),
-                    storySection(array('title' => $lang->task->storyVerify, 'titleClass' => 'mb-1 text-base', 'desc' => empty($task->storyVerify) ? $lang->noData : $task->storyVerify))
-                ),
-            )
+                    set::entityID($task->storyID),
+                    set::level(3),
+                    set::text($task->storyTitle),
+                )
+            ),
+            set::content
+            (
+                array(
+                    array(
+                        'title' => $lang->story->legendSpec,
+                        'content' => empty($task->storySpec) && empty($task->storyFiles) ? $lang->noData : $task->storySpec
+                    ),
+                    array(
+                        'title' => $lang->task->storyVerify,
+                        'content' => empty($task->storyVerify) ? $lang->noData : $task->storyVerify
+                    )
+                )
+            ),
+            set::useHtml(true)
         ),
         history
         (