diff --git a/app/components/record-item.js b/app/components/record-item.js
deleted file mode 100644
index 76ea9a6bb4..0000000000
--- a/app/components/record-item.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { htmlSafe } from '@ember/string';
-import { isEmpty } from '@ember/utils';
-const COLOR_MAP = {
-  red: '#ff2717',
-  blue: '#174fff',
-  green: '#009900'
-};
-
-export default Component.extend({
-  /**
-   * No tag. This component should not affect
-   * the DOM.
-   *
-   * @property tagName
-   * @type {String}
-   * @default ''
-   */
-  tagName: '',
-
-  modelTypeColumns: null,
-
-  // TODO: Color record based on `color` property.
-  style: computed('model.color', function() {
-    let string = '';
-    let colorName = this.get('model.color');
-    if (!isEmpty(colorName)) {
-      let color = COLOR_MAP[colorName];
-      if (color) {
-        string = `color: ${color};`;
-      }
-    }
-    return htmlSafe(string);
-  }),
-
-  columns: computed('modelTypeColumns.[]', 'model.columnValues', function() {
-    let columns = this.get('modelTypeColumns') || [];
-    return columns.map(col => ({ name: col.name, value: this.get(`model.columnValues.${col.name}`) }));
-  })
-});
diff --git a/app/styles/ember-table.scss b/app/styles/ember-table.scss
index 249f456e67..b646d6480b 100644
--- a/app/styles/ember-table.scss
+++ b/app/styles/ember-table.scss
@@ -43,10 +43,22 @@
     border-right: 1px solid var(--base03);
   }
 
+  .blue {
+    color: #174fff
+  }
+
+  .green {
+    color: #009900;
+  }
+
+  .red {
+    color: #ff2717;
+  }
+
   th.is-sortable:hover {
     background: #e9f4fc
   }
-  
+
 
   .et-sort-indicator:before {
     display: inline-block;
@@ -66,7 +78,7 @@
   }
 
   &.is-resizing * {
-    cursor: col-resize!important;
+    cursor: col-resize !important;
     user-select: none
   }
 
@@ -81,7 +93,7 @@
     border-right: none;
     opacity: .8;
     z-index: 10;
-    
+
     th {
       background: #e9f4fc
     }
@@ -98,7 +110,7 @@
   }
 
   &.is-reordering * {
-    cursor: grabbing!important;
+    cursor: grabbing !important;
     user-select: none
   }
 
diff --git a/app/templates/components/record-item.hbs b/app/templates/components/record-item.hbs
deleted file mode 100644
index 2c23620acf..0000000000
--- a/app/templates/components/record-item.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-{{#each columns as |column|}}
-  {{#list.cell class="js-record-column" clickable=true style=style}}
-    {{column.value}}
-  {{/list.cell}}
-{{/each}}
diff --git a/app/templates/records.hbs b/app/templates/records.hbs
index a7152948bf..ef50b7f694 100644
--- a/app/templates/records.hbs
+++ b/app/templates/records.hbs
@@ -6,7 +6,11 @@
   {{/t.head}}
   {{#t.body rows=filtered checkboxSelectionMode="none" selection=selection onSelect=(action "inspectModel") as |b|}}
     {{#b.row class=(if (mod b.rowMeta.index 2) "striped") data-test-table-row="" as |r|}}
-      {{r.cell data-test-table-cell=""}}
+      {{#r.cell data-test-table-cell="" as |value column row|}}
+        <span class="{{row.color}}">
+          {{value}}
+        </span>
+      {{/r.cell}}
     {{/b.row}}
   {{/t.body}}
 {{/ember-table}}