diff --git a/build/scss/_main-sidebar.scss b/build/scss/_main-sidebar.scss
index 3205c5e3625bf2ec9599ad8332ab504aa3c91121..9453fe7c11e2b3851d835fcf51b2625a572450bc 100644
--- a/build/scss/_main-sidebar.scss
+++ b/build/scss/_main-sidebar.scss
@@ -505,3 +505,48 @@
     }
   }
 }
+
+// Sidebar Form Control
+[class*='sidebar-dark'] {
+  .form-control-sidebar,
+  .btn-sidebar {
+    background: lighten($sidebar-dark-bg, 5%);
+    border: 1px solid lighten($sidebar-dark-bg, 15%);
+    color: lighten(color-yiq(lighten($sidebar-dark-bg, 5%)), 15%);
+  }
+
+  .form-control-sidebar:focus,
+  .btn-sidebar:focus {
+    border: 1px solid lighten($sidebar-dark-bg, 30%);
+  }
+
+  .btn-sidebar:hover {
+    background: lighten($sidebar-dark-bg, 7.5%);
+  }
+
+  .btn-sidebar:focus {
+    background: lighten($sidebar-dark-bg, 10%);
+  }
+}
+
+[class*='sidebar-light'] {
+  .form-control-sidebar,
+  .btn-sidebar {
+    background: darken($sidebar-light-bg, 5%);
+    border: 1px solid darken($sidebar-light-bg, 15%);
+    color: color-yiq(darken($sidebar-light-bg, 5%));
+  }
+
+  .form-control-sidebar:focus,
+  .btn-sidebar:focus {
+    border: 1px solid darken($sidebar-light-bg, 30%);
+  }
+
+  .btn-sidebar:hover {
+    background: darken($sidebar-light-bg, 7.5%);
+  }
+
+  .btn-sidebar:focus {
+    background: darken($sidebar-light-bg, 10%);
+  }
+}
diff --git a/docs/components/main-sidebar.md b/docs/components/main-sidebar.md
index 9bc43642569850992c496896c6a9b091ea5af5bc..c59a6ffc8e391407e65e520069fd455e494439e6 100644
--- a/docs/components/main-sidebar.md
+++ b/docs/components/main-sidebar.md
@@ -74,6 +74,35 @@ The sidebar used in this page to the left provides an example of what your sideb
 {: .max-height-300}
 
 
+#### Alternate Logo
+You can use two logo images instead of logo with text, you only need to change the markup to this:
+```html
+<a href="#" class="brand-link logo-switch">
+  <img src="dist/img/logo-xs.png" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs">
+  <img src="dist/img/logo-xl.png" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
+</a>
+```
+> Example from v3.0 docs.
+
+Based on the example above, you can replace `.brand-image-xl` on `.logo-xs` with `.brand-image-xs` or vice versa on `.logo-xl` for changed logo sizes.
+
+
+#### Search Form in Sidebar
+You can add this code above user-panel or nav-sidebar:
+```html
+<form class="form-inline">
+  <div class="input-group">
+    <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
+    <div class="input-group-append">
+      <button class="btn btn-sidebar" type="submit">
+        <i class="fas fa-search"></i>
+      </button>
+    </div>
+  </div>
+</form>
+```
+{: .max-height-300}
+
 #### Additional Classes
 
 ##### Sidebar
@@ -82,10 +111,11 @@ The sidebar used in this page to the left provides an example of what your sideb
 ##### Navbar
 - `.nav-child-indent` Child indent
 - `.nav-compact` Compact nav items
+- `.nav-flat` Flat nav style
 
 
 > ##### Tip!
-> You can also use `.text-sm` on `.nav-sidebar` for smaller font.
+> You can also use `.text-sm` on `.nav-sidebar` or `.brand-link` for smaller font.
 {: .quote-info}
 
 For more infromation about the JS part of the sidebar, please visit the [PushMenu plugin page]({% link javascript/push-menu.md %})