Added Front. A few script changes. Jupyter notebooks practice for customer analysis.

2023-04-12 08:36:25 -04:00
parent 78063b0b88
commit 1a2c86d665
45 changed files with 3834 additions and 187 deletions
--- a/Custom_Templates/customer_templates/.DS_Store
+++ b/Custom_Templates/customer_templates/.DS_Store
--- a/Custom_Templates/customer_templates/Front/_cards_course.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_cards_course.html.liquid
@ -0,0 +1,48 @@
+<div class="np-card np-card-course course-card">
+  <div class="np-card-container">
+     <img
+        class="course-card-image"
+        alt="{{ course.name }}"
+        src="{{ course.image_url }}"
+      >
+    <div class="np-card-content np-card-content-vertical np-card-padding">
+      <div class="card-info-wrapper">
+        <div class="np-card-header-type eyebrow-lg fw-semibold {% if course.progress == 0 %}gray{% endif %}">
+          {% if course.progress == 0 %}
+            {% t shared.progress, count: course.progress %}
+          {% elsif course.progress > 0 and course.progress < 100 %}
+            <span>IN PROGRESS</span>
+          {% else %}
+            <i class="fas fa-check-circle"></i> Completed
+          {% endif %}
+        </div>
+        {% if course.properties.duration != blank %} 
+          <div class="course-duration">
+          <i class="fal fa-clock"></i>
+            {{course.properties.duration}} 
+          </div>
+        {% endif %}
+      </div>
+      {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
+      <a href="{{ course_path }}">
+        <h3 class="np-card-content-title header-5 fw-semibold">
+          {{ course.name }}
+        </h3>
+      </a>
+      <div class="paragraph-2">
+        {{course.short_description}}
+      </div>
+      <div class="np-card-content-footer">
+      {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
+        <a class="fw-semibold" href="{{ course_path }}">
+            {% t shared.view %} course
+          <i class="far fa-long-arrow-right"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  {% for category in course.categories %}
+    <span class="course-category np-hidden">{{category.name}}</span>
+  {% endfor %}
+</div>
--- a/Custom_Templates/customer_templates/Front/_cards_course_old.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_cards_course_old.html.liquid
@ -0,0 +1,210 @@
+
+<div class="course-card">
+  <div class="course-card-container">
+    {% if course.ribbon %}
+      <div class="np-card-ribbon">
+        {{ course.ribbon }}
+      </div>
+    {% endif %}
+    <div class="image-container">
+      <img
+        class="course-card-image"
+        alt="{{ course.name }}"
+        src="{{ course.image_url }}"
+      >
+    </div>
+    <div class="np-card-content np-card-padding">
+      <h3 class="card-content-title">
+        {{ course.name }}
+      </h3>
+      <div class="np-card-content-subtitle">
+        {% if course.properties.duration != blank %} 
+          {{course.properties.duration}} 
+        {% endif %}
+      </div>
+      <div class="np-card-content-footer">
+        {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
+        {% if course.has_to_restart? %}
+          {% include "course_version_outdated_popup", path: course_path %}
+        {% endif %}
+        <a class="np-button np-button-wide" href="{{ course_path }}">
+          {% t shared.view %}
+        </a>
+        <div class="np-card-content-progress np-button-color progress-color">
+          {% t shared.progress, count: course.progress %}
+          <div class="course-details">
+
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="overlay">
+      <div class="card-desc-overlay">
+          <div class="card-content-container-overlay">
+            <div class="card-title-overlay np-card-content-title">
+              <h3 class="card-content-title center-text">{{ course.name }}</h3>
+            </div>
+            {% if course.properties.duration != blank %} 
+            <div class="overlay-time">{{course.properties.duration}} </div>
+            {% endif %}
+            <div class="card-info-overlay">
+                <div class="card-details-overlay">
+                    <div class="card-overlay-desc space-between  margin-5">{% if course.short_description != blank %} {{course.short_description}} {%endif%}</div>
+                </div>
+            </div>
+          </div>
+          {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
+          {% if course.has_to_restart? %}
+            {% include "course_version_outdated_popup", path: course_path %}
+          {% endif %}
+          <div class="card-button-overlay">
+              <a class="button-text-overlay" href="{{ course_path }}">{% t shared.view %}</a>
+          </div>
+      </div>
+  </div>
+
+  </div>
+  {% for category in course.categories %}
+    <span class="course-category">{{category.name}}</span>
+  {% endfor %}
+</div>
+
+<style>
+  .course-category {
+    display: none;
+  }
+  .card-details-overlay {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .card-overlay-desc {
+    margin-bottom: 1rem;
+  }
+  .course-card {
+    height: 100%;
+  }
+  .overlay-time {
+    margin-top: 0.5rem;
+    text-align: left;
+
+  }
+  .course-card-container {
+    background: #fff;
+    position: relative;
+    box-shadow: 0 2px 4px 0 rgba(72,103,118,.5);
+    height: 100%;
+    display: flex; 
+    flex-direction: column;
+    position: relative;
+    border-radius: 30px;
+  }
+  
+  .course-card-image {
+    display: block;
+    border-radius: 30px 30px 0 0;
+    height: auto;
+    width: 100%;
+  
+  }
+  .progress-color {
+    color: #001b38;
+  }
+  .card-content-container-overlay {
+    padding: 1rem 1rem 0 1rem;
+  }
+  .overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #fff;
+    overflow: hidden;
+    width: 100%;
+    height: 0;
+    transition: .5s ease;
+  }
+  .card-info-overlay {
+    text-align: left;
+}
+
+.card-button-overlay {
+    background: #cc0049;
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    width: 50%;
+    justify-content: center;
+    margin: 1rem;
+    height: 40px;
+}
+.button-text-overlay {
+  font-size: .875rem;
+  font-weight: 700;
+  text-decoration: none;
+  padding: 0.5rem 1.5rem;
+  text-align: center;
+  color: #fff;
+}
+.card-desc-overlay {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  justify-content: space-between;
+}
+.image-container {
+  position: relative;
+}
+.course-card-container:hover .overlay {
+  opacity: 1;
+  height: 100%;
+  border-radius: 30px;
+}
+.activity-dot {
+  font-size: 5px;
+  margin-right: 10px;
+}
+.course-card {
+    margin: 1rem;
+}
+.font-weight-700 {
+  font-weight: 700;
+}
+.font-weight-600 {
+  font-weight: 600;
+}
+.sections-activities {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.activites {
+  margin-bottom: 10px;
+}
+.margin-5 {
+  margin: 5px 0;
+}
+.np-card-content {
+  align-items: normal;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 100%;
+}
+.card-content-title {
+  font-weight: 700;
+  color: #1b3e4f;
+  font-size: 1.25rem;
+}
+.np-card-content-footer {
+  margin: 0;
+}
+.center-text {
+  text-align: center;
+}
+.card-overlay-desc p, .card-overlay-desc span{
+  color: #1b3e4f !important;
+}
+</style>
--- a/Custom_Templates/customer_templates/Front/_cards_learning_path.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_cards_learning_path.html.liquid
@ -0,0 +1,70 @@
+
+
+{% if learning_path.enrolled? %}
+  {% assign lp_courses_count = 0 | times: 1 %}
+  {% assign sum_of_progress = 0.0 | times: 1 %}
+  {% for item in learning_path.items %}
+    {% if item.course? %}
+      {% assign lp_courses_count = lp_courses_count | plus: 1 %}
+      {% assign sum_of_progress = sum_of_progress | plus: item.progress %}
+    {% endif %}
+  {% endfor %}
+  {% if lp_courses_count == 0 %}
+    {% assign lp_progress = 0 %}
+  {% else %}
+    {% assign lp_progress = sum_of_progress | divided_by: lp_courses_count | round %}
+  {% endif %}
+{% else %}
+  {% assign lp_progress = 0 %}
+{% endif %}
+
+
+<div class="np-card np-no-horizontal-padding np-card-learning-path">
+    <div class="np-card-container">
+      <div class="np-learning-path">
+        <div class="lp-image-wrapper">
+          <img
+            alt="{{ learning_path.name }}"
+            class="np-card-image np-learning-path-image"
+            src="{{ learning_path.image_url }}"
+          />
+        </div>
+         
+        <div class="np-card-text-wrapper">  
+          <div class="np-card-content np-card-padding np-card-content-vertical">
+            <h3 class="header-4 fw-semibold">
+              {{ learning_path.name }}
+            </h3>
+  
+            <div class="np-hidden-mobile np-card-content-description paragraph-2">
+              {{ learning_path.description }}
+            </div>
+     
+            <div class="np-card-content-footer-lp">
+              <div class="lp-progress">
+                
+                <div class="eyebrow-lg fw-semibold {% if lp_progress == 0 %}gray{% endif %}">
+                  {% if lp_progress == 0 %}
+                    {% t shared.progress, count: lp_progress %}
+                  {% elsif lp_progress > 0 and lp_progress < 100 %}
+                    {{lp_progress}}%
+                  {% else %}
+                    <i class="fas fa-check-circle"></i> Completed
+                  {% endif %}
+                </div>
+                <div class="np-hidden-mobile np-card-progress-bar-container">
+                  <div
+                    style="width: {{ lp_progress }}%"
+                    class="np-button-background-color np-card-progress-bar">
+                  </div>
+                </div>
+              </div>
+              <a class="np-button" href="{% route learning_path, id: learning_path.id %}">
+                {% t shared.view %} Learning Path
+              </a>
+            </div>         
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
--- a/Custom_Templates/customer_templates/Front/_cards_learning_path_homepage.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_cards_learning_path_homepage.html.liquid
@ -0,0 +1,43 @@
+<div class="lp-card-container">
+    <a class="learning-path-homepage" href="{% route learning_path, id: learning_path.id %}">
+        <h3 class="lp-card-title">
+            {{ learning_path.name }}
+        </h3>
+    <img
+        alt="{{ learning_path.name }}"
+        class="learning-path-image-homepage"
+        src="{{ learning_path.image_url }}"
+    />
+</a>
+</div>
+  
+<style>
+    .learning-path-homepage {
+        display: flex;
+        flex-direction: column;
+    }
+    .learning-path-image-homepage {
+        object-fit: cover;
+        width: 100%;
+        border-radius: 0 0 20px 20px;
+        height: 100%;
+    }
+    .lp-card-container {
+        display: flex;
+        height: 100%;
+        margin: 0.5rem;
+        box-shadow: 0 2px 4px 0 rgba(72,103,118,.5);
+        border-radius: 20px;
+    }
+    .lp-card-title {
+        background: #fff;
+        margin: 0;
+        text-align: center;
+        padding: 2rem;
+        border-radius: 20px 20px 0 0;
+        min-height: 120px;
+    }
+    learning-paths-wrapper-homepage {
+        height: 100%;
+    }
+</style>
--- a/Custom_Templates/customer_templates/Front/_cards_learning_path_vertical.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_cards_learning_path_vertical.html.liquid
@ -0,0 +1,63 @@
+
+{% assign lp_set_front_for_my_company_desc = "This learning path is for account admins who are responsible for setting up your company's Front account." %}
+{% assign lp_front_for_daily_work_desc = "This learning path is for Front users who will be using Front for their daily work and team collaboration." %}
+{% assign lp_make_smarter_decisions_with_front_analytics_desc = "This learning path is for users who want to leverage Front Analytics to help them make more intelligent and insightful business decisions."%}
+
+<div class="np-card np-card-learning-path-vertical">
+  <div class="np-card-container">
+    <img
+      alt="{{ learning_path.name }}"
+      class="course-card-image"
+      src="{{ learning_path.image_url }}"
+    />
+    <div class="np-card-content np-card-content-vertical np-card-padding">
+      <div class="np-card-header-type eyebrow-lg">{% t shared.learning_path.title %}</div>
+      <h3 class="np-card-content-title header-5 fw-semibold">
+        {% if learning_path.name == "Make smarter decisions with Front analytics" %}
+          Front Analytics
+          {%else%}
+          {{ learning_path.name }}
+        {%endif%}
+      </h3>
+      <div class="paragraph-2">
+        {% if learning_path.name == "Set up Front for my company" %}
+          {{lp_set_front_for_my_company_desc}}
+        {% elsif learning_path.name == "Front for my daily work" %}
+          {{lp_front_for_daily_work_desc}}
+        {% elsif learning_path.name == "Make smarter decisions with Front analytics" %}
+          {{lp_make_smarter_decisions_with_front_analytics_desc}}
+        {% endif %}
+      </div>
+      <div class="np-card-content-footer">
+        {% comment %} <a class="fw-semibold" href="{% route learning_path, id: learning_path.id %}">
+          Start Path
+          <i class="far fa-long-arrow-right"></i>
+        </a> {% endcomment %}
+        {% assign custom_path_url = "/app/learning_paths" %}
+        {% if current_person.signed_in? %}
+          {% assign custom_path_url = " route learning_path, id: learning_path.id " %}
+        {% else %}
+          {% if learning_path.name == "Set up Front for my company" %}
+            {% assign custom_path_url = "/app/learning-path-41690773-e559-4be8-8af6-ab5fa22fb0df" %}
+          {% elsif learning_path.name == "Front for my daily work" %}
+            {% assign custom_path_url = "/app/learning-path-0e9846a6-4427-44a0-b49e-70ba3616ec7f" %}
+          {% elsif learning_path.name == "Make smarter decisions with Front analytics" %}
+            {% assign custom_path_url = "/app/learning_paths/dfd6953c-0cf6-4f8d-93ff-2ba18645def3"%}
+          {% endif %}
+        {% endif %}
+        
+        {% if current_person.signed_in? %}
+          <a class="fw-semibold" href="{% route learning_path, id: learning_path.id %}">
+            Start Path
+            <i class="far fa-long-arrow-right"></i>
+          </a>
+          {% else %}  
+          <a class="fw-semibold" href="{{custom_path_url}}">
+            Start Path
+            <i class="far fa-long-arrow-right"></i>
+          </a>
+        {%endif%}
+      </div>
+    </div>
+  </div>
+</div>
--- a/Custom_Templates/customer_templates/Front/_carousel_instructors.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_carousel_instructors.html.liquid
@ -0,0 +1,82 @@
+{% assign used_instructor_names = "" %}
+
+<div class="instructors-carousel np-carousel" id="instructors-carousel">   
+    <div class="np-carousel-card">
+        <div class="instructor-slide">
+            <div class="instructor-image" style='height:160px; width: 160px;'>
+                <img class="instructor-image-border-radius" style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/Front+Academy/132.png" />
+            </div>
+            <div class="instructor-info">
+                <div class="instructor-name">Helena Li</div>
+                <div class="instructor-joined">Customer Education Manager</div>
+            </div>
+        </div>
+    </div>
+    <div class="np-carousel-card">
+        <div class="instructor-slide">
+            <div class="instructor-image" style='height:160px; width: 160px;'>
+                <img class="instructor-image-border-radius" style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/Front+Academy/132(1).png"/>
+            </div>
+            <div class="instructor-info">
+                <div class="instructor-name">Matthew Meeks</div>
+                <div class="instructor-joined">Customer Education Manager</div>
+            </div>
+        </div>
+    </div>
+    
+</div>
+
+<script>
+$(document).ready(function(){
+
+    $(".instructors-carousel").slick({
+        slidesToShow: 2,
+        prevArrow: '<i class="fal fa-chevron-left"></i>',
+        nextArrow: '<i class="fal fa-chevron-right"></i>',
+        infinite: false,
+        dots: false,
+        arrows: true,
+        responsive: [
+            {
+                breakpoint: 1170,
+                settings: {
+                    slidesToShow: 2,
+                }
+            },
+            {
+                breakpoint: 768,
+                settings: {
+                    slidesToShow: 1,
+                }
+            }
+        ]
+    });
+});
+	
+</script>
+
+<style>
+    .instructors-carousel .fa-chevron-right:before {
+        right: -7px !important;
+    }
+    .instructor-slide {
+        display: flex;
+
+    }
+    .instructor-image-border-radius {
+        border-radius: 100%;
+    }
+
+    .instructor-name {
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 140%;
+        color: #001B38;
+    }
+
+    .instructor-joined {
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 160%;
+    }
+</style>
--- a/Custom_Templates/customer_templates/Front/_catalog_filter.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_catalog_filter.html.liquid
@ -0,0 +1,112 @@
+{% assign diff_1 = 0 | times: 1 %}
+{% assign diff_2 = 0 | times: 1 %}
+{% assign diff_3 = 0 | times: 1 %}
+
+{% assign time_1 = 0 | times: 1 %}
+{% assign time_2 = 0 | times: 1 %}
+{% assign time_3 = 0 | times: 1 %}
+{% assign time_4 = 0 | times: 1 %}
+{% assign time_5 = 0 | times: 1 %}
+
+{% assign co_categories = '' | split: '' %}
+{% for co in courses.in_catalog %}
+
+  {% for cat in co.categories %}
+    {% assign cat_name = cat.name | split: '!@#$%^&*()' %}
+    {% assign co_categories = co_categories | concat: cat_name %}
+  {% endfor %}
+
+  {% case co.properties.difficulty %}
+    {% when "Beginner" %}
+      {% assign diff_1 = diff_1 | plus: 1 %}
+    {% when "Advanced" %}
+      {% assign diff_2 = diff_2 | plus: 1 %}
+    {% when "Expert" %}
+      {% assign diff_3 = diff_3 | plus: 1 %}
+  {% endcase %}
+
+  {% if co.properties.course_time < 10 %}
+    {% assign time_1 = time_1 | plus: 1 %}
+  {% elsif co.properties.course_time < 30 %}
+    {% assign time_2 = time_2 | plus: 1 %}
+  {% elsif co.properties.course_time < 60 %}
+    {% assign time_3 = time_3 | plus: 1 %}
+  {% elsif co.properties.course_time < 120 %}
+    {% assign time_4 = time_4 | plus: 1 %}
+  {% else %}
+    {% assign time_5 = time_5 | plus: 1 %}
+  {% endif %}
+
+{% endfor %}
+{% assign co_unique_categories = co_categories | uniq | sort %}
+
+
+
+
+<div class="filter">
+  <div class='filter-section'>
+    <div class='filter-title'>
+      CATEGORY
+    </div>
+    <div class='filter-element-category category-selected' category='none'>
+      All
+    </div>
+    {% for cat in co_unique_categories %}
+      {% assign number_of_courses = co_categories | split: cat %}
+      {% assign number_of_courses = number_of_courses.size | minus: 1 %}
+      <div class='filter-element-category' category='{{cat}}'>
+        {{ cat }} ({{ number_of_courses }})
+      </div>
+    {% endfor %}
+  </div>
+</div>
+
+<style>
+  .filter-title {
+    font-weight: 500;
+    letter-spacing: 3px;
+    opacity: 0.4;
+    margin-bottom: 16px;
+  }
+  .filter-section {
+    margin-bottom: 30px;
+  }
+  div[class^="filter-element"] {
+    margin-bottom: 15px;
+    cursor: pointer;
+    font-weight: 400;
+    font-size: 1.125rem;
+    line-height: 32px;
+  }
+  .category-selected {
+    font-weight: 800 !important;
+  }
+  div[class^="filter-element"] .fa-square {
+    margin-right: 10px;
+  }
+  .filter-element-diff .fa-square-check {
+    display: none;
+    margin-right: 10px;
+  }
+  .diff-selected .fa-square-check {
+    display: inline-block;
+  }
+  .diff-selected .fa-square {
+    display: none;
+  }
+  .filter-element-time .fa-square-check {
+    display: none;
+    margin-right: 10px;
+  }
+  .time-selected .fa-square-check {
+    display: inline-block;
+  }
+  .time-selected .fa-square {
+    display: none;
+  }
+  .disabled {
+    opacity: 0.6;
+    cursor: none;
+    pointer-events: none;
+  }
+</style>
--- a/Custom_Templates/customer_templates/Front/_catalog_filtter_courses.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_catalog_filtter_courses.html.liquid
@ -0,0 +1,210 @@
+<div class="filter-container">
+  <div class="card-content-title filter-heading">
+    Filters
+  </div>
+  <div class="filter-content">
+      <h4 class=" filtter-topic plan-filter" style="">
+          Plan
+      </h4>
+      <div class="category-filter-container" style="order: -1;order: 1;">
+          <input type="checkbox" class="category-filter" id="Starter=button">Starter
+      </div>
+      <div class="category-filter-container">
+          <input type="checkbox" class="category-filter" id="Growth=button">Growth
+      </div>
+      <div class="category-filter-container">
+          <input type="checkbox" class="category-filter" id="Scale=button">Scale
+      </div>
+      <div class="category-filter-container">
+          <input type="checkbox" class="category-filter" id="Premier=button">Premier
+      </div>
+      <div class="category-filter-container">
+          <input type="checkbox" class="category-filter" id="Trial=button">Trial
+      </div>
+      <h4 class=" filtter-topic difficulty-filter" style="">
+          Difficulty
+      </h4>
+      <div class="category-filter-container">
+          <input type="checkbox" class="category-filter" id="Beginner=button">Beginner
+      </div>
+      <div class="category-filter-container">
+          <input type="checkbox" class="category-filter" id="Intermediate=button">Intermediate
+      </div>
+      <h4 class=" filtter-topic time-filter" style="">
+          Duration
+      </h4>
+      <div class="category-filter-container">
+          <input type="checkbox" class="category-filter" id="<10 min=button">&lt;10 min
+      </div>
+      <div class="category-filter-container">
+          <input type="checkbox" class="category-filter" id="15-30 min=button">15-30 min
+      </div>
+  </div>
+</div>
+
+<style>
+  .active-checkbox {
+    color: red
+  }
+</style>
+
+<script>
+
+  const obj = {}
+
+  window.addEventListener('DOMContentLoaded', (event) => {
+    let allCategories = "{{categories.in_catalog | map: 'name' | join: "|"}}"
+    console.log(allCategories);
+    Array.from(document.querySelectorAll(".category-filter")).forEach((item) => {
+      let filterName =  item.id.split("=")[0];
+      console.log(filterName)
+      if (allCategories.includes(filterName.trim())) {
+        obj[filterName] = false;
+        item.addEventListener("click", filterBy)
+     }
+     else item.parentElement.remove();
+    })
+  })
+
+  function clearAll() {
+    resetFilters()
+    showAll()
+  }
+
+  function filterBy(event) {
+    changeCheckboxValue(event.target.id)
+    changeCheckboxColor(event.target.id)
+    hideAll()
+    showItemIfSelected()
+    showItemsIfNoneSelected()
+  }
+
+  function changeCheckboxColor(categoryCheckBoxId) {
+    var element = document.getElementById(categoryCheckBoxId)
+    var classes = element.classList
+
+    if (classes.contains("active-checkbox"))
+      classes.remove("active-checkbox")
+    else
+      classes.add("active-checkbox")
+  }
+
+  function changeCheckboxValue(categoryId) {
+    for (const [key, value] of Object.entries(obj)) {
+      if (categoryId.includes(key)) {
+        if (obj[key] == true)
+          obj[key] = false
+        else
+          obj[key] = true
+      }
+    }
+  }
+
+  function showItemsIfNoneSelected() {
+    var anyTrue = false
+
+    for (const [key, value] of Object.entries(obj)) {
+      if (value == true) {
+        anyTrue = true
+        break
+      }
+    }
+
+    if (anyTrue == false)
+      showAll()
+  }
+
+  function resetFilters() {
+    resetFiltersValue()
+    removeActiveClassFromAllFilters()
+  }
+
+  function removeActiveClassFromAllFilters() {
+    Array.from(document.querySelectorAll(".category-filter")).forEach((checkBox) => {
+      checkBox.classList.remove("active-checkbox")
+    })
+  }
+
+  function resetFiltersValue() {
+    for (const [key, value] of Object.entries(obj)) {
+      obj[key] = false
+    }
+  }
+
+  function showAll() {
+    Array.from(document.querySelectorAll(".course-card")).forEach((item) => {
+      item.parentNode.style.removeProperty('display');
+    })
+  }
+
+  function hideAll() {
+    Array.from(document.querySelectorAll(".course-card")).forEach((item) => {
+      item.parentNode.style.display = 'none'
+    })
+  }
+
+  function showItemIfSelected() {
+    Array.from(document.querySelectorAll(".course-card")).forEach((card) => {
+      Array.from(card.querySelectorAll(".course-category")).forEach((category) => {
+        console.log(category.innerHTML.trim())
+        console.log(category.innerText.trim())
+        console.log(obj[category.innerText.trim()])
+
+        console.log("=======")
+        if (obj[category.innerText.trim()] == true)
+          showItem(category.parentNode)
+      })
+    })
+  }
+
+  function showItem(item) {
+    item.parentNode.style.removeProperty("display")
+  }
+</script>
+
+<style>
+  .filter-container {
+    background: #F5F5F5;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 30px;
+    border-radius: 10px;
+    max-width: 285px;
+  }
+  .filter-heading {
+    margin-bottom: 1rem;
+    font-weight: 600;
+    font-size: 12px;
+    color: #808080;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    width: 100%;
+  }
+  .filtter-topic {
+    margin-bottom: 0.5rem;
+    font-weight: 700;
+    color: #001B38;
+    font-size: 1rem;
+    margin-top: 18px;
+    margin-bottom: 14px;
+  }
+  .category-filter-container {
+    display: flex;
+    margin: 0.3rem 0;
+  }
+  .filteer-btns {
+    display: flex; 
+    gap: 1rem;
+    margin: 1rem 0;
+  }
+  .category-filter {
+    margin-right: 0.5rem;
+  }
+  .filter-content {
+    text-align: left;
+    width: 100%;
+  }
+</style>
--- a/Custom_Templates/customer_templates/Front/_course_description.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_course_description.html.liquid
@ -0,0 +1,6 @@
+<h3 class="np-card-heading">
+  {% t .header, key: current_school.course_vocabulary %}
+</h3>
+<div class="np-card-text">
+  {{ course.full_description }}
+</div>
--- a/Custom_Templates/customer_templates/Front/_course_desktop_view.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_course_desktop_view.html.liquid
@ -0,0 +1,33 @@
+<div class="row">
+  <div class="col-xs-6 col-md-5">
+    <div class="np-card-container" style="height:auto;">
+      <img
+        src="{{ course.image_url }}"
+        class="np-top-image np-top-image-spacing"
+        alt="{{ course.name }}"
+      />
+      <div class="np-card-padding-dynamic">
+        {% include "course_description" %}
+
+        {% comment %} {% if course.categories.any? %}
+          <div class="cover-page-categories">
+            {% include "course_categories" %}
+          </div>
+        {% endif %} {% endcomment %}
+
+        {% if course.instructors.any? %}
+          <div class="cover-page-instructors">
+            {% include "course_instructors" %}
+          </div>
+        {% endif %}
+      </div>
+      
+    </div>
+  </div>
+  <div class="col-xs-6 col-md-offset-1 col-md-6">
+      <div class="np-top-cta">
+        {% include "course_progress_and_cta" %}
+      </div>
+      {% include "course_outline" %}
+  </div>
+</div>
--- a/Custom_Templates/customer_templates/Front/_course_mobile_view.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_course_mobile_view.html.liquid
@ -0,0 +1,54 @@
+<div class="np-card-container course-mobile-header">
+
+  <img
+    src="{{ course.image_url }}"
+    class="np-top-image np-hidden-desktop"
+    alt="{{ course.name }}"
+  />
+
+  <div class="course-description np-card-padding">
+    {% include "course_description" %}
+  </div>
+</div>
+
+  <div class="np-top-cta">
+    {% include "course_progress_and_cta" %}
+  </div>
+
+  <div class="np-card-padding np-card-spacing" style="margin:0;">
+    {% include "course_outline" %}
+  </div>
+
+{% comment %} {% if course.progress == 0 %}
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_description" %}
+  </div>
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_outline" %}
+  </div>
+{% else %}
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_outline" %}
+  </div>
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_description" %}
+  </div>
+{% endif %} {% endcomment %}
+
+{% comment %} {% if course.categories.any? %}
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_categories" %}
+  </div>
+{% endif %} {% endcomment %}
+
+{% if course.instructors.any? %}
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_instructors" %}
+  </div>
+{% endif %}
+
+{% if course.events.any? %}
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_events" %}
+  </div>
+{% endif %}
--- a/Custom_Templates/customer_templates/Front/_course_outline.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_course_outline.html.liquid
@ -0,0 +1,39 @@
+<div class="np-course-outline">
+  <div class="header-3 np-course-outline-title">
+    {% t .header, key: current_school.course_vocabulary %}
+  </div>
+  <div class="np-course-outline-content">
+    <ol class="np-course-outline-content-section">
+      {% for section in course.sections %}
+        <li class="np-course-outline-content-section-list">
+          <div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
+            {{ section.name }}
+          </div>
+          <ol class="np-course-outline-content-activity">
+            {% for activity in section.activities %}
+
+              <li class="np-course-outline-content-activity-list">
+                {% if activity.completed? %}
+                  <i class="fas fa-check-circle np-course-outline-content-activity-icon"></i>
+                  {% if activity.locked? %}
+                    {% include "course_activity_locked" %}
+                  {% else %}
+                    {% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
+                  {% endif %}
+                  <div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
+                {% else %}
+                  <i class="far fa-circle np-course-outline-content-activity-icon"></i>
+                  {% if activity.locked? %}
+                    {% include "course_activity_locked" %}
+                  {% else %}
+                    {% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
+                  {% endif %}
+                {% endif %}
+              </li>
+            {% endfor %}
+          </ol>
+        </li>
+      {% endfor %}
+    </ol>
+  </div>
+</div>
--- a/Custom_Templates/customer_templates/Front/_course_progress_and_cta.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_course_progress_and_cta.html.liquid
@ -0,0 +1,51 @@
+<div class="np-top-cta-progress-content">
+  <div class="np-top-cta-progress-text
+    {% if course.progress == 0 %} gray {% endif %}
+  ">
+    {% if course.progress == 0 %}
+      {% t shared.progress, count: course.progress %}
+    {% elsif course.progress > 0 and course.progress < 100 %}
+      {{course.progress}}%
+    {% else %}
+      <i class="fas fa-check-circle"></i> COMPLETED
+    {% endif %}
+
+  </div>
+
+  <div class="np-progress-bar-container">
+    <div
+      style="width: {{ course.progress }}%"
+      class="np-button-background-color np-card-progress-bar">
+    </div>
+  </div>
+
+</div>
+
+{% if course.learner_can_retake? %}
+  <form action="{% route course_retake, id: course.id %}" method="POST">
+    {% form_authenticity_token %}
+    <button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
+      {% t .retake, key: current_school.course_vocabulary %}
+    </button>
+  </form>
+{% else %}
+  <a
+    class="np-top-button np-button-font-color np-button np-button-big"
+  {% if course.enrolled? %}
+      href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
+  {% else %}
+      href="{% route course_enrollment, code: course.enrollment_code %}"
+  {% endif %}
+  >
+    {% if course.enrolled? == false %}
+      {% t shared.enroll %}
+    {% elsif course.started? == false %}
+      {% t shared.course.start, key: current_school.course_vocabulary %}
+    {% elsif course.completed? %}
+      {% t shared.course.view, key: current_school.course_vocabulary %}
+    {% else %}
+      {% t shared.continue %}
+    {% endif %}
+  </a>
+{% endif %}
+
--- a/Custom_Templates/customer_templates/Front/_courses_catalog.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_courses_catalog.html.liquid
@ -0,0 +1,16 @@
+{% if courses.in_catalog.any? %}
+  <div class="np-catalog-courses row">
+    {% for course in courses.in_catalog %}
+      <div class="col-xs-12 col-md-6 col-lg-4 catalog-course-wrapper">
+        {% include "cards_course" with course %}
+      </div>
+    {% endfor %}
+  </div>
+{% else %}
+  {% capture message %}
+    {% t shared.zero_state.courses.catalog,
+      key: current_school.course_vocabulary
+    %}
+  {% endcapture %}
+  {% include "courses_zero_state", message: message %}
+{% endif %}
--- a/Custom_Templates/customer_templates/Front/_footer.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_footer.html.liquid
@ -0,0 +1,124 @@
+<footer class="np-footer">
+  <div class="np-footer-top">
+    {% if current_school.logo_url %}
+      <h2 class="np-footer-logo">
+        <a href="https://front.com">
+          <img
+            alt="{{ current_school.name }}"
+            class="np-footer-logo-image"
+            src="https://s3.amazonaws.com/static.northpass.com/Front+Academy/front-logo.png"
+          />
+        </a>
+      </h2>
+    {% else %}
+      <div class="np-school-name np-header-font-color">
+        {{ current_school.name }}
+      </div>
+    {% endif %}
+  </div>
+
+  <div class="np-footer-bottom">
+    {% if website_footer.show_navigation_links? %}
+      <div class="np-footer-navigation">
+        <ul class="np-footer-navigation-list">
+            <li class="np-footer-navigation-item">
+              <a
+                class="np-footer-navigation-link footer-color"
+                href="https://help.front.com/"
+                target="_blank" 
+              >
+                Help Center
+              </a>
+            </li>
+            <li class="np-footer-navigation-item">
+              <a
+                class="np-footer-navigation-link footer-color"
+                href="https://community.front.com/"
+                target="_blank" 
+              >
+                Community
+              </a>
+            </li>
+            <li class="np-footer-navigation-item">
+              <a
+                class="np-footer-navigation-link footer-color"
+                href="https://front.com/blog"
+                target="_blank" 
+              >
+                Blog
+              </a>
+            </li>
+            <li class="np-footer-navigation-item">
+              <a
+                class="np-footer-navigation-link footer-color"
+                href="https://changelog.frontapp.com/"
+                target="_blank" 
+              >
+                Product
+              </a>
+            </li>
+            <li class="np-footer-navigation-item">
+              <a
+                class="np-footer-navigation-link footer-color"
+                href="https://community.front.com/product-updates "
+                target="_blank" 
+              >
+                Updates
+              </a>
+            </li>
+            <li class="np-footer-navigation-item">
+              <a
+                class="np-footer-navigation-link footer-color"
+                href="https://www.frontstatus.com/"
+                target="_blank" 
+              >
+                Status Page
+              </a>
+            </li>
+        </ul>
+      </div>
+    {% endif %}
+    <nav class="np-footer-social-links">
+      {% if website_footer.show_social_media_links? %}
+        <ul class="np-footer-social-links-list">
+          {% for social_media_link in website_footer.social_media_links %}
+            <li class="np-footer-social-links-item">
+              <a
+                class="np-footer-social-links-link footer-color"
+                href="{{ social_media_link.link }}"
+                target="_blank" title="{{ social_media_link.name }}"
+              >
+                <i class="np-footer-social-links-icon
+                  footer-color
+                  fab fa-{{ social_media_link.name }}"
+                ></i>
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+    </nav>
+
+  </div>
+</footer>
+<style>
+  .footer-color {
+    color: #001B38;
+  }
+
+  @media (min-width:768px) {
+    .np-footer {
+      padding: 32px 16px;
+      max-width: 1440px;
+      margin: auto;
+    }
+
+    .np-footer-navigation-item:first-child a {
+      padding-left:0;
+    }
+    .np-footer-bottom {
+      align-items: baseline;
+      margin-top: 1.5rem;
+    }
+  }
+</style>
--- a/Custom_Templates/customer_templates/Front/_head.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_head.html.liquid
@ -0,0 +1,11 @@
+{% styles default %}
+{% styles colors %}
+{% styles custom %}
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
--- a/Custom_Templates/customer_templates/Front/_header.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_header.html.liquid
@ -0,0 +1,289 @@
+<header class="np-header np-header-color">
+  <div class="np-header-content">
+    {% if current_school.logo_url %}
+    <div class="np-hidden-desktop np-header-mobile-menu-nav">
+      {% if current_person.signed_in? %}
+        <button
+          data-toggle-class="np-hidden"
+          class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
+          data-toggle-target=".np-header-mobile-avatar-menu,
+          .np-header-mobile-menu-content, .np-main, .np-footer"
+        ></button>
+        <button
+          data-test="open-mobile-menu"
+          data-toggle-class="np-hidden"
+          class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
+          data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
+        >
+          <i class="fal fa-bars"></i>
+        </button>
+      {% endif %}
+    </div>
+      <div class="header-content">
+        <h1 class="np-header-logo">
+          <a href="{% route home %}">
+            <img
+              alt="{{ current_school.name }}"
+              class="np-header-logo-image"
+              src="{{ current_school.logo_url }}"
+            />
+          </a>
+        </h1>
+        <div class="hidden-mobile-custom">{% include "sub_navigation" %}</div>
+      </div>
+    {% else %}
+      <a href="{% route home %}" class="np-school-name np-header-font-color">
+        {{ current_school.name }}
+      </a>
+    {% endif %}
+
+  
+
+
+    {% if current_person.signed_in? %}
+      <div class="header-buttons-wrapper np-hidden-mobile">
+        <div class="np-hidden-mobile np-header-search np-header-search-expanded">
+        <form action="{% route search %}" method="get" data-test="desktop-search">
+          <input
+            aria-label="{% t .search %}"
+            class="np-header-search-input np-header-font-background-color"
+            type="text"
+            name="q"
+            placeholder="{% t .search %}"
+          />
+          <i class="np-header-search-icon far fa-search"></i>
+        </form>
+      </div>
+        <div class="np-hidden-mobile np-header-avatar">
+          <button
+            class="np-header-avatar-button"
+            data-test="open-desktop-menu"
+            data-toggle-class-on-target="np-hidden"
+            data-toggle-target=".np-header-avatar-tooltip"
+            data-toggle-outside
+          >
+            {% comment %} <img
+              alt="{{ current_person.name }}"
+              class="np-header-avatar-image"
+              src="{{ current_person.avatar_url }}"
+            > {% endcomment %}
+              <svg class="np-header-avatar-image" width="25" height="25" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.39082 0.101913L7.72151 0.562659C8.24033 1.28552 9.0805 1.73185 10 1.73185C10.9195 1.73185 11.7597 1.28552 12.2785 0.562659L12.6092 0.101913L13.1426 0.294579C14.174 0.667115 15.1289 1.2209 15.9647 1.92673L16.3974 2.29213L16.1644 2.8083C15.7985 3.61871 15.8324 4.5687 16.2918 5.36443C16.7514 6.16051 17.5577 6.6649 18.4429 6.75299L19.0077 6.80921L19.107 7.3681C19.2019 7.90226 19.25 8.4467 19.25 8.99701C19.25 9.54733 19.2019 10.0918 19.107 10.6259L19.0077 11.1848L18.4429 11.241C17.5577 11.3291 16.7514 11.8335 16.2918 12.6296C15.8324 13.4253 15.7985 14.3753 16.1644 15.1857L16.3974 15.7019L15.9647 16.0673C15.1289 16.7731 14.174 17.3269 13.1426 17.6994L12.6092 17.8921L12.2785 17.4314C11.7597 16.7085 10.9195 16.2622 10 16.2622C9.0805 16.2622 8.24033 16.7085 7.72151 17.4314L7.39082 17.8921L6.85741 17.6994C5.82603 17.3269 4.8711 16.7731 4.03532 16.0673L3.60265 15.7019L3.83564 15.1857C4.20146 14.3753 4.1676 13.4253 3.70819 12.6296C3.24857 11.8335 2.44228 11.3291 1.55715 11.241L0.992294 11.1848L0.892988 10.6259C0.798076 10.0918 0.75 9.54733 0.75 8.99701C0.75 8.4467 0.798076 7.90226 0.892988 7.3681L0.992294 6.80921L1.55715 6.75299C2.44228 6.6649 3.24857 6.16051 3.70819 5.36443C4.1676 4.5687 4.20146 3.61871 3.83564 2.8083L3.60265 2.29213L4.03532 1.92673C4.8711 1.2209 5.82603 0.667114 6.85741 0.294579L7.39082 0.101913ZM5.41027 2.75149C5.73449 3.85738 5.60882 5.07243 5.00722 6.11443C4.40558 7.15651 3.41606 7.87287 2.29618 8.14499C2.26551 8.42609 2.25 8.71036 2.25 8.99701C2.25 9.28366 2.26551 9.56794 2.29618 9.84903C3.41606 10.1212 4.40558 10.8375 5.00722 11.8796C5.60882 12.9216 5.73449 14.1366 5.41027 15.2425C5.869 15.5803 6.36344 15.8667 6.88487 16.0959C7.68054 15.2614 8.79615 14.7622 10 14.7622C11.2038 14.7622 12.3195 15.2614 13.1151 16.0959C13.6366 15.8667 14.131 15.5803 14.5897 15.2425C14.2655 14.1366 14.3912 12.9216 14.9928 11.8796C15.5944 10.8375 16.5839 10.1212 17.7038 9.84903C17.7345 9.56794 17.75 9.28366 17.75 8.99701C17.75 8.71036 17.7345 8.42609 17.7038 8.14499C16.5839 7.87287 15.5944 7.15651 14.9928 6.11443C14.3912 5.07243 14.2655 3.85738 14.5897 2.75149C14.131 2.41371 13.6366 2.12735 13.1151 1.89815C12.3195 2.73262 11.2038 3.23185 10 3.23185C8.79615 3.23185 7.68054 2.73262 6.88487 1.89816C6.36344 2.12735 5.869 2.41371 5.41027 2.75149Z" fill="#001B38"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M10 6.75C8.75736 6.75 7.75 7.75736 7.75 9C7.75 10.2426 8.75736 11.25 10 11.25C11.2426 11.25 12.25 10.2426 12.25 9C12.25 7.75736 11.2426 6.75 10 6.75ZM6.25 9C6.25 6.92893 7.92893 5.25 10 5.25C12.0711 5.25 13.75 6.92893 13.75 9C13.75 11.0711 12.0711 12.75 10 12.75C7.92893 12.75 6.25 11.0711 6.25 9Z" fill="#001B38"/>
+              </svg>  
+          </button>
+          <div class="np-header-avatar-tooltip np-hidden" role="tooltip">
+            <span class="np-header-avatar-tooltip-arrow-up"></span>
+            <div class="np-header-avatar-tooltip-learner">
+              <div class="np-header-avatar-tooltip-learner-name">
+                {{ current_person.name }}
+              </div>
+              <div class="np-header-avatar-tooltip-learner-email">
+                {{ current_person.email }}
+              </div>
+            </div>
+            <nav class="np-header-avatar-tooltip-navigation">
+            {% unless current_school.sso_active? %}
+              <a
+                class="np-header-avatar-tooltip-navigation-link"
+                href="{% route account %}"
+              >
+                {% t .profile_settings %}
+              </a>
+            {% endunless %}
+              <a
+                class="np-header-avatar-tooltip-navigation-link np-danger"
+                href="{% route logout %}"
+              >
+                {% t .sign_out %}
+              </a>
+            </nav>
+          </div>
+        </div>
+          {% comment %} <a class="login-btn" target="_blank" href="https://app.frontapp.com">Login</a> {% endcomment %}
+      </div>
+    {% else %}
+      {% comment %} <a
+        class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
+        aria-label="{% t shared.sign_in %}"
+        href="{% route login %}"
+      >
+        {% t shared.sign_in %}
+      </div> {% endcomment %}
+    {% endif %}
+  </div>
+</header>
+
+<div class="np-hidden-desktop">
+  <div class="np-header-mobile-menu-content np-hidden">
+    {% if current_person.signed_in? %}
+     {% comment %} <img
+        alt="{{ current_person.name }}"
+        class="np-header-mobile-menu-content-avatar"
+        src="{{ current_person.avatar_url }}"
+      />  {% endcomment %}
+      <div class="np-header-mobile-menu-content-name">
+        {{ current_person.name }}
+      </div>
+    {% endif %}
+    <div class="np-header-mobile-menu-content-nav">
+      <form
+        class="np-header-search"
+        data-test="mobile-search"
+        method="get"
+        action="{% route search %}"
+      >
+        <input
+          aria-label="{% t .search %}"
+          class="np-header-search-input"
+          type="text"
+          name="q"
+          placeholder="{% t .search %}"
+        />
+        <svg class="np-header-search-icon" width="40" height="40" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 9.25C3.5 6.07436 6.07436 3.5 9.25 3.5C12.4256 3.5 15 6.07436 15 9.25C15 12.4256 12.4256 15 9.25 15C6.07436 15 3.5 12.4256 3.5 9.25ZM9.25 2C5.24594 2 2 5.24594 2 9.25C2 13.2541 5.24594 16.5 9.25 16.5C10.9819 16.5 12.5719 15.8927 13.8189 14.8795L16.9697 18.0303C17.2626 18.3232 17.7374 18.3232 18.0303 18.0303C18.3232 17.7374 18.3232 17.2626 18.0303 16.9697L14.8795 13.8189C15.8927 12.5719 16.5 10.9819 16.5 9.25C16.5 5.24594 13.2541 2 9.25 2Z" fill="#001B38"/>
+        </svg>
+          
+      </form>
+      {% for website_navigation in navigations.header_navigations %}
+        <a
+          href="{{ website_navigation.path }}"
+          class="np-header-mobile-menu-content-button"
+          {% if website_navigation.external? %} target="_blank" {% endif %}
+        >
+          {{ website_navigation.name }}
+        </a>
+      {% endfor %}
+      <div class="np-header-mobile-menu-content-line"></div>
+      {% unless current_school.sso_active? %}
+        <a
+          class="np-header-mobile-menu-content-button"
+          href="{% route account %}"
+        >
+          {% t .profile_settings %}
+        </a>
+      {% endunless %}
+      <a
+        class="np-header-mobile-menu-content-button np-danger"
+        href="{% route logout %}"
+      >
+        {% t .sign_out %}
+      </a>
+    </div>
+  </div>
+</div>
+
+{% include "messages" %}
+<style>
+  .np-header-content {
+    justify-content: space-between;
+    max-width: 1440px;
+    margin: auto;
+    padding: 0 16px;
+
+  }
+  /*@media only screen and (max-width: 1150px) {
+    .hidden-mobile-custom {
+    display: none;
+  }*/
+}
+  .hidden-mobile-custom
+  .np-header-logo {
+    flex-grow:unset;
+  }
+ .header-buttons-wrapper {
+    display: flex;
+  }
+
+  .np-header-mobile-menu-nav-button {
+    font-size:25px;
+  }
+
+  .login-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 1rem;
+    background: #001B38;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 50px;
+    padding: 13px 24px;
+  }
+  .header-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .np-sub-navigation-content-item-link {
+    font-size: 16px;
+    font-weight: 600;
+    color: rgb(0, 27, 56);
+  }
+  .np-sub-navigation {
+    background: none;
+  }
+  .np-header {
+    position: fixed;
+    z-index: 1000;
+    -webkit-transition: all ease-out .5s;
+    -moz-transition: all ease-out .5s;
+    -o-transition: all ease-out .5s;
+    transition: all ease-out .5s;
+    top: 0;
+  }
+  .active {
+    background: #fff;
+    box-shadow: rgba(0, 27, 56, 0.08) 0px 4px 16px;
+  }
+
+  .np-header-search-input,
+  .np-header-search-input:focus {
+    border-radius: 50px;
+    opacity: 1;
+    color: #001b38;
+    border-color: #bbbdbf;
+  }
+  .np-header-font-background-color {
+    background: none; 
+  }
+  .np-header-avatar-image {
+    height: 46px;
+  }
+  .np-header-search-icon {
+    color: unset;
+  }
+
+  @media (min-width:768px) {
+    .np-header {
+      height:100px;
+    }
+
+    .header-logo-image {
+      height: 42px;
+    }
+  }
+  
+  @media (min-width:1170px) and (max-width:1200px) {
+    .np-sub-navigation-content-item {
+      margin: 0px 14px;
+    }
+  }
+
+</style>
+
+<script>
+  $(function() {
+    let link = window.location.href.length;
+
+    if (window.location.href.split("app")[1].includes("/")) document.getElementsByClassName('np-header')[0].style.background = "#fff";
+    $(window).on("scroll", function() {
+        if($(window).scrollTop() > 50) {
+            $(".np-header").addClass("active");
+        } else {
+            //remove the background property so it comes transparent again (defined in your css)
+           $(".np-header").removeClass("active");
+        }
+    });
+});
+</script>
--- a/Custom_Templates/customer_templates/Front/_homepage_courses_carousel.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_homepage_courses_carousel.html.liquid
@ -0,0 +1,51 @@
+{% if courses.enrolled.any? %}
+    <div class="courses-carousel-container">
+      {% for course in courses.enrolled %}
+        {% if course.completed? == false %}
+          <div class="courses-carousel">
+            {% include "cards_course" with course %}
+          </div>
+        {% endif %}
+      {% endfor %}
+    </div>
+  {% else %}
+    {% capture message %}
+      {% t shared.zero_state.courses.index,
+        key: current_school.course_vocabulary
+      %}
+    {% endcapture %}
+    {% include "courses_zero_state", message: message %}
+  {% endif %}
+  
+  <script>
+    var slider = tns({
+      container: '.courses-carousel-container',
+      items: 1,
+      nav: false,
+      autoHeight: true,
+      controlsText: ["<i class='fal fa-angle-left arrow-left '></i>","<i class='fal fa-angle-right arrow-right'></i>"],
+      responsive: {
+        1366: {
+          items: 4
+        },
+        1170: {
+          items: 3,
+          autoHeight: false,
+        },
+        600: {
+          items: 2,
+        }
+      }
+    });
+    </script>
+
+<style>
+    .courses-carousel-container {
+        height: 100%;
+        display: flex;
+        padding-bottom: 2rem;
+    }
+   
+  
+</style>
+  
--- a/Custom_Templates/customer_templates/Front/_learning_path_course.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_learning_path_course.html.liquid
@ -0,0 +1,74 @@
+{% if learning_path.enrolled? and course.unlocked? %}
+  <div class="np-learning-path-outline-bar np-hidden-mobile"></div>
+  <a
+    class="np-learning-path-outline-item np-card-container"
+    href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
+  >
+    <div class="np-learning-path-outline-course-image-wrapper">
+     <img
+        src="{{ item.image }}"
+        alt="{{ course.name }}"
+        class="np-learning-path-outline-course-image"
+      >
+    </div>
+    <div class="np-card-content np-card-padding">
+      <div class="np-learning-path-outline-content">
+        <div class="np-learning-path-card-info">
+          <div class="np-learning-path-outline-progress eyebrow-lg {% if course.progress == 0 %}gray{% endif %}">
+            {% if course.progress == 0 %}
+              {% t shared.progress, count: course.progress %}
+            {% elsif course.progress > 0 and course.progress < 100 %}
+              {{course.progress}}%
+            {% else %}
+              <i class="fas fa-check-circle"></i> COMPLETED
+            {% endif %}
+            
+          </div>
+          {% assign time = courses.enrolled | where: "id", course.id %}
+
+           {% if time.first.properties.duration != blank %} 
+            <div class="course-duration">
+            <i class="fal fa-clock"></i>
+              {{time.first.properties.duration}}
+            </div>
+          {% endif %} 
+        </div>
+        <div class="header-5 fw-semibold">
+          {{ course.name }}
+        </div>
+         <div class="fw-semibold" style="margin-top:30px;">
+            {% t shared.view %} course
+          <i class="far fa-long-arrow-right"></i>
+        </div>
+      </div>
+      {% if course.optional? %}
+        <div class="np-optional-ribbon">
+          {% t shared.optional %}
+        </div>
+      {% endif %}
+    </div>
+  </a>
+{% else %}
+  <div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
+    <div class="np-learning-path-outline-course-image-wrapper">
+     <img
+        src="{{ item.image }}"
+        alt="{{ course.name }}"
+        class="np-learning-path-outline-course-image"
+      >
+    </div>
+    <div class="np-card-content np-card-padding">
+      <div class="np-learning-path-outline-content">
+        <div class="header-5 fw-semibold">
+          {{ course.name }}
+        </div>
+
+      </div>
+      {% if course.optional? %}
+        <div class="np-optional-ribbon">
+          {% t shared.optional %}
+        </div>
+      {% endif %}
+    </div>
+  </div>
+{% endif %}
--- a/Custom_Templates/customer_templates/Front/_learning_path_desktop_view.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_learning_path_desktop_view.html.liquid
@ -0,0 +1,27 @@
+<div class="row">
+  <div class="col-xs-12 col-sm-5">
+    <div class="np-card-container lp-card-desktop">
+      <img
+        src="{{ learning_path.image_url }}"
+        class="np-top-image"
+        alt="{{ learning_path.name }}"
+      />
+      <div class="np-card-padding-dynamic">
+        {% include "learning_path_description" %}
+        {% include "learning_path_instructors" %}
+      </div>
+    </div>
+  </div>
+  <div class="col-xs-12 col-md-offset-1 col-md-6">
+    <div class="np-top-cta">
+      {% include "learning_path_progress_and_cta" %}
+    </div>
+    {% include "learning_path_outline" %}
+  </div>
+</div>
+
+<style>
+  .lp-top-color {
+    color: #001B38;
+  }
+</style>
--- a/Custom_Templates/customer_templates/Front/_learning_path_progress_and_cta.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_learning_path_progress_and_cta.html.liquid
@ -0,0 +1,60 @@
+{% if learning_path.enrolled? %}
+  {% assign lp_courses_count = 0 | times: 1 %}
+  {% assign sum_of_progress = 0.0 | times: 1 %}
+  {% for item in learning_path.items %}
+    {% if item.course? %}
+      {% assign lp_courses_count = lp_courses_count | plus: 1 %}
+      {% assign sum_of_progress = sum_of_progress | plus: item.progress %}
+    {% endif %}
+  {% endfor %}
+  {% if lp_courses_count == 0 %}
+    {% assign lp_progress = 0 %}
+  {% else %}
+    {% assign lp_progress = sum_of_progress | divided_by: lp_courses_count | round %}
+  {% endif %}
+{% else %}
+  {% assign lp_progress = 0 %}
+{% endif %}
+  <div class="np-top-cta-progress-content">
+    <div class="np-top-cta-progress-text
+        {% if lp_progress == 0 %} gray {% endif %}
+    ">
+      {% if lp_progress == 0 %}
+        {% t shared.progress, count: lp_progress %}
+      {% elsif lp_progress > 0 and lp_progress < 100 %}
+        {{lp_progress}}%
+      {% else %}
+        <i class="fas fa-check-circle"></i> COMPLETED
+      {% endif %}
+    </div>
+    <div class="np-progress-bar-container">
+      <div
+        style="width: {{ lp_progress }}%"
+        class="np-button-background-color np-card-progress-bar">
+      </div>
+    </div>
+  </div>
+
+
+<a
+  class="np-top-button np-button-font-color np-button np-button-big"
+{% if learning_path.enrolled? %}
+  {% if learning_path.current_item.course? %}
+    href="{% route learning_path_course, id: learning_path.current_item.id, learning_path_id: learning_path.id %}"
+  {% elsif learning_path.current_item.training_event? %}
+    href="{% route training_session, id: learning_path.current_item.id %}"
+  {% endif %}
+{% else %}
+    href="{% route learning_path_enrollment, code: learning_path.enrollment_code %}"
+{% endif %}
+>
+  {% if learning_path.enrolled? == false %}
+    {% t shared.enroll %}
+  {% elsif learning_path.started? == false %}
+    {% t shared.learning_path.start %}
+  {% elsif learning_path.completed? %}
+    {% t shared.learning_path.view %}
+  {% else %}
+    {% t shared.continue %}
+  {% endif %}
+</a>
--- a/Custom_Templates/customer_templates/Front/_learning_paths_homepage.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_learning_paths_homepage.html.liquid
@ -0,0 +1,28 @@
+<div class="learning-paths-wrapper-homepage">
+    {% if items.any? %}
+      {% for learning_path in items %}
+        {% include "cards_learning_path_homepage" with learning_path %}
+      {% endfor %}
+    {% else %}
+      <div class="np-learning-paths-resources-container">
+        <div class="np-zero-state-text">
+          {% t .empty %}
+        </div>
+        <img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
+      </div>
+    {% endif %}
+</div>
+  
+<style>
+.learning-paths-wrapper-homepage {
+    flex-direction: row;
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+@media only screen and (max-width: 900px) {
+    .learning-paths-wrapper-homepage  {
+      flex-direction: column;
+    }
+}
+</style>
--- a/Custom_Templates/customer_templates/Front/_progress_circle.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_progress_circle.html.liquid
@ -0,0 +1,79 @@
+<div class="np-progress-ring-wrapper">
+  <svg
+    class="progress-ring"
+    width="{{ size }}"
+    height="{{ size }}">
+    <circle
+      class="progress-ring__circle circle-{{name}}"
+      stroke="#fff"
+      stroke-width="10"
+      fill="transparent"
+      r="52"
+      cx="60"
+      cy="60"/>
+    <circle
+      class="progress-ring__circle circle-bg"
+      stroke="rgba(100, 100, 100, 0.15)"
+      stroke-width="10"
+      fill="transparent"
+      r="52"
+      cx="60"
+      cy="60"/>
+      <text x="50%" y="50%" text-anchor="middle" stroke="t#000" stroke-width="1px" fill="#fff" dy=".3em">{{count}}</text>
+  </svg>
+  <h3 class="np-card-content-title np-progress-circle-label">
+    {{name}}
+  </h3>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var circle = document.getElementsByClassName("circle-{{name}}")[0];
+    var radius = circle.r.baseVal.value;
+    var circumference = radius * 2 * Math.PI;
+
+    circle.style.strokeDasharray = `${circumference} ${circumference}`;
+    circle.style.strokeDashoffset = `${circumference}`;
+
+    function setProgress(percent) {
+      const offset = circumference - percent * circumference;
+      circle.style.strokeDashoffset = offset;
+    }
+    setProgress('{{ count | divided_by: total }}')
+  }) 
+</script>
+
+<style>
+  .np-progress-ring-wrapper {
+    flex: 0;
+    flex-direction: column;
+    display: flex;
+    width: 100%;
+    padding: 1.5rem 1rem 1rem 1rem;
+    align-items: center;
+  }
+
+  .progress-ring circle { stroke-linecap: round; }
+  .progress-ring text { font-size:2rem; }
+  .progress-ring__circle {
+    transition: stroke-dashoffset 0.35s;
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+
+  .np-progress-circle-label {
+    color:#fff;
+    text-transform: uppercase;
+    font-size:0.875rem;
+    margin-top:1rem;
+  }
+
+  @media (min-width:768px) {
+    .np-progress-ring-wrapper { padding: 1.5rem 0.4rem 1rem 0.4rem;}
+  }
+
+  @media (min-width:1170px) {
+    .progress-ring text { font-size:2.5rem; }
+    .np-progress-ring-wrapper { padding: 1.5rem 1rem 1rem 1rem;}
+  }
+</style>
--- a/Custom_Templates/customer_templates/Front/_sub_navigation.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_sub_navigation.html.liquid
@ -0,0 +1,34 @@
+<nav class="np-sub-navigation">
+  <div class="np-sub-navigation-content">
+    <div class="np-sub-navigation-content-item">
+      <a class="np-sub-navigation-content-item-link" href="/app">
+        Home
+      </a>
+      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
+    </div>
+      <div class="np-sub-navigation-content-item">
+        <a class="np-sub-navigation-content-item-link" href="/app/dashboard">
+          My Training
+        </a>
+        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
+      </div>
+      <div class="np-sub-navigation-content-item">
+        <a class="np-sub-navigation-content-item-link" href="/learning_paths">
+          Learning Paths
+        </a>
+        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
+      </div>
+      <div class="np-sub-navigation-content-item">
+        <a class="np-sub-navigation-content-item-link" href="/catalog">
+          All Courses
+        </a>
+        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
+      </div>
+      <div class="np-sub-navigation-content-item">
+        <a class="np-sub-navigation-content-item-link" href="/training_events">
+          Events
+        </a>
+        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
+      </div>
+  </div>
+</nav>
--- a/Custom_Templates/customer_templates/Front/_training_events_zero_state.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_training_events_zero_state.html.liquid
--- a/Custom_Templates/customer_templates/Front/_widget_course_progress.html.liquid
+++ b/Custom_Templates/customer_templates/Front/_widget_course_progress.html.liquid
@ -0,0 +1,73 @@
+<div class="np-dashboard-resources course-progress-widget">
+  <div class="np-card">
+    <div class="np-card-container np-dashboard-border">
+        {% if courses.enrolled.any? %}
+          {% assign countComplete = 0 %}
+          {% assign countInProgress = 0 %}
+          {% assign countNotStarted = 0 %}
+          {% assign countTotal = 0 | times: 1.0 %}
+          {% for course in courses.enrolled %}
+            {% assign countTotal = countTotal | plus: 1 %}
+            {% if course.progress == 100 %}
+              {% assign countComplete = countComplete | plus: 1 %}
+            {% endif %}
+            {% if course.progress > 0 and course.progress < 100 %}
+              {% assign countInProgress = countInProgress | plus: 1 %}
+            {% endif %}
+            {% if course.progress == 0 %}
+              {% assign countNotStarted = countNotStarted | plus: 1 %}
+            {% endif %}
+          {% endfor %}
+          <ul class="progress-circle-list">
+            <li>
+              {% 
+                include "progress_circle", 
+                name:'Completed' , 
+                count: countComplete , 
+                total: countTotal,
+                size: "120",
+                stroke_color: "rgba(43, 178, 76, 1)",
+                stroke_color_bg: "rgba(255, 255, 255, 0.15)" 
+              %}
+            </li>
+            <li>
+              {% 
+                include "progress_circle", 
+                name:'In Progress' , 
+                count: countInProgress , 
+                total: countTotal,
+                size: "120",
+                stroke_color: "rgba(43, 178, 76, 1)",
+                stroke_color_bg: "rgba(255, 255, 255, 0.15)"  
+              %}
+            </li>
+          </ul>
+        {% else %}
+          {% capture message %}
+            {% t shared.zero_state.courses.index,
+              key: current_school.course_vocabulary
+            %}
+          {% endcapture %}
+          {% include "courses_zero_state", message: message %}
+        {% endif %}
+    </div>
+  </div>
+</div>
+
+
+<style>
+
+.course-progress-widget .np-card-container {
+  background-color: #001B38;
+}
+
+  .progress-circle-list { 
+    padding: 0; 
+    list-style-type: none !important;     
+    justify-content: space-around;
+    display:flex;
+    align-items:center;
+    max-width: 400px;
+    margin: auto;
+  }
+</style>
--- a/Custom_Templates/customer_templates/Front/catalog.html.liquid
+++ b/Custom_Templates/customer_templates/Front/catalog.html.liquid
@ -0,0 +1,28 @@
+{% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.in_catalog %}
+
+<main class="catalog container-fluid np-max-width">
+  <div class="hidden-desktop-custom">
+    {% include "sub_navigation" %}
+  </div>
+  <div class="header-2" style="margin-bottom:40px;">All Courses</div>
+  <div class="np-resource-subtitle">
+    Enroll in individual courses through the course catalog
+  </div>
+  <div class="catalog-wrapper row">
+    <div class="catalog-filter col-sm-6 col-md-3 col-12">
+      {%include "catalog_filtter_courses"%}
+    </div>
+
+    <div class="catalog-courses container-fluid col-sm-6 col-md-9 col-12">
+      <div class="catalog-courses-container">
+    
+            {%include "courses_catalog"%}
+      
+      </div>
+    </div>
+  </div>
+
+</div>
+</main>
+{% include "footer" %}
--- a/Custom_Templates/customer_templates/Front/course.html.liquid
+++ b/Custom_Templates/customer_templates/Front/course.html.liquid
@ -0,0 +1,87 @@
+{% include "header" %}
+<div class="cover-page-hero course-hero">
+  <div class="np-max-width np-page-container">
+    <div class="row">
+      <div class="col-xs-12 col-sm-9">
+        <h1 class="header-1">{{course.name}}</h1>
+        <div class="eyebrow-lg fw-semibold course-vocab">{{ current_school.course_vocabulary }}</div>
+      </div>
+    </div>
+  </div>
+</div>
+<main class="np-main np-max-width np-page-container cover-page">
+  <div class="np-hidden-mobile" id="course-desktop">
+    {% include "course_desktop_view" %}
+  </div>
+  <div class="np-hidden-desktop" id="course-mobile">
+    {% include "course_mobile_view" %}
+  </div>
+</main>
+{% include "footer" %}
+
+<style>
+  .course-mobile-header {
+    margin:0 16px;
+    background: transparent;
+  }
+
+  .course-mobile-header img {
+    border-radius: 0;
+  }
+
+  .np-course-outline-content-activity-list {
+    border-bottom: none;
+  }
+
+  .np-top-image {
+    margin-bottom:0;
+  }
+
+  .np-course-outline-content-activity-list a,
+  .np-course-outline-content-activity-list i {
+    font-size: 20px;
+    line-height: 120%;
+  }
+
+  .np-course-outline-content-activity-list a {
+    color: #001B38;
+  }
+
+  .np-course-outline-content-section-name {
+    border-bottom: 1px solid #E3E3E3;
+    padding-bottom:18px;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 130%;
+  }
+
+  .np-course-outline-content-activity-list {
+    padding: 16px 0;
+  }
+
+  .cover-page-categories,
+  .cover-page-instructors {
+    margin-top: 40px;
+  }
+
+  .cover-page-categories .np-flex {
+    flex-wrap:wrap;
+  }
+
+  .np-content-categories-content-item {
+    background-color:#E3E3E3;
+    border-radius:6px;
+    padding: 4px 12px;
+    margin-right:12px;
+    text-transform: uppercase;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 125%;
+    color:#808080;
+    margin-bottom:18px;
+  }
+
+  @media (min-width:768px) {
+   
+  }
+</style>
--- a/Custom_Templates/customer_templates/Front/courses.html.liquid
+++ b/Custom_Templates/customer_templates/Front/courses.html.liquid
@ -0,0 +1,13 @@
+{% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.enrolled %}
+<main class="np-main np-courses np-subpage-container np-max-width">
+  <div class="hidden-desktop-custom">
+    {% include "sub_navigation" %}
+  </div>
+  <div class="np-resource-title">
+    {% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
+  </div>
+  <div class="np-resource-subtitle">{% t .headline, key: current_school.course_vocabulary %}</div>
+  {% include "courses_index", class: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
+</main>
+{% include "footer" %}
--- a/Custom_Templates/customer_templates/Front/dashboard.html.liquid
+++ b/Custom_Templates/customer_templates/Front/dashboard.html.liquid
@ -0,0 +1,54 @@
+{% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.enrolled %}
+<main class="np-main np-dashboard np-subpage-container np-max-width">
+  <div class="hidden-desktop-custom">
+    {% include "sub_navigation" %}
+  </div>
+  <div class="np-dashboard-header">
+    <div class="header-2">Hi {{current_person.first_name}}!</div>
+    <div class="np-resource-subtitle">Keep up the good work! Here's what is relevant to you right now.</div>
+  </div>
+  <div class="row np-flex-center">
+    <div class="col-xs-12 col-sm-8">
+      {% if features.learning_paths? %}
+        <div class="header-3">
+          {% t shared.learning_paths %}
+        </div>
+        {% include "learning_paths_index", items: learning_paths.enrolled %}
+      {% endif %}
+    </div>
+    {% if features.training_events? %}
+      <div class="np-grid-spacing col-xs-12 col-sm-4">
+        <div class="header-3">
+          Course Progress
+        </div>
+        {% include "widget_course_progress" %}
+      </div>
+    {% endif %}
+  </div>
+  {% comment %} <div class="np-dashboard-resources-title">
+    Upcoming events
+  </div>
+  {% include "training_events_index" %} {% endcomment %}
+  <div class="header-3">
+  Courses
+  </div>
+  {% include "homepage_courses_carousel"%}
+  <div class="row dashboard-section-instructors">
+    <div class="col-xs-12">
+      <div class="header-3">
+        Meet your instructors
+      </div>
+      {% 
+      include "carousel_instructors", 
+      %}
+    </div>
+  </div>
+</main>
+{% include "footer" %}
+
+<style>
+  .np-dashboard-header {
+    margin-bottom:60px;
+  }
+</style>
--- a/Custom_Templates/customer_templates/Front/homepage.html.liquid
+++ b/Custom_Templates/customer_templates/Front/homepage.html.liquid
@ -0,0 +1,135 @@
+{% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.featured %}
+<main class="np-main np-homepage">
+  <div class="np-homepage-hero">
+    <div class="np-homepage-hero-content">
+      <div class="header-1">
+        {{ homepage.headline }}
+      </div>
+      <div class="np-homepage-subheadline np-header-font-color">
+        {{ homepage.subheadline }}
+      </div>
+    </div>
+  </div>
+  <div class="hidden-desktop-custom">
+    {% include "sub_navigation" %}
+  </div>
+  <div class="np-homepage-featured np-max-width">
+    <div class="np-homepage-featured-courses row">
+      {% if learning_paths.available.any? %}
+        {% for learning_path in learning_paths.available %}
+          {% if learning_path.name == "Set up Front for my company" or learning_path.name == "Front for my daily work" or learning_path.name == "Make smarter decisions with Front analytics" %}
+            <div class="col-xs-12 col-sm-6 col-md-4">
+            {% include "cards_learning_path_vertical" with learning_path %}
+            </div>
+          {% endif %}
+        {% endfor %}
+        <div class="col-xs-12 col-sm-6 col-md-4">
+          <div class="just-browsing-card np-card" style="height:100%; padding-bottom:32px;">
+            <div class="np-card-container">
+              <img
+                alt="Just Browsing"
+                class="course-card-image"
+                src="https://s3.amazonaws.com/static.northpass.com/Front+Academy/just+browsing.png"
+              />
+              <div class="np-card-content np-card-content-vertical np-card-padding">
+                <h3 class="np-card-content-title header-5 fw-semibold" style="margin-top:0;">
+                  Just Browsing
+                </h3>
+                <div class="paragraph-2">
+                  Not sure where to start? Browse the full course catalog to discover everything Front Academy has to offer.
+                </div>
+                <div class="np-card-content-footer">
+                  <a class="fw-semibold" href="/app/catalog">
+                    Explore all courses
+                    <i class="far fa-long-arrow-right"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      {% endif %}
+    </div>
+
+    <div class="row homepage-cta-row">
+      <div class="col-xs-12">
+        <div class="cta-headline">Already on the path?</div>
+        <a class="np-button" href="/app/dashboard">Continue training</a>
+      </div>
+    </div>
+  </div>
+</main>
+{% include "footer" %}
+
+<style>
+.course-card-image{
+  width: 100%;
+}
+.np-header:not(.active) {
+  background-color:transparent;
+}
+
+.np-homepage-hero {
+  padding-top: 100px;
+  background: #B0F1FC;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30.25%, #FFFFFF 100%), radial-gradient(107.78% 150.23% at -5.14% 65.55%, #B0F1FC 0%, #D9F8FF 65.77%)
+}
+
+.np-homepage-hero-content {
+  position:relative;
+  padding: 24px 24px 70px;
+}
+
+.np-homepage-hero .np-homepage-subheadline {
+  font-weight: 400;
+  font-size: 22px;
+  line-height:normal;
+  margin-top: 0;
+  opacity: 1;
+}
+
+.lp-homepage-btn {
+  margin-top: 1.5rem;
+  width: 100%;
+  text-align: center;
+  background: #cc0049;
+  color: #fff;
+  padding: 2rem;
+  border-radius: 8px;
+  font-size: 1.5rem;
+}
+.lp-btn-arrow {
+  margin-left: 1rem;
+}
+
+.homepage-cta-row {
+  margin-top: 70px;
+  text-align: center;
+}
+
+.cta-headline {
+  font-size:36px;
+  margin-bottom:32px;
+  font-weight:600;
+}
+
+@media (min-width:768px) {
+  .np-homepage-hero-content {
+    padding: 80px 24px 100px;
+  }
+
+  .np-homepage-hero .np-homepage-subheadline {
+    font-size: 24px;
+  }
+
+  .homepage-cta-row {
+    margin-top: 100px;
+  }
+
+  .cta-headline {
+    font-size:50px;
+    margin-bottom:40px;
+  }
+}
+</style>
--- a/Custom_Templates/customer_templates/Front/learning-path-0e9846a6-4427-44a0-b49e-70ba3616ec7f.html.liquid
+++ b/Custom_Templates/customer_templates/Front/learning-path-0e9846a6-4427-44a0-b49e-70ba3616ec7f.html.liquid
@ -0,0 +1,63 @@
+{% comment %} skip-auth {% endcomment %}
+{% include "header" %}
+
+{% for learning_path in learning_paths.available %}
+  {% if learning_path.id == "0e9846a6-4427-44a0-b49e-70ba3616ec7f" %}
+    <div class="cover-page-hero learning-path-hero">
+      <div class="np-max-width np-page-container">
+        <div class="row">
+          <div class="col-xs-12 col-sm-9">
+            <h1 class="header-1">{{learning_path.name}}</h1>
+            <div class="eyebrow-lg fw-semibold course-vocab">{% t shared.learning_path.title %}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <main class="np-main np-max-width np-page-container cover-page">
+      <div class="np-hidden-mobile" id="learning-path-desktop">
+        {% include "learning_path_desktop_view" %}
+      </div>
+      <div class="np-hidden-desktop" id="learning-path-mobile">
+        {% include "learning_path_mobile_view" %}
+      </div>
+    </main>
+  {% endif %}
+{% endfor %}
+
+{% include "footer" %}
+
+<style>
+.np-learning-path-outline-item {
+  flex-direction: row;
+}
+
+.np-learning-path-outline-course-image-wrapper {
+  width:25%;
+  position: relative;
+  overflow: hidden;
+}
+
+.np-learning-path-outline-course-image-wrapper img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-height: 100%;
+  width: auto;
+}
+
+.np-learning-path-outline-content {
+  margin:0;
+}
+
+.np-learning-path-card-info {
+  display:flex;
+  justify-content: space-between;
+  align-items:center;
+  margin-bottom:32px;
+}
+
+.np-learning-path-outline-content .header-5 {
+  margin-bottom:8px;
+}
+</style>
--- a/Custom_Templates/customer_templates/Front/learning-path-41690773-e559-4be8-8af6-ab5fa22fb0df.html.liquid
+++ b/Custom_Templates/customer_templates/Front/learning-path-41690773-e559-4be8-8af6-ab5fa22fb0df.html.liquid
@ -0,0 +1,63 @@
+{% comment %} skip-auth {% endcomment %}
+{% include "header" %}
+
+{% for learning_path in learning_paths.available %}
+  {% if learning_path.id == "41690773-e559-4be8-8af6-ab5fa22fb0df" %}
+    <div class="cover-page-hero learning-path-hero">
+      <div class="np-max-width np-page-container">
+        <div class="row">
+          <div class="col-xs-12 col-sm-9">
+            <h1 class="header-1">{{learning_path.name}}</h1>
+            <div class="eyebrow-lg fw-semibold course-vocab">{% t shared.learning_path.title %}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <main class="np-main np-max-width np-page-container cover-page">
+      <div class="np-hidden-mobile" id="learning-path-desktop">
+        {% include "learning_path_desktop_view" %}
+      </div>
+      <div class="np-hidden-desktop" id="learning-path-mobile">
+        {% include "learning_path_mobile_view" %}
+      </div>
+    </main>
+  {% endif %}
+{% endfor %}
+
+{% include "footer" %}
+
+<style>
+.np-learning-path-outline-item {
+  flex-direction: row;
+}
+
+.np-learning-path-outline-course-image-wrapper {
+  width:25%;
+  position: relative;
+  overflow: hidden;
+}
+
+.np-learning-path-outline-course-image-wrapper img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-height: 100%;
+  width: auto;
+}
+
+.np-learning-path-outline-content {
+  margin:0;
+}
+
+.np-learning-path-card-info {
+  display:flex;
+  justify-content: space-between;
+  align-items:center;
+  margin-bottom:32px;
+}
+
+.np-learning-path-outline-content .header-5 {
+  margin-bottom:8px;
+}
+</style>
--- a/Custom_Templates/customer_templates/Front/learning_path.html.liquid
+++ b/Custom_Templates/customer_templates/Front/learning_path.html.liquid
@ -0,0 +1,57 @@
+{% comment %} skip-auth {% endcomment %}
+{% include "header" %}
+<div class="cover-page-hero learning-path-hero">
+  <div class="np-max-width np-page-container">
+    <div class="row">
+      <div class="col-xs-12 col-sm-9">
+        <h1 class="header-1">{{learning_path.name}}</h1>
+        <div class="eyebrow-lg fw-semibold course-vocab">{% t shared.learning_path.title %}</div>
+      </div>
+    </div>
+  </div>
+</div>
+<main class="np-main np-max-width np-page-container cover-page">
+  <div class="np-hidden-mobile" id="learning-path-desktop">
+    {% include "learning_path_desktop_view" %}
+  </div>
+  <div class="np-hidden-desktop" id="learning-path-mobile">
+    {% include "learning_path_mobile_view" %}
+  </div>
+</main>
+{% include "footer" %}
+
+<style>
+.np-learning-path-outline-item {
+  flex-direction: row;
+}
+
+.np-learning-path-outline-course-image-wrapper {
+  width:25%;
+  position: relative;
+  overflow: hidden;
+}
+
+.np-learning-path-outline-course-image-wrapper img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-height: 100%;
+  width: auto;
+}
+
+.np-learning-path-outline-content {
+  margin:0;
+}
+
+.np-learning-path-card-info {
+  display:flex;
+  justify-content: space-between;
+  align-items:center;
+  margin-bottom:32px;
+}
+
+.np-learning-path-outline-content .header-5 {
+  margin-bottom:8px;
+}
+</style>
--- a/Custom_Templates/customer_templates/Front/learning_paths.html.liquid
+++ b/Custom_Templates/customer_templates/Front/learning_paths.html.liquid
@ -0,0 +1,16 @@
+{% include "header" %}
+<main class="np-main np-learning-paths np-subpage-container np-max-width">
+  <div class="hidden-desktop-custom">
+    {% include "sub_navigation" %}
+  </div>
+  <div class="np-learning-paths-main">
+    <div class="header-2">
+      {% t shared.learning_paths %}
+    </div>
+    <div class="np-resource-subtitle">
+      {% t .subtitle %}
+    </div>
+    {% include "learning_paths_index", items: learning_paths.available %}
+  </div>
+</main>
+{% include "footer" %}
--- a/Custom_Templates/customer_templates/Front/styles.css.liquid
+++ b/Custom_Templates/customer_templates/Front/styles.css.liquid
@ -0,0 +1,662 @@
+ /*
+ Put your custom overlay styles in here
+ You can use your northpass color palette in this file
+
+{{ color_palette.button_font_color }}
+{{ color_palette.button_color }}
+{{ color_palette.button_hover_color }}
+{{ color_palette.header_font_color }}
+{{ color_palette.header_font_hover_color }}
+{{ color_palette.header_color }}
+*/
+
+/*Fonts*/
+
+@font-face {
+    font-family: "Roobert";
+    src: url("https://s3.amazonaws.com/static.northpass.com/Front+Academy/front+fonts/Roobert-Brand-Bold.otf");
+    font-weight: bold;
+}
+@font-face {
+    font-family: "Roobert";
+    src: url("https://s3.amazonaws.com/static.northpass.com/Front+Academy/front+fonts/Roobert-Brand-Heavy.otf");
+    font-weight: 900;
+}
+@font-face {
+    font-family: "Roobert";
+    src: url("https://s3.amazonaws.com/static.northpass.com/Front+Academy/front+fonts/Roobert-Brand-Light.otf");
+    font-weight: 300;
+}
+@font-face {
+    font-family: "Roobert";
+    src: url("https://s3.amazonaws.com/static.northpass.com/Front+Academy/front+fonts/Roobert-Brand-Medium.otf");
+    font-weight: 500;
+}
+@font-face {
+    font-family: "Roobert";
+    src: url("https://s3.amazonaws.com/static.northpass.com/Front+Academy/front+fonts/Roobert-Brand-Regular.otf");
+    font-weight: 400;
+}
+@font-face {
+    font-family: "Roobert";
+    src: url("https://s3.amazonaws.com/static.northpass.com/Front+Academy/front+fonts/Roobert-Brand-SemiBold.otf");
+    font-weight: 600;
+}
+
+body {
+    font-family: "Roobert", "Roboto", sans-serif;
+    background-color:#fff;
+}
+
+h1, h2, h3, h4, h5, a {
+    text-decoration: none;
+    color: #001B38;
+    margin: 0;
+    padding: 0;
+}
+div {
+    color: #001B38;
+}
+h1 {
+    font-size: 2.5rem;
+}
+h3 {
+    font-size: 1.5rem;
+    font-weight: 400;
+}
+
+.fw-regular { font-weight: 400;}
+.fw-semibold { font-weight: 600;}
+.fw-bold { font-weight: 700;}
+.gray { color:#808080; }
+.np-alert {display:none;}
+
+
+/* TYPOGRAPHY STYLES  */
+.header-1 {
+    font-size: 38px;
+    line-height: 110%;
+    font-weight: 600;
+    margin-bottom: 32px;
+    letter-spacing: -0.01em;
+}
+
+.header-2 {
+    font-size: 36px;
+    line-height: 118%;
+    font-weight: 600;
+    margin-bottom: 32px;
+    margin-top: 0;
+    letter-spacing: -0.01em;
+}
+
+.header-3 {
+    font-size: 28px;
+    line-height: 118%;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    margin-bottom: 32px;
+    margin-top: 0;
+}
+
+.header-5 {
+    font-size: 20px;
+    line-height: 130%;
+}
+
+.eyebrow-lg {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 125%;
+    color:#001B38;
+}
+
+.eyebrow-sm {
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 125%;
+    color:#001B38;
+}
+
+.paragraph-1 {
+    font-size: 24px;
+    line-height: 130%;
+}
+
+.paragraph-2,
+.paragraph-2 p {
+    font-size: 16px;
+    line-height: 160%;
+    color:#001B38!important;
+}
+
+.fa-check-circle {
+    color:#2D8058;
+    margin-right:6px;
+}
+
+@media (min-width:768px) {
+    .header-1 {
+        font-size: 60px;
+        margin-bottom: 40px;
+    }
+
+    .header-2 {
+        font-size: 49px;
+    }
+
+    .header-3 {
+        font-size: 32px;
+        margin-bottom: 60px;
+    }
+
+    .np-card-padding {padding: 30px;}
+    .np-subpage-container {padding-left:16px; padding-right:16px;}
+}
+
+/* Global */
+
+.np-dashboard, .np-learning-paths, .catalog, .np-training-events, .np-main {
+    padding-top: 140px;
+}
+.np-button {
+    border-radius: 50px;
+    padding: 13px 24px;
+    font-size: 16px;
+    line-height:normal;
+    font-weight: 400;
+    height:auto;
+}
+.np-footer-logo-image {
+    opacity: 1;
+    filter: none;
+}
+.row .np-card {
+    padding: 0px 0px 64px;
+}
+.np-dashboard-resources-title {
+    font-size: 1.25rem;
+    text-transform: none;
+    font-weight: 400;
+}
+.np-card-container {
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px rgba(0, 27, 56, 0.1);
+    overflow:hidden;
+}
+.np-dashboard-resources-container {
+    border-radius: 30px;
+    border: none;
+}
+.np-card {
+    padding: 0 0.5rem;
+}
+
+.dashboard-section-instructors {
+    margin-top: 32px;
+}
+
+.np-dashboard, .np-learning-paths, .np-training-events {
+    background: #fff;
+}
+.catalog-course-wrapper {
+    margin-bottom: 2rem;
+    padding: 0 8px;
+}
+
+.slick-arrow {
+    display: none !important;
+}
+.np-dashboard-resources-title, .np-resource-subtitle {
+    color: #001B38;
+    text-align:left;
+    padding: 0;
+}
+.np-zero-state-text {
+    margin-bottom: 0px;
+}
+.extra-space {
+    margin-top: 1rem;
+}
+.np-catalog-courses {
+    margin-top: 0;
+}
+
+#isPasted {
+    background: none !important;
+}
+.color-white {
+    color: #fff;
+}
+.lp-card-desktop {
+    height: unset;
+}
+.np-homepage-featured {
+    margin-top: 0;
+    padding: 0 16px;
+}
+.np-homepage.np-main {
+    margin-bottom: 0;
+    padding-bottom: 64px;
+    padding-top:0;
+}
+.progress-color-darker {
+    color: #001B38;
+}
+.instructor-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+.np-catalog-courses {
+    margin-bottom: 5rem;
+}
+.np-optional-ribbon {
+  display: none;
+  color: #001B38;
+  background-color: #FDECB3;
+}
+.catalog-filter {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+}
+@media only screen and (max-width: 1030px) {
+    .catalog-filter {
+       width: 100%;
+    }
+    .filter-container {
+        width: 100% !important;
+    }
+    .course-card {
+        width: 100%;;
+    }
+  }
+@media only screen and (min-width: 1050px) {
+  .hidden-desktop-custom {
+    display: none;
+  }
+}
+@media only screen and (max-width: 768px) {
+    .np-header-mobile-menu-nav {
+        position: inherit;
+    }
+    .np-dashboard, .np-learning-paths, .catalog, .np-training-events, .np-main {
+        padding-top: 50px;
+    }
+    .np-sub-navigation-content-item-link {
+        margin: 0 0.3rem;
+        font-size: 15px !important;
+    }
+    .np-catalog-courses {
+        width: 100%;
+    }
+    .catalog-course-wrapper {
+        display: flex;
+    }
+    .course-card {
+        margin: 0 !important;
+    }
+    .filter-container {
+        margin-bottom: 1rem;
+    }
+  }
+
+
+  /* Course Cards & vertical learning path cards  */
+  .np-card.np-card-learning-path-vertical,
+  .np-card.np-card-course {
+    padding-bottom:32px;
+    height:100%;
+  }
+
+   .np-card.np-card-learning-path-vertical .course-card-image,
+   .np-card.np-card-course .course-card-image {
+        max-width:100%;
+   }
+
+   .np-card.np-card-course .eyebrow-lg.gray {
+    color:#808080;
+   }
+
+   .np-card.np-card-course .np-card-header-type  > span {
+    background: #E3E3E3;
+    border-radius: 6px;
+    padding: 4px 12px;
+   }
+
+   .np-card.np-card-course .fa-check-circle {
+    color:#2D8058;
+    margin-right:6px;
+   }
+
+   .np-card.np-card-course .course-duration {
+    color:#808080;
+   }
+
+   .np-card.np-card-course .course-duration .fa-clock {
+    margin-right:4px;
+   }
+
+  .np-card.np-card-learning-path-vertical .paragraph-2,
+  .np-card.np-card-course .paragraph-2 {
+    flex:1;
+  }
+
+  .card-info-wrapper {
+    display:flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  .np-card.np-card-learning-path-vertical a .fa-long-arrow-right,
+  .np-card.np-card-course a .fa-long-arrow-right,
+  .np-card.just-browsing-card a .fa-long-arrow-right {
+    margin-left: 6px;
+  }
+
+  /* Learning Path Cards  */
+
+  .np-card-learning-path .np-card-content-footer-lp {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 32px;
+  }
+
+  .np-card-learning-path .lp-progress {
+    margin-right:30px;
+    flex:1;
+  }
+
+  .np-card-learning-path .eyebrow-lg {
+    color:#001B38;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin-bottom: 16px;
+  }
+
+  .np-card-learning-path .eyebrow-lg.gray {
+    color:#808080;
+  }
+
+  .np-card-learning-path .fa-check-circle {
+    color:#2D8058;
+    margin-right:6px;
+  }
+
+  .np-card-learning-path .np-card-progress-bar {
+    background-color:#001B38;
+  }
+
+  .np-card-learning-path .np-card-progress-bar-container,
+  .np-card-learning-path .np-card-progress-bar {
+    height:8px;
+  }
+
+  @media (min-width:768px) {
+
+    .np-learning-path {
+        min-height: 200px;
+    }
+
+    .np-learning-path .np-card-content {
+        justify-content: space-between;
+        padding-top:30px;
+    }
+
+    .np-card-learning-path .lp-image-wrapper {
+        width: 33%;
+        min-width: 33%;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .np-card-learning-path .np-learning-path-image {
+        min-width: 100%;
+        min-height: 100%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .np-card-learning-path .np-card-content-footer-lp {
+        margin-top: 36px;
+    }
+  }
+
+  /* CAROUSEL STYLING  */
+div.tns-outer {
+    position: relative;
+    padding-right: 20px!important;
+    padding-left: 20px!important;
+}
+
+.tns-controls {
+    position: absolute;
+    z-index: 1111;
+    top: 32%;
+    left: 0;
+    width: 100%;
+    justify-content: space-between;
+    display: flex;
+}
+
+.tns-nav {
+    justify-content: center;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.tns-nav button {
+    cursor: pointer;
+    background: transparent;
+    border: 1px solid #001b38;
+    margin: 0 8px 10px;
+    border-radius: 50%;
+    padding: 0;
+    width: 10px;
+    height: 10px;
+  }
+
+  .tns-nav button.tns-nav-active {
+    background-color:#001b38;
+  }
+
+  .tns-controls button {
+    width: 50px;
+    position: relative;
+    background: transparent;
+    border: none;
+  }
+
+  .tns-controls button[data-controls='prev'] {
+    left: -14px;
+  }
+
+  .tns-controls button[data-controls='next'] {
+    right: -14px;
+  }
+
+  .tns-controls .arrow-left,
+  .tns-controls .arrow-right {
+    color: #808080;
+    font-size: 3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.courses-carousel {
+    height: auto;
+    display: flex;
+    align-items: stretch;
+}
+
+.courses-carousel .np-card {
+    padding: 0 16px 32px;
+}
+
+/* COVER PAGE STYLES (COURSE & LEARNING PATH) */
+
+.np-header:not(.active) {
+    background-color:transparent!important;
+}
+
+.cover-page-hero {
+    padding:100px 16px 50px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30.25%, #FFFFFF 100%), radial-gradient(90.83% 165.04% at 100% 29.31%, #FFFADB 5.03%, #E0FEE7 96.72%);
+}
+
+.cover-page-hero.course-hero {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30.25%, #FFFFFF 100%), radial-gradient(90.83% 165.04% at 100% 29.31%, #FFFADB 5.03%, #E0FEE7 96.72%);
+}
+
+.cover-page-hero.learning-path-hero {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30.25%, #FFFFFF 100%), radial-gradient(90.83% 165.04% at 100% 29.31%, #FFDEEB 0%, #FFFADB 100%)
+}
+
+.cover-page-hero .np-page-container {
+    margin-top:0;
+    margin-bottom:0;
+}
+
+.course-vocab {
+    text-transform: uppercase;
+}
+
+.cover-page.np-main.np-page-container {
+    padding-top:0;
+    margin-top:0;
+}
+
+.cover-page .np-card-heading {
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 125%;
+}
+
+.np-content-instructors-content-item {
+    align-items: center;
+}
+
+.cover-page .np-top-cta {
+    background: #F5F5F5;
+    margin: 24px 6px;
+    border-radius: 0px;
+    padding: 18px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.cover-page .np-top-cta-progress-content {
+    margin-right: 16px;
+    width: 50%;
+    min-width: 50%;
+}
+
+.cover-page .np-card-progress-bar,
+.cover-page .np-progress-bar-container {
+    height:8px;
+}
+
+.cover-page .np-top-cta-progress-text {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 125%;
+    margin-top:0;
+}
+
+.cover-page .np-top-cta-progress-text.gray {
+    color:#808080;
+}
+
+.cover-page .np-card-progress-bar {
+    background-color: #001B38;
+}
+
+.np-content-instructors-content-name {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    color: #001B38;
+  }
+
+  .np-content-instructors-content-info {
+    font-size: 16px;
+    line-height: 160%;
+    color: #001B38;
+  }
+
+  .np-learning-path-outline-inactive-item {
+    border: none;
+    display: flex;
+    align-items: unset;
+  }
+
+  .np-learning-path-outline-inactive-item .np-learning-path-outline-course-image {width:100%;}
+
+
+@media (min-width:768px) {
+    .cover-page-hero {
+      padding-top:180px;
+    }
+
+    .cover-page .np-card-text {
+        font-size: 17px;
+        line-height: 150%;
+      }
+
+    .cover-page .np-top-cta-progress-content {
+        width: 75%;
+        min-width: 75%;
+    }
+
+    .cover-page .np-top-cta {
+        background: #F5F5F5;
+        margin: 0 0 32px;
+        padding: 30px;
+    }
+
+    .cover-page .np-progress-bar-container {
+        margin-top:16px;
+    }
+}
+
+body .np-card-text p {
+    font-size: 17px !important;
+    line-height: 150% !important;
+    color: #001B38 !important;
+    font-family: "Roobert" !important;
+}
+
+body #isPasted {
+    font-size: 17px !important;
+    line-height: 150% !important;
+    color: #001B38 !important;
+    font-family: "Roobert" !important;
+}
+body .np-card-text span {
+    font-size: 17px !important;
+    line-height: 150% !important;
+    color: #001B38 !important;
+    font-family: "Roobert" !important;
+}
+
+.np-powered-by {
+    display: none !important;
+}
+.np-learning-path-outline-content {
+    width: 100%;
+}
+
+@media (max-width:1050px) {
+    .hidden-mobile-custom{
+        display: none;
+    }
+}
--- a/Custom_Templates/customer_templates/Front/training_events.html.liquid
+++ b/Custom_Templates/customer_templates/Front/training_events.html.liquid
@ -0,0 +1,21 @@
+{% include "header" %}
+<main class="np-main np-training-events np-subpage-container np-max-width">
+  <div class="hidden-desktop-custom">
+    {% include "sub_navigation" %}
+  </div>
+  <div class="row">
+    <div class="col-xs-12 col-sm-10">
+      <div class="header-2">
+        {% t .title %}
+      </div>
+      <div class="np-resource-subtitle">
+        Register for live training events to maximize your learning
+      </div>
+    </div>
+    {% comment %} <div class="col-xs-12 col-sm-2">
+      {% include "training_events_filter" %}
+    </div> {% endcomment %}
+  </div>
+  {% include "training_events_index" %}
+</main>
+{% include "footer" %}
--- a/Custom_Templates/customer_templates/Front/unsubscribe.html.liquid
+++ b/Custom_Templates/customer_templates/Front/unsubscribe.html.liquid
@ -0,0 +1,30 @@
+{% include "header" %}
+<main class="np-main np-cta-page np-max-width np-subpage-container">
+  <div class="np-card-container np-card-padding-xlarge">
+    {% if token %}
+      <i class="np-cta-page-icon fal fa-bell-slash"></i>
+      <div class="np-form-subheadline np-margin-top">
+        You have successfully unsubscribed from all communications from Front Academy.
+      </div>
+      <div class="np-form-subheadline np-margin-top">
+        {% t .resubscribe_text %}
+      </div>
+      <form
+        id="unsubscribe_form"
+        action="{% route email_unsubscribe, unsubscribe_token: token %}"
+        method="post"
+        class="np-cta-page-buttons"
+      >
+        {% form_authenticity_token %}
+        <input type="hidden" name="_method" value="delete">
+        <input type="submit" name="commit" value="{% t .resubscribe_button %}" class="np-button np-button-wide">
+      </form>
+    {% else %}
+      <i class="np-cta-page-icon fal fa-bell-on"></i>
+      <div class="np-form-subheadline np-margin-top">
+        {% t .resubscribed_text %}
+      </div>
+    {% endif %}
+  </div>
+</main>
+{% include "footer" %}
--- a/Custom_Templates/customer_templates/Talkspace_1099/_enrolled_courses_index.html.liquid
+++ b/Custom_Templates/customer_templates/Talkspace_1099/_enrolled_courses_index.html.liquid
@ -0,0 +1,40 @@
+{% if courses.enrolled.any? %}
+  {% assign in_progress_courses = courses.enrolled | map: "progress" %}
+  {% assign any_not_in_progress = false %}
+
+  {% for in_progress_course in in_progress_courses %}
+    {% if in_progress_course == 0 %}
+      {% assign any_not_in_progress = true %}
+    {% endif %}
+  {% endfor %}
+
+  <div class="row row-with-thumbnails">
+    {% for course in courses.enrolled %}
+      {% if course.started? == false %}
+
+      {%- comment -%} {% if course.progress == 0 %}
+        {% assign is_course_from_learning_path = false %}
+
+        {% for lp_courses in learning_path_courses %}
+          {% for lp_course in lp_courses %}
+            {% if lp_course.id == course.id %}
+              {% assign is_course_from_learning_path = true %}
+            {% endif %}
+          {% endfor %}
+        {% endfor %}
+
+        {% unless is_course_from_learning_path %}
+          {% assign any_course = true %}
+        {% endunless %}
+	{% endif %}
+      {%- endcomment -%}
+
+	  <div class="{{ class }} enrolled-course-filter-card" data-progress='{{ course.progress }}'>
+            {% include "cards_course" with course %}
+          </div>
+      {% endif %}
+    {% endfor %}
+  </div>
+{% else %}
+  {% include "courses_zero_state", message: "Yikes! You don’t have any Enrolled Courses." %}
+{% endif %}
--- a/Custom_Templates/customer_templates/Talkspace_1099/_my_courses_filter.html.liquid
+++ b/Custom_Templates/customer_templates/Talkspace_1099/_my_courses_filter.html.liquid
@ -0,0 +1,154 @@
+<div class="my-courses-filters" style="display: none;">
+  <div class="progress-filter-dropdown-container">
+    <button class="progress-filter-dropdown np-button">
+      <span style="margin-right: 10px">
+        Not Started
+      </span>
+      <i class="fas fa-angle-down"></i>
+    </button>
+    <div class="progress-filter-dropdown-content">
+      <span class="progress-filter-item" id="not-started" style="display: none">Not Started</span>
+      <span class="progress-filter-item" id="view-all">View All</span>
+      <span class="progress-filter-item" id="in-progress">In Progress</span>
+      <span class="progress-filter-item" id="completed">Completed</span>
+    </div>
+  </div>
+</div>
+
+<script>
+  window.addEventListener('DOMContentLoaded', (event) => {
+    setDefaultFilter()
+
+    document.querySelectorAll('.progress-filter-item').forEach((item) => {
+      item.addEventListener('click', (clickEvent) => {
+        changeFilterButtonName(clickEvent.target);
+        showAllOptions();
+        hideChosenOption(clickEvent.target);
+        filter(clickEvent.target);
+      })
+    })
+
+    document.querySelector('.progress-filter-dropdown').addEventListener('click', showDropdown)
+
+    window.addEventListener("click", hideDropdown);
+  });
+
+  function hideDropdown(event) {
+    if (!event.target.matches('.progress-filter-dropdown')) {
+      var dropdowns = document.getElementsByClassName("progress-filter-dropdown-content");
+      var i;
+      for (i = 0; i < dropdowns.length; i++) {
+        var openDropdown = dropdowns[i];
+        if (openDropdown.classList.contains('progress-filter-dropdown-content-show')) {
+          openDropdown.classList.remove('progress-filter-dropdown-content-show');
+        }
+      }
+    }
+  }
+
+  function showDropdown() {
+    document.querySelector('.progress-filter-dropdown-content').classList.add('progress-filter-dropdown-content-show')
+  }
+
+  function hideChosenOption(chosenOption) {
+    chosenOption.style.display = 'none';
+  }
+
+  function showAllOptions() {
+    document.querySelectorAll('.progress-filter-item').forEach((item) => {
+      item.style.removeProperty('display');
+    });
+  }
+
+  function changeFilterButtonName(newName) {
+    document.querySelector(".progress-filter-dropdown span").innerHTML = newName.innerHTML;
+  }
+
+ function filter(filterOption) {
+    let allFilterCourses = document.querySelectorAll('.enrolled-course-filter-card');
+    let currentFilter = filterOption.id;
+
+    let checker = {
+      '100': 'completed',
+      '0': 'not-started'
+    }
+
+    if(filterOption.id == 'view-all'){
+      allFilterCourses.forEach((course) => course.style.display = 'flex')
+    } else {
+      allFilterCourses.forEach((courseCard) => {
+        if(checker[courseCard.getAttribute('data-progress')] && checker[courseCard.getAttribute('data-progress')] == currentFilter){
+          courseCard.style.display = 'flex'
+        } else if(!checker[courseCard.getAttribute('data-progress')] && currentFilter == 'in-progress'){
+          courseCard.style.display = 'flex'
+        } else {
+          courseCard.style.display = 'none'
+        }
+      })
+    }
+  }
+
+  function setDefaultFilter() {
+    let allFilterCourses = document.querySelectorAll('.enrolled-course-filter-card');
+
+    allFilterCourses.forEach((course) => course.style.display = 'flex')
+  }
+</script>
+
+<style>
+  .my-courses-filters {
+    align-items: center;
+    background: #f5f2ff;
+    color: #737373;
+    display: flex;
+    flex-direction: column;
+    font-weight: 600;
+    justify-content: center;
+    letter-spacing: .56px;
+    line-height: 1.71;
+    padding: 10px 4%;
+    position: relative;
+    transition: .2s;
+    width: 100%;
+    z-index: 32;
+  }
+
+  .progress-filter-dropdown-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .progress-filter-dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+
+  .progress-filter-item {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+  }
+
+  .progress-filter-dropdown * {
+    pointer-events: none;
+  }
+
+  .progress-filter-item:hover {background-color: #f1f1f1}
+
+  .progress-filter-dropdown-content-show {
+    display: block;
+  }
+
+  @media (min-width: 768px) {
+    .my-courses-filters {
+      flex-direction: row;
+      /* justify-content: right; */
+    }
+  }
+</style>
--- a/Custom_Templates/customer_templates/Talkspace_1099/dashboard.html.liquid
+++ b/Custom_Templates/customer_templates/Talkspace_1099/dashboard.html.liquid
@ -12,16 +12,17 @@
          {% assign persongroup = current_person.groups.last.name | split: "-" %}
        {% endif   %}
        <p class="np-resource-title" style="font-size: 1.5rem; font-weight: 600; margin-bottom: -1rem;">Hi {{current_person.first_name}}! &#128075; {% if current_person.groups.size > 0 %} {{ persongroup | slice: 1 }} {% endif %}</p>
-        <div> <p style="font-weight: 500;">Please complete all your 2023 Compliance Courses.</p></div>
+        <div> <p style="font-weight: 500;">Please complete all your 2023 Compliance Courses.</p>
+	<p style="font-weight: 300;">Click the drop down box below to view courses that are in progress or
+	  complete.</p></div>
      </div>
    </div>
  </div>
-  <div class="flex-row-button-container">

-  </div>
+  {% include "my_courses_filter" %}

  <div class="row np-flex-center">
-    <div class="col-xs-12">
+    <div class="col-xs-12 dashboard-courses">
      {% comment %}{% if features.learning_paths? %}
        <div class="np-dashboard-resources-title">
          {% t shared.learning_paths %}
@ -31,7 +32,8 @@
      <div class="np-dashboard-resources-title">
        {% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
      </div>{% endcomment %}
-      {% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
+      {%- comment -%} {% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %} {%- endcomment -%}
+      {% include "enrolled_courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
    </div>
    {% comment %}{% if features.training_events? %}
      <div class="np-grid-spacing col-xs-12 col-sm-4">
@ -44,3 +46,9 @@
  </div>
 </main>
 {% include "footer" %}
+
+<script>
+  window.addEventListener('DOMContentLoaded', (event) => {
+    document.querySelector('.my-courses-filters').style.removeProperty('display');
+  })
+</script>
--- a/Scripts/Jupyter/app_usage.ipynb
+++ b/Scripts/Jupyter/app_usage.ipynb
@ -0,0 +1,409 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 59,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import pandas as pd \n",
+    "import numpy as np \n",
+    "import seaborn as sns \n",
+    "import matplotlib.pylab as plt \n",
+    "import sketch\n",
+    "plt.style.use('ggplot')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 60,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pages = pd.read_csv(\"/Users/normrasmussen/Downloads/app_usage.csv\", index_col=0, header=0)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 61,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<div>\n",
+       "<style scoped>\n",
+       "    .dataframe tbody tr th:only-of-type {\n",
+       "        vertical-align: middle;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe tbody tr th {\n",
+       "        vertical-align: top;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe thead th {\n",
+       "        text-align: right;\n",
+       "    }\n",
+       "</style>\n",
+       "<table border=\"1\" class=\"dataframe\">\n",
+       "  <thead>\n",
+       "    <tr style=\"text-align: right;\">\n",
+       "      <th></th>\n",
+       "      <th>Path</th>\n",
+       "      <th>Mar 13 - Apr 11</th>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>School Name</th>\n",
+       "      <th></th>\n",
+       "      <th></th>\n",
+       "    </tr>\n",
+       "  </thead>\n",
+       "  <tbody>\n",
+       "    <tr>\n",
+       "      <th>Vivvix University for Ad Intel</th>\n",
+       "      <td>/courses</td>\n",
+       "      <td>25</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>Vivvix University for Ad Intel</th>\n",
+       "      <td>/previews</td>\n",
+       "      <td>16</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>Vivvix University for Ad Intel</th>\n",
+       "      <td>/account_links</td>\n",
+       "      <td>11</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>Vivvix University for Ad Intel</th>\n",
+       "      <td>/analytics</td>\n",
+       "      <td>8</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>Vivvix University for Ad Intel</th>\n",
+       "      <td>/settings/general/edit</td>\n",
+       "      <td>7</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>Vivvix University for Ad Intel</th>\n",
+       "      <td>/apps/integrations</td>\n",
+       "      <td>4</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>Vivvix University for Ad Intel</th>\n",
+       "      <td>/accounts/general/edit</td>\n",
+       "      <td>4</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>Vivvix University for Ad Intel</th>\n",
+       "      <td>/people</td>\n",
+       "      <td>3</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>Vivvix University for Ad Intel</th>\n",
+       "      <td>/settings/authentication</td>\n",
+       "      <td>3</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>Vivvix University for Ad Intel</th>\n",
+       "      <td>/styling/general/edit</td>\n",
+       "      <td>2</td>\n",
+       "    </tr>\n",
+       "  </tbody>\n",
+       "</table>\n",
+       "</div>"
+      ],
+      "text/plain": [
+       "                                                     Path  Mar 13 - Apr 11\n",
+       "School Name                                                               \n",
+       " Vivvix University for Ad Intel                  /courses               25\n",
+       " Vivvix University for Ad Intel                 /previews               16\n",
+       " Vivvix University for Ad Intel            /account_links               11\n",
+       " Vivvix University for Ad Intel                /analytics                8\n",
+       " Vivvix University for Ad Intel    /settings/general/edit                7\n",
+       " Vivvix University for Ad Intel        /apps/integrations                4\n",
+       " Vivvix University for Ad Intel    /accounts/general/edit                4\n",
+       " Vivvix University for Ad Intel                   /people                3\n",
+       " Vivvix University for Ad Intel  /settings/authentication                3\n",
+       " Vivvix University for Ad Intel     /styling/general/edit                2"
+      ]
+     },
+     "execution_count": 61,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "pages.head(10)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 62,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<div>\n",
+       "<style scoped>\n",
+       "    .dataframe tbody tr th:only-of-type {\n",
+       "        vertical-align: middle;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe tbody tr th {\n",
+       "        vertical-align: top;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe thead th {\n",
+       "        text-align: right;\n",
+       "    }\n",
+       "</style>\n",
+       "<table border=\"1\" class=\"dataframe\">\n",
+       "  <thead>\n",
+       "    <tr style=\"text-align: right;\">\n",
+       "      <th></th>\n",
+       "      <th>Total Views</th>\n",
+       "    </tr>\n",
+       "  </thead>\n",
+       "  <tbody>\n",
+       "  </tbody>\n",
+       "</table>\n",
+       "</div>"
+      ],
+      "text/plain": [
+       "Empty DataFrame\n",
+       "Columns: [Total Views]\n",
+       "Index: []"
+      ]
+     },
+     "execution_count": 62,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "pages_sum = pd.DataFrame(columns=['Total Views'])\n",
+    "pages_sum.head()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 63,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<div>\n",
+       "<style scoped>\n",
+       "    .dataframe tbody tr th:only-of-type {\n",
+       "        vertical-align: middle;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe tbody tr th {\n",
+       "        vertical-align: top;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe thead th {\n",
+       "        text-align: right;\n",
+       "    }\n",
+       "</style>\n",
+       "<table border=\"1\" class=\"dataframe\">\n",
+       "  <thead>\n",
+       "    <tr style=\"text-align: right;\">\n",
+       "      <th></th>\n",
+       "      <th>Total Views</th>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>School Name</th>\n",
+       "      <th></th>\n",
+       "    </tr>\n",
+       "  </thead>\n",
+       "  <tbody>\n",
+       "    <tr>\n",
+       "      <th>Vivvix University for Ad Intel</th>\n",
+       "      <td>110</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>'@properties Academy</th>\n",
+       "      <td>322</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>4 Pillars Academy</th>\n",
+       "      <td>112</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>AIIM+</th>\n",
+       "      <td>528</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>ASAPP University</th>\n",
+       "      <td>153</td>\n",
+       "    </tr>\n",
+       "  </tbody>\n",
+       "</table>\n",
+       "</div>"
+      ],
+      "text/plain": [
+       "                                 Total Views\n",
+       "School Name                                 \n",
+       " Vivvix University for Ad Intel          110\n",
+       "'@properties Academy                     322\n",
+       "4 Pillars Academy                        112\n",
+       "AIIM+                                    528\n",
+       "ASAPP University                         153"
+      ]
+     },
+     "execution_count": 63,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "pages_sum['Total Views'] = pages.groupby(by='School Name')['Mar 13 - Apr 11'].sum()\n",
+    "pages_sum.head(5)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 66,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<div>\n",
+       "<style scoped>\n",
+       "    .dataframe tbody tr th:only-of-type {\n",
+       "        vertical-align: middle;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe tbody tr th {\n",
+       "        vertical-align: top;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe thead th {\n",
+       "        text-align: right;\n",
+       "    }\n",
+       "</style>\n",
+       "<table border=\"1\" class=\"dataframe\">\n",
+       "  <thead>\n",
+       "    <tr style=\"text-align: right;\">\n",
+       "      <th></th>\n",
+       "      <th>Total Views</th>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>School Name</th>\n",
+       "      <th></th>\n",
+       "    </tr>\n",
+       "  </thead>\n",
+       "  <tbody>\n",
+       "    <tr>\n",
+       "      <th>Vivvix  for Ad Intel</th>\n",
+       "      <td>110</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>'@properties</th>\n",
+       "      <td>322</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>4 Pillars</th>\n",
+       "      <td>112</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>AIIM+</th>\n",
+       "      <td>528</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>ASAPP</th>\n",
+       "      <td>153</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>| AgencyBloc</th>\n",
+       "      <td>3373</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>Académie Évolupharma</th>\n",
+       "      <td>253</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>Access</th>\n",
+       "      <td>11</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>ActiveLearner</th>\n",
+       "      <td>1907</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>Ad Intel</th>\n",
+       "      <td>2</td>\n",
+       "    </tr>\n",
+       "  </tbody>\n",
+       "</table>\n",
+       "</div>"
+      ],
+      "text/plain": [
+       "                       Total Views\n",
+       "School Name                       \n",
+       " Vivvix  for Ad Intel          110\n",
+       "'@properties                   322\n",
+       "4 Pillars                      112\n",
+       "AIIM+                          528\n",
+       "ASAPP                          153\n",
+       " | AgencyBloc                 3373\n",
+       "Académie Évolupharma           253\n",
+       "Access                          11\n",
+       "ActiveLearner                 1907\n",
+       "Ad Intel                         2"
+      ]
+     },
+     "execution_count": 66,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "to_remove = ['Academy', 'academy', 'University', 'university', 'school', 'School', 'Sandbox', 'Knowledge Base']\n",
+    "for item in pages_sum.itertuples(index=True):\n",
+    "    for word in to_remove:\n",
+    "        if word in item[0]:\n",
+    "            less = item[0].replace(word, '')\n",
+    "            pages_sum.rename(index={item[0]:less}, inplace=True)\n",
+    "\n",
+    "pages_sum.head(10)\n",
+    "    # if any(element in item[0] for element in to_remove):\n",
+    "    #   print(item[0])"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "jupyter",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.1"
+  },
+  "orig_nbformat": 4
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
--- a/Scripts/Jupyter/cust_arr_usage.ipynb
+++ b/Scripts/Jupyter/cust_arr_usage.ipynb
--- a/Scripts/Jupyter/sketch_tests.ipynb
+++ b/Scripts/Jupyter/sketch_tests.ipynb
@ -54,17 +54,15 @@
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
-       "      <th>Unnamed: 0</th>\n",
-       "      <th>Usage Month</th>\n",
-       "      <th>Unnamed: 2</th>\n",
-       "      <th>2020-05</th>\n",
-       "      <th>2020-06</th>\n",
-       "      <th>2020-07</th>\n",
-       "      <th>2020-08</th>\n",
-       "      <th>2020-09</th>\n",
-       "      <th>2020-10</th>\n",
-       "      <th>2020-11</th>\n",
-       "      <th>...</th>\n",
+       "      <th>OrgID</th>\n",
+       "      <th>Organization</th>\n",
+       "      <th>Churn Date</th>\n",
+       "      <th>2022-01</th>\n",
+       "      <th>2022-02</th>\n",
+       "      <th>2022-03</th>\n",
+       "      <th>2022-04</th>\n",
+       "      <th>2022-05</th>\n",
+       "      <th>2022-06</th>\n",
       "      <th>2022-07</th>\n",
       "      <th>2022-08</th>\n",
       "      <th>2022-09</th>\n",
@ -80,118 +78,89 @@
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
-       "      <td>Billing ID</td>\n",
-       "      <td>Organization</td>\n",
-       "      <td>Churn Date</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>...</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "      <td>Active Learner Count</td>\n",
-       "    </tr>\n",
-       "    <tr>\n",
-       "      <th>1</th>\n",
       "      <td>30867753</td>\n",
       "      <td>Aquent</td>\n",
       "      <td>2023-04</td>\n",
-       "      <td>165</td>\n",
-       "      <td>111</td>\n",
-       "      <td>19</td>\n",
-       "      <td>14</td>\n",
-       "      <td>13</td>\n",
-       "      <td>14</td>\n",
-       "      <td>20</td>\n",
-       "      <td>...</td>\n",
+       "      <td>58</td>\n",
+       "      <td>38</td>\n",
+       "      <td>50</td>\n",
+       "      <td>50</td>\n",
+       "      <td>39</td>\n",
+       "      <td>36</td>\n",
       "      <td>46</td>\n",
       "      <td>46</td>\n",
-       "      <td>43</td>\n",
-       "      <td>27</td>\n",
-       "      <td>24</td>\n",
+       "      <td>43.0</td>\n",
+       "      <td>27.0</td>\n",
+       "      <td>24.0</td>\n",
       "      <td>26</td>\n",
       "      <td>22</td>\n",
-       "      <td>8</td>\n",
-       "      <td>10</td>\n",
-       "      <td>2</td>\n",
+       "      <td>8.0</td>\n",
+       "      <td>10.0</td>\n",
+       "      <td>2.0</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>1</th>\n",
+       "      <td>33375202</td>\n",
+       "      <td>BioLife Solutions, Inc.</td>\n",
+       "      <td>2023-04</td>\n",
+       "      <td>11</td>\n",
+       "      <td>7</td>\n",
+       "      <td>4</td>\n",
+       "      <td>11</td>\n",
+       "      <td>4</td>\n",
+       "      <td>NaN</td>\n",
+       "      <td>NaN</td>\n",
+       "      <td>NaN</td>\n",
+       "      <td>NaN</td>\n",
+       "      <td>NaN</td>\n",
+       "      <td>NaN</td>\n",
+       "      <td>NaN</td>\n",
+       "      <td>NaN</td>\n",
+       "      <td>NaN</td>\n",
+       "      <td>NaN</td>\n",
+       "      <td>NaN</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
-       "      <td>47167388</td>\n",
-       "      <td>Artsy</td>\n",
-       "      <td>2023-01</td>\n",
-       "      <td>NaN</td>\n",
-       "      <td>NaN</td>\n",
-       "      <td>NaN</td>\n",
-       "      <td>NaN</td>\n",
-       "      <td>NaN</td>\n",
-       "      <td>NaN</td>\n",
-       "      <td>NaN</td>\n",
-       "      <td>...</td>\n",
-       "      <td>4</td>\n",
-       "      <td>3</td>\n",
-       "      <td>4</td>\n",
-       "      <td>NaN</td>\n",
-       "      <td>10</td>\n",
-       "      <td>9</td>\n",
-       "      <td>NaN</td>\n",
+       "      <td>30867495</td>\n",
+       "      <td>ZyXel Communications Inc</td>\n",
+       "      <td>2023-04</td>\n",
       "      <td>1</td>\n",
+       "      <td>1</td>\n",
+       "      <td>2</td>\n",
+       "      <td>1</td>\n",
+       "      <td>2</td>\n",
+       "      <td>4</td>\n",
+       "      <td>2</td>\n",
+       "      <td>2</td>\n",
+       "      <td>1.0</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
+       "      <td>NaN</td>\n",
+       "      <td>NaN</td>\n",
+       "      <td>1.0</td>\n",
+       "      <td>1.0</td>\n",
+       "      <td>NaN</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
-       "<p>3 rows × 39 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
-       "   Unnamed: 0   Usage Month  Unnamed: 2               2020-05   \n",
-       "0  Billing ID  Organization  Churn Date  Active Learner Count  \\\n",
-       "1    30867753        Aquent     2023-04                   165   \n",
-       "2    47167388         Artsy     2023-01                   NaN   \n",
+       "      OrgID              Organization Churn Date 2022-01 2022-02 2022-03   \n",
+       "0  30867753                    Aquent    2023-04      58      38      50  \\\n",
+       "1  33375202   BioLife Solutions, Inc.    2023-04      11       7       4   \n",
+       "2  30867495  ZyXel Communications Inc    2023-04       1       1       2   \n",
       "\n",
-       "                2020-06               2020-07               2020-08   \n",
-       "0  Active Learner Count  Active Learner Count  Active Learner Count  \\\n",
-       "1                   111                    19                    14   \n",
-       "2                   NaN                   NaN                   NaN   \n",
+       "  2022-04 2022-05 2022-06 2022-07 2022-08  2022-09  2022-10  2022-11 2022-12   \n",
+       "0      50      39      36      46      46     43.0     27.0     24.0      26  \\\n",
+       "1      11       4     NaN     NaN     NaN      NaN      NaN      NaN     NaN   \n",
+       "2       1       2       4       2       2      1.0      NaN      NaN     NaN   \n",
       "\n",
-       "                2020-09               2020-10               2020-11  ...   \n",
-       "0  Active Learner Count  Active Learner Count  Active Learner Count  ...  \\\n",
-       "1                    13                    14                    20  ...   \n",
-       "2                   NaN                   NaN                   NaN  ...   \n",
-       "\n",
-       "                2022-07               2022-08               2022-09   \n",
-       "0  Active Learner Count  Active Learner Count  Active Learner Count  \\\n",
-       "1                    46                    46                    43   \n",
-       "2                     4                     3                     4   \n",
-       "\n",
-       "                2022-10               2022-11               2022-12   \n",
-       "0  Active Learner Count  Active Learner Count  Active Learner Count  \\\n",
-       "1                    27                    24                    26   \n",
-       "2                   NaN                    10                     9   \n",
-       "\n",
-       "                2023-01               2023-02               2023-03   \n",
-       "0  Active Learner Count  Active Learner Count  Active Learner Count  \\\n",
-       "1                    22                     8                    10   \n",
-       "2                   NaN                     1                   NaN   \n",
-       "\n",
-       "                2023-04  \n",
-       "0  Active Learner Count  \n",
-       "1                     2  \n",
-       "2                   NaN  \n",
-       "\n",
-       "[3 rows x 39 columns]"
+       "  2023-01  2023-02  2023-03  2023-04  \n",
+       "0      22      8.0     10.0      2.0  \n",
+       "1     NaN      NaN      NaN      NaN  \n",
+       "2     NaN      1.0      1.0      NaN  "
      ]
     },
     "execution_count": 3,
@ -205,7 +174,7 @@
  },
  {
   "cell_type": "code",
-   "execution_count": 6,
+   "execution_count": 4,
   "id": "7a091590-9fc4-43fe-9188-53798e7e2e51",
   "metadata": {
    "tags": []
@ -227,85 +196,6 @@
    "cust_data = pd.read_csv(\"/Users/normrasmussen/Downloads/churned_analysis.csv\")"
   ]
  },
-  {
-   "cell_type": "code",
-   "execution_count": 11,
-   "id": "65710689-a42a-41cf-983c-c1332af26b43",
-   "metadata": {
-    "tags": []
-   },
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<div style=\"display:flex;flex-direction:row;justify-content:space-between;\">\n",
-       "                <pre style=\"width: 100%; white-space: pre-wrap;\" id=\"5f334dd4-40fd-4eee-8ca6-0941cadf2a63\">\n",
-       "# Freeze the top two rows\n",
-       "cust_data.iloc[:2, :].style.set_properties(**{'background-color': 'lightblue', 'color': 'black', 'border-color': 'white'})\n",
-       "</pre>\n",
-       "                <button style=\"height: fit-content;\" onclick=\"navigator.clipboard.writeText(JSON.parse(atob(`IlxuIyBGcmVlemUgdGhlIHRvcCB0d28gcm93c1xuY3VzdF9kYXRhLmlsb2NbOjIsIDpdLnN0eWxlLnNldF9wcm9wZXJ0aWVzKCoqeydiYWNrZ3JvdW5kLWNvbG9yJzogJ2xpZ2h0Ymx1ZScsICdjb2xvcic6ICdibGFjaycsICdib3JkZXItY29sb3InOiAnd2hpdGUnfSlcbiI=`)))\">Copy</button>\n",
-       "                </div>"
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
-   "source": [
-    "cust_data.sketch.howto(\"Freeze the top two rows\")"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 12,
-   "id": "39c664df-fb79-4d14-8212-8b67e2e4c0dd",
-   "metadata": {
-    "tags": []
-   },
-   "outputs": [
-    {
-     "data": {
-      "text/html": [
-       "<div style=\"display:flex;flex-direction:row;justify-content:space-between;\">\n",
-       "                <pre style=\"width: 100%; white-space: pre-wrap;\" id=\"b4fe0d05-513c-4de9-92b0-f81f3638dfe3\">\n",
-       "# Get the list of columns\n",
-       "cols = list(cust_data.columns)\n",
-       "\n",
-       "# Get the index of the Churn Date column\n",
-       "churn_date_index = cols.index('Churn Date')\n",
-       "\n",
-       "# Get the value of the Churn Date column for each row\n",
-       "churn_dates = cust_data['Churn Date'].tolist()\n",
-       "\n",
-       "# Iterate through each row in the dataframe\n",
-       "for i, row in cust_data.iterrows():\n",
-       "    # Get the value of the Churn Date column for this row\n",
-       "    churn_date = churn_dates[i]\n",
-       "\n",
-       "    # Get the index of the column with the same month/year as the Churn Date column\n",
-       "    col_index = cols.index(churn_date)\n",
-       "\n",
-       "    # Reorganize the columns so that the last column is the one with the same month/year as the Churn Date column\n",
-       "    cust_data = cust_data[cols[:churn_date_index] + cols[col_index:] + cols[churn_date_index:col_index]]\n",
-       "</pre>\n",
-       "                <button style=\"height: fit-content;\" onclick=\"navigator.clipboard.writeText(JSON.parse(atob(`IlxuIyBHZXQgdGhlIGxpc3Qgb2YgY29sdW1uc1xuY29scyA9IGxpc3QoY3VzdF9kYXRhLmNvbHVtbnMpXG5cbiMgR2V0IHRoZSBpbmRleCBvZiB0aGUgQ2h1cm4gRGF0ZSBjb2x1bW5cbmNodXJuX2RhdGVfaW5kZXggPSBjb2xzLmluZGV4KCdDaHVybiBEYXRlJylcblxuIyBHZXQgdGhlIHZhbHVlIG9mIHRoZSBDaHVybiBEYXRlIGNvbHVtbiBmb3IgZWFjaCByb3dcbmNodXJuX2RhdGVzID0gY3VzdF9kYXRhWydDaHVybiBEYXRlJ10udG9saXN0KClcblxuIyBJdGVyYXRlIHRocm91Z2ggZWFjaCByb3cgaW4gdGhlIGRhdGFmcmFtZVxuZm9yIGksIHJvdyBpbiBjdXN0X2RhdGEuaXRlcnJvd3MoKTpcbiAgICAjIEdldCB0aGUgdmFsdWUgb2YgdGhlIENodXJuIERhdGUgY29sdW1uIGZvciB0aGlzIHJvd1xuICAgIGNodXJuX2RhdGUgPSBjaHVybl9kYXRlc1tpXVxuXG4gICAgIyBHZXQgdGhlIGluZGV4IG9mIHRoZSBjb2x1bW4gd2l0aCB0aGUgc2FtZSBtb250aC95ZWFyIGFzIHRoZSBDaHVybiBEYXRlIGNvbHVtblxuICAgIGNvbF9pbmRleCA9IGNvbHMuaW5kZXgoY2h1cm5fZGF0ZSlcblxuICAgICMgUmVvcmdhbml6ZSB0aGUgY29sdW1ucyBzbyB0aGF0IHRoZSBsYXN0IGNvbHVtbiBpcyB0aGUgb25lIHdpdGggdGhlIHNhbWUgbW9udGgveWVhciBhcyB0aGUgQ2h1cm4gRGF0ZSBjb2x1bW5cbiAgICBjdXN0X2RhdGEgPSBjdXN0X2RhdGFbY29sc1s6Y2h1cm5fZGF0ZV9pbmRleF0gKyBjb2xzW2NvbF9pbmRleDpdICsgY29sc1tjaHVybl9kYXRlX2luZGV4OmNvbF9pbmRleF1dXG4i`)))\">Copy</button>\n",
-       "                </div>"
-      ],
-      "text/plain": [
-       "<IPython.core.display.HTML object>"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
-   "source": [
-    "cust_data.sketch.howto(\"Reorganize each organization so that the last column month/year matches the value in the Churn Date column\")"
-   ]
-  },
  {
   "cell_type": "code",
   "execution_count": 13,