diff --git a/src/main/resources/static/js/script.js b/src/main/resources/static/js/script.js
index 3f11fc0..3917ef6 100644
--- a/src/main/resources/static/js/script.js
+++ b/src/main/resources/static/js/script.js
@@ -39,4 +39,20 @@ function deleteSelected() {
         form.action = '/files/bulk-delete'; // Backend endpoint for bulk delete
         form.submit();
     }
+}
+
+// Handle file upload, check file type
+function validateFile() {
+    const fileInput = document.getElementById('file');
+    const filePath = fileInput.value;
+    const allowedExtensions = /(\.mp3|\.mp4|\.mpeg|\.mpga|\.m4a|\.wav|\.webm)$/i;
+    const maxSize = 10 * 1024 * 1024; // 10 MB
+
+    if (!allowedExtensions.exec(filePath)) {
+        alert('Invalid file type. Please upload an audio file (mp3, mp4, mpeg, mpga, m4a, wav, webm).');
+        fileInput.value = '';
+        return false;
+    }
+
+    return true;
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/file-management.html b/src/main/resources/templates/file-management.html
index dda4084..66ef4c5 100644
--- a/src/main/resources/templates/file-management.html
+++ b/src/main/resources/templates/file-management.html
@@ -34,7 +34,8 @@
         <form th:action="@{/files/upload}" method="post" enctype="multipart/form-data">
             <div class="mb-3">
                 <label for="file" class="form-label">Choose File</label>
-                <input type="file" id="file" name="file" class="form-control" required>
+                <input type="file" id="file" name="file" class="form-control" required
+                       accept=".mp3,.mp4,.mpeg,.mpga,.m4a,.wav,.webm" onchange="validateFile()">
             </div>
             <div class="mb-3">
                 <label for="language" class="form-label">Select Language</label>