diff --git a/libs/shared/ng-page-object-model/.eslintrc.json b/libs/shared/ng-page-object-model/.eslintrc.json
deleted file mode 100644
index 8ba3202ba7..0000000000
--- a/libs/shared/ng-page-object-model/.eslintrc.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "extends": ["../../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": []
-}
diff --git a/libs/shared/ng-page-object-model/project.json b/libs/shared/ng-page-object-model/project.json
deleted file mode 100644
index 56083e25f2..0000000000
--- a/libs/shared/ng-page-object-model/project.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "name": "ng-page-object-model",
-  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/shared/ng-page-object-model/src",
-  "tags": ["scope:shared"],
-  "projectType": "library",
-  "targets": {}
-}
diff --git a/libs/shared/ng-page-object-model/src/index.ts b/libs/shared/ng-page-object-model/src/index.ts
deleted file mode 100644
index 7cb8c76b62..0000000000
--- a/libs/shared/ng-page-object-model/src/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './lib/debug-html-element';
-export * from './lib/get-form-control-of-debug-element';
-export * from './lib/page-object-model';
diff --git a/libs/shared/ng-page-object-model/src/lib/debug-html-element.ts b/libs/shared/ng-page-object-model/src/lib/debug-html-element.ts
deleted file mode 100644
index 27087fd224..0000000000
--- a/libs/shared/ng-page-object-model/src/lib/debug-html-element.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { DebugElement } from '@angular/core';
-
-export type DebugHtmlElement<HTMLElementType extends HTMLElement = HTMLElement> = Omit<DebugElement, 'nativeElement'> & {
-  nativeElement: HTMLElementType;
-};
diff --git a/libs/shared/ng-page-object-model/src/lib/get-form-control-of-debug-element.ts b/libs/shared/ng-page-object-model/src/lib/get-form-control-of-debug-element.ts
deleted file mode 100644
index bea8568f49..0000000000
--- a/libs/shared/ng-page-object-model/src/lib/get-form-control-of-debug-element.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { AbstractControl, NgControl } from '@angular/forms';
-
-import { DebugHtmlElement } from './debug-html-element';
-
-export function getFormControlOfDebugElement(debugElement: DebugHtmlElement, assert = true): AbstractControl {
-  let ngControl;
-
-  try {
-    ngControl = debugElement.injector.get(NgControl);
-  } catch {
-    if (assert) {
-      throw new Error(
-        `Unable to find binding [formControl] for element "${debugElement.name}[data-testid=${debugElement.attributes['data-testid']}]"`,
-      );
-    }
-  }
-
-  return ngControl?.control as AbstractControl;
-}
diff --git a/libs/shared/ng-page-object-model/src/lib/page-object-model.ts b/libs/shared/ng-page-object-model/src/lib/page-object-model.ts
deleted file mode 100644
index 5760572536..0000000000
--- a/libs/shared/ng-page-object-model/src/lib/page-object-model.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Type } from '@angular/core';
-import { ComponentFixture } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-
-import { DebugHtmlElement } from './debug-html-element';
-
-export abstract class PageObjectModel<ComponentType> {
-  constructor(public readonly fixture: ComponentFixture<ComponentType>) {}
-
-  protected getSelectorByTestId(testId: string): string {
-    return `[data-testid="${testId}"]`;
-  }
-
-  detectChanges(): void {
-    this.fixture.detectChanges();
-  }
-
-  getDebugElementByCss<HTMLElementType extends HTMLElement = HTMLElement>(
-    cssSelector: string,
-    assert = true,
-  ): DebugHtmlElement<HTMLElementType> {
-    const debugElement = this.fixture.debugElement.query(By.css(cssSelector));
-
-    if (assert && !debugElement) {
-      throw new Error(`Element with selector "${cssSelector}" was not found.`);
-    }
-
-    return debugElement;
-  }
-
-  getDebugElementByTestId<HTMLElementType extends HTMLElement = HTMLElement>(
-    testId: string,
-    assert = true,
-  ): DebugHtmlElement<HTMLElementType> {
-    return this.getDebugElementByCss(this.getSelectorByTestId(testId), assert);
-  }
-
-  getDebugElementByDirective<HTMLElementType extends HTMLElement = HTMLElement>(
-    directive: Type<unknown>,
-    assert = true,
-  ): DebugHtmlElement<HTMLElementType> {
-    const debugElement = this.fixture.debugElement.query(By.directive(directive));
-
-    if (assert && !debugElement) {
-      throw new Error(`Element with directive "${directive.name}" was not found.`);
-    }
-
-    return debugElement;
-  }
-
-  getAllDebugElementsByCss<HTMLElementType extends HTMLElement = HTMLElement>(cssSelector: string): DebugHtmlElement<HTMLElementType>[] {
-    return this.fixture.debugElement.queryAll(By.css(cssSelector));
-  }
-
-  getAllDebugElementsByTestId<HTMLElementType extends HTMLElement = HTMLElement>(testId: string): DebugHtmlElement<HTMLElementType>[] {
-    return this.getAllDebugElementsByCss(this.getSelectorByTestId(testId));
-  }
-
-  getAllDebugElementsByDirective<HTMLElementType extends HTMLElement = HTMLElement>(
-    directive: Type<unknown>,
-  ): DebugHtmlElement<HTMLElementType>[] {
-    return this.fixture.debugElement.queryAll(By.directive(directive));
-  }
-
-  query<T extends HTMLElement>(cssSelector: string, assert = true): T {
-    const element: T = this.fixture.nativeElement.querySelector(cssSelector);
-
-    if (assert && !element) {
-      throw new Error(`Element with selector "${cssSelector}" was not found.`);
-    }
-
-    return element;
-  }
-
-  queryAll<T extends HTMLElement>(selector: string): T[] {
-    return this.fixture.nativeElement.querySelectorAll(selector);
-  }
-
-  removeNativeElement(): void {
-    this.fixture.debugElement.nativeElement.remove();
-  }
-}
diff --git a/libs/shared/ng-page-object-model/tsconfig.json b/libs/shared/ng-page-object-model/tsconfig.json
deleted file mode 100644
index 8e62d6db5a..0000000000
--- a/libs/shared/ng-page-object-model/tsconfig.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2022",
-    "useDefineForClassFields": false,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    }
-  ],
-  "extends": "../../../tsconfig.base.json",
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
-}
diff --git a/libs/shared/ng-page-object-model/tsconfig.lib.json b/libs/shared/ng-page-object-model/tsconfig.lib.json
deleted file mode 100644
index f68063a517..0000000000
--- a/libs/shared/ng-page-object-model/tsconfig.lib.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../dist/out-tsc",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": ["src/**/*.spec.ts", "jest.config.ts", "src/**/*.test.ts"],
-  "include": ["src/**/*.ts"]
-}
diff --git a/libs/shared/test-utils/src/lib/keira-page-object.ts b/libs/shared/test-utils/src/lib/keira-page-object.ts
index 6e471da1da..e9bb139ada 100644
--- a/libs/shared/test-utils/src/lib/keira-page-object.ts
+++ b/libs/shared/test-utils/src/lib/keira-page-object.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture } from '@angular/core/testing';
-import { PageObjectModel } from '@ng-page-object-model';
+import { PageObjectModel } from 'ngx-page-object-model';
 
 export abstract class PageObject<ComponentType> extends PageObjectModel<ComponentType> {
   readonly DT_SELECTOR = 'ngx-datatable';
diff --git a/package-lock.json b/package-lock.json
index c8b70e5308..fb9eeeee2b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -92,6 +92,7 @@
         "ngx-bootstrap": "18.1.3",
         "ngx-clipboard": "16.0.0",
         "ngx-highlightjs": "10.0.0",
+        "ngx-page-object-model": "0.0.1",
         "npm-run-all2": "7.0.2",
         "nx": "20.2.2",
         "playwright": "1.49.1",
@@ -19483,6 +19484,20 @@
         "rxjs": ">=7.0.0"
       }
     },
+    "node_modules/ngx-page-object-model": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-page-object-model/-/ngx-page-object-model-0.0.1.tgz",
+      "integrity": "sha512-NX05B6jI7OJoxn+6SNQI1sSxIBMkOibnDCm0zKs5Q756FRiDRl4FJOBNmCsSg4BNNNIxHCDSGPdFRa8elnGz8Q==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=9.0.0",
+        "@angular/forms": ">=9.0.0",
+        "@angular/platform-browser": ">=9.0.0"
+      }
+    },
     "node_modules/ngx-toastr": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-19.0.0.tgz",
diff --git a/package.json b/package.json
index 014f95198c..848880a719 100644
--- a/package.json
+++ b/package.json
@@ -122,6 +122,7 @@
     "ngx-bootstrap": "18.1.3",
     "ngx-clipboard": "16.0.0",
     "ngx-highlightjs": "10.0.0",
+    "ngx-page-object-model": "0.0.1",
     "npm-run-all2": "7.0.2",
     "nx": "20.2.2",
     "playwright": "1.49.1",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 33dbf6bdb8..610ba0de7d 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -54,7 +54,6 @@
       "@keira/shared/switch-language": ["libs/shared/switch-language/src/index.ts"],
       "@keira/shared/test-utils": ["libs/shared/test-utils/src/index.ts"],
       "@keira/shared/utils": ["libs/shared/utils/src/index.ts"],
-      "@ng-page-object-model": ["libs/shared/ng-page-object-model/src/index.ts"],
       "texts": ["libs/features/texts/src/index.ts"]
     },
     "rootDir": "."