diff --git a/ncp-web/css/ncp.css b/ncp-web/css/ncp.css
index 3c0a075a..5f8c524b 100644
--- a/ncp-web/css/ncp.css
+++ b/ncp-web/css/ncp.css
@@ -1113,7 +1113,7 @@ select {
   flex: 0 0 auto;
 }
 
-#expand {
+.expand {
   position: relative;
   display: flex;
   align-items: center;
@@ -1121,15 +1121,19 @@ select {
   cursor: pointer;
 }
 
-#expand * {
+.expand * {
   cursor: pointer;
 }
 
-#expand:hover img,#expand:focus img,#expand:active img,#expand:hover #expandDisplayName,#expand:focus #expandDisplayName,#expand:active #expandDisplayName {
+.expand:hover img,.expand:focus img,.expand:active img,.expand:hover .expandDisplayName,.expand:focus .expandDisplayName,.expand:active .expandDisplayName {
  -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
  opacity:1
 }
 
+.search-div {
+  padding-right: 0px;
+}
+
 .icon-power-white {
   background-image: url('../img/poweroff.svg');
 }
@@ -1139,6 +1143,9 @@ select {
 .icon-nc-info {
   background-image: url('../img/info-white.svg');
 }
+.icon-search {
+  background-image: url('../img/search.svg');
+}
 .icon-config {
   background-image: url('../img/settings-white.svg');
 }
@@ -1170,7 +1177,7 @@ select {
   right: 1em;
 }
 
-#expand #expandDisplayName {
+.expand .expandDisplayName {
   padding: 8px;
   opacity: 0.6;
 }
diff --git a/ncp-web/elements.php b/ncp-web/elements.php
index f06c62b2..5800dedb 100644
--- a/ncp-web/elements.php
+++ b/ncp-web/elements.php
@@ -128,6 +128,7 @@ function print_config_forms( $l /* translations l10n object */ )
         $hidden = '';
       $ret .= <<<HTML
         <div id="$cfg[id]-config-box" class="$hidden">
+          <br/>
           <h2 class="text-title">$cfg[description]</h2>
           <div class="config-box-info-txt">$cfg[info]</div>
           <a href="https://github.com/nextcloud/nextcloudpi/wiki/Configuration-Reference#$ncp_app" target="_blank">
@@ -160,7 +161,7 @@ function print_sidebar( $l /* translations l10n object */, $ticks /* wether to c
   $sections = array_diff(scandir($bin_dir), array('.', '..', 'l10n'));
   foreach ($sections as $section)
   {
-    $ret .= "<li id=\"$section\" class=\"nav-recent\"><span>{$l->__($section, $section)}</span>";
+    $ret .= "<li id=\"$section\"><span>{$l->__($section, $section)}</span>";
 
     $scripts = array_diff(scandir($bin_dir . $section), array('.', '..', 'nc-wifi.sh', 'nc-info.sh'));
     foreach ($scripts as $script)
@@ -180,7 +181,7 @@ function print_sidebar( $l /* translations l10n object */, $ticks /* wether to c
       $selected = "";
       if (array_key_exists('app',$_GET) && $_GET['app'] == $ncp_app)
         $selected = "active";
-      $ret .= "<ul id=\"$ncp_app\" class=\"nav-recent $selected\">";
+      $ret .= "<ul id=\"$ncp_app\" class=\"ncp-app-list-item $selected\">";
       $ret .=   "<a href=\"?app=$ncp_app\"> {$l->__($ncp_app, $ncp_app)}$active </a>";
       $ret .= "</ul>";
     }
diff --git a/ncp-web/img/search.svg b/ncp-web/img/search.svg
new file mode 100644
index 00000000..0e69805c
--- /dev/null
+++ b/ncp-web/img/search.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   viewBox="0 0 16 16"
+   height="16"
+   width="16"
+   id="svg8"
+   sodipodi:docname="search.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="722"
+     inkscape:window-height="480"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="8"
+     inkscape:cy="7.5254237"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg8" />
+  <g
+     stroke="#000"
+     stroke-width="2"
+     fill="none"
+     id="g6"
+     style="stroke:#fffff2;stroke-opacity:1">
+    <ellipse
+       rx="4"
+       ry="4"
+       cy="6"
+       cx="6"
+       id="ellipse2"
+       style="stroke:#fffff2;stroke-opacity:1" />
+    <path
+       d="m14.3 14.25-5.65-5.65"
+       id="path4"
+       style="stroke:#fffff2;stroke-opacity:1" />
+  </g>
+</svg>
diff --git a/ncp-web/index.php b/ncp-web/index.php
index 7e9e5604..451a161b 100644
--- a/ncp-web/index.php
+++ b/ncp-web/index.php
@@ -142,39 +142,46 @@ HTML;
     ?>
     </div>
     <div id="header-right">
+      <div id="search-btn" title="<?php echo $l->__("Search"); ?>">
+          <div class="expand search-div">
+              <div class="icon-search"></div>
+              &nbsp; &nbsp;
+              <input type="text" id="search-box" placeholder="find ncp-app" size="40">
+          </div>
+      </div>
       <a href="https://ownyourbits.com" id="nextcloud-btn" target="_blank" tabindex="1" title="<?php echo $l->__("Launch Nextcloud"); ?>">
         <div id="nc-button">
-            <div id="expand">
+            <div class="expand">
                 <div class="icon-nc-white"></div>
             </div>
         </div>
       </a>
       <div id="dashboard-btn" title="<?php echo $l->__("View System Info"); ?>">
-          <div id="expand">
+          <div class="expand">
               <div class="icon-dashboard"></div>
           </div>
       </div>
       <div id="config-btn" title="<?php echo $l->__("Nextcloud Configuration"); ?>">
-          <div id="expand">
+          <div class="expand">
               <div class="icon-config"></div>
           </div>
       </div>
       <a href="wizard" title="<?php echo $l->__("NextCloudPi Wizard"); ?>">
         <div class="wizard-btn">
-          <div id="expand">
+          <div class="expand">
             <div class="icon-wizard-white"></div>
           </div>
         </div>
       </a>
       <a href="https://github.com/nextcloud/nextcloudpi/wiki" target="_blank" tabindex="1"  title="<?php echo $l->__("NextCloudPi Wiki"); ?>">
         <div id="nc-button">
-            <div id="expand">
+            <div class="expand">
                 <div class="icon-nc-info"></div>
             </div>
         </div>
       </a>
       <div id="poweroff" title="<?php echo $l->__("Power Off"); ?>">
-          <div id="expand">
+          <div class="expand">
               <div class="icon-power-white"></div>
           </div>
       </div>
diff --git a/ncp-web/js/ncp.js b/ncp-web/js/ncp.js
index 84a6b2a3..e857caf3 100644
--- a/ncp-web/js/ncp.js
+++ b/ncp-web/js/ncp.js
@@ -138,6 +138,9 @@ function reload_sidebar()
         if ( ret.ret && ret.ret == '0' ) {
           $('#ncp-options').ht( ret.output );
           set_sidebar_click_handlers();
+
+          var ncp_app_list = $('.ncp-app-list-item');
+          filter_apps();
         }
       }).error( errorMsg );
 }
@@ -429,11 +432,29 @@ $(function()
           if ( ret.ret && ret.ret == '0' )                        // means that the process was launched
             window.location.reload( true );
           else
-            this.set( '.value', langold );
+            this.set('.value', langold);
         }
     ).error( errorMsg )
   } );
 
+  // search box
+ function filter_apps(e)
+  {
+    ncp_app_list.hide();
+    ncp_app_list.each( function(app){
+        if (app.id.indexOf(search_box.value) !== -1)
+          app.style.display = 'block';
+      }
+    );
+  }
+
+  var search_box = $$('#search-box');
+  var ncp_app_list = $('.ncp-app-list-item');
+  $('#search-box').on('|keyup', filter_apps );
+  search_box.value = '';
+  search_box.focus();
+  $('.icon-search').on('click', function(e) { search_box.focus(); });
+
   // load dashboard info
   print_dashboard();
 } );
