diff --git a/module/testcase/control.php b/module/testcase/control.php
index 397d9c10b9..5748ca478a 100644
--- a/module/testcase/control.php
+++ b/module/testcase/control.php
@@ -815,7 +815,7 @@ class testcase extends control
      * @access public
      * @return void
      */
-    public function view(int $caseID, int $version = 0, string $from = 'testcase', int $taskID = 0)
+    public function view(int $caseID, int $version = 0, string $from = 'testcase', int $taskID = 0, $stepsType = 'table')
     {
         $this->session->set('bugList', $this->app->getURI(true), $this->app->tab);
 
@@ -858,6 +858,7 @@ class testcase extends control
 
         $this->view->from       = $from;
         $this->view->taskID     = $taskID;
+        $this->view->stepsType   = $stepsType;
         $this->view->version    = $version ? $version : $case->version;
         $this->view->users      = $this->user->getPairs('noletter');
         $this->view->actions    = $this->loadModel('action')->getList('case', $caseID);
diff --git a/module/testcase/js/view.ui.js b/module/testcase/js/view.ui.js
index fc285021b4..e8a02de51d 100644
--- a/module/testcase/js/view.ui.js
+++ b/module/testcase/js/view.ui.js
@@ -1,7 +1,5 @@
 function toggleStepsView(event)
 {
-    $('.step-change-view .icon-table-large').parent().toggleClass('text-primary');
-    $('.step-change-view .icon-tree').parent().toggleClass('text-primary');
-    $('#stepsTable').toggleClass('hidden');
-    $('#stepsView').toggleClass('hidden');
+    var isTable = $(event.target).hasClass('icon-table-large');
+    loadPage($.createLink('testcase', 'view', viewParams + (isTable ? 'table' : 'mindmap')), '.steps-section');
 }
diff --git a/module/testcase/ui/view.html.php b/module/testcase/ui/view.html.php
index 6b37fe2737..a7fed3e52f 100644
--- a/module/testcase/ui/view.html.php
+++ b/module/testcase/ui/view.html.php
@@ -12,33 +12,38 @@ namespace zin;
 
 $canCreateCase = hasPriv('testcase', 'create');
 
-$steps = array();
-foreach($case->steps as $step)
-{
-    $stepClass = $step->type == 'step' ? 'step-group' : "step-{$step->type}";
-    $stepClass .= count($steps) > 0 && $step->grade == 1 ? ' mt-2' : ' border-t-0';
+jsVar('viewParams', "caseID={$case->id}&version={$version}&from={$from}&taskID={$taskID}&stepsType=");
 
-    $steps[] = cell
-    (
-        setClass("step {$stepClass} border align-top flex"),
-        cell
-        (
-            setClass('text-left flex border-r step-id'),
-            width('1/2'),
-            span
+$steps = array();
+if($stepsType == 'table')
+{
+    foreach($case->steps as $step)
+    {
+        $stepClass = $step->type == 'step' ? 'step-group' : "step-{$step->type}";
+        $stepClass .= count($steps) > 0 && $step->grade == 1 ? ' mt-2' : ' border-t-0';
+
+        $steps[] = cell
             (
-                setClass('pr-2 pl-' . (($step->grade - 1) * 2)),
-                $step->name,
-            ),
-            html(nl2br(str_replace(' ', ' ', $step->desc))),
-        ),
-        cell
-        (
-            setClass('text-left flex'),
-            width('1/2'),
-            html(nl2br(str_replace(' ', ' ', $step->expect))),
-        ),
-    );
+                setClass("step {$stepClass} border align-top flex"),
+                cell
+                (
+                    setClass('text-left flex border-r step-id'),
+                    width('1/2'),
+                    span
+                    (
+                        setClass('pr-2 pl-' . (($step->grade - 1) * 2)),
+                        $step->name,
+                    ),
+                    html(nl2br(str_replace(' ', ' ', $step->desc))),
+                ),
+                cell
+                (
+                    setClass('text-left flex'),
+                    width('1/2'),
+                    html(nl2br(str_replace(' ', ' ', $step->expect))),
+                ),
+            );
+    }
 }
 
 $files = '';
@@ -306,6 +311,7 @@ detailHeader
 $actions = $this->loadModel('common')->buildOperateMenu($case);
 detailBody
 (
+    on::click('.steps-section . step-change-view icon', 'toggleStepsView'),
     sectionList
     (
         section
@@ -317,6 +323,7 @@ detailBody
         ),
         section
         (
+            setClass('steps-section'),
             set::title($lang->testcase->steps),
             to::actions
             (
@@ -326,7 +333,8 @@ detailBody
                     width('fit'),
                     cell
                     (
-                        setClass('px-1.5 leading-4 border-r text-primary step-change-view-btn'),
+                        setClass('px-1.5 leading-4 border-r step-change-view-btn'),
+                        $stepsType == 'table' ? setClass('text-primary') : '',
                         icon
                         (
                             on::click('toggleStepsView'),
@@ -337,6 +345,7 @@ detailBody
                     cell
                     (
                         setClass('px-1.5 leading-4 step-change-view-btn'),
+                        $stepsType != 'table' ? setClass('text-primary') : '',
                         icon
                         (
                             on::click('toggleStepsView'),
@@ -346,7 +355,7 @@ detailBody
                     ),
                 ),
             ),
-            div
+            $stepsType == 'table' ? div
             (
                 set::id('stepsTable'),
                 div
@@ -370,16 +379,15 @@ detailBody
                     setClass('steps-body'),
                     $steps,
                 )
-            ),
-            div
+            ) : div
             (
-                setClass('hidden'),
                 set::id('stepsView'),
                 mindmap
                 (
                     set::data($case->mindMapSteps),
                     set::height('600px'),
-                    set::width('600px'),
+                    set::width('100%'),
+                    set::readonly(true),
                 ),
             ),
             set::useHtml(true),
diff --git a/module/testcase/zen.php b/module/testcase/zen.php
index 686c2ff027..6ba76e435e 100644
--- a/module/testcase/zen.php
+++ b/module/testcase/zen.php
@@ -134,9 +134,10 @@ class testcaseZen extends testcase
     protected function processStepsForMindMap(object $case): object
     {
         $mindMapSteps = array();
-        $mindMapSteps['id']   = $case->id;
-        $mindMapSteps['text'] = $case->title;
-        $mindMapSteps['type'] = 'root';
+        $mindMapSteps['id']      = $case->id;
+        $mindMapSteps['text']    = $case->title;
+        $mindMapSteps['type']    = 'root';
+            $stepItem['subSide'] = 'right';
 
         $reverseSteps = array_reverse($case->steps);
 
@@ -144,10 +145,11 @@ class testcaseZen extends testcase
         foreach($reverseSteps as $step)
         {
             $stepItem = array();
-            $stepItem['id']   = $step->id;
-            $stepItem['text'] = $step->step;
-            $stepItem['type'] = $step->grade == 1 ? 'sub' : 'node';
-            $stepItem['parent'] = $step->parent > 0 ? $step->parent : $case->id;
+            $stepItem['id']      = $step->id;
+            $stepItem['text']    = $step->step;
+            $stepItem['type']    = $step->grade                                   =  = 1 ? 'sub' : 'node';
+            $stepItem['parent']  = $step->parent > 0 ? $step->parent : $case->id;
+            $stepItem['subSide'] = 'right';
             if(isset($parentSteps[$step->id])) $stepItem['children'] = array_reverse($parentSteps[$step->id]);
 
             if($step->parent > 0)