diff --git a/bookwyrm/forms.py b/bookwyrm/forms.py
index 7ba7bd97b..b9ff59c2e 100644
--- a/bookwyrm/forms.py
+++ b/bookwyrm/forms.py
@@ -478,3 +478,19 @@ class SortListForm(forms.Form):
             ("descending", _("Descending")),
         ),
     )
+
+
+class ReadThroughForm(CustomForm):
+    def clean(self):
+        """make sure the email isn't in use by a registered user"""
+        cleaned_data = super().clean()
+        start_date = cleaned_data.get("start_date")
+        finish_date = cleaned_data.get("finish_date")
+        if start_date > finish_date:
+            self.add_error(
+                "finish_date", _("Reading finish date cannot be before start date.")
+            )
+
+    class Meta:
+        model = models.ReadThrough
+        fields = ["user", "book", "start_date", "finish_date"]
diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html
index 19dbccbd6..e4d13007c 100644
--- a/bookwyrm/templates/book/book.html
+++ b/bookwyrm/templates/book/book.html
@@ -237,29 +237,21 @@
                     <h2 class="title is-5">{% trans "Your reading activity" %}</h2>
                     </div>
                     <div class="column is-narrow">
-                        {% trans "Add read dates" as button_text %}
-                        {% include 'snippets/toggle/open_button.html' with text=button_text icon_with_text="plus" class="is-small" controls_text="add_readthrough" focus="add_readthrough_focus_" %}
+                        <button class="button is-small" data-modal-open="add-readthrough">
+                            <span class="icon icon-plus m-mobile-0" aria-hidden="true"></span>
+                            <span class="is-sr-only-mobile">
+                                {% trans "Add read dates" %}
+                            </span>
+                        </button>
                     </div>
                 </header>
-                <section class="is-hidden box" id="add_readthrough">
-                    <form name="add-readthrough" action="/create-readthrough" method="post">
-                        {% include 'snippets/readthrough_form.html' with readthrough=None %}
-                        <div class="field is-grouped">
-                            <div class="control">
-                                <button class="button is-primary" type="submit">{% trans "Create" %}</button>
-                            </div>
-                            <div class="control">
-                                {% trans "Cancel" as button_text %}
-                                {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="add_readthrough" %}
-                            </div>
-                        </div>
-                    </form>
-                </section>
+                {% include "readthrough/readthrough_modal.html" with id="add-readthrough" %}
+
                 {% if not readthroughs.exists %}
                 <p>{% trans "You don't have any reading activity for this book." %}</p>
                 {% endif %}
                 {% for readthrough in readthroughs %}
-                {% include 'book/readthrough.html' with readthrough=readthrough %}
+                {% include 'readthrough/readthrough_list.html' with readthrough=readthrough %}
                 {% endfor %}
             </section>
             <hr aria-hidden="true">
diff --git a/bookwyrm/templates/book/delete_readthrough_modal.html b/bookwyrm/templates/readthrough/delete_readthrough_modal.html
similarity index 100%
rename from bookwyrm/templates/book/delete_readthrough_modal.html
rename to bookwyrm/templates/readthrough/delete_readthrough_modal.html
diff --git a/bookwyrm/templates/readthrough/readthrough.html b/bookwyrm/templates/readthrough/readthrough.html
new file mode 100644
index 000000000..0b42017e6
--- /dev/null
+++ b/bookwyrm/templates/readthrough/readthrough.html
@@ -0,0 +1,15 @@
+{% extends 'layout.html' %}
+{% load i18n %}
+{% load utilities %}
+
+{% block title %}
+{% blocktrans trimmed with title=book|book_title %}
+Update read dates for "<em>{{ title }}</em>"
+{% endblocktrans %}
+{% endblock %}
+
+{% block content %}
+
+{% include "readthrough/readthrough_modal.html" with book=book active=True static=True %}
+
+{% endblock %}
diff --git a/bookwyrm/templates/snippets/readthrough_form.html b/bookwyrm/templates/readthrough/readthrough_form.html
similarity index 94%
rename from bookwyrm/templates/snippets/readthrough_form.html
rename to bookwyrm/templates/readthrough/readthrough_form.html
index 295ad7c6e..1558dada4 100644
--- a/bookwyrm/templates/snippets/readthrough_form.html
+++ b/bookwyrm/templates/readthrough/readthrough_form.html
@@ -4,6 +4,7 @@
 {% csrf_token %}
 <input type="hidden" name="id" value="{{ readthrough.id }}">
 <input type="hidden" name="book" value="{{ book.id }}">
+<input type="hidden" name="user" value="{{ request.user.id }}">
 <div class="field">
     <label class="label" tabindex="0" id="add_readthrough_focus_{{ readthrough.id }}" for="id_start_date_{{ readthrough.id }}">
         {% trans "Started reading" %}
diff --git a/bookwyrm/templates/book/readthrough.html b/bookwyrm/templates/readthrough/readthrough_list.html
similarity index 77%
rename from bookwyrm/templates/book/readthrough.html
rename to bookwyrm/templates/readthrough/readthrough_list.html
index e711ecd00..9f9db9a55 100644
--- a/bookwyrm/templates/book/readthrough.html
+++ b/bookwyrm/templates/readthrough/readthrough_list.html
@@ -3,7 +3,7 @@
 {% load tz %}
 {% load utilities %}
 <div class="content">
-    <div id="hide_edit_readthrough_{{ readthrough.id }}" class="box is-shadowless has-background-white-bis">
+    <div class="box is-shadowless has-background-white-bis">
         <div class="columns">
             <div class="column">
                 {% trans "Progress Updates:" %}
@@ -58,7 +58,11 @@
                 <div class="field has-addons">
                     <div class="control">
                         {% trans "Edit read dates" as button_text %}
-                        {% include 'snippets/toggle/toggle_button.html' with class="is-small" text=button_text icon="pencil" controls_text="edit_readthrough" controls_uid=readthrough.id focus="edit_readthrough" %}
+                        <button class="button is-small" type="button" data-modal-open="edit_readthrough_{{ readthrough.id }}">
+                            <span class="icon icon-pencil" title="{{ button_text }}">
+                                <span class="is-sr-only">{{ button_text }}</span>
+                            </span>
+                        </button>
                     </div>
                     <div class="control">
                         {% trans "Delete these read dates" as button_text %}
@@ -74,16 +78,7 @@
     </div>
 </div>
 
-<div class="box is-hidden" id="edit_readthrough_{{ readthrough.id }}" tabindex="0">
-    <h3 class="title is-5">{% trans "Edit read dates" %}</h3>
-    <form name="edit-readthrough" action="/edit-readthrough" method="post">
-        {% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
-        <div class="field is-grouped">
-            <button class="button is-primary" type="submit">{% trans "Save" %}</button>
-            {% trans "Cancel" as button_text %}
-            {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="edit_readthrough" controls_uid=readthrough.id %}
-        </div>
-    </form>
-</div>
-{% join "delete_readthrough" readthrough.id as modal_id %}
-{% include 'book/delete_readthrough_modal.html' with id=modal_id %}
+{% join "edit_readthrough" readthrough.id as edit_modal_id %}
+{% include "readthrough/readthrough_modal.html" with readthrough=readthrough id=edit_modal_id %}
+{% join "delete_readthrough" readthrough.id as delete_modal_id %}
+{% include 'readthrough/delete_readthrough_modal.html' with id=delete_modal_id %}
diff --git a/bookwyrm/templates/readthrough/readthrough_modal.html b/bookwyrm/templates/readthrough/readthrough_modal.html
new file mode 100644
index 000000000..07d27b664
--- /dev/null
+++ b/bookwyrm/templates/readthrough/readthrough_modal.html
@@ -0,0 +1,80 @@
+{% extends "components/modal.html" %}
+{% load i18n %}
+{% load utilities %}
+
+{% block modal-title %}
+
+{% if readthrough %}
+{% blocktrans trimmed with title=book|book_title %}
+    Update read dates for "<em>{{ title }}</em>"
+{% endblocktrans %}
+{% else %}
+{% blocktrans trimmed with title=book|book_title %}
+    Add read dates for "<em>{{ title }}</em>"
+{% endblocktrans %}
+{% endif %}
+
+{% endblock %}
+
+{% block modal-form-open %}
+<form name="add-readthrough-{{ readthrough.id }}" action="/create-readthrough" method="post">
+{% endblock %}
+
+{% block modal-body %}
+{% csrf_token %}
+
+<input type="hidden" name="id" value="{{ readthrough.id }}">
+<input type="hidden" name="book" value="{{ book.id }}">
+<input type="hidden" name="user" value="{{ request.user.id }}">
+<div class="field">
+    <label class="label" tabindex="0" id="add_readthrough_focus_{{ readthrough.id }}" for="id_start_date_{{ readthrough.id }}">
+        {% trans "Started reading" %}
+    </label>
+    {% firstof form.start_date.value readthrough.start_date|date:"Y-m-d" as value %}
+    <input
+        type="date"
+        name="start_date"
+        class="input"
+        id="id_start_date_{{ readthrough.id }}"
+        value="{{ value }}"
+        aria-describedby="desc_start_date"
+    >
+    {% include 'snippets/form_errors.html' with errors_list=form.start_date.errors id="desc_start_date" %}
+</div>
+
+{# Only show progress for editing existing readthroughs #}
+{% if readthrough.id and not readthrough.finish_date %}
+{% join "id_progress" readthrough.id as field_id %}
+<label class="label" for="{{ field_id }}">
+    {% trans "Progress" %}
+</label>
+{% include "snippets/progress_field.html" with id=field_id %}
+{% endif %}
+
+<div class="field">
+    <label class="label" for="id_finish_date_{{ readthrough.id }}">
+        {% trans "Finished reading" %}
+    </label>
+    {% firstof form.finish_date.value readthrough.finish_date|date:"Y-m-d" as value %}
+    <input
+        type="date"
+        name="finish_date"
+        class="input"
+        id="id_finish_date_{{ readthrough.id }}"
+        value="{{ value }}"
+        aria-describedby="desc_finish_date"
+    >
+    {% include 'snippets/form_errors.html' with errors_list=form.finish_date.errors id="desc_finish_date" %}
+</div>
+{% endblock %}
+
+{% block modal-footer %}
+<button class="button is-primary" type="submit">{% trans "Save" %}</button>
+{% if not static %}
+<button type="button" class="button" data-modal-close>{% trans "Cancel" %}</button>
+{% endif %}
+{% endblock %}
+
+{% block modal-form-close %}
+</form>
+{% endblock %}
diff --git a/bookwyrm/tests/views/test_reading.py b/bookwyrm/tests/views/test_reading.py
index 0d6c13aa3..759866947 100644
--- a/bookwyrm/tests/views/test_reading.py
+++ b/bookwyrm/tests/views/test_reading.py
@@ -231,11 +231,12 @@ class ReadingViews(TestCase):
                 "finish_date": "2018-03-07",
                 "book": self.book.id,
                 "id": "",
+                "user": self.local_user.id,
             },
         )
         request.user = self.local_user
 
-        views.create_readthrough(request)
+        views.ReadThrough.as_view()(request)
         readthrough = models.ReadThrough.objects.get()
         self.assertEqual(readthrough.start_date.year, 2017)
         self.assertEqual(readthrough.start_date.month, 1)
diff --git a/bookwyrm/tests/views/test_readthrough.py b/bookwyrm/tests/views/test_readthrough.py
index 6697c0e07..f4ca3af61 100644
--- a/bookwyrm/tests/views/test_readthrough.py
+++ b/bookwyrm/tests/views/test_readthrough.py
@@ -41,10 +41,8 @@ class ReadThrough(TestCase):
         self.assertEqual(self.edition.readthrough_set.count(), 0)
 
         self.client.post(
-            "/reading-status/start/{}".format(self.edition.id),
-            {
-                "start_date": "2020-11-27",
-            },
+            f"/reading-status/start/{self.edition.id}",
+            {"start_date": "2020-11-27"},
         )
 
         readthroughs = self.edition.readthrough_set.all()
@@ -62,10 +60,8 @@ class ReadThrough(TestCase):
         self.assertEqual(self.edition.readthrough_set.count(), 0)
 
         self.client.post(
-            "/reading-status/start/{}".format(self.edition.id),
-            {
-                "start_date": "2020-11-27",
-            },
+            f"/reading-status/start/{self.edition.id}",
+            {"start_date": "2020-11-27"},
         )
 
         readthroughs = self.edition.readthrough_set.all()
diff --git a/bookwyrm/urls.py b/bookwyrm/urls.py
index 331992257..7a95103df 100644
--- a/bookwyrm/urls.py
+++ b/bookwyrm/urls.py
@@ -457,7 +457,11 @@ urlpatterns = [
     # reading progress
     re_path(r"^edit-readthrough/?$", views.edit_readthrough, name="edit-readthrough"),
     re_path(r"^delete-readthrough/?$", views.delete_readthrough),
-    re_path(r"^create-readthrough/?$", views.create_readthrough),
+    re_path(
+        r"^create-readthrough/?$",
+        views.ReadThrough.as_view(),
+        name="create-readthrough",
+    ),
     re_path(r"^delete-progressupdate/?$", views.delete_progressupdate),
     # shelve actions
     re_path(
diff --git a/bookwyrm/views/__init__.py b/bookwyrm/views/__init__.py
index 35058ffab..4157e75b9 100644
--- a/bookwyrm/views/__init__.py
+++ b/bookwyrm/views/__init__.py
@@ -88,7 +88,7 @@ from .list import Lists, SavedLists, List, Curate, UserLists
 from .list import save_list, unsave_list, delete_list, unsafe_embed_list
 from .notifications import Notifications
 from .outbox import Outbox
-from .reading import create_readthrough, delete_readthrough, delete_progressupdate
+from .reading import ReadThrough, delete_readthrough, delete_progressupdate
 from .reading import ReadingStatus
 from .rss_feed import RssFeed
 from .search import Search
diff --git a/bookwyrm/views/reading.py b/bookwyrm/views/reading.py
index fd12dc0fe..d90c0e9dc 100644
--- a/bookwyrm/views/reading.py
+++ b/bookwyrm/views/reading.py
@@ -9,16 +9,16 @@ from django.utils.decorators import method_decorator
 from django.views import View
 from django.views.decorators.http import require_POST
 
-from bookwyrm import models
+from bookwyrm import forms, models
 from bookwyrm.views.shelf.shelf_actions import unshelve
 from .status import CreateStatus
 from .helpers import get_edition, handle_reading_status, is_api_request
 from .helpers import load_date_in_user_tz_as_utc
 
 
-@method_decorator(login_required, name="dispatch")
 # pylint: disable=no-self-use
 # pylint: disable=too-many-return-statements
+@method_decorator(login_required, name="dispatch")
 class ReadingStatus(View):
     """consider reading a book"""
 
@@ -115,6 +115,45 @@ class ReadingStatus(View):
         return redirect(referer)
 
 
+@method_decorator(login_required, name="dispatch")
+class ReadThrough(View):
+    """Add new read dates"""
+
+    def get(self, request, book_id, readthrough_id=None):
+        """standalone form in case of errors"""
+        book = get_object_or_404(models.Edition, id=book_id)
+        form = forms.ReadThroughForm()
+        data = {"form": form, "book": book}
+        if readthrough_id:
+            data["readthrough"] = get_object_or_404(
+                models.ReadThrough, id=readthrough_id
+            )
+        return TemplateResponse(request, "readthrough/readthrough.html", data)
+
+    def post(self, request):
+        """can't use the form normally because the dates are too finnicky"""
+        book_id = request.POST.get("book")
+        normalized_post = request.POST.copy()
+
+        normalized_post["start_date"] = load_date_in_user_tz_as_utc(
+            request.POST.get("start_date"), request.user
+        )
+        normalized_post["finish_date"] = load_date_in_user_tz_as_utc(
+            request.POST.get("finish_date"), request.user
+        )
+        form = forms.ReadThroughForm(request.POST)
+        if not form.is_valid():
+            book = get_object_or_404(models.Edition, id=book_id)
+            data = {"form": form, "book": book}
+            if request.POST.get("id"):
+                data["readthrough"] = get_object_or_404(
+                    models.ReadThrough, id=request.POST.get("id")
+                )
+            return TemplateResponse(request, "readthrough/readthrough.html", data)
+        form.save()
+        return redirect("book", book_id)
+
+
 @transaction.atomic
 def update_readthrough_on_shelve(
     user, annotated_book, status, start_date=None, finish_date=None
@@ -156,27 +195,6 @@ def delete_readthrough(request):
     return redirect(request.headers.get("Referer", "/"))
 
 
-@login_required
-@require_POST
-def create_readthrough(request):
-    """can't use the form because the dates are too finnicky"""
-    book = get_object_or_404(models.Edition, id=request.POST.get("book"))
-
-    start_date = load_date_in_user_tz_as_utc(
-        request.POST.get("start_date"), request.user
-    )
-    finish_date = load_date_in_user_tz_as_utc(
-        request.POST.get("finish_date"), request.user
-    )
-    models.ReadThrough.objects.create(
-        user=request.user,
-        book=book,
-        start_date=start_date,
-        finish_date=finish_date,
-    )
-    return redirect("book", book.id)
-
-
 @login_required
 @require_POST
 def delete_progressupdate(request):
diff --git a/bookwyrm/views/status.py b/bookwyrm/views/status.py
index bb69d30c0..5dc8e8fa0 100644
--- a/bookwyrm/views/status.py
+++ b/bookwyrm/views/status.py
@@ -159,6 +159,7 @@ def update_progress(request, book_id):  # pylint: disable=unused-argument
 @require_POST
 def edit_readthrough(request):
     """can't use the form because the dates are too finnicky"""
+    # TODO: remove this, it duplicates the code in the ReadThrough view
     readthrough = get_object_or_404(models.ReadThrough, id=request.POST.get("id"))
     readthrough.raise_not_editable(request.user)