diff --git a/Channel-Frontend/src/features/assets/components/AssetCard.tsx b/Channel-Frontend/src/features/assets/components/AssetCard.tsx
index 110a1ec..fb66bc3 100644
--- a/Channel-Frontend/src/features/assets/components/AssetCard.tsx
+++ b/Channel-Frontend/src/features/assets/components/AssetCard.tsx
@@ -318,59 +318,130 @@ export const AssetCard: React.FC<AssetCardProps> = ({
           ) : (
             <div 
               id={`fallback-${asset.id}`} 
-              className="w-full h-full flex items-center justify-center bg-ink-50"
+              className="w-full h-full flex items-center justify-center bg-ink-50 relative overflow-hidden"
             >
               {isPresentation ? (
-                <div className="flex flex-col items-center justify-center w-full h-full p-4 bg-amber-500/[0.03] hover:bg-amber-500/[0.06] transition-colors">
-                  <div className="w-[125px] h-[90px] bg-amber-500 border border-amber-600 shadow-md rounded-lg flex flex-col justify-between p-2.5 relative overflow-hidden transition-all duration-300 group-hover:scale-105">
-                    <div className="h-2 bg-ink-0/90 rounded w-3/4 mb-1" />
-                    <div className="space-y-1 flex-grow">
-                      <div className="h-1 bg-ink-0/60 rounded w-full" />
-                      <div className="h-1 bg-ink-0/60 rounded w-11/12" />
-                      <div className="h-1 bg-ink-0/60 rounded w-10/12" />
+                <div className="w-full h-full flex bg-slate-900 border border-slate-800 text-left select-none relative overflow-hidden">
+                  {/* Left slide thumbnails rail */}
+                  <div className="w-10 bg-slate-950 border-r border-slate-850 flex flex-col items-center py-2 gap-1.5 shrink-0">
+                    <div className="w-7 h-5 rounded bg-amber-600/30 border border-amber-500/50 flex items-center justify-center text-[7px] text-amber-500 font-bold">1</div>
+                    <div className="w-7 h-5 rounded bg-slate-850 border border-slate-750 flex items-center justify-center text-[7px] text-slate-500">2</div>
+                    <div className="w-7 h-5 rounded bg-slate-850 border border-slate-750 flex items-center justify-center text-[7px] text-slate-500">3</div>
+                  </div>
+                  {/* Main slide content area */}
+                  <div className="flex-1 bg-gradient-to-tr from-slate-950 via-slate-900 to-amber-950/60 p-3.5 flex flex-col justify-between relative">
+                    <div className="space-y-1.5 mt-2 relative z-10">
+                      <span className="inline-flex px-1.5 py-0.5 rounded text-[7px] font-extrabold uppercase bg-amber-500 text-slate-950 tracking-wider">
+                        Slide Show
+                      </span>
+                      <h4 className="text-[11px] font-extrabold text-white leading-tight font-sans line-clamp-2 mt-1">
+                        {asset.title}
+                      </h4>
+                      <div className="space-y-1 pt-1.5">
+                        <div className="flex items-center gap-1">
+                          <span className="w-1 h-1 rounded-full bg-amber-500" />
+                          <div className="h-1 bg-white/20 rounded w-5/6" />
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <span className="w-1 h-1 rounded-full bg-amber-500" />
+                          <div className="h-1 bg-white/20 rounded w-3/4" />
+                        </div>
+                        <div className="flex items-center gap-1">
+                          <span className="w-1 h-1 rounded-full bg-amber-500" />
+                          <div className="h-1 bg-white/10 rounded w-4/6" />
+                        </div>
+                      </div>
                     </div>
-                    <div className="flex items-center justify-between text-[7px] text-ink-0/80 font-bold pt-1 border-t border-amber-400">
-                      <span>PRESENTATION</span>
-                      <span className="font-extrabold uppercase">PPTX</span>
+                    {/* Slide Footer */}
+                    <div className="flex items-center justify-between text-[7px] text-slate-405 font-bold border-t border-slate-800/80 pt-1.5 mt-auto relative z-10 font-mono">
+                      <span>KEYNOTE PRESENTATION</span>
+                      <span className="font-extrabold text-amber-550 text-[6px]">PPTX</span>
                     </div>
                   </div>
                 </div>
               ) : isWord ? (
-                <div className="flex flex-col items-center justify-center w-full h-full p-4 bg-blue-500/[0.03] hover:bg-blue-500/[0.06] transition-colors">
-                  <div className="w-[105px] h-[135px] bg-ink-0 border border-blue-500/20 shadow-md rounded-lg flex flex-col justify-between p-3 relative overflow-hidden transition-all duration-300 group-hover:scale-105">
-                    <div className="absolute top-0 right-0 left-0 bg-blue-600 text-ink-0 py-1 text-[8px] font-extrabold uppercase text-center tracking-wider font-sans">
-                      Word Doc
-                    </div>
-                    <div className="space-y-1.5 mt-6 flex-grow pt-1">
-                      <div className="h-1 bg-ink-200 rounded w-11/12" />
-                      <div className="h-1 bg-ink-200 rounded w-full" />
-                      <div className="h-1 bg-ink-250 rounded w-10/12" />
-                      <div className="h-1 bg-ink-200 rounded w-full" />
-                    </div>
-                    <div className="flex items-center justify-between text-[7px] text-ink-400 font-bold border-t border-ink-100 pt-1 mt-1 font-sans">
-                      <span>DOCX RESOURCE</span>
-                      <FileText className="w-3 h-3 text-blue-650" />
+                <div className="w-full h-full bg-white border border-slate-200 text-left select-none relative overflow-hidden p-3.5 flex flex-col justify-between">
+                  {/* Document Margins decorative elements */}
+                  <div className="absolute top-0 right-0 left-0 h-1 bg-indigo-600" />
+                  
+                  {/* Word Header */}
+                  <div className="flex justify-between items-center text-[7px] text-slate-400 font-bold tracking-wide border-b border-slate-100 pb-1.5">
+                    <span>PARTNER ASSET LIBRARY</span>
+                    <span className="font-extrabold text-indigo-650">DOCX</span>
+                  </div>
+                  
+                  {/* Page Title & Body Text Mockup */}
+                  <div className="space-y-2 flex-grow mt-3">
+                    <h4 className="text-[11px] font-extrabold text-slate-900 leading-snug font-sans line-clamp-2">
+                      {asset.title}
+                    </h4>
+                    <div className="space-y-1.5">
+                      <div className="h-1.5 bg-slate-100 rounded w-full" />
+                      <div className="h-1.5 bg-slate-100 rounded w-11/12" />
+                      <div className="h-1.5 bg-slate-100 rounded w-full" />
+                      <div className="h-1.5 bg-slate-50 rounded w-3/4" />
                     </div>
                   </div>
+                  
+                  {/* Signature / Metadata stamp at the bottom */}
+                  <div className="flex items-center justify-between text-[7px] text-slate-400 font-bold border-t border-slate-100 pt-1.5 mt-auto font-mono">
+                    <span>PAGE 1 OF 1</span>
+                    <span className="text-slate-350">CONFIDENTIAL</span>
+                  </div>
                 </div>
               ) : isSpreadsheet ? (
-                <div className="flex flex-col items-center justify-center w-full h-full p-4 bg-emerald-500/[0.03] hover:bg-emerald-500/[0.06] transition-colors">
-                  <div className="w-[115px] h-[90px] bg-ink-0 border border-emerald-500/20 shadow-md rounded-lg flex flex-col justify-between p-2 relative overflow-hidden transition-all duration-300 group-hover:scale-105">
-                    <div className="absolute top-0 right-0 left-0 bg-emerald-650 text-ink-0 py-1 text-[7px] font-extrabold uppercase text-center tracking-wider font-sans">
-                      Spreadsheet
+                <div className="w-full h-full bg-white border border-slate-200 text-left select-none relative overflow-hidden flex flex-col justify-between">
+                  {/* Excel Top Bar */}
+                  <div className="h-5 bg-emerald-700 border-b border-emerald-800 flex items-center px-2 shrink-0 justify-between select-none">
+                    <span className="text-[8px] font-extrabold text-white tracking-wider">Spreadsheet Editor</span>
+                    <span className="text-[6px] font-extrabold text-emerald-100 bg-emerald-800/80 px-1 py-0.5 rounded uppercase">XLSX</span>
+                  </div>
+                  
+                  {/* Sheet Grid Layout */}
+                  <div className="flex-1 flex flex-col min-h-0 bg-white font-mono text-[6px]">
+                    {/* Headers Row */}
+                    <div className="h-4 bg-slate-100 border-b border-slate-200 flex shrink-0">
+                      <div className="w-6 border-r border-slate-200 bg-slate-150 flex items-center justify-center text-slate-500 font-bold shrink-0"></div>
+                      <div className="flex-1 border-r border-slate-200 flex items-center justify-center text-slate-500 font-bold">A</div>
+                      <div className="flex-1 border-r border-slate-200 flex items-center justify-center text-slate-500 font-bold">B</div>
+                      <div className="flex-1 border-r border-slate-200 flex items-center justify-center text-slate-500 font-bold">C</div>
+                      <div className="flex-1 flex items-center justify-center text-slate-500 font-bold">D</div>
                     </div>
-                    <div className="grid grid-cols-3 gap-1 mt-5 flex-grow pt-1">
-                      <div className="h-2 bg-emerald-50 border border-emerald-100 rounded" />
-                      <div className="h-2 bg-emerald-50 border border-emerald-100 rounded" />
-                      <div className="h-2 bg-emerald-50 border border-emerald-100 rounded" />
-                      <div className="h-2 bg-ink-50 border border-ink-100 rounded" />
-                      <div className="h-2 bg-ink-50 border border-ink-100 rounded" />
-                      <div className="h-2 bg-ink-50 border border-ink-100 rounded" />
+                    {/* Grid Rows */}
+                    <div className="flex-1 flex flex-col divide-y divide-slate-100">
+                      {/* Row 1 - Title */}
+                      <div className="h-4 flex items-center bg-emerald-500/5 divide-x divide-slate-100">
+                        <div className="w-6 bg-slate-100 flex items-center justify-center text-slate-500 font-bold shrink-0">1</div>
+                        <div className="flex-1 px-1 font-bold text-emerald-900 truncate">
+                          {asset.title}
+                        </div>
+                      </div>
+                      {/* Row 2 - Headers */}
+                      <div className="h-4 flex items-center bg-slate-50 divide-x divide-slate-100">
+                        <div className="w-6 bg-slate-100 flex items-center justify-center text-slate-500 font-bold shrink-0">2</div>
+                        <div className="flex-1 px-1 font-bold text-slate-700 truncate">Category</div>
+                        <div className="flex-1 px-1 font-bold text-slate-700 truncate">Date</div>
+                        <div className="flex-1 px-1 font-bold text-slate-700 truncate">Size</div>
+                        <div className="flex-1 px-1 font-bold text-slate-700 truncate">Status</div>
+                      </div>
+                      {/* Row 3 - Data */}
+                      <div className="h-4 flex items-center divide-x divide-slate-100">
+                        <div className="w-6 bg-slate-100 flex items-center justify-center text-slate-500 font-bold shrink-0">3</div>
+                        <div className="flex-1 px-1 text-slate-600 truncate">{asset.categoryId || 'General'}</div>
+                        <div className="flex-1 px-1 text-slate-600 truncate">{new Date(asset.createdAt).toLocaleDateString()}</div>
+                        <div className="flex-1 px-1 text-slate-600 truncate">{formatBytes(asset.size)}</div>
+                        <div className="flex-1 px-1 text-emerald-650 font-bold truncate">Published</div>
+                      </div>
                     </div>
-                    <div className="flex items-center justify-between text-[7px] text-ink-400 font-bold border-t border-ink-100 pt-1 mt-1 font-sans">
-                      <span>XLSX SHEET</span>
-                      <span className="font-extrabold text-emerald-650 text-[6px]">EXCEL</span>
+                  </div>
+                  
+                  {/* Excel Sheet Tab Footer */}
+                  <div className="h-4 bg-slate-50 border-t border-slate-200 flex items-center px-2 shrink-0 select-none justify-between">
+                    <div className="flex gap-1">
+                      <span className="text-[6px] font-extrabold text-emerald-700 bg-white border-x border-t border-slate-200 px-1.5 py-0.5 rounded-t select-none leading-none">Sheet1</span>
+                      <span className="text-[6px] text-slate-400 px-1 py-0.5 select-none leading-none">Sheet2</span>
                     </div>
+                    <span className="text-[5px] text-slate-350 font-bold">READY</span>
                   </div>
                 </div>
               ) : (