diff --git a/public/css/mango.css b/public/css/mango.css
index 08a9723..ee20a98 100644
--- a/public/css/mango.css
+++ b/public/css/mango.css
@@ -56,6 +56,18 @@
 td > .uk-dropdown {
 	white-space: pre-line;
 }
-.title-rename > .uk-inline {
+#edit-modal .uk-grid > div {
+	height: 300px;
+}
+#edit-modal #cover {
+	height: 100%;
+	width: 100%;
+	object-fit: cover;
+}
+#edit-modal #cover-upload {
+	height: 100%;
+	box-sizing: border-box;
+}
+#edit-modal .uk-modal-body .uk-inline {
 	width: 100%;
 }
diff --git a/public/js/title.js b/public/js/title.js
index 4c9f748..1b423d1 100644
--- a/public/js/title.js
+++ b/public/js/title.js
@@ -32,9 +32,12 @@ function showModal(encodedPath, pages, percentage, encodedeTitle, encodedEntryTi
 		updateProgress(titleID, entryID, 0);
 	});
 
+	$('.uk-modal-title.break-word > a').attr('onclick', `edit("${entryID}")`);
+
 	UIkit.modal($('#modal')).show();
 	styleModal();
 }
+
 function updateProgress(titleID, entryID, page) {
 	$.post('/api/progress/' + titleID + '/' + entryID + '/' + page, function(data) {
 		if (data.success) {
@@ -47,33 +50,19 @@ function updateProgress(titleID, entryID, page) {
 	});
 }
 
-const rename = ele => {
-	const h2 = $(ele).parent();
-
-	$(h2).attr('hidden', true);
-	$(h2).next().removeAttr('hidden');
-};
-
-const renameSubmit = ele => {
-	const group = $(ele).closest('.title-rename');
-	const id = $(group).attr('data-id');
-	const eid = $(group).attr('data-entry-id');
-	const name = $(ele).next().val();
+const renameSubmit = (name, eid) => {
+	const upload = $('.upload-field');
+	const titleId = upload.attr('data-title-id');
 
 	console.log(name);
 
-	$(group).attr('hidden', true);
-	$(group).prev().removeAttr('hidden');
-
 	if (name.length === 0) {
 		alert('danger', 'The display name should not be empty');
 		return;
 	}
 
-	$(group).prev().find('span').text(name);
-
 	const query = $.param({ entry: eid });
-	let url = `/api/admin/display_name/${id}/${name}`;
+	let url = `/api/admin/display_name/${titleId}/${name}`;
 	if (eid)
 		url += `?${query}`;
 
@@ -84,7 +73,6 @@ const renameSubmit = ele => {
 		dataType: 'json'
 	})
 	.done(data => {
-		console.log(data);
 		if (data.error) {
 			alert('danger', `Failed to update display name. Error: ${data.error}`);
 			return;
@@ -96,10 +84,68 @@ const renameSubmit = ele => {
 	});
 };
 
-$(() => {
-	$('.uk-input.title-rename-field').keyup(event => {
+const edit = (eid) => {
+	const cover = $('#edit-modal #cover');
+	let url = cover.attr('data-title-cover');
+	let displayName = $('h2.uk-title > span').text();
+
+	if (eid) {
+		const item = $(`#${eid}`);
+		url = item.find('img').attr('data-src');
+		displayName = item.find('.uk-card-title').attr('data-title');
+	}
+
+	cover.attr('data-src', url);
+
+	const displayNameField = $('#display-name-field');
+	displayNameField.attr('value', displayName);
+	displayNameField.keyup(event => {
 		if (event.keyCode === 13) {
-			renameSubmit($(event.currentTarget).prev());
+			renameSubmit(displayNameField.val(), eid);
 		}
 	});
-});
+	displayNameField.siblings('a.uk-form-icon').click(() => {
+		renameSubmit(displayNameField.val(), eid);
+	});
+
+	setupUpload(eid);
+
+	UIkit.modal($('#edit-modal')).show();
+	styleModal();
+};
+
+const setupUpload = (eid) => {
+	const upload = $('.upload-field');
+	const bar = $('#upload-progress').get(0);
+	const titleId = upload.attr('data-title-id');
+	const queryObj = {title: titleId};
+	if (eid)
+		queryObj['entry'] = eid;
+	const query = $.param(queryObj);
+	const url = `/api/admin/upload/cover?${query}`;
+	console.log(url);
+	UIkit.upload('.upload-field', {
+		url: url,
+		name: 'file',
+		error: (e) => {
+			alert('danger', `Failed to upload cover image: ${e.toString()}`);
+		},
+		loadStart: (e) => {
+			$(bar).removeAttr('hidden');
+			bar.max = e.total;
+			bar.value = e.loaded;
+		},
+		progress: (e) => {
+			bar.max = e.total;
+			bar.value = e.loaded;
+		},
+		loadEnd: (e) => {
+			bar.max = e.total;
+			bar.value = e.loaded;
+		},
+		completeAll: () => {
+			$(bar).attr('hidden', '');
+			location.reload();
+		}
+	});
+};
diff --git a/src/views/title.ecr b/src/views/title.ecr
index 82556a9..e8c39b5 100644
--- a/src/views/title.ecr
+++ b/src/views/title.ecr
@@ -2,15 +2,9 @@
 	<h2 class=uk-title><span><%= title.display_name %></span>
 		&nbsp;
 		<% if is_admin %>
-			<a onclick="rename(this)" class="uk-icon-button" uk-icon="icon:pencil"></a>
+			<a onclick="edit()" class="uk-icon-button" uk-icon="icon:pencil"></a>
 		<% end %>
 	</h2>
-	<div class="uk-margin title-rename" data-id="<%= title.id %>" hidden>
-		<div class="uk-inline">
-			<a class="uk-form-icon uk-form-icon-flip" onclick="renameSubmit(this)" uk-icon="icon:check"></a>
-			<input class="uk-input title-rename-field" type="text" value="<%= title.display_name.gsub("\"", "&quot;") %>">
-		</div>
-	</div>
 </div>
 <ul class="uk-breadcrumb">
 	<li><a href="/">Library</a></li>
@@ -59,7 +53,7 @@
 	</div>
 	<%- end -%>
   <%- title.entries.each_with_index do |e, i| -%>
-  <div class="item" data-mtime="<%= e.mtime.to_unix %>" data-progress="<%= percentage[i] %>">
+  <div class="item" data-mtime="<%= e.mtime.to_unix %>" data-progress="<%= percentage[i] %>" id="<%= e.id %>">
       <a class="acard">
 		  <div class="uk-card uk-card-default" onclick="showModal(&quot;<%= e.encoded_path %>&quot;, '<%= e.pages %>', <%= (percentage[i] * 100).round(1) %>, &quot;<%= title.encoded_display_name %>&quot;, &quot;<%= e.encoded_display_name %>&quot;, '<%= e.title_id %>', '<%= e.id %>')">
           <div class="uk-card-media-top">
@@ -84,15 +78,9 @@
 		<h3 class="uk-modal-title break-word" id="modal-title"><span></span>
 			&nbsp;
 			<% if is_admin %>
-				<a onclick="rename(this)" class="uk-icon-button" uk-icon="icon:pencil"></a>
+				<a class="uk-icon-button" uk-icon="icon:pencil"></a>
 			<% end %>
 		</h3>
-		<div class="uk-margin title-rename" data-id="" data-entry-id="" hidden>
-			<div class="uk-inline">
-				<a class="uk-form-icon uk-form-icon-flip" onclick="renameSubmit(this)" uk-icon="icon:check"></a>
-				<input class="uk-input title-rename-field" type="text" value="">
-			</div>
-		</div>
 	</div>
       <p class="uk-text-meta uk-margin-remove-bottom break-word" id="path-text"></p>
       <p class="uk-text-meta uk-margin-remove-top" id="pages-text"></p>
@@ -112,6 +100,46 @@
   </div>
 </div>
 
+<div id="edit-modal" class="uk-flex-top" uk-modal>
+  <div class="uk-modal-dialog uk-margin-auto-vertical">
+    <button class="uk-modal-close-default" type="button" uk-close></button>
+    <div class="uk-modal-header">
+	<div>
+		<h3 class="uk-modal-title break-word" id="modal-title">Edit</h3>
+	</div>
+    </div>
+    <div class="uk-modal-body">
+		<div class="uk-margin">
+			<label class="uk-form-label" for="display-name">Display Name</label>
+			<div class="uk-inline">
+				<a class="uk-form-icon uk-form-icon-flip" uk-icon="icon:check"></a>
+				<input class="uk-input" type="text" name="display-name" id="display-name-field">
+			</div>
+		</div>
+		<label class="uk-form-label">Cover Image</label>
+		<div class="uk-grid">
+			<div class="uk-width-1-2@s">
+ 				<img id="cover" data-title-cover="<%= title.cover_url %>" alt="" data-width data-height uk-img>
+			</div>
+			<div class="uk-width-1-2@s">
+				<div id="cover-upload" class="upload-field uk-placeholder uk-text-center uk-flex uk-flex-middle" data-title-id="<%= title.id %>">
+					<div>
+						<span uk-icon="icon: cloud-upload"></span>
+						<span class="uk-text-middle">Upload a cover image by dropping it here or</span>
+						<div uk-form-custom>
+							<input type="file" accept="image/*">
+							<span class="uk-link">selecting one</span>
+						</div>
+					</div>
+				</div>
+
+			</div>
+		</div>
+		<progress id="upload-progress" class="uk-progress" value="0" max="100" hidden></progress>
+    </div>
+  </div>
+</div>
+
 <% content_for "script" do %>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.0.11/dotdotdot.js"></script>
 <script src="/js/dots.js"></script>