diff --git a/package-lock.json b/package-lock.json
index 6cb860a9..2b6072b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -72,6 +72,7 @@
         "qrcode": "^1.5.4",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-h5-audio-player": "^3.10.1",
         "react-hook-form": "^7.60.0",
         "react-i18next": "^15.7.3",
         "react-icons": "^5.5.0",
@@ -2023,6 +2024,27 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify/react": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@iconify/react/-/react-5.2.1.tgz",
+      "integrity": "sha512-37GDR3fYDZmnmUn9RagyaX+zca24jfVOMY8E1IXTqJuE8pxNtN51KWPQe3VODOWvuUurq7q9uUu3CFrpqj5Iqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
     "node_modules/@isaacs/balanced-match": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
@@ -14076,6 +14098,20 @@
         "react": "^19.1.1"
       }
     },
+    "node_modules/react-h5-audio-player": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/react-h5-audio-player/-/react-h5-audio-player-3.10.1.tgz",
+      "integrity": "sha512-r6fSj9WXR6af1kxH5qQ/tawwDK4KrMfayiVCUettLYGX/KZ3BH8OGuaZP4O5KD0AxwsKAXtBv4kVQCWFzaIrUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.2",
+        "@iconify/react": "^5"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.62.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.62.0.tgz",
diff --git a/package.json b/package.json
index 1480b346..860c5925 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "qrcode": "^1.5.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-h5-audio-player": "^3.10.1",
     "react-hook-form": "^7.60.0",
     "react-i18next": "^15.7.3",
     "react-icons": "^5.5.0",
diff --git a/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx b/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx
index dfc8fb58..b4fe4855 100644
--- a/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx	
+++ b/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx	
@@ -53,6 +53,8 @@ import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { PhotoProvider, PhotoView } from "react-photo-view";
 import "react-photo-view/dist/react-photo-view.css";
 import ReactPlayer from "react-player";
+import AudioPlayer from "react-h5-audio-player";
+import "react-h5-audio-player/lib/styles.css";
 
 interface FileItem {
   name: string;
@@ -851,25 +853,85 @@ export function FileViewer({
           </div>
         )}
 
-        {/* Audio file preview */}
+        {/* Audio file preview with react-h5-audio-player */}
         {fileTypeInfo.type === "audio" && !showLargeFileWarning && (
           <div className="p-6 flex items-center justify-center h-full">
-            <div className="text-center">
-              <div
-                className={cn(
-                  "w-24 h-24 mx-auto mb-4 rounded-full bg-pink-100 flex items-center justify-center",
-                  fileTypeInfo.color,
-                )}
-              >
-                <Music className="w-12 h-12" />
-              </div>
-              <audio
-                controls
-                className="w-full max-w-md"
-                src={`data:audio/*;base64,${content}`}
-              >
-                Your browser does not support audio playback.
-              </audio>
+            <div className="w-full max-w-2xl">
+              {(() => {
+                const ext = file.name.split('.').pop()?.toLowerCase() || '';
+                const mimeType = (() => {
+                  switch (ext) {
+                    case 'mp3': return 'audio/mpeg';
+                    case 'wav': return 'audio/wav';
+                    case 'flac': return 'audio/flac';
+                    case 'ogg': return 'audio/ogg';
+                    case 'aac': return 'audio/aac';
+                    case 'm4a': return 'audio/mp4';
+                    default: return 'audio/mpeg';
+                  }
+                })();
+
+                const audioUrl = `data:${mimeType};base64,${content}`;
+
+                return (
+                  <div className="space-y-4">
+                    {/* Album artwork placeholder */}
+                    <div className="flex justify-center">
+                      <div
+                        className={cn(
+                          "w-32 h-32 rounded-lg bg-gradient-to-br from-pink-100 to-purple-100 flex items-center justify-center shadow-lg",
+                          fileTypeInfo.color,
+                        )}
+                      >
+                        <Music className="w-16 h-16 text-pink-600" />
+                      </div>
+                    </div>
+
+                    {/* Track info */}
+                    <div className="text-center">
+                      <h3 className="font-semibold text-foreground text-lg mb-1">
+                        {file.name.replace(/\.[^/.]+$/, "")}
+                      </h3>
+                      <p className="text-sm text-muted-foreground">
+                        {ext.toUpperCase()} • {formatFileSize(file.size, t)}
+                      </p>
+                    </div>
+
+                    {/* Audio Player */}
+                    <div className="rounded-lg overflow-hidden">
+                      <AudioPlayer
+                        src={audioUrl}
+                        onPlay={() => {
+                          console.log('Audio playback started');
+                        }}
+                        onPause={() => {
+                          console.log('Audio playback paused');
+                        }}
+                        onLoadedMetadata={(e) => {
+                          const audio = e.currentTarget;
+                          console.log('Audio metadata loaded, duration:', audio.duration);
+
+                          // Get audio dimensions for window sizing (use a standard audio player height)
+                          if (onMediaDimensionsChange) {
+                            onMediaDimensionsChange({
+                              width: 600,
+                              height: 400
+                            });
+                          }
+                        }}
+                        onError={(e) => {
+                          console.error('Audio playback error:', e);
+                        }}
+                        showJumpControls={false}
+                        showSkipControls={false}
+                        showDownloadProgress={true}
+                        customAdditionalControls={[]}
+                        customVolumeControls={[]}
+                      />
+                    </div>
+                  </div>
+                );
+              })()}
             </div>
           </div>
         )}