diff --git a/frappe/public/js/frappe/form/controls/base_input.js b/frappe/public/js/frappe/form/controls/base_input.js
index 7daa4ce30b..f7dbac7050 100644
--- a/frappe/public/js/frappe/form/controls/base_input.js
+++ b/frappe/public/js/frappe/form/controls/base_input.js
@@ -230,16 +230,24 @@ frappe.ui.form.ControlInput = class ControlInput extends frappe.ui.form.Control
 				.on("click", (event) => {
 					event.preventDefault();
 					me.$info_card.html("");
-					let card = new frappe.ui.SidebarCard({
-						// title: "Trial ends in 3 days",
-						// icon: "info",
+					let card_args = {
 						message: me.df.description,
 						parent: me.$info_card,
-						// primary_action_icon: "zap",
-						// primary_action_label: "Upgrade",
 						close_button: true,
-						// primary_action: () => {},
-					});
+					};
+					if (me.df.documentation_url) {
+						card_args.primary_action_label = "Read More";
+						card_args.primary_action_suffix_icon = "square-arrow-out-up-right";
+						card_args.primary_action = function () {
+							window.open(me.df.documentation_url);
+						};
+						$(":root").css({
+							"--sidebar-card-button-bg-color": "var(--surface-gray-2)",
+							"--sidebar-card-button-color": "var(--ink-gray-7)",
+							"--sidebar-card-button-outline": "var(--ink-gray-7)",
+						});
+					}
+					let card = new frappe.ui.SidebarCard(card_args);
 					if (me.info_card_display) {
 						me.info_card_display = false;
 						me.$info_card.removeAttr("data-show");
diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar_card.html b/frappe/public/js/frappe/ui/sidebar/sidebar_card.html
index 1a79c89617..6b605edfe2 100644
--- a/frappe/public/js/frappe/ui/sidebar/sidebar_card.html
+++ b/frappe/public/js/frappe/ui/sidebar/sidebar_card.html
@@ -18,6 +18,14 @@
          </div>
     {% } %}
     {% if(card.primary_action_label) { %}
-    <button class="sidebar-card-button btn">{{ frappe.utils.icon(card.primary_action_icon, "sm", "", "", "", true) }}{{ card.primary_action_label }}</button>
+    <button class="sidebar-card-button btn">
+        {% if (card.primary_action_icon) %}
+            {{ frappe.utils.icon(card.primary_action_icon, "sm", "", "", "", true) }}
+        {% } %}
+        {{ card.primary_action_label }}
+        {% if card.primary_action_suffix_icon %}
+            {{ frappe.utils.icon(card.primary_action_suffix_icon, "sm", "", "", "", true) }}
+        {% endif %}
+    </button>
     {% } %}
 </div>
\ No newline at end of file
diff --git a/frappe/public/scss/desk/sidebar_card.scss b/frappe/public/scss/desk/sidebar_card.scss
index b888803cbb..1ecbbafe38 100644
--- a/frappe/public/scss/desk/sidebar_card.scss
+++ b/frappe/public/scss/desk/sidebar_card.scss
@@ -1,3 +1,8 @@
+:root {
+	--sidebar-card-button-outline: var(--surface-blue-3);
+	--sidebar-card-button-bg-color: var(var(--surface-blue-2));
+	--sidebar-card-button-color: var(--ink-blue-3);
+}
 .card-title-container {
 	display: flex;
 	align-items: center;
@@ -33,16 +38,16 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background-color: var(--surface-blue-2);
-	color: var(--ink-blue-3);
+	background-color: var(--sidebar-card-button-bg-color);
+	color: var(--sidebar-card-button-color);
 	gap: 4px;
 	svg {
-		stroke: var(--ink-blue-3);
+		stroke: var(--sidebar-card-button-color);
 		margin: 0px;
 	}
 }
 .sidebar-card-button:hover,
 .sidebar-card-button:focus {
-	outline: 1px solid var(--surface-blue-3);
-	color: var(--ink-blue-3);
+	outline: 1px solid var(--sidebar-card-button-outline);
+	color: var(--sidebar-card-button-color);
 }