diff --git a/bookwyrm/static/js/bookwyrm.js b/bookwyrm/static/js/bookwyrm.js
index 6d21c207..aa9c9cdc 100644
--- a/bookwyrm/static/js/bookwyrm.js
+++ b/bookwyrm/static/js/bookwyrm.js
@@ -427,6 +427,8 @@ let BookWyrm = new (class {
 
         // Helper functions
         function handleModalOpen(modalElement) {
+            event.preventDefault();
+
             htmlElement.classList.add("is-clipped");
             modalElement.classList.add("is-active");
             modalElement.getElementsByClassName("modal-card")[0].focus();
diff --git a/bookwyrm/templates/author/sync_modal.html b/bookwyrm/templates/author/sync_modal.html
index f171e965..a6e032cb 100644
--- a/bookwyrm/templates/author/sync_modal.html
+++ b/bookwyrm/templates/author/sync_modal.html
@@ -1,4 +1,4 @@
-{% extends 'components/new_modal.html' %}
+{% extends 'components/modal.html' %}
 {% load i18n %}
 
 {% block modal-title %}
diff --git a/bookwyrm/templates/book/cover_add_modal.html b/bookwyrm/templates/book/cover_add_modal.html
index 855e52f4..e8207ff4 100644
--- a/bookwyrm/templates/book/cover_add_modal.html
+++ b/bookwyrm/templates/book/cover_add_modal.html
@@ -1,4 +1,4 @@
-{% extends 'components/new_modal.html' %}
+{% extends 'components/modal.html' %}
 {% load i18n %}
 
 {% block modal-title %}
diff --git a/bookwyrm/templates/book/delete_readthrough_modal.html b/bookwyrm/templates/book/delete_readthrough_modal.html
index 217d96d8..5b3a74cc 100644
--- a/bookwyrm/templates/book/delete_readthrough_modal.html
+++ b/bookwyrm/templates/book/delete_readthrough_modal.html
@@ -1,4 +1,4 @@
-{% extends 'components/new_modal.html' %}
+{% extends 'components/modal.html' %}
 {% load i18n %}
 
 {% block modal-title %}{% trans "Delete these read dates?" %}{% endblock %}
diff --git a/bookwyrm/templates/book/sync_modal.html b/bookwyrm/templates/book/sync_modal.html
index b0a8cf48..6e5df0c0 100644
--- a/bookwyrm/templates/book/sync_modal.html
+++ b/bookwyrm/templates/book/sync_modal.html
@@ -1,4 +1,4 @@
-{% extends 'components/new_modal.html' %}
+{% extends 'components/modal.html' %}
 {% load i18n %}
 
 {% block modal-title %}
diff --git a/bookwyrm/templates/components/modal.html b/bookwyrm/templates/components/modal.html
index 2eabd2e2..3e1cc759 100644
--- a/bookwyrm/templates/components/modal.html
+++ b/bookwyrm/templates/components/modal.html
@@ -1,40 +1,33 @@
 {% load i18n %}
-<div
-    role="dialog"
-    class="modal {% if active %}is-active{% else %}is-hidden{% endif %}"
-    id="{{ controls_text }}_{{ controls_uid }}"
-    aria-labelledby="modal_card_title_{{ controls_text }}_{{ controls_uid }}"
-    aria-modal="true"
->
-    {# @todo Implement focus traps to prevent tabbing out of the modal. #}
-    <div class="modal-background"></div>
-    {% trans "Close" as label %}
-    <div class="modal-card">
-        <header class="modal-card-head" tabindex="0" id="modal_title_{{ controls_text }}_{{ controls_uid }}">
-            <h2 class="modal-card-title is-flex-shrink-1" id="modal_card_title_{{ controls_text }}_{{ controls_uid }}">
+
+<div class="modal {% if active %}is-active{% endif %}" id="{{ id }}">
+    <div class="modal-background" data-modal-close></div>
+    <div class="modal-card" role="dialog" aria-modal="true" tabindex="-1" aria-described-by="{{ id }}_header">
+        <header class="modal-card-head">
+            <h2 class="modal-card-title mb-0" id="{{ id }}_header">
                 {% block modal-title %}{% endblock %}
             </h2>
-            {% if static %}
-                <a href="/" class="delete">{{ label }}</a>
-            {% else %}
-                {% include 'snippets/toggle/toggle_button.html' with label=label class="delete" nonbutton=True %}
-            {% endif %}
+            <button
+                type="button"
+                class="delete"
+                aria-label="{% trans 'Close' %}"
+                data-modal-close
+            ></button>
         </header>
+
         {% block modal-form-open %}{% endblock %}
-        {% if not no_body %}
         <section class="modal-card-body">
             {% block modal-body %}{% endblock %}
         </section>
-        {% endif %}
         <footer class="modal-card-foot">
             {% block modal-footer %}{% endblock %}
         </footer>
         {% block modal-form-close %}{% endblock %}
     </div>
-    {% if static %}
-        <a href="/" class="modal-close is-large">{{ label }}</a>
-    {% else %}
-        {% include 'snippets/toggle/toggle_button.html' with label=label class="modal-close is-large" nonbutton=True %}
-    {% endif %}
+    <button
+        type="button"
+        class="modal-close is-large"
+        aria-label="{% trans 'Close' %}"
+        data-modal-close
+    ></button>
 </div>
-
diff --git a/bookwyrm/templates/components/new_modal.html b/bookwyrm/templates/components/new_modal.html
deleted file mode 100644
index 8bb3cc58..00000000
--- a/bookwyrm/templates/components/new_modal.html
+++ /dev/null
@@ -1,33 +0,0 @@
-{% load i18n %}
-
-<div class="modal" id="{{ id }}">
-    <div class="modal-background" data-modal-close></div>
-    <div class="modal-card" role="dialog" aria-modal="true" tabindex="-1">
-        <header class="modal-card-head">
-            <h2 class="modal-card-title mb-0">
-                {% block modal-title %}{% endblock %}
-            </h2>
-            <button
-                type="button"
-                class="delete"
-                aria-label="{% trans 'Close' %}"
-                data-modal-close
-            ></button>
-        </header>
-
-        {% block modal-form-open %}{% endblock %}
-        <section class="modal-card-body">
-            {% block modal-body %}{% endblock %}
-        </section>
-        <footer class="modal-card-foot">
-            {% block modal-footer %}{% endblock %}
-        </footer>
-        {% block modal-form-close %}{% endblock %}
-    </div>
-    <button
-        type="button"
-        class="modal-close is-large"
-        aria-label="{% trans 'Close' %}"
-        data-modal-close
-    ></button>
-</div>
diff --git a/bookwyrm/templates/groups/delete_group_modal.html b/bookwyrm/templates/groups/delete_group_modal.html
index 15eea60f..592a861f 100644
--- a/bookwyrm/templates/groups/delete_group_modal.html
+++ b/bookwyrm/templates/groups/delete_group_modal.html
@@ -1,4 +1,4 @@
-{% extends 'components/new_modal.html' %}
+{% extends 'components/modal.html' %}
 {% load i18n %}
 
 {% block modal-title %}{% trans "Delete this group?" %}{% endblock %}
diff --git a/bookwyrm/templates/lists/delete_list_modal.html b/bookwyrm/templates/lists/delete_list_modal.html
index 7861e78c..aad87952 100644
--- a/bookwyrm/templates/lists/delete_list_modal.html
+++ b/bookwyrm/templates/lists/delete_list_modal.html
@@ -1,4 +1,4 @@
-{% extends 'components/new_modal.html' %}
+{% extends 'components/modal.html' %}
 {% load i18n %}
 
 {% block modal-title %}{% trans "Delete this list?" %}{% endblock %}
diff --git a/bookwyrm/templates/snippets/report_modal.html b/bookwyrm/templates/snippets/report_modal.html
index 615f13cc..afd39644 100644
--- a/bookwyrm/templates/snippets/report_modal.html
+++ b/bookwyrm/templates/snippets/report_modal.html
@@ -1,4 +1,4 @@
-{% extends 'components/new_modal.html' %}
+{% extends 'components/modal.html' %}
 {% load i18n %}
 {% load humanize %}
 
diff --git a/bookwyrm/templates/snippets/shelf_selector.html b/bookwyrm/templates/snippets/shelf_selector.html
index f96f48a8..aacaf5a2 100644
--- a/bookwyrm/templates/snippets/shelf_selector.html
+++ b/bookwyrm/templates/snippets/shelf_selector.html
@@ -86,11 +86,14 @@
 </li>
 {% endif %}
 
-{% include 'snippets/reading_modals/want_to_read_modal.html' with book=active_shelf.book controls_text="want_to_read" controls_uid=uuid move_from=current.id refresh=True class="" %}
+{% join "want_to_read" uuid as modal_id %}
+{% include 'snippets/reading_modals/want_to_read_modal.html' with book=active_shelf.book id=modal_id move_from=current.id refresh=True class="" %}
 
-{% include 'snippets/reading_modals/start_reading_modal.html' with book=active_shelf.book controls_text="start_reading" controls_uid=uuid move_from=current.id refresh=True class="" %}
+{% join "start_reading" uuid as modal_id %}
+{% include 'snippets/reading_modals/start_reading_modal.html' with book=active_shelf.book id=modal_id move_from=current.id refresh=True class="" %}
 
-{% include 'snippets/reading_modals/finish_reading_modal.html' with book=active_shelf.book controls_text="finish_reading" controls_uid=uuid  move_from=current.id readthrough=readthrough refresh=True class="" %}
+{% join "finish_reading" uuid as modal_id %}
+{% include 'snippets/reading_modals/finish_reading_modal.html' with book=active_shelf.book id=modal_id  move_from=current.id readthrough=readthrough refresh=True class="" %}
 
 {% endwith %}
 {% endblock %}
diff --git a/bookwyrm/templates/snippets/shelve_button/modal_button.html b/bookwyrm/templates/snippets/shelve_button/modal_button.html
new file mode 100644
index 00000000..a745b4fb
--- /dev/null
+++ b/bookwyrm/templates/snippets/shelve_button/modal_button.html
@@ -0,0 +1,10 @@
+{% load utilities %}
+<form name="fallback_form_{{ 0|uuid }}" method="GET" action="{{ fallback_url }}" autocomplete="off">
+    <button
+        type="submit"
+        class="button {{ class }}"
+        data-modal-open="{{ modal_id }}"
+    >
+        {{ button_text }}
+    </button>
+</form>
diff --git a/bookwyrm/templates/snippets/shelve_button/shelve_button.html b/bookwyrm/templates/snippets/shelve_button/shelve_button.html
index b70ba1b9..38f6be38 100644
--- a/bookwyrm/templates/snippets/shelve_button/shelve_button.html
+++ b/bookwyrm/templates/snippets/shelve_button/shelve_button.html
@@ -6,7 +6,7 @@
 {% with book.id|uuid as uuid %}
 {% active_shelf book as active_shelf %}
 {% latest_read_through book request.user as readthrough %}
-<div class="field has-addons mb-0" data-shelve-button-book="{{ book.id }}">
+<div class="field has-addons mb-0 has-text-weight-normal" data-shelve-button-book="{{ book.id }}">
     {% if switch_mode and active_shelf.book != book %}
     <div class="control">
         {% include 'snippets/switch_edition_button.html' with edition=book size='is-small' %}
@@ -19,13 +19,17 @@
     {% endif %}
 </div>
 
-{% include 'snippets/reading_modals/want_to_read_modal.html' with book=active_shelf.book controls_text="want_to_read" controls_uid=uuid %}
+{% join "want_to_read" uuid as modal_id %}
+{% include 'snippets/reading_modals/want_to_read_modal.html' with book=active_shelf.book id=modal_id class="" %}
 
-{% include 'snippets/reading_modals/start_reading_modal.html' with book=active_shelf.book controls_text="start_reading" controls_uid=uuid %}
+{% join "start_reading" uuid as modal_id %}
+{% include 'snippets/reading_modals/start_reading_modal.html' with book=active_shelf.book id=modal_id class="" %}
 
-{% include 'snippets/reading_modals/finish_reading_modal.html' with book=active_shelf.book controls_text="finish_reading" controls_uid=uuid readthrough=readthrough %}
+{% join "finish_reading" uuid as modal_id %}
+{% include 'snippets/reading_modals/finish_reading_modal.html' with book=active_shelf.book id=modal_id readthrough=readthrough class="" %}
 
-{% include 'snippets/reading_modals/progress_update_modal.html' with book=active_shelf.book controls_text="progress_update" controls_uid=uuid readthrough=readthrough %}
+{% join "progress_update" uuid as modal_id %}
+{% include 'snippets/reading_modals/progress_update_modal.html' with book=active_shelf.book id=modal_id readthrough=readthrough class="" %}
 
 {% endwith %}
 {% endif %}
diff --git a/bookwyrm/templates/snippets/shelve_button/shelve_button_dropdown_options.html b/bookwyrm/templates/snippets/shelve_button/shelve_button_dropdown_options.html
index d418b718..0b36ddbb 100644
--- a/bookwyrm/templates/snippets/shelve_button/shelve_button_dropdown_options.html
+++ b/bookwyrm/templates/snippets/shelve_button/shelve_button_dropdown_options.html
@@ -16,19 +16,22 @@
 
             {% trans "Start reading" as button_text %}
             {% url 'reading-status' 'start' book.id as fallback_url %}
-            {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="start_reading" controls_uid=button_uuid focus="modal_title_start_reading" disabled=is_current fallback_url=fallback_url %}
+            {% join "start_reading" button_uuid as modal_id %}
+            {% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %}
 
         {% elif shelf.identifier == 'read' %}
 
             {% trans "Read" as button_text %}
             {% url 'reading-status' 'finish' book.id as fallback_url %}
-            {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="finish_reading" controls_uid=button_uuid focus="modal_title_finish_reading" disabled=is_current fallback_url=fallback_url %}
+            {% join "finish_reading" button_uuid as modal_id %}
+            {% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %}
 
         {% elif shelf.identifier == 'to-read' %}
 
             {% trans "Want to read" as button_text %}
             {% url 'reading-status' 'want' book.id as fallback_url %}
-            {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="want_to_read" controls_uid=button_uuid focus="modal_title_want_to_read" disabled=is_current fallback_url=fallback_url %}
+            {% join "want_to_read" button_uuid as modal_id %}
+            {% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %}
 
         {% elif shelf.editable %}
 
@@ -47,8 +50,9 @@
 
 {% if readthrough and active_shelf.shelf.identifier != 'read' %}
 <li role="menuitem" class="dropdown-item p-0" data-extra-options>
-    {% trans "Update progress" as button_text %}
-    {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="progress_update" controls_uid=button_uuid focus="modal_title_progress_update" %}
+    <button type="submit" class="button {{ class }}" data-modal-open="progress_update_{{ button_uuid }}">
+        {% trans "Update progress" %}
+    </button>
 </li>
 {% endif %}
 
diff --git a/bookwyrm/templates/snippets/shelve_button/shelve_button_options.html b/bookwyrm/templates/snippets/shelve_button/shelve_button_options.html
index de50b53e..add2a77c 100644
--- a/bookwyrm/templates/snippets/shelve_button/shelve_button_options.html
+++ b/bookwyrm/templates/snippets/shelve_button/shelve_button_options.html
@@ -23,19 +23,22 @@
 
             {% trans "Start reading" as button_text %}
             {% url 'reading-status' 'start' book.id as fallback_url %}
-            {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="start_reading" controls_uid=button_uuid focus="modal_title_start_reading" fallback_url=fallback_url %}
+            {% join "start_reading" button_uuid as modal_id %}
+            {% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %}
 
     {% elif shelf.identifier == 'read' %}
 
             {% trans "Finish reading" as button_text %}
             {% url 'reading-status' 'finish' book.id as fallback_url %}
-            {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="finish_reading" controls_uid=button_uuid focus="modal_title_finish_reading" fallback_url=fallback_url %}
+            {% join "finish_reading" button_uuid as modal_id %}
+            {% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %}
 
     {% elif shelf.identifier == 'to-read' %}
 
             {% trans "Want to read" as button_text %}
             {% url 'reading-status' 'want' book.id as fallback_url %}
-            {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="want_to_read" controls_uid=button_uuid focus="modal_title_want_to_read" fallback_url=fallback_url %}
+            {% join "want_to_read" button_uuid as modal_id %}
+            {% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %}
 
     {% elif shelf.editable %}