diff --git a/index.html b/index.html
index d29ef22..d037237 100644
--- a/index.html
+++ b/index.html
@@ -109,6 +109,7 @@ <h3 style="margin-left: 10px;">Filter Images</h3>
 
       <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
       <script src="main.js"></script>
+      <script src="./js/utils.js"></script>
       <script src="./js/nav.js"></script>
       <script src="./js/charts.js"></script>
       <script src="./js/home.js"></script>
diff --git a/js/detail.js b/js/detail.js
index aa0a521..c9c0789 100644
--- a/js/detail.js
+++ b/js/detail.js
@@ -26,7 +26,7 @@ $("#add-image").submit(function(e) {
 
 	async.forEachOfSeries(paths_global, function(item, index, done) {
 		var filename = path.basename(paths_global[index]).split(".")[0];
-		database.add_image(filename, paths_global[index], _currentProj, alert_image_upload);
+		database.add_image(nospaces(filename), paths_global[index], _currentProj, alert_image_upload);
 		done();
 	}, function(err) {
 		if (err) {
@@ -380,7 +380,7 @@ function insertErrorTemplate(error, id) {
 		'<div class="col-md-8">',
 			'<div class="row">',
 				'<div class="col-md-9">',
-					'<h3 style="word-wrap:break-word;" style="display: inline;">{{name}}</h3>',
+					'<h3 style="word-wrap:break-word;" style="display: inline;">{{displayName}}</h3>',
 				'</div>',
 				'<div class="col-md-3">',
 					'<div style="display: inline;" class="dropdown">',
@@ -485,6 +485,7 @@ function loadHeader(project) {
 		let paths = electron.remote.dialog.showOpenDialog({properties: ['openFile', 'multiSelections']});
 		async.forEachOfSeries(paths, function(item, index, done) {
 			var filename = path.basename(paths[index]).split(".")[0];
+			filename = nospaces(filename)
 			database.add_image(filename, paths[index], project['name'], index, paths.length, alert_image_upload);
 			done();
 		}, function(err) {
@@ -500,9 +501,8 @@ function insertDetailTemplate(img_name, img_path, proj_name) {
 }
 
 function insertDetailTemplate__NEW(data, id, path, projname) {
+	data.displayName = withspaces(data.name)
 	insertIntoSlideMenu(data, id);
-	console.log('id', id)
-	console.log('path', path)
 	data.id = id;
 
 	if (data.error) {
@@ -559,7 +559,7 @@ function insertDetailTemplate__NEW(data, id, path, projname) {
 	var template = [
 		'<div class="col-md-4 col-xs-6">',
 			'<div class="row name-row">',
-				'<h3 class="image-name">{{name}}</h3>',
+				'<h3 class="image-name">{{displayName}}</h3>',
 				'<div class="dropdown" style="display:inline; float:right">',
 					'<button class="settings-button btn btn-outline-secondary float-right dropdown-toggle" style="background-color: #89cafd; margin-bottom: 2px; color: white" type="button" id="dropdown' + id + '" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">',
 						'<i class="material-icons icon" style="height:25px;width:15px;font-size:15px;">settings</i>',
diff --git a/js/new.js b/js/new.js
index 2cb9846..5778ae9 100644
--- a/js/new.js
+++ b/js/new.js
@@ -55,7 +55,7 @@ function populate_project_with_images(bool, project_name, img_paths) {
 	/* Populate newly created project with provided images. */
 	for (var index in img_paths) {
 		var filename = path.basename(img_paths[index]).split(".")[0];
-		database.add_image(filename, img_paths[index], project_name, index, img_paths.length, alert_image_upload);
+		database.add_image(nospaces(filename), img_paths[index], project_name, index, img_paths.length, alert_image_upload);
 	}
 }
 
diff --git a/js/utils.js b/js/utils.js
new file mode 100644
index 0000000..2f80974
--- /dev/null
+++ b/js/utils.js
@@ -0,0 +1,7 @@
+function nospaces(str) {
+  return str.replace(/ /g, "…");
+}
+
+function withspaces(str) {
+  return str.replace(/…/g, " ");
+}