diff --git a/erpnext/www/lms/course.html b/erpnext/www/lms/course.html
index 0bfd059..f8618e0 100644
--- a/erpnext/www/lms/course.html
+++ b/erpnext/www/lms/course.html
@@ -42,10 +42,10 @@
 		{% if has_access %}
 			<a href="/lms/topic?program={{ program }}&course={{ course.name }}&topic={{ topic.name }}" class="no-decoration no-underline">
 		{% else %}
-			<div>
+			<div onclick="show_singup()">
 		{% endif %}
 			{% if topic.hero_image %}
-			<div class="card-hero-img" style="background-image: url({{ topic.hero_image }})"></div>
+			<div class="card-hero-img" style="background-image: url('{{ topic.hero_image }})'"></div>
 			{% else %}
 			<div class="card-image-wrapper text-center">
 				<div class="image-body"><i class="fa fa-picture-o" aria-hidden="true"></i></div>
@@ -103,4 +103,23 @@
 		</div>
 	</div>
 </section>
+{% endblock %}
+
+{% block script %}
+<script>
+	function show_singup() {
+		if (frappe.session.user == "Guest") {
+			let signup_dialog = new frappe.ui.Dialog({
+				title: __('Sign Up'),
+				primary_action: function() {
+					window.location.href = '/login#signup'
+				},
+				primary_action_label: 'Sign Up'
+			})
+			signup_dialog.set_message('You have to sign up to access the course');
+			signup_dialog.$message.show()
+			signup_dialog.show();
+		}
+	}
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/erpnext/www/lms/index.html b/erpnext/www/lms/index.html
index 7ea39d8..3e107ac 100644
--- a/erpnext/www/lms/index.html
+++ b/erpnext/www/lms/index.html
@@ -45,7 +45,7 @@
 		<p class='lead'>{{ education_settings.description }}</p>
 		<p class="mt-4">
 			{% if frappe.session.user == 'Guest' %}
-			<a class="btn btn-primary btn-lg" href="'/login#signup'}}">Start Learning</a>
+				<a class="btn btn-primary btn-lg" href="'/login#signup'">Sign Up</a>
 			{% endif %}
 		</p>
 	</div>
diff --git a/erpnext/www/lms/macros/card.html b/erpnext/www/lms/macros/card.html
index f227355..9964d2d 100644
--- a/erpnext/www/lms/macros/card.html
+++ b/erpnext/www/lms/macros/card.html
@@ -3,7 +3,7 @@
 	<a href="/lms/program?program={{ program.name }}" class="no-decoration no-underline">
 	<div class="card h-100">
 		{% if program.hero_image %}
-		<div class="card-hero-img" style="background-image: url({{ program.hero_image }})"></div>
+		<div class="card-hero-img" style="background-image: url('{{ program.hero_image }}')"></div>
 		{% else %}
 		<div class="card-image-wrapper text-center">
 			<div class="image-body"><i class="fa fa-picture-o" aria-hidden="true"></i></div>
diff --git a/erpnext/www/lms/program.html b/erpnext/www/lms/program.html
index d122778..b6d6966 100644
--- a/erpnext/www/lms/program.html
+++ b/erpnext/www/lms/program.html
@@ -42,7 +42,7 @@
 	<a href="/lms/course?name={{ course.name }}&program={{ program.name }}" class="no-decoration no-underline">
 	<div class="card h-100">
 		{% if course.hero_image %}
-		<div class="card-hero-img" style="background-image: url({{ course.hero_image }})"></div>
+		<div class="card-hero-img" style="background-image: url('{{ course.hero_image }}')"></div>
 		{% else %}
 		<div class="card-image-wrapper text-center">
 			<div class="image-body"><i class="fa fa-picture-o" aria-hidden="true"></i></div>
diff --git a/erpnext/www/lms/topic.html b/erpnext/www/lms/topic.html
index 3a77776..3bbfbd0 100644
--- a/erpnext/www/lms/topic.html
+++ b/erpnext/www/lms/topic.html
@@ -17,7 +17,7 @@
 	<a href="/lms/content?program={{ program }}&course={{ course }}&topic={{ topic.name }}&type={{ content.content_type }}&content={{ content.content.name }}" class="no-decoration no-underline">
 	<div class="card h-100">
 		<div class='card-body'>
-			<div>{{ content.content_type or '' }}</div>
+			<div class="text-muted">{{ content.content_type or '' }}</div>
 			<h5 class='card-title'>{{ content.content.name }}</h5>
 		</div>
 		{% if has_access %}