diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index f55e73b434bf9b10edcb6a48ef561b969064a9dc..67bc487a72f692460b46b79cf120002724cfe446 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -743,8 +743,12 @@
 			// from here work on the display name
 			name = fileData.displayName || name;
 
+			// show hidden files (starting with a dot) completely in gray
+			if(name.indexOf('.') === 0) {
+				basename = '';
+				extension = name;
 			// split extension from filename for non dirs
-			if (type !== 'dir' && name.indexOf('.') !== -1) {
+			} else if (type !== 'dir' && name.indexOf('.') !== -1) {
 				basename = name.substr(0, name.lastIndexOf('.'));
 				extension = name.substr(name.lastIndexOf('.'));
 			} else {
diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js
index bd3620e4b309f87199583bef4f1deafe9fc44b09..153cbe52c10a5731fa7b568b374dd502a1fff57d 100644
--- a/apps/files/tests/js/filelistSpec.js
+++ b/apps/files/tests/js/filelistSpec.js
@@ -359,6 +359,25 @@ describe('OCA.Files.FileList tests', function() {
 			expect($('#emptycontent').hasClass('hidden')).toEqual(true);
 			expect(fileList.isEmpty).toEqual(false);
 		});
+		it('correctly adds the extension markup and show hidden files completely in gray', function() {
+			var $tr;
+			var testDataAndExpectedResult = [
+				{file: {type: 'file', name: 'ZZZ.txt'}, extension: '.txt'},
+				{file: {type: 'file', name: 'ZZZ.tar.gz'}, extension: '.gz'},
+				{file: {type: 'file', name: 'test.with.some.dots.in.it.txt'}, extension: '.txt'},
+				// we render hidden files completely in gray
+				{file: {type: 'file', name: '.test.with.some.dots.in.it.txt'}, extension: '.test.with.some.dots.in.it.txt'},
+				{file: {type: 'file', name: '.hidden'}, extension: '.hidden'},
+			];
+			fileList.setFiles(testFiles);
+
+			for(var i = 0; i < testDataAndExpectedResult.length; i++) {
+				var testSet = testDataAndExpectedResult[i];
+				var fileData = testSet['file'];
+				$tr = fileList.add(fileData);
+				expect($tr.find('.nametext .extension').text()).toEqual(testSet['extension']);
+			}
+		});
 	});
 	describe('Removing files from the list', function() {
 		it('Removes file from list when calling remove() and updates summary', function() {