diff --git a/frontend/scss/components/_btns.scss b/frontend/scss/components/_btns.scss
index f05a25c..8541077 100644
--- a/frontend/scss/components/_btns.scss
+++ b/frontend/scss/components/_btns.scss
@@ -1,5 +1,5 @@
 .btn {
-  @apply rounded-md px-3 py-2 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer text-center;
+  @apply inline-block rounded-md px-3 py-2 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer text-center;
 
   &-primary {
     @apply bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600;
diff --git a/templates/index.html.tera b/templates/index.html.tera
index a69fa07..6ef5c9c 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -160,11 +160,11 @@
               {% endfor %}
               {% if cur_user_participates %}
                 <a href="/remove/{{ trip.trip_details_id }}"
-                  class="inline-block rounded-md bg-[#f43f5e] px-3 py-2 text-sm font-semibold text-white hover:bg-[#ff0000] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ff0000] cursor-pointer">Abmelden</a>
+                  class="btn btn-attention btn-fw">Abmelden</a>
               {% endif %}
               {% if trip.max_people > trip.rower | length and trip.cox_id != loggedin_user.id and cur_user_participates == false%}
                 <a href="/join/{{ trip.trip_details_id }}"
-                  class="inline-block rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer">Mitrudern</a>
+                  class="btn btn-primary btn-fw">Mitrudern</a>
               {% endif %}
             </div>
           </div>