diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index dbb727b..defb715 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -788,7 +788,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
 
     if (ext === 'pdf') {
       return (
-        <div className={`${large ? 'w-20 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px]'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#ea4335]`}>
+        <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-[#ea4335]`}>
           PDF
         </div>
       );
@@ -797,7 +797,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
     const fallbackIcon = (() => {
       if (isImage) {
         return (
-          <div className={`${large ? 'w-20 h-20 rounded-2xl' : 'w-5 h-5 rounded'} flex items-center justify-center shadow-sm text-white bg-[#3b82f6]`}>
+          <div className={`${large ? 'w-20 h-20 rounded-2xl' : 'w-5 h-5 rounded flex-shrink-0 aspect-square'} flex items-center justify-center shadow-sm text-white bg-[#3b82f6]`}>
             <ImageIcon className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
           </div>
         );
@@ -805,7 +805,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
 
       if (isVideo) {
         return (
-          <div className={`${large ? 'w-20 h-20 rounded-2xl' : 'w-5 h-5 rounded'} flex items-center justify-center shadow-sm text-white bg-[#a855f7]`}>
+          <div className={`${large ? 'w-20 h-20 rounded-2xl' : 'w-5 h-5 rounded flex-shrink-0 aspect-square'} flex items-center justify-center shadow-sm text-white bg-[#a855f7]`}>
             <FilmIcon className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
           </div>
         );
@@ -813,7 +813,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
 
       if (['mp3', 'wav', 'flac', 'ogg', 'm4a'].includes(ext)) {
         return (
-          <div className={`${large ? 'w-20 h-20 rounded-2xl' : 'w-5 h-5 rounded'} flex items-center justify-center shadow-sm text-white bg-[#ec4899]`}>
+          <div className={`${large ? 'w-20 h-20 rounded-2xl' : 'w-5 h-5 rounded flex-shrink-0 aspect-square'} flex items-center justify-center shadow-sm text-white bg-[#ec4899]`}>
             <MusicIcon className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
           </div>
         );
@@ -821,7 +821,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
 
       if (['js', 'ts', 'jsx', 'tsx', 'py', 'go', 'rs', 'java', 'c', 'cpp', 'html', 'css', 'json'].includes(ext)) {
         return (
-          <div className={`${large ? 'w-20 h-20 rounded-2xl' : 'w-5 h-5 rounded'} flex items-center justify-center shadow-sm text-white bg-[#f59e0b]`}>
+          <div className={`${large ? 'w-20 h-20 rounded-2xl' : 'w-5 h-5 rounded flex-shrink-0 aspect-square'} flex items-center justify-center shadow-sm text-white bg-[#f59e0b]`}>
             <CodeIcon className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
           </div>
         );
@@ -829,7 +829,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
 
       if (['zip', 'tar', 'gz', 'rar', '7z'].includes(ext)) {
         return (
-          <div className={`${large ? 'w-20 h-20 rounded-2xl' : 'w-5 h-5 rounded'} flex items-center justify-center shadow-sm text-white bg-[#14b8a6]`}>
+          <div className={`${large ? 'w-20 h-20 rounded-2xl' : 'w-5 h-5 rounded flex-shrink-0 aspect-square'} flex items-center justify-center shadow-sm text-white bg-[#14b8a6]`}>
             <ArchiveIcon className={large ? "w-10 h-10 text-white" : "w-3 h-3 text-white"} />
           </div>
         );