diff --git a/README.md b/README.md
index 4eecdd9fc..2f8736817 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 [![npm version](https://img.shields.io/npm/v/admin-lte/latest.svg)](https://www.npmjs.com/package/admin-lte)
 [![Packagist](https://img.shields.io/packagist/v/almasaeed2010/adminlte.svg)](https://packagist.org/packages/almasaeed2010/adminlte)
-[![CDNJS](https://img.shields.io/cdnjs/v/admin-lte.svg)](https://cdnjs.com/libraries/admin-lte)
+[![cdn version](https://data.jsdelivr.com/v1/package/npm/admin-lte/badge)](https://www.jsdelivr.com/package/npm/admin-lte)
 [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
 
 **AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 4.5](https://getbootstrap.com/)** framework and also the JS/jQuery plugin.
@@ -26,10 +26,22 @@ There are multiple ways to install AdminLTE.
 
 ### Download & Changelog:
 
-Download from GitHub latest release [AdminLTE 3](https://github.com/ColorlibHQ/AdminLTE/releases/latest).
-Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog.
+Always Recommended to download from GitHub latest release [AdminLTE 3](https://github.com/ColorlibHQ/AdminLTE/releases/latest) for bug free and latest features.\
+Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog.\
 Legacy Releases are [AdminLTE 2](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18) / [AdminLTE 1](https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1).
 
+### Grab from [jsdelivr](https://github.com/ColorlibHQ/AdminLTE/releases/latest) CDN :
+
+_**Important Note**: You needed to add separately cdn links for plugins in your project._
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.1/dist/js/adminlte.min.js"></script>
+```
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.1/dist/css/adminlte.min.css">
+```
+
 ### Using The Command Line:
 
 _**Important Note**: To install it via npm/Yarn, you need at least Node.js 10 or higher._
@@ -37,19 +49,19 @@ _**Important Note**: To install it via npm/Yarn, you need at least Node.js 10 or
 - **Via npm**
 
     ```bash
-    npm install admin-lte@^3.0 --save
+    npm install admin-lte@^3.1 --save
     ```
 
 - **Via Yarn**
 
     ```bash
-    yarn add admin-lte@^3.0
+    yarn add admin-lte@^3.1
     ```
 
 - **Via Composer**
 
     ```bash
-    composer require "almasaeed2010/adminlte=~3.0"
+    composer require "almasaeed2010/adminlte=~3.1"
     ```
 
 - **Via Git**
diff --git a/docs/_includes/preloader.html b/docs/_includes/preloader.html
new file mode 100644
index 000000000..de27f5161
--- /dev/null
+++ b/docs/_includes/preloader.html
@@ -0,0 +1,3 @@
+<div class="preloader flex-column justify-content-center align-items-center">
+  <img class="animation__shake" src="{{ '/assets/img/AdminLTELogo.png' | prepend: site.baseurl }}" alt="AdminLTELogo" height="60" width="60">
+</div>
diff --git a/docs/_includes/sidebar.html b/docs/_includes/sidebar.html
index 99d609ebe..d6cf1c3eb 100644
--- a/docs/_includes/sidebar.html
+++ b/docs/_includes/sidebar.html
@@ -4,6 +4,16 @@
     <img src="{{ '/assets/img/logo-xl.png' | prepend: site.baseurl }}" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
   </a>
   <div class="sidebar">
+    <div class="form-inline">
+      <div class="input-group" data-widget="sidebar-search">
+        <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
+        <div class="input-group-append">
+          <button class="btn btn-sidebar">
+            <i class="fas fa-search fa-fw"></i>
+          </button>
+        </div>
+      </div>
+    </div>
     <nav class="mt-2">
       <ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
        {% for item in site.navigation -%}
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 84c27dc73..347476889 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -6,6 +6,8 @@
   <body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
     <div class="wrapper">
 
+      {%- include preloader.html -%}
+
       {%- include navbar.html -%}
       {%- include sidebar.html -%}
 
diff --git a/docs/index.md b/docs/index.md
index 23e0cd186..fc71a03ac 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -5,32 +5,43 @@ title: Introduction
 
 AdminLTE can be installed using multiple methods. Pick your favorite method from the list below. Please be sure to check the dependencies section before continuing. 
 
-## Download
-{: .h3 }
 
-### From GitHub
+### Download from GitHub
 
 Visit the releases section on GitHub and download the [latest release](https://github.com/ColorlibHQ/AdminLTE/releases).
 
 
+### Grab from [jsdelivr](https://github.com/ColorlibHQ/AdminLTE/releases/latest) CDN :
+
+_**Important Note**: You needed to add separately cdn links for plugins in your project._
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.1/dist/js/adminlte.min.js"></script>
+```
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.1/dist/css/adminlte.min.css">
+```
+
+
 ### Command Line
 
 #### Via NPM
 
 ```bash
-npm install admin-lte@^3.0 --save
+npm install admin-lte@^3.1 --save
 ```
 
 #### Via Yarn
 
 ```bash
-yarn add admin-lte@^3.0
+yarn add admin-lte@^3.1
 ```
 
 #### Via Composer
 
 ```bash
-composer require "almasaeed2010/adminlte=~3.0"
+composer require "almasaeed2010/adminlte=~3.1"
 ```
 
 #### Via Git
@@ -38,7 +49,3 @@ composer require "almasaeed2010/adminlte=~3.0"
 ```bash
 git clone https://github.com/ColorlibHQ/AdminLTE.git
 ```
-
-### From CDN
-
-[https://www.jsdelivr.com/package/npm/admin-lte](https://www.jsdelivr.com/package/npm/admin-lte)
\ No newline at end of file