diff --git a/apps/admin-web/src/components/PublishArticleModal.vue b/apps/admin-web/src/components/PublishArticleModal.vue
index a189cb1..22c31de 100644
--- a/apps/admin-web/src/components/PublishArticleModal.vue
+++ b/apps/admin-web/src/components/PublishArticleModal.vue
@@ -523,30 +523,30 @@ function normalizePlatformUid(value?: string | null): string {
             v-for="account in accountCards"
             :key="account.id"
             type="button"
-            class="publish-modal__list-item"
+            class="publish-modal__card"
             :class="{
-              'publish-modal__list-item--active': isSelected(account.id),
-              'publish-modal__list-item--disabled': !account.selectable,
+              'publish-modal__card--active': isSelected(account.id),
+              'publish-modal__card--disabled': !account.selectable,
             }"
             @click="toggleAccount(account.id, account.selectable)"
           >
-            <div class="publish-modal__identity">
+            <div class="publish-modal__card-header">
+              <div class="publish-modal__card-identity">
+                <span class="publish-modal__avatar" :style="{ background: account.platformAccent }">
+                  <img v-if="account.avatarUrl" :src="account.avatarUrl" :alt="account.displayName" referrerpolicy="no-referrer" />
+                  <span v-else>{{ accountInitial(account) }}</span>
+                </span>
+                <div class="publish-modal__identity-copy">
+                  <strong :title="account.displayName">{{ account.displayName }}</strong>
+                  <span :title="`${account.platformName} · ${account.platformUid}`">{{ account.platformName }} · {{ account.platformUid }}</span>
+                </div>
+              </div>
               <span class="publish-modal__check">
                 <span v-if="isSelected(account.id)" class="publish-modal__check-inner"></span>
               </span>
-
-              <span class="publish-modal__avatar" :style="{ background: account.platformAccent }">
-                <img v-if="account.avatarUrl" :src="account.avatarUrl" :alt="account.displayName" />
-                <span v-else>{{ accountInitial(account) }}</span>
-              </span>
-
-              <div class="publish-modal__identity-copy">
-                <strong>{{ account.displayName }}</strong>
-                <span>{{ account.platformName }} · {{ account.platformUid }}</span>
-              </div>
             </div>
 
-            <div class="publish-modal__meta-group">
+            <div class="publish-modal__card-footer">
               <div class="publish-modal__tags">
                 <a-tag :color="healthColor(account.health)">{{ healthLabel(account.health) }}</a-tag>
                 <a-tag :color="clientStatusColor(account)">{{ clientStatusLabel(account) }}</a-tag>
@@ -734,12 +734,13 @@ function normalizePlatformUid(value?: string | null): string {
 }
 
 .publish-modal__list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  max-height: 380px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
+  gap: 16px;
+  max-height: 400px;
   overflow-y: auto;
   padding-right: 6px;
+  padding-bottom: 4px;
 }
 
 /* Custom scrollbar for list */
@@ -751,50 +752,70 @@ function normalizePlatformUid(value?: string | null): string {
   border-radius: 999px;
 }
 
-.publish-modal__list-item {
+.publish-modal__card {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 14px;
   width: 100%;
-  padding: 14px 16px;
+  padding: 16px;
   border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border-radius: 12px;
   background: #ffffff;
   text-align: left;
   cursor: pointer;
   transition: all 0.2s ease;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02);
 }
 
-.publish-modal__list-item:hover:not(.publish-modal__list-item--disabled) {
+.publish-modal__card:hover:not(.publish-modal__card--disabled) {
   border-color: #d1d5db;
-  background: #f9fafb;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
+  transform: translateY(-2px);
 }
 
-.publish-modal__list-item--active {
+.publish-modal__card--active {
   border-color: #3b82f6;
   background: #eff6ff;
   box-shadow: 0 0 0 1px #3b82f6;
 }
 
-.publish-modal__list-item--disabled {
+.publish-modal__card--active:hover:not(.publish-modal__card--disabled) {
+  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.15), 0 0 0 1px #3b82f6;
+}
+
+.publish-modal__card--disabled {
   cursor: not-allowed;
   opacity: 0.6;
   background: #f9fafb;
+  box-shadow: none;
 }
 
-.publish-modal__identity {
+.publish-modal__card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.publish-modal__card-identity {
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: 12px;
   min-width: 0;
-  flex: 1;
 }
 
-.publish-modal__meta-group {
+.publish-modal__card-footer {
   display: flex;
   align-items: center;
-  gap: 16px;
-  flex-shrink: 0;
+  justify-content: space-between;
+  padding-top: 12px;
+  border-top: 1px dashed #e5e7eb;
+  gap: 8px;
+  transition: border-color 0.2s;
+}
+
+.publish-modal__card--active .publish-modal__card-footer {
+  border-top-color: #bfdbfe;
 }
 
 .publish-modal__check {
@@ -808,9 +829,10 @@ function normalizePlatformUid(value?: string | null): string {
   background: #fff;
   flex-shrink: 0;
   transition: all 0.2s;
+  margin-top: 2px;
 }
 
-.publish-modal__list-item--active .publish-modal__check {
+.publish-modal__card--active .publish-modal__check {
   background: #3b82f6;
   border-color: #3b82f6;
 }
@@ -825,13 +847,13 @@ function normalizePlatformUid(value?: string | null): string {
   transition: opacity 0.2s;
 }
 
-.publish-modal__list-item--active .publish-modal__check-inner {
+.publish-modal__card--active .publish-modal__check-inner {
   opacity: 1;
 }
 
 .publish-modal__avatar {
-  width: 38px;
-  height: 38px;
+  width: 40px;
+  height: 40px;
   border-radius: 8px;
   display: inline-flex;
   align-items: center;
@@ -861,6 +883,9 @@ function normalizePlatformUid(value?: string | null): string {
   font-size: 15px;
   font-weight: 600;
   line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .publish-modal__identity-copy span {
@@ -868,7 +893,9 @@ function normalizePlatformUid(value?: string | null): string {
   color: #6b7280;
   font-size: 13px;
   line-height: 1.5;
-  word-break: break-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .publish-modal__state-pill {