diff --git a/src/api/index.js b/src/api/index.js
index 6a016ac..02df3fc 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -48,4 +48,8 @@ export function getPhotoGroups() {
 
 export function getPhotosByGroup(group_id) {
 	return apiClient.get('/photos/?photogroup='+group_id)
+}
+
+export function getPhotoLogPDF(id) {
+	return apiClient.get('/generatephotolog/'+id+'/')
 }
\ No newline at end of file
diff --git a/src/views/CreateLog.vue b/src/views/CreateLog.vue
index bd8c41c..879530e 100644
--- a/src/views/CreateLog.vue
+++ b/src/views/CreateLog.vue
@@ -1,8 +1,15 @@
 <template>
 	<div>
-		<n-space justify="space-between">
+		<n-space justify="space-around">
 			<h1>Create Log</h1>
-			<n-button type="primary">Generate</n-button>
+			<n-button
+				type="primary" style="margin: 1em;"
+				@click="getPDF"
+				:disabled="!isValidId"
+				:loading="isGeneratingPDF"
+			>
+				Save &amp; Generate
+			</n-button>
 		</n-space>
 
 		<n-space justify="space-around">
@@ -86,21 +93,19 @@
 					</template>
 
 					<n-image-group>
-						<n-space>
-							<draggable
-								:list="slide"
-								item-key="id"
-								@start="drag = true"
-								@end="drag = false"
-							>
-								<template #item="{element: photoid}">
-									<n-image
-										width="100"
-										:src="getPhotoSrcById(photoid)"
-									/>
-								</template>
-							</draggable>
-						</n-space>
+						<draggable
+							:list="slide"
+							item-key="id"
+							@start="drag = true"
+							@end="drag = false"
+						>
+							<template #item="{element: photoid}">
+								<n-image
+									width="100"
+									:src="getPhotoSrcById(photoid)"
+								/>
+							</template>
+						</draggable>
 					</n-image-group>					
 				</n-card>
 
@@ -188,6 +193,8 @@ import SaveFilled from '@vicons/material/SaveFilled'
 
 import PhotoSelectModal from '@/components/PhotoSelectModal'
 
+import { getPhotoLogPDF } from '@/api'
+
 export default {
 	name: 'CreateLog',
 	components: {
@@ -223,6 +230,7 @@ export default {
 			isLoadingData: false,
 			isCreateLoading: false,
 			isSavingServer: false,
+			isGeneratingPDF: false,
 
 			showPreventLeaveModal: false,
 			leaving_to_page: null,
@@ -285,10 +293,16 @@ export default {
 	},
 	methods: {
 		saveChanges() {
-			this.currently_saving = true
-			this.updateServerData()
-			this.currently_saving = false
-			this.unsaved_changes = false
+			return new Promise((reject, resolve) => {
+				this.currently_saving = true
+				this.updateServerData().catch(() => {
+					reject()
+				}).finally(() => {
+					this.currently_saving = false
+					this.unsaved_changes = false
+					resolve()
+				})
+			})
 		},
 		selectPhotosForSlide(slide_index) {
 			this.selectedSlide = slide_index
@@ -401,31 +415,48 @@ export default {
 				}
 			})
 		},
+		getPDF() {
+			this.saveChanges().then(() => {
+				this.isGeneratingPDF = true
+				getPhotoLogPDF(this.id).then((response) => {
+					let url = response.data.pdf
+					window.open(url, '_blank')
+				}).catch((error) => {
+					this.message.error('Cannot generate PDF file: ' + error)
+				}).finally(() => {
+					this.isGeneratingPDF = false
+				})
+			})
+		},
 		updateServerData() {
-			this.isSavingServer = true
+			return new Promise((reject, resolve) => {
+				this.isSavingServer = true
 
-			let server_slides = [...this.slides]
-			for (const idx in server_slides) {
-				server_slides[idx] = [
-					...server_slides[idx],
-					...new Array(
-						this.max_photos_per_slide-server_slides[idx].length)
-						.map(()=>null)]
-			}
+				let server_slides = [...this.slides]
+				for (const idx in server_slides) {
+					server_slides[idx] = [
+						...server_slides[idx],
+						...new Array(
+							this.max_photos_per_slide-server_slides[idx].length)
+							.map(()=>null)]
+				}
 
-			this.$store.dispatch('updatePhotoLogDetails', {
-				id: this.id,
-				title: this.title,
-				date: this.dateStr,
-				render_date: this.render_date,
-				start_slide_image: this.start_slide_image,
-				slides: server_slides
-			}).then(() => {
-				this.message.success('Changes saved')
-			}).catch((error) => {
-				this.message.error('There was a problem saving the changes: '+error.message)
-			}).finally(() => {
-				this.isSavingServer = false
+				this.$store.dispatch('updatePhotoLogDetails', {
+					id: this.id,
+					title: this.title,
+					date: this.dateStr,
+					render_date: this.render_date,
+					start_slide_image: this.start_slide_image,
+					slides: server_slides
+				}).then(() => {
+					this.message.success('Changes saved')
+				}).catch((error) => {
+					this.message.error('There was a problem saving the changes: '+error.message)
+					reject()
+				}).finally(() => {
+					this.isSavingServer = false
+					resolve()
+				})
 			})
 		},
 		continueLeavePage() {
@@ -458,6 +489,10 @@ export default {
 	min-width: 25em;
 }
 
+.n-card .n-image {
+	margin-right: 2em;
+}
+
 .add-slide-between-button, .add-slide-between-button * {
 	margin: 0;
 	padding: 0;