diff --git a/app/views/shared/components/_public_recording_row.html.erb b/app/views/shared/components/_public_recording_row.html.erb
index 22bfbeac..3d13ad68 100644
--- a/app/views/shared/components/_public_recording_row.html.erb
+++ b/app/views/shared/components/_public_recording_row.html.erb
@@ -60,8 +60,9 @@
     </div>
   </td>
   <td>
+    <% sorted_formats =  recording[:playbacks].sort_by! {|p| p[:type]} %>
     <% p = recording[:playbacks].find do |p| p.key?(:length) end %>
-    <% recording[:playbacks].each do |p| %>
+    <% sorted_formats.each do |p| %>
       <%= link_to p[:type].capitalize, p[:url], class: "btn btn-sm btn-primary", target: "_blank" %>
     <% end %>
   </td>
diff --git a/app/views/shared/components/_recording_row.html.erb b/app/views/shared/components/_recording_row.html.erb
index ddfa1315..d61618b6 100644
--- a/app/views/shared/components/_recording_row.html.erb
+++ b/app/views/shared/components/_recording_row.html.erb
@@ -63,7 +63,8 @@
     </div>
   </td>
   <td>
-    <% recording[:playbacks].each do |p| %>
+    <% sorted_formats =  recording[:playbacks].sort_by! {|p| p[:type]} %>
+    <% sorted_formats.each do |p| %>
       <%= link_to p[:type].capitalize, p[:url], class: "btn btn-sm btn-primary", target: "_blank" %>
     <% end %>
   </td>