diff --git a/module/block/ui/guideblock.html.php b/module/block/ui/guideblock.html.php
index 1c0a291a59..e202a2b228 100644
--- a/module/block/ui/guideblock.html.php
+++ b/module/block/ui/guideblock.html.php
@@ -100,7 +100,16 @@ panel
         (
             set('class', 'panel-title w-full justify-between'),
             $block->title,
-            a(set('href', createLink('tutorial', 'start')), set('class', 'btn warning'), $lang->block->tutorial)
+            a(
+                set(
+                    array(
+                        'href' => createLink('tutorial', 'start'),
+                        'class' => 'btn btn-primary warning',
+                        'data-toggle' => 'modal',
+                    )
+                ),
+                $lang->block->tutorial
+            )
         )
     ),
     div
diff --git a/module/tutorial/css/start.ui.css b/module/tutorial/css/start.ui.css
new file mode 100644
index 0000000000..6c04a28193
--- /dev/null
+++ b/module/tutorial/css/start.ui.css
@@ -0,0 +1,10 @@
+#start {padding: 40px; text-align: center; color: #fff;}
+.start-icon {position: relative; width: 140px; height: 140px; margin: 0 auto; line-height: 140px;}
+.start-icon .icon1{font-size: 140px; color: rgba(0,0,0,.1); text-shadow: 0 1px 7px rgb(0,0,0,.1); animation: -spin 15s linear infinite}
+.start-icon .icon2{font-size: 56px; position: absolute; top: 35px; left: 42px; color: #EBF2F9; z-index: 10; width: 70px; height: 70px; text-align: center; line-height: 70px; text-shadow: 0 1px 3px rgb(0,0,0,.15);}
+#start > h1, #start > p {margin-bottom: 30px;}
+h1{font-size: 24px;}
+.btn-start-now{min-width: 120px; height: 42px;}
+.btn-lg{padding: 11px 16px; font-size: 14px; line-height: 18px; border-radius: 4px;}
+.btn-info{color: #2e7fff; background-color: #e6f0ff; border-color: transparent;}
+.modal-dialog .modal-content .modal-body{padding: 0;}
diff --git a/module/tutorial/ui/start.html.php b/module/tutorial/ui/start.html.php
new file mode 100644
index 0000000000..8aeebae75d
--- /dev/null
+++ b/module/tutorial/ui/start.html.php
@@ -0,0 +1,33 @@
+<?php
+declare(strict_types=1);
+/**
+ * The trash view file of action module of ZenTaoPMS.
+ * @copyright   Copyright 2009-2023 禅道软件（青岛）有限公司(ZenTao Software (Qingdao) Co., Ltd. www.zentao.net)
+ * @license     ZPL(https://zpl.pub/page/zplv12.html) or AGPL(https://www.gnu.org/licenses/agpl-3.0.en.html)
+ * @author      Wang XuePeng <wangxuepeng@easycorp.ltd>
+ * @package     tutorial
+ * @link        https://www.zentao.net
+ */
+namespace zin;
+
+div
+(
+    set::id('start'),
+    set::className('bg-primary'),
+    div
+    (
+        set::className('start-icon'),
+        icon('certificate icon-certificate-empty icon1 spin'),
+        icon('flag icon2')
+    ),
+    h1($lang->tutorial->common),
+    p($lang->tutorial->desc),
+    a(
+        set::className('btn btn-default btn-start-now btn-lg btn-info'),
+        set::href($this->inlink('index')),
+        set::target('_top'),
+        span($lang->tutorial->start),
+    )
+);
+
+render();