diff --git a/src/common/components/suggestion-list/_index.scss b/src/common/components/suggestion-list/_index.scss
index 53f19db67b4..f145cf56ed2 100644
--- a/src/common/components/suggestion-list/_index.scss
+++ b/src/common/components/suggestion-list/_index.scss
@@ -102,4 +102,70 @@
       }
     }
   }
+
+  .modal-suggestion-list {
+    display: block;
+    left: 0;
+    top: 100%;
+    width: 100%;
+    box-shadow: $box-shadow;
+    z-index: 100;
+    border-radius: $border-radius;
+    min-width: 200px;
+
+    @include themify(day) {
+      background: $white;
+    }
+
+    @include themify(night) {
+      background: lighten($dark-six, 5);
+    }
+
+    .list-header {
+      padding: 8px 20px;
+      font-weight: 500;
+      background: $dark-sky-blue;
+      color: $white;
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+
+    .list-body {
+      max-height: 200px;
+      overflow-x: auto;
+
+      .list-item {
+        padding: 8px 20px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+
+        &:last-child {
+          border-bottom-left-radius: $border-radius;
+          border-bottom-right-radius: $border-radius;
+        }
+
+        @include themify(day) {
+          color: $warm-grey;
+
+          &:hover,
+          &:focus {
+            background: lighten($dark-sky-blue, 10);
+            color: $white;
+          }
+        }
+
+        @include themify(night) {
+          color: $silver;
+
+          &:hover,
+          &:focus {
+            background: $metallic-blue;
+            color: $white;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/src/common/components/suggestion-list/index.tsx b/src/common/components/suggestion-list/index.tsx
index 6511f157c9d..13f3e417a96 100644
--- a/src/common/components/suggestion-list/index.tsx
+++ b/src/common/components/suggestion-list/index.tsx
@@ -207,7 +207,7 @@ export default class SuggestionList extends Component<Props> {
           <ClickAwayListener onClickAway={() => this.setState({ showList: false })}>
             {showList && modeItems && modeItems?.length > 0 ? modeItemsUI : <></>}
             {showList && !modeItems && items.length > 0 ? (
-              <div className="suggestion-list">
+              <div className="modal-suggestion-list">
                 {header && <div className="list-header">{header}</div>}
                 <div className="list-body">
                   {items.map((x, i) => {