diff --git a/src/app/shared/components/template/components/task-card/task-card.component.html b/src/app/shared/components/template/components/task-card/task-card.component.html
index 6c2c234db6..1cbcd6b801 100644
--- a/src/app/shared/components/template/components/task-card/task-card.component.html
+++ b/src/app/shared/components/template/components/task-card/task-card.component.html
@@ -3,29 +3,26 @@
     [class]="'card-wrapper landscape ' + style"
     [attr.data-variant]="variant"
     (click)="triggerActions('click')"
+    [attr.data-status]="progressStatus"
   >
-    <ng-container *ngIf="highlighted; else showProgress">
+    @if (highlighted) {
       <span class="badge highlighted-badge">
         {{ highlightedText }}
       </span>
-    </ng-container>
-    <ng-template #showProgress>
-      <span class="badge progress-badge">
-        <span class="circle" [class]="progressStatus"></span>
-        <img
-          *ngIf="progressStatus === 'inProgress'"
-          class="icon"
-          src="{{ inProgressIcon | plhAsset }}"
-        />
-        <img
-          *ngIf="progressStatus === 'completed'"
-          class="icon completed"
-          src="{{ completedIcon | plhAsset }}"
-        />
-      </span>
-    </ng-template>
+    } @else {
+      @if (inProgressIcon || completedIcon) {
+        <span class="badge progress-badge">
+          <span class="circle" [class]="progressStatus"></span>
+          @if (progressStatus === "inProgress") {
+            <img class="icon" src="{{ inProgressIcon | plhAsset }}" />
+          } @else if (progressStatus === "completed") {
+            <img class="icon completed" src="{{ completedIcon | plhAsset }}" />
+          }
+        </span>
+      }
+    }
     <div class="content-wrapper">
-      <ng-container *ngIf="!title">
+      @if (!title) {
         <plh-template-component
           *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
           [row]="childRow"
@@ -33,9 +30,8 @@
           [attr.data-rowname]="_row.name"
         >
         </plh-template-component>
-      </ng-container>
-      <ng-container *ngIf="title">
-        <ng-container *ngIf="isButton">
+      } @else {
+        @if (isButton) {
           <div class="button-content">
             <plh-template-component
               *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
@@ -45,70 +41,71 @@
             >
             </plh-template-component>
           </div>
-        </ng-container>
+        }
         <div class="text-wrapper">
-          <div *ngIf="title" class="title-wrapper">
+          <div class="title-wrapper">
             <h1>
               {{ title }}
             </h1>
           </div>
-          <div *ngIf="subtitle" class="subtitle-wrapper">
-            <p>
-              {{ subtitle }}
-            </p>
-          </div>
+          @if (subtitle) {
+            <div class="subtitle-wrapper">
+              <p>
+                {{ subtitle }}
+              </p>
+            </div>
+          }
           <!-- If a taskGroupId is provided, show the progress bar for the relevant task group -->
-          <div *ngIf="taskGroupId && !taskId">
-            <plh-task-progress-bar
-              [dataListName]="taskGroupDataList"
-              [completedField]="completedField"
-              [completedColumnName]="completedColumnName"
-              [highlighted]="highlighted"
-              [parameterList]="_row.parameter_list"
-              [progressUnitsName]="progressUnitsName"
-              [showText]="showProgressText"
-              [(progressStatus)]="progressStatus"
-              (newlyCompleted)="handleNewlyCompleted($event)"
-            ></plh-task-progress-bar>
-          </div>
-        </div>
-        <div *ngIf="image" class="image-wrapper">
-          <img [src]="image | plhAsset" />
+          @if (taskGroupId && !taskId) {
+            <div>
+              <plh-task-progress-bar
+                [dataListName]="taskGroupDataList"
+                [completedField]="completedField"
+                [highlighted]="highlighted"
+                [progressUnitsName]="progressUnitsName"
+                [showText]="showProgressText"
+                [(progressStatus)]="progressStatus"
+                (newlyCompleted)="handleNewlyCompleted($event)"
+              ></plh-task-progress-bar>
+            </div>
+          }
         </div>
-      </ng-container>
+        @if (image) {
+          <div class="image-wrapper">
+            <img [src]="image | plhAsset" />
+          </div>
+        }
+      }
     </div>
   </div>
 } @else {
   <div class="circle-card-wrapper" (click)="triggerActions('click')">
     <div class="image-and-badge-wrapper">
-      <div *ngIf="taskGroupId && !taskId">
-        <plh-task-progress-bar
-          [dataListName]="taskGroupDataList"
-          [completedField]="completedField"
-          [highlighted]="highlighted"
-          [progressUnitsName]="progressUnitsName"
-          [showText]="false"
-          [(progressStatus)]="progressStatus"
-          (newlyCompleted)="handleNewlyCompleted($event)"
-        ></plh-task-progress-bar>
-      </div>
+      @if (taskGroupId && !taskId) {
+        <div>
+          <plh-task-progress-bar
+            [dataListName]="taskGroupDataList"
+            [completedField]="completedField"
+            [highlighted]="highlighted"
+            [progressUnitsName]="progressUnitsName"
+            [showText]="false"
+            [(progressStatus)]="progressStatus"
+            (newlyCompleted)="handleNewlyCompleted($event)"
+          ></plh-task-progress-bar>
+        </div>
+      }
       @if (highlighted) {
         <span class="badge highlighted-badge">
           {{ highlightedText }}
         </span>
-      } @else {
+      } @else if (inProgressIcon || completedIcon) {
         <span class="badge progress-badge">
           <span class="circle" [class]="progressStatus"></span>
-          <img
-            *ngIf="progressStatus === 'inProgress'"
-            class="icon"
-            src="{{ inProgressIcon | plhAsset }}"
-          />
-          <img
-            *ngIf="progressStatus === 'completed'"
-            class="icon completed"
-            src="{{ completedIcon | plhAsset }}"
-          />
+          @if (progressStatus === "inProgress") {
+            <img class="icon" src="{{ inProgressIcon | plhAsset }}" />
+          } @else if (progressStatus === "completed") {
+            <img class="icon completed" src="{{ completedIcon | plhAsset }}" />
+          }
         </span>
       }
       <div class="circle-wrapper">
diff --git a/src/app/shared/components/template/components/task-card/task-card.component.ts b/src/app/shared/components/template/components/task-card/task-card.component.ts
index dbb87a4d91..d49740fb12 100644
--- a/src/app/shared/components/template/components/task-card/task-card.component.ts
+++ b/src/app/shared/components/template/components/task-card/task-card.component.ts
@@ -54,7 +54,14 @@ interface ITaskCardParams {
    * A list of named style variants of the component, separated by spaces or commas.
    * Default "landscape"
    * */
-  variant: "background-secondary" | "background-primary" | "button" | "landscape" | "portrait" | "";
+  variant:
+    | "background-secondary"
+    | "background-primary"
+    | "button"
+    | "landscape"
+    | "portrait"
+    | ""
+    | "block-button";
   /**
    * The icon to display in the "badge" added to the task card
    * when its associated task/task group has been completed
diff --git a/src/theme/themes/_index.scss b/src/theme/themes/_index.scss
index 0767ec8f11..6516eddf7c 100644
--- a/src/theme/themes/_index.scss
+++ b/src/theme/themes/_index.scss
@@ -1,6 +1,6 @@
 @forward "./default.scss";
 @forward "./professional.scss";
 @forward "./pfr.scss";
-@forward "./plh_facilitator_mx.scss";
+@forward "./plh_facilitator_mx/index";
 @forward "./early_family_math.scss";
 @forward "./plh_kids_kw/index";
diff --git a/src/theme/themes/plh_facilitator_mx.scss b/src/theme/themes/plh_facilitator_mx.scss
deleted file mode 100644
index 3d974150b4..0000000000
--- a/src/theme/themes/plh_facilitator_mx.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@use "./utils";
-@use "sass:color";
-
-@mixin theme-plh_facilitator_mx {
-  [data-theme="plh_facilitator_mx"] {
-    /** Authoring variables **/
-    $color-primary: #0e3a5a;
-    $color-secondary: #ff5e00;
-    $page-background: white;
-
-    /** Global and component variables **/
-    $variable-overrides: (
-      // BORDERS
-      // border-color-default: var(--ion-color-primary),
-      border-width-default: 2px,
-      // border-standard: var(--border-width-default) solid var(--border-color-default),
-      // border-thin-standard: 1px solid var(--border-color-default),
-      button-background-primary: var(--ion-color-primary-500),
-      button-background-secondary: var(--ion-color-secondary),
-      button-background-option: var(--ion-color-primary-800),
-      round-button-background-secondary-light: #e4007c,
-      // round-button-background-secondary-mid: #fa9529,
-      // round-button-background-secondary-dark: #F87023,
-      // tile-button-background-default: #a3d9fa,
-      tile-button-background-primary: var(--ion-color-primary-500),
-      tile-button-background-primary-light: var(--ion-color-primary-300),
-      tile-button-background-secondary: var(--ion-color-secondary),
-      tile-button-background-secondary-light: var(--ion-color-yellow),
-      // audio-control-background: #1980d2,
-      points-item-background: var(--ion-background-color),
-      points-item-background-complete: var(--ion-color-primary-200),
-      points-item-border: rgba(black, 0.07),
-      display-group-background-banner-primary: var(--ion-color-primary-200),
-      display-group-background-banner-secondary: var(--ion-color-secondary-300),
-      // display-group-background-tool-1: #fa8e29,
-      // display-group-background-tool-2: #ff7b00,
-      // display-group-background-tool-3: #108ab2,
-      // display-group-background-tool-4: #096a8b,
-      // display-group-background-tool-5: $color-primary,
-      display-group-background-home-light: var(--ion-color-primary-300),
-      display-group-background-home-mid: var(--ion-color-primary-600),
-      display-group-background-home-dark: var(--ion-color-primary-800),
-      // timer-button-background: #1985d2,
-      // combo-box-placeholder-text: rgba(13, 64, 96, 0.5),
-      // combo-box-background-no-value: transparent,
-      combo-box-background-with-value: var(--ion-color-primary-300),
-      // slider-ui-color: #096e90,
-      accordion-background-highlight: var(--ion-color-primary-300),
-      tour-next-button-background: var(--ion-color-secondary),
-      radio-group-background-selected: var(--ion-color-primary-300),
-      // radio-button-font-size: 1.25rem,
-      // radio-button-font-color: var(--ion-color-primary),
-      ion-item-background: var(--ion-color-gray-light),
-      task-progress-bar-color: var(--ion-color-green),
-      // checkbox-background-color: white,
-      // progress-path-line-background, var(--ion-color-gray-100),
-    );
-    @include utils.generateTheme($color-primary, $color-secondary, $page-background);
-    @each $name, $value in $variable-overrides {
-      --#{$name}: #{$value};
-    }
-  }
-}
diff --git a/src/theme/themes/plh_facilitator_mx/_index.scss b/src/theme/themes/plh_facilitator_mx/_index.scss
new file mode 100644
index 0000000000..ff656665b7
--- /dev/null
+++ b/src/theme/themes/plh_facilitator_mx/_index.scss
@@ -0,0 +1,110 @@
+@use "../utils";
+@use "sass:color";
+@use "./overrides";
+
+@mixin theme-plh_facilitator_mx {
+  [data-theme="plh_facilitator_mx"] {
+    /** Authoring variables **/
+    $color-primary: hsl(183, 40%, 43%); // #419499;
+    $color-secondary: hsl(168, 77%, 43%); //#19C2A0;
+    $page-background: white;
+
+    /** Global and component variables **/
+    $variable-overrides: (
+      font-weight-standard: 500,
+      font-weight-medium: 600,
+      font-weight-bold: 700,
+      font-weight-extra-bold: 800,
+
+      font-size-text-tiny: 14px,
+      font-size-text-small: 16px,
+      font-size-text-mid-size: 18px,
+      font-size-text-medium: 20px,
+      font-size-text-large: 24px,
+      font-size-text-title: 28px,
+      font-size-text-extra-large: 32px,
+
+      line-height-text-tiny: 18px,
+      line-height-text-small: 24px,
+      line-height-text-medium: 28px,
+      line-height-text-large: 32px,
+      line-height-text-extra-large: 40px,
+
+      ion-border-radius-small: 8px,
+      ion-border-radius-standard: 12px,
+      ion-border-radius-secondary: 20px,
+      ion-border-radius-rounded: 50px,
+
+      // BORDERS
+      border-color-default: var(--ion-color-gray-200),
+      border-width-default: 1px,
+      border-standard: var(--border-width-default) solid var(--border-color-default),
+      border-thin-standard: 1px solid var(--border-color-default),
+      button-background-primary: var(--ion-color-primary-500),
+      button-background-secondary: var(--ion-color-secondary),
+      button-background-option: var(--ion-color-primary-800),
+      round-button-background-secondary-light: var(--ion-color-yellow),
+      tile-button-background-primary: var(--ion-color-primary-500),
+      tile-button-background-primary-light: var(--ion-color-primary-300),
+      tile-button-background-secondary: var(--ion-color-secondary),
+      tile-button-background-secondary-light: var(--ion-color-yellow),
+      points-item-background: var(--ion-background-color),
+      points-item-background-complete: var(--ion-color-primary-200),
+      points-item-border: rgba(black, 0.07),
+      display-group-background-banner-primary: var(--ion-color-primary-200),
+      display-group-background-banner-secondary: var(--ion-color-secondary-300),
+      display-group-background-home-light: var(--ion-color-primary-300),
+      display-group-background-home-mid: var(--ion-color-primary-600),
+      display-group-background-home-dark: var(--ion-color-primary-800),
+      combo-box-background-with-value: var(--ion-color-primary-300),
+      accordion-background-highlight: var(--ion-color-primary-300),
+      tour-next-button-background: var(--ion-color-secondary),
+      radio-group-background-selected: var(--ion-color-primary-300),
+      ion-item-background: var(--ion-color-gray-light),
+      task-progress-bar-color: var(--ion-color-green),
+      progress-path-line-background: var(--ion-color-gray-100),
+      // ICONS
+      icon-size-small: 16px,
+      icon-size-medium: 24px,
+      icon-size-large: 32px,
+      icon-size-extra-large: 40px,
+      icon-size-largest: 48px,
+
+      // SURFACE COLOUR PALETTE
+      color-surface-white: #ffffff,
+      color-surface-white-variant: #f9f9fa,
+      color-surface-black: #1b1c1d,
+      color-surface-black-variant: #44474a,
+      color-outline: #74777c,
+      color-outline-variant: #c4c7c9,
+
+      // SECONDARY PALETTE
+      color-secondary-green-40: #006f54,
+      color-secondary-green-50: #008a6c,
+      color-secondary-green-60: #00a485,
+      color-secondary-green-70: #4ebda1,
+      color-secondary-green-80: #8ad5bf,
+      color-secondary-green-90: #c4ebde,
+
+      // ORANGE PALETTE
+      color-accent-orange-40: #a63b0f,
+      color-accent-orange-50: #c75223,
+      color-accent-orange-60: #e36f40,
+      color-accent-orange-70: #f89065,
+      color-accent-orange-80: #ffb392,
+      color-accent-orange-95: #ffd8c6,
+
+      // BLUE PALETTE
+      color-accent-blue-40: #46607f,
+      color-accent-blue-50: #5e799b,
+      color-accent-blue-60: #7993b4,
+      color-accent-blue-70: #98adca,
+      color-accent-blue-80: #b9c8de,
+      color-accent-blue-90: #dce3ef,
+    );
+    @include utils.generateTheme($color-primary, $color-secondary, $page-background);
+    @each $name, $value in $variable-overrides {
+      --#{$name}: #{$value};
+    }
+  }
+}
diff --git a/src/theme/themes/plh_facilitator_mx/_overrides.scss b/src/theme/themes/plh_facilitator_mx/_overrides.scss
new file mode 100644
index 0000000000..700a8dcbc5
--- /dev/null
+++ b/src/theme/themes/plh_facilitator_mx/_overrides.scss
@@ -0,0 +1,170 @@
+@use "../../mixins";
+
+body[data-theme="plh_facilitator_mx"] {
+  // Text
+  plh-tmpl-text {
+    .standard {
+      color: var(--color-surface-black);
+      font-size: var(--font-size-text-medium);
+      p {
+        margin: var(--paragraph-margin-small) 0;
+      }
+      ol {
+        margin: var(--paragraph-margin-small) 0;
+      }
+    }
+  }
+
+  //Title
+  plh-tmpl-title {
+    .title-wrapper h1 p {
+      font-size: var(--font-size-text-title);
+      margin: var(--paragraph-margin-medium) 0;
+      line-height: var(--line-height-text-large);
+      color: var(--color-surface-black);
+    }
+  }
+  // Task Card
+  plh-task-card {
+    .card-wrapper {
+      filter: none !important;
+      border: 1px solid #d0e7e8 !important;
+      box-shadow: -2px 3px 6px rgba($color: #bfe1d5, $alpha: 0.3);
+      margin: 14px auto !important;
+    }
+    .image-wrapper {
+      img {
+        border-radius: var(--ion-border-radius-small);
+      }
+    }
+    .content-wrapper {
+      padding: 8px !important;
+      .text-wrapper {
+        width: 100% !important;
+        h1 {
+          margin: 0;
+          line-height: var(--line-height-text-largest);
+          font-weight: var(--font-weight-bold);
+          color: var(--color-surface-black) !important;
+          @media (max-width: 375px) {
+            font-size: var(--font-size-text-mid-size) !important;
+          }
+          @media (max-width: 320px) {
+            font-size: var(--font-size-text-small) !important;
+          }
+        }
+        color: inherit !important;
+      }
+
+      .image-wrapper {
+        width: 45%;
+        padding-left: var(--small-padding);
+      }
+    }
+    .card-wrapper[data-variant~="portrait"],
+    .card-wrapper.portrait {
+      width: 50vw !important;
+      max-width: 360px !important;
+      .image-wrapper {
+        width: 100% !important;
+        padding-left: 0px !important;
+        img {
+          width: 100%;
+          height: auto;
+        }
+      }
+      .content-wrapper {
+        .text-wrapper {
+          width: 100% !important;
+          h1 {
+            font-size: var(--font-size-text-medium) !important;
+            line-height: var(--line-height-text-medium) !important;
+          }
+          .subtitle-wrapper {
+            p {
+              margin: 0px !important;
+              margin-top: 10px !important;
+              font-size: var(--font-size-text-small) !important;
+            }
+          }
+        }
+      }
+    }
+    .card-wrapper[data-variant~="button"],
+    .card-wrapper.button {
+      padding: 6px !important;
+      .content-wrapper {
+        .image-wrapper {
+          // height: 36px;
+          width: 26% !important;
+          height: auto !important;
+          padding-left: 0px !important;
+          img {
+            height: auto !important;
+            width: 100% !important;
+          }
+        }
+        .text-wrapper {
+          width: auto;
+          padding: 6px 8px;
+          h1 {
+            padding: 0px;
+            font-size: var(--font-size-text-mid-size) !important;
+            line-height: var(--line-height-text-medium);
+          }
+        }
+        .button-content {
+          width: fit-content;
+          margin-left: auto;
+        }
+      }
+    }
+    .circle-card-wrapper {
+      .circle-wrapper {
+        filter: none !important;
+        border: 1px solid #e1e2e4 !important;
+        box-shadow: 0px 2px 8px rgba($color: #000000, $alpha: 0.1);
+      }
+    }
+    .card-wrapper[data-variant~="block-button"].button {
+      border: 1px solid #d0e7e8 !important;
+      padding: 0px !important;
+      box-shadow: none !important;
+      border-radius: 16px !important;
+      overflow: hidden;
+      .content-wrapper {
+        padding: 0px !important;
+        background-color: #e7f3f4 !important;
+        .image-wrapper {
+          padding: 0px !important;
+          margin: 0px !important;
+          display: flex;
+          align-items: center;
+          img {
+            height: 100% !important;
+            border-radius: 0px !important;
+            border-top-left-radius: 16px !important;
+            border-bottom-left-radius: 16px !important;
+
+            margin: 0px !important;
+          }
+        }
+        .text-wrapper {
+          padding: 0px 16px !important;
+          h1 {
+            font-size: var(--font-size-text-medium) !important;
+            line-height: 24px !important;
+            color: var(--color-surface-black) !important;
+          }
+        }
+      }
+      &[data-status~="inProgress"] {
+        border: 1px solid var(--color-accent-blue-70) !important;
+        box-shadow: none !important;
+        .content-wrapper {
+          background-color: var(--color-accent-blue-90) !important;
+        }
+      }
+    }
+  }
+}