diff --git a/gallery/models/album.py b/gallery/models/album.py
index da43b73..8c3267b 100644
--- a/gallery/models/album.py
+++ b/gallery/models/album.py
@@ -15,6 +15,10 @@ class Album(models.Model):
     cover = models.ImageField(upload_to="covers/", blank=True, null=True, verbose_name="Album Cover")
     is_public = models.BooleanField(default=False, verbose_name="Published")
 
+    @property
+    def photos_in_album(self):
+        return self.photos.count()
+
     def save(self, *args, **kwargs):
         if not self.slug:
             self.slug = slugify(self.name)
diff --git a/gallery/models/photo.py b/gallery/models/photo.py
index 3e16f22..c6b27de 100644
--- a/gallery/models/photo.py
+++ b/gallery/models/photo.py
@@ -24,7 +24,9 @@ class Photo(models.Model):
     album = models.ForeignKey(Album, on_delete=models.CASCADE, related_name='photos', verbose_name="Album")
     slug = models.CharField(max_length=15, editable=False, verbose_name="Photo Slug")
     photo = models.ImageField(upload_to=_get_upload_path, height_field='height', width_field='width', verbose_name="Photo")
-    photo_thumbnail = ImageSpecField(source='photo', processors=[ResizeToFill(100, 100)], format='JPEG', options={'quality': 70})
+    photo_sm = ImageSpecField(source='photo', processors=[ResizeToFill(320, 320)], format='JPEG', options={'quality': 70})
+    photo_md = ImageSpecField(source='photo', processors=[ResizeToFill(720, 720)], format='JPEG', options={'quality': 80})
+    photo_bg = ImageSpecField(source='photo', processors=[ResizeToFill(1920, 1920)], format='JPEG', options={'quality': 90})
     width = models.PositiveIntegerField(default=0, editable=False, verbose_name="Photo Width")
     height = models.PositiveIntegerField(default=0, editable=False, verbose_name="Photo Height")
     taken_at = models.DateTimeField(blank=True, null=True, editable=False, verbose_name="Taken at")
@@ -33,7 +35,7 @@ class Photo(models.Model):
     views = models.PositiveIntegerField(default=0, verbose_name="Views")
 
     def save(self, *args, **kwargs):
-        self.exif_data = Exif(self.photo.file)
+        self.exif_data = Exif(self.photo.path)
         datetime_taken = getattr(self.exif_data, 'datetimeoriginal', datetime.now)()
         self.slug = self.slug or self._generate_unique_slug(datetime_taken)
         self.taken_at = self.taken_at or datetime_taken
@@ -45,3 +47,4 @@ class Photo(models.Model):
 
     def __str__(self):
         return f'{self.slug} ({self.album.name})'
+
diff --git a/gallery/templates/gallery/_pagination.html b/gallery/templates/gallery/_pagination.html
new file mode 100644
index 0000000..add7198
--- /dev/null
+++ b/gallery/templates/gallery/_pagination.html
@@ -0,0 +1,39 @@
+{% if page_obj.has_other_pages %}
+    <ul class="uk-pagination uk-flex-center" uk-margin>
+    
+        {% if page_obj.has_previous %}
+          <li><a href="?page={{ page_obj.previous_page_number }}"><span uk-pagination-previous></span></a></li>
+        {% else %}
+          <li class="uk-disabled"><span uk-pagination-previous></span></li>
+        {% endif %}
+      
+        {% if page_obj.number|add:'-3' > 1 %}
+          <li><a href="?page=1">1</a></li>
+          {% if page_obj.number|add:'-4' > 1  %}
+          <li><a href="?page={{ page_obj.number|add:'-4' }}">&hellip;</a></li>
+          {% endif %}
+        {% endif %}
+      
+        {% for i in page_obj.paginator.page_range %}
+          {% if page_obj.number == i %}
+            <li class="uk-active"><span>{{ i }}</span></li>
+          {% elif i > page_obj.number|add:'-4' and i < page_obj.number|add:'4' %}
+            <li><a href="?page={{ i }}">{{ i }}</a></li>
+          {% endif %}
+        {% endfor %}
+      
+        {% if page_obj.paginator.num_pages > page_obj.number|add:'3' %}
+          {% if page_obj.number|add:'4' < page_obj.paginator.num_pages  %}
+          <li><a href="?page={{ page_obj.number|add:'4' }}">&hellip;</a></li>
+          {% endif %}
+          <li><a href="?page={{ page_obj.paginator.num_pages }}">{{ page_obj.paginator.num_pages }}</a></li>
+        {% endif %}
+      
+        {% if page_obj.has_next %}
+          <li><a href="?page={{ page_obj.next_page_number }}"><span uk-pagination-next></span></a></li>
+        {% else %}
+          <li class="uk-disabled"><span uk-pagination-next></span></li>
+        {% endif %}
+      
+    </ul>
+{% endif %}
\ No newline at end of file
diff --git a/gallery/templates/gallery/album_detail.html b/gallery/templates/gallery/album_detail.html
index 9011f13..c5ef5ff 100644
--- a/gallery/templates/gallery/album_detail.html
+++ b/gallery/templates/gallery/album_detail.html
@@ -13,8 +13,16 @@
 {% block content %}
 
 <h1>{{ album.name }}</h1>
-{% for photo in photos %}
-    <a href="{{ photo.get_absolute_url }}"> {{ photo.slug }} </a>
-{% endfor %}
+
+    <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 photos %}
+        <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 }}">
+        </a>
+    {% endfor %}
+    </div>
+
+    {% include "./_pagination.html" %}
 
 {% endblock %}
\ No newline at end of file
diff --git a/gallery/templates/gallery/album_list.html b/gallery/templates/gallery/album_list.html
index 85ae62e..3d93c1b 100644
--- a/gallery/templates/gallery/album_list.html
+++ b/gallery/templates/gallery/album_list.html
@@ -10,13 +10,28 @@
 
 <!-- Content -->
 {% block content %}
-<ul>
+
+
+<div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: true">
     {% for album in album_list %}
-
-        <li>
-            <a href="{{ album.get_absolute_url }}"> {{ album.name }} </a>  - {{ album.album_date|date:"d.m.Y" }} 
-        </li>
-
+    <div>
+        <div class="uk-card uk-card-default">
+            <div class="uk-card-media-top">
+                <a href="{{ album.get_absolute_url }}">
+                <img src="{{ album.cover.url }}" width="1800" height="1200" alt="">
+                </a>
+            </div>
+            <div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">
+                <h3 class="uk-card-title"><a href="{{ album.get_absolute_url }}">{{ album }}</a></h3>
+                <p>{{ album.album_date|date:"d.m.Y" }} &bull; {{ album.photos_in_album }} photos</p>
+            </div>
+        </div>
+    </div>
     {% endfor %}
-</ul>
+    </div>
+
+
+{% include "./_pagination.html" %}
+
+
 {% endblock %}
\ No newline at end of file
diff --git a/gallery/templates/gallery/main.html b/gallery/templates/gallery/main.html
index 25c58d4..125753a 100644
--- a/gallery/templates/gallery/main.html
+++ b/gallery/templates/gallery/main.html
@@ -6,4 +6,7 @@
 <!-- Content -->
 {% block content %}
     Hello World!
+
+    <p>Istunto vanhenee: {{ session_expiry|date:"d.m.Y H:i" }}</p>
+
 {% endblock %}
\ No newline at end of file
diff --git a/gallery/templates/gallery/photo_detail.html b/gallery/templates/gallery/photo_detail.html
index c86097a..820c4ff 100644
--- a/gallery/templates/gallery/photo_detail.html
+++ b/gallery/templates/gallery/photo_detail.html
@@ -15,5 +15,6 @@
 {% block content %}
 
     <h1>{{ photo.slug }}</h1>
+    <img src="{{ photo.photo.url }}" alt="{{ photo.slug }}" class="height='100%'" />
 
 {% endblock %}
\ No newline at end of file
diff --git a/gallery/templates/gallery/photo_list.html b/gallery/templates/gallery/photo_list.html
index 19d4eb8..3c318c8 100644
--- a/gallery/templates/gallery/photo_list.html
+++ b/gallery/templates/gallery/photo_list.html
@@ -10,7 +10,17 @@
 
 <!-- Content -->
 {% block content %}
+
+    <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 }}">{{ photo.slug }}</a>
+        <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 }}">
+        </a>
     {% endfor %}
-{% endblock %}
\ No newline at end of file
+    </div>
+
+    {% include "./_pagination.html" %}
+
+{% endblock %}
+
diff --git a/gallery/views.py b/gallery/views.py
index 1e1358a..7f07356 100644
--- a/gallery/views.py
+++ b/gallery/views.py
@@ -1,20 +1,26 @@
+from django.core.paginator import Paginator
 from django.shortcuts import get_object_or_404, redirect, render
 from django.views.generic import DetailView, ListView, TemplateView
 
 from .models import Album, Photo
 
-# Create your views here.
-
 
 class Main(TemplateView):
     template_name = "gallery/main.html"
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        session_expiry = self.request.session.get_expiry_date()
+        context['session_expiry'] = session_expiry
+        return context
+
 
 class AlbumsList(ListView):
     model = Album
     template_name = 'gallery/album_list.html'
     queryset = Album.objects.filter(is_public=True)
     ordering = ['-album_date']
+    paginate_by = 30
 
 
 class AlbumDetail(DetailView):
@@ -26,7 +32,12 @@ class AlbumDetail(DetailView):
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
-        context['photos'] = self.object.photos.all()
+        photos = self.object.photos.all().order_by('taken_at')
+        paginator = Paginator(photos, 30)
+        page_number = self.request.GET.get('page')
+        page_obj = paginator.get_page(page_number)
+        context['photos'] = page_obj.object_list
+        context['page_obj'] = page_obj
         return context
 
 
@@ -36,10 +47,9 @@ class PhotoDetail(DetailView):
 
     def get_object(self, queryset=None):
         return get_object_or_404(Photo, slug=self.kwargs.get('photo_slug'))
-    
+
 
 class PhotosList(ListView):
     model = Photo
     paginate_by = 30
-    
-
+    ordering = ['-taken_at']