diff --git a/gallery/templates/gallery/photo_list.html b/gallery/templates/gallery/photo_list.html
index 0a234e5..f316243 100644
--- a/gallery/templates/gallery/photo_list.html
+++ b/gallery/templates/gallery/photo_list.html
@@ -14,19 +14,31 @@
 
 {% load link_tags %}
 
-<ul class="uk-subnav uk-subnav-divider uk-margin-remove-top uk-flex-right" uk-margin>
+<ul class="uk-subnav uk-subnav-divider uk-margin-remove-top uk-flex-center" uk-margin>
     <li {% if order == 'latest' %}class="uk-active" {% endif %}><a href="{% search_link 'latest' request.GET %}">Latest</a></li>
     <li {% if order == 'liked' %}class="uk-active" {% endif %}><a href="{% search_link 'liked' request.GET %}">Liked</a></li>
     <li {% if order == 'popular' %}class="uk-active" {% endif %}><a href="{% search_link 'popular' request.GET %}">Popular</a></li>
 </ul>
 
     <div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l" uk-grid="masonry: true">
+
     {% for photo in object_list %}
         <a href="{{ photo.get_absolute_url }}">
-            <img loading="lazy" srcset="{{ photo.photo_bg.url }} 320w, {{ photo.photo_md.url }} 720w, {{ photo.photo_md.url }} 1920w" 
-            src="{{ photo.photo_md.url }}" alt="{{ photo.album.name }} - {{ photo.slug }}">
+            <img 
+                loading="lazy" 
+                src="{{ photo.photo_sm.url }}" 
+                srcset="
+                    {{ photo.photo_sm.url }} 320w, 
+                    {{ photo.photo_md.url }} 720w, 
+                    {{ photo.photo_bg.url }} 1920w
+                " 
+                sizes="(max-width: 640px) 320px, 
+                       (max-width: 960px) 720px, 
+                       1920px" 
+                alt="{{ photo.album.name }} - {{ photo.slug }}">
         </a>
     {% endfor %}
+    
     </div>
 
     {% include "./partials/pagination.html" %}