diff --git a/include/RedDAV/RedBrowser.php b/include/RedDAV/RedBrowser.php
index 78aacf92b..6b0c77014 100644
--- a/include/RedDAV/RedBrowser.php
+++ b/include/RedDAV/RedBrowser.php
@@ -173,6 +173,7 @@ class RedBrowser extends DAV\Browser\Plugin {
 			$type = $this->escapeHTML($type);
 
 			$icon = '';
+
 			if ($this->enableAssets) {
 				$node = $this->server->tree->getNodeForPath(($path ? $path . '/' : '') . $name);
 				foreach (array_reverse($this->iconMap) as $class=>$iconName) {
@@ -209,6 +210,7 @@ class RedBrowser extends DAV\Browser\Plugin {
 			$ft['size'] = $size;
 			$ft['sizeFormatted'] = $this->userReadableSize($size);
 			$ft['lastmodified'] = (($lastmodified) ? datetime_convert('UTC', date_default_timezone_get(), $lastmodified) : '');
+			$ft['iconFromType'] = $this->getIconFromType($type);
 
 			$f[] = $ft;
 		}
@@ -325,6 +327,45 @@ class RedBrowser extends DAV\Browser\Plugin {
 		return z_root() . '/cloud/?sabreAction=asset&assetName=' . urlencode($assetName);
 	}
 
+	/**
+	 * @brief returns icon name for use with e.g. font-awesome based on filetype
+	 *
+	 * @param string $type
+	 * @return string
+	 */
+	protected function getIconFromType($type) {
+		$iconMap = array(
+					//Folder
+					t('Collection') => 'icon-folder-close',
+
+					//Common file
+					'application/octet-stream' => 'icon-file-alt',
+
+					//Text
+					'application/msword' => 'icon-file-text-alt',
+					'application/pdf' => 'icon-file-text-alt',
+					'application/vnd.oasis.opendocument.text' => 'icon-file-text-alt',
+
+					//Spreadsheet
+					 'application/vnd.oasis.opendocument.spreadsheet' => 'icon-table',
+
+					//Image
+					'image/jpeg' => 'icon-picture',
+					'image/png' => 'icon-picture',
+					'image/gif' => 'icon-picture',
+					'image/svg+xml' => 'icon-picture',
+				);
+
+		$iconFromType = 'icon-file-alt';
+
+		if (array_key_exists($type, $iconMap))
+			{
+			    $iconFromType = $iconMap[$type];
+			}
+
+		return $iconFromType;
+	}
+
 	/**
 	 * @brief Return the hash of an attachment.
 	 *
diff --git a/view/css/mod_cloud.css b/view/css/mod_cloud.css
index cc5fe890f..85d3f4ec6 100644
--- a/view/css/mod_cloud.css
+++ b/view/css/mod_cloud.css
@@ -1,5 +1,18 @@
 #files-mkdir-tools,
-#files-upload-tools {
+#files-upload-tools,
+[id^="perms-panel-"] {
 	display: none;
 }
 
+#cloud-index {
+	width: 100%;
+}
+
+#cloud-index td:nth-child(1){
+	padding: 3px 4px 3px 0px;
+}
+
+.cloud-index-tool {
+	padding: 3px 4px;
+}
+
diff --git a/view/js/main.js b/view/js/main.js
index f49cea78c..f979f6b6f 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -844,11 +844,11 @@ function updateConvItems(mode,data) {
 	}
 
 	function filestorage(event,nick,id) {
-		$('#perms-panel-' + last_filestorage_id).html('');
+		$('#perms-panel-' + last_filestorage_id).hide().html('');
 		$('#file-edit-' + id).spin('tiny');
 		delete acl;
 		$.get('filestorage/' + nick + '/' + id + '/edit', function(data) {
-			$('#perms-panel-' + id).html(data);
+			$('#perms-panel-' + id).html(data).show();
 			$('#file-edit-' + id).spin(false);
 			last_filestorage_id = id;
 		});
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 0d1f45bda..7a6c13798 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1234,10 +1234,6 @@ footer {
 	margin-bottom: 15px;
 }
 
-#cloud-index td {
-	padding:5px;
-}
-
 /**
  * Plugins settings
  */
diff --git a/view/tpl/cloud_directory.tpl b/view/tpl/cloud_directory.tpl
index f37895e09..99bba9474 100644
--- a/view/tpl/cloud_directory.tpl
+++ b/view/tpl/cloud_directory.tpl
@@ -1,43 +1,41 @@
-<div class="generic-content-wrapper-styled">
+<div class="section-content-wrapper generic-content-wrapper">
+	<table id="cloud-index">
+		<tr>
+			<th></th>
+			<th>{{$name}}</th>
+			<th></th><th></th><th></th><th></th>
+			<th>{{*{{$type}}*}}</th>
+			<th class="hidden-xs">{{$size}}</th>
+			<th class="hidden-xs">{{$lastmod}}</th>
+		</tr>
+	{{if $parentpath}}
+		<tr>
+			<td><i class="icon-level-up"></i>{{*{{$parentpath.icon}}*}}</td>
+			<td><a href="{{$parentpath.path}}" title="{{$parent}}">..</a></td>
+			<td></td><td></td><td></td><td></td>
+			<td>{{*[{{$parent}}]*}}</td>
+			<td class="hidden-xs"></td>
+			<td class="hidden-xs"></td>
+		</tr>
+	{{/if}}
+	{{foreach $entries as $item}}
+		<tr id="cloud-panel-{{$item.attachId}}">
+			<td><i class="{{$item.iconFromType}}" title="{{$item.type}}"></i></td>
+			<td><a href="{{$item.fullPath}}">{{$item.displayName}}</a></td>
+	{{if $item.is_owner}}
+			<td class="cloud-index-tool">{{$item.attachIcon}}</td>
+			<td id="file-edit-{{$item.attachId}}" class="cloud-index-tool"></td>
+			<td class="cloud-index-tool"><i class="fakelink icon-pencil" onclick="filestorage(event, '{{$nick}}', {{$item.attachId}});"></i></td>
+			<td class="cloud-index-tool"><a href="{{$item.fileStorageUrl}}/{{$item.attachId}}/delete" title="{{$delete}}" onclick="return confirmDelete();"><i class="icon-remove drop-icons"></i></a></td>
 
-<table id="cloud-index">
-	<tr>
-		<th></th>
-		<th>{{$name}}&nbsp;&nbsp;&nbsp;</th>
-		<th></th><th></th><th></th>
-		<th>{{$type}}&nbsp;&nbsp;&nbsp;</th>
-		<th>{{$size}}&nbsp;&nbsp;&nbsp;</th>
-		<th>{{$lastmod}}</th>
-	</tr>
-	<tr><td colspan="8"><hr></td></tr>
-{{if $parentpath}}
-	<tr>
-		<td>{{$parentpath.icon}}</td>
-		<td><a href="{{$parentpath.path}}" title="{{$parent}}">..</a></td>
-		<td></td><td></td><th></td>
-		<td>[{{$parent}}]</td>
-		<td></td>
-		<td></td>
-	</tr>
-{{/if}}
-{{foreach $entries as $item}}
-	<tr>
-		<td>{{$item.icon}}</td>
-		<td style="min-width: 15em"><a href="{{$item.fullPath}}">{{$item.displayName}}</a></td>
-{{if $item.is_owner}}
-		<td>{{$item.attachIcon}}</td>
-		<td style="position:relative;"><i id="file-edit-{{$item.attachId}}" class="fakelink icon-pencil" onclick="filestorage(event, '{{$nick}}', {{$item.attachId}});"></i></td>
-		<td><a href="{{$item.fileStorageUrl}}/{{$item.attachId}}/delete" title="{{$delete}}" onclick="return confirmDelete();"><i class="icon-remove drop-icons"></i></a></td>
-
-{{else}}
-		<td></td><td></td><td></td>
-{{/if}}
-		<td>{{$item.type}}</td>
-		<td>{{$item.sizeFormatted}}</td>
-		<td>{{$item.lastmodified}}</td>
-	</tr>
-	<tr><td id="perms-panel-{{$item.attachId}}" colspan="8"></td></tr>
-{{/foreach}}
-
-</table>
+	{{else}}
+			<td></td><td></td><td></td><td></td>
+	{{/if}}
+			<td>{{*{{$item.type}}*}}</td>
+			<td class="hidden-xs">{{$item.sizeFormatted}}</td>
+			<td class="hidden-xs">{{$item.lastmodified}}</td>
+		</tr>
+		<tr><td id="perms-panel-{{$item.attachId}}" colspan="9"></td></tr>
+	{{/foreach}}
+	</table>
 </div>