diff --git a/src/components/BackButton.vue b/src/components/BackButton.vue
index 6baa387..83594cb 100644
--- a/src/components/BackButton.vue
+++ b/src/components/BackButton.vue
@@ -6,7 +6,7 @@ const goBack = () => router.back()
 </script>
 
 <template>
-  <button class="button is-small is-white back-button" @click="goBack">
+  <a class="btn btn-sm back-button" @click="goBack">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       class="icon icon-tabler icon-tabler-arrow-narrow-left"
@@ -23,6 +23,5 @@ const goBack = () => router.back()
       <line x1="5" y1="12" x2="9" y2="16" />
       <line x1="5" y1="12" x2="9" y2="8" />
     </svg>
-    return
-  </button>
+  </a>
 </template>
diff --git a/src/views/PublicNoteListView.vue b/src/views/PublicNoteListView.vue
index ea5c2c6..e02c80c 100644
--- a/src/views/PublicNoteListView.vue
+++ b/src/views/PublicNoteListView.vue
@@ -58,7 +58,7 @@ const getAlias = (did: string) =>
         </li>
       </ul>
     </div>
-    <BackButton />
+    <BackButton class="back-button" />
   </main>
 </template>
 
@@ -73,7 +73,7 @@ const getAlias = (did: string) =>
     margin-top: 1rem;
   }
 
-  a.back-button {
+  .back-button {
     display: flex;
     gap: 0.5rem;
     align-items: center;