diff --git a/public/images/aluminum.png b/public/images/aluminum.png
new file mode 100644
index 0000000..90cae02
Binary files /dev/null and b/public/images/aluminum.png differ
diff --git a/public/images/bone.png b/public/images/bone.png
new file mode 100644
index 0000000..70c8880
Binary files /dev/null and b/public/images/bone.png differ
diff --git a/public/images/cereal.png b/public/images/cereal.png
new file mode 100644
index 0000000..e7740d4
Binary files /dev/null and b/public/images/cereal.png differ
diff --git a/public/images/copper.png b/public/images/copper.png
new file mode 100644
index 0000000..643fa33
Binary files /dev/null and b/public/images/copper.png differ
diff --git a/public/images/creature_food.png b/public/images/creature_food.png
new file mode 100644
index 0000000..95f3985
Binary files /dev/null and b/public/images/creature_food.png differ
diff --git a/public/images/creature_resources.png b/public/images/creature_resources.png
new file mode 100644
index 0000000..9bd7172
Binary files /dev/null and b/public/images/creature_resources.png differ
diff --git a/public/images/creature_structural.png b/public/images/creature_structural.png
new file mode 100644
index 0000000..7cd5a99
Binary files /dev/null and b/public/images/creature_structural.png differ
diff --git a/public/images/default.png b/public/images/default.png
new file mode 100644
index 0000000..0858c19
Binary files /dev/null and b/public/images/default.png differ
diff --git a/public/images/energy.png b/public/images/energy.png
new file mode 100644
index 0000000..0277bb9
Binary files /dev/null and b/public/images/energy.png differ
diff --git a/public/images/flora_resources.png b/public/images/flora_resources.png
new file mode 100644
index 0000000..7ce3261
Binary files /dev/null and b/public/images/flora_resources.png differ
diff --git a/public/images/flora_structural.png b/public/images/flora_structural.png
new file mode 100644
index 0000000..a38833a
Binary files /dev/null and b/public/images/flora_structural.png differ
diff --git a/public/images/fuel_petrochem_liquid.png b/public/images/fuel_petrochem_liquid.png
new file mode 100644
index 0000000..d71b2cf
Binary files /dev/null and b/public/images/fuel_petrochem_liquid.png differ
diff --git a/public/images/fuel_petrochem_solid.png b/public/images/fuel_petrochem_solid.png
new file mode 100644
index 0000000..d552ae5
Binary files /dev/null and b/public/images/fuel_petrochem_solid.png differ
diff --git a/public/images/gas.png b/public/images/gas.png
new file mode 100644
index 0000000..30a3540
Binary files /dev/null and b/public/images/gas.png differ
diff --git a/public/images/gas_inert.png b/public/images/gas_inert.png
new file mode 100644
index 0000000..f2c5cb0
Binary files /dev/null and b/public/images/gas_inert.png differ
diff --git a/public/images/gas_reactive.png b/public/images/gas_reactive.png
new file mode 100644
index 0000000..ccc0a5c
Binary files /dev/null and b/public/images/gas_reactive.png differ
diff --git a/public/images/gemstone.png b/public/images/gemstone.png
new file mode 100644
index 0000000..88a0393
Binary files /dev/null and b/public/images/gemstone.png differ
diff --git a/public/images/hide.png b/public/images/hide.png
new file mode 100644
index 0000000..8004b39
Binary files /dev/null and b/public/images/hide.png differ
diff --git a/public/images/inorganic.png b/public/images/inorganic.png
new file mode 100644
index 0000000..511ddd1
Binary files /dev/null and b/public/images/inorganic.png differ
diff --git a/public/images/iron.png b/public/images/iron.png
new file mode 100644
index 0000000..36f6f50
Binary files /dev/null and b/public/images/iron.png differ
diff --git a/public/images/liquid_vapors.png b/public/images/liquid_vapors.png
new file mode 100644
index 0000000..a05641e
Binary files /dev/null and b/public/images/liquid_vapors.png differ
diff --git a/public/images/meat.png b/public/images/meat.png
new file mode 100644
index 0000000..9600310
Binary files /dev/null and b/public/images/meat.png differ
diff --git a/public/images/metal.png b/public/images/metal.png
new file mode 100644
index 0000000..0c155a4
Binary files /dev/null and b/public/images/metal.png differ
diff --git a/public/images/metal_ferrous.png b/public/images/metal_ferrous.png
new file mode 100644
index 0000000..c84d9b0
Binary files /dev/null and b/public/images/metal_ferrous.png differ
diff --git a/public/images/metal_nonferrous.png b/public/images/metal_nonferrous.png
new file mode 100644
index 0000000..44b3875
Binary files /dev/null and b/public/images/metal_nonferrous.png differ
diff --git a/public/images/milk.png b/public/images/milk.png
new file mode 100644
index 0000000..fa8fd86
Binary files /dev/null and b/public/images/milk.png differ
diff --git a/public/images/mineral.png b/public/images/mineral.png
new file mode 100644
index 0000000..1304ea5
Binary files /dev/null and b/public/images/mineral.png differ
diff --git a/public/images/ore.png b/public/images/ore.png
new file mode 100644
index 0000000..7dee9a9
Binary files /dev/null and b/public/images/ore.png differ
diff --git a/public/images/ore_carbonate.png b/public/images/ore_carbonate.png
new file mode 100644
index 0000000..d3c4fa3
Binary files /dev/null and b/public/images/ore_carbonate.png differ
diff --git a/public/images/ore_igneous.png b/public/images/ore_igneous.png
new file mode 100644
index 0000000..bc99c72
Binary files /dev/null and b/public/images/ore_igneous.png differ
diff --git a/public/images/ore_sedimentary.png b/public/images/ore_sedimentary.png
new file mode 100644
index 0000000..229d237
Binary files /dev/null and b/public/images/ore_sedimentary.png differ
diff --git a/public/images/ore_siliclastic.png b/public/images/ore_siliclastic.png
new file mode 100644
index 0000000..0e647b8
Binary files /dev/null and b/public/images/ore_siliclastic.png differ
diff --git a/public/images/organic.png b/public/images/organic.png
new file mode 100644
index 0000000..30e2b8d
Binary files /dev/null and b/public/images/organic.png differ
diff --git a/public/images/petrochem_inert.png b/public/images/petrochem_inert.png
new file mode 100644
index 0000000..7246b60
Binary files /dev/null and b/public/images/petrochem_inert.png differ
diff --git a/public/images/radioactive.png b/public/images/radioactive.png
new file mode 100644
index 0000000..604230b
Binary files /dev/null and b/public/images/radioactive.png differ
diff --git a/public/images/seeds.png b/public/images/seeds.png
new file mode 100644
index 0000000..23c7429
Binary files /dev/null and b/public/images/seeds.png differ
diff --git a/public/images/steel.png b/public/images/steel.png
new file mode 100644
index 0000000..05ac1df
Binary files /dev/null and b/public/images/steel.png differ
diff --git a/public/images/underground_liquid.png b/public/images/underground_liquid.png
new file mode 100644
index 0000000..05308c5
Binary files /dev/null and b/public/images/underground_liquid.png differ
diff --git a/public/images/water.png b/public/images/water.png
new file mode 100644
index 0000000..5881924
Binary files /dev/null and b/public/images/water.png differ
diff --git a/src/views/resource/ResourceList.vue b/src/views/resource/ResourceList.vue
index 8a4bf16..01e1c01 100644
--- a/src/views/resource/ResourceList.vue
+++ b/src/views/resource/ResourceList.vue
@@ -12,20 +12,53 @@
         table-filter
         column-filter
       >
+        <template #resourceClass="{ item }">
+          <td>
+            <CRow>
+              <CCol>
+                <CImg
+                  :src="
+                    './images/' +
+                    translateImageName(item.resourceClass) +
+                    '.png'
+                  "
+                />
+              </CCol>
+            </CRow>
+            <CRow>
+              <CCol> ({{ item.resourceClass }}) </CCol>
+            </CRow>
+          </td>
+        </template>
         <template #attributes="{ item }">
           <td>
-            <CRow
-              v-for="attr in getAttributeArray(item)"
-              :key="attr.name + attr.value"
-            >
-              <CCol>
-                <CInput
-                  style="margin-bottom: 0px"
-                  :label="attr.name"
-                  :value="attr.value"
-                  :horizontal="{ label: 'col-sm-6', input: 'col-sm-6' }"
-                  plaintext
-                />
+            <CRow>
+              <CCol
+                v-for="(attr, index) in baseAttributes"
+                :key="attr.fullName + '_' + index"
+                style="max-width: 45px; padding-left: 3px"
+              >
+                <CBadge
+                  :color="
+                    hasAttributeValue(attr.fullName, item)
+                      ? 'success'
+                      : 'secondary'
+                  "
+                  >{{ attr.shortName }}</CBadge
+                >
+              </CCol>
+            </CRow>
+            <CRow>
+              <CCol
+                v-for="(attr, index) in baseAttributes"
+                :key="attr.fullName + '_' + index"
+                style="max-width: 45px; padding-left: 3px"
+              >
+                <div style="font-size: 11px">
+                  <strong>
+                    {{ getAttributeValue(attr.fullName, item) }}
+                  </strong>
+                </div>
               </CCol>
             </CRow>
           </td>
@@ -44,14 +77,14 @@
 import { mapGetters } from 'vuex';
 
 const RESOURCE_FIELDS = [
-  {
-    label: 'Resource Name',
-    key: 'resourceName',
-  },
   {
     label: 'Resource Class',
     key: 'resourceClass',
   },
+  {
+    label: 'Resource Name',
+    key: 'resourceName',
+  },
   {
     label: 'Attributes',
     key: 'attributes',
@@ -66,6 +99,53 @@ const RESOURCE_FIELDS = [
   },
 ];
 
+const BASE_ATTRIBUTES = [
+  {
+    fullName: 'res_conductivity',
+    shortName: 'CD',
+  },
+  {
+    fullName: 'res_decay_resist',
+    shortName: 'DR',
+  },
+  {
+    fullName: 'res_quality',
+    shortName: 'OQ',
+  },
+  {
+    fullName: 'res_shock_resistance',
+    shortName: 'SR',
+  },
+  {
+    fullName: 'res_potential_energy',
+    shortName: 'PE',
+  },
+  {
+    fullName: 'res_malleability',
+    shortName: 'MA',
+  },
+  {
+    fullName: 'res_toughness',
+    shortName: 'UT',
+  },
+  {
+    fullName: 'res_cold_resist',
+    shortName: 'CR',
+  },
+  {
+    fullName: 'res_heat_resist',
+    shortName: 'HR',
+  },
+  {
+    fullName: 'res_flavor',
+    shortName: 'FL',
+  },
+  {
+    fullName: 'entagle_resistance',
+    shortName: 'ER',
+  },
+];
+
 export default {
   name: 'ResourceList',
   computed: {
@@ -76,8 +156,20 @@ export default {
     resourceFields() {
       return RESOURCE_FIELDS;
     },
+    baseAttributes() {
+      return BASE_ATTRIBUTES;
+    },
   },
   methods: {
+    hasAttributeValue(attr, item) {
+      let attrs = this.getAttributeArray(item);
+      return attrs.find((a) => a.rawName === attr);
+    },
+    getAttributeValue(attr, item) {
+      let attrs = this.getAttributeArray(item);
+      let obj = this.getAttributeArray(item).find((a) => a.rawName === attr);
+      return obj ? obj.value : null;
+    },
     titleCase(val) {
       if (!val) return;
       return val.charAt(0).toUpperCase() + val.substr(1);
@@ -90,10 +182,97 @@ export default {
         let val = v.split(' ');
         return {
           name: this.attrName(val[0]),
+          rawName: val[0],
           value: val[1],
         };
       });
     },
+    translateImageName(c) {
+      let names = c.split('_');
+      switch (names[0]) {
+        case 'aluminum':
+        case 'bone':
+        case 'copper':
+        case 'energy':
+        case 'gemstone':
+        case 'hide':
+        case 'inorganic':
+        case 'iron':
+        case 'meat':
+        case 'milk':
+        case 'mineral':
+        case 'radioactive':
+        case 'steel':
+        case 'water':
+          return names[0];
+
+        case 'gas':
+          switch (names[1]) {
+            case 'inert':
+              return 'gas_inert';
+            case 'reactive':
+              return 'gas_reactive';
+            default:
+              return 'gas';
+          }
+
+        case 'metal':
+          switch (names[1]) {
+            case 'ferrous':
+              return 'metal_ferrous';
+            case 'nonferrous':
+              return 'metal_nonferrous';
+            default:
+              return 'metal';
+          }
+        case 'ore':
+          switch (names[1]) {
+            case 'carbonate':
+              return 'ore_carbonate';
+            case 'igneous':
+              return 'ore_igneous';
+            case 'sedimentary':
+              return 'ore_sedimentary';
+            case 'siliclastic':
+              return 'ore_siliclastic';
+            default:
+              return 'ore';
+          }
+        case 'petrochem':
+          switch (names[1]) {
+            case 'fuel':
+              switch (names[2]) {
+                case 'liquid':
+                  return 'fuel_petrochem_liquid';
+                default:
+                  return 'fuel_petrochem_solid';
+              }
+            default:
+              return 'petrochem_inert';
+          }
+        case 'fiberplast':
+          return 'inorganic';
+        case 'armophous':
+        case 'crystalline':
+          return 'gemstone';
+        case 'corn':
+        case 'oats':
+        case 'rice':
+        case 'wheat':
+          return 'cereal';
+        case 'seafood':
+          return 'creature_resources';
+        case 'softwood':
+          return 'flora_resources';
+        case 'fruit':
+        case 'vegetable':
+          return 'organic';
+        case 'wood':
+          return 'flora_structural';
+        default:
+          return 'default';
+      }
+    },
     attrName(key) {
       switch (key) {
         case 'res_conductivity':
@@ -109,7 +288,7 @@ export default {
         case 'res_malleability':
           return 'Malleability:';
         case 'res_toughness':
-          return 'Toughness:';
+          return 'Unit Toughness:';
         case 'res_bulk':
           return 'Bulk:';
         case 'res_cold_resist':