diff --git a/assets/css/index.css b/assets/css/index.css
index 5048e37..9c7cae1 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -44,6 +44,10 @@ a {
   margin-left: 0.2rem;
 }
 
+.modal-card-foot.is-right {
+  justify-content: flex-end;
+}
+
 .github-corner:hover .octo-arm {
   animation: octocat-wave 560ms ease-in-out;
 }
diff --git a/assets/js/clear-playlist-modal.js b/assets/js/clear-playlist-modal.js
index c691d17..3bc962c 100644
--- a/assets/js/clear-playlist-modal.js
+++ b/assets/js/clear-playlist-modal.js
@@ -30,9 +30,9 @@ Vue.component('clear-playlist-modal', {
         <p><strong>Do you really want to clear the playlist?</strong></p>
         <p>If you click the clear button, all of tracks in the playlist will be removed.</p>
       </section>
-      <footer class="modal-card-foot">
-        <a class="button is-danger submit-clear-button" @click="onSubmit">Clear</a>
-        <a class="button" @click="close">Cancel</a>
+      <footer class="modal-card-foot is-right">
+      <a class="button" @click="close">Cancel</a>
+      <a class="button is-danger submit-clear-button" @click="onSubmit">Clear</a>
       </footer>
     </div>
   </div>