diff --git a/website/photos/static/photos/css/style.css b/website/photos/static/photos/css/style.scss
similarity index 100%
rename from website/photos/static/photos/css/style.css
rename to website/photos/static/photos/css/style.scss
diff --git a/website/photos/templates/photos/album.html b/website/photos/templates/photos/album.html
index 713b41b217b13fdc458b87b852d3d37a5f793279..7cd5334a316b10e477154028f6dfa1f4fbe442a3 100644
--- a/website/photos/templates/photos/album.html
+++ b/website/photos/templates/photos/album.html
@@ -1,9 +1,11 @@
 {% extends 'base.html' %}
 {% load staticfiles i18n thumbnail shared_thumbnail %}
 
+{% block title %}{{ album.title }} — {% trans "Photos" %} — {{ block.super }}{% endblock %}
+
 {% block css_head %}
 {{ block.super }}
-<link href="{% static "photos/css/style.css" %}" rel="stylesheet" type="text/css">
+<link href="{% static "photos/css/style.scss" %}" rel="stylesheet" type="text/scss">
 {% endblock %}
 
 {% block body %}
@@ -18,29 +20,29 @@
 </p>
 {% endif %}
 <div class="gallery">
-    <ul class="gallery-photos row">
-        {% for photo in photos %}
-        <li class="post gallery-photo span3 has-overlay {% if forloop.counter0|divisibleby:4 %}first-child{% endif %}">
-            <a data-fancybox-rotation="{{ photo.rotation }}" class="gallery-box" rel="gallery"
+  <ul class="gallery-photos row">
+    {% for photo in photos %}
+    <li class="post gallery-photo span3 has-overlay {% if forloop.counter0|divisibleby:4 %}first-child{% endif %}">
+      <a data-fancybox-rotation="{{ photo.rotation }}" class="gallery-box" rel="gallery"
+        {% if album.shareable %}
+        data-download="{% url 'photos:shared-download' album.slug album.access_token photo %}" href="{% shared_thumbnail album.slug album.access_token photo '1024x768' fit=False %}"
+        {% else %}
+        data-download="{% url 'photos:download' photo %}" href="{% thumbnail photo.file '1024x768' fit=False %}"
+        {% endif %}>
+        <span class="post-inner">
+          <span class="inner-img">
             {% if album.shareable %}
-            data-download="{% url 'photos:shared-download' album.slug album.access_token photo %}" href="{% shared_thumbnail album.slug album.access_token photo '1024x768' fit=False %}"
+            <img class="rotate{{ photo.rotation }}" src="{% shared_thumbnail album.slug album.access_token photo '220x220' %}" alt="" />
             {% else %}
-            data-download="{% url 'photos:download' photo %}" href="{% thumbnail photo.file '1024x768' fit=False %}"
-            {% endif %}>
-                <span class="post-inner">
-                    <span class="inner-img">
-                        {% if album.shareable %}
-                        <img class="rotate{{ photo.rotation }}" src="{% shared_thumbnail album.slug album.access_token photo '220x220' %}" alt="" />
-                        {% else %}
-                        <img class="rotate{{ photo.rotation }}" src="{% thumbnail photo.file '220x220' %}" alt="" />
-                        {% endif %}
-                    </span>
-                    <span class="post-overlay">
-                    </span>
-                </span>
-            </a>
-        </li>
-        {% endfor %}
-    </ul>
+            <img class="rotate{{ photo.rotation }}" src="{% thumbnail photo.file '220x220' %}" alt="" />
+            {% endif %}
+          </span>
+          <span class="post-overlay">
+          </span>
+        </span>
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/website/photos/templates/photos/index.html b/website/photos/templates/photos/index.html
index e0b9eb67fce0f66a53c7690288901b8d15c8415e..f83801dc49d401d9adf9ebcc3fb5b254b403d724 100644
--- a/website/photos/templates/photos/index.html
+++ b/website/photos/templates/photos/index.html
@@ -1,53 +1,69 @@
 {% extends 'base.html' %}
 {% load i18n thumbnail staticfiles %}
 
+{% block title %}{% trans "Photos" %} — {{ block.super }}{% endblock %}
+
 {% block css_head %}
 {{ block.super }}
-<link href="{% static "photos/css/style.css" %}" rel="stylesheet" type="text/css">
+<link href="{% static 'photos/css/style.scss' %}" rel="stylesheet" type="text/scss">
 {% endblock %}
 
 {% block body %}
 <h1>{% trans "Photos" %}</h1>
 
 <div class="gallery">
-    <ul class="gallery-albums row">
-        {% for album in albums %}
-        <li class="post gallery-album span3 has-overlay {% if forloop.counter0|divisibleby:4 %}first-child{% endif %}">
-            <a href="{% url 'photos:album' album.slug %}">
-                <span class="post-inner">
-                    <span class="inner-img">
-                        <img class="rotate{{ album.cover.rotation }}" src="{% thumbnail album.cover.file '220x220' %}" alt="" />
-                    </span>
-                    <span class="post-overlay">
-                        <span class="post-overlay-meta">
-                            <h2>{{ album.title }}</h2>
-                            <p>{{ album.date|date:"d-m-Y" }}</p>
-                        </span>
-                    </span>
-                </span>
-            </a>
-        </li>
-        {% endfor %}
-    </ul>
+  <ul class="gallery-albums row">
+    {% for album in albums %}
+    <li class="post gallery-album span3 has-overlay {% if forloop.counter0|divisibleby:4 %}first-child{% endif %}">
+      <a href="{% url 'photos:album' album.slug %}">
+        <span class="post-inner">
+          <span class="inner-img">
+            {% if album.cover is not None %}
+              <img class="rotate{{ album.cover.rotation }}" src="{% thumbnail album.cover.file '220x220' %}" alt=""/>
+            {% endif %}
+          </span>
+          <span class="post-overlay">
+            <span class="post-overlay-meta">
+              <h2>{{ album.title }}</h2>
+              <p>{{ album.date|date:"d-m-Y" }}</p>
+            </span>
+          </span>
+          </span>
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
 </div>
-<div class='clearfix'></div>
-<div class="pagination" style="float: none;text-align: center;">
-    <span class="step-links">
-        {% if albums.has_previous %}
-            <a href="?page={{ albums.previous_page_number }}">&laquo;</a>
-        {% else %}
-            <a style='visibility: hidden;'>&laquo;</a>
-        {% endif %}
-
-        <span class="current">
-            {{ albums.number }} / {{ albums.paginator.num_pages }}
-        </span>
-
-        {% if albums.has_next %}
-            <a href="?page={{ albums.next_page_number }}">&raquo;</a>
-        {% else %}
-            <a style='visibility: hidden;'>&raquo;</a>
-        {% endif %}
-    </span>
+
+<div class="clearfix"></div>
+
+<div class="pagination-wrapper row">
+  <ul class="pagination">
+  {% if albums.has_previous %}
+  <li>
+    <a class="page-prev" href="{% url 'photos:index' %}?page={{ albums.previous_page_number }}">Previous</a>
+  </li>
+  {% endif %}
+
+  {% for page in page_range %}
+    {% if page == albums.number %}
+    <li class="current">
+      <span class="page-number">
+      {{ page }}
+      </span>
+    </li>
+    {% else %}
+    <li>
+      <a href="{% url 'photos:index' %}?page={{ page }}" class="page-number button">{{ page }}</a>
+    </li>
+    {% endif %}
+  {% endfor %}
+
+  {% if albums.has_next %}
+  <li>
+    <a class="page-next" href="{% url 'photos:index' %}?page={{ albums.next_page_number }}">{% trans "Next" %}</a>
+  </li>
+  {% endif %}
+  </ul>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/website/photos/views.py b/website/photos/views.py
index fbacbe92a4c5662d6d5bf75dd559526cc589ad9c..fa5b7fb8a5ac0fbf57142dbf1889a63740c8a21f 100644
--- a/website/photos/views.py
+++ b/website/photos/views.py
@@ -4,6 +4,7 @@ from django.conf import settings
 from django.contrib.auth.decorators import login_required
 from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
 from django.http import Http404
+from django.db.models import Q
 from django.shortcuts import get_object_or_404, render
 from sendfile import sendfile
 
@@ -17,10 +18,29 @@ COVER_FILENAME = 'cover.jpg'
 
 @login_required
 def index(request):
-    albums = Album.objects.filter(hidden=False).order_by('-date')
+    if request.user.member is None:
+        raise Http404("Sorry, you're not a member")
+
+    albums_filter = Q()
+    # Check if the user currently has a membership
+    if request.user.member.current_membership is None:
+        # This is user is currently not a member
+        # so only show photos that were made during their membership
+        for membership in request.user.membership_set.all():
+            if membership.until is not None:
+                albums_filter |= (Q(date__gte=membership.since) & Q(
+                    date__lte=membership.until))
+            else:
+                albums_filter |= (Q(date__gte=membership.since))
+
+    # Only show published albums
+    albums_filter = albums_filter & Q(hidden=False)
+    albums = Album.objects.filter(albums_filter).order_by('-date')
 
     paginator = Paginator(albums, 12)
     page = request.GET.get('page')
+    page = 1 if page is None or not page.isdigit() else int(page)
+
     try:
         albums = paginator.page(page)
     except PageNotAnInteger:
@@ -29,14 +49,44 @@ def index(request):
     except EmptyPage:
         # If page is out of range (e.g. 9999), deliver last page of results.
         albums = paginator.page(paginator.num_pages)
-    return render(request, 'photos/index.html', {'albums': albums})
+
+    page_range = range(1, paginator.num_pages + 1)
+    if paginator.num_pages > 7:
+        if page > 3:
+            page_range_end = paginator.num_pages
+            if page + 3 <= paginator.num_pages:
+                page_range_end = page + 3
+
+            page_range = range(page - 2, page_range_end)
+            while page_range.stop - page_range.start < 5:
+                page_range = range(page_range.start - 1, page_range.stop)
+        else:
+            page_range = range(1, 6)
+
+    return render(request, 'photos/index.html', {'albums': albums,
+                                                 'page_range': page_range})
 
 
 @login_required
 def album(request, slug):
     album = get_object_or_404(Album, slug=slug)
-    context = {'album': album, 'photos': album.photo_set.filter(hidden=False)}
-    return render(request, 'photos/album.html', context)
+    can_view = True
+
+    # Check if the user currently has a membership
+    if request.user.member.current_membership is None:
+        # This user is currently not a member, so need to check if he/she
+        # can view this album by checking the membership
+        filter = Q(since__lte=album.date) & (Q(until__gte=album.date) |
+                                             Q(until=None))
+        can_view = request.user.membership_set.filter(filter).count() > 0
+
+    if request.user.member is not None and can_view:
+        context = {
+            'album': album,
+            'photos': album.photo_set.filter(hidden=False)
+        }
+        return render(request, 'photos/album.html', context)
+    raise Http404("Sorry, you're not allowed to view this album")
 
 
 def _checked_shared_album(slug, token):