diff --git a/frontend/css/app.css b/frontend/css/app.css
index 0909b2a00..36a51756e 100644
--- a/frontend/css/app.css
+++ b/frontend/css/app.css
@@ -2,6 +2,7 @@
 @import url("../node_modules/material-design-icons-iconfont/dist/material-design-icons.css");
 
 @import url("alerts.css");
+@import url("photo.css");
 
 #app div.loading {
     text-align: center;
@@ -35,167 +36,6 @@ main {
     margin: 0;
 }
 
-main div.page {
-    margin: 0;
-    padding: 0;
-}
-
-main div.page .page-container {
-    padding: 0;
-    overflow: auto;
-}
-
-main div.page .page-form {
-    padding: 2.4rem 2rem 0 2rem;
-    float: none;
-}
-
-main div.page .page-form form {
-}
-
-.navbar {
-    padding: 1px 2rem 1px 2rem;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: black !important;
-    position: fixed !important;
-    box-shadow: 0px 6px 30px 0px rgba(0,0,0,0.75);
-    z-index: 1000;
-}
-
-.navbar .nav-item-photos .nav-link.active,
-.navbar .nav-item-photos .nav-link:hover {
-    color: #c8e5ff;
-}
-
-main div.page-photos {
-}
-
-.navbar .nav-item-albums .nav-link.active,
-.navbar .nav-item-albums .nav-link:hover {
-    color: #c4ffcb;
-}
-
-main div.page-albums {
-}
-
-.navbar .nav-item-import .nav-link.active,
-.navbar .nav-item-import .nav-link:hover {
-    color: #feffb8;
-}
-
-main div.page-import {
-}
-
-.navbar .nav-item-export .nav-link.active,
-.navbar .nav-item-export .nav-link:hover {
-    color: #ffedc1;
-}
-
-main div.page-export {
-}
-
-.navbar .nav-item-settings .nav-link.active,
-.navbar .nav-item-settings .nav-link:hover {
-    color: #f5c5c5;
-}
-
-main div.page-settings {
-}
-
-.photo-tile {
-    cursor: pointer;
-}
-
-.photo-tile.selected {
-    opacity: 0.6;
-}
-
-.photo-grid .photo {
-    background: #eeeeee;
-    display: block;
-    width: 250px;
-    height: 250px;
-    float: left;
-    margin: 3px;
-    overflow: hidden;
-    position: relative;
-    cursor: pointer;
-}
-
-.photo-grid .photo img {
-    margin: 0;
-    padding: 0;
-}
-
-.photo-grid .photo .info {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    opacity: 0.75;
-    background: black;
-    font-size: 12px;
-    padding: 8px 12px;
-    color: white;
-    cursor: text;
-}
-
-.photo-grid .photo:hover .info {
-    display: block;
-}
-
-.photo-grid .photo .right {
-    float: right;
-}
-
-.photo-grid .photo .left {
-    float: left;
-}
-
-.photo-grid .photo .actions {
-    display: block;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    opacity: 1;
-    background: transparent;
-    font-size: 14px;
-    padding: 6px 12px;
-    color: white;
-    text-align: center;
-    cursor: default;
-}
-
-.photo-grid .photo:hover .actions {
-    background: black;
-    opacity: 0.75;
-}
-
-.photo-grid .photo .actions .action {
-    display: none;
-}
-
-.photo-grid .photo .location {
-    display: none;
-    font-size: 12px;
-    text-decoration: none;
-    color: white;
-}
-
-.photo-grid .photo:hover .location {
-    display: inline;
-}
-
-.photo-grid .photo:hover .actions .action,
-.photo-grid .photo .actions .action.favorite {
-    display: inline;
-    cursor: pointer;
-}
-
 .v-badge__badge {
     font-size: 12px;
     height: 19px;
diff --git a/frontend/css/photo.css b/frontend/css/photo.css
new file mode 100644
index 000000000..6dfc2e96b
--- /dev/null
+++ b/frontend/css/photo.css
@@ -0,0 +1,117 @@
+
+.photo-tile {
+    cursor: pointer;
+}
+
+.photo-tile.selected {
+    opacity: 0.6;
+}
+
+.photo-grid .photo {
+    background: #eeeeee;
+    display: block;
+    width: 250px;
+    height: 250px;
+    float: left;
+    margin: 3px;
+    overflow: hidden;
+    position: relative;
+    cursor: pointer;
+}
+
+.photo-grid .photo img {
+    margin: 0;
+    padding: 0;
+}
+
+.photo-grid .photo .info {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    opacity: 0.75;
+    background: black;
+    font-size: 12px;
+    padding: 8px 12px;
+    color: white;
+    cursor: text;
+}
+
+.photo-grid .photo:hover .info {
+    display: block;
+}
+
+.photo-grid .photo .right {
+    float: right;
+}
+
+.photo-grid .photo .left {
+    float: left;
+}
+
+.photo-grid .photo .actions {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 1;
+    background: transparent;
+    font-size: 14px;
+    padding: 6px 12px;
+    color: white;
+    text-align: center;
+    cursor: default;
+}
+
+.photo-grid .photo:hover .actions {
+    background: black;
+    opacity: 0.75;
+}
+
+.photo-grid .photo .actions .action {
+    display: none;
+}
+
+.photo-grid .photo .location {
+    display: none;
+    font-size: 12px;
+    text-decoration: none;
+    color: white;
+}
+
+.photo-grid .photo:hover .location {
+    display: inline;
+}
+
+.photo-grid .photo:hover .actions .action,
+.photo-grid .photo .actions .action.favorite {
+    display: inline;
+    cursor: pointer;
+}
+
+.photo-carousel .next {
+    position: absolute;
+    top: 50%;
+    z-index: 1;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+.photo-carousel .next,
+.photo-carousel .prev {
+    position: absolute;
+    top: 50%;
+    z-index: 1;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+.photo-carousel .next {
+    right: 5px;
+}
+
+.photo-carousel .prev {
+    left: 5px;
+}
\ No newline at end of file
diff --git a/frontend/src/app/pages/photos.vue b/frontend/src/app/pages/photos.vue
index 570361ae6..43b4188f4 100644
--- a/frontend/src/app/pages/photos.vue
+++ b/frontend/src/app/pages/photos.vue
@@ -171,7 +171,7 @@
                 </v-card>
                 <v-layout row wrap>
                     <v-flex
-                            v-for="photo in results"
+                            v-for="(photo, index) in results"
                             :key="photo.ID"
                             xs12 sm6 md4 lg3 d-flex
                     >
@@ -184,7 +184,7 @@
                                         v-bind:class="{ selected: photo.selected }"
                                         style="cursor: pointer"
                                         class="grey lighten-2"
-                                        @click="openPhoto(photo)"
+                                        @click="openPhoto(photo, index)"
 
                                 >
                                     <v-layout
@@ -235,7 +235,6 @@
                 </v-layout>
             </v-container>
 
-
             <v-container grid-list-xs fluid class="pa-0" v-if="query.view === 'tiles'">
                 <v-card v-if="results.length === 0">
                     <v-card-title primary-title>
@@ -247,7 +246,7 @@
                 </v-card>
                 <v-layout row wrap>
                     <v-flex
-                            v-for="photo in results"
+                            v-for="(photo, index) in results"
                             :key="photo.ID"
                             xs12 sm6 md3 lg2 d-flex
                             v-bind:class="{ selected: photo.selected }"
@@ -259,7 +258,7 @@
                                        aspect-ratio="1"
                                        class="grey lighten-2"
                                        style="cursor: pointer"
-                                       @click="openPhoto(photo)"
+                                       @click="openPhoto(photo, index)"
                                 >
                                     <v-layout
                                             slot="placeholder"
@@ -312,7 +311,7 @@
 
 
         <v-dialog v-model="viewDialog" fullscreen hide-overlay transition="dialog-bottom-transition">
-            <v-card v-if="viewDialogPhoto">
+            <v-card v-if="viewDialogPhoto" dark color="black" class="photo-carousel">
                 <v-img :src="viewDialogPhoto.getThumbnailUrl('fit', 500)"
                        :aspect-ratio="viewDialogPhoto.FileAspectRatio"
                        contain
@@ -334,6 +333,13 @@
                         <v-progress-circular indeterminate
                                              color="grey lighten-5"></v-progress-circular>
                     </v-layout>
+
+                    <v-btn icon large absolute class="next" @click.stop.prevent="nextPhoto()">
+                        <v-icon color="white" x-large>chevron_right</v-icon>
+                    </v-btn>
+                    <v-btn icon large absolute class="prev">
+                        <v-icon color="white" x-large @click.stop.prevent="prevPhoto()">chevron_left</v-icon>
+                    </v-btn>
                 </v-img>
 
             </v-card>
@@ -366,6 +372,7 @@
                 'advandedSearch': false,
                 'viewDialog': false,
                 'viewDialogPhoto': null,
+                'viewDialogPhotoIndex': 0,
                 'window': {
                     width: 0,
                     height: 0
@@ -426,11 +433,15 @@
                 this.window.width = window.innerWidth;
                 this.window.height = window.innerHeight;
             },
-            overPhoto(photo) {
-
+            prevPhoto() {
+                if(this.viewDialogPhotoIndex < 1 || !this.results[this.viewDialogPhotoIndex - 1]) return false;
+                this.viewDialogPhotoIndex--;
+                this.viewDialogPhoto = this.results[this.viewDialogPhotoIndex];
             },
-            leavePhoto(photo) {
-
+            nextPhoto() {
+                if(this.viewDialogPhotoIndex >= this.results.length || !this.results[this.viewDialogPhotoIndex + 1]) return false;
+                this.viewDialogPhotoIndex++;
+                this.viewDialogPhoto = this.results[this.viewDialogPhotoIndex];
             },
             clearSelection() {
                 for (let i = 0; i < this.selected.length; i++) {
@@ -479,14 +490,15 @@
                     this.snackbarVisible = false;
                 }
             },
-            openPhoto(photo) {
-                this.$alert.success('Open photo' + photo.PhotoTitle);
+            openPhoto(photo, index) {
                 this.viewDialogPhoto = photo;
+                this.viewDialogPhotoIndex = index;
                 this.viewDialog = true;
                 this.hideSnackbar();
             },
             closePhoto() {
                 this.viewDialogPhoto = null;
+                this.viewDialogPhotoIndex = 0;
                 this.viewDialog = false;
                 this.showSnackbar();
             },