diff --git a/app/templates/partials/folder_card.html b/app/templates/partials/folder_card.html
index d9310e5..c4ab096 100644
--- a/app/templates/partials/folder_card.html
+++ b/app/templates/partials/folder_card.html
@@ -28,8 +28,8 @@
         </div>
         
         <!-- Email count badges placed below title but in a separate row -->
-        <div class="flex justify-between items-center mb-2">
-            <div class="flex space-x-1">
+        <div class="flex flex-wrap justify-between items-center mb-2 gap-1">
+            <div class="flex flex-wrap gap-1">
                 <span class="badge badge-outline cursor-pointer">{{ folder.total_count }} emails</span>
                 {% if folder.pending_count > 0 %}
                 <button
diff --git a/app/templates/partials/folder_card_base.html b/app/templates/partials/folder_card_base.html
new file mode 100644
index 0000000..cf4964a
--- /dev/null
+++ b/app/templates/partials/folder_card_base.html
@@ -0,0 +1,49 @@
+<div id="folder-{{ folder.id }}" class="card bg-base-100 shadow-xl border border-base-300 hover:shadow-lg">
+    <div class="card-body" data-loading-states>
+        <div class="flex justify-between items-start mb-2">
+            <h3 class="text-xl font-bold truncate flex-grow">{{ folder.name }}</h3>
+            <div class="flex space-x-2">
+                <button class="btn btn-sm btn-outline"
+                        hx-get="/api/folders/{{ folder.id }}/edit"
+                        hx-target="#modal-holder"
+                        hx-swap="innerHTML"
+                        hx-trigger="click"
+                        data-loading-disable
+                        >
+                    <i class="fas fa-edit" data-loading-class="!hidden"></i>
+                    <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
+                </button>
+                <button class="btn btn-sm btn-outline btn-error fade-me-out"
+                        hx-delete="/api/folders/{{ folder.id }}"
+                        hx-target="#folders-list"
+                        hx-swap="outerhtml settle:300ms"
+                        hx-confirm="Are you sure you want to delete this folder?"
+                        data-loading-disable
+                        >
+                    <i class="fas fa-trash" data-loading-class="!hidden"></i>
+                    <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
+                </button>
+            </div>
+        </div>
+        
+        <!-- Priority badge -->
+        <div class="flex flex-wrap justify-between items-center mb-2 gap-1">
+            <div class="flex flex-wrap gap-1">
+                {% block badges %}{% endblock %}
+            </div>
+            {% if folder.priority == 1 %}
+                <span class="badge badge-error">High Priority</span>
+            {% elif folder.priority == -1 %}
+                <span class="badge badge-info">Low Priority</span>
+            {% else %}
+                <span class="badge badge-primary">Normal Priority</span>
+            {% endif %}
+        </div>
+ 
+        <div class="bg-base-200 rounded-box p-4 mb-4">
+            <p class="text-base-content/80">{{ folder.rule_text }}</p>
+        </div>
+        
+        {% block additional_content %}{% endblock %}
+    </div>
+</div>
\ No newline at end of file