diff --git a/app/dashboards/category_dashboard.rb b/app/dashboards/category_dashboard.rb
index f2027c2..5e1ffce 100644
--- a/app/dashboards/category_dashboard.rb
+++ b/app/dashboards/category_dashboard.rb
@@ -15,7 +15,7 @@ class CategoryDashboard < Administrate::BaseDashboard
     created_at: Field::DateTime,
     updated_at: Field::DateTime,
     photo_id: Field::Number,
-    base_colour: Field::String,
+    base_colour: Field::ColourField,
     sort: Field::Number,
     slug: Field::String,
   }
diff --git a/app/fields/colour_field.rb b/app/fields/colour_field.rb
new file mode 100644
index 0000000..3bd853f
--- /dev/null
+++ b/app/fields/colour_field.rb
@@ -0,0 +1,7 @@
+require "administrate/field/base"
+
+class ColourField < Administrate::Field::Base
+  def to_s
+    data
+  end
+end
diff --git a/app/views/fields/colour_field/_form.html.erb b/app/views/fields/colour_field/_form.html.erb
index c333065..97460e7 100644
--- a/app/views/fields/colour_field/_form.html.erb
+++ b/app/views/fields/colour_field/_form.html.erb
@@ -1,2 +1,6 @@
-<%= f.label field.attribute %>
-<%= f.color_field field.attribute, style: 'height: 2.35em; width: 5em;' %>
+<div class="field-unit__label">
+  <%= f.label field.attribute %>
+</div>
+<div class="field-unit__field">
+  <%= f.color_field field.attribute, style: 'height: 2.35em; width: 5em;' %>
+</div>