diff --git a/static/js/components/filePreview.js b/static/js/components/filePreview.js
index 0d31b75..f3e7f4e 100644
--- a/static/js/components/filePreview.js
+++ b/static/js/components/filePreview.js
@@ -66,7 +66,7 @@ export class FilePreview {
     }
 
     async previewFile(file) {
-        const contentDiv = document.getElementById(`${this.options.containerId}Content`);
+        const contentDiv = document.getElementById('filePreviewContent');
         const extension = file.name.split('.').pop().toLowerCase();
         
         // Show loading spinner
diff --git a/static/js/file-grid.js b/static/js/file-grid.js
index 2f7043e..6854e25 100644
--- a/static/js/file-grid.js
+++ b/static/js/file-grid.js
@@ -9,6 +9,28 @@
  * - File details display
  */
 
+import { FilePreview } from './components/filePreview.js';
+
+/**
+ * Formats a file size in bytes to a human-readable string.
+ * @param {number} bytes - The file size in bytes
+ * @returns {string} Formatted file size string
+ */
+function formatFileSize(bytes) {
+    if (!bytes) return '0 B';
+    
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let size = bytes;
+    let unitIndex = 0;
+    
+    while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024;
+        unitIndex++;
+    }
+    
+    return `${size.toFixed(1)} ${units[unitIndex]}`;
+}
+
 let currentView = 'grid';
 let lastSelectedIndex = -1;
 let sortColumn = 'name';  // Set default sort column to name
@@ -21,6 +43,14 @@ window.isAdmin = document.body.dataset.isAdmin === 'true';
 // Check if we're on the trash page
 const isTrashPage = window.location.pathname.includes('/trash');
 
+// Initialize FilePreview component
+const filePreview = new FilePreview({
+    containerId: 'filePreviewModal',
+    onClose: () => {
+        // Clean up any resources if needed
+    }
+});
+
 /**
  * Initializes the file view and fetches files.
  * Sets up the preferred view and initial file sorting.
@@ -189,17 +219,31 @@ function renderFiles(files) {
             ${isTrashPage ? `<th onclick="sortFiles('auto_delete')" style="cursor:pointer;">Auto Delete ${(sortColumn==='auto_delete') ? (sortDirection===1?'▲':'▼') : ''}</th>` : ''}
             <th class='file-actions'></th>
         </tr></thead><tbody>`;
+        
         files.forEach((file, idx) => {
-            let icon = file.type === 'folder'
-                ? `<i class='fas fa-folder' style='font-size:1.5rem;color:var(--primary-color);'></i>`
-                : `<i class='fas ${getFileIcon(file.name)}' style='font-size:1.5rem;color:var(--secondary-color);'></i>`;
-            let size = file.size !== '-' ? (file.size > 0 ? (file.size < 1024*1024 ? (file.size/1024).toFixed(1)+' KB' : (file.size/1024/1024).toFixed(2)+' MB') : '0 KB') : '-';
+            let icon = file.type === 'folder' ? 
+                `<i class="fas fa-folder" style="color:var(--primary-color);"></i>` : 
+                `<i class="fas ${getFileIcon(file.name)}" style="color:var(--secondary-color);"></i>`;
+            
+            let size = file.type === 'folder' ? '-' : formatFileSize(file.size);
+            let dblClickAction = file.type === 'folder' ? 
+                `ondblclick='navigateToFolder("${file.name}")'` : '';
+            
             let actionsArr = [];
-            let dblClickAction = '';
-            if (file.type === 'folder') {
-                dblClickAction = `ondblclick=\"window.location.href='/room/${file.room_id}?path=${encodeURIComponent(file.path ? file.path + '/' + file.name : file.name)}'\"`;
-            } else {
-                dblClickAction = `ondblclick=\"window.location.href='/api/rooms/${file.room_id}/files/${encodeURIComponent(file.name)}?path=${encodeURIComponent(file.path)}'\"`;
+            
+            // Add preview button for supported file types
+            if (file.type !== 'folder') {
+                const extension = file.name.split('.').pop().toLowerCase();
+                const supportedTypes = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'mp4', 'webm', 'mp3', 'wav'];
+                
+                if (supportedTypes.includes(extension)) {
+                    actionsArr.push(`
+                        <button class="btn btn-sm file-action-btn" title="Preview" onclick="event.stopPropagation(); previewFile(${idx})"
+                            style="background-color:var(--primary-opacity-8);color:var(--primary-color);">
+                            <i class="fas fa-eye"></i>
+                        </button>
+                    `);
+                }
             }
 
             if (isTrashPage) {
@@ -225,16 +269,29 @@ function renderFiles(files) {
         grid.innerHTML = table;
     } else {
         files.forEach((file, idx) => {
-            let icon = file.type === 'folder'
-                ? `<i class='fas fa-folder' style='font-size:2.5rem;color:var(--primary-color);'></i>`
-                : `<i class='fas ${getFileIcon(file.name)}' style='font-size:2.5rem;color:var(--secondary-color);'></i>`;
-            let size = file.size !== '-' ? (file.size > 0 ? (file.size < 1024*1024 ? (file.size/1024).toFixed(1)+' KB' : (file.size/1024/1024).toFixed(2)+' MB') : '0 KB') : '-';
+            let icon = file.type === 'folder' ? 
+                `<i class="fas fa-folder" style="color:var(--primary-color);"></i>` : 
+                `<i class="fas ${getFileIcon(file.name)}" style="color:var(--secondary-color);"></i>`;
+            
+            let size = file.type === 'folder' ? '-' : formatFileSize(file.size);
+            let dblClickAction = file.type === 'folder' ? 
+                `ondblclick='navigateToFolder("${file.name}")'` : '';
+            
             let actionsArr = [];
-            let dblClickAction = '';
-            if (file.type === 'folder') {
-                dblClickAction = `ondblclick=\"window.location.href='/room/${file.room_id}?path=${encodeURIComponent(file.path ? file.path + '/' + file.name : file.name)}'\"`;
-            } else {
-                dblClickAction = `ondblclick=\"window.location.href='/api/rooms/${file.room_id}/files/${encodeURIComponent(file.name)}?path=${encodeURIComponent(file.path)}'\"`;
+            
+            // Add preview button for supported file types
+            if (file.type !== 'folder') {
+                const extension = file.name.split('.').pop().toLowerCase();
+                const supportedTypes = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'mp4', 'webm', 'mp3', 'wav'];
+                
+                if (supportedTypes.includes(extension)) {
+                    actionsArr.push(`
+                        <button class="btn btn-sm file-action-btn" title="Preview" onclick="event.stopPropagation(); previewFile(${idx})"
+                            style="background-color:var(--primary-opacity-8);color:var(--primary-color);">
+                            <i class="fas fa-eye"></i>
+                        </button>
+                    `);
+                }
             }
 
             if (isTrashPage) {
@@ -606,6 +663,30 @@ function formatDate(dateString) {
     return date.toLocaleString();
 }
 
+// Add previewFile function
+async function previewFile(index) {
+    const file = currentFiles[index];
+    if (!file) return;
+
+    const fileUrl = `/api/rooms/${file.room_id}/files/${encodeURIComponent(file.name)}?path=${encodeURIComponent(file.path || '')}&preview=true`;
+    
+    await filePreview.previewFile({
+        name: file.name,
+        url: fileUrl
+    });
+}
+
+// Make functions globally accessible
+window.previewFile = previewFile;
+window.restoreFile = restoreFile;
+window.showPermanentDeleteModal = showPermanentDeleteModal;
+window.showDetailsModal = showDetailsModal;
+window.toggleStar = toggleStar;
+window.sortFiles = sortFiles;
+window.navigateToFile = navigateToFile;
+window.showEmptyTrashModal = showEmptyTrashModal;
+window.permanentDeleteFile = permanentDeleteFile;
+
 // Initialize search functionality
 document.addEventListener('DOMContentLoaded', function() {
     initializeView();
diff --git a/static/js/rooms/viewManager.js b/static/js/rooms/viewManager.js
index 33926e2..0905864 100644
--- a/static/js/rooms/viewManager.js
+++ b/static/js/rooms/viewManager.js
@@ -27,7 +27,7 @@ export class ViewManager {
         this.sortColumn = 'name';
         this.sortDirection = 'asc';
         this.filePreview = new FilePreview({
-            containerId: 'roomFilePreviewModal',
+            containerId: 'filePreviewModal',
             onClose: () => {
                 // Clean up any resources if needed
             }
diff --git a/templates/components/file_preview_modal.html b/templates/components/file_preview_modal.html
new file mode 100644
index 0000000..9a03706
--- /dev/null
+++ b/templates/components/file_preview_modal.html
@@ -0,0 +1,27 @@
+<!-- File Preview Modal -->
+<div class="modal fade" id="filePreviewModal" tabindex="-1" aria-labelledby="filePreviewModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="filePreviewModalLabel">File Preview</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body p-0">
+                <div id="filePreviewContent" class="d-flex justify-content-center align-items-center" style="min-height: 400px;">
+                    <div class="text-center">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <p class="mt-2 text-muted">Loading preview...</p>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <a id="downloadPreviewBtn" href="#" class="btn btn-primary" download>
+                    <i class="fas fa-download me-1"></i>Download
+                </a>
+            </div>
+        </div>
+    </div>
+</div> 
\ No newline at end of file
diff --git a/templates/rooms/room.html b/templates/rooms/room.html
index 2fb2852..fb27a19 100644
--- a/templates/rooms/room.html
+++ b/templates/rooms/room.html
@@ -248,7 +248,7 @@
 </div>
 
 <!-- Move Modal -->
-<div class="modal fade" id="moveModal" tabindex="-1" aria-labelledby="moveModalLabel" aria-hidden="true">
+<div id="moveModal" class="modal fade" tabindex="-1" aria-labelledby="moveModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
@@ -272,6 +272,10 @@
         </div>
     </div>
 </div>
+
+<!-- Include modals -->
+{% include 'components/details_modal.html' %}
+{% include 'components/file_preview_modal.html' %}
 {% endblock %}
 
 {% block extra_js %}
diff --git a/templates/settings/tabs/events.html b/templates/settings/tabs/events.html
index 7374daf..e6418c1 100644
--- a/templates/settings/tabs/events.html
+++ b/templates/settings/tabs/events.html
@@ -14,6 +14,7 @@
                     <option value="file_upload">File Upload</option>
                     <option value="file_delete">File Delete</option>
                     <option value="file_download">File Download</option>
+                    <option value="file_preview">File Preview</option>
                     <option value="file_restore">File Restore</option>
                     <option value="file_move">File Move</option>
                     <option value="file_rename">File Rename</option>
@@ -90,6 +91,8 @@
                                     <span class="badge bg-danger">File Delete</span>
                                 {% elif event.event_type == 'file_download' %}
                                     <span class="badge bg-info">File Download</span>
+                                {% elif event.event_type == 'file_preview' %}
+                                    <span class="badge bg-info">File Preview</span>
                                 {% elif event.event_type == 'file_restore' %}
                                     <span class="badge bg-warning">File Restore</span>
                                 {% elif event.event_type == 'file_move' %}
diff --git a/templates/starred/starred.html b/templates/starred/starred.html
index ee55f1e..277272a 100644
--- a/templates/starred/starred.html
+++ b/templates/starred/starred.html
@@ -38,9 +38,10 @@
 </div>
 
 {% include 'components/details_modal.html' %}
+{% include 'components/file_preview_modal.html' %}
 {% endblock %}
 
 {% block extra_js %}
-<script src="{{ url_for('static', filename='js/file-grid.js', v=config.CSS_VERSION) }}"></script>
+<script type="module" src="{{ url_for('static', filename='js/file-grid.js', v=config.CSS_VERSION) }}"></script>
 <script src="{{ url_for('static', filename='js/starred.js', v=config.CSS_VERSION) }}"></script>
 {% endblock %} 
\ No newline at end of file
diff --git a/templates/trash/trash.html b/templates/trash/trash.html
index dd14264..552c455 100644
--- a/templates/trash/trash.html
+++ b/templates/trash/trash.html
@@ -44,9 +44,10 @@
 {% include 'components/details_modal.html' %}
 {% include 'components/permanent_delete_modal.html' %}
 {% include 'components/empty_trash_modal.html' %}
+{% include 'components/file_preview_modal.html' %}
 {% endblock %}
 
 {% block extra_js %}
-<script src="{{ url_for('static', filename='js/file-grid.js', v=config.CSS_VERSION) }}"></script>
+<script type="module" src="{{ url_for('static', filename='js/file-grid.js', v=config.CSS_VERSION) }}"></script>
 <script src="{{ url_for('static', filename='js/trash.js', v=config.CSS_VERSION) }}"></script>
 {% endblock %} 
\ No newline at end of file