diff --git a/.gitignore b/.gitignore
index 10d5e10..3366ef4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,5 @@ _site
 /.project
 *.iml
 *.ipr
-*.iws
\ No newline at end of file
+*.iws
+/.jekyll-cache
\ No newline at end of file
diff --git a/_data/plugins.yml b/_data/plugins.yml
new file mode 100644
index 0000000..7bd7853
--- /dev/null
+++ b/_data/plugins.yml
@@ -0,0 +1,281 @@
+- name: Notification
+
+  id: notification
+
+  plugins:
+
+    - name: Announce plugin
+      description: Send announcements via email to groups of users, e.g. for maintenance.
+      url: https://github.com/gitbucket-plugins/gitbucket-announce-plugin
+      icon: fa fa-bullhorn
+      distributed: false
+
+    - name: Desktop Notification plugin
+      description: Notify GitBucket activity directly on the desktop.
+      url: https://github.com/yoshiyoshifujii/gitbucket-desktopnotify-plugin
+      icon: fa fa-bell
+      distributed: false
+
+    - name: Email Notifications plugin
+      description: GitBucket plugin to send Email notifications.
+      url: https://github.com/gitbucket/gitbucket-notifications-plugin
+      icon: fa fa-envelope
+      distributed: true
+
+- name: Analysis
+
+  id: analysis
+
+  plugins:
+
+    - name: Commits Graph plugin
+      description: Add commit graph views to GitBucket.
+      url: https://github.com/yoshiyoshifujii/gitbucket-commitgraphs-plugin
+      icon: fa fa-line-chart
+      distributed: false
+
+    - name: Bugspots plugin
+      description: Add Google bugspots functionality to GitBucket.
+      url: https://github.com/yoshiyoshifujii/gitbucket-bugspots-plugin
+      icon: fa fa-bug
+      distributed: false
+
+    - name: Network plugin
+      description: Network graph for GitBucket.
+      url: https://github.com/mrkm4ntr/gitbucket-network-plugin
+      icon: fa fa-code-fork
+      distributed: false
+
+    - name: FESS plugin
+      description: Fast enterprise search for GitBucket using a FESS server.
+      url: https://github.com/codelibs/gitbucket-fess-plugin
+      icon: fa fa-search
+      distributed: false
+
+- name: Maintenance
+
+  id: maintenance
+
+  plugins:
+
+    - name: Monitoring plugin
+      description: Monitors and displays statistics about the running GitBucket instance.
+      url: https://github.com/YoshinoriN/gitbucket-monitoring-plugin
+      icon: fa fa-server
+      distributed: false
+
+    - name: H2 Backup plugin
+      description: Backup functionality of the H2 Database used by GitBucket.
+      url: https://github.com/gitbucket-plugins/gitbucket-h2-backup-plugin
+      icon: fa fa-database
+      distributed: false
+
+    - name: H2Console plugin
+      description: A GitBucket plugin that adds H2 console to the administration console.
+      url: https://github.com/takezoe/gitbucket-h2console-plugin
+      icon: fa fa-table
+      distributed: false
+
+    - name: Backup plugin
+      description: Plugin providing backup functionality for GitBucket.
+      url: https://github.com/jyuch/gitbucket-backup-plugin
+      icon: fa fa-floppy-o
+      distributed: false
+
+    - name: Logs Viewer plugin
+      description: A plugin allowing to view and control GitBucket logs.
+      url: https://github.com/YoshinoriN/gitbucket-application-logs-plugin
+      icon: fa fa-file-text-o
+      distributed: false
+
+- name: CI/CD
+
+  id: cicd
+
+  plugins:
+
+    - name: CI plugin
+      description: GitBucket plug-in that adds simple CI ability to GitBucket.
+      url: https://github.com/takezoe/gitbucket-ci-plugin
+      icon: fa fa-cog
+      distributed: false
+
+    - name: Git Hooks plugin
+      description: A GitBucket plugin that enables a limited set of ~/.git/hooks.
+      url: https://github.com/marshalhayes/gitbucket-githooks-plugin
+      icon: fa fa-cog
+      distributed: false
+
+- name: Utilities
+
+  id: util
+
+  plugins:
+
+    - name: Gist plugin
+      description: Add code snippet Gist-like functionality to GitBucket.
+      url: https://github.com/gitbucket/gitbucket-gist-plugin
+      icon: fa fa-file-code-o
+      distributed: true
+      
+    - name: Pages plugin
+      description: Project Pages for GitBucket.
+      url: https://github.com/yaroot/gitbucket-pages-plugin
+      icon: fa fa-book
+      distributed: true
+
+    - name: Maven Repository plugin
+      description: GitBucket plugin that provides Maven repository hosting on GitBucket.
+      url: https://github.com/takezoe/gitbucket-maven-repository-plugin
+      icon: fa fa-cubes
+      distributed: false
+
+    - name: Mirror plugin
+      description: This plugin adds repository mirroring to GitBucket.
+      url: https://github.com/alexandremenif/gitbucket-mirror-plugin
+      icon: fa fa-copy
+      distributed: false
+
+    - name: Embedded snippets plugin
+      description: Show link to code as snippet. 
+      url: https://github.com/onukura/gitbucket-embedding-plugin
+      icon: fa fa-list-alt
+      distributed: false
+
+- name: UI
+
+  id: ui
+
+  plugins:
+
+    - name: Emoji plugin
+      description: Emoji support for GitBucket.
+      url: https://github.com/gitbucket/gitbucket-emoji-plugin
+      icon: fa fa-smile-o
+      distributed: true
+
+    - name: Explorer plugin
+      description: Explorer like navigation side panel for your projects.
+      url: https://github.com/gitbucket-plugins/gitbucket-explorer-plugin
+      icon: fa fa-list-alt
+      distributed: false
+
+    - name: Code Highlighter plugin
+      description: Enhanced code syntax highlighting and additional themes for GitBucket.
+      url: https://github.com/kaz-on/gitbucket-code-highlighter-plugin
+      icon: fa fa-code
+      distributed: false
+
+    - name: Popovers plugin
+      description: Show popover preview on links to issues and pull requests.
+      url: https://github.com/kaz-on/gitbucket-popovers-plugin
+      icon: fa fa-comment
+      distributed: false
+
+- name: Project Management
+
+  id: proj
+
+  plugins:
+
+    - name: Kanban Board plugin
+      description: A plugin for Kanban style issue management in GitBucket.
+      url: https://github.com/kasancode/gitbucket-label-kanban-plugin
+      icon: fa fa-check
+      distributed: false
+
+    - name: Gantt Chart plugin
+      description: A plugin for rendering a Gantt Chart view of the GitBucket issues.
+      url: https://github.com/kasancode/gitbucket-gantt-plugin
+      icon: fa fa-sliders
+      distributed: false
+
+- name: File Viewer
+
+  id: fileviewer
+  
+  plugins:
+  
+    - name: AsciiDoc plugin
+      description: Add AsciiDoc rendering capabilities to GitBucket.
+      url: https://github.com/lefou/gitbucket-asciidoctor-plugin
+      icon: fa fa-file-text
+      distributed: false
+
+    - name: RST plugin
+      description: ReSTructured text renderer for GitBucket.
+      url: https://github.com/amuramatsu/gitbucket-rst-plugin
+      icon: fa fa-file-text
+      distributed: false
+
+    - name: PlantUML plugin
+      description: Render PlantUML files in GitBucket.
+      url: https://github.com/nus/gitbucket-plantuml-plugin
+      icon: fa fa-object-group
+      distributed: false
+
+    - name: HTML5 Media plugin
+      description: Renders HTML5 Media (Audio/Video/PDF) inline in GitBucket.
+      url: https://github.com/kounoike/gitbucket-html5media-plugin
+      icon: fa fa-html5
+      distributed: false
+
+    - name: Jupyter plugin
+      description: GitBucket plugin for rendering Jupyter or IPython files.
+      url: https://github.com/kounoike/gitbucket-ipynb-plugin
+      icon: fa fa-ravelry
+      distributed: false
+
+    - name: Swagger plugin
+      description: A plugin for rendering a Swagger (OpenAPI) files.
+      url: https://github.com/onukura/gitbucket-swagger-plugin
+      icon: fa fa-ellipsis-h
+      distributed: false
+
+    - name: R Markdown plugin
+      description: A plugin for rendering a R Markdown files.
+      url: https://github.com/onukura/gitbucket-rmarkdown-plugin
+      icon: fa fa-registered
+      distributed: false
+
+    - name: MathJax plugin
+      description: A plugin for rendering a markdown files with MathJax.
+      url: https://github.com/onukura/gitbucket-mathjax-plugin
+      icon: fa fa-superscript
+      distributed: false
+
+    - name: 3D file plugin
+      description: A plugin for rendering 3D files.
+      url: https://github.com/onukura/gitbucket-3dfile-plugin
+      icon: fa fa-cube
+      distributed: false
+
+    - name: GeoJSON plugin
+      description: A plugin for rendering GeoJSON files.
+      url: https://github.com/onukura/gitbucket-geojson-plugin
+      icon: fa fa-map-marker
+      distributed: false
+
+    - name: CsvTsv plugin
+      description: A plugin for rendering csv and tsv files.
+      url: https://github.com/onukura/gitbucket-csvtsv-plugin
+      icon: fa fa-table
+      distributed: false
+
+    - name: SMILES plugin
+      description: A plugin for rendering chemical language SMILES.
+      url: https://github.com/onukura/gitbucket-smiles-plugin
+      icon: fa fa-smile-o
+      distributed: false
+
+    - name: Draw.io plugin
+      description: A plugin for rendering Draw.io files.
+      url: https://github.com/onukura/gitbucket-drawio-plugin
+      icon: fa fa-paint-brush
+      distributed: false
+
+    - name: Markdown Enhanced plugin
+      description: Enhance Markdown support of GitBucket
+      url: https://github.com/yasumichi/gitbucket-markdown-enhanced
+      icon: fa fa-file-text
+      distributed: false
diff --git a/_includes/header.html b/_includes/header.html
index 8301d2d..c971754 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,4 +1,4 @@
-<header class="site-header">
+<header class="site-header" id="navbar">
 
   <div class="wrapper">
       <a class="site-title" href="{{ site.baseurl }}/"><img class="logo" src="images/gitbucket-plugins.png"></img>{{ site.title }}</a>
@@ -12,16 +12,16 @@
         </svg>
       </a>
 
-      <div class="trigger">
-<!--          
-        {% for page in site.pages %}
-          {% if page.title %}
-          <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
-          {% endif %}
-        {% endfor %}
--->
+      <div class="dropdown">
+        <label for="category-selector" class="category-dropdown-label">Category:</label>
+        <select class="category-dropdown" name="category-selector" onChange="location.href=value;">
+          {% for category in site.data.plugins %}
+          <option value="#{{ category.id }}">{{ category.name }}</option>
+          {% endfor %}
+        </select>
       </div>
-</nav>
+
+    </nav>
 
   </div>
 
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 897f6be..0c74aee 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -5,9 +5,11 @@
     border-top: 5px solid $grey-color-dark;
     border-bottom: 1px solid $grey-color-light;
     min-height: 56px;
+    background-color: white;
 
     // Positioning context for the mobile navigation icon
-    position: relative;
+    position: sticky;
+    top: 0;
     
     .logo {
         width: 60px;
@@ -221,7 +223,29 @@
     font-size: 24px;
 }
 
+.category-title {
+    font-size: 26px;
+    color: gray;
+    margin-top: -30px;
+    padding-top: 70px;
+}
+
+.category-dropdown {
+    width: 60%;
+    height: 40px;
+    border-color: rgb(235, 230, 230);
+    font-size: 15px;
+}
+
+@media screen and (max-width: 600px) {
+    .dropdown {
+        display: none;
+    }
+  }
 
+html {
+    scroll-behavior: smooth;
+}
 
 /**
  * Posts
diff --git a/index.html b/index.html
index 6ac49de..ad54c22 100644
--- a/index.html
+++ b/index.html
@@ -4,164 +4,35 @@
 
 <div class="home">
 
-  <h1 class="page-heading">This is the community site for all the <a href="https://github.com/gitbucket/gitbucket">GitBucket</a> plugins.</h1>
-
+  <h1 class="page-heading">This is the community site for all the public <a href="https://github.com/gitbucket/gitbucket">GitBucket</a> plugins.</h1>
   <h1 class="page-heading">Available Plugins:</h1>
   <p class="separator"/>
   <ul class="plugin-list">
-      <li>
-        <h2>
-            <a class="post-link" href="https://github.com/gitbucket-plugins/gitbucket-announce-plugin"><span class="fa fa-bullhorn"></span>Announce plugin</a>
-        </h2>
-          <p>Send announcements via email to groups of users, e.g. for maintenance.</p>
-      </li>
-      <li>
-        <h2>
-          <a class="post-link" href="https://github.com/gitbucket-plugins/gitbucket-h2-backup-plugin"><span class="fa fa-database"></span>H2 Backup plugin</a>
-        </h2>
-          <p>Backup functionality of the H2 Database used by GitBucket.</p>
-      </li>
-      <li>
-        <h2>
-          <a class="post-link" href="https://github.com/yoshiyoshifujii/gitbucket-desktopnotify-plugin"><span class="fa fa-bell"></span>Desktop Notification plugin</a>
-        </h2>
-          <p>Notify GitBucket activity directly on the desktop.</p>
-      </li>
-      <li>
-        <h2>
-          <a class="post-link distributed"
-             title="Distriburted with the GitBucket WAR as of v4.15! No need to install it separately!"
-             href="https://github.com/gitbucket/gitbucket-gist-plugin"><span class="fa fa-file-code-o"></span>Gist plugin</a>
-        </h2>
-          <p>Add code snippet Gist-like functionality to GitBucket.</p>
-      </li>
-      <li>
-        <h2>
-          <a class="post-link" href="https://github.com/yoshiyoshifujii/gitbucket-commitgraphs-plugin"><span class="fa fa-line-chart"></span>Commits Graph plugin</a>
-        </h2>
-          <p>Add commit graph views to GitBucket.</p>
-      </li>
-      <li>
-        <h2>
-          <a class="post-link" href="https://github.com/lefou/gitbucket-asciidoctor-plugin"><span class="fa fa-file-text"></span>AsciiDoc plugin</a>
-        </h2>
-          <p>Add AsciiDoc rendering capabilities to GitBucket.</p>
-      </li>
-      <li>
-        <h2>
-          <a class="post-link" href="https://github.com/yoshiyoshifujii/gitbucket-bugspots-plugin"><span class="fa fa-bug"></span>Bugspots plugin</a>
-        </h2>
-          <p>Add Google bugspots functionality to GitBucket.</p>
-      </li>
-      <li>
-        <h2>
-          <a class="post-link distributed"
-             title="Distriburted with the GitBucket WAR as of v4.15! No need to install it separately!"
-             href="https://github.com/yaroot/gitbucket-pages-plugin"><span class="fa fa-book"></span>Pages plugin</a>
-        </h2>
-          <p>Project Pages for GitBucket.</p>
-      </li>
-      <li>
-        <h2>
-          <a class="post-link" href="https://github.com/mrkm4ntr/gitbucket-network-plugin"><span class="fa fa-code-fork"></span>Network plugin</a>
-        </h2>
-          <p>Network graph for GitBucket.</p>
-      </li>
-      <li>
-        <h2>
-          <a class="post-link distributed"
-             title="Distriburted with the GitBucket WAR as of v4.15! No need to install it separately!"
-             href="https://github.com/gitbucket/gitbucket-emoji-plugin"><span class="fa fa-smile-o"></span>Emoji plugin</a>
-        </h2>
-          <p>Emoji support for GitBucket.</p>
-      </li>
-      <li>
-        <h2>
-          <a class="post-link" href="https://github.com/amuramatsu/gitbucket-rst-plugin"><span class="fa fa-file-text"></span>RST plugin</a>
-        </h2>
-          <p>ReSTructured text renderer for GitBucket</p>
-      </li>
-      <li>
-        <h2>
-          <a class="post-link" href="https://github.com/gitbucket-plugins/gitbucket-explorer-plugin"><span class="fa fa-list-alt"></span>Explorer plugin</a>
-        </h2>
-          <p>Explorer like navigation side panel for your projects.</p>
-      </li>
-      <li>
-        <h2>
-          <a class="post-link" href="https://github.com/codelibs/gitbucket-fess-plugin/"><span class="fa fa-search"></span>FESS plugin</a>
-        </h2>
-          <p>Fast enterprise search for GitBucket using a FESS server.</p>
-      </li>
-      <li>
-        <h2>
-          <a class="post-link" href="https://github.com/nus/gitbucket-plantuml-plugin"><span class="fa fa-object-group"></span>PlantUML plugin</a>
-        </h2>
-          <p>Render PlantUML files in GitBucket.</p>
-      </li>
-      <li>
-          <h2>
-              <a class="post-link" href="https://github.com/YoshinoriN/gitbucket-monitoring-plugin"><span class="fa fa-server"></span>Monitoring plugin</a>
-          </h2>
-          <p>Monitors and displays statistics about the running GitBucket instance.</p>
-      </li>
-      <li>
-          <h2>
-              <a class="post-link" href="https://github.com/kounoike/gitbucket-html5media-plugin"><span class="fa fa-html5"></span>HTML5 Media plugin</a>
-          </h2>
-          <p>Renders HTML5 Media (Audio/Video/PDF) inline in GitBucket.</p>
-      </li>
-      <li>
-          <h2>
-              <a class="post-link" href="https://github.com/kounoike/gitbucket-ipynb-plugin"><span class="fa fa-ravelry"></span>Jupyter plugin</a>
-          </h2>
-          <p>GitBucket plugin for rendering Jupyter or IPython files.</p>
-      </li>
-      <li>
-          <h2>
-              <a class="post-link distributed"
-                 title="Distriburted with the GitBucket WAR as of v4.15! No need to install it separately!"
-                 href="https://github.com/gitbucket/gitbucket-notifications-plugin"><span class="fa fa-envelope"></span>Email Notifications plugin</a>
-          </h2>
-          <p>GitBucket plugin to send Email notifications.</p>
-      </li>
-      <li>
-          <h2>
-              <a class="post-link" href="https://github.com/takezoe/gitbucket-ci-plugin"><span class="fa fa-cog"></span>CI plugin</a>
-          </h2>
-          <p>GitBucket plug-in that adds simple CI ability to GitBucket.</p>
-      </li>
-      <li>
-          <h2>
-              <a class="post-link" href="https://github.com/takezoe/gitbucket-maven-repository-plugin"><span class="fa fa-cubes"></span>Maven Repository plugin</a>
-          </h2>
-          <p>GitBucket plugin that provides Maven repository hosting on GitBucket.</p>
-      </li>
-      <li>
-          <h2>
-              <a class="post-link" href="https://github.com/alexandremenif/gitbucket-mirror-plugin"><span class="fa fa-copy"></span>Mirror Plugin</a>
-          </h2>
-          <p>This plugin adds repository mirroring to GitBucket.</p>
-      </li>
-      <li>
+      {% for category in site.data.plugins %}
+        <h2 id="{{ category.id }}" class="category-title">{{ category.name }}</h2>
+        {% for plugin in category.plugins %}
+        <li>
           <h2>
-              <a class="post-link" href="https://github.com/takezoe/gitbucket-h2console-plugin"><span class="fa fa-table"></span>H2Console Plugin</a>
+              <a class="post-link{% if plugin.distributed %} distributed{% endif %}" href="{{ plugin.url }}"><span class="{{ plugin.icon }}"></span>{{ plugin.name }}</a>
           </h2>
-          <p>A GitBucket plugin that adds H2 console to the administration console.</p>
-      </li>
-      <li>
-        <h2>
-            <a class="post-link" href="https://github.com/jyuch/gitbucket-backup-plugin"><span class="fa fa-floppy-o"></span>Backup plugin</a>
-        </h2>
-        <p>Plugin providing backup functionnality for GitBucket</p>
-    </li>
-    <li>
-      <h2>
-          <a class="post-link" href="https://github.com/YoshinoriN/gitbucket-application-logs-plugin"><span class="fa fa-file-text"></span>Logs viewer Plugin</a>
-      </h2>
-      <p>A plugin allowing to view and control GitBucket logs</p>
-  </li>
+            <p>{{ plugin.description }}</p>
+        </li>
+        {% endfor %}
+      {% endfor %}
 </ul>
     <p class="separator"/>
     <p>Your plugin is not listed here? You want to move your plugin under the organization? Please open a <a href="https://github.com/gitbucket-plugins/gitbucket-plugins.github.io/issues">ticket/issue</a> to reference your demand.</p>
 </div>
+
+<script>
+  window.onscroll = function() {myFunction()};
+  var navbar = document.getElementById("navbar");
+  var sticky = navbar.offsetTop;
+  function myFunction() {
+    if (window.pageYOffset >= sticky) {
+      navbar.classList.add("sticky")
+    } else {
+      navbar.classList.remove("sticky");
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index fead59d..c312d34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -70,8 +70,8 @@
           "resolved": "http://registry.npmjs.org/js-yaml/-/js-yaml-3.6.1.tgz",
           "integrity": "sha1-bl/mfYsgXOTSL60Ft3geja3MSzA=",
           "requires": {
-            "argparse": "1.0.9",
-            "esprima": "2.7.3"
+            "argparse": "^1.0.7",
+            "esprima": "^2.6.0"
           },
           "dependencies": {
             "argparse": {
@@ -79,7 +79,7 @@
               "resolved": "http://registry.npmjs.org/argparse/-/argparse-1.0.9.tgz",
               "integrity": "sha1-c9g7wmP4bpf4zE9rrhsOkKfSLIY=",
               "requires": {
-                "sprintf-js": "1.0.3"
+                "sprintf-js": "~1.0.2"
               },
               "dependencies": {
                 "sprintf-js": {
