diff --git a/packages/components/plh/index.ts b/packages/components/plh/index.ts
index f77c8020b5..1f28fe7a3a 100644
--- a/packages/components/plh/index.ts
+++ b/packages/components/plh/index.ts
@@ -7,11 +7,17 @@ import { TemplatePipesModule } from "src/app/shared/components/template/pipes";
 import { LottieModule } from "ngx-lottie";
 import { PlhParentPointCounterComponent } from "./parent-point-counter/parent-point-counter.component";
 import { PlhParentPointBoxComponent } from "./parent-point-box/parent-point-box.component";
+import { PlhModuleListItemComponent } from "./plh-kids-kw/components/module-list-item/module-list-item.component";
+import { RouterModule } from "@angular/router";
 
 @NgModule({
-  imports: [CommonModule, IonicModule, TemplatePipesModule, LottieModule],
-  exports: [PlhParentPointCounterComponent, PlhParentPointBoxComponent],
-  declarations: [PlhParentPointCounterComponent, PlhParentPointBoxComponent],
+  imports: [CommonModule, IonicModule, TemplatePipesModule, LottieModule, RouterModule],
+  exports: [PlhParentPointCounterComponent, PlhParentPointBoxComponent, PlhModuleListItemComponent],
+  declarations: [
+    PlhParentPointCounterComponent,
+    PlhParentPointBoxComponent,
+    PlhModuleListItemComponent,
+  ],
   providers: [],
 })
 export class PlhComponentsModule {}
@@ -19,4 +25,5 @@ export class PlhComponentsModule {}
 export const PLH_COMPONENT_MAPPING: Record<string, Type<ITemplateRowProps>> = {
   parent_point_counter: PlhParentPointCounterComponent,
   parent_point_box: PlhParentPointBoxComponent,
+  plh_module_list_item: PlhModuleListItemComponent,
 };
diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html
new file mode 100644
index 0000000000..3629a2125d
--- /dev/null
+++ b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html
@@ -0,0 +1,50 @@
+<div class="module-item" [attr.data-lock]="params.isLocked">
+  @if (!params.isLocked) {
+    <div
+      class="container"
+      [attr.data-language-direction]="templateTranslateService.languageDirection()"
+      (click)="triggerActions('click')"
+    >
+      @if (params.moduleImageAsset) {
+        <div class="module-image">
+          <img [src]="params.moduleImageAsset | plhAsset" />
+        </div>
+      }
+      @if (_row.value) {
+        <div class="module-title">
+          <p [attr.data-variant]="params.textTransform">{{ _row.value }}</p>
+        </div>
+      }
+      @if (params.navImageAsset !== null) {
+        <div class="nav-icon">
+          <img class="icon" [src]="params.navImageAsset | plhAsset" />
+        </div>
+      } @else {
+        <div class="no-nav"></div>
+      }
+    </div>
+  } @else {
+    <div
+      class="container"
+      [attr.data-language-direction]="templateTranslateService.languageDirection()"
+    >
+      @if (params.moduleImageAsset) {
+        <div class="module-image">
+          <img [src]="params.moduleImageAsset | plhAsset" />
+        </div>
+      }
+      @if (_row.value) {
+        <div class="module-title">
+          <p [attr.data-variant]="params.textTransform">{{ _row.value }}</p>
+        </div>
+      }
+      @if (params.lockedImageAsset !== null) {
+        <div class="locked">
+          <img class="icon" [src]="params.lockedImageAsset | plhAsset" />
+        </div>
+      } @else {
+        <div class="no-nav"></div>
+      }
+    </div>
+  }
+</div>
diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.scss b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.spec.ts b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.spec.ts
new file mode 100644
index 0000000000..fe26eb2927
--- /dev/null
+++ b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { IonicModule } from "@ionic/angular";
+
+import { PlhModuleListItemComponent } from "./module-list-item.component";
+
+describe("ModuleListItemComponent", () => {
+  let component: PlhModuleListItemComponent;
+  let fixture: ComponentFixture<PlhModuleListItemComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [PlhModuleListItemComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PlhModuleListItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
new file mode 100644
index 0000000000..1c0b6c52a4
--- /dev/null
+++ b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
@@ -0,0 +1,56 @@
+import { Component, OnInit } from "@angular/core";
+import { FlowTypes } from "packages/data-models";
+import { TemplateBaseComponent } from "src/app/shared/components/template/components/base";
+import { TemplateTranslateService } from "src/app/shared/components/template/services/template-translate.service";
+import {
+  getBooleanParamFromTemplateRow,
+  getStringParamFromTemplateRow,
+} from "src/app/shared/utils";
+
+interface IModuleListItemParams {
+  /* TEMPLATE PARAMETER: "module_image_asset". The image attached to the module */
+  moduleImageAsset?: string;
+  /* TEMPLATE PARAMETER: "text_transform". The format of the text on the module item. Default null */
+  textTransform?: "capitalise" | "uppercase";
+  /* TEMPLATE PARAMETER: "is_locked". The boolean that marks the module as locked or unlocked */
+  isLocked?: boolean;
+  /* TEMPLATE PARAMETER: "nav_image_asset". The navigation icon*/
+  navImageAsset?: string;
+  /* TEMPLATE PARAMETER: "locked_image_asset". The locked icon*/
+  lockedImageAsset?: string;
+}
+
+@Component({
+  selector: "plh-module-list-item",
+  templateUrl: "./module-list-item.component.html",
+  styleUrls: ["./module-list-item.component.scss"],
+})
+export class PlhModuleListItemComponent extends TemplateBaseComponent implements OnInit {
+  params: Partial<IModuleListItemParams> = {};
+
+  constructor(public templateTranslateService: TemplateTranslateService) {
+    super();
+  }
+
+  ngOnInit() {
+    this.getParams();
+  }
+
+  private getParams() {
+    this.params.moduleImageAsset = getStringParamFromTemplateRow(
+      this._row,
+      "module_image_asset",
+      ""
+    );
+    this.params.textTransform = getStringParamFromTemplateRow(this._row, "text_transform", null) as
+      | "capitalise"
+      | "uppercase";
+    this.params.isLocked = getBooleanParamFromTemplateRow(this._row, "is_locked", false);
+    this.params.navImageAsset = getStringParamFromTemplateRow(this._row, "nav_image_asset", null);
+    this.params.lockedImageAsset = getStringParamFromTemplateRow(
+      this._row,
+      "locked_image_asset",
+      null
+    );
+  }
+}
diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index d3286f84e0..bc43f62bbb 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -248,4 +248,82 @@ body[data-theme="plh_kids_kw"] {
       }
     }
   }
-}
\ No newline at end of file
+
+  // module-list-item
+  plh-module-list-item {
+    .module-item {
+      width: 100%;
+      // TODO: switch to global secondary variable
+      border: 2px solid #2e98d8;
+      border-radius: var(--ion-border-radius-secondary);
+      padding: 16px;
+      box-shadow: 1px 1px 10px #92b7da;
+      background-color: #f6fafe;
+      .container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .module-image {
+        img {
+          width: 100px;
+          height: 100px;
+          max-width: unset;
+        }
+      }
+      .module-title {
+        margin: 0 12px;
+        margin-right: 18px;
+        p {
+          font-size: var(--font-size-text-medium);
+          color: var(--ion-color-primary-700);
+          font-weight: var(--font-weight-bold);
+          line-height: var(--line-height-text-small);
+          text-align: left;
+          text-transform: none;
+          &[data-variant~="capitalise"] {
+            text-transform: capitalize;
+          }
+          &[data-variant~="uppercase"] {
+            text-transform: uppercase;
+          }
+        }
+      }
+      .icon {
+        width: 28px;
+        max-width: unset;
+        &[data-language-direction~="rtl"] {
+          -webkit-transform: scaleX(-1);
+          transform: scaleX(-1);
+        }
+      }
+      .container[data-language-direction~="rtl"] {
+        .module-title {
+          p {
+            text-align: right;
+          }
+        }
+        .module-image {
+          img {
+            -webkit-transform: scaleX(-1);
+            transform: scaleX(-1);
+          }
+        }
+      }
+    }
+    .module-item[data-lock~="true"] {
+      box-shadow: none;
+      opacity: 0.5;
+      border: 2px solid #dbe3f2;
+      background-color: #ffffff;
+      .module-image {
+        img {
+          width: 60px;
+          height: 60px;
+          max-width: unset;
+        }
+      }
+    }
+  }
+}