diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 9fcc10caf4..7a9381662f 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -108,6 +108,9 @@
 .nav-icon-trashbin {
 	background-image: url('../img/delete.svg?v=1');
 }
+.nav-icon-quota {
+	background-image: url('../img/quota.svg?v=1');
+}
 
 #app-navigation .nav-files a.nav-icon-files {
 	width: auto;
@@ -752,11 +755,22 @@ table.dragshadow td.size {
 #quota {
 	margin: 0 !important;
 	border: none;
-	div {
-		border-radius: 0;
+	background-color: transparent;
+
+	.quota-container {
+		height: 5px;
+		border-radius: 3px;
+
+		div {
+			height: 100%;
+			background-color: $color-primary;
+		}
 	}
 }
 
-#quotatext {
-	padding: 3px;
+#quotatext,
+#quotatext-additional {
+	padding: 0;
+	height: 30px;
+	line-height: 30px;
 }
diff --git a/apps/files/img/quota.svg b/apps/files/img/quota.svg
new file mode 100644
index 0000000000..8ed264e850
--- /dev/null
+++ b/apps/files/img/quota.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1">
+ <path style="text-decoration-color:#000;block-progression:tb;isolation:auto;mix-blend-mode:normal;text-indent:0;text-decoration-line:none;text-transform:none;text-decoration-style:solid" d="m8 0c-4.406 0-8 3.594-8 8s3.594 8 8 8 8-3.594 8-8-3.594-8-8-8zm0 2c3.326 0 6 2.674 6 6 0 1.622-0.638 3.087-1.676 4.164l-4.324-4.164v-6z"/>
+</svg>
diff --git a/apps/files/templates/appnavigation.php b/apps/files/templates/appnavigation.php
index 28019ba803..49bfaab3e1 100644
--- a/apps/files/templates/appnavigation.php
+++ b/apps/files/templates/appnavigation.php
@@ -1,18 +1,21 @@
 <div id="app-navigation">
-	<div id="quota" class="section has-tooltip" title="<?php
-	if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED) {
-		p($l->t('You are using %s of %s', [$_['usage'], $_['total_space']]));
-	} else {
-		p($l->t('You are using %s of %s (%s %%)', [$_['usage'], $_['total_space'],  $_['usage_relative']]));
-	}
-	?>">
-		<div style="width:<?php p($_['usage_relative']);?>%"
-			 <?php if($_['usage_relative'] > 80): ?>class="quota-warning"<?php endif; ?>>
-			<p id="quotatext"><?php p($l->t('%s of %s in use', [$_['usage'], $_['total_space']])); ?></p>
-		</div>
-	</div>
-
 	<ul class="with-icon">
+		<li id="quota" class="section <?php
+		if ($_['quota'] !== \OCP\Files\FileInfo::SPACE_UNLIMITED) {
+			?>has-tooltip" title="<?php
+			p($l->t('%s %%', [$_['usage_relative']]));
+		}
+		?>">
+			<a href="#" class="nav-icon-quota svg">
+				<p id="quotatext"><?php p($l->t('%s of %s used', [$_['usage'], $_['total_space']])); ?></p>
+				<div class="quota-container">
+					<div style="width:<?php p($_['usage_relative']);?>%"
+						 <?php if($_['usage_relative'] > 80): ?>class="quota-warning"<?php endif; ?>>
+					</div>
+				</div>
+				<p id="quotatext-additional"><?php p($l->t('Do you need more space?')); ?></p>
+			</a>
+		</li>
 		<?php foreach ($_['navigationItems'] as $item) { ?>
 		<li data-id="<?php p($item['id']) ?>" class="nav-<?php p($item['id']) ?>">
 			<a href="<?php p(isset($item['href']) ? $item['href'] : '#') ?>"