diff --git a/src/app/offerings/featured/featured.component.html b/src/app/offerings/featured/featured.component.html
index 1f270a02..109d7cfd 100644
--- a/src/app/offerings/featured/featured.component.html
+++ b/src/app/offerings/featured/featured.component.html
@@ -16,7 +16,7 @@ <h5 class="text-xl font-semibold line-clamp-2 tracking-tight text-primary-100 da
       
             <div class="flex sticky top-[100vh] items-center justify-center align-items-bottom rounded-lg mt-4">
       
-              <button  type="button" (click)="searchByCategory(cat)" class="flex items-center align-items-bottom text-white bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-100 dark:hover:bg-primary-50 dark:focus:ring-primary-100 mr-1">
+              <button data-cy="viewService" type="button" (click)="searchByCategory(cat)" class="flex items-center align-items-bottom text-white bg-primary-100 hover:bg-primary-50 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-100 dark:hover:bg-primary-50 dark:focus:ring-primary-100 mr-1">
                 <svg class="w-[18px] h-[18px] text-white mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 14">
                   <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                     <path d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html
index 912788e5..a4cb4429 100644
--- a/src/app/pages/dashboard/dashboard.component.html
+++ b/src/app/pages/dashboard/dashboard.component.html
@@ -80,7 +80,7 @@ <h1 class="mb-4 text-left text-4xl font-extrabold tracking-tight md:text-5xl lg:
     }
 
     <!--<app-how-it-works></app-how-it-works>-->
-    <bae-off-featured></bae-off-featured>
+    <bae-off-featured data-cy="offFeatured"></bae-off-featured>
     <!--<bae-off-gallery *ngIf="currentTheme?.dashboard?.showFeaturedOfferings">
     </bae-off-gallery>-->
     <app-platform-benefits *ngIf="currentTheme?.dashboard?.showPlatformBenefits"></app-platform-benefits>
diff --git a/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html b/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html
index 218d6f8b..09a1886a 100644
--- a/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html
+++ b/src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html
@@ -97,7 +97,7 @@ <h6 class="mb-3 text-sm font-medium text-gray-900 dark:text-white">
         } @else {
             <div class="grid grid-cols-1 place-items-center sm:grid-cols-2 lg:grid-cols-3 gap-4">
                 @for (inv of inventory; track inv.id; let idx = $index) {
-                    <div class="w-full h-full bg-secondary-50 dark:bg-secondary-100 dark:border-secondary-100 rounded-lg border-secondary-50 border ">
+                    <div data-cy="productInventory" class="w-full h-full bg-secondary-50 dark:bg-secondary-100 dark:border-secondary-100 rounded-lg border-secondary-50 border ">
 
                         <div (click)="selectProduct(inv)" class="rounded overflow-hidden cursor-pointer">
                             <div class="relative h-48 flex justify-center items-center">
diff --git a/src/app/pages/product-orders/product-orders.component.html b/src/app/pages/product-orders/product-orders.component.html
index 0049beda..2852d463 100644
--- a/src/app/pages/product-orders/product-orders.component.html
+++ b/src/app/pages/product-orders/product-orders.component.html
@@ -36,7 +36,7 @@ <h1 class="mb-8 mt-4 text-4xl font-extrabold leading-none tracking-tight text-gr
                 <button (click)="goToOrders()" aria-current="true" id="order-button" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                     {{ 'PRODUCT_ORDERS._orders' | translate }}
                 </button>
-                <button (click)="goToInvoices()" id="bill-button" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
+                <button data-cy="invoices" (click)="goToInvoices()" id="bill-button" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-secondary-400 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                     {{ 'PRODUCT_ORDERS._invoices' | translate }}
                 </button>
 
diff --git a/src/app/pages/product-orders/sections/invoices-info/invoices-info.component.html b/src/app/pages/product-orders/sections/invoices-info/invoices-info.component.html
index ea711f9f..cded41ab 100644
--- a/src/app/pages/product-orders/sections/invoices-info/invoices-info.component.html
+++ b/src/app/pages/product-orders/sections/invoices-info/invoices-info.component.html
@@ -59,7 +59,7 @@
         </thead>
         <tbody>
           @for (invoice of invoices; track invoice.id; let idx = $index) {
-            <tr class="border-b bg-gray-100 hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
+            <tr data-cy="invoiceRow" class="border-b bg-gray-100 hover:bg-gray-200 dark:bg-secondary-300 dark:border-gray-700 dark:hover:bg-secondary-200">
               <td class="px-6 py-4 text-center align-middle">
                 {{invoice?.billDate | date:'EEEE, dd/MM/yy, HH:mm'}}
               </td>
@@ -136,7 +136,7 @@
 <!-- INVOICE DETAILS modal-->
 @if (showInvoiceDetails){
   <div id="invoice-details-modal" [ngClass]="showInvoiceDetails ? 'backdrop-blur-sm': ''" tabindex="-1" aria-hidden="true" class="flex justify-center overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%)] max-h-full shadow-2xl">
-    <div class="w-full md:w-3/4 lg:w-1/2 relative bg-secondary-50 dark:bg-secondary-100 border border-secondary-50 dark:border-gray-800 rounded-lg shadow bg-cover bg-right-bottom" (click)="$event.stopPropagation();">
+    <div data-cy="invoiceDetail" class="w-full md:w-3/4 lg:w-1/2 relative bg-secondary-50 dark:bg-secondary-100 border border-secondary-50 dark:border-gray-800 rounded-lg shadow bg-cover bg-right-bottom" (click)="$event.stopPropagation();">
       <!-- Modal header -->
       <div class="flex items-center justify-between p-2 rounded-t dark:border-gray-600 shadow-lg">
         <h2 class="md:text-3xl lg:text-4xl font-bold text-primary-100 ml-4 dark:text-white m-4">{{ 'INVOICES._applied_billing_rates' | translate }}</h2>