diff --git a/components/ItemCard.tsx b/components/ItemCard.tsx
index 9b1a7fd..fd44329 100644
--- a/components/ItemCard.tsx
+++ b/components/ItemCard.tsx
@@ -33,24 +33,33 @@ function ItemCard({ item, listId }: ItemCardProps) {
   const priorityColor = priorityColors[item.priority as keyof typeof priorityColors] || priorityColors.medium
 
   return (
-    <div className="bg-white rounded-lg border border-gray-200 p-4 sm:p-5 hover:shadow-md active:shadow-lg transition-all group">
-      <div className="flex items-start gap-3 sm:gap-4">
+    <div className="bg-white rounded-lg border border-gray-200 p-3 sm:p-3.5 hover:shadow-md active:shadow-lg transition-all group">
+      <div className="flex items-center gap-2 sm:gap-3">
         {/* Completion Toggle */}
-        <div className="pt-0.5 sm:pt-1 flex-shrink-0">
+        <div className="flex-shrink-0">
           <ToggleItemButton itemId={item.id} completed={item.completed} variant="icon" />
         </div>
 
         {/* Content */}
         <div className="flex-1 min-w-0">
           <Link href={`/list/${listId}/item/${item.id}`} className="block">
-            <h3 className={`font-medium mb-1 text-sm sm:text-base ${
-              item.completed ? 'text-gray-500 line-through' : 'text-gray-900'
-            }`}>
-              {item.title}
-            </h3>
+            <div className="flex items-center justify-between gap-2">
+              <h3 className={`font-medium text-sm sm:text-base ${
+                item.completed ? 'text-gray-500 line-through' : 'text-gray-900'
+              }`}>
+                {item.title}
+              </h3>
+              
+              {/* Priority Badge - moved to right */}
+              <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium border flex-shrink-0 ${priorityColor}`}>
+                <AlertCircle size={12} className="flex-shrink-0" />
+                <span className="hidden xs:inline sm:inline">{item.priority.charAt(0).toUpperCase() + item.priority.slice(1)}</span>
+                <span className="xs:hidden sm:hidden">{item.priority.charAt(0).toUpperCase()}</span>
+              </span>
+            </div>
             
             {item.description && (
-              <p className={`text-xs sm:text-sm mb-2 line-clamp-2 ${
+              <p className={`text-xs sm:text-sm mt-1 line-clamp-1 ${
                 item.completed ? 'text-gray-400' : 'text-gray-600'
               }`}>
                 {item.description}
@@ -58,42 +67,37 @@ function ItemCard({ item, listId }: ItemCardProps) {
             )}
 
             {/* Metadata */}
-            <div className="flex flex-wrap items-center gap-1.5 sm:gap-2 mt-2">
-              {/* Priority Badge */}
-              <span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium border ${priorityColor}`}>
-                <AlertCircle size={12} className="flex-shrink-0" />
-                <span className="hidden xs:inline sm:inline">{item.priority.charAt(0).toUpperCase() + item.priority.slice(1)}</span>
-                <span className="xs:hidden sm:hidden">{item.priority.charAt(0).toUpperCase()}</span>
-              </span>
-
-              {/* Due Date */}
-              {item.dueDate && (
-                <span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs whitespace-nowrap ${
-                  isOverdue 
-                    ? 'bg-red-100 text-red-700 border border-red-200 font-semibold' 
-                    : 'bg-gray-100 text-gray-700'
-                }`}>
-                  <Calendar size={12} className="flex-shrink-0" />
-                  {new Date(item.dueDate).toLocaleDateString('en-US', {
-                    month: 'short',
-                    day: 'numeric',
-                  })}
-                  {isOverdue && <span className="hidden sm:inline"> (Overdue)</span>}
-                  {isOverdue && <span className="sm:hidden">!</span>}
-                </span>
-              )}
-
-              {/* Tags */}
-              {tags.length > 0 && (
-                <div className="inline-flex items-center gap-1">
-                  <Tag size={12} className="text-gray-400 flex-shrink-0" />
-                  <span className="text-xs text-gray-600 truncate max-w-[120px] sm:max-w-none">
-                    {tags.slice(0, 2).join(', ')}
-                    {tags.length > 2 && ` +${tags.length - 2}`}
+            {(item.dueDate || tags.length > 0) && (
+              <div className="flex flex-wrap items-center gap-1.5 sm:gap-2 mt-1.5">
+                {/* Due Date */}
+                {item.dueDate && (
+                  <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs whitespace-nowrap ${
+                    isOverdue 
+                      ? 'bg-red-100 text-red-700 border border-red-200 font-semibold' 
+                      : 'bg-gray-100 text-gray-700'
+                  }`}>
+                    <Calendar size={12} className="flex-shrink-0" />
+                    {new Date(item.dueDate).toLocaleDateString('en-US', {
+                      month: 'short',
+                      day: 'numeric',
+                    })}
+                    {isOverdue && <span className="hidden sm:inline"> (Overdue)</span>}
+                    {isOverdue && <span className="sm:hidden">!</span>}
                   </span>
-                </div>
-              )}
-            </div>
+                )}
+
+                {/* Tags */}
+                {tags.length > 0 && (
+                  <div className="inline-flex items-center gap-1">
+                    <Tag size={12} className="text-gray-400 flex-shrink-0" />
+                    <span className="text-xs text-gray-600 truncate max-w-[120px] sm:max-w-none">
+                      {tags.slice(0, 2).join(', ')}
+                      {tags.length > 2 && ` +${tags.length - 2}`}
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
           </Link>
         </div>