diff --git a/community/lms/doctype/lms_course/lms_course.py b/community/lms/doctype/lms_course/lms_course.py
index db38d76a..ac93ac86 100644
--- a/community/lms/doctype/lms_course/lms_course.py
+++ b/community/lms/doctype/lms_course/lms_course.py
@@ -8,7 +8,7 @@ from frappe.model.document import Document
 import json
 from ...utils import slugify
 from community.query import find, find_all
-from frappe.utils import flt
+from frappe.utils import flt, cint
 
 class LMSCourse(Document):
     @staticmethod
@@ -115,6 +115,26 @@ class LMSCourse(Document):
         # TODO: chapters should have a way to specify the order
         return find_all("Chapter", course=self.name, order_by="index_")
 
+    def get_lessons(self):
+        """ Returns all lessons of this course """
+        lessons = []
+        chapters = self.get_chapters()
+        for chapter in chapters:
+            lessons.append(frappe.get_all("Lesson", {"chapter": chapter.name}))
+        return lessons
+
+    def get_course_progress(self):
+        """ Returns the course progress of the session user """
+        lesson_count = len(self.get_lessons())
+        completed_lessons = frappe.db.count("LMS Course Progress",
+                                {
+                                    "course": self.name,
+                                    "owner": frappe.session.user,
+                                    "status": "Complete"
+                                })
+        precision = cint(frappe.db.get_default("float_precision")) or 3
+        return flt(((completed_lessons/lesson_count) * 100), precision)
+
     def get_batch(self, batch_name):
         return find("LMS Batch", name=batch_name, course=self.name)
 
diff --git a/community/lms/widgets/BreadCrumb.html b/community/lms/widgets/BreadCrumb.html
index 49da5c2b..7a5807ef 100644
--- a/community/lms/widgets/BreadCrumb.html
+++ b/community/lms/widgets/BreadCrumb.html
@@ -1,6 +1,8 @@
 <div class="course-instructor breadcrumb">
   <a class="dark-links" href="/courses">All Courses</a>
   <img class="ml-1 mr-1" src="/assets/community/icons/side-arrow.svg">
+
+  {% if course %}
   {% if lesson %}
   <a class="dark-links" href="/courses/{{ course.name }}">{{ course.title }}</a>
   <img class="ml-1 mr-1" src="/assets/community/icons/side-arrow.svg">
@@ -8,5 +10,10 @@
   {% else %}
   <span class="muted-text">{{ course.title }}</span>
   {% endif %}
+  {% endif %}
+
+  {% if member_name %}
+  <span class="muted-text">{{ member_name }}</span>
+  {% endif %}
 
 </div>
diff --git a/community/lms/widgets/ChapterTeaser.html b/community/lms/widgets/ChapterTeaser.html
index a7b89ac7..6a93e249 100644
--- a/community/lms/widgets/ChapterTeaser.html
+++ b/community/lms/widgets/ChapterTeaser.html
@@ -16,25 +16,25 @@
 
       {% for lesson in chapter.get_lessons() %}
 
-      <div class="lesson-info">
+      <div class="lesson-info {% if membership.current_lesson == lesson.name %} active-lesson {% endif %}">
 
-        {% if show_link or lesson.include_in_preview %}
+        {% if membership or lesson.include_in_preview %}
         <a class="dark-links"
           href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}"
           data-course="{{ course.name }}">
           {{ lesson.title }}</a>
 
-        {% if show_link %}
+        {% if membership %}
         <img class="lesson-progress-tick {{ course.get_progress(lesson.name) != 'Complete' and 'hide' }}"
           src="/assets/community/icons/white-tick.svg">
         {% endif %}
 
         {% else %}
-        <div title="This lesson is not available for preview">
+        <div class="no-preview" title="This lesson is not available for preview">
           <span class="dark-links">
             {{ lesson.title }}
           </span>
-          <i class="fa fa-lock ml-2"></i>
+          <img class="ml-2" src="/assets/community/icons/lock.svg">
         </div>
         {% endif %}
 
@@ -51,7 +51,6 @@
 
 <script>
   frappe.ready(() => {
-    expand_the_first_chapter();
     expand_the_active_chapter();
   })
 
@@ -65,10 +64,28 @@
   }
 
   var expand_the_active_chapter = () => {
+
+    /* Find anchor matching the URL for course details page */
     var selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
-    if (selector.length) {
+    if (! selector.length) {
+      selector = $(`a[href^="${decodeURIComponent(window.location.pathname)}"]`).parent();
+    }
+    if (selector.length && $(".course-details-page").length) {
+      $(".lesson-info").removeClass("active-lesson")
+      selector.addClass("active-lesson");
       show_section(selector.parent().parent());
     }
+
+    /* For course home page */
+    else if ($(".active-lesson").length) {
+      selector = $(".active-lesson")
+      show_section(selector.parent().parent());
+    }
+
+    /* If no active chapter then exapand the first chapter */
+    else {
+      expand_the_first_chapter();
+    }
   }
 
   var show_section = (element) => {
diff --git a/community/lms/widgets/CourseCard.html b/community/lms/widgets/CourseCard.html
new file mode 100644
index 00000000..b45246bf
--- /dev/null
+++ b/community/lms/widgets/CourseCard.html
@@ -0,0 +1,63 @@
+<div class="common-card-style course-card">
+  <div class="course-image" style="background-image: url({{ course.image }});">
+    <div class="course-tags">
+      {% for tag in course.get_tags() %}
+      <div class="course-card-pills">{{ tag }}</div>
+      {% endfor %}
+    </div>
+  </div>
+  <div class="course-card-content">
+    <div class="course-card-meta muted-text">
+      {% if course.get_chapters() | length %}
+      <span>
+        {{ course.get_chapters() | length }} Chapters
+      </span>
+      {% endif %}
+      {% if course.get_chapters() | length and course.get_upcoming_batches() | length %}
+      <span class="font-weight-bold ml-3 mr-3"> . </span>
+      {% endif %}
+      {% if course.get_upcoming_batches() | length %}
+      <span class="">
+        {{ course.get_upcoming_batches() | length }} Open Batches
+      </span>
+      {% endif %}
+    </div>
+    <div class="course-card-title">{{ course.title }}</div>
+    <div class="card-divider"></div>
+    <div class="course-card-meta-2">
+      {{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
+      <span class="course-instructor">
+        {{ course.get_instructor().full_name }}
+      </span>
+      {% if course.get_students() | length %}
+      <span class="course-student-count">
+        <img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
+        {{ course.get_students() | length }}
+      </span>
+      {% endif %}
+    </div>
+    {% set membership = course.get_membership(frappe.session.user) %}
+
+    {% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
+    membership.current_lesson
+    else '1.1' %}
+
+    {% set query_parameter = "?batch=" + membership.batch if membership and membership.batch else "" %}
+
+    {% if membership %}
+
+    <div class="view-course-link is-primary">
+      Continue Course <img class="ml-3" src="/assets/community/icons/white-arrow.svg" />
+    </div>
+    <a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
+
+    {% else %}
+
+    <div class="view-course-link">
+      View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+    </div>
+    <a class="stretched-link" href="/courses/{{ course.name }}"></a>
+
+    {% endif %}
+  </div>
+</div>
diff --git a/community/lms/widgets/CourseOutline.html b/community/lms/widgets/CourseOutline.html
index 043b0057..60524e0c 100644
--- a/community/lms/widgets/CourseOutline.html
+++ b/community/lms/widgets/CourseOutline.html
@@ -5,7 +5,7 @@
   </div>
   <div class="coure-outline">
     {% for chapter in course.get_chapters() %}
-    {{ widgets.ChapterTeaser(index=loop.index, chapter=chapter, course=course, batch=batch, show_link=show_link, show_progress=show_progress)}}
+    {{ widgets.ChapterTeaser(index=loop.index, chapter=chapter, course=course, batch=batch, membership=membership) }}
     {% endfor %}
   </div>
 </div>
diff --git a/community/lms/widgets/MemberCard.html b/community/lms/widgets/MemberCard.html
index 6889b5d4..72f8fee3 100644
--- a/community/lms/widgets/MemberCard.html
+++ b/community/lms/widgets/MemberCard.html
@@ -1,10 +1,10 @@
 <div class="common-card-style member-card {{dimension_class}} ">
-  {% set avatar_class = "avatar-xl" if dimension_class == "member-card-large" else "avatar-large"%}
+  {% set avatar_class = "avatar-large" if dimension_class == "member-card-medium" else "avatar-xl"%}
   {{ widgets.Avatar(member=member, avatar_class=avatar_class) }}
   <div class="small-title member-card-title">
     {{ member.full_name }}
   </div>
-  {% set course_count = member.get_course_count() %}
+  {% set course_count = member.get_authored_courses() | length %}
   {% if show_course_count and course_count > 0 %}
   {% set suffix = "Courses" if course_count > 1 else "Course" %}
   <div class="small-title">
diff --git a/community/overrides/user.py b/community/overrides/user.py
index 500a9285..8588a350 100644
--- a/community/overrides/user.py
+++ b/community/overrides/user.py
@@ -5,15 +5,18 @@ import hashlib
 
 class CustomUser(User):
 
-    def get_course_count(self) -> int:
+    def get_authored_courses(self) -> int:
         """Returns the number of courses authored by this user.
         """
-        return frappe.db.count(
+        return frappe.get_all(
             'LMS Course', {
-                'owner': self.email
+                'owner': self.name
         })
 
     def get_palette(self):
+        """
+        Returns a color unique to each member for Avatar """
+
         palette = [
             ['--orange-avatar-bg', '--orange-avatar-color'],
             ['--pink-avatar-bg', '--pink-avatar-color'],
@@ -40,3 +43,19 @@ class CustomUser(User):
                 'member_type': 'Mentor'
             })
 
+    def get_user_reviews(self):
+        """ Returns the reviews created by user """
+        return frappe.get_all("LMS Course Review",
+                {
+                    "owner": self.name
+                })
+
+    def get_course_membership(self, member_type=None):
+        """ Returns all memberships of the user  """
+        filters = {
+            "member": self.name
+        }
+        if member_type:
+            filters["member_type"] = member_type
+
+        return frappe.get_all("LMS Batch Membership", filters, ["name", "course"])
diff --git a/community/public/css/style.css b/community/public/css/style.css
index b5455fa8..a110ae8c 100644
--- a/community/public/css/style.css
+++ b/community/public/css/style.css
@@ -285,12 +285,12 @@ input[type=checkbox] {
   flex-direction: column;
   width: 352px;
   height: 380px;
-  margin: 0px 32px 32px 0px;
+  margin: 0px 20px 32px 0px;
 }
 
 @media (max-width: 768px) {
   .course-card {
-    margin: 0px 18px 32px 0px;
+    margin: 0px 8px 32px 0px;
     width: 336px;
   }
 }
@@ -368,7 +368,7 @@ input[type=checkbox] {
   flex-wrap: wrap;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 375px) {
   .cards-parent {
     justify-content: center;
   }
@@ -538,14 +538,14 @@ div.custom-checkbox>label>input:checked+img {
   padding: 0px 0px 80px;
   display: flex;
   flex-direction: column;
-  width: 1120px;
+  max-width: 1120px;
   margin: 0 auto;
 }
 
 @media (max-width: 768px) {
   .course-home-page {
     padding: 0px 0px 30px;
-    width: 90%;
+    max-width: 688px;
   }
 }
 
@@ -781,6 +781,10 @@ div.custom-checkbox>label>input:checked+img {
   font-weight: bold;
 }
 
+.member-card-xl .member-card-title {
+  font-weight: bold;
+}
+
 .member-card-medium {
   width: 160px;
   height: 140px;
@@ -802,6 +806,12 @@ div.custom-checkbox>label>input:checked+img {
   }
 }
 
+.member-card-xl {
+  height: 188px;
+  margin-top: 16px;
+  background: #E2E6E9;
+}
+
 .course-home-headings {
   font-weight: 600;
   font-size: 22px;
@@ -1029,3 +1039,43 @@ div.custom-checkbox>label>input:checked+img {
   padding: 2px;
   margin: 0px 4px 4px;
 }
+
+@media (max-width: 375px) {
+  .profile-courses {
+    padding: 0px 24px 0px;
+  }
+}
+
+.no-preview {
+  display: flex;
+}
+
+.progress-text {
+  font-size: 12px;
+  line-height: 165%;
+}
+
+.course-creator-progress-parent {
+  display: flex;
+  flex-direction: column;
+}
+
+.progress-card {
+  width: 256px;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+}
+
+.progress {
+  width: 100%;
+  height: 8px;
+}
+
+.progress-bar {
+  background-color: #318AD8;
+}
+
+.hljs {
+  white-space: pre-wrap;
+}
diff --git a/community/public/icons/lock.svg b/community/public/icons/lock.svg
new file mode 100644
index 00000000..cf3518e1
--- /dev/null
+++ b/community/public/icons/lock.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.21372 1.32458C4.68749 0.842346 5.33007 0.571429 6.00009 0.571429C6.67011 0.571429 7.31269 0.842346 7.78647 1.32458C8.26024 1.80682 8.52641 2.46087 8.52641 3.14286V5.14286H3.47378V3.14286C3.47378 2.46087 3.73994 1.80682 4.21372 1.32458ZM2.91237 5.14286V3.14286C2.91237 2.30932 3.23769 1.50992 3.81675 0.920521C4.39581 0.331122 5.18118 0 6.00009 0C6.81901 0 7.60438 0.331122 8.18344 0.920521C8.7625 1.50992 9.08781 2.30932 9.08781 3.14286V5.14286H9.9299C10.705 5.14286 11.3334 5.78245 11.3334 6.57143V10.5714C11.3334 11.3604 10.705 12 9.9299 12H2.07026C1.29512 12 0.666748 11.3604 0.666748 10.5714V6.57143C0.666748 5.78245 1.29512 5.14286 2.07026 5.14286H2.91237ZM8.80711 5.71429H3.19308L2.07026 5.71429C1.60517 5.71429 1.22815 6.09804 1.22815 6.57143V10.5714C1.22815 11.0448 1.60517 11.4286 2.07026 11.4286H9.9299C10.395 11.4286 10.772 11.0448 10.772 10.5714V6.57143C10.772 6.09804 10.395 5.71429 9.9299 5.71429L8.80711 5.71429Z" fill="#192734"/>
+</svg>
diff --git a/community/www/batch/learn.html b/community/www/batch/learn.html
index b9fa6506..e9281d9d 100644
--- a/community/www/batch/learn.html
+++ b/community/www/batch/learn.html
@@ -22,10 +22,10 @@
 {% block content %}
 <div class="common-page-style">
   <div class="course-details-page">
-    {{ widgets.Breadcrumb(course=course, lesson=lesson) }}
+    {{ widgets.BreadCrumb(course=course, lesson=lesson) }}
     <div class="course-content-parent">
       <div class="course-details-outline">
-        {{ widgets.CourseOutline(course=course, show_link=membership) }}
+        {{ widgets.CourseOutline(course=course, membership=membership) }}
       </div>
       <div class="lesson-pagination-parent">
         {{ LessonContent(lesson) }}
@@ -40,7 +40,7 @@
 
 {% macro LessonContent(lesson) %}
 <div class="lesson-content">
-  <div class="course-home-headings title" data-lesson="{{ lesson.name }}" data-course="{{ course.name }}">
+  <div class="course-home-headings title {% if membership %} is-member {% endif %}" data-lesson="{{ lesson.name }}" data-course="{{ course.name }}">
     {{ lesson.title }}
     <span class="lesson-progress {{hide if course.get_progress(lesson.name) != 'Complete' else ''}}">COMPLETED</span>
   </div>
diff --git a/community/www/batch/learn.js b/community/www/batch/learn.js
index eaf124d0..e9898843 100644
--- a/community/www/batch/learn.js
+++ b/community/www/batch/learn.js
@@ -1,7 +1,5 @@
 frappe.ready(() => {
 
-  highlight_active_lesson();
-
   save_current_lesson();
 
   $("#progress").click((e) => {
@@ -18,15 +16,8 @@ frappe.ready(() => {
 
 })
 
-var highlight_active_lesson = () => {
-  var selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
-  if (selector.length) {
-    selector.addClass('active-lesson');
-  }
-}
-
 var save_current_lesson = () => {
-  if ($(".title").attr("data-membership")) {
+  if ($(".title").hasClass("is-member")) {
     frappe.call("community.lms.api.save_current_lesson", {
       course_name: $(".title").attr("data-course"),
       lesson_name: $(".title").attr("data-lesson")
diff --git a/community/www/batch/utils.py b/community/www/batch/utils.py
index 23060680..5445bc10 100644
--- a/community/www/batch/utils.py
+++ b/community/www/batch/utils.py
@@ -17,8 +17,9 @@ def get_common_context(context):
     context.course = course
 
     membership = course.get_membership(frappe.session.user, batch_name)
+    print(membership)
+    context.membership = membership
     if membership:
-        context.membership = membership
         batch = course.get_batch(membership.batch)
 
         if batch:
diff --git a/community/www/courses/course.html b/community/www/courses/course.html
index 3afb68c8..b896eb9c 100644
--- a/community/www/courses/course.html
+++ b/community/www/courses/course.html
@@ -89,13 +89,29 @@
 {% macro CourseOutlineAndCreator(course) %}
 <div class="course-outline-instructor-parent">
   <div class="course-home-outline">
-    {{ widgets.CourseOutline(course=course, show_link=membership) }}
+    {{ widgets.CourseOutline(course=course, membership=membership) }}
   </div>
-  <div class="">
+  <div class="course-creator-progress-parent">
     <div class="course-home-headings">
       Creator
     </div>
     {{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }}
+    {% if course.get_course_progress() %}
+    <div class="course-home-headings">
+      Your Progress
+    </div>
+    <div class="common-card-style progress-card">
+      <p class="small-title">
+        Great work so far!
+      </p>
+      <p class="progress-text">
+        Challenge yourself to complete the lesson and grow professionally.
+      </p>
+      <div class="progress">
+        <div class="progress-bar" role="progressbar" style="width: {{ course.get_course_progress() }}%" aria-valuenow="{{ course.get_course_progress() }}" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+    </div>
+    {% endif %}
   </div>
 </div>
 {% endmacro %}
diff --git a/community/www/courses/index.html b/community/www/courses/index.html
index 199a6625..4c50a012 100644
--- a/community/www/courses/index.html
+++ b/community/www/courses/index.html
@@ -10,88 +10,19 @@
 
 {% block content %}
 <div class="common-page-style">
-  <div class="">
-    <div class="course-top-section">
-      <div class="courses-header">
-        {{ 'All Courses' }}
-      </div>
-      <div class="cards-parent">
-        {% for course in courses %}
-        {{ course_card(course) }}
-        {% endfor %}
-      </div>
+  <div class="course-top-section">
+    <div class="courses-header">
+      {{ 'All Courses' }}
+    </div>
+    <div class="cards-parent">
+      {% for course in courses %}
+      {{ widgets.CourseCard(course=course) }}
+      {% endfor %}
     </div>
   </div>
 </div>
 {% endblock %}
 
-
-{% macro course_card(course) %}
-<div class="common-card-style course-card">
-  <div class="course-image" style="background-image: url({{ course.image }});">
-    <div class="course-tags">
-      {% for tag in course.get_tags() %}
-      <div class="course-card-pills">{{ tag }}</div>
-      {% endfor %}
-    </div>
-  </div>
-  <div class="course-card-content">
-    <div class="course-card-meta muted-text">
-      {% if course.get_chapters() | length %}
-      <span>
-        {{ course.get_chapters() | length }} Chapters
-      </span>
-      {% endif %}
-      {% if course.get_chapters() | length and course.get_upcoming_batches() | length %}
-      <span class="font-weight-bold ml-3 mr-3"> . </span>
-      {% endif %}
-      {% if course.get_upcoming_batches() | length %}
-      <span class="">
-        {{ course.get_upcoming_batches() | length }} Open Batches
-      </span>
-      {% endif %}
-    </div>
-    <div class="course-card-title">{{ course.title }}</div>
-    <div class="card-divider"></div>
-    <div class="course-card-meta-2">
-      {{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
-      <span class="course-instructor">
-        {{ course.get_instructor().full_name }}
-      </span>
-      {% if course.get_students() | length %}
-      <span class="course-student-count">
-        <img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
-        {{ course.get_students() | length }}
-      </span>
-      {% endif %}
-    </div>
-    {% set membership = course.get_membership(frappe.session.user) %}
-
-    {% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
-    membership.current_lesson
-    else '1.1' %}
-
-    {% set query_parameter = "?batch=" + membership.batch if membership and membership.batch else "" %}
-
-    {% if membership %}
-
-    <div class="view-course-link is-primary">
-      Continue Course <img class="ml-3" src="/assets/community/icons/white-arrow.svg" />
-    </div>
-    <a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
-
-    {% else %}
-
-    <div class="view-course-link">
-      View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
-    </div>
-    <a class="stretched-link" href="/courses/{{ course.name }}"></a>
-
-    {% endif %}
-  </div>
-</div>
-{% endmacro %}
-
 {% block script %}
 <script>
   frappe.ready(() => {
diff --git a/community/www/profiles/profile.html b/community/www/profiles/profile.html
index 68e9a58c..1fbc021e 100644
--- a/community/www/profiles/profile.html
+++ b/community/www/profiles/profile.html
@@ -1,100 +1,117 @@
-{% extends "templates/web.html" %}
+{% extends "templates/base.html" %}
 {% block head_include %}
 <meta name="description" content="{{ 'Community' }}" />
 <meta name="keywords" content="An app that supports Communities." />
-<style>
-  section {
-    padding: 2rem;
-    color: #000000;
-  }
-
-  svg {
-    width: 200px;
-    height: 200px;
-  }
-
-  .dashboard__parent {
-    display: flex;
-  }
-
-  .dashboard__name {
-    font-weight: normal;
-    font-style: normal;
-    font-size: 36px;
-    line-height: 42px;
-  }
-
-  .dashboard__details {
-    padding-top: 2rem;
-  }
-
-  .dashboard__course {
-    border: 1px solid black;
-    padding: 1rem;
-    margin: 0.5rem;
-    width: 48%;
-  }
-
-  .dashboard__courseHeader {
-    display: flex;
-    justify-content: space-between;
-    height: 50px;
-    margin-bottom: 3px;
-  }
-
-  .dashboard__badge {
-    background: #D6D6FF;
-    border-radius: 20px;
-    color: #1712FE;
-    padding: 0.5rem;
-    height: fit-content;
-  }
-
-  .dashboard__description {
-    height: 100px;
-  }
-
-  @media (max-width: 900px) {
-    .dashboard__parent {
-      flex-direction: column;
-    }
-  }
-</style>
 {% endblock %}
-{% block page_content %}
-<div class="dashboard__parent">
-  <div class="dashboard__photo mr-5">
-    {{ widgets.Avatar(member=member, avatar_class="avatar-xl") }}
-  </div>
-  <div class="dashboard__details">
-    <div class="dashboard__name">
-      <a class="anchor_style" href="/{{member.username}}">{{ member.full_name }}</a>
-    </div>
-    <div>
-      <ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
-        {% for tab in profile_tabs %}
-          <li class="nav-item">
-            {% set slug = title.lower().replace(" ", "-") %}
-            {% set selected = loop.index == 1 %}
-            {% set active = 'active' if loop.index == 1 else '' %}
-            <a class="nav-link {{ active }}" id="{{ slug }}-tab" data-toggle="tab" href="#{{ slug }}" role="tab" aria-controls="{{ slug }}"
-              aria-selected="{{ selected }}">Sketches</a>
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-    <div>
-      {% for tab in profile_tabs %}
-        {% set slug = title.lower().replace(" ", "-") %}
-        <div class="tab-content">
-          <div class="tab-pane fade py-4 show active" role="tabpanel" id="slug">
-            {{ tab.render() }}
-          </div>
-        </div>
-      {% endfor %}
+
+{% block content %}
+<div class="common-page-style">
+  <div class="course-home-page">
+    {{ widgets.BreadCrumb(member_name = member.full_name)}}
+    {{ widgets.MemberCard(member=member, show_course_count=True, dimension_class="member-card-xl") }}
+    {{ AboutOverviewSection(member) }}
+    <div class="profile-courses">
+      {{ CoursesCreated(member) }}
+      {{ CoursesMentored(member) }}
+      {{ CoursesEnrolled(member) }}
     </div>
+    {{ ProfileTabs(profile_tabs) }}
   </div>
 </div>
 {% endblock %}
 
-<!-- this is a sample default web page template -->
+{% macro AboutOverviewSection(member) %}
+<div class="course-outline-instructor-parent">
+  {% if member.bio %}
+  <div>
+    <div class="course-home-headings">
+      About
+    </div>
+    <div class="common-card-style description-card">
+      {{ member.bio }}
+    </div>
+  </div>
+  {% endif %}
+  <div>
+    <div class="course-home-headings">
+      Overview
+    </div>
+    <div class="common-card-style overview-card small-title">
+      {% if member.get_course_membership("Student") | length %}
+      <div class="overtime-item">
+        <img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
+        {{ member.get_course_membership("Student") | length }} Enrolled
+      </div>
+      {% endif %}
+      {% if member.get_user_reviews() | length %}
+      <div class="overtime-item">
+        <img class="icon-background mr-1" src="/assets/community/icons/rating.svg" />
+        {{ member.get_user_reviews() | length }} Created
+      </div>
+      {% endif %}
+      {% if member.get_course_membership("Mentor") | length%}
+      <div class="overtime-item">
+        <img class="icon-background mr-1" src="/assets/community/icons/calendar.svg" />
+        {{ member.get_course_membership("Mentor") | length }} Mentored
+      </div>
+      {% endif %}
+    </div>
+  </div>
+</div>
+{% endmacro %}
+
+
+{% macro CoursesCreated(member) %}
+{% if member.get_authored_courses() | length %}
+<div class="course-home-headings">
+  Courses Created
+</div>
+<div class="cards-parent">
+  {% for course in member.get_authored_courses() %}
+  {% set course_details = frappe.get_doc("LMS Course", course) %}
+  {{ widgets.CourseCard(course=course_details) }}
+  {% endfor %}
+</div>
+{% endif %}
+{% endmacro %}
+
+{% macro CoursesMentored(member) %}
+{% if member.get_course_membership("Mentor") | length %}
+<div class="course-home-headings">
+  Courses Mentored
+</div>
+<div class="cards-parent">
+  {% for membership in member.get_course_membership("Mentor") %}
+  {% set course_details = frappe.get_doc("LMS Course", membership.course) %}
+  {{ widgets.CourseCard(course=course_details) }}
+  {% endfor %}
+</div>
+{% endif %}
+{% endmacro %}
+
+{% macro CoursesEnrolled(member) %}
+{% if member.get_course_membership("Student") | length %}
+<div class="course-home-headings">
+  Courses Enrolled
+</div>
+<div class="cards-parent">
+  {% for membership in member.get_course_membership("Student") %}
+  {% set course_details = frappe.get_doc("LMS Course", membership.course) %}
+  {{ widgets.CourseCard(course=course_details) }}
+  {% endfor %}
+</div>
+{% endif %}
+{% endmacro %}
+
+{% macro ProfileTabs(profile_tabs) %}
+<div>
+  {% for tab in profile_tabs %}
+  {% set slug = title.lower().replace(" ", "-") %}
+  <div class="tab-content">
+    <div class="tab-pane fade py-4 show active" role="tabpanel" id="slug">
+      {{ tab.render() }}
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% endmacro %}