diff --git a/core/src/main/resources/hudson/PluginManager/advanced.jelly b/core/src/main/resources/hudson/PluginManager/advanced.jelly
index 0c505d3b565b..853758343ba7 100644
--- a/core/src/main/resources/hudson/PluginManager/advanced.jelly
+++ b/core/src/main/resources/hudson/PluginManager/advanced.jelly
@@ -31,13 +31,13 @@ THE SOFTWARE.
     <l:layout title="${%Advanced Settings} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
         <j:set var="readOnlyMode" value="${!app.hasPermission(app.ADMINISTER)}"/>
 
-        <l:app-bar title="${%Plugin Manager}"/>
+        <l:app-bar title="${%Advanced settings}"/>
 
-        <st:include page="sidepanel.jelly"/>
+        <l:side-panel>
+          <local:sidepanel xmlns:local="/hudson/PluginManager" page="advanced" />
+        </l:side-panel>
 
         <l:main-panel>
-            <local:tabBar page="advanced" xmlns:local="/hudson/PluginManager"/>
-
             <section class="jenkins-section jenkins-!-margin-bottom-5">
                 <h2 class="jenkins-section__title">${%HTTP Proxy Configuration}</h2>
                 <f:form method="post" action="proxyConfigure" name="proxyConfigure">
diff --git a/core/src/main/resources/hudson/PluginManager/available.jelly b/core/src/main/resources/hudson/PluginManager/available.jelly
index 8d8e4ab7a3f8..f3dffb651269 100644
--- a/core/src/main/resources/hudson/PluginManager/available.jelly
+++ b/core/src/main/resources/hudson/PluginManager/available.jelly
@@ -28,30 +28,23 @@ THE SOFTWARE.
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:f="/lib/form">
   <l:layout title="${%Available Plugins} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
-    <j:set var="page" value="available"/>
-
-    <l:app-bar title="${%Plugin Manager}" />
-
-    <st:include page="sidepanel.jelly"/>
+    <l:side-panel>
+      <local:sidepanel xmlns:local="/hudson/PluginManager" page="available" />
+    </l:side-panel>
 
     <l:main-panel>
+      <div class="jenkins-app-bar jenkins-app-bar--sticky">
+        <div class="jenkins-app-bar__content">
+          <l:search-bar clazz="jenkins-search--app-bar"
+                        placeholder="${%Search available plugins}"
+                        id="filter-box"
+                        value="${request.getParameter('filter')}" />
+        </div>
+      </div>
+
       <script src="${resURL}/jsbundles/plugin-manager-ui.js" type="text/javascript"/>
 
       <form method="post" action="install">
-        <local:tabBar page="${page}" xmlns:local="/hudson/PluginManager"/>
-
-        <div class="jenkins-form-item jenkins-search">
-          <input
-            class="jenkins-search__input"
-            type="search"
-            id="filter-box"
-            value="${request.getParameter('filter')}"
-            placeholder="${%Search}"/>
-          <div class="jenkins-search__icon">
-            <l:icon src="symbol-search"/>
-          </div>
-        </div>
-
         <table id="plugins" class="jenkins-table sortable"
                data-hasAdmin="${h.hasPermission(app.ADMINISTER)}">
           <thead>
diff --git a/core/src/main/resources/hudson/PluginManager/installed.jelly b/core/src/main/resources/hudson/PluginManager/installed.jelly
index 96650d97f0c5..96b64542c9fe 100644
--- a/core/src/main/resources/hudson/PluginManager/installed.jelly
+++ b/core/src/main/resources/hudson/PluginManager/installed.jelly
@@ -30,11 +30,20 @@ THE SOFTWARE.
   <l:layout title="${%Installed Plugins} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
     <j:set var="readOnlyMode" value="${!app.hasPermission(app.ADMINISTER)}"/>
 
-    <l:app-bar title="${%Plugin Manager}" />
-
-    <st:include page="sidepanel.jelly"/>
+    <l:side-panel>
+      <local:sidepanel xmlns:local="/hudson/PluginManager" page="installed" />
+    </l:side-panel>
 
     <l:main-panel>
+      <div class="jenkins-app-bar jenkins-app-bar--sticky">
+        <div class="jenkins-app-bar__content">
+          <l:search-bar clazz="jenkins-search--app-bar"
+                        placeholder="${%Search installed plugins}"
+                        id="filter-box"
+                        value="${request.getParameter('filter')}" />
+        </div>
+      </div>
+
       <st:adjunct includes="hudson.PluginManager._table"/>
 
       <j:if test="${app.updateCenter.isRestartRequiredForCompletion()}">
@@ -53,20 +62,6 @@ THE SOFTWARE.
            data-detached-possible-dependents="${%detached-possible-dependents}"
       />
 
-      <local:tabBar page="installed" xmlns:local="/hudson/PluginManager" />
-
-      <div class="jenkins-form-item jenkins-search">
-        <input
-          class="jenkins-search__input"
-          type="search"
-          id="filter-box"
-          value="${request.getParameter('filter')}"
-          placeholder="${filtered == 'true' ? '%Search' : '%Filter'}"/>
-        <div class="jenkins-search__icon">
-          <l:icon src="symbol-search"/>
-        </div>
-      </div>
-
       <table id="plugins" class="jenkins-table sortable">
         <j:choose>
           <j:when test="${empty(app.pluginManager.plugins) and empty(app.pluginManager.failedPlugins)}">
diff --git a/core/src/main/resources/hudson/PluginManager/sidepanel.groovy b/core/src/main/resources/hudson/PluginManager/sidepanel.groovy
deleted file mode 100644
index 555a7bb42623..000000000000
--- a/core/src/main/resources/hudson/PluginManager/sidepanel.groovy
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * The MIT License
- *
- * Copyright (c) 2011, CloudBees, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- */
-package hudson.PluginManager
-l=namespace(lib.LayoutTagLib)
-
-l.header()
-l.side_panel {
-    l.tasks {
-        l.task(icon:"icon-up icon-md", href:rootURL+'/', title:_("Back to Dashboard"))
-        l.task(icon:"symbol-settings", href:"${rootURL}/manage", title:_("Manage Jenkins"))
-        if (!app.updateCenter.jobs.isEmpty()) {
-            l.task(icon: "symbol-download", href:"../updateCenter/", title:_("Update Center"))
-        }
-    }
-}
diff --git a/core/src/main/resources/hudson/PluginManager/sidepanel.jelly b/core/src/main/resources/hudson/PluginManager/sidepanel.jelly
new file mode 100644
index 000000000000..47db8db3cfef
--- /dev/null
+++ b/core/src/main/resources/hudson/PluginManager/sidepanel.jelly
@@ -0,0 +1,117 @@
+<!--
+The MIT License
+
+Copyright (c) 2022, Jenkins contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+-->
+
+<!--
+  Sidepanel component for Plugins Manager
+-->
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
+  <st:documentation>
+    <st:attribute name="page">
+      Adds the highlighted class to the current page item in the list
+    </st:attribute>
+  </st:documentation>
+
+  <div id="tasks" class="app-plugin-manager__sidebar">
+    <div class="jenkins-app-bar">
+      <div class="jenkins-app-bar__content">
+        <h1>${%Plugins}</h1>
+      </div>
+    </div>
+
+    <div class="task">
+      <span class="task-link-wrapper">
+        <a href="./" class="task-link ${page == 'updates' ? 'task-link--active' : ''}">
+          <div class="task-icon-link">
+            <l:icon src="symbol-download" />
+          </div>
+          <span class="task-icon-text">
+            ${%Updates}
+          </span>
+          <j:if test="${app.updateCenter.updates.size() != 0}">
+            <span class="task-icon-badge">
+              ${app.updateCenter.updates.size()}
+            </span>
+          </j:if>
+        </a>
+      </span>
+    </div>
+
+    <div class="task">
+      <span class="task-link-wrapper">
+        <a href="./available" class="task-link ${page == 'available' ? 'task-link--active' : ''}">
+          <div class="task-icon-link">
+            <l:icon src="symbol-shopping-bag" />
+          </div>
+          <span class="task-icon-text">
+            ${%Available plugins}
+          </span>
+        </a>
+      </span>
+    </div>
+
+    <div class="task">
+      <span class="task-link-wrapper">
+        <a href="./installed" class="task-link ${page == 'installed' ? 'task-link--active' : ''}">
+          <div class="task-icon-link">
+            <l:icon src="symbol-plugins" />
+          </div>
+          <span class="task-icon-text">
+            ${%Installed plugins}
+          </span>
+        </a>
+      </span>
+    </div>
+
+    <div class="task">
+      <span class="task-link-wrapper">
+        <a href="./advanced" class="task-link ${page == 'advanced' ? 'task-link--active' : ''}">
+          <div class="task-icon-link">
+            <l:icon src="symbol-settings" />
+          </div>
+          <span class="task-icon-text">
+            ${%Advanced settings}
+          </span>
+        </a>
+      </span>
+    </div>
+
+    <j:if test="${!app.updateCenter.jobs.isEmpty()}">
+      <hr />
+
+      <div class="task">
+        <span class="task-link-wrapper">
+          <a href="../updateCenter" class="task-link">
+            <div class="task-icon-link">
+              <l:icon src="symbol-list" />
+            </div>
+            <span class="task-icon-text">
+              ${%Update Center}
+            </span>
+          </a>
+        </span>
+      </div>
+    </j:if>
+  </div>
+</j:jelly>
diff --git a/core/src/main/resources/hudson/PluginManager/table.jelly b/core/src/main/resources/hudson/PluginManager/table.jelly
index 5ffcfebf7d21..4a29ab1fbf06 100644
--- a/core/src/main/resources/hudson/PluginManager/table.jelly
+++ b/core/src/main/resources/hudson/PluginManager/table.jelly
@@ -37,27 +37,24 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
   <l:layout title="${%Update Center} - ${%Plugin Manager}" permission="${app.SYSTEM_READ}">
-    <l:app-bar title="${%Plugin Manager}" />
+    <l:side-panel>
+      <local:sidepanel xmlns:local="/hudson/PluginManager" page="updates" />
+    </l:side-panel>
 
-    <st:include page="sidepanel.jelly"/>
     <l:main-panel>
+      <div class="jenkins-app-bar jenkins-app-bar--sticky">
+        <div class="jenkins-app-bar__content">
+          <l:search-bar clazz="jenkins-search--app-bar"
+                        placeholder="${%Search plugin updates}"
+                        id="filter-box"
+                        value="${request.getParameter('filter')}" />
+        </div>
+      </div>
+
       <st:adjunct includes="hudson.PluginManager._table"/>
 
       <form method="post" action="install">
         <j:set var="isUpdates" value="${attrs.page=='updates'}"/>
-        <local:tabBar xmlns:local="/hudson/PluginManager" page="${attrs.page}"/>
-
-        <div class="jenkins-form-item jenkins-search">
-          <input
-            class="jenkins-search__input"
-            type="search"
-            id="filter-box"
-            value="${request.getParameter('filter')}"
-            placeholder="${filtered == 'true' ? '%Search' : '%Filter'}"/>
-          <div class="jenkins-search__icon">
-            <l:icon src="symbol-search"/>
-          </div>
-        </div>
 
         <j:set var="cache" value="${it.createCache()}"/>
 
diff --git a/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly b/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly
index 2b41fed5ef7b..f36fa46e094c 100644
--- a/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly
+++ b/core/src/main/resources/hudson/widgets/HistoryWidget/index.jelly
@@ -79,12 +79,7 @@ THE SOFTWARE.
     <l:pane width="3" title="${h.runScript(paneTitle)}" footer="${h.runScript(paneFooter)}" id="buildHistory" class="jenkins-pane stripped">
       <tr class="build-search-row">
         <td>
-          <div class="jenkins-search">
-            <input type="search" placeholder="${%find}" class="jenkins-search__input" />
-            <div class="jenkins-search__icon">
-              <l:icon src="symbol-search" />
-            </div>
-          </div>
+          <l:search-bar placeholder="${%find}" />
           <div id="no-builds" class="jenkins-pane__information" style="${page.runs.isEmpty() and page.queueItems.isEmpty() ? '' : 'display: none;'}">
             ${%No builds}
           </div>
diff --git a/core/src/main/resources/lib/layout/search-bar.jelly b/core/src/main/resources/lib/layout/search-bar.jelly
new file mode 100644
index 000000000000..9565f042cb2d
--- /dev/null
+++ b/core/src/main/resources/lib/layout/search-bar.jelly
@@ -0,0 +1,53 @@
+<!--
+The MIT License
+
+Copyright (c) 2022 Jan Faracik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+-->
+
+<?jelly escape-by-default='true'?>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
+  <st:documentation>
+    <st:attribute name="value" />
+    <st:attribute name="placeholder" />
+    <st:attribute name="id" />
+    <st:attribute name="autofocus" />
+    <st:attribute name="clazz" />
+  </st:documentation>
+
+  <div class="jenkins-search ${attrs.clazz}">
+    <div class="jenkins-search__icon">
+      <l:icon src="symbol-search" />
+    </div>
+    <input value="${attrs.value}"
+           id="${attrs.id}"
+           class="jenkins-search__input"
+           placeholder="${attrs.placeholder ?: '%Search'}"
+           type="search"
+           autofocus="${attrs.autofocus}"
+           autocomplete="off"
+           autocorrect="off"
+           autocapitalize="off"
+           spellcheck="false" />
+    <div class="jenkins-search__shortcut" tooltip="Press / on your keyboard to focus">
+      <l:icon src="symbol-search-shortcut" />
+    </div>
+  </div>
+</j:jelly>
diff --git a/war/src/main/js/keyboard-shortcuts.js b/war/src/main/js/keyboard-shortcuts.js
index c6312e841070..8673723d6414 100644
--- a/war/src/main/js/keyboard-shortcuts.js
+++ b/war/src/main/js/keyboard-shortcuts.js
@@ -11,6 +11,16 @@ window.addEventListener("load", () => {
     // Returning false stops the event and prevents default browser events
     return false
   })
+
+  const pageSearchBar = document.querySelectorAll(".jenkins-search__input")
+  if (pageSearchBar.length === 1) {
+    hotkeys(translateModifierKeysForUsersPlatform("/"), () => {
+      pageSearchBar[0].focus()
+
+      // Returning false stops the event and prevents default browser events
+      return false
+    })
+  }
 })
 
 /**
diff --git a/war/src/main/less/form/search.less b/war/src/main/less/form/search-bar.less
similarity index 63%
rename from war/src/main/less/form/search.less
rename to war/src/main/less/form/search-bar.less
index 87f7b07769e3..0d8fce734707 100644
--- a/war/src/main/less/form/search.less
+++ b/war/src/main/less/form/search-bar.less
@@ -1,19 +1,23 @@
 .jenkins-search {
+  --search-bar-height: 2.1875rem;
+
   position: relative;
   max-width: 420px;
 
   &__input {
     appearance: none;
-    display: block;
-    background: var(--input-color);
-    border: 2px solid var(--input-border);
-    border-radius: var(--form-input-border-radius);
+    background: var(--item-background--hover);
+    border: none;
+    outline: none;
+    border-radius: 10px;
     width: 100%;
     margin: 0;
-    padding: 0 4px 0 29px;
-    line-height: 30px;
+    padding: 0 0.5rem 0 var(--search-bar-height);
+    line-height: 1;
     box-shadow: var(--form-input-glow);
     transition: var(--standard-transition);
+    font-weight: 500;
+    height: var(--search-bar-height);
 
     // Safari adds unwanted padding - let's remove it
     &::-webkit-search-decoration {
@@ -22,9 +26,9 @@
 
     &::-webkit-search-cancel-button {
       -webkit-appearance: none;
-      height: 1rem;
-      width: 1rem;
-      margin-right: 2px;
+      height: 1.1rem;
+      width: 1.1rem;
+      margin-right: 0.2rem;
       background: currentColor;
       mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z'/%3E%3C/svg%3E");
       mask-size: contain;
@@ -45,12 +49,12 @@
     }
 
     &:hover {
-      border-color: var(--input-border-hover);
+      background: var(--item-background--active);
     }
 
     &:active, &:focus {
       outline: none;
-      border-color: var(--focus-input-border);
+      background: var(--item-background--active);
       box-shadow: var(--form-input-glow--focus);
 
       &::-webkit-search-cancel-button {
@@ -109,6 +113,39 @@
     }
   }
 
+  &__shortcut {
+    position: absolute;
+    aspect-ratio: 1 / 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 0.25s ease;
+    text-align: center;
+    font-size: 0.8em;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--text-color-secondary);
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: calc(50% - 1em);
+      right: calc(50% - 1em);
+      width: 2em;
+      height: 2em;
+      border: 0.1rem solid var(--item-background--active);
+      border-radius: 0.3rem;
+    }
+
+    svg {
+      width: 1.2em;
+      height: 1.2em;
+    }
+  }
+
   &--loading {
     .jenkins-search__icon {
       svg {
@@ -130,9 +167,35 @@
     }
   }
 
+  &--app-bar {
+    --search-bar-height: 3rem;
+
+    max-width: 50vw;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 10px;
+      z-index: -1;
+      backdrop-filter: blur(20px);
+      box-shadow: 0 0 var(--section-padding) var(--background);
+
+      @supports not (backdrop-filter: blur(20px)) {
+        background: var(--background);
+      }
+    }
+  }
+
   &:focus-within {
     .jenkins-search__icon {
       fill: var(--focus-input-border);
     }
+
+    .jenkins-search__shortcut {
+      opacity: 0;
+      transform: scale(0.9);
+      pointer-events: none;
+    }
   }
 }
diff --git a/war/src/main/less/modules/app-bar.less b/war/src/main/less/modules/app-bar.less
index e429f7bac435..bc9ea4ac9783 100644
--- a/war/src/main/less/modules/app-bar.less
+++ b/war/src/main/less/modules/app-bar.less
@@ -31,8 +31,41 @@
     border-bottom: 2px solid var(--panel-border-color);
   }
 
-  h1,
-  h2 {
+  &--sticky {
+    position: sticky;
+    top: 40px;
+    padding-top: 2rem;
+    margin-top: -2rem;
+    z-index: 2;
+
+    &::before, &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: -2rem;
+      bottom: -2rem;
+      right: -2rem;
+      z-index: -1;
+      pointer-events: none;
+    }
+
+    &::before {
+      background: var(--background);
+      mask-image: linear-gradient(black 70%, transparent);
+      opacity: 0.55;
+
+      @supports not (backdrop-filter: blur(15px)) {
+        opacity: 1;
+      }
+    }
+
+    &::after {
+      backdrop-filter: blur(15px);
+      mask-image: linear-gradient(black 50%, transparent);
+    }
+  }
+
+  h1, h2 {
     margin: 0;
     font-size: 1.6rem;
   }
diff --git a/war/src/main/less/modules/side-panel-tasks.less b/war/src/main/less/modules/side-panel-tasks.less
index eb6b605024b0..78076a9f0e51 100644
--- a/war/src/main/less/modules/side-panel-tasks.less
+++ b/war/src/main/less/modules/side-panel-tasks.less
@@ -18,6 +18,22 @@
   margin-top: 0.4rem;
 }
 
+#tasks hr {
+  position: relative;
+  width: 100%;
+  border: none;
+  height: 2px;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0 0 0 -0.8rem;
+    background: currentColor;
+    border-radius: 2px;
+    opacity: 0.1;
+  }
+}
+
 #tasks .task {
   margin: 0 0 0 -0.8rem;
 }
@@ -57,6 +73,32 @@
     }
   }
 
+  .task-icon-badge {
+    position: relative;
+    color: currentColor;
+    letter-spacing: 0;
+    z-index: 0;
+    margin-left: auto;
+    min-width: 24px;
+    text-align: center;
+    padding: 0 8px;
+    line-height: 0.75rem;
+    font-size: 0.75rem;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: -6px 0;
+      background: var(--item-background--hover);
+      border-radius: 100px;
+      z-index: -1;
+    }
+  }
+
+  .task-link-text {
+    display: contents;
+  }
+
   .task-link-text {
     display: contents;
   }
diff --git a/war/src/main/less/pages/plugin-manager.less b/war/src/main/less/pages/plugin-manager.less
index a02dd6952e6c..aa421ef026ea 100644
--- a/war/src/main/less/pages/plugin-manager.less
+++ b/war/src/main/less/pages/plugin-manager.less
@@ -106,3 +106,13 @@
     border-radius: 0.25em;
   }
 }
+
+.app-plugin-manager__sidebar {
+  position: sticky;
+  top: calc(40px + 1.6rem);
+
+  h1 {
+    margin-top: 1rem !important;
+    margin-bottom: 0.1rem !important;
+  }
+}
diff --git a/war/src/main/less/styles.less b/war/src/main/less/styles.less
index 4da518b48dbb..a8848cde8c37 100644
--- a/war/src/main/less/styles.less
+++ b/war/src/main/less/styles.less
@@ -12,7 +12,7 @@
 @import "./form/layout";
 @import "./form/radio";
 @import "./form/reorderable-list";
-@import "./form/search";
+@import "./form/search-bar";
 @import "./form/select";
 @import "./form/toggle-switch";
 @import "./form/validation";
diff --git a/war/src/main/resources/images/symbols/search-shortcut.svg b/war/src/main/resources/images/symbols/search-shortcut.svg
new file mode 100644
index 000000000000..46e64a2e1338
--- /dev/null
+++ b/war/src/main/resources/images/symbols/search-shortcut.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="450px" height="450px" viewBox="0 0 450 450" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="292" y1="65" x2="158.851995" y2="384.354989" stroke="currentColor" stroke-width="42"></line>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/war/src/main/resources/images/symbols/shopping-bag.svg b/war/src/main/resources/images/symbols/shopping-bag.svg
new file mode 100644
index 000000000000..320e20258a5e
--- /dev/null
+++ b/war/src/main/resources/images/symbols/shopping-bag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M80 176a16 16 0 00-16 16v216c0 30.24 25.76 56 56 56h272c30.24 0 56-24.51 56-54.75V192a16 16 0 00-16-16zM160 176v-32a96 96 0 0196-96h0a96 96 0 0196 96v32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M160 224v16a96 96 0 0096 96h0a96 96 0 0096-96v-16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
\ No newline at end of file