diff --git a/lms/lms/widgets/CourseOutline.html b/lms/lms/widgets/CourseOutline.html
index 2f9dec80..43350d50 100644
--- a/lms/lms/widgets/CourseOutline.html
+++ b/lms/lms/widgets/CourseOutline.html
@@ -74,24 +74,36 @@
 
 <!-- No Preview Modal -->
 <div class="modal fade no-preview-modal" id="no-preview-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-  aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <div class="font-weight-bold">{{ _("Not available for preview") }}</div>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <div class=""> {{ _("This lesson is not available for preview. Please join the course to access it.") }} </div>
-      </div>
-      <div class="modal-footer">
-        <div class="button is-primary join-batch" data-course="{{ course.name | urlencode}}">
-          {{ _("Start Learning") }}</div>
-      </div>
+aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <div class="font-weight-bold">{{ _("Not available for preview") }}</div>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                {% if is_user_interested %}
+                    <div class=""> {{ _("You have opted to be notified for this course. You will receive an email when the course becomes available.") }} </div>
+                {% else %}
+                    <div class=""> {{ _("This lesson is not available for preview. Please join the course to access it.") }} </div>
+                {% endif %}
+            </div>
+            {% if not is_user_interested %}
+            <div class="modal-footer">
+                {% if course.upcoming %}
+                <div class="button is-primary notify-me" data-course="{{course.name | urlencode}}">
+                    {{ _("Notify me when available") }}
+                </div>
+                {% else %}
+                <div class="button is-primary join-batch" data-course="{{ course.name | urlencode}}">
+                {{ _("Start Learning") }}</div>
+                {% endif %}
+            </div>
+            {% endif %}
+        </div>
     </div>
-  </div>
 </div>
 {% endif %}
 
@@ -112,7 +124,7 @@ frappe.ready(() => {
 });
 
 const expand_the_first_chapter = () => {
-  let elements = $(".course-outline .collapse");
+  let elements = $(".course-home-outline .collapse");
   elements.each((i, element) => {
     if (i < 1) {
       show_section(element);
diff --git a/lms/public/css/style.css b/lms/public/css/style.css
index a93fa209..554f64d0 100644
--- a/lms/public/css/style.css
+++ b/lms/public/css/style.css
@@ -429,11 +429,6 @@ input[type=checkbox] {
   font-size: var(--text-base);
 }
 
-.course-outline {
-  flex-direction: column;
-  padding: 1rem 0.75rem 0;
-}
-
 .lessons {
   margin-left: 2rem;
 }
diff --git a/lms/public/js/common_functions.js b/lms/public/js/common_functions.js
new file mode 100644
index 00000000..1b5df894
--- /dev/null
+++ b/lms/public/js/common_functions.js
@@ -0,0 +1,64 @@
+frappe.ready(() => {
+    $(".join-batch").click((e) => {
+        join_course(e);
+    });
+
+    $(".notify-me").click((e) => {
+        notify_user(e);
+    });
+
+});
+
+const join_course = (e) => {
+    e.preventDefault();
+    let course = $(e.currentTarget).attr("data-course");
+    if (frappe.session.user == "Guest") {
+        window.location.href = `/login?redirect-to=/courses/${course}`;
+        return;
+    }
+
+    let batch = $(e.currentTarget).attr("data-batch");
+    batch = batch ? decodeURIComponent(batch) : "";
+    frappe.call({
+        "method": "lms.lms.doctype.lms_batch_membership.lms_batch_membership.create_membership",
+        "args": {
+            "batch": batch ? batch : "",
+            "course": course
+        },
+        "callback": (data) => {
+            if (data.message == "OK") {
+                $(".no-preview-modal").modal("hide");
+                frappe.msgprint({
+                    "title": __("Successfully Enrolled"),
+                    "message": __("You are now a student of this course.")
+                });
+                setTimeout(function () {
+                    window.location.href = `/courses/${course}/learn/1.1`;
+                }, 2000);
+            }
+        }
+    })
+};
+
+const notify_user = (e) => {
+    e.preventDefault();
+    var course = decodeURIComponent($(e.currentTarget).attr("data-course"));
+    if (frappe.session.user == "Guest") {
+      window.location.href = `/login?redirect-to=/courses/${course}`;
+      return;
+    }
+
+    frappe.call({
+        method: "lms.lms.doctype.lms_course_interest.lms_course_interest.capture_interest",
+        args: {
+            "course": course
+        },
+        callback: (data) => {
+            $(".no-preview-modal").modal("hide");
+            frappe.msgprint(__("You have opted to be notified for this course. You will receive an email when the course becomes available."));
+            setTimeout(() => {
+                window.location.reload();
+            }, 2000);
+        }
+    })
+};
diff --git a/lms/public/js/website.bundle.js b/lms/public/js/website.bundle.js
index 04d6b3fe..628957f6 100644
--- a/lms/public/js/website.bundle.js
+++ b/lms/public/js/website.bundle.js
@@ -1 +1,2 @@
 import "./profile.js"
+import "./common_functions.js"
diff --git a/lms/www/batch/learn.js b/lms/www/batch/learn.js
index 5520e8f6..b44d5af9 100644
--- a/lms/www/batch/learn.js
+++ b/lms/www/batch/learn.js
@@ -45,10 +45,6 @@ frappe.ready(() => {
         clear_work(e);
     });
 
-    $(".join-batch").click((e) => {
-        join_course(e)
-    });
-
 });
 
 const save_current_lesson = () => {
@@ -244,36 +240,6 @@ const add_to_local_storage = (quiz_name, current_index, answer, is_correct) => {
   localStorage.setItem(quiz_name, JSON.stringify(quiz_stored))
 };
 
-const join_course = (e) => {
-    e.preventDefault();
-    let course = $(e.currentTarget).attr("data-course")
-    if (frappe.session.user == "Guest") {
-        window.location.href = `/login?redirect-to=/courses/${course}`;
-        return;
-    }
-
-    let batch = $(e.currentTarget).attr("data-batch");
-    batch = batch ? decodeURIComponent(batch) : "";
-    frappe.call({
-        "method": "lms.lms.doctype.lms_batch_membership.lms_batch_membership.create_membership",
-        "args": {
-            "batch": batch ? batch : "",
-            "course": course
-        },
-        "callback": (data) => {
-            if (data.message == "OK") {
-                frappe.msgprint({
-                    "title": __("Successfully Enrolled"),
-                    "message": __("You are now a student of this course.")
-                });
-                setTimeout(function () {
-                    window.location.href = `/courses/${course}/learn/1.1`;
-                }, 2000);
-            }
-        }
-    });
-};
-
 const create_certificate = (e) => {
   e.preventDefault();
   course = $(".title").attr("data-course");
diff --git a/lms/www/courses/course.html b/lms/www/courses/course.html
index fbbf88da..5f243002 100644
--- a/lms/www/courses/course.html
+++ b/lms/www/courses/course.html
@@ -16,7 +16,7 @@
         <div class="course-body-container">
           {{ CourseHeaderOverlay(course) }}
           {{ Description(course) }}
-          {{ widgets.CourseOutline(course=course, membership=membership) }}
+          {{ widgets.CourseOutline(course=course, membership=membership, is_user_interested=is_user_interested) }}
           {{ widgets.Reviews(course=course, membership=membership) }}
         </div>
       </div>
@@ -180,8 +180,7 @@
     </a>
 
     {% elif course.upcoming and not is_user_interested %}
-      <div class="button wide-button is-default"
-        id="notify-me" data-course="{{course.name | urlencode}}">
+      <div class="button wide-button is-default notify-me" data-course="{{course.name | urlencode}}">
        {{ _("Notify me when available") }}
       </div>
 
diff --git a/lms/www/courses/course.js b/lms/www/courses/course.js
index dd6b102b..cb194253 100644
--- a/lms/www/courses/course.js
+++ b/lms/www/courses/course.js
@@ -6,10 +6,6 @@ frappe.ready(() => {
         cancel_mentor_request(e);
     });
 
-    $(".join-batch").click((e) => {
-        join_course(e);
-    });
-
     $(".view-all-mentors").click((e) => {
         view_all_mentors(e);
     });
@@ -24,11 +20,7 @@ frappe.ready(() => {
 
     $("#submit-review").click((e) => {
         submit_review(e);
-    })
-
-    $("#notify-me").click((e) => {
-        notify_user(e);
-    })
+    });
 
     $("#certification").click((e) => {
         create_certificate(e);
@@ -101,36 +93,6 @@ var cancel_mentor_request = (e) => {
   })
 }
 
-const join_course = (e) => {
-    e.preventDefault();
-    let course = $(e.currentTarget).attr("data-course");
-    if (frappe.session.user == "Guest") {
-        window.location.href = `/login?redirect-to=/courses/${course}`;
-        return;
-    }
-
-    let batch = $(e.currentTarget).attr("data-batch");
-    batch = batch ? decodeURIComponent(batch) : "";
-    frappe.call({
-        "method": "lms.lms.doctype.lms_batch_membership.lms_batch_membership.create_membership",
-        "args": {
-            "batch": batch ? batch : "",
-            "course": course
-        },
-        "callback": (data) => {
-            if (data.message == "OK") {
-                frappe.msgprint({
-                    "title": __("Successfully Enrolled"),
-                    "message": __("You are now a student of this course.")
-                });
-                setTimeout(function () {
-                    window.location.href = `/courses/${course}/learn/1.1`;
-                }, 2000);
-            }
-        }
-    })
-};
-
 var view_all_mentors = (e) => {
   $(".wrapped").each((i, element) => {
     $(element).slideToggle("slow");
@@ -185,26 +147,6 @@ var submit_review = (e) => {
   })
 };
 
-var notify_user = (e) => {
-  e.preventDefault();
-  var course = decodeURIComponent($(e.currentTarget).attr("data-course"));
-  if (frappe.session.user == "Guest") {
-    window.location.href = `/login?redirect-to=/courses/${course}`;
-    return;
-  }
-
-  frappe.call({
-    method: "lms.lms.doctype.lms_course_interest.lms_course_interest.capture_interest",
-    args: {
-      "course": course
-    },
-    callback: (data) => {
-      $("#interest-alert").removeClass("hide");
-      $("#notify-me").addClass("hide");
-    }
-  })
-};
-
 const create_certificate = (e) => {
   e.preventDefault();
   course = $(e.currentTarget).attr("data-course");
@@ -219,7 +161,6 @@ const create_certificate = (e) => {
   })
 };
 
-
 const element_not_in_viewport = (el) => {
   const rect = el.getBoundingClientRect();
   return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight;