diff --git a/lib/zin/wg/docmenu/css/v1.css b/lib/zin/wg/docmenu/css/v1.css
index f83c559411..87cd458d4f 100644
--- a/lib/zin/wg/docmenu/css/v1.css
+++ b/lib/zin/wg/docmenu/css/v1.css
@@ -1,4 +1,5 @@
 .module-menu {max-height: calc(100vh - 105px);}
+.module-menu {padding: 12px 0px 8px 0px;}
 .module-menu .active {color: var(--color-primary-600); font-weight: 500;}
 .module-menu header a:hover > .icon {color: var(--color-primary-600) !important;}
 .module-menu .tree-item * {white-space: nowrap;}
diff --git a/module/api/control.php b/module/api/control.php
index 91920c7e3e..bd808a970d 100755
--- a/module/api/control.php
+++ b/module/api/control.php
@@ -659,25 +659,18 @@ class api extends control
      * @access public
      * @return void
      */
-    public function delete($apiID, $confirm = 'no')
+    public function delete($apiID)
     {
-        if($confirm == 'no')
+        $api = $this->api->getLibById($apiID);
+        $this->api->delete(TABLE_API, $apiID);
+
+        if(dao::isError())
         {
-            return print(js::confirm($this->lang->api->confirmDelete, inlink('delete', "apiID=$apiID&confirm=yes")));
+            $this->sendError(dao::getError());
         }
         else
         {
-            $api = $this->api->getLibById($apiID);
-            $this->api->delete(TABLE_API, $apiID);
-
-            if(dao::isError())
-            {
-                $this->sendError(dao::getError());
-            }
-            else
-            {
-                return print(js::locate($this->session->structList ? $this->session->structList : inlink('index', "libID=$api->lib&module=$api->module"), 'parent'));
-            }
+            return $this->sendSuccess(array('load' => inlink('index', "libID=$api->lib&module=$api->module")));
         }
     }
 
diff --git a/module/api/css/common.ui.css b/module/api/css/common.ui.css
new file mode 100644
index 0000000000..5445fc4e76
--- /dev/null
+++ b/module/api/css/common.ui.css
@@ -0,0 +1,2 @@
+.module-menu .tree-actions {position: absolute; right: 0px; display: none}
+.module-menu .tree-item-content:hover .tree-actions {display: flex}
diff --git a/module/api/css/view.ui.css b/module/api/css/view.ui.css
index ca4c4c10e9..3718f00ada 100644
--- a/module/api/css/view.ui.css
+++ b/module/api/css/view.ui.css
@@ -4,3 +4,8 @@
 .panel h2 {font-size: 17px; font-weight: 600; margin: 0;}
 .panel h3 {font-size: 17px; margin-top: 20px; margin-bottom: 10px;}
 pre { display: block; padding: 9.5px; margin: 0px 0px 10px; font-size: 12px; line-height: 1.38462; color: rgb(49, 60, 82); word-break: break-all; overflow-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px; }
+
+.scrollbar-hover { overflow-y: scroll; }
+#mainContent .panel+.panel {flex: none}
+#history{ position: relative;}
+#history > #closeBtn { position: absolute; right: 10px; top: 10px;}
diff --git a/module/api/js/view.ui.js b/module/api/js/view.ui.js
new file mode 100644
index 0000000000..e6f7888334
--- /dev/null
+++ b/module/api/js/view.ui.js
@@ -0,0 +1,102 @@
+/**
+ * Display the document in full screen.
+ *
+ * @access public
+ * @return void
+ */
+window.fullScreen = function()
+{
+    var element       = document.getElementById('content');
+    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
+    if(requestMethod)
+    {
+        var afterEnterFullscreen = function()
+        {
+            $('#content').addClass('scrollbar-hover');
+            $('#content').css('background', '#fff');
+            $.cookie.set('isFullScreen', 1);
+        };
+
+        var whenFailEnterFullscreen = function(error)
+        {
+            $.cookie.set('isFullScreen', 0);
+        };
+
+        try
+        {
+            var result = requestMethod.call(element);
+            if(result && (typeof result.then === 'function' || result instanceof window.Promise))
+            {
+                result.then(afterEnterFullscreen).catch(whenFailEnterFullscreen);
+            }
+            else
+            {
+                afterEnterFullscreen();
+            }
+        }
+        catch (error)
+        {
+            whenFailEnterFullscreen(error);
+        }
+    }
+}
+
+/**
+ * Exit full screen.
+ *
+ * @access public
+ * @return void
+ */
+function exitFullScreen()
+{
+    $('#content').removeClass('scrollbar-hover');
+    $.cookie.set('isFullScreen', 0);
+}
+
+document.addEventListener('fullscreenchange', function (e)
+{
+    if(!document.fullscreenElement) exitFullScreen();
+});
+
+document.addEventListener('webkitfullscreenchange', function (e)
+{
+    if(!document.webkitFullscreenElement) exitFullScreen();
+});
+
+document.addEventListener('mozfullscreenchange', function (e)
+{
+    if(!document.mozFullScreenElement) exitFullScreen();
+});
+
+document.addEventListener('msfullscreenChange', function (e)
+{
+    if(!document.msfullscreenElement) exitFullScreen();
+});
+
+$(function()
+{
+    if($.cookie.get('isFullScreen') == 1) fullScreen();
+
+    /* Update doc content silently on switch doc version, story #40503 */
+    $('.panel').on('click', '#hisTrigger', function()
+    {
+        var $history = $('#history');
+        var $icon = $(this);
+        if($history.hasClass('hidden'))
+        {
+            $history.removeClass('hidden');
+            $icon.addClass('text-primary');
+        }
+        else
+        {
+            $history.addClass('hidden');
+            $icon.removeClass('text-primary');
+        }
+    }).on('click', '#closeBtn', function()
+    {
+        $('#history').addClass('hidden');
+        $('#hisTrigger').removeClass('text-primary');
+    });
+
+    $('#history').append('<a id="closeBtn" href="###" class="btn btn-link"><i class="icon icon-close"></i></a>');
+});
diff --git a/module/api/ui/view.html.php b/module/api/ui/view.html.php
index ef032134e8..55f8a52972 100644
--- a/module/api/ui/view.html.php
+++ b/module/api/ui/view.html.php
@@ -235,7 +235,8 @@ panel
                 (!$isRelease && common::hasPriv('api', 'delete')) ? btn
                 (
                     set::url(createLink('api', 'delete', "apiID=$api->id")),
-                    setClass('btn ghost'),
+                    setClass('btn ghost ajax-submit'),
+                    set('data-confirm', $lang->api->confirmDelete),
                     icon('trash'),
                 ) : null,
                 btn
@@ -251,6 +252,7 @@ panel
     div
     (
         set::Class('panel-body'),
+        set::id('content'),
         h2($api->title),
         div(setClass('desc'), $api->desc),
         $apiHeader,
@@ -263,3 +265,9 @@ panel
         $api->responseExample ? html("<pre><code>" . $api->responseExample . "</code></pre>") : null,
     )
 );
+panel
+(
+    set::id('history'),
+    setClass('hidden'),
+    history()
+);