diff --git a/public/js/app.js b/public/js/app.js
index d3fa0a69..48f1185d 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -135,9 +135,9 @@ function updateLogPlayModalButtonState() {
 }
 
 document.getElementById('logPlayModalSearchInput').addEventListener('keypress', loadLogModalSearchResultsOnEnterPress);
-
 function loadLogModalSearchResultsOnEnterPress(event) {
-    if (event.key === "Enter") {
+    // 13=enter, works better to check the key code because the key is named differently on mobile
+    if (event.keyCode === 13) {
         searchTmdbWithLogModalSearchInput()
     }
 }
@@ -197,9 +197,9 @@ function logMovie(context) {
 }
 
 async function showLogPlayModalWithSpecificMovie(tmdbId, movieTitle) {
-    var myModal = new bootstrap.Modal(document.getElementById('logPlayModal'), {
+    const myModal = new bootstrap.Modal(document.getElementById('logPlayModal'), {
         keyboard: false
-    })
+    });
 
     const rating = await fetchRating(tmdbId)
     setRatingStars('logPlayModal', rating)
diff --git a/templates/component/movie-modal-edit-watch-date.html.twig b/templates/component/modal-edit-watch-date.html.twig
similarity index 100%
rename from templates/component/movie-modal-edit-watch-date.html.twig
rename to templates/component/modal-edit-watch-date.html.twig
diff --git a/templates/component/modal-log-play.html.twig b/templates/component/modal-log-play.html.twig
new file mode 100644
index 00000000..91ddefc4
--- /dev/null
+++ b/templates/component/modal-log-play.html.twig
@@ -0,0 +1,87 @@
+{% if loggedIn == true %}
+    <div class="modal fade" id="logPlayModal" tabindex="-1" role="dialog" data-bs-backdrop="static" aria-labelledby="logPlayModal" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="logPlayModalTitle">Log play</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div id="logPlayModalSearchDiv">
+                        <div class="input-group">
+                            <input type="text" class="form-control" placeholder="Search" value="{{ (searchTerm is null) ? '' : searchTerm }}" id="logPlayModalSearchInput">
+                            <button class="btn btn-primary"
+                                    type="submit"
+                                    onclick="searchTmdbWithLogModalSearchInput()"
+                                    id="logPlayModalSearchButton"
+                                    disabled>
+                                <i class="bi bi-search"></i>
+                            </button>
+                        </div>
+
+
+                        <div class="alert alert-danger d-none" role="alert" id="logPlayModalSearchErrorAlert" style="margin-top: 1rem;margin-bottom: 0">
+                            Something went wrong. Please try again.
+                        </div>
+                        <div class="alert alert-secondary d-none" role="alert" id="logPlayModalSearchNoResultAlert" style="margin-top: 1rem;margin-bottom: 0">
+                            No search results...
+                        </div>
+                        <div class="text-center d-none" style="margin-top: 1rem;margin-bottom: 0" id="logPlayModalSearchSpinner">
+                            <div class="spinner-border" role="status">
+                                <span class="visually-hidden">Loading...</span>
+                            </div>
+                        </div>
+                        <ul class="list-group" id="logPlayModalSearchResultList"></ul>
+                    </div>
+
+                    <div class="d-none" id="logPlayModalWatchDateDiv">
+                        <input id="logPlayModalTmdbIdInput" hidden>
+
+                        <div class="input-group" id="watchDateGroup">
+                            <i class="bi bi-calendar-date input-group-text"></i>
+                            <input type="text"
+                                   class="datepicker_input form-control"
+                                   placeholder="Watch date"
+                                   aria-label="Watch date"
+                                   name="watchDate"
+                                   id="logPlayModalWatchDateInput"
+                                   required
+                                   onfocusout="validateWatchDate('logPlayModal', this.value)">
+                            <div class="invalid-feedback" id="watchDateValidationRequiredErrorMessage" style="padding-bottom: 0;margin-bottom: 0">
+                                Watch date is required!
+                            </div>
+                            <div class="invalid-feedback" id="watchDateValidationFormatErrorMessage" style="padding-bottom: 0;margin-bottom: 0">
+                                Watch date format is invalid!
+                            </div>
+                        </div>
+                        <div class="fw-light" id="logPlayModalRatingStars"
+                             style="color: rgb(255, 193, 7);
+                                    font-size: 1.5rem;
+                                    margin-top: 0.5rem;
+                                    cursor:pointer;
+                                    border-top-right-radius: .375rem!important;
+                                    border-bottom-right-radius: .375rem">
+                            <span id="ratingStarsSpan">
+                                {% for i in 1..10 %}
+                                    <i class="bi bi-star" data-value="{{ i }}" id="logPlayModalRatingStar{{ i }}" onclick="updateRatingStars('logPlayModal', this)"></i>
+                                {% endfor %}
+                            </span>
+                        </div>
+                        <div class="input-group" style="margin-top: 0.5rem;">
+                            <i class="input-group-text"><i class="bi bi-chat-square-text"></i></i>
+                            <textarea class="form-control" rows="1" aria-label="Comment" id="logPlayModalCommentInput" placeholder="Comment"></textarea>
+                        </div>
+                    </div>
+
+                    <div class="alert alert-danger d-none" role="alert" id="logPlayModalLogErrorAlert" style="margin-top: 1rem;margin-bottom: 0">
+                        Could not log play. Please try again.
+                    </div>
+                </div>
+                <div class="modal-footer d-none" id="logPlayModalFooter">
+                    <button type="submit" class="btn btn-secondary" onclick="backToLogModalSearchResults()">Back</button>
+                    <button type="submit" class="btn btn-primary" onclick="logMovie('logPlayModal')">Log play</button>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endif %}
diff --git a/templates/component/movie-modal-more.html.twig b/templates/component/modal-more-options.html.twig
similarity index 100%
rename from templates/component/movie-modal-more.html.twig
rename to templates/component/modal-more-options.html.twig
diff --git a/templates/component/navbar.html.twig b/templates/component/navbar.html.twig
index d4bb4022..2b743152 100644
--- a/templates/component/navbar.html.twig
+++ b/templates/component/navbar.html.twig
@@ -53,90 +53,4 @@
     </div>
 </nav>
 
-{% if loggedIn == true %}
-    <div class="modal fade" id="logPlayModal" tabindex="-1" role="dialog" aria-labelledby="logPlayModal" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="logPlayModalTitle">Log play</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <div id="logPlayModalSearchDiv">
-                        <div class="input-group">
-                            <input type="text" class="form-control" placeholder="Search" value="{{ (searchTerm is null) ? '' : searchTerm }}" id="logPlayModalSearchInput">
-                            <button class="btn btn-primary"
-                                    type="submit"
-                                    onclick="searchTmdbWithLogModalSearchInput()"
-                                    id="logPlayModalSearchButton"
-                                    disabled>
-                                <i class="bi bi-search"></i>
-                            </button>
-                        </div>
-
-
-                        <div class="alert alert-danger d-none" role="alert" id="logPlayModalSearchErrorAlert" style="margin-top: 1rem;margin-bottom: 0">
-                            Something went wrong. Please try again.
-                        </div>
-                        <div class="alert alert-secondary d-none" role="alert" id="logPlayModalSearchNoResultAlert" style="margin-top: 1rem;margin-bottom: 0">
-                            No search results...
-                        </div>
-                        <div class="text-center d-none" style="margin-top: 1rem;margin-bottom: 0" id="logPlayModalSearchSpinner">
-                            <div class="spinner-border" role="status">
-                                <span class="visually-hidden">Loading...</span>
-                            </div>
-                        </div>
-                        <ul class="list-group" id="logPlayModalSearchResultList"></ul>
-                    </div>
-
-                    <div class="d-none" id="logPlayModalWatchDateDiv">
-                        <input id="logPlayModalTmdbIdInput" hidden>
-
-                        <div class="input-group" id="watchDateGroup">
-                            <i class="bi bi-calendar-date input-group-text"></i>
-                            <input type="text"
-                                   class="datepicker_input form-control"
-                                   placeholder="Watch date"
-                                   aria-label="Watch date"
-                                   name="watchDate"
-                                   id="logPlayModalWatchDateInput"
-                                   required
-                                   onfocusout="validateWatchDate('logPlayModal', this.value)">
-                            <div class="invalid-feedback" id="watchDateValidationRequiredErrorMessage" style="padding-bottom: 0;margin-bottom: 0">
-                                Watch date is required!
-                            </div>
-                            <div class="invalid-feedback" id="watchDateValidationFormatErrorMessage" style="padding-bottom: 0;margin-bottom: 0">
-                                Watch date format is invalid!
-                            </div>
-                        </div>
-                        <div class="fw-light" id="logPlayModalRatingStars"
-                             style="color: rgb(255, 193, 7);
-                                    font-size: 1.5rem;
-                                    margin-top: 0.5rem;
-                                    cursor:pointer;
-                                    border-top-right-radius: .375rem!important;
-                                    border-bottom-right-radius: .375rem">
-                            <span id="ratingStarsSpan">
-                                {% for i in 1..10 %}
-                                    <i class="bi bi-star" data-value="{{ i }}" id="logPlayModalRatingStar{{ i }}" onclick="updateRatingStars('logPlayModal', this)"></i>
-                                {% endfor %}
-                            </span>
-                        </div>
-                        <div class="input-group" style="margin-top: 0.5rem;">
-                            <i class="input-group-text"><i class="bi bi-chat-square-text"></i></i>
-                            <textarea class="form-control" rows="1" aria-label="Comment" id="logPlayModalCommentInput" placeholder="Comment"></textarea>
-                        </div>
-                    </div>
-
-                    <div class="alert alert-danger d-none" role="alert" id="logPlayModalLogErrorAlert" style="margin-top: 1rem;margin-bottom: 0">
-                        Could not log play. Please try again.
-                    </div>
-                </div>
-                <div class="modal-footer d-none" id="logPlayModalFooter">
-                    <button type="submit" class="btn btn-secondary" onclick="backToLogModalSearchResults()">Back</button>
-                    <button type="submit" class="btn btn-primary" onclick="logMovie('logPlayModal')">Log play</button>
-                </div>
-            </div>
-        </div>
-    </div>
-{% endif %}
+{{ include('component/modal-log-play.html.twig') }}
diff --git a/templates/page/movie.html.twig b/templates/page/movie.html.twig
index 498cd2b5..a06e2166 100644
--- a/templates/page/movie.html.twig
+++ b/templates/page/movie.html.twig
@@ -151,8 +151,8 @@
                 </div>
             </div>
 
-            {{ include('component/movie-modal-more.html.twig') }}
-            {{ include('component/movie-modal-edit-watch-date.html.twig') }}
+            {{ include('component/modal-edit-watch-date.html.twig') }}
+            {{ include('component/modal-more-options.html.twig') }}
         {% endif %}
 
         {# --- Tagline --- #}