diff --git a/frappe/core/page/usage_info/usage_info.html b/frappe/core/page/usage_info/usage_info.html
index 40efd7a062..e4851d8f63 100644
--- a/frappe/core/page/usage_info/usage_info.html
+++ b/frappe/core/page/usage_info/usage_info.html
@@ -46,10 +46,6 @@
 	<div class="usage-info-section" style="margin: 30px;">
 	    <h4>{{ __("Space") }}</h4>
 
-	    {% var database_percent = ((limits.space_usage.database_size / limits.space) * 100); %}
-	    {% var files_percent = ((limits.space_usage.files_size / limits.space) * 100); %}
-	    {% var backup_percent = ((limits.space_usage.backup_size / limits.space) * 100); %}
-
 	    <div class="progress" style="margin-bottom: 0;">
 	        <div class="progress-bar" style="width: {%= database_percent %}%; background-color: #5e64ff"></div>
 	        <div class="progress-bar" style="width: {%= files_percent %}%; background-color: #743ee2"></div>
@@ -66,12 +62,7 @@
 			{{ __("Backup Size:") }} {%= limits.space_usage.backup_size %} MB
 		</span>
 
-		<p>
-			<span class="{%= ((limits.space - limits.space_usage.total) > 50) ? "" : "text-warning" %}">
-	                    <b>{%= flt(limits.space - limits.space_usage.total, 2) %} MB</b></span>
-			available out of
-			<span><b>{%= limits.space %} MB</b></span>
-		</p>
+		<p>{{ usage_message }}</p>
 	</div>
 	{% endif %}
 </div>
diff --git a/frappe/core/page/usage_info/usage_info.js b/frappe/core/page/usage_info/usage_info.js
index 5137eeac6a..eec5411ca4 100644
--- a/frappe/core/page/usage_info/usage_info.js
+++ b/frappe/core/page/usage_info/usage_info.js
@@ -15,7 +15,33 @@ frappe.pages['usage-info'].on_page_load = function(wrapper) {
 				return;
 			}
 
-			$(frappe.render_template("usage_info", usage_info)).appendTo(page.main);
+			let limits = usage_info.limits;
+			let database_percent = (limits.space_usage.database_size / limits.space) * 100;
+			let files_percent = (limits.space_usage.files_size / limits.space) * 100;
+			let backup_percent = (limits.space_usage.backup_size / limits.space) * 100;
+
+			let total_consumed = database_percent + files_percent + backup_percent;
+
+			let last_part = backup_percent;
+			if (total_consumed > 100) {
+				last_part = backup_percent - (total_consumed - 100);
+			}
+			backup_percent = last_part;
+
+			let usage_message = '';
+			if (limits.space_usage.total > limits.space) {
+				usage_message = __('You have used up all of the space allotted to you. Please buy more space in your subscription.');
+			} else {
+				let available = flt(limits.space - limits.space_usage.total, 2);
+				usage_message = __('{0} available out of {1}', [(available + ' MB').bold(), (limits.space + ' MB').bold()]);
+			}
+
+			$(frappe.render_template("usage_info", Object.assign(usage_info, {
+				database_percent,
+				files_percent,
+				backup_percent,
+				usage_message
+			}))).appendTo(page.main);
 
 			var btn_text = usage_info.limits.users == 1 ? __("Upgrade") : __("Renew / Upgrade");
 			$(page.main).find('.btn-primary').html(btn_text).on('click', () => {