diff --git a/backend/test.xlsx b/backend/test.xlsx
new file mode 100644
index 0000000..3eb5c6e
Binary files /dev/null and b/backend/test.xlsx differ
diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index 000a4f1..9acfcd3 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -8,7 +8,7 @@ import {
   MoreVertical, Star, Download, Pencil, Copy, Move,
   FolderPlus, ArrowUp, X, Check, RefreshCw, Info, Link as LinkIcon, Image as ImageIcon, Film as FilmIcon, Home,
   Sun, Moon, Music as MusicIcon, Code as CodeIcon, Archive as ArchiveIcon, CornerDownRight,
-  CheckCircle, AlertCircle, Menu, FileText, Presentation
+  CheckCircle, AlertCircle, Menu, FileText, Presentation, FileSpreadsheet
 } from 'lucide-react';
 import api from '@/lib/api';
 import { useIsMobile } from '@/hooks/useIsMobile';
@@ -1172,7 +1172,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
     if (ext === 'docx' || ext === 'doc') {
       return (
         <div className={`${large ? 'w-20 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#2B579A]`}>
-          W
+          <FileText className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
         </div>
       );
     }
@@ -1180,15 +1180,15 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
     if (ext === 'pptx' || ext === 'ppt') {
       return (
         <div className={`${large ? 'w-28 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#D24726]`}>
-          P
+          <Presentation className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
         </div>
       );
     }
 
     if (ext === 'xlsx' || ext === 'xls') {
       return (
-        <div className={`${large ? 'w-20 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#107C41]`}>
-          X
+        <div className={`${large ? 'w-28 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#107C41]`}>
+          <FileSpreadsheet className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
         </div>
       );
     }
@@ -1951,7 +1951,10 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
           <OfficeHome 
             type={appMode} 
             onFileSelect={(file) => setEditingFile(file)} 
-            onCreateBlank={(file) => setEditingFile(file)}
+            onCreateBlank={(file) => {
+              setEditingFile(file);
+              loadFiles();
+            }}
             onPinChange={() => setPinnedRefreshCounter(c => c + 1)}
           />
         ) : (
diff --git a/frontend/src/components/OfficeHome.tsx b/frontend/src/components/OfficeHome.tsx
index d7bf363..1066313 100644
--- a/frontend/src/components/OfficeHome.tsx
+++ b/frontend/src/components/OfficeHome.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Plus, Pencil, Trash2, Pin } from 'lucide-react';
+import { Plus, Pencil, Trash2, Pin, FileText, Presentation, FileSpreadsheet } from 'lucide-react';
 import api from '@/lib/api';
 
 interface FileItem {
@@ -23,8 +23,8 @@ interface OfficeHomeProps {
 // Custom Word icon (blue)
 function WordIcon({ className }: { className?: string }) {
   return (
-    <div className={`flex items-center justify-center font-black tracking-tighter text-white bg-[#2B579A] rounded-lg ${className || ''}`}>
-      W
+    <div className={`flex items-center justify-center text-white bg-[#2B579A] rounded-lg ${className || ''}`}>
+      <FileText className="w-[55%] h-[55%]" />
     </div>
   );
 }
@@ -32,8 +32,8 @@ function WordIcon({ className }: { className?: string }) {
 // Custom PowerPoint icon (orange)
 function PptIcon({ className }: { className?: string }) {
   return (
-    <div className={`flex items-center justify-center font-black tracking-tighter text-white bg-[#D24726] rounded-lg ${className || ''}`}>
-      P
+    <div className={`flex items-center justify-center text-white bg-[#D24726] rounded-lg ${className || ''}`}>
+      <Presentation className="w-[55%] h-[55%]" />
     </div>
   );
 }
@@ -41,8 +41,8 @@ function PptIcon({ className }: { className?: string }) {
 // Custom Excel icon (green)
 function SheetIcon({ className }: { className?: string }) {
   return (
-    <div className={`flex items-center justify-center font-black tracking-tighter text-white bg-[#107C41] rounded-lg ${className || ''}`}>
-      X
+    <div className={`flex items-center justify-center text-white bg-[#107C41] rounded-lg ${className || ''}`}>
+      <FileSpreadsheet className="w-[55%] h-[55%]" />
     </div>
   );
 }
@@ -229,7 +229,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
         <button 
           onClick={() => !isRenaming && onFileSelect(file)}
           onContextMenu={(e) => handleContextMenu(e, file)}
-          className={`w-full ${type === 'slides' ? 'aspect-[1.4/1]' : 'aspect-[1/1.4]'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm overflow-hidden relative`}
+          className={`w-full ${type === 'docs' ? 'aspect-[1/1.4]' : 'aspect-[1.4/1]'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm overflow-hidden relative`}
           style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
         >
           <Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />
@@ -273,7 +273,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
             <div className="flex flex-col gap-3">
               <button
                 onClick={handleCreateBlank}
-                className={`${type === 'slides' ? 'w-52 h-40' : 'w-40 h-52'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm group`}
+                className={`${type === 'docs' ? 'w-40 h-52' : 'w-52 h-40'} rounded-lg border hover:border-blue-500 transition-colors flex items-center justify-center shadow-sm group`}
                 style={{ backgroundColor: 'var(--color-bg-elevated)', borderColor: 'var(--color-border)' }}
               >
                 <Plus className="w-12 h-12 text-gray-300 group-hover:text-blue-500 transition-colors" />