diff --git a/ui/src/Pages/AlbumPage/AlbumPage.js b/ui/src/Pages/AlbumPage/AlbumPage.js
index b0956994..fd413844 100644
--- a/ui/src/Pages/AlbumPage/AlbumPage.js
+++ b/ui/src/Pages/AlbumPage/AlbumPage.js
@@ -1,16 +1,9 @@
 import React, { Component } from 'react'
 import gql from 'graphql-tag'
 import { Query } from 'react-apollo'
-import {
-  Gallery,
-  Photo,
-  PhotoFiller,
-  PhotoContainer,
-  PhotoOverlay,
-} from './styledElements'
 import Layout from '../../Layout'
-import { Loader } from 'semantic-ui-react'
 import AlbumSidebar from './AlbumSidebar'
+import PhotoGallery from '../../PhotoGallery'
 
 const albumQuery = gql`
   query albumQuery($id: ID) {
@@ -34,12 +27,12 @@ class AlbumPage extends Component {
 
     this.state = {
       activeImage: -1,
+      activeImageId: null,
     }
 
     this.setActiveImage = this.setActiveImage.bind(this)
 
     this.photoAmount = 1
-    this.previousActive = false
 
     this.keyDownEvent = e => {
       const activeImage = this.state.activeImage
@@ -67,16 +60,10 @@ class AlbumPage extends Component {
     document.removeEventListener('keydown', this.keyDownEvent)
   }
 
-  setActiveImage(index) {
-    this.previousActive = this.state.activeImage != -1
+  setActiveImage(index, id) {
     this.setState({
       activeImage: index,
-    })
-  }
-
-  dismissPopup() {
-    this.setState({
-      activeImage: -1,
+      activeImageId: id,
     })
   }
 
@@ -89,44 +76,22 @@ class AlbumPage extends Component {
           {({ loading, error, data }) => {
             if (error) return <div>Error</div>
 
-            let photos = null
             if (data.album) {
               this.photoAmount = data.album.photos.length
-
-              const { activeImage } = this.state
-
-              photos = data.album.photos.map((photo, index) => {
-                const active = activeImage == index
-
-                return (
-                  <PhotoContainer
-                    key={photo.id}
-                    onClick={() => {
-                      this.setActiveImage(index)
-                    }}
-                  >
-                    <Photo src={photo.thumbnail.path} />
-                    <PhotoOverlay active={active} />
-                  </PhotoContainer>
-                )
-              })
             }
 
             return (
               <div>
-                <h1>{data.album ? data.album.title : ''}</h1>
-                <Gallery>
-                  <Loader active={loading}>Loading images</Loader>
-                  {photos}
-                  <PhotoFiller />
-                </Gallery>
-                <AlbumSidebar
-                  imageId={
-                    this.state.activeImage != -1
-                      ? data.album.photos[this.state.activeImage].id
-                      : null
-                  }
+                <PhotoGallery
+                  loading={loading}
+                  title={data.album && data.album.title}
+                  photos={data.album && data.album.photos}
+                  activeIndex={this.state.activeImage}
+                  onSelectImage={index => {
+                    this.setActiveImage(index, data.album.photos[index].id)
+                  }}
                 />
+                <AlbumSidebar imageId={this.state.activeImageId} />
               </div>
             )
           }}
diff --git a/ui/src/Pages/AlbumPage/styledElements.js b/ui/src/Pages/AlbumPage/styledElements.js
deleted file mode 100644
index d5d9ab98..00000000
--- a/ui/src/Pages/AlbumPage/styledElements.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import styled from 'styled-components'
-
-export const Gallery = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-`
-
-export const PhotoContainer = styled.div`
-  flex-grow: 1;
-  height: 200px;
-  margin: 4px;
-  background-color: #eee;
-  position: relative;
-`
-
-export const Photo = styled.img`
-  height: 200px;
-  min-width: 100%;
-  position: relative;
-  object-fit: cover;
-`
-
-export const PhotoOverlay = styled.div`
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  ${props =>
-    props.active &&
-    `
-      border: 4px solid rgba(65, 131, 196, 0.6);
-    `}
-`
-
-export const PhotoFiller = styled.div`
-  height: 200px;
-  flex-grow: 999999;
-`
diff --git a/ui/src/PhotoGallery.js b/ui/src/PhotoGallery.js
new file mode 100644
index 00000000..0d216202
--- /dev/null
+++ b/ui/src/PhotoGallery.js
@@ -0,0 +1,84 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Loader } from 'semantic-ui-react'
+
+export const Gallery = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+`
+
+export const PhotoContainer = styled.div`
+  flex-grow: 1;
+  height: 200px;
+  margin: 4px;
+  background-color: #eee;
+  position: relative;
+`
+
+export const Photo = styled.img`
+  height: 200px;
+  min-width: 100%;
+  position: relative;
+  object-fit: cover;
+`
+
+export const PhotoOverlay = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  ${props =>
+    props.active &&
+    `
+      border: 4px solid rgba(65, 131, 196, 0.6);
+    `}
+`
+
+export const PhotoFiller = styled.div`
+  height: 200px;
+  flex-grow: 999999;
+`
+
+const PhotoGallery = ({
+  activeIndex = -1,
+  photos,
+  loading,
+  title,
+  onSelectImage,
+}) => {
+  let photoElements = null
+  if (photos) {
+    photoElements = photos.map((photo, index) => {
+      const active = activeIndex == index
+
+      return (
+        <PhotoContainer
+          key={photo.id}
+          style={{ cursor: onSelectImage && 'pointer' }}
+          onClick={() => {
+            onSelectImage && onSelectImage(index)
+          }}
+        >
+          <Photo src={photo.thumbnail.path} />
+          <PhotoOverlay active={active} />
+        </PhotoContainer>
+      )
+    })
+  }
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <Gallery>
+        <Loader active={loading}>Loading images</Loader>
+        {photoElements}
+        <PhotoFiller />
+      </Gallery>
+    </div>
+  )
+}
+
+export default PhotoGallery