diff --git a/src/components/social/social-card.tsx b/src/components/social/social-card.tsx
index 049b953..b6ae7c9 100644
--- a/src/components/social/social-card.tsx
+++ b/src/components/social/social-card.tsx
@@ -2,7 +2,6 @@ import type { ReactNode, MouseEventHandler } from 'react';
 import { cn } from '../../lib/utils';
 import type { SocialCard as SocialCardData, AgentStatus } from '../../lib/social-cards';
 import { AgentAvatar } from '../shared/agent-avatar';
-import { BaseCard } from '../shared/base-card';
 
 interface SocialCardProps {
   data: SocialCardData;
@@ -13,41 +12,31 @@ interface SocialCardProps {
   onJumpToKanban?: (id: string) => void;
 }
 
-function DependencyPill({ id, type }: { id: string; type: 'blocked-by' | 'blocking' }) {
-  // Soft, friendly pills. Rose for "blocked by", Amber for "blocking".
+// "Hard Style" Dependency Item (from TaskCardGrid inspiration)
+function DependencyItem({ id, type }: { id: string; type: 'blocked-by' | 'blocking' }) {
   const styles = type === 'blocked-by' 
-    ? 'bg-rose-500/10 text-rose-200 hover:bg-rose-500/20' 
-    : 'bg-amber-500/10 text-amber-200 hover:bg-amber-500/20';
+    ? 'border-rose-500/20 hover:border-rose-500/40 hover:bg-rose-500/10' 
+    : 'border-amber-500/20 hover:border-amber-500/40 hover:bg-amber-500/10';
+  
+  const dotColor = type === 'blocked-by' ? 'bg-rose-500' : 'bg-amber-500';
 
   return (
-    <span className={cn(
-      "inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-medium transition-colors cursor-default",
+    <div className={cn(
+      "flex items-center gap-2 px-2.5 py-2 rounded-md border bg-white/5 transition-all duration-200 cursor-default",
       styles
     )}>
-      {type === 'blocked-by' ? 'Waiting on ' : 'Blocks '}
-      <span className="font-mono ml-1 opacity-80">{id}</span>
-    </span>
+      <div className={cn("w-1.5 h-1.5 rounded-full shadow-[0_0_8px_currentColor]", dotColor)} />
+      <span className="font-mono text-[10px] text-text-secondary">{id}</span>
+    </div>
   );
 }
 
-function ActionButton({
-  icon,
-  label,
-  onClick,
-}: {
-  icon: ReactNode;
-  label: string;
-  onClick?: () => void;
-}) {
+function ActionButton({ icon, label, onClick }: { icon: ReactNode; label: string; onClick?: () => void }) {
   return (
     <button
       type="button"
-      aria-label={label}
-      onClick={(e) => {
-        e.stopPropagation();
-        onClick?.();
-      }}
-      className="p-2 text-text-muted hover:text-white hover:bg-white/10 rounded-full transition-all duration-200"
+      onClick={(e) => { e.stopPropagation(); onClick?.(); }}
+      className="group flex items-center justify-center p-2 rounded-full hover:bg-white/10 text-text-muted hover:text-white transition-all active:scale-95"
       title={label}
     >
       {icon}
@@ -55,42 +44,21 @@ function ActionButton({
   );
 }
 
-function GraphIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="18" cy="5" r="3"></circle>
-      <circle cx="6" cy="12" r="3"></circle>
-      <circle cx="18" cy="19" r="3"></circle>
-      <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
-      <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
-    </svg>
-  );
-}
-
-function KanbanIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-      <line x1="9" y1="3" x2="9" y2="21"></line>
-    </svg>
-  );
-}
-
-function StatusBadge({ status }: { status: string }) {
-  const styles = {
-    ready: 'bg-teal-500/10 text-teal-300 border-teal-500/20',
-    in_progress: 'bg-emerald-500/10 text-emerald-300 border-emerald-500/20',
-    blocked: 'bg-amber-500/10 text-amber-300 border-amber-500/20',
-    closed: 'bg-slate-500/10 text-slate-400 border-slate-500/20',
-  }[status as keyof typeof styles] || 'bg-slate-500/10 text-slate-400 border-slate-500/20';
+function StatusIndicator({ status }: { status: string }) {
+  const color = {
+    ready: 'bg-teal-400 shadow-[0_0_10px_rgba(45,212,191,0.5)]',
+    in_progress: 'bg-emerald-400 shadow-[0_0_10px_rgba(52,211,153,0.5)]',
+    blocked: 'bg-rose-500 shadow-[0_0_10px_rgba(244,63,94,0.5)]',
+    closed: 'bg-slate-500',
+  }[status] || 'bg-slate-500';
 
   return (
-    <span className={cn(
-      "px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border",
-      styles
-    )}>
-      {status.replace('_', ' ')}
-    </span>
+    <div className="flex items-center gap-2">
+      <div className={cn("w-2 h-2 rounded-full animate-pulse", color)} />
+      <span className="text-[10px] font-bold uppercase tracking-widest text-text-muted/80">
+        {status.replace('_', ' ')}
+      </span>
+    </div>
   );
 }
 
@@ -106,53 +74,81 @@ export function SocialCard({
   const hasUnblocks = data.unblocks.length > 0;
 
   return (
-    <BaseCard
-      // "Post" Styling: hover lift, soft shadow handled by BaseCard update
-      className={cn('flex flex-col gap-4 p-5 min-h-[180px]', className)}
-      selected={selected}
-      status={data.status}
+    <div
       onClick={onClick}
+      role="button"
+      tabIndex={0}
+      className={cn(
+        "group relative flex flex-col p-6 gap-4 transition-all duration-300 ease-out",
+        "rounded-[2rem]", // Elegant roundness
+        "bg-[#252525]/90 backdrop-blur-xl", // Glassy dark
+        "border border-white/5 hover:border-white/10",
+        "shadow-lg hover:shadow-2xl hover:-translate-y-1",
+        selected ? "ring-2 ring-amber-500/50 shadow-amber-900/20" : "",
+        className
+      )}
     >
-      {/* Header: ID & Status */}
+      {/* Header: Status & ID */}
       <div className="flex items-center justify-between">
-        <span className="font-mono text-xs font-medium text-teal-400/80">
-          {data.id}
-        </span>
-        <StatusBadge status={data.status} />
+        <div className="flex items-center gap-3">
+          <span className="font-mono text-xs font-bold text-teal-500/90 tracking-tight">
+            {data.id}
+          </span>
+          <div className="h-3 w-[1px] bg-white/10" />
+          <StatusIndicator status={data.status} />
+        </div>
+        <div className="text-[10px] text-text-muted/40 font-mono">
+          {new Date(data.lastActivity).toLocaleDateString()}
+        </div>
       </div>
 
       {/* Hero: Title */}
-      <h3 className="text-lg font-bold text-text-primary leading-tight">
+      <h3 className="text-xl font-bold text-white leading-snug tracking-tight group-hover:text-amber-50 transition-colors">
         {data.title}
       </h3>
 
-      {/* Content: Dependencies (Pill Cloud) */}
+      {/* Content: Dependencies (Hard Style List) */}
       {(hasBlocks || hasUnblocks) && (
-        <div className="flex flex-wrap gap-2 mt-auto pt-2">
-          {/* Unblocks = Blocked By me? No. 
-              data.unblocks = tasks blocking THIS task (upstream) -> "Waiting on"
-              data.blocks = tasks THIS task blocks (downstream) -> "Blocks" 
-          */}
-          {data.unblocks.slice(0, 3).map((id) => (
-            <DependencyPill key={id} id={id} type="blocked-by" />
-          ))}
-          {data.blocks.slice(0, 3).map((id) => (
-            <DependencyPill key={id} id={id} type="blocking" />
-          ))}
-          {(data.unblocks.length + data.blocks.length > 6) && (
-            <span className="px-2 py-1 text-[10px] text-text-muted/60 italic">
-              +{data.unblocks.length + data.blocks.length - 6} more
-            </span>
+        <div className="flex flex-col gap-3 mt-2">
+          {/* Blocked By */}
+          {hasUnblocks && (
+            <div className="flex flex-col gap-1.5 p-2 rounded-xl bg-black/20 border border-white/5">
+              <span className="text-[9px] font-bold uppercase tracking-widest text-rose-400/70 pl-1">Blocked By</span>
+              <div className="flex flex-col gap-1.5">
+                {data.unblocks.slice(0, 3).map((id) => (
+                  <DependencyItem key={id} id={id} type="blocked-by" />
+                ))}
+                {data.unblocks.length > 3 && (
+                  <div className="px-2 text-[10px] text-rose-400/50 italic">+{data.unblocks.length - 3} more</div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Blocking */}
+          {hasBlocks && (
+            <div className="flex flex-col gap-1.5 p-2 rounded-xl bg-black/20 border border-white/5">
+              <span className="text-[9px] font-bold uppercase tracking-widest text-amber-400/70 pl-1">Blocking</span>
+              <div className="flex flex-col gap-1.5">
+                {data.blocks.slice(0, 3).map((id) => (
+                  <DependencyItem key={id} id={id} type="blocking" />
+                ))}
+                {data.blocks.length > 3 && (
+                  <div className="px-2 text-[10px] text-amber-400/50 italic">+{data.blocks.length - 3} more</div>
+                )}
+              </div>
+            </div>
           )}
         </div>
       )}
 
-      {/* Footer: Agents & Actions */}
-      <div className="flex items-center justify-between pt-4 border-t border-white/5 mt-2">
-        {/* Crew */}
-        <div className="flex items-center -space-x-2 pl-1">
-          {data.agents.map((agent) => (
-            <div key={agent.name} className="relative z-0 hover:z-10 transition-transform hover:scale-110">
+      {/* Footer: Social Actions & Crew */}
+      <div className="mt-auto pt-4 flex items-center justify-between border-t border-white/5">
+        
+        {/* Crew (Left) */}
+        <div className="flex items-center -space-x-3 pl-2">
+          {data.agents.slice(0, 4).map((agent) => (
+            <div key={agent.name} className="relative transition-transform hover:scale-110 hover:z-10 ring-2 ring-[#252525] rounded-full">
               <AgentAvatar
                 name={agent.name}
                 status={agent.status as AgentStatus}
@@ -162,24 +158,29 @@ export function SocialCard({
             </div>
           ))}
           {data.agents.length === 0 && (
-            <span className="text-xs text-text-muted/40 italic">Unassigned</span>
+            <span className="text-xs text-text-muted/30 font-medium">No Crew</span>
           )}
         </div>
 
-        {/* Actions (Share/View) */}
-        <div className="flex items-center gap-1">
+        {/* Action Dock (Right) */}
+        <div className="flex items-center gap-1 bg-black/20 rounded-full px-2 py-1 border border-white/5">
           <ActionButton
-            icon={<GraphIcon />}
-            label="View Graph"
+            icon={
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
+            }
+            label="Graph"
             onClick={() => onJumpToGraph?.(data.id)}
           />
+          <div className="w-[1px] h-4 bg-white/10" />
           <ActionButton
-            icon={<KanbanIcon />}
-            label="View Kanban"
+            icon={
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
+            }
+            label="Kanban"
             onClick={() => onJumpToKanban?.(data.id)}
           />
         </div>
       </div>
-    </BaseCard>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/social/social-page.tsx b/src/components/social/social-page.tsx
index aa681f0..463fb28 100644
--- a/src/components/social/social-page.tsx
+++ b/src/components/social/social-page.tsx
@@ -15,33 +15,42 @@ export function SocialPage({ issues, selectedId, onSelect }: SocialPageProps) {
   const cards = useMemo(() => buildSocialCards(issues), [issues]);
 
   return (
-    <div className="flex flex-col h-full bg-earthy-gradient">
-      {/* Feed Container */}
-      <div className="flex-1 overflow-y-auto custom-scrollbar p-6 md:p-8">
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 max-w-7xl mx-auto">
-          {cards.map((card) => (
-            <SocialCard
-              key={card.id}
-              data={card}
-              selected={selectedId === card.id}
-              onClick={() => onSelect(card.id)}
-            />
-          ))}
-          {cards.length === 0 && (
-            <div className="col-span-full flex flex-col items-center justify-center py-20 text-text-muted opacity-60">
-              <div className="text-4xl mb-4">📭</div>
-              <p>No active tasks found in stream.</p>
-            </div>
-          )}
+    <div className="flex flex-col h-full bg-earthy-gradient overflow-hidden">
+      {/* Top: Card Stream (Restricted Height) */}
+      <div className="flex-none h-[55vh] min-h-[500px] overflow-y-auto custom-scrollbar border-b border-white/5 bg-black/10 shadow-inner">
+        <div className="p-6 md:p-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 max-w-7xl mx-auto">
+            {cards.map((card) => (
+              <SocialCard
+                key={card.id}
+                data={card}
+                selected={selectedId === card.id}
+                onClick={() => onSelect(card.id)}
+              />
+            ))}
+            {cards.length === 0 && (
+              <div className="col-span-full flex flex-col items-center justify-center py-20 text-text-muted opacity-60">
+                <div className="text-4xl mb-4">📭</div>
+                <p>No active tasks found in stream.</p>
+              </div>
+            )}
+          </div>
         </div>
       </div>
 
-      {/* Bottom Console (Conversation Deck) - Placeholder for future chat integration */}
-      <div className="flex-none h-16 border-t border-white/5 bg-black/20 backdrop-blur-md flex items-center justify-center">
-        <p className="text-xs font-medium text-text-muted/60 tracking-wide uppercase">
-          Select a task to view conversation
-        </p>
+      {/* Bottom: Conversation Deck (Fills remaining space) */}
+      <div className="flex-1 bg-surface-muted/20 backdrop-blur-xl p-6 flex items-center justify-center relative">
+        {/* Placeholder for Chat Interface */}
+        <div className="text-center space-y-2 max-w-md">
+          <div className="w-12 h-12 rounded-2xl bg-white/5 mx-auto flex items-center justify-center mb-4 ring-1 ring-white/10">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-text-muted">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+            </svg>
+          </div>
+          <h3 className="text-lg font-medium text-text-primary">Conversation Deck</h3>
+          <p className="text-sm text-text-muted/70">Select a task above to open its secure communication channel and activity log.</p>
+        </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}