diff --git a/app/js/app_ui_files.js b/app/js/app_ui_files.js
index 2e24aa2..87c824b 100644
--- a/app/js/app_ui_files.js
+++ b/app/js/app_ui_files.js
@@ -55,7 +55,9 @@ async function render_event_file_records() {
         if (file_li_node.getAttribute('data-for_type') == tbl_for_type && file_li_node.getAttribute('data-for_id') == tbl_for_id) {
           console.log('This file is still for_type='+tbl_for_type+' and for_id='+tbl_for_id+'.');
           file_li_node.setAttribute('data-filename', tbl_filename);
-          file_li_node.getElementsByClassName('filename')[0].innerHTML = tbl_filename;
+          
+          let new_filename = shorten_filename(tbl_filename);
+          file_li_node.getElementsByClassName('filename')[0].innerHTML = new_filename;
           try {
             file_li_node.getElementsByClassName('file_meta')[0].innerHTML = format_bytes(tbl_size, 2)+'; '+dateFns.format(tbl_created_on, 'MMM M h:mm A')+'; '+tbl_internal_os;
           } catch(err) {
@@ -122,15 +124,18 @@ async function render_event_file_records() {
           
           file_li_node.setAttribute('data-internal_os', tbl_internal_os);
           
-          file_li_node.title = 'id='+tbl_file_id+' for_type='+tbl_for_type+' for_id='+tbl_for_id+' updated_on='+dateFns.format(tbl_updated_on, 'YYYY-MM-DD HH:mm:ss A');
+          file_li_node.title = 'Click to open "'+tbl_filename+'" | id='+tbl_file_id+' | for_type='+tbl_for_type+' | for_id='+tbl_for_id+' | updated_on='+dateFns.format(tbl_updated_on, 'YYYY-MM-DD HH:mm:ss A');
           
           let file_fa_span_node = document.createElement('SPAN');
           file_fa_span_node.className = 'fas fa-external-link-alt';
           
           let file_filename_span_node = document.createElement('SPAN');
+          
+          
           file_filename_span_node.className = 'filename';
           
-          let filename_text_node = document.createTextNode(tbl_filename);
+          let new_filename = shorten_filename(tbl_filename);
+          let filename_text_node = document.createTextNode(new_filename);
           file_filename_span_node.appendChild(filename_text_node);
           
           file_li_node.appendChild(file_fa_span_node);
diff --git a/app/js/app_ui_misc.js b/app/js/app_ui_misc.js
index 1e6c0f6..2f093f4 100644
--- a/app/js/app_ui_misc.js
+++ b/app/js/app_ui_misc.js
@@ -112,7 +112,7 @@ function index_open_file_buttons(class_name) {
   console.log('Indexing open file buttons...');
   console.log('****************** Indexing ******************');
   var class_elements = document.getElementsByClassName(class_name);
-  console.log(class_elements);
+  //console.log(class_elements);
   
   for (var i = 0; i < class_elements.length; i++) {
     // Do not use an anonymous function. If you do then it will keep adding event listeners.
@@ -155,3 +155,24 @@ function format_bytes(bytes, decimals = 2) {
 
     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 }
+
+function shorten_filename(filename) {
+  let length = filename.length;
+  let char_over = filename.length-45;
+  let new_filename = null;
+  let wildcards = char_over;
+  if (char_over > 0) {
+    let part1 = filename.slice(0, 20);
+    if (char_over > 5) {
+      wildcards = 5;
+    } else {
+    }
+    let part2 = '.'.repeat(wildcards);
+    let part3 = filename.slice(-20);
+    
+    new_filename = part1+part2+part3;
+  } else {
+    new_filename = filename;
+  }
+  return new_filename;
+}