diff --git a/public/js/admin.js b/public/js/admin.js
new file mode 100644
index 0000000..c2c3012
--- /dev/null
+++ b/public/js/admin.js
@@ -0,0 +1,25 @@
+var scanning = false;
+function scan() {
+	scanning = true;
+	$('#scan-status > div').removeAttr('hidden');
+	$('#scan-status > span').attr('hidden', '');
+	var color = $('#scan').css('color');
+	$('#scan').css('color', 'gray');
+	$.post('/api/admin/scan', function (data) {
+		var ms = data.milliseconds;
+		var titles = data.titles;
+		$('#scan-status > span').text('Scanned ' + titles + ' titles in ' + ms + 'ms');
+		$('#scan-status > span').removeAttr('hidden');
+		$('#scan').css('color', color);
+		$('#scan-status > div').attr('hidden', '');
+		scanning = false;
+	});
+}
+$(function() {
+	$('li').click(function() {
+		url = $(this).attr('data-url');
+		if (url) {
+			$(location).attr('href', url);
+		}
+	});
+});
diff --git a/public/js/title.js b/public/js/title.js
new file mode 100644
index 0000000..077ee13
--- /dev/null
+++ b/public/js/title.js
@@ -0,0 +1,49 @@
+function showModal(title, zipPath, pages, percentage, title, entry) {
+	$('#modal button, #modal a').each(function(){
+		$(this).removeAttr('hidden');
+	});
+	if (percentage === 0) {
+		$('#continue-btn').attr('hidden', '');
+		$('#unread-btn').attr('hidden', '');
+	}
+	else {
+		$('#continue-btn').text('Continue from ' + percentage + '%');
+	}
+	if (percentage === 100) {
+		$('#read-btn').attr('hidden', '');
+	}
+	$('#modal-title').text(title);
+	$('#path-text').text(zipPath);
+	$('#pages-text').text(pages + ' pages');
+
+	$('#beginning-btn').attr('href', '/reader/' + title + '/' + entry + '/1');
+	$('#continue-btn').attr('href', '/reader/' + title + '/' + entry);
+
+	$('#read-btn').click(function(){
+		updateProgress(title, entry, pages);
+	});
+	$('#unread-btn').click(function(){
+		updateProgress(title, entry, 0);
+	});
+
+	UIkit.modal($('#modal')).show();
+}
+function updateProgress(title, entry, page) {
+	$.post('/api/progress/' + title + '/' + entry + '/' + page, function(data) {
+		if (data.success) {
+			location.reload();
+		}
+		else {
+			error = data.error;
+			alert('danger', error);
+		}
+	});
+}
+function alert(level, text) {
+	hideAlert();
+	var html = '<div class="uk-alert-' + level + '" uk-alert><a class="uk-alert-close" uk-close></a><p>' + text + '</p></div>';
+	$('#alert').append(html);
+}
+function hideAlert() {
+	$('#alert').empty();
+}
diff --git a/public/js/user-edit.js b/public/js/user-edit.js
new file mode 100644
index 0000000..12e4aa4
--- /dev/null
+++ b/public/js/user-edit.js
@@ -0,0 +1,16 @@
+$(function(){
+	var target = '/admin/user/edit';
+	if (username) target += username;
+	$('form').attr('action', target);
+
+	function alert(level, text) {
+		hideAlert();
+		var html = '<div class="uk-alert-' + level + '" uk-alert><a class="uk-alert-close" uk-close></a><p>' + text + '</p></div>';
+		$('#alert').append(html);
+	}
+	function hideAlert() {
+		$('#alert').empty();
+	}
+
+	if (error) alert('danger', error);
+});
diff --git a/public/js/user.js b/public/js/user.js
new file mode 100644
index 0000000..9d6c111
--- /dev/null
+++ b/public/js/user.js
@@ -0,0 +1,19 @@
+function alert(level, text) {
+	hideAlert();
+	var html = '<div class="uk-alert-' + level + '" uk-alert><a class="uk-alert-close" uk-close></a><p>' + text + '</p></div>';
+	$('#alert').append(html);
+}
+function hideAlert() {
+	$('#alert').empty();
+}
+function remove(username) {
+	$.post('/api/admin/user/delete/' + username, function(data) {
+		if (data.success) {
+			location.reload();
+		}
+		else {
+			error = data.error;
+			alert('danger', error);
+		}
+	});
+}
diff --git a/src/server.cr b/src/server.cr
index 6c83bb6..3374c8d 100644
--- a/src/server.cr
+++ b/src/server.cr
@@ -287,6 +287,25 @@ class Server
 			end
 		end
 
+		post "/api/progress/:title/:entry/:page" do |env|
+			begin
+				username = get_username env
+				title = (@library.get_title env.params.url["title"]).not_nil!
+				entry = (title.get_entry env.params.url["entry"]).not_nil!
+				page = env.params.url["page"].to_i
+
+				raise "incorrect page value" if page < 0 || page > entry.pages
+				title.save_progress username, entry.title, page
+			rescue e
+				send_json env, {
+					"success" => false,
+					"error" => e.message
+				}.to_json
+			else
+				send_json env, {"success" => true}.to_json
+			end
+		end
+
 		add_handler AuthHandler.new @storage
 		{% if flag?(:release) %}
 			# when building for relase, embed the static files in binary
diff --git a/src/views/admin.ecr b/src/views/admin.ecr
index ac2de52..6e0e089 100644
--- a/src/views/admin.ecr
+++ b/src/views/admin.ecr
@@ -14,31 +14,5 @@
 <a class="uk-button uk-button-danger" href="/logout">Log Out</a>
 
 <% content_for "script" do %>
-<script>
-  var scanning = false
-  function scan() {
-    scanning = true
-    $('#scan-status > div').removeAttr('hidden');
-    $('#scan-status > span').attr('hidden', '');
-    var color = $('#scan').css('color');
-    $('#scan').css('color', 'gray');
-    $.post('/api/admin/scan', function (data) {
-      var ms = data.milliseconds;
-      var titles = data.titles;
-      $('#scan-status > span').text('Scanned ' + titles + ' titles in ' + ms + 'ms');
-      $('#scan-status > span').removeAttr('hidden');
-      $('#scan').css('color', color);
-      $('#scan-status > div').attr('hidden', '');
-      scanning = false;
-    });
-  }
-  $(function() {
-    $('li').click(function() {
-      url = $(this).attr('data-url');
-      if (url) {
-        $(location).attr('href', url)
-      }
-    });
-  });
-</script>
+<script src="/js/admin.js"></script>
 <% end %>
diff --git a/src/views/title.ecr b/src/views/title.ecr
index 878aad6..5d23176 100644
--- a/src/views/title.ecr
+++ b/src/views/title.ecr
@@ -1,19 +1,47 @@
+<div id="alert"></div>
 <h2 class=uk-title><%= title.title %></h2>
 <p class="uk-text-meta"><%= title.entries.size %> entries found</p>
 <div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
   <%- title.entries.each_with_index do |e, i| -%>
     <div>
-      <a class="acard" href="/reader/<%= title.title %>/<%= e.title %>">
-        <div class="uk-card uk-card-default">
-            <div class="uk-card-media-top">
-              <img src="<%= e.cover_url %>" alt="">
-            </div>
-            <div class="uk-card-body">
-              <div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
-              <h3 class="uk-card-title"><%= e.title %></h3>
-            </div>
-        </div>
+      <a class="acard">
+        <div class="uk-card uk-card-default" onclick="showModal('<%= e.title %>', '<%= e.zip_path %>', '<%= e.pages %>', <%= (percentage[i] * 100).round(1) %>, '<%= title.title %>', '<%= e.title %>')">
+          <div class="uk-card-media-top">
+            <img src="<%= e.cover_url %>" alt="">
+          </div>
+          <div class="uk-card-body">
+            <div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
+            <h3 class="uk-card-title"><%= e.title %></h3>
+          </div>
+      </div>
       </a>
     </div>
   <%- end -%>
 </div>
+
+<div id="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">
+      <h3 class="uk-modal-title" id="modal-title"></h3>
+      <p class="uk-text-meta" id="path-text" style="margin-bottom:0"></p>
+      <p class="uk-text-meta" id="pages-text" style="margin-top:0"></p>
+    </div>
+    <div class="uk-modal-body">
+      <p>Read</p>
+      <p uk-margin>
+        <a id="beginning-btn" class="uk-button uk-button-default">From beginning</a>
+        <a id="continue-btn" class="uk-button uk-button-primary"></a>
+      </p>
+      <p>Progress</p>
+      <p uk-margin>
+        <button id="read-btn" class="uk-button uk-button-default">Mark as read (100%)</button>
+        <button id="unread-btn" class="uk-button uk-button-default">Mark as unread (0%)</button>
+      </p>
+    </div>
+  </div>
+</div>
+
+<% content_for "script" do %>
+<script src="/js/title.js"></script>
+<% end %>
diff --git a/src/views/user-edit.ecr b/src/views/user-edit.ecr
index 0d168b5..8fec3ba 100644
--- a/src/views/user-edit.ecr
+++ b/src/views/user-edit.ecr
@@ -40,28 +40,16 @@
   <input type="submit" value="Save" class="uk-button uk-button-primary">
 </form>
 
-
 <% content_for "script" do %>
 <script>
-  $(function(){
-    var target = '/admin/user/edit';
-    <%- if !new_user -%>
-      target += '/<%= username %>';
-    <%- end -%>
-    $('form').attr('action', target);
-
-    function alert(level, text) {
-      hideAlert();
-      var html = '<div class="uk-alert-' + level + '" uk-alert><a class="uk-alert-close" uk-close></a><p>' + text + '</p></div>';
-      $('#alert').append(html);
-    }
-    function hideAlert() {
-      $('#alert').empty();
-    }
-
+  var username;
+  var error;
+  <%- if !new_user -%>
+    username = '/<%= username %>';
+  <%- end -%>
     <%- if error -%>
-      alert('danger', '<%= error %>');
-    <%- end -%>
-  });
+    error = '<%= error %>';
+  <%- end -%>
 </script>
+<script src="/js/user-edit.js"></script>
 <% end %>
diff --git a/src/views/user.ecr b/src/views/user.ecr
index 0f006a8..11e62d8 100644
--- a/src/views/user.ecr
+++ b/src/views/user.ecr
@@ -27,25 +27,5 @@
 
 
 <% content_for "script" do %>
-<script>
-    function alert(level, text) {
-      hideAlert();
-      var html = '<div class="uk-alert-' + level + '" uk-alert><a class="uk-alert-close" uk-close></a><p>' + text + '</p></div>';
-      $('#alert').append(html);
-    }
-    function hideAlert() {
-      $('#alert').empty();
-    }
-    function remove(username) {
-      $.post('/api/admin/user/delete/' + username, function(data) {
-        if (data.success) {
-          location.reload();
-        }
-        else {
-          error = data.error;
-          alert('danger', error);
-        }
-      });
-    }
-</script>
+<script src="/js/user.js"></script>
 <% end %>