diff --git a/src/modules/nostr-feed/components/ScheduledEventCard.vue b/src/modules/nostr-feed/components/ScheduledEventCard.vue
index 058425f..5acfa51 100644
--- a/src/modules/nostr-feed/components/ScheduledEventCard.vue
+++ b/src/modules/nostr-feed/components/ScheduledEventCard.vue
@@ -33,6 +33,9 @@ const emit = defineEmits<Emits>()
 // Confirmation dialog state
 const showConfirmDialog = ref(false)
 
+// Collapsed state (collapsed by default)
+const isExpanded = ref(false)
+
 // Event address for tracking completion
 const eventAddress = computed(() => `31922:${props.event.pubkey}:${props.event.dTag}`)
 
@@ -113,69 +116,127 @@ function confirmMarkComplete() {
 function cancelMarkComplete() {
   showConfirmDialog.value = false
 }
+
+// Toggle expanded/collapsed state
+function toggleExpanded() {
+  isExpanded.value = !isExpanded.value
+}
 </script>
 
 <template>
-  <div class="border-b md:border md:rounded-lg bg-card p-4 md:p-6 transition-all"
+  <div class="border-b md:border md:rounded-lg bg-card transition-all"
        :class="{ 'opacity-60': isCompletable && isCompleted }">
-    <!-- Event Details -->
-    <div class="flex-1 min-w-0">
-      <!-- Title and badges -->
-      <div class="flex items-start gap-2 mb-2 flex-wrap">
-        <h3 class="font-semibold text-base md:text-lg flex-1"
-            :class="{ 'line-through': isCompletable && isCompleted }">
-          {{ event.title }}
-        </h3>
-        <Badge v-if="isAdminEvent" variant="secondary" class="shrink-0">
+
+    <!-- Collapsed View (Default) -->
+    <div v-if="!isExpanded"
+         class="flex items-center gap-3 p-3 md:p-4">
+      <!-- Time -->
+      <div @click="toggleExpanded" class="flex items-center gap-1.5 text-sm text-muted-foreground shrink-0 cursor-pointer">
+        <Clock class="h-3.5 w-3.5" />
+        <span class="font-medium">{{ formattedTimeRange || formattedDate }}</span>
+      </div>
+
+      <!-- Title -->
+      <h3 @click="toggleExpanded"
+          class="font-semibold text-sm md:text-base flex-1 truncate cursor-pointer hover:text-foreground/80 transition-colors"
+          :class="{ 'line-through': isCompletable && isCompleted }">
+        {{ event.title }}
+      </h3>
+
+      <!-- Badges and Actions -->
+      <div class="flex items-center gap-2 shrink-0">
+        <!-- Mark Complete Button (for uncompleted tasks) -->
+        <Button
+          v-if="isCompletable && !isCompleted"
+          @click.stop="handleMarkComplete"
+          variant="ghost"
+          size="sm"
+          class="h-7 w-7 p-0"
+        >
+          <CheckCircle class="h-4 w-4" />
+        </Button>
+
+        <!-- Completed Badge -->
+        <Badge v-if="isCompletable && isCompleted" variant="secondary" class="text-xs">
+          ✓
+        </Badge>
+
+        <!-- Admin Badge -->
+        <Badge v-if="isAdminEvent" variant="secondary" class="text-xs">
           Admin
         </Badge>
       </div>
+    </div>
 
-      <!-- Date/Time -->
-      <div class="flex items-center gap-4 text-sm text-muted-foreground mb-2 flex-wrap">
-        <div class="flex items-center gap-1.5">
-          <Calendar class="h-4 w-4" />
-          <span>{{ formattedDate }}</span>
+    <!-- Expanded View -->
+    <div v-else class="p-4 md:p-6">
+      <!-- Event Details -->
+      <div class="flex-1 min-w-0">
+        <!-- Title and badges with close button -->
+        <div class="flex items-start gap-2 mb-2 flex-wrap">
+          <h3 class="font-semibold text-base md:text-lg flex-1"
+              :class="{ 'line-through': isCompletable && isCompleted }">
+            {{ event.title }}
+          </h3>
+          <Badge v-if="isAdminEvent" variant="secondary" class="shrink-0">
+            Admin
+          </Badge>
+          <Button
+            @click="toggleExpanded"
+            variant="ghost"
+            size="sm"
+            class="h-6 w-6 p-0 shrink-0"
+          >
+            ✕
+          </Button>
         </div>
-        <div v-if="formattedTimeRange" class="flex items-center gap-1.5">
-          <Clock class="h-4 w-4" />
-          <span>{{ formattedTimeRange }}</span>
+
+        <!-- Date/Time -->
+        <div class="flex items-center gap-4 text-sm text-muted-foreground mb-2 flex-wrap">
+          <div class="flex items-center gap-1.5">
+            <Calendar class="h-4 w-4" />
+            <span>{{ formattedDate }}</span>
+          </div>
+          <div v-if="formattedTimeRange" class="flex items-center gap-1.5">
+            <Clock class="h-4 w-4" />
+            <span>{{ formattedTimeRange }}</span>
+          </div>
         </div>
-      </div>
 
-      <!-- Location -->
-      <div v-if="event.location" class="flex items-center gap-1.5 text-sm text-muted-foreground mb-3">
-        <MapPin class="h-4 w-4" />
-        <span>{{ event.location }}</span>
-      </div>
+        <!-- Location -->
+        <div v-if="event.location" class="flex items-center gap-1.5 text-sm text-muted-foreground mb-3">
+          <MapPin class="h-4 w-4" />
+          <span>{{ event.location }}</span>
+        </div>
 
-      <!-- Description/Content -->
-      <div v-if="event.description || event.content" class="text-sm mb-3">
-        <p class="whitespace-pre-wrap break-words">{{ event.description || event.content }}</p>
-      </div>
+        <!-- Description/Content -->
+        <div v-if="event.description || event.content" class="text-sm mb-3">
+          <p class="whitespace-pre-wrap break-words">{{ event.description || event.content }}</p>
+        </div>
 
-      <!-- Completion info (only for completable events) -->
-      <div v-if="isCompletable && isCompleted && getCompletion(eventAddress)" class="text-xs text-muted-foreground mb-3">
-        ✓ Completed by {{ getDisplayName(getCompletion(eventAddress)!.pubkey) }}
-        <span v-if="getCompletion(eventAddress)!.notes"> - {{ getCompletion(eventAddress)!.notes }}</span>
-      </div>
+        <!-- Completion info (only for completable events) -->
+        <div v-if="isCompletable && isCompleted && getCompletion(eventAddress)" class="text-xs text-muted-foreground mb-3">
+          ✓ Completed by {{ getDisplayName(getCompletion(eventAddress)!.pubkey) }}
+          <span v-if="getCompletion(eventAddress)!.notes"> - {{ getCompletion(eventAddress)!.notes }}</span>
+        </div>
 
-      <!-- Author (if not admin) -->
-      <div v-if="!isAdminEvent" class="text-xs text-muted-foreground mb-3">
-        Posted by {{ getDisplayName(event.pubkey) }}
-      </div>
+        <!-- Author (if not admin) -->
+        <div v-if="!isAdminEvent" class="text-xs text-muted-foreground mb-3">
+          Posted by {{ getDisplayName(event.pubkey) }}
+        </div>
 
-      <!-- Mark Complete Button (only for completable task events) -->
-      <div v-if="isCompletable && !isCompleted" class="mt-3">
-        <Button
-          @click="handleMarkComplete"
-          variant="outline"
-          size="sm"
-          class="gap-2"
-        >
-          <CheckCircle class="h-4 w-4" />
-          Mark Complete
-        </Button>
+        <!-- Mark Complete Button (only for completable task events) -->
+        <div v-if="isCompletable && !isCompleted" class="mt-3">
+          <Button
+            @click.stop="handleMarkComplete"
+            variant="outline"
+            size="sm"
+            class="gap-2"
+          >
+            <CheckCircle class="h-4 w-4" />
+            Mark Complete
+          </Button>
+        </div>
       </div>
     </div>