diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..2ce95c2a
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,5 @@
+ORANGEHRM_BASE_URL=https://opensource-demo.orangehrmlive.com
+ORANGEHRM_USERNAME=
+ORANGEHRM_PASSWORD=
+HEADLESS=true
+BROWSER_CHANNEL=chrome
diff --git a/.gitignore b/.gitignore
index e69de29b..755501d4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,9 @@
+node_modules/
+dist/
+.env
+reports/
+playwright-report/
+test-results/
+artifacts/*.json
+!artifacts/.gitkeep
+
diff --git a/SPECS/orangehrm-hr-manager-directory.md b/SPECS/orangehrm-hr-manager-directory.md
new file mode 100644
index 00000000..470d0086
--- /dev/null
+++ b/SPECS/orangehrm-hr-manager-directory.md
@@ -0,0 +1,31 @@
+# Feature Spec: OrangeHRM HR Manager Directory Search
+
+## Goal
+- Provide a local, maintainable automation project that logs into the OrangeHRM demo portal, filters the employee directory by the HR Manager job title, and captures the matching employees in a reusable report.
+
+## Scope
+- In:
+ - Playwright-based browser automation against the hosted OrangeHRM demo site.
+ - BDD scenarios implemented with Cucumber.
+ - Page Object Model structure for login, dashboard, and directory workflows.
+ - Local report generation that prints and persists the HR Manager list.
+ - A small frontend viewer that displays the generated HR Manager report locally.
+- Out:
+ - Changes to the hosted OrangeHRM application.
+ - Backend services or data persistence outside generated local artifacts.
+ - Hardcoded credentials in source control.
+
+## Requirements
+- Credentials must be supplied through local environment variables.
+- The automation must open the OrangeHRM login page, authenticate, navigate to Directory, and filter by the HR Manager job title.
+- The framework must extract the matching employee names and associated directory metadata from the filtered search response.
+- The extracted list must be printed during execution and saved to a local artifact file.
+- The repository must include local run instructions for the BDD tests and the local report viewer.
+
+## Acceptance Criteria
+- [x] A BDD feature file covers successful authentication and HR Manager directory filtering.
+- [x] Playwright page objects encapsulate login, dashboard navigation, and directory interactions.
+- [x] Running the BDD suite locally can generate an `artifacts/hr-managers.json` report.
+- [x] The report artifact contains the searched job title, generated timestamp, total results, and employee entries.
+- [x] A local frontend viewer can render the generated report artifact when served locally.
+- [x] Documentation explains environment setup, test execution, and report viewing.
diff --git a/TODO.md b/TODO.md
index b5d82042..33a3d0d1 100644
--- a/TODO.md
+++ b/TODO.md
@@ -4,4 +4,3 @@
-
## New Feature Proposals
--
\ No newline at end of file
diff --git a/app/app.js b/app/app.js
new file mode 100644
index 00000000..bd42b666
--- /dev/null
+++ b/app/app.js
@@ -0,0 +1,65 @@
+const statusMessage = document.getElementById('statusMessage');
+const employeeList = document.getElementById('employeeList');
+const totalResults = document.getElementById('totalResults');
+const jobTitleChip = document.getElementById('jobTitleChip');
+const generatedAt = document.getElementById('generatedAt');
+const reloadButton = document.getElementById('reloadButton');
+
+function setStatus(message) {
+ statusMessage.textContent = message;
+}
+
+function renderEmployees(employees) {
+ employeeList.innerHTML = '';
+
+ if (!employees.length) {
+ employeeList.innerHTML = '
No HR Manager entries found in the current artifact.