diff --git a/src/app/features/item/select-item/select-item.component.html b/src/app/features/item/select-item/select-item.component.html
index 1f962e81155..926e5724d46 100644
--- a/src/app/features/item/select-item/select-item.component.html
+++ b/src/app/features/item/select-item/select-item.component.html
@@ -62,7 +62,13 @@
           {{ row.entry }}
         </ng-template>
       </ngx-datatable-column>
-      <ngx-datatable-column name="Name" prop="name" [minWidth]="60"></ngx-datatable-column>
+      <ngx-datatable-column name="Name" prop="name" [minWidth]="60">
+        <ng-template let-row="row" ngx-datatable-cell-template>
+          <div class="item-select">
+            <b [ngClass]="'q' + row.Quality">{{ row.name }}</b>
+          </div>
+        </ng-template>
+      </ngx-datatable-column>
       <ngx-datatable-column name="DisplayID" prop="displayid"></ngx-datatable-column>
       <ngx-datatable-column name="Class" prop="class"></ngx-datatable-column>
       <ngx-datatable-column name="Subclass" prop="subclass"></ngx-datatable-column>
diff --git a/src/assets/img/money/copper.gif b/src/assets/img/money/copper.gif
new file mode 100644
index 00000000000..3a29d45e61f
Binary files /dev/null and b/src/assets/img/money/copper.gif differ
diff --git a/src/assets/img/money/gold.gif b/src/assets/img/money/gold.gif
new file mode 100644
index 00000000000..17750f63504
Binary files /dev/null and b/src/assets/img/money/gold.gif differ
diff --git a/src/assets/img/money/silver.gif b/src/assets/img/money/silver.gif
new file mode 100644
index 00000000000..ee79a14f5cd
Binary files /dev/null and b/src/assets/img/money/silver.gif differ
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 1cc406f7fd3..1686c2f64e1 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -16,3 +16,41 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import './sidebar.scss';
 @import './utils.scss';
 @import './editor.scss';
+
+.item-preview {
+  .item-stock, .item-name {
+    line-height: 30px;
+    font-size: 22px;
+  }
+
+  .q  { color: #ffd100!important; }
+  .q0 { color: #9d9d9d!important; }
+  .q1 { color: #ffffff!important; }
+  .q2 { color: #1eff00!important; }
+  .q3 { color: #0070dd!important; }
+  .q4 { color: #a335ee!important; }
+  .q5 { color: #ff8000!important; }
+  .q6 { color: #e5cc80!important; }
+  .q7 { color: #e5cc80!important; }
+
+ .moneyitem, .moneygold, .moneysilver, .moneycopper, .moneyalliance, .moneyhorde, .moneyarena, .moneyachievement, .moneysocketmeta, .moneysocketred, .moneysocketyellow, .moneysocketblue, .moneysocketprismatic {
+    background: no-repeat right center;
+    color: white;
+  }
+
+  .moneygold   { padding-right: 15px; background-image: url(../img/money/gold.gif);   }
+  .moneysilver { padding-right: 15px; background-image: url(../img/money/silver.gif); }
+  .moneycopper { padding-right: 15px; background-image: url(../img/money/copper.gif); }
+}
+
+.item-select {
+  .q  { color: #ffd100!important; }
+  .q0 { color: #757575!important; }
+  /* .q1 { color:#ffffff!important; } */
+  .q2 { color: #4CAF50!important; }
+  .q3 { color: #0070dd!important; }
+  .q4 { color: #a335ee!important; }
+  .q5 { color: #ffc107!important; }
+  .q6 { color: #ffab00!important; }
+  .q7 { color: #ff8a65!important; }
+}