diff --git a/plugins/filters.rb b/plugins/filters.rb
index 7b08d539df0..c72f148290a 100644
--- a/plugins/filters.rb
+++ b/plugins/filters.rb
@@ -72,14 +72,51 @@ module Jekyll
     end
 
     # Sort an array of semvers
-    def semver_sort(input)
-      input.sort_by { |v|
-        val = v['name']
-        if val == "pre 0.7"
-          val = "0.6"
+    def group_components_by_release(input)
+      input.group_by { |v|
+        raise ArgumentError, "ha_release must be set in #{v.basename}" if v["ha_release"].nil?
+        v["ha_release"].to_s
+      }.map{ |v|
+        version = v[0]
+        if version == "pre 0.7"
+          version = "0.6"
         end
-        Gem::Version.new(val)
-      }
+
+        begin
+          gem_ver = Gem::Version.new(version).to_s
+        rescue
+          raise ArgumentError, "Error when parsing ha_release #{version} in #{v.path}."
+        end
+
+        { "label" => v[0], "new_components_count" => v[1].count, "sort_key" => gem_ver }
+      }.sort_by { |v| v["sort_key"] }.reverse.group_by { |v|
+        version = v["label"]
+
+        split_ver = version.split('.')
+        major = split_ver[0]
+        minor = split_ver[1]
+
+        if version == "pre 0.7"
+          "0.X"
+        elsif minor.length == 1
+          "#{major}.X"
+        else
+          "#{major}.#{minor[0]}X"
+        end
+      }.map { |v|
+        sort_key = v[1][-1]["sort_key"]
+        if v[0] == "0.X"
+          sort_key = "0.01" # Ensure pre 0.7 is always sorted at bottom.
+        end
+
+        total_new_components = 0
+
+        v[1].each do |vers|
+          total_new_components += vers["new_components_count"]
+        end
+
+        { "label" => v[0], "versions" => v[1], "new_components_count" => total_new_components, "sort_key" => sort_key }
+      }.sort_by { |v| v["sort_key"] }.reverse
     end
   end
 end
diff --git a/source/components/index.html b/source/components/index.html
index e1a0e4ba422..b39d04db1a5 100644
--- a/source/components/index.html
+++ b/source/components/index.html
@@ -26,7 +26,7 @@ regenerate: false
 {%- endfor -%}
 
 {%- assign components = site.components | sort: 'title' -%}
-{%- assign components_by_version = site.components | group_by: 'ha_release' | semver_sort | reverse -%}
+{%- assign components_by_version = site.components | group_components_by_release -%}
 {%- assign categories = components | map: 'ha_category' | join: ',' | join: ',' | split: ',' | uniq | sort -%}
 {%- capture current_version -%}{{ site.current_major_version }}.{{ site.current_minor_version }}{% endcapture -%}
 {%- assign added_one_ago_minor_version = site.current_minor_version|minus: 1 -%}
@@ -50,8 +50,11 @@ Support for these components is provided by the Home Assistant community.
       <a href='#version/{{ added_one_ago_version }}' class="btn added_one_version_ago">Added in {{ added_one_ago_version }} ({{ one_ago_version_components_count }})</a>
       <a href='#version/{{ added_two_ago_version }}' class="btn added_two_versions_ago">Added in {{ added_two_ago_version }} ({{ two_ago_version_components_count }})</a>
       Added in <select name="versions">
-        {%- for version in components_by_version -%}
-          <option value="#version/{{ version.name }}">{{ version.name }} ({{ version.items | size }})
+        {%- for group in components_by_version -%}
+          <optgroup label="{{ group.label }} ({{group.new_components_count}})">
+            {%- for version in group.versions -%}
+              <option value="#version/{{ version.label }}">{{ version.label }} ({{ version.new_components_count }})
+            {%- endfor -%}
         {%- endfor -%}
       </select>
 {%- for category in categories -%}