diff --git a/cards/templatetags/card_badge.py b/cards/templatetags/card_badge.py
index 03584de..b69bdb7 100644
--- a/cards/templatetags/card_badge.py
+++ b/cards/templatetags/card_badge.py
@@ -1,11 +1,13 @@
 from django import template
 from django.template.loader import render_to_string
 from django.utils.safestring import mark_safe
+from django.urls import reverse
 
 register = template.Library()
 
 @register.inclusion_tag("templatetags/card_badge.html")
 def card_badge(card, quantity=None, expanded=False):
+    url = reverse('cards:card_detail', args=[card.pk])
     return {
         'quantity': quantity,
         'style': card.style,
@@ -13,6 +15,7 @@ def card_badge(card, quantity=None, expanded=False):
         'rarity': card.rarity_icon,
         'cardset': card.cardset,
         'expanded': expanded,
+        'url': url,
     }
 
 @register.filter
@@ -20,6 +23,7 @@ def card_badge_inline(card, quantity=None):
     """
     Renders an inline card badge.
     """
+    url = reverse('cards:card_detail', args=[card.pk])
     html = render_to_string("templatetags/card_badge.html", {
         'quantity': quantity,
         'style': card.style,
@@ -27,6 +31,7 @@ def card_badge_inline(card, quantity=None):
         'rarity': card.rarity_icon,
         'cardset': card.cardset,
         'expanded': True,
+        'url': url,
     })
     return mark_safe(html)
 
diff --git a/theme/templates/cards/_card_list.html b/theme/templates/cards/_card_list.html
index 759b29a..62d2184 100644
--- a/theme/templates/cards/_card_list.html
+++ b/theme/templates/cards/_card_list.html
@@ -5,18 +5,14 @@
         <div class="divider">{{ group.group }}</div>
         <div class="flex justify-center flex-wrap gap-2">
             {% for card in group.cards %}
-                <a href="{% url 'cards:card_detail' card.pk %}">
-                    {% card_badge card expanded=True %}
-                </a>
+                {% card_badge card expanded=True %}
             {% endfor %}
         </div>
     {% endfor %}
 {% else %}
     <div class="flex justify-center flex-wrap gap-2">
         {% for card in cards %}
-            <a href="{% url 'cards:card_detail' card.pk %}">
-                {% card_badge card expanded=True %}
-            </a>
+            {% card_badge card expanded=True %}
         {% endfor %}
     </div>
 {% endif %}
diff --git a/theme/templates/home/_card_list.html b/theme/templates/home/_card_list.html
index 95a9025..2669cca 100644
--- a/theme/templates/home/_card_list.html
+++ b/theme/templates/home/_card_list.html
@@ -2,10 +2,7 @@
 {% if cards %}
     <div class="mx-4 grid gap-3 grid-cols-[repeat(auto-fit,minmax(150px,1fr))] justify-items-center">
       {% for card in cards %}
-        <a href="{% url 'cards:card_detail' card.id %}"
-          class="flex justify-between items-center text-primary no-underline">
-          {% card_badge card quantity=card.offer_count expanded=True %}
-        </a>
+        {% card_badge card quantity=card.offer_count expanded=True %}
       {% endfor %}
     </div>
 {% else %}
diff --git a/theme/templatetags/card_badge.html b/theme/templatetags/card_badge.html
index 5dfa30f..f5ae207 100644
--- a/theme/templatetags/card_badge.html
+++ b/theme/templatetags/card_badge.html
@@ -1,26 +1,26 @@
-{% if not expanded %}
-<div class="relative block">
-  <div class="flex flex-row items-center h-[32px] p-1.5 w-40 text-white shadow-lg" style="{{ style }}">
-    <div class="grow"><div class="truncate text-ellipsis font-semibold leading-tight text-sm marquee-calc max-w-24">{{ name }}</div></div>
-    <div class="grow-0 shrink-0 text-right truncate font-semibold leading-tight text-sm">{{ cardset }}</div>
-    {% if quantity != None %}
-      <div class="grow-0 shrink-0 relative w-fit ps-1">
-        <div class="card-quantity-badge relative bg-gray-600 text-white text-sm font-semibold rounded-full text-center size-max px-1.5">{{ quantity }}</div>
+<a href="{{ url }}">
+  <div class="relative block">
+    {% if not expanded %}
+      <div class="flex flex-row items-center h-[32px] p-1.5 w-40 text-white shadow-lg" style="{{ style }}">
+        <div class="grow"><div class="truncate text-ellipsis font-semibold leading-tight text-sm marquee-calc max-w-24">{{ name }}</div></div>
+        <div class="grow-0 shrink-0 text-right truncate font-semibold leading-tight text-sm">{{ cardset }}</div>
+        {% if quantity != None %}
+          <div class="grow-0 shrink-0 relative w-fit ps-1">
+            <div class="card-quantity-badge relative bg-gray-600 text-white text-sm font-semibold rounded-full text-center size-max px-1.5">{{ quantity }}</div>
+          </div>
+        {% endif %}
+      </div>
+    {% else %}
+      <div class="grid grid-rows-2 grid-cols-4 h-[52px] p-1.5 w-40 text-white shadow-lg" style="{{ style }}">
+        <div class="row-start-1 col-start-1 {% if quantity != None %}col-span-3{% else %}col-span-4{% endif %} self-start leading-tight truncate text-ellipsis"><span class="font-semibold text-sm marquee-calc">{{ name }}</span></div>
+        {% if quantity != None %}
+          <div class="row-start-1 col-start-4 col-span-1 self-start ms-auto leading-tight relative w-fit ps-1">
+            <div class="card-quantity-badge relative bg-gray-600 text-white text-sm font-semibold rounded-full text-center size-max px-1.5">{{ quantity }}</div>
+          </div>
+        {% endif %}
+        <div class="row-start-2 col-start-1 col-span-3 truncate self-end text-xs text-transparent">{{ rarity }}</div>
+        <div class="row-start-2 col-start-4 col-span-1 self-end text-right truncate font-semibold leading-tight text-sm">{{ cardset }}</div>
       </div>
     {% endif %}
   </div>
-</div>
-{% else %}
-<div class="relative block">
-  <div class="grid grid-rows-2 grid-cols-4 h-[52px] p-1.5 w-40 text-white shadow-lg" style="{{ style }}">
-    <div class="row-start-1 col-start-1 {% if quantity != None %}col-span-3{% else %}col-span-4{% endif %} self-start leading-tight truncate text-ellipsis"><span class="font-semibold text-sm marquee-calc">{{ name }}</span></div>
-    {% if quantity != None %}
-      <div class="row-start-1 col-start-4 col-span-1 self-start ms-auto leading-tight relative w-fit ps-1">
-        <div class="card-quantity-badge relative bg-gray-600 text-white text-sm font-semibold rounded-full text-center size-max px-1.5">{{ quantity }}</div>
-      </div>
-    {% endif %}
-    <div class="row-start-2 col-start-1 col-span-3 truncate self-end text-xs text-transparent">{{ rarity }}</div>
-    <div class="row-start-2 col-start-4 col-span-1 self-end text-right truncate font-semibold leading-tight text-sm">{{ cardset }}</div>
-  </div>
-</div>
-{% endif %}
\ No newline at end of file
+</a>
\ No newline at end of file
diff --git a/theme/templatetags/card_multiselect.html b/theme/templatetags/card_multiselect.html
index 6e30aea..e3034ae 100644
--- a/theme/templatetags/card_multiselect.html
+++ b/theme/templatetags/card_multiselect.html
@@ -11,7 +11,7 @@
         data-card-id="{{ card.pk }}"
         data-quantity="{{ card.selected_quantity }}"
         {% if card.selected %}selected{% endif %}
-        data-html-content='{{ card|card_badge_inline:"__QUANTITY__" }}'
+        data-html-content='<div class="m-2">{{ card|card_badge_inline:"__QUANTITY__" }}</div>'
         data-name="{{ card.name }}"
         data-rarity="{{ card.rarity_icon }}"
         data-cardset="{{ card.cardset }}">
@@ -39,7 +39,7 @@ if (!window.updateGlobalCardFilters) {
               }
           });
           if (selectedValues.length > 0 && globalRarity === null) {
-              const option = select.querySelector(`option[value="${selectedValues[0]}"]`);
+              const option = select.querySelector('option[value="${selectedValues[0]}"]');
               if (option) {
                   globalRarity = option.getAttribute('data-rarity');
               }
diff --git a/theme/templatetags/trade_offer.html b/theme/templatetags/trade_offer.html
index c20457d..794ea37 100644
--- a/theme/templatetags/trade_offer.html
+++ b/theme/templatetags/trade_offer.html
@@ -25,14 +25,14 @@
               <div x-show="offerExpanded" x-collapse.duration.500ms class="px-2 badges">
                   <div class="flex flex-row justify-around">
                     {% if num_cards_available > 0 %}
-                    <div class="flex flex-col">
+                    <div class="flex flex-col gap-2">
                       {% for card in have_cards_available %}
-                          <div class="cursor-pointer m-1" @click.stop="window.location.href='{% url 'cards:card_detail' pk=card.card.pk %}'">{% card_badge card.card card.quantity %}</div>
+                          {% card_badge card.card card.quantity %}
                       {% endfor %}
                     </div>
-                    <div class="flex flex-col">
+                    <div class="flex flex-col gap-2">
                       {% for card in want_cards_available %}
-                          <div class="cursor-pointer m-1" @click.stop="window.location.href='{% url 'cards:card_detail' pk=card.card.pk %}'">{% card_badge card.card card.quantity %}</div>
+                          {% card_badge card.card card.quantity %}
                       {% endfor %}
                     </div>
                     {% else %}