diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index b778e05c7b173ca43220229bf1ee8a39b225a30f..9e7006bb6e7535a2a2825933dd4cd7cb5df4f311 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -959,7 +959,7 @@ GfmAutoComplete.Emoji = {
       return `<li>${escapedFieldValue}</li>`;
     }
 
-    return `<li>${escapedFieldValue} ${GfmAutoComplete.glEmojiTag(item.emoji.name)}</li>`;
+    return `<li>${GfmAutoComplete.glEmojiTag(item.emoji.name)} ${escapedFieldValue}</li>`;
   },
   filter(query) {
     if (query.length === 0) {
diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss
index 1b98fd4df079c5af01388a51880b7377adb52eee..1b5da0368c608663a60a18637061161c904ecc3c 100644
--- a/app/assets/stylesheets/page_bundles/issuable.scss
+++ b/app/assets/stylesheets/page_bundles/issuable.scss
@@ -149,6 +149,10 @@
 
   .gl-search-box-by-type button.gl-clear-icon-button:hover {
     @include gl-bg-transparent;
+
+    &:focus {
+      @include gl-focus($inset: true);
+    }
   }
 
   .issuable-move-button:not(.disabled):hover {
diff --git a/app/assets/stylesheets/vendors/atwho.scss b/app/assets/stylesheets/vendors/atwho.scss
index b3b03e3841f487a40b79a4edbc9de492501d910a..cf7dc79c5f5d8838f524d0e21809cfb819efaa7d 100644
--- a/app/assets/stylesheets/vendors/atwho.scss
+++ b/app/assets/stylesheets/vendors/atwho.scss
@@ -6,6 +6,7 @@
   @include gl-border-b-solid;
   @include gl-border-b-gray-100;
   @include gl-rounded-lg;
+  @include gl-shadow-md;
 
   .name,
   small.aliases,
@@ -49,10 +50,12 @@
   // TODO: fallback to global style
   .atwho-view-ul {
     @include gl-p-2;
+    max-height: $gl-max-dropdown-max-height;
 
     li {
       @include gl-px-3;
-      @include gl-py-2;
+      padding-top: $gl-padding-6;
+      padding-bottom: $gl-padding-6;
       border: 0;
       @include gl-rounded-base;
 
@@ -73,15 +76,25 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
+      }
 
-        .center {
-          line-height: 14px;
-        }
+      .center {
+        line-height: 14px;
       }
 
       strong {
         color: $gl-text-color;
       }
+
+      gl-emoji {
+        @include gl-mr-2;
+      }
+
+      .dropdown-label-box {
+        position: relative;
+        top: -1px;
+        @include gl-mr-2;
+      }
     }
   }
 }
diff --git a/spec/frontend/gfm_auto_complete_spec.js b/spec/frontend/gfm_auto_complete_spec.js
index 73284fbe5e5f3fd11bf9177a116703f2b2ae88d7..2d19c9871b6aa8ed1830faa3283348cd85f63492 100644
--- a/spec/frontend/gfm_auto_complete_spec.js
+++ b/spec/frontend/gfm_auto_complete_spec.js
@@ -866,7 +866,7 @@ describe('GfmAutoComplete', () => {
       it('should return a correct template', () => {
         const actual = GfmAutoComplete.Emoji.templateFunction(mockItem);
         const glEmojiTag = `<gl-emoji data-name="${mockItem.emoji.name}"></gl-emoji>`;
-        const expected = `<li>${mockItem.fieldValue} ${glEmojiTag}</li>`;
+        const expected = `<li>${glEmojiTag} ${mockItem.fieldValue}</li>`;
 
         expect(actual).toBe(expected);
       });