diff --git a/config.rb b/config.rb
index 0198ce7..e0711dc 100644
--- a/config.rb
+++ b/config.rb
@@ -1,4 +1,5 @@
 require 'lib/screenshot_generator'
+require 'ostruct'
 ###
 # Compass
 ###
@@ -91,3 +92,14 @@ activate :deploy do |deploy|
   # deploy.strategy = :submodule      # commit strategy: can be :force_push or :submodule, default: :force_push
   # deploy.commit_message = 'custom-message'      # commit message (can be empty), default: Automated commit at `timestamp` by middleman-deploy `version`
 end
+
+helpers do
+  def themes
+    data.themes.sort_by { |theme| theme[:name] }.map do |theme|
+        OpenStruct.new(theme.merge(
+            slug: theme[:name].parameterize.underscore,
+            digest: Digest::MD5.new.hexdigest(theme[:colors])
+        ))
+    end
+  end
+end
diff --git a/lib/screenshot.rb b/lib/screenshot.rb
index f3ec439..de1085c 100644
--- a/lib/screenshot.rb
+++ b/lib/screenshot.rb
@@ -20,10 +20,7 @@ class Screenshot
   end
 
   def initialize(theme)
-    @theme = OpenStruct.new(theme.merge(
-      slug: theme[:name].parameterize.underscore,
-      digest: Digest::MD5.new.hexdigest(theme[:colors])
-    ))
+    @theme = theme
   end
 
   def generate_theme_image
diff --git a/lib/screenshot_generator.rb b/lib/screenshot_generator.rb
index 5d17356..c1c5025 100644
--- a/lib/screenshot_generator.rb
+++ b/lib/screenshot_generator.rb
@@ -7,10 +7,11 @@ class ScreenshotGenerator < ::Middleman::Extension
     super
     app.before_build do |builder|
       Screenshot.prepare
-      data = YAML.load_file('data/themes.yml')
-      data.each do |theme|
+
+      themes.each do |theme|
         Screenshot.new(theme).generate_theme_image
       end
+
       puts "Hello World"
       # builder.run './my_deploy_script.sh'
     end
diff --git a/source/index.html.erb b/source/index.html.erb
index cded4ae..050d667 100644
--- a/source/index.html.erb
+++ b/source/index.html.erb
@@ -2,11 +2,9 @@
 title: Slack Themes
 ---
 
-<% data.themes.each do |theme| %>
-<% theme_slug = theme[:name].parameterize.underscore %>
-<% digest = Digest::MD5.new.hexdigest(theme[:colors]) %>
-<label class="radio theme_label theme_<%= theme[:name].parameterize.underscore %>">
-    <img src="/images/theme/<%= theme_slug %>-<%= digest %>.png" class="theme_thumb"><br>
-    <input name="sidebar_theme_rd" type="radio" value="<%= theme[:colors] %>" ng-model="theme" ng-change="setTheme()"> <%= theme[:name] %>
+<% themes.each do |theme| %>
+<label class="radio theme_label theme_<%= theme.slug %>">
+    <img src="/images/theme/<%= theme.slug %>-<%= theme.digest %>.png" class="theme_thumb"><br>
+    <input name="sidebar_theme_rd" type="radio" value="<%= theme.colors %>" ng-model="theme" ng-change="setTheme()"> <%= theme.name %>
 </label>
 <% end %>