diff --git a/css/plugins/approve.less b/css/plugins/approve.less
index 14c4c22..356c3cd 100644
--- a/css/plugins/approve.less
+++ b/css/plugins/approve.less
@@ -1,7 +1,36 @@
 /**
  * This file provides styles for approve plugin
  */
-#plugin__approve {
-    position: static;
-    display: inline;
+
+.page-attributes > li #plugin__approve {
+    display: none;
+}
+
+@media screen {
+    #plugin__approve {
+        display: none; // initial
+        padding: 2rem 1rem;
+        clear: both;
+    }
+
+    span.plugin_approve-icon.plugin__approve_draft {
+        background-color: #fdb1b1;
+        &:hover {
+            background-color: unset;
+        }
+    }
+
+    span.plugin_approve-icon.plugin__approve_ready {
+        background-color: #94bffb;
+        &:hover {
+            background-color: unset;
+        }
+    }
+
+    span.plugin_approve-icon.plugin__approve_approved {
+        background-color: #94fb94;
+        &:hover {
+            background-color: unset;
+        }
+    }
 }
diff --git a/css/print.less b/css/print.less
index c5be8a4..7ae1010 100755
--- a/css/print.less
+++ b/css/print.less
@@ -557,3 +557,13 @@ form {
         border: 1pt solid @border-dark-print;
     }
 }
+
+/*
+ * Plugins
+ */
+
+/* * * * approve * * * */
+#plugin__approve {
+    // we hide the banner with JS, make it visible again in print
+    display: block !important;
+}
diff --git a/js/plugins/approve.js b/js/plugins/approve.js
new file mode 100644
index 0000000..1a5915f
--- /dev/null
+++ b/js/plugins/approve.js
@@ -0,0 +1,21 @@
+/**
+ * Approve plugin banner
+ */
+jQuery(function () {
+    const $icon = jQuery('span.plugin_approve-icon');
+    const $metaBox = jQuery('#spr__meta-box');
+    const $banner = jQuery('#plugin__approve');
+    const title = $banner.find('strong').text();
+
+    $icon.addClass($banner.attr('class'));
+    $icon.attr('title', title);
+
+    // anchor to the sprintdoc meta box
+    $metaBox.after($banner);
+
+    $icon.click(function (e) {
+        e.preventDefault();
+        $banner.dw_toggle();
+    });
+
+});
diff --git a/main.php b/main.php
index 30bd463..982b703 100755
--- a/main.php
+++ b/main.php
@@ -15,6 +15,9 @@ if (!defined('DOKU_INC')) die();                        /* must be run from with
 header('X-UA-Compatible: IE=edge,chrome=1');
 
 global $JSINFO;
+global $conf;
+global $lang;
+
 if (empty($JSINFO['template'])) {
     $JSINFO['template'] = array();
 }
diff --git a/script.js b/script.js
index a4c34e3..4d23564 100755
--- a/script.js
+++ b/script.js
@@ -1,3 +1,4 @@
+/* DOKUWIKI:include js/plugins/approve.js */
 /* DOKUWIKI:include js/plugins/do_tasks.js */
 /* DOKUWIKI:include js/plugins/qc.js */
 /* DOKUWIKI:include js/plugins/bookcreator.js */
diff --git a/tpl/nav-page-attributes.php b/tpl/nav-page-attributes.php
index 5db8766..ebee0f7 100755
--- a/tpl/nav-page-attributes.php
+++ b/tpl/nav-page-attributes.php
@@ -1,5 +1,6 @@
 <?php
-if(!defined('DOKU_INC')) die();
+
+if (!defined('DOKU_INC')) die();
 
 /** @var \helper_plugin_do $doPlugin */
 $doPlugin = plugin_load('helper', 'do');
@@ -12,29 +13,28 @@ $quickSubPlugin = plugin_load('helper', 'quicksubscribe');
 /** @var \helper_plugin_approve_tpl $approvePlugin */
 $approvePlugin = plugin_load('helper', 'approve_tpl');
 
-if($doPlugin !== null || $qcPlugin !== null || $starredPlugin !== null) {
-    echo '<ul class="page-attributes">';
-}
+$items = [];
 
 
-if($qcPlugin && $qcPlugin->shouldShow()) {
+if ($qcPlugin && $qcPlugin->shouldShow()) {
     $qcPrefix = tpl_getLang('quality_trigger');
-    echo '<li class="plugin_qc"><strong class="sr-out">'.$qcPrefix.':</strong><a href="#"></a></li>'; // filled by javascript
+    // filled by javascript
+    $items[] = '<li class="plugin_qc"><strong class="sr-out">' . hsc($qcPrefix) . ':</strong><a href="#"></a></li>';
 }
 
 
-if($doPlugin !== null) {
+if ($doPlugin !== null) {
     $count = $doPlugin->getPageTaskCount();
-    $num = $count['count'];
-    $title = "";
+    $num = (int) $count['count'];
+    $title = '';
 
-    if($num == 0) { // no tasks - does not exist do in plug-in
-        $class = "do_none";
+    if ($num == 0) { // no tasks - does not exist do in plug-in
+        $class = 'do_none';
         $title = tpl_getLang('tasks_page_none');
-    } elseif($count['undone'] == 0) { // all tasks done
+    } elseif ($count['undone'] == 0) { // all tasks done
         $class = 'do_done';
         $title = $doPlugin->getLang('title_alldone');
-    } elseif($count['late'] == 0) { // open tasks but none late
+    } elseif ($count['late'] == 0) { // open tasks but none late
         $class = 'do_undone';
         $title = sprintf(tpl_getLang('tasks_page_intime'), $count['undone']);
     } else { // late tasks
@@ -42,31 +42,32 @@ if($doPlugin !== null) {
         $title = sprintf(tpl_getLang('tasks_page_late'), $count['undone'], $count['late']);
     }
 
-    echo '<li class="plugin_do_pagetasks">';
-    echo '<span title="'.$title.'" class="'.$class.'">';
-    echo inlineSVG(DOKU_PLUGIN . 'do/pix/clipboard-text.svg');
-    echo '</span>';
-    echo '<span class="num">' . $count['undone'] . '</span>';
-    echo '</li>';
+    $items[] = '<li class="plugin_do_pagetasks">' .
+        '<span title="' . hsc($title) . '" class="' . $class . '">' .
+        inlineSVG(DOKU_PLUGIN . 'do/pix/clipboard-text.svg') .
+        '</span>' .
+        '<span class="num">' . (int) $count['undone'] . '</span>' .
+        '</li>';
 }
 
-if($starredPlugin !== null) {
-    echo '<li class="plugin_starred">';
-    $starredPlugin->tpl_starred();
-    echo '</li>';
+if ($starredPlugin !== null) {
+    $items[] = '<li class="plugin_starred">' . $starredPlugin->tpl_starred(false, false) . '</li>';
 }
 
-if($quickSubPlugin !== null) {
-    echo '<li class="plugin_quicksubscribe">';
-    echo $quickSubPlugin->tpl_subscribe();
-    echo '</li>';
+if ($quickSubPlugin !== null) {
+    $items[] = '<li class="plugin_quicksubscribe">' . $quickSubPlugin->tpl_subscribe() . '</li>';
 }
 
-if($doPlugin !== null || $qcPlugin !== null || $starredPlugin !== null) {
-    echo "</ul>";
-}
-
-if($approvePlugin !== null) {
+if ($approvePlugin !== null && $approvePlugin->shouldDisplay()) {
     global $ACT;
-    echo $approvePlugin->banner($ACT);
+    $items[] = '<li class="plugin_approve">' .
+        '<span class="plugin_approve-icon">' . inlineSVG(DOKU_PLUGIN . 'approve/admin.svg') . '</span>' .
+        '<div class="plugin_approve-banner-content">' .
+        $approvePlugin->banner($ACT) .
+        '</div>' .
+        '</li>';
+}
+
+if (!empty($items)) {
+    echo '<ul class="page-attributes">' . implode('', $items) . '</ul>';
 }