diff --git a/app/components/bikes.rb b/app/components/bikes.rb
index 64169fd..225c70d 100644
--- a/app/components/bikes.rb
+++ b/app/components/bikes.rb
@@ -17,8 +17,7 @@ class Bikes < Netzke::Basepack::Grid
                   }
       },
       #needs to have type :action or else won't work in grid, because... netzke
-      { :name => "color", :type => :action, :editor => { :xtype => "xcolorcombo"}},
-      #{ :name => :color },
+      { :name => "color", :text => "Frame Color", :type => :action, :editor => { :xtype => "xcolorcombo"}, :renderer => :color_block},
       { :name => :bike_style__style, :text => 'Style' },
       { :name => :seat_tube_height, :text => 'Seat Tube (in)'},
       { :name => :top_tube_length, :text => 'Top Tube (in)'},
diff --git a/app/components/bikes/javascripts/init_component.js b/app/components/bikes/javascripts/init_component.js
index 402ef15..e152db1 100644
--- a/app/components/bikes/javascripts/init_component.js
+++ b/app/components/bikes/javascripts/init_component.js
@@ -9,5 +9,8 @@
       // The beauty of using Ext.Direct: calling 3 endpoints in a row, which results in a single call to the server!
       this.selectBikeBrand({bike_brand_id: record.get('bike_brand__brand')});
     }, this);
+  },
+  colorBlock: function(value){
+    return Ext.String.format('<div style="display:inline-block">{1}</div><div style="background-color:#{0};width:50px;height:10px;display:inline-block;margin:0 5px 0 5px;border:solid;border-color:gray;border-width:1px;"></div>', value, value);
   }
 }