diff --git a/js/redactor-plugins.js b/js/redactor-plugins.js
index 16da1f7e3fa98e37d23d700004fb8e85048eb16d..929a9feafb209605657553253f9f679a65c23ed0 100644
--- a/js/redactor-plugins.js
+++ b/js/redactor-plugins.js
@@ -1611,6 +1611,7 @@ RedactorPlugins.contexttypeahead = function() {
   return {
     typeahead: false,
     context: false,
+    variables: false,
 
     init: function() {
       if (!this.$element.data('rootContext'))
@@ -1642,7 +1643,8 @@ RedactorPlugins.contexttypeahead = function() {
           position    = clientRects[0],
           cursorAt    = range.endOffset,
           backTextLen = match[1].length - content.length + cursorAt,
-          backText    = match[1].substring(0, backTextLen);
+          backText    = match[1].substring(0, backTextLen),
+          that        = this.contexttypeahead;
 
       if (backTextLen < 0)
           return this.contexttypeahead.destroy();
@@ -1655,15 +1657,25 @@ RedactorPlugins.contexttypeahead = function() {
       if (!this.contexttypeahead.typeahead) {
         this.contexttypeahead.typeahead = $('<input type="text">')
           .css({position: 'absolute', visibility: 'hidden'})
-          .width(0).height(position.height)
+          .width(0).height(position.height - 4)
           .appendTo(document.body)
           .typeahead({
             property: 'variable',
             minLength: 0,
+            arrow: $('<span class="pull-right"><i class="icon-muted icon-chevron-right"></i></span>')
+                .css('padding', '0 0 0 6px'),
             highlighter: function(variable, item) {
-              var base = $.fn.typeahead.Constructor.prototype.highlighter.call(this, variable);
+              var base = $.fn.typeahead.Constructor.prototype.highlighter
+                    .call(this, variable),
+                  further = new RegExp(variable + '\\.'),
+                  extendable = Object.keys(that.variables).some(function(v) {
+                    return v.match(further);
+                  }),
+                  arrow = extendable ? this.options.arrow.clone() : '';
+
               return base + $('<span class="faded"/>')
                 .text(' — ' + item.desc)
+                .append(arrow)
                 .wrap('<div>').parent().html();
             },
             source: this.contexttypeahead.getContext.bind(this),
@@ -1697,7 +1709,7 @@ RedactorPlugins.contexttypeahead = function() {
     },
 
     getContext: function(typeahead, query) {
-      var dfd,
+      var dfd, that=this.contexttypeahead,
           root = this.$element.data('rootContext');
       if (!this.contexttypeahead.context) {
         dfd = $.Deferred();
@@ -1707,6 +1719,7 @@ RedactorPlugins.contexttypeahead = function() {
             var items = $.map(json, function(v,k) {
               return {variable: k, desc: v};
             });
+            that.variables = json;
             dfd.resolve(items);
           }
         });
diff --git a/scp/css/typeahead.css b/scp/css/typeahead.css
index 80f67886d7ba4f3ef32f8366198efe04cb901410..03f5091d9a218baa337c0707c9f765120981d949 100644
--- a/scp/css/typeahead.css
+++ b/scp/css/typeahead.css
@@ -7,7 +7,7 @@
   float: left;
   display: none;
   min-width: 160px;
-  padding: 4px 0;
+  padding: 4px 0 2px;
   margin: 0;
   list-style: none;
   background-color: #ffffff;
@@ -20,12 +20,13 @@
   border-radius: 0 0 5px 5px;
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.5);
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
   *border-right-width: 2px;
   *border-bottom-width: 2px;
+  opacity: 0.95;
 }
 .dropdown-menu.pull-right {
   right: 0;
@@ -42,7 +43,7 @@
 }
 .dropdown-menu a {
   display: block;
-  padding: 3px 15px;
+  padding: 4px 15px;
   clear: both;
   font-weight: normal;
   line-height: 18px;