diff --git a/src/app/pages/faq/faq.page.scss b/src/app/pages/faq/faq.page.scss
index ee86b88..4d29ebc 100755
--- a/src/app/pages/faq/faq.page.scss
+++ b/src/app/pages/faq/faq.page.scss
@@ -1,5 +1,5 @@
 ion-accordion.accordion-expanding ion-item[slot='header'],
 ion-accordion.accordion-expanded ion-item[slot='header'] {
-  --background: var(--ion-color-primary);
-  --color: var(--ion-color-primary-contrast);
+  --ion-color-base: var(--ion-color-primary) !important;
+  --ion-color-contrast: var(--ion-color-primary-contrast) !important;
 }
diff --git a/src/app/pages/hero/hero.page.html b/src/app/pages/hero/hero.page.html
index cae380c..bdaeeea 100755
--- a/src/app/pages/hero/hero.page.html
+++ b/src/app/pages/hero/hero.page.html
@@ -9,88 +9,124 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
-    <ion-item>
+<ion-content class="ion-padding">
+    <ion-item [class.ion-invalid]="(submitted || touched['name']) && !name" [class.ion-touched]="submitted || touched['name']">
         <ion-label position="floating">{{'hero.name' | translate}}</ion-label>
-        <ion-input [(ngModel)]="name"></ion-input>
+        <ion-input [(ngModel)]="name" (ionBlur)="markTouched('name')"></ion-input>
     </ion-item>
-    <br>
+    <span class="error-msg" *ngIf="(submitted || touched['name']) && !name">{{'hero.required' | translate}}</span>
+
+    <ion-item [class.ion-invalid]="(submitted || touched['rfc']) && !rfc" [class.ion-touched]="submitted || touched['rfc']">
+        <ion-label position="floating">RFC</ion-label>
+        <ion-input [(ngModel)]="rfc" (ionBlur)="markTouched('rfc')"></ion-input>
+    </ion-item>
+    <span class="error-msg" *ngIf="(submitted || touched['rfc']) && !rfc">{{'hero.required' | translate}}</span>
 
     <!-- CATEGORÍAS CON CHIPS -->
-    <ion-label class="chip-label">{{'hero.categories' | translate}}</ion-label>
-    <div class="chips-container">
-      <ion-chip *ngFor="let cat of categories_input" color="primary">
-        <ion-label>{{cat}}</ion-label>
-        <ion-icon name="close-circle" (click)="removeCategory(cat)"></ion-icon>
-      </ion-chip>
-    </div>
-    <ion-item>
-      <ion-input
-        [(ngModel)]="categorySearchText"
-        (ionInput)="filterCategories($event)"
-        (ionFocus)="showCategoryList()"
-        (ionBlur)="hideCategoryList()"
-        placeholder="{{'hero.categories_placeholder' | translate}}">
-      </ion-input>
-    </ion-item>
-    <ion-list *ngIf="showCategoryDropdown && filteredCategories.length > 0" class="dropdown-list">
-      <ion-item *ngFor="let category of filteredCategories" button (click)="selectCategory(category)">
-        {{category}}
+    <div class="dropdown-container">
+      <ion-item class="tags-item" [class.ion-invalid]="(submitted || touched['categories']) && categories_input.length === 0" [class.ion-touched]="submitted || touched['categories']">
+        <div class="tags-row">
+          <span class="chip-section-label">{{'hero.categories' | translate}}</span>
+          <ion-chip *ngFor="let cat of categories_input" color="primary">
+            <ion-label>{{cat}}</ion-label>
+            <ion-icon name="close-circle" (click)="removeCategory(cat)"></ion-icon>
+          </ion-chip>
+          <ion-input
+            [(ngModel)]="categorySearchText"
+            (ionInput)="filterCategories($event)"
+            (ionBlur)="hideCategoryList()"
+            [clearInput]="true"
+            placeholder="{{'hero.categories_placeholder' | translate}}">
+          </ion-input>
+        </div>
       </ion-item>
-    </ion-list>
-    <br>
+      <span class="error-msg" *ngIf="(submitted || touched['categories']) && categories_input.length === 0">Selecciona al menos una categoría</span>
+      <ion-list *ngIf="showCategoryDropdown && filteredCategories.length > 0" class="dropdown-list">
+        <ion-item *ngFor="let category of filteredCategories" button (click)="selectCategory(category)">
+          {{category}}
+        </ion-item>
+      </ion-list>
+    </div>
 
     <!-- PALABRAS CLAVE CON CHIPS -->
-    <ion-label class="chip-label">{{'hero.keywords' | translate}}</ion-label>
-    <div class="chips-container">
-      <ion-chip *ngFor="let keyword of keywords" color="secondary">
-        <ion-label>{{keyword}}</ion-label>
-        <ion-icon name="close-circle" (click)="removeKeyword(keyword)"></ion-icon>
-      </ion-chip>
-    </div>
-    <ion-item>
-      <ion-input
-        [(ngModel)]="keywordInput"
-        (keydown)="onKeywordKeydown($event)"
-        (ionBlur)="addKeyword($event)"
-        placeholder="{{'hero.keywords_placeholder' | translate}}">
-      </ion-input>
+    <ion-item class="tags-item">
+      <div class="tags-row">
+        <span class="chip-section-label">{{'hero.keywords' | translate}}</span>
+        <ion-chip *ngFor="let keyword of keywords" color="primary">
+          <ion-label>{{keyword}}</ion-label>
+          <ion-icon name="close-circle" (click)="removeKeyword(keyword)"></ion-icon>
+        </ion-chip>
+        <ion-input
+          [(ngModel)]="keywordInput"
+          (keydown)="onKeywordKeydown($event)"
+          (ionBlur)="addKeyword($event)"
+          placeholder="{{'hero.keywords_placeholder' | translate}}">
+        </ion-input>
+      </div>
     </ion-item>
-    <ion-note padding>{{'hero.keywords_hint' | translate}}</ion-note>
+    <ion-note class="ion-padding">{{'hero.keywords_hint' | translate}}</ion-note>
 
-    <ion-label color="light">_</ion-label>
-
-    <ion-item>
-      <ion-label position="floating">Dirección</ion-label>
-      <ion-input [(ngModel)]="addressAutocomplete" (ionChange)="autocomplete($event)" value="{{ myAddress }}" (ionFocus)="showlist()"></ion-input>
-    </ion-item>
-    <ion-list *ngIf="showif">
-      <ion-item button=true (click)="geoloc(places.place_id, places.description, places.terms[1].value)" *ngFor="let places of placesSearch" class="place">
-        {{ places.description }}
+    <!-- DIRECCIÓN CON AUTOCOMPLETE FLOTANTE -->
+    <div class="dropdown-container">
+      <ion-item [class.ion-invalid]="(submitted || touched['address']) && !myAddress" [class.ion-touched]="submitted || touched['address']">
+        <ion-label position="floating">{{'categories.address' | translate}}</ion-label>
+        <ion-input [(ngModel)]="addressAutocomplete" (ionInput)="autocomplete($event)" (ionFocus)="showlist()" (ionBlur)="blurAddressList()" [clearInput]="true"></ion-input>
       </ion-item>
-    </ion-list>
-    <ion-item hidden>
+      <span class="error-msg" *ngIf="(submitted || touched['address']) && !myAddress">{{'alerts.valid_address' | translate}}</span>
+      <ion-list *ngIf="showif && placesSearch?.length" class="dropdown-list">
+        <ion-item button=true (click)="geoloc(places.place_id, places.description, places.terms[1].value)" *ngFor="let places of placesSearch" class="place">
+          {{ places.description }}
+        </ion-item>
+      </ion-list>
+    </div>
+
+    <ion-item class="ion-hide">
       <ion-label position="fixed">Latitud</ion-label>
       <ion-input value="{{ myPosition.latitude }}" disabled></ion-input>
     </ion-item>
-    <ion-item hidden>
+    <ion-item class="ion-hide">
       <ion-label position="fixed">Longitud</ion-label>
       <ion-input value="{{ myPosition.longitude }}" disabled></ion-input>
     </ion-item>
-    <ion-item>
-      <ion-label>{{'hero.discover' | translate}}</ion-label>
-      <ion-select value={selectedReference} okText="Aceptar" cancelText="Cancelar" (ionChange)="selected_reference($event)">
-        <ion-select-option value="1">{{'hero.radio' | translate}}</ion-select-option>
-        <ion-select-option value="2">{{'hero.tv' | translate}}</ion-select-option>
-        <ion-select-option value="3">{{'hero.social' | translate}}</ion-select-option>
-        <ion-select-option value="4">{{'hero.friends' | translate}}</ion-select-option>
-        <ion-select-option value="5">{{'hero.other' | translate}}</ion-select-option>
+
+    <ion-item [class.ion-invalid]="(submitted || touched['bank']) && selectedBank === null" [class.ion-touched]="submitted || touched['bank']">
+      <ion-label>{{'hero.bank' | translate}}</ion-label>
+      <ion-select [(ngModel)]="selectedBank" placeholder="{{'hero.select' | translate}}" okText="Aceptar" cancelText="Cancelar" (ionBlur)="markTouched('bank')">
+        <ion-select-option *ngFor="let bank of banks" [value]="bank.id">{{bank.name}}</ion-select-option>
       </ion-select>
     </ion-item>
-    <ion-item *ngIf="showinput">
-        <ion-label position="floating">{{'hero.discover_details' | translate}}</ion-label>
-        <ion-input [(ngModel)]="reference"></ion-input>
+    <span class="error-msg" *ngIf="(submitted || touched['bank']) && selectedBank === null">{{'hero.required' | translate}}</span>
+
+    <ion-item [class.ion-invalid]="(submitted || touched['bankAccount']) && !bankAccount" [class.ion-touched]="submitted || touched['bankAccount']">
+      <ion-label position="floating">{{'hero.bank_account' | translate}}</ion-label>
+      <ion-input [(ngModel)]="bankAccount" type="number" (ionBlur)="markTouched('bankAccount')"></ion-input>
     </ion-item>
+    <span class="error-msg" *ngIf="(submitted || touched['bankAccount']) && !bankAccount">{{'hero.required' | translate}}</span>
+
+    <ion-item [class.ion-invalid]="(submitted || touched['fee']) && fee === null" [class.ion-touched]="submitted || touched['fee']">
+      <ion-label position="floating">{{'hero.fee' | translate}}</ion-label>
+      <ion-input [(ngModel)]="feeDisplay" (ionInput)="onFeeInput($event)" (ionBlur)="markTouched('fee')" type="text" inputmode="decimal"></ion-input>
+    </ion-item>
+    <span class="error-msg" *ngIf="(submitted || touched['fee']) && fee === null">{{'hero.required' | translate}}</span>
+
+    <ion-item [class.ion-invalid]="(submitted || touched['reference']) && !selectedReference" [class.ion-touched]="submitted || touched['reference']">
+      <ion-label>{{'hero.discover' | translate}}</ion-label>
+      <ion-select [(ngModel)]="selectedReference" placeholder="{{'hero.select' | translate}}" okText="Aceptar" cancelText="Cancelar" (ionChange)="selected_reference($event)" (ionBlur)="markTouched('reference')">
+        <ion-select-option [value]="1">{{'hero.radio' | translate}}</ion-select-option>
+        <ion-select-option [value]="2">{{'hero.tv' | translate}}</ion-select-option>
+        <ion-select-option [value]="3">{{'hero.social' | translate}}</ion-select-option>
+        <ion-select-option [value]="4">{{'hero.friends' | translate}}</ion-select-option>
+        <ion-select-option [value]="5">{{'hero.other' | translate}}</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <span class="error-msg" *ngIf="(submitted || touched['reference']) && !selectedReference">{{'hero.required' | translate}}</span>
+
+    <ion-item *ngIf="showinput" [class.ion-invalid]="(submitted || touched['referenceDetail']) && !reference" [class.ion-touched]="submitted || touched['referenceDetail']">
+        <ion-label position="floating">{{'hero.discover_details' | translate}}</ion-label>
+        <ion-input [(ngModel)]="reference" (ionBlur)="markTouched('referenceDetail')"></ion-input>
+    </ion-item>
+    <span class="error-msg" *ngIf="(submitted || touched['referenceDetail']) && showinput && !reference">{{'hero.required' | translate}}</span>
+
     <br>
     <br>
     <ion-button type="submit" expand="full" color="secondary" (click)="addHero()">{{'hero.signup' | translate}}</ion-button>
diff --git a/src/app/pages/hero/hero.page.scss b/src/app/pages/hero/hero.page.scss
index 9a2f64f..31f4cd5 100755
--- a/src/app/pages/hero/hero.page.scss
+++ b/src/app/pages/hero/hero.page.scss
@@ -1,21 +1,28 @@
-.chip-label {
-  display: block;
-  padding: 10px 16px 5px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--ion-color-medium);
+.tags-item {
+  --inner-padding-end: 8px;
+  --padding-top: 4px;
+  --padding-bottom: 4px;
 }
 
-.chips-container {
+.chip-section-label {
+  flex-basis: 100%;
+  font-size: 12px;
+  padding-top: 8px;
+  padding-bottom: 2px;
+}
+
+.tags-row {
   display: flex;
   flex-wrap: wrap;
-  padding: 5px 10px;
-  min-height: 20px;
-  gap: 5px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 0 6px;
+  width: 100%;
 
   ion-chip {
-    margin: 2px;
-    height: 32px;
+    margin: 0;
+    height: 30px;
+    flex-shrink: 0;
 
     ion-label {
       font-size: 13px;
@@ -26,16 +33,29 @@
       font-size: 18px;
     }
   }
+
+  ion-input {
+    min-width: 120px;
+    flex: 1;
+  }
+}
+
+.dropdown-container {
+  position: relative;
 }
 
 .dropdown-list {
+  position: absolute;
+  top: 100%;
+  left: 16px;
+  right: 16px;
+  z-index: 100;
   max-height: 200px;
   overflow-y: auto;
   border: 1px solid var(--ion-color-light-shade);
   border-radius: 8px;
-  margin: 0 16px;
-  background: var(--ion-background-color);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background: var(--ion-background-color, #fff);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
   ion-item {
     --min-height: 40px;
@@ -48,6 +68,22 @@
   }
 }
 
+ion-item.ion-invalid.ion-touched {
+  --border-color: var(--ion-color-danger);
+  --highlight-color-invalid: var(--ion-color-danger);
+
+  ion-label {
+    color: var(--ion-color-danger) !important;
+  }
+}
+
+.error-msg {
+  display: block;
+  font-size: 12px;
+  color: var(--ion-color-danger);
+  padding: 2px 16px 4px;
+}
+
 ion-chip[color="primary"] {
   --background: var(--ion-color-primary);
   --color: var(--ion-color-primary-contrast);
diff --git a/src/app/pages/hero/hero.page.ts b/src/app/pages/hero/hero.page.ts
index 0d7e71b..49ad8be 100755
--- a/src/app/pages/hero/hero.page.ts
+++ b/src/app/pages/hero/hero.page.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit, NgZone } from '@angular/core';
 import { NavController, LoadingController } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
+import { TranslateService } from '@ngx-translate/core';
+import { LanguageService } from 'src/app/services/language.service';
 import { IchambaService } from 'src/app/services/ichamba.service';
 import { AlertService } from 'src/app/services/alert.service';
 
@@ -10,6 +12,7 @@ declare var google: any;
   selector: 'app-hero',
   templateUrl: './hero.page.html',
   styleUrls: ['./hero.page.scss'],
+  standalone: false
 })
 export class HeroPage implements OnInit {
 
@@ -25,19 +28,29 @@ export class HeroPage implements OnInit {
   myPosition: any = {};
   myAddress: string | null = null;
   myIntnumber: string | null = null;
+  banks: any[] = [];
   reference: string | null = null;
   name: string | null = null;
+  rfc: string | null = null;
+  selectedBank: number | null = null;
+  bankAccount: number | null = null;
+  fee: number | null = null;
+  feeDisplay: string = '';
   selectedReference: number = 0;
   addressAutocomplete: string = '';
   placesSearch: any = '';
   showinput: boolean = false;
   showif = true;
+  submitted: boolean = false;
+  touched: { [key: string]: boolean } = {};
 
   constructor(
       private navCtrl: NavController,
       private loadingCtrl: LoadingController,
       private authService: AuthService,
       private alertService: AlertService,
+      private translateService: TranslateService,
+      private languageService: LanguageService,
       private ichambaService: IchambaService,
       private ngZone: NgZone,
   ) { }
@@ -48,6 +61,10 @@ export class HeroPage implements OnInit {
         this.categories = categories;
         this.filteredCategories = categories;
       })
+    this.ichambaService.getBanks()
+      .subscribe( banks => {
+        this.banks = banks;
+      })
   }
 
   // ========== CATEGORÍAS CON CHIPS ==========
@@ -82,19 +99,16 @@ export class HeroPage implements OnInit {
     this.filteredCategories = this.categories.filter(cat => !this.categories_input.includes(cat));
   }
 
-  showCategoryList() {
-    this.filteredCategories = this.categories.filter(cat => !this.categories_input.includes(cat));
-    this.showCategoryDropdown = true;
-  }
-
   hideCategoryList() {
     setTimeout(() => {
       this.showCategoryDropdown = false;
+      this.touched['categories'] = true;
     }, 200);
   }
 
   // ========== PALABRAS CLAVE CON CHIPS ==========
   addKeyword(event?: any) {
+    this.touched['keywords'] = true;
     const value = this.keywordInput?.trim();
     if (value && value.length > 0) {
       // Separar por comas si hay varias palabras
@@ -112,6 +126,8 @@ export class HeroPage implements OnInit {
     if (event.key === 'Enter' || event.key === ',') {
       event.preventDefault();
       this.addKeyword();
+    } else if (event.key === 'Backspace' && !this.keywordInput && this.keywords.length > 0) {
+      this.keywords.pop();
     }
   }
 
@@ -123,92 +139,105 @@ export class HeroPage implements OnInit {
   }
 
   dismissHero() {
-    this.navCtrl.navigateRoot('/landing');
+    this.navCtrl.navigateRoot('/dashboard');
   }
 
   autocomplete(ev: any) {
-    if (!this.addressAutocomplete.trim().length) {
+    const value = (ev.detail?.value ?? this.addressAutocomplete).trim();
+    this.myAddress = null;
+    if (!value.length) {
       this.placesSearch = null;
+      return;
     }
-    console.log(this.addressAutocomplete)
-    new google.maps.places.AutocompleteService().getPredictions({ input: this.addressAutocomplete }, predictions => {
+    new google.maps.places.AutocompleteService().getPredictions({ input: value }, (predictions: any) => {
       this.ngZone.run(() => {
         this.placesSearch = predictions;
-        console.log(predictions);
       });
     });
   }
 
   geoloc(place_id: string, place_description: string, place_intnumber: string) {
     this.myAddress = place_description;
+    this.addressAutocomplete = place_description;
     this.myIntnumber = place_intnumber;
-    console.log(place_id);
+    this.placesSearch = null;
     this.hidelist();
-    new google.maps.Geocoder().geocode({ placeId: place_id }, coordinates  => {
+    new google.maps.Geocoder().geocode({ placeId: place_id }, (coordinates: any) => {
       this.ngZone.run(() => {
-        console.log(coordinates[0].geometry.location.lat() + ", " + coordinates[0].geometry.location.lng());
+        const result = coordinates[0];
         this.myPosition = {
-          latitude: coordinates[0].geometry.location.lat(),
-          longitude: coordinates[0].geometry.location.lng()
-        }
+          latitude: result.geometry.location.lat(),
+          longitude: result.geometry.location.lng()
+        };
       });
     });
   }
 
   selected_reference(ev: any) {
-    console.log(ev.target.value);
-    this.selectedReference = ev.target.value;
-    if (this.selectedReference == 5) {
-      this.showinput = true;
-    } else {
-      this.showinput = false;
-    }
+    this.showinput = ev.detail.value === 5;
+  }
+
+  onFeeInput(ev: any) {
+    const raw = (ev.detail?.value ?? '').replace(/[^0-9.]/g, '');
+    const parts = raw.split('.');
+    const integer = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    const decimal = parts.length > 1 ? '.' + parts[1].slice(0, 2) : '';
+    this.feeDisplay = raw ? `$${integer}${decimal}` : '';
+    this.fee = raw ? parseFloat(raw) : null;
   }
 
   addHero(){
-    // Preparar categorías y keywords
+    this.submitted = true;
     const categoriesString = this.categories_input.join(',');
-    const keywordsString = this.keywords.length > 0 ? this.keywords.join(', ') : null;
+    const keywordsString = this.keywords.length > 0 ? this.keywords.join(', ') : '';
 
-    if (this.name && this.categories_input.length > 0 && this.myAddress && this.myPosition.latitude && this.myPosition.longitude && this.selectedReference){
-      if (this.selectedReference == 5 && this.reference) {
-        this.loadingCtrl.create().then((overlay) => {
-          this.loading = overlay;
-          this.loading.present();
-        });
-
-        this.ichambaService.addHero(this.name, categoriesString, keywordsString, this.myAddress, this.myPosition.latitude, this.myPosition.longitude, this.selectedReference, this.reference).subscribe(
-          data => {
-            this.loading.dismiss();
-              this.alertService.presentToast(data['message']);
-              this.navCtrl.navigateRoot('/dashboard');
-          }, error => {
-            this.loading.dismiss();
-            this.alertService.presentToast("Por favor contacte a soporte técnico, Estatus:" + error['status']);
-          });
-      } else if (this.selectedReference !== 5) {
-        this.loadingCtrl.create().then((overlay) => {
-          this.loading = overlay;
-          this.loading.present();
-        });
-
-        this.ichambaService.addHero(this.name, categoriesString, keywordsString, this.myAddress, this.myPosition.latitude, this.myPosition.longitude, this.selectedReference, this.reference).subscribe(
-          data => {
-            this.loading.dismiss();
-              this.alertService.presentToast(data['message']);
-              this.navCtrl.navigateRoot('/dashboard');
-          }, error => {
-            this.loading.dismiss();
-            this.alertService.presentToast("Por favor contacte a soporte técnico, Estatus:" + error['status']);
-          });
-      } else {
+    if (
+      this.name &&
+      this.rfc &&
+      this.categories_input.length > 0 &&
+      this.myAddress &&
+      this.myPosition.latitude &&
+      this.myPosition.longitude &&
+      this.selectedBank !== null &&
+      this.bankAccount &&
+      this.fee !== null &&
+      this.selectedReference
+    ) {
+      if (this.selectedReference === 5 && !this.reference) {
         this.alertService.presentToast("Por favor, específique cómo supo de nosotros");
+        return;
       }
+
+      this.loadingCtrl.create().then((overlay) => {
+        this.loading = overlay;
+        this.loading.present();
+      });
+
+      this.ichambaService.addHero(this.name!, this.rfc!, categoriesString, keywordsString, this.myAddress!, this.myPosition.latitude, this.myPosition.longitude, this.selectedBank ?? 0, this.bankAccount ?? 0, this.fee ?? 0, this.selectedReference, this.reference ?? '').subscribe(
+        (data: any) => {
+          if (this.loading) this.loading.dismiss();
+          this.alertService.presentToast(data['message']);
+          this.navCtrl.navigateRoot('/dashboard');
+        }, (error: any) => {
+          if (this.loading) this.loading.dismiss();
+          this.alertService.presentToast(this.translateService.instant('alerts.error') + error['status']);
+        });
     } else {
       this.alertService.presentToast("Llene todos los datos solicitados");
     }
   }
 
+  markTouched(field: string) {
+    this.touched[field] = true;
+  }
+
+  blurAddressList() {
+    setTimeout(() => {
+      this.hidelist();
+      this.touched['address'] = true;
+    }, 200);
+  }
+
   showlist() {
     this.showif = true;
   }
diff --git a/src/app/services/onesignal.service.ts b/src/app/services/onesignal.service.ts
index a5e7d4b..9cf1fb3 100644
--- a/src/app/services/onesignal.service.ts
+++ b/src/app/services/onesignal.service.ts
@@ -1,7 +1,9 @@
-import { Injectable } from '@angular/core';
+import { Injectable, NgZone } from '@angular/core';
 import { Capacitor } from '@capacitor/core';
+import { NavController } from '@ionic/angular';
 import { EnvService } from './env.service';
-import { Router } from '@angular/router';
+import { AlertService } from './alert.service';
+import { EventService } from './event.service';
 
 declare var OneSignalPlugin: any;
 
@@ -13,78 +15,78 @@ export class OneSignalService {
 
   constructor(
     private env: EnvService,
-    private router: Router
+    private navCtrl: NavController,
+    private alertService: AlertService,
+    private events: EventService,
+    private ngZone: NgZone,
   ) { }
 
   async init(): Promise<void> {
-    if (this.initialized || !Capacitor.isNativePlatform()) {
-      return;
-    }
+    if (this.initialized || !Capacitor.isNativePlatform()) return;
 
     try {
-      // Initialize OneSignal
       OneSignalPlugin.initialize(this.env.ONESIGNAL_APP_ID);
 
-      // Request notification permission
       OneSignalPlugin.Notifications.requestPermission(true).then((accepted: boolean) => {
-        console.log('OneSignal notification permission:', accepted ? 'accepted' : 'denied');
+        console.log('OneSignal permission:', accepted ? 'accepted' : 'denied');
       });
 
-      // Handle notification clicks
-      OneSignalPlugin.Notifications.addEventListener('click', (event: any) => {
-        console.log('OneSignal notification clicked:', event);
-        this.handleNotificationClick(event);
-      });
-
-      // Handle foreground notifications
+      // Foreground: show alert + navigate
       OneSignalPlugin.Notifications.addEventListener('foregroundWillDisplay', (event: any) => {
-        console.log('OneSignal notification received in foreground:', event);
-        // Display the notification
-        event.getNotification().display();
+        const notification = event.getNotification();
+        notification.display();
+        this.ngZone.run(() => {
+          this.alertService.presentAlert(notification.title, notification.body, ['OK']);
+          this.navigateByTitle(notification.title);
+        });
+      });
+
+      // Tap on notification: navigate only
+      OneSignalPlugin.Notifications.addEventListener('click', (event: any) => {
+        const title = event.notification?.title;
+        this.ngZone.run(() => this.navigateByTitle(title));
       });
 
       this.initialized = true;
-      console.log('OneSignal initialized successfully');
     } catch (error) {
       console.error('Error initializing OneSignal:', error);
     }
   }
 
-  async setUserId(userId: number | string): Promise<void> {
-    if (!Capacitor.isNativePlatform()) {
-      return;
+  private navigateByTitle(title: string): void {
+    if (title === 'Proveedor: hay nueva postulación' || title === 'Hero: there is a new postulation') {
+      this.navCtrl.navigateRoot('/postulations');
+      this.events.publish('refreshpostulations', 'data');
+    } else if (title === 'Búsqueda Finalizada' || title === 'Search finished') {
+      this.navCtrl.navigateRoot('/contracts');
+    } else if (title === 'Usuario: el proveedor ha iniciado el servicio' || title === 'User: the Hero has started the service') {
+      this.navCtrl.navigateRoot('/contracts');
     }
+  }
 
+  async setUserId(userId: number | string): Promise<void> {
+    if (!Capacitor.isNativePlatform()) return;
     try {
-      // Set user tag for targeting
+      OneSignalPlugin.login(String(userId));
       OneSignalPlugin.User.addTag('iChamba_ID', String(userId));
-      console.log('OneSignal user tag set:', userId);
     } catch (error) {
-      console.error('Error setting OneSignal user tag:', error);
+      console.error('Error setting OneSignal user:', error);
     }
   }
 
   async setUserRole(roleId: number | string): Promise<void> {
-    if (!Capacitor.isNativePlatform()) {
-      return;
-    }
-
+    if (!Capacitor.isNativePlatform()) return;
     try {
       OneSignalPlugin.User.addTag('iChamba_Role', String(roleId));
-      console.log('OneSignal role tag set:', roleId);
     } catch (error) {
       console.error('Error setting OneSignal role tag:', error);
     }
   }
 
   async clearTags(): Promise<void> {
-    if (!Capacitor.isNativePlatform()) {
-      return;
-    }
-
+    if (!Capacitor.isNativePlatform()) return;
     try {
       OneSignalPlugin.User.removeTags(['iChamba_ID', 'iChamba_Role']);
-      console.log('OneSignal tags cleared');
     } catch (error) {
       console.error('Error clearing OneSignal tags:', error);
     }
@@ -92,38 +94,20 @@ export class OneSignalService {
 
   async logout(): Promise<void> {
     await this.clearTags();
-  }
-
-  private handleNotificationClick(event: any): void {
-    const data = event?.notification?.additionalData;
-
-    if (data) {
-      // Handle navigation based on notification data
-      if (data.route) {
-        this.router.navigate([data.route]);
-      } else if (data.type) {
-        switch (data.type) {
-          case 'contract':
-            this.router.navigate(['/contracts']);
-            break;
-          case 'postulation':
-            this.router.navigate(['/postulations']);
-            break;
-          default:
-            this.router.navigate(['/dashboard']);
-        }
+    if (Capacitor.isNativePlatform()) {
+      try {
+        OneSignalPlugin.logout();
+      } catch (error) {
+        console.error('Error logging out OneSignal:', error);
       }
     }
   }
 
   async getPlayerId(): Promise<string | null> {
-    if (!Capacitor.isNativePlatform()) {
-      return null;
-    }
-
+    if (!Capacitor.isNativePlatform()) return null;
     try {
-      const deviceState = await OneSignalPlugin.User.pushSubscription.getId();
-      return deviceState || null;
+      const id = await OneSignalPlugin.User.pushSubscription.getId();
+      return id || null;
     } catch (error) {
       console.error('Error getting OneSignal player ID:', error);
       return null;
diff --git a/src/global.scss b/src/global.scss
index 2bf2434..d70f226 100755
--- a/src/global.scss
+++ b/src/global.scss
@@ -74,6 +74,24 @@ ion-app {
   }
 }
 
+// Consistent button styling to match social login buttons
+ion-button::part(native) {
+  border-radius: 6px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  box-shadow: none;
+}
+
+// Border for light-colored buttons so they don't blend into white backgrounds
+ion-button[color="light"]::part(native) {
+  border: 1px solid #DADCE0;
+}
+
+// No border when light button is inside a colored toolbar
+ion-toolbar:not([color="light"]):not([color=""])  ion-button[color="light"]::part(native) {
+  border: none;
+}
+
 .rate_div {
 
     rating {