diff --git a/static/css/04-interactive/_modals.css b/static/css/04-interactive/_modals.css
index b122b97..c9dee0c 100644
--- a/static/css/04-interactive/_modals.css
+++ b/static/css/04-interactive/_modals.css
@@ -739,7 +739,7 @@
     }
 }
 
-/* Mobile: Single column */
+/* Mobile: Single column - Button-like style */
 @media (max-width: 479px) {
     .pdf-download-modal {
         max-width: calc(100% - 1rem);
@@ -748,7 +748,7 @@
     .pdf-options-grid {
         display: flex;
         flex-direction: column;
-        gap: 24px;
+        gap: 12px;
     }
 
     /* Remove scale transform in mobile */
@@ -760,21 +760,82 @@
         transform: translateY(-2px);
     }
 
+    /* Button-like cards on mobile */
+    .pdf-option-card {
+        flex-direction: row;
+        align-items: center;
+        padding: 16px;
+        gap: 16px;
+    }
+
+    /* Hide full thumbnail on mobile, show compact badge instead */
     .pdf-thumbnail {
-        height: 200px;
+        display: none;
+    }
+
+    /* Show page count badge in place of thumbnail */
+    .pdf-option-card::before {
+        content: attr(data-cv-format);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 60px;
+        height: 60px;
+        flex-shrink: 0;
+        background: #f5f5f5;
+        border-radius: 8px;
+        font-weight: 700;
+        font-size: 0.75rem;
+        color: #666;
+        text-transform: uppercase;
+    }
+
+    /* Custom content for each format */
+    .pdf-option-card[data-cv-format="short"]::before {
+        content: "4\APAGES";
+        white-space: pre;
+        line-height: 1.3;
+    }
+
+    .pdf-option-card[data-cv-format="default"]::before {
+        content: "5\APAGES";
+        white-space: pre;
+        line-height: 1.3;
+        background: #fff8e6;
+        color: #f39c12;
+    }
+
+    .pdf-option-card[data-cv-format="long"]::before {
+        content: "9\APAGES";
+        white-space: pre;
+        line-height: 1.3;
+    }
+
+    /* Adjust text alignment */
+    .pdf-option-info {
+        text-align: left;
+        flex: 1;
     }
 
     .pdf-option-info h3 {
         font-size: 1rem;
+        margin-bottom: 2px;
     }
 
     .pdf-option-info p {
         font-size: 0.8rem;
     }
 
+    /* Move checkmark to right side */
+    .pdf-option-badge {
+        position: static;
+        margin-left: auto;
+    }
+
     .pdf-download-btn {
-        padding: 10px 24px;
-        font-size: 0.9rem;
+        padding: 12px 24px;
+        font-size: 0.95rem;
+        width: 100%;
     }
 }