diff --git a/hyperglass/render/templates/base.html.j2 b/hyperglass/render/templates/base.html.j2
index c5b729e..2742edf 100644
--- a/hyperglass/render/templates/base.html.j2
+++ b/hyperglass/render/templates/base.html.j2
@@ -23,6 +23,7 @@
 
 <body class="d-flex flex-column h-100">
 {% include "templates/ratelimit-query.html.j2" %}
+{% include "templates/info.html.j2" %}
 <div class="container-fluid d-flex w-100 h-100 p-3 mx-auto flex-column">
 
   <main role="main" class="flex-shrink-0">
diff --git a/hyperglass/render/templates/index.html.j2 b/hyperglass/render/templates/index.html.j2
index 12a6185..4df5d65 100644
--- a/hyperglass/render/templates/index.html.j2
+++ b/hyperglass/render/templates/index.html.j2
@@ -55,7 +55,7 @@
           <div class="input-group input-group-lg">
             <input class="form-control" type="text" placeholder="{{ branding.text.query_placeholder }}"
               aria-label="{{ branding.text.query_placeholder }}" aria-describedby="query_target" id="query_target">
-            <div class="input-group-append">
+            <div class="input-group-append" id="hg-target-append">
               <button class="btn btn-primary" id="hg-submit-button" type="submit">
                 <div id="hg-submit-icon">
                   <i class="remixicon-search-line"></i>
diff --git a/hyperglass/render/templates/info.html.j2 b/hyperglass/render/templates/info.html.j2
new file mode 100644
index 0000000..f0d948f
--- /dev/null
+++ b/hyperglass/render/templates/info.html.j2
@@ -0,0 +1,30 @@
+<div class="modal fade" id="hg-info-bgp_aspath" tabindex="-1" role="dialog" aria-labelledby="hg-info-title-bgp_aspath" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="hg-info-title-bgp_aspath">{{ details.bgp_aspath.title | safe }}</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        {{ details.bgp_aspath.content | safe }}
+      </div>
+    </div>
+  </div>
+</div>
+<div class="modal fade" id="hg-info-bgp_community" tabindex="-1" role="dialog" aria-labelledby="hg-info-title-bgp_community" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="hg-info-title-bgp_community">{{ details.bgp_community.title | safe }}</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        {{ details.bgp_community.content | safe }}
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/hyperglass/static/hyperglass.es6 b/hyperglass/static/hyperglass.es6
index 55d633f..542dafd 100644
--- a/hyperglass/static/hyperglass.es6
+++ b/hyperglass/static/hyperglass.es6
@@ -10,6 +10,7 @@ const ClipboardJS = require('clipboard');
 const queryLocation = $('#location');
 const queryType = $('#query_type');
 const queryTarget = $('#query_target');
+const queryTargetAppend = $('#hg-target-append');
 const resultsContainer = $('#hg-results');
 const formContainer = $('#hg-form');
 const resultsAccordion = $('#hg-accordion');
@@ -96,6 +97,21 @@ $(document).ready(() => {
   formContainer.animsition('in');
 });
 
+const supportedBtn = qt => `<button class="btn btn-dark hg-info-btn" id="hg-info-btn-${qt}" data-hg-type="${qt}" type="button"><div id="hg-info-icon-${qt}"><i class="remixicon-information-line"></i></div></button>`;
+
+queryType.on('changed.bs.select', () => {
+  const queryTypeId = queryType.val();
+  if ((queryTypeId === 'bgp_community') || (queryTypeId === 'bgp_aspath')) {
+    $('.hg-info-btn').remove();
+    queryTargetAppend.prepend(supportedBtn(queryTypeId));
+  }
+});
+
+queryTargetAppend.on('click', '.hg-info-btn', () => {
+  const queryTypeId = $('.hg-info-btn').data('hg-type');
+  $(`#hg-info-${queryTypeId}`).modal('show');
+});
+
 const queryApp = (queryType, queryTypeName, locationList, queryTarget) => {
   const resultsTitle = `${queryTypeName} Query for ${queryTarget}`;
 
