diff --git a/public/_includes/_hero.jade b/public/_includes/_hero.jade
index e02b60265a..6e301a0b71 100644
--- a/public/_includes/_hero.jade
+++ b/public/_includes/_hero.jade
@@ -4,6 +4,12 @@
 - var capitalize = function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); }
 - var useBadges = docType || stability;
 
+// renamer :: String -> String
+// Renames `Let` and `Var` into `Const`
+- var renamer = function renamer(docType) {
+-   return (docType === 'Let' || docType === 'Var') ? 'Const' : docType
+- }
+
 if current.path[4] && current.path[3] == 'api'
   - var textFormat = 'is-standard-case'
 
@@ -14,7 +20,7 @@ header(class="hero background-sky")
     span(class="badges")
       if docType
         span(class="status-badge").
-          #{capitalize(docType)}
+          #{renamer(capitalize(docType))}
       if stability
         span(layout="row" class="status-badge")
           // badge circle is filled based on stability by matching a css selector in _hero.scss
diff --git a/public/resources/css/module/_api.scss b/public/resources/css/module/_api.scss
index 380ee52894..a62562df3c 100644
--- a/public/resources/css/module/_api.scss
+++ b/public/resources/css/module/_api.scss
@@ -20,14 +20,16 @@
     content: 'F';
     background: #0f9d58;
   }
-  &.const:before,
   &.enum:before {
-    content: 'N';
+    content: 'E';
     background: #757575;
   }
+
+  // NOTE: (ericjim): `var`, `let`, and `const` are considered Const
   &.var:before,
-  &.let:before {
-    content: 'V';
+  &.let:before,
+  &.const:before {
+    content: 'K'; // Use K for const, since C is already used for Class
     background: #9575cd;
   }
   &:before {
diff --git a/public/resources/js/directives/api-list.js b/public/resources/js/directives/api-list.js
index 339ebb6ee6..98d41ef366 100644
--- a/public/resources/js/directives/api-list.js
+++ b/public/resources/js/directives/api-list.js
@@ -32,8 +32,8 @@ angularIO.directive('apiList', function () {
         { cssClass: 'class', title: 'Class', matches: ['class'] },
         { cssClass: 'interface', title: 'Interface', matches: ['interface'] },
         { cssClass: 'function', title: 'Function', matches: ['function'] },
-        { cssClass: 'const', title: 'Const or Enum', matches: ['const', 'enum'] },
-        { cssClass: 'var', title: 'Variable', matches: ['var', 'let'] }
+        { cssClass: 'enum', title: 'Enum', matches: ['enum'] },
+        { cssClass: 'const', title: 'Const', matches: ['var', 'let', 'const'] }
       ];
 
       $ctrl.apiFilter = getApiFilterFromLocation();