diff --git a/.gitignore b/.gitignore
index 7782e247adf6d07488035cd2c6d34d7cb396da0a..4c8aee9f16ba354c345e654dc17c8510b68420f5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@
 /mobile/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver
 /mobile/assets/audio_prueba.mp3
 .vscode/settings.json
+web/.env
diff --git a/backend/src/admin/admin.module.ts b/backend/src/admin/admin.module.ts
index 59cc1c9007b2936d80be60b8b761415750395c74..0b35fe7f5093acdb01ec9566c382e68ddf2c5e08 100644
--- a/backend/src/admin/admin.module.ts
+++ b/backend/src/admin/admin.module.ts
@@ -7,11 +7,12 @@ import { Town } from 'src/town/entities/town.entity';
 import { AuthAdminService } from 'src/auth/admin/authAdmin.service';
 import { JwtService } from '@nestjs/jwt';
 import { EncryptionService } from 'src/auth/encryption/encryption.service';
+import { AdminResetCode } from 'src/auth/admin/entitites/admin-reset-code.entity';
 
 @Module({
   controllers: [AdminController],
   providers: [AdminService, AuthAdminService, JwtService, EncryptionService],
-  imports: [TypeOrmModule.forFeature([Admin, Town])],
+  imports: [TypeOrmModule.forFeature([Admin, Town, AdminResetCode])],
   exports: [AdminService],
 })
 export class AdminModule {}
diff --git a/backend/src/admin/admin.service.ts b/backend/src/admin/admin.service.ts
index 395962f7c60b0ca1d1e29145f4b85fe46944dab6..cd9e89d5e93740a4e1e331f7453bf94a9845e4e0 100644
--- a/backend/src/admin/admin.service.ts
+++ b/backend/src/admin/admin.service.ts
@@ -29,23 +29,29 @@ export class AdminService {
     }
   }
 
+  async adminExists(email: string): Promise<boolean> {
+    const admin = await this.adminRepository.findOneBy({ email });
+    if (admin) return true;
+    else return false;
+  }
+
   async updatePassword(email: string, password: string) {
     await this.adminRepository.update({ email }, { password });
   }
 
-  async findAllByTown(idTown : number) : Promise<GetAdminDto[]> {
+  async findAllByTown(idTown: number): Promise<GetAdminDto[]> {
     const res: any[] = await this.adminRepository
       .createQueryBuilder('admin')
       .leftJoinAndSelect('admin.idTown', 'town')
       .where('admin.idTown = :idTown', { idTown: idTown })
       .getMany();
-    const admins: GetAdminDto[] = res.map((admin) :GetAdminDto => {
+    const admins: GetAdminDto[] = res.map((admin): GetAdminDto => {
       return {
         email: admin.email,
         idTown: admin.idTown.townId,
         name: admin.name,
         lastName: admin.lastName,
-        status: admin.status
+        status: admin.status,
       };
     });
     return admins;
diff --git a/backend/src/admin/entities/admin.entity.ts b/backend/src/admin/entities/admin.entity.ts
index e5f847db9bad4bbcb2da7218da9435b339da50f3..78d90ff749ace982182c1bb7b493f70ada639f5c 100644
--- a/backend/src/admin/entities/admin.entity.ts
+++ b/backend/src/admin/entities/admin.entity.ts
@@ -1,7 +1,8 @@
+import { AdminResetCode } from 'src/auth/admin/entitites/admin-reset-code.entity';
 import { ADMIN_ROLE } from 'src/shared/enum/admin-role.enum';
 import { UserStatus } from 'src/shared/enum/user-status.enum';
 import { Town } from 'src/town/entities/town.entity';
-import { Entity, Column, PrimaryColumn, JoinColumn, ManyToOne } from 'typeorm';
+import { Entity, Column, PrimaryColumn, JoinColumn, ManyToOne, OneToMany } from 'typeorm';
 
 @Entity()
 export class Admin {
@@ -34,4 +35,7 @@ export class Admin {
     default: 'active',
   })
   status: UserStatus = UserStatus.ACTIVE;
+
+  @OneToMany(() => AdminResetCode, (resetCode) => resetCode.admin)
+  resetCodes: AdminResetCode[];
 }
diff --git a/backend/src/app.module.ts b/backend/src/app.module.ts
index 4d8145bd3159c15e263a6c9195d2e0d45787eb7d..81fa18fa862dfe72676ce62934dfd92a67cd12f3 100644
--- a/backend/src/app.module.ts
+++ b/backend/src/app.module.ts
@@ -36,6 +36,7 @@ import { EmailService } from './email/email.service';
 import { UserResetCode } from './auth/user/entities/user-reset-code.entity';
 import { MailerModule } from '@nestjs-modules/mailer';
 import { MailConstants } from './constants/mail.constants';
+import { AdminResetCode } from './auth/admin/entitites/admin-reset-code.entity';
 import { UserConfirmCode } from './auth/user/entities/user-confirm-code.entity';
 
 @Module({
@@ -63,6 +64,7 @@ import { UserConfirmCode } from './auth/user/entities/user-confirm-code.entity';
         TravelPlace,
         Visited,
         UserResetCode,
+        AdminResetCode,
         UserConfirmCode,
       ],
       synchronize: DbConstants.DB_SYNC,
diff --git a/backend/src/auth/admin/authAdmin.module.ts b/backend/src/auth/admin/authAdmin.module.ts
index 8714d7afcd6fb48ddb869030381bc1d1af6703aa..19222fe3483cff3c52d70c767f255f63633bd5f1 100644
--- a/backend/src/auth/admin/authAdmin.module.ts
+++ b/backend/src/auth/admin/authAdmin.module.ts
@@ -8,11 +8,13 @@ import { AdminService } from 'src/admin/admin.service';
 import { JwtService } from '@nestjs/jwt';
 import { AuthAdminGuard } from './authAdmin.guard';
 import { Town } from 'src/town/entities/town.entity';
+import { AdminResetCode } from './entitites/admin-reset-code.entity';
+import { EmailService } from 'src/email/email.service';
 
 @Module({
   controllers: [AuthAdminController],
-  providers: [AuthAdminService, AdminService, JwtService, EncryptionService, AuthAdminGuard],
-  imports: [TypeOrmModule.forFeature([Admin, Town])],
+  providers: [AuthAdminService, AdminService, JwtService, EncryptionService, AuthAdminGuard, EmailService],
+  imports: [TypeOrmModule.forFeature([Admin, Town, AdminResetCode])],
   exports: [AuthAdminService],
 })
 export class AuthAdminModule {}
diff --git a/backend/src/auth/admin/authAdmin.service.ts b/backend/src/auth/admin/authAdmin.service.ts
index c11613a44a99bfa590e2159b75c1a17d2302c73e..6994cedc2434a7548b3d68270fc8b422b33c6aa2 100644
--- a/backend/src/auth/admin/authAdmin.service.ts
+++ b/backend/src/auth/admin/authAdmin.service.ts
@@ -10,10 +10,16 @@ import { Admin } from 'src/admin/entities/admin.entity';
 import { ADMIN_ROLE } from 'src/shared/enum/admin-role.enum';
 import { PayloadJwtDto } from 'src/shared/dto/payload-jwt.dto';
 import { UpdatePwdDto } from '../user/dto/update-pwd.dto';
+import { randomInt } from 'crypto';
+import { InjectRepository } from '@nestjs/typeorm';
+import { AdminResetCode } from './entitites/admin-reset-code.entity';
+import { Repository } from 'typeorm';
+import { AdminResetPasswordDto } from './dto/admin-reset-password.dto';
 
 @Injectable()
 export class AuthAdminService {
   constructor(
+    @InjectRepository(AdminResetCode) private adminResetCodeRepository: Repository<AdminResetCode>,
     private adminService: AdminService,
     private jwtService: JwtService,
     private encryptionService: EncryptionService,
@@ -26,6 +32,9 @@ export class AuthAdminService {
     };
     const hashedPwd = await this.encryptionService.hashPassword(createAdminDto.password);
     createAdminDto.password = hashedPwd;
+    if (await this.adminService.adminExists(createAdminDto.email)) {
+      throw new HttpException('Admin already exists', HttpStatus.UNAUTHORIZED);
+    }
     await this.adminService.create(createAdminDto);
 
     const adminSigninResDto: AdminSigninResDto = await this.signIn(loginAdminDto);
@@ -69,4 +78,42 @@ export class AuthAdminService {
     const hashedPwd = await this.encryptionService.hashPassword(updatePwdDto.newPassword);
     await this.adminService.updatePassword(email, hashedPwd);
   }
+
+  async getResetPasswordCode(email: string): Promise<string> {
+    const admin: Admin = await this.adminService.findOne(email);
+    if (!admin) throw new UnauthorizedException('Invalid email');
+
+    const resetCode: string = randomInt(100000, 999999).toString();
+
+    const expirationDate: Date = new Date();
+    expirationDate.setMinutes(expirationDate.getMinutes() + 10);
+
+    const existUserCode: AdminResetCode[] = await this.adminResetCodeRepository.findBy({
+      admin: admin,
+      code: resetCode,
+    });
+
+    if (existUserCode.length > 0) {
+      await this.adminResetCodeRepository.delete(existUserCode[0].id);
+    }
+    await this.adminResetCodeRepository.save({ admin, code: resetCode, expirationDate });
+    return resetCode;
+  }
+
+  async resetPassword(adminResetPasswordDto: AdminResetPasswordDto): Promise<void> {
+    const admin: Admin = await this.adminService.findOne(adminResetPasswordDto.email);
+    if (!admin) throw new UnauthorizedException('Invalid email');
+
+    const adminResetCode: AdminResetCode[] = await this.adminResetCodeRepository.findBy({
+      admin: admin,
+      code: adminResetPasswordDto.resetCode,
+    });
+
+    if (adminResetCode.length === 0) throw new UnauthorizedException('Invalid code');
+    if (adminResetCode[0].expirationDate < new Date()) throw new UnauthorizedException('Code expired');
+
+    const hashedPwd = await this.encryptionService.hashPassword(adminResetPasswordDto.newPassword);
+    await this.adminService.updatePassword(adminResetPasswordDto.email, hashedPwd);
+    await this.adminResetCodeRepository.delete(adminResetCode[0].id);
+  }
 }
diff --git a/backend/src/auth/admin/authAdmincontroller.ts b/backend/src/auth/admin/authAdmincontroller.ts
index 20ebd5a71370fb66eb3a1828b14c7072f0972785..2accf32dff13921b64992b75313acbae4b517e50 100644
--- a/backend/src/auth/admin/authAdmincontroller.ts
+++ b/backend/src/auth/admin/authAdmincontroller.ts
@@ -9,11 +9,17 @@ import { ADMIN_ROLE, ADMIN_ROLES, SUPERADMIN_ROLES } from 'src/shared/enum/admin
 import { AuthAdminGuard } from './authAdmin.guard';
 import { UpdatePwdDto } from '../user/dto/update-pwd.dto';
 import { CustomAdminRequest } from './interface/customAdminReq';
+import { AdminRequestCodeBody, AdminResetPasswordBody } from './dto/admin-reset-password.dto';
+import { GetResetCode } from './dto/get-reset-code.dto';
+import { EmailService } from 'src/email/email.service';
 
 @Controller()
 @ApiTags('Create admin account and sign in as admin')
 export class AuthAdminController {
-  constructor(private readonly authAdminService: AuthAdminService) {}
+  constructor(
+    private readonly authAdminService: AuthAdminService,
+    private readonly mailService: EmailService,
+  ) {}
 
   @ApiBody({ type: CreateAdminDto })
   @ApiCreatedResponse({
@@ -29,13 +35,14 @@ export class AuthAdminController {
   @Roles(SUPERADMIN_ROLES)
   @Post('admin/signup')
   @ApiBearerAuth('jwt')
+  @ApiUnauthorizedResponse()
   async signUp(@Body() createAdminDto: CreateAdminDto) {
     try {
       createAdminDto.role = ADMIN_ROLE.ADMIN;
       const accessToken = await this.authAdminService.signUp(createAdminDto);
       return { token: accessToken };
     } catch (e) {
-      return e;
+      throw e;
     }
   }
   @ApiBody({ type: LoginAdminDto })
@@ -61,4 +68,21 @@ export class AuthAdminController {
     const email = req.admin.email;
     return this.authAdminService.changePassword(email, updatePwdDto);
   }
+
+  @ApiBody({ type: AdminResetPasswordBody })
+  @Post('admin/reset-password')
+  async resetPassword(@Body() resetPasswordDto: AdminResetPasswordBody) {
+    return this.authAdminService.resetPassword(resetPasswordDto);
+  }
+
+  @ApiBody({ type: AdminRequestCodeBody })
+  @Post('admin/get-reset-code')
+  async getResetCode(@Body() resetPasswordInfo: GetResetCode) {
+    try {
+      const code = await this.authAdminService.getResetPasswordCode(resetPasswordInfo.email);
+      await this.mailService.sendResetPasswordEmail(resetPasswordInfo.email, code);
+    } catch (e) {
+      throw e;
+    }
+  }
 }
diff --git a/backend/src/auth/admin/dto/admin-reset-password.dto.ts b/backend/src/auth/admin/dto/admin-reset-password.dto.ts
new file mode 100644
index 0000000000000000000000000000000000000000..37e830c3b54df6a3aa1b168f3bbaca8eaf98d874
--- /dev/null
+++ b/backend/src/auth/admin/dto/admin-reset-password.dto.ts
@@ -0,0 +1,21 @@
+import { ApiProperty } from '@nestjs/swagger';
+
+export interface AdminResetPasswordDto {
+  email: string;
+  resetCode: string;
+  newPassword: string;
+}
+
+export class AdminResetPasswordBody {
+  @ApiProperty()
+  email: string;
+  @ApiProperty()
+  resetCode: string;
+  @ApiProperty()
+  newPassword: string;
+}
+
+export class AdminRequestCodeBody {
+  @ApiProperty()
+  email: string;
+}
diff --git a/backend/src/auth/admin/dto/get-reset-code.dto.ts b/backend/src/auth/admin/dto/get-reset-code.dto.ts
new file mode 100644
index 0000000000000000000000000000000000000000..756126a57e242b3ef09fb476d37c627e35b95420
--- /dev/null
+++ b/backend/src/auth/admin/dto/get-reset-code.dto.ts
@@ -0,0 +1,3 @@
+export interface GetResetCode {
+  email: string;
+}
diff --git a/backend/src/auth/admin/entitites/admin-reset-code.entity.ts b/backend/src/auth/admin/entitites/admin-reset-code.entity.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3f8593b3c7b60c38ae43cc7d8034f3db1033d343
--- /dev/null
+++ b/backend/src/auth/admin/entitites/admin-reset-code.entity.ts
@@ -0,0 +1,17 @@
+import { Admin } from 'src/admin/entities/admin.entity';
+import { Column, Entity, ManyToOne, PrimaryGeneratedColumn } from 'typeorm';
+
+@Entity()
+export class AdminResetCode {
+  @PrimaryGeneratedColumn()
+  id: number;
+
+  @ManyToOne(() => Admin, (admin) => admin.resetCodes)
+  admin: Admin;
+
+  @Column()
+  code: string;
+
+  @Column()
+  expirationDate: Date;
+}
diff --git a/backend/src/category/category.module.ts b/backend/src/category/category.module.ts
index 403cc8879a3822cb9dfde37558c35ae21196fb7a..8ed00071a7ee680a5eeef7c73632c50f45a198d8 100644
--- a/backend/src/category/category.module.ts
+++ b/backend/src/category/category.module.ts
@@ -9,11 +9,12 @@ import { EncryptionService } from 'src/auth/encryption/encryption.service';
 import { AdminService } from 'src/admin/admin.service';
 import { Admin } from 'src/admin/entities/admin.entity';
 import { Town } from 'src/town/entities/town.entity';
+import { AdminResetCode } from 'src/auth/admin/entitites/admin-reset-code.entity';
 
 @Module({
   controllers: [CategoryController],
   providers: [CategoryService, AuthAdminService, JwtService, EncryptionService, AdminService],
-  imports: [TypeOrmModule.forFeature([Category, Admin, Town])],
+  imports: [TypeOrmModule.forFeature([Category, Admin, Town, AdminResetCode])],
   exports: [CategoryService],
 })
 export class CategoryModule {}
diff --git a/backend/src/database-seeder/database-seeder.module.ts b/backend/src/database-seeder/database-seeder.module.ts
index f9c5fb36ef36e39196bac9b44cb5e71255b6ef13..0624ae92733677dfb24ab2c065c7f87853be61ae 100644
--- a/backend/src/database-seeder/database-seeder.module.ts
+++ b/backend/src/database-seeder/database-seeder.module.ts
@@ -1,7 +1,6 @@
 import { Module } from '@nestjs/common';
 import { TypeOrmModule } from '@nestjs/typeorm';
 import { DatabaseSeederService } from './database-seeder.service';
-
 import { State } from 'src/state/entities/state.entity';
 import { StateService } from 'src/state/state.service';
 import { Town } from 'src/town/entities/town.entity';
@@ -21,6 +20,7 @@ import { PlaceTraduction } from 'src/place/entities/place-traduction.entity';
 import { PointOfInterestTraduction } from 'src/pointOfInterest/entities/PointOfInterestTraduction.entity';
 import { CategoryService } from 'src/category/category.service';
 import { Category } from 'src/category/entities/category.entity';
+import { AdminResetCode } from 'src/auth/admin/entitites/admin-reset-code.entity';
 
 @Module({
   providers: [
@@ -48,6 +48,7 @@ import { Category } from 'src/category/entities/category.entity';
       PlaceTraduction,
       PointOfInterestTraduction,
       Category,
+      AdminResetCode,
     ]),
   ],
 })
diff --git a/backend/src/database-seeder/database-seeder.service.ts b/backend/src/database-seeder/database-seeder.service.ts
index 522177fc5ff96cfa311b59b79c02f880492d0e39..2d6e0d961cb571da27ba97058b7c0c0abf525759 100644
--- a/backend/src/database-seeder/database-seeder.service.ts
+++ b/backend/src/database-seeder/database-seeder.service.ts
@@ -119,7 +119,6 @@ export class DatabaseSeederService implements OnModuleInit {
 
   async onModuleInit() {
     await this.insertStates();
-    await this.insertTowns();
     await this.insertSuperAdmin();
     await this.insertCategories();
   }
diff --git a/backend/src/place/place.module.ts b/backend/src/place/place.module.ts
index dd524b38ef68f75822090abc0baf306984eeee58..31f722214a648554fff4ed8f703ab3f75afb2449 100644
--- a/backend/src/place/place.module.ts
+++ b/backend/src/place/place.module.ts
@@ -15,6 +15,7 @@ import { AdminService } from 'src/admin/admin.service';
 import { JwtService } from '@nestjs/jwt';
 import { EncryptionService } from 'src/auth/encryption/encryption.service';
 import { Admin } from 'src/admin/entities/admin.entity';
+import { AdminResetCode } from 'src/auth/admin/entitites/admin-reset-code.entity';
 
 @Module({
   controllers: [PlaceController],
@@ -29,7 +30,16 @@ import { Admin } from 'src/admin/entities/admin.entity';
     TownService,
   ],
   imports: [
-    TypeOrmModule.forFeature([Place, AvailableDate, PlaceTraduction, Town, TownTraduction, State, Admin]),
+    TypeOrmModule.forFeature([
+      Place,
+      AvailableDate,
+      PlaceTraduction,
+      Town,
+      TownTraduction,
+      State,
+      Admin,
+      AdminResetCode,
+    ]),
     TypeOrmModule,
   ],
 })
diff --git a/backend/src/pointOfInterest/PointOfInterest.module.ts b/backend/src/pointOfInterest/PointOfInterest.module.ts
index aa78034b1c9aae1bd06baaf714ec5c86dc5db0eb..3f5b0101aa0dc4c56dd6c8017806779a52a7d9ad 100644
--- a/backend/src/pointOfInterest/PointOfInterest.module.ts
+++ b/backend/src/pointOfInterest/PointOfInterest.module.ts
@@ -14,6 +14,7 @@ import { JwtService } from '@nestjs/jwt';
 import { EncryptionService } from 'src/auth/encryption/encryption.service';
 import { AdminService } from 'src/admin/admin.service';
 import { Admin } from 'src/admin/entities/admin.entity';
+import { AdminResetCode } from 'src/auth/admin/entitites/admin-reset-code.entity';
 
 @Module({
   controllers: [PointOfInterestController],
@@ -27,6 +28,7 @@ import { Admin } from 'src/admin/entities/admin.entity';
       PlaceTraduction,
       Town,
       Admin,
+      AdminResetCode,
     ]),
   ],
 })
diff --git a/backend/src/town/town.module.ts b/backend/src/town/town.module.ts
index 401bac47b4a71849a97ce3ae00c633cb95c19c3e..a15fec6573a782426042a7f8eae4c8a47f556665 100644
--- a/backend/src/town/town.module.ts
+++ b/backend/src/town/town.module.ts
@@ -11,11 +11,12 @@ import { AdminService } from 'src/admin/admin.service';
 import { JwtService } from '@nestjs/jwt';
 import { EncryptionService } from 'src/auth/encryption/encryption.service';
 import { Admin } from 'src/admin/entities/admin.entity';
+import { AdminResetCode } from 'src/auth/admin/entitites/admin-reset-code.entity';
 
 @Module({
   controllers: [TownController],
   providers: [TownService, StateService, TypeOrmModule, AuthAdminService, AdminService, JwtService, EncryptionService],
-  imports: [TypeOrmModule.forFeature([Town, State, TownTraduction, Admin]), TypeOrmModule],
+  imports: [TypeOrmModule.forFeature([Town, State, TownTraduction, Admin, AdminResetCode]), TypeOrmModule],
   exports: [TownService],
 })
 export class TownModule {}
diff --git a/web/package-lock.json b/web/package-lock.json
index cfe258b941830817d6518c6cd3beccbf6bf541dc..32123da503259c7105c1e7e65dd183bf6e896a9f 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -15,17 +15,20 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.5.2",
+        "@types/mapbox-gl": "^3.4.0",
         "@types/node": "^16.18.87",
         "@types/react": "^18.2.64",
         "@types/react-dom": "^18.2.21",
         "@vis.gl/react-google-maps": "^1.1.0",
         "axios": "^1.6.8",
         "buffer": "^6.0.3",
+        "mapbox-gl": "^3.7.0",
         "react": "^18.2.0",
         "react-data-table-component": "^7.6.2",
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",
         "react-hook-form": "^7.51.2",
+        "react-map-gl": "^7.1.7",
         "react-pro-sidebar": "^1.1.0",
         "react-router-dom": "^6.22.3",
         "react-scripts": "5.0.1",
@@ -3447,6 +3450,68 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-supported": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-3.0.0.tgz",
+      "integrity": "sha512-2XghOwu16ZwPJLOFVuIOaLbN0iKMn867evzXFyf0P22dqugezfJwLmdanAgU25ITvz1TvOfVP4jsDImlDJzcWg=="
+    },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+    },
+    "node_modules/@mapbox/tiny-sdf": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
+      "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
+    },
+    "node_modules/@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "dependencies": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "node_modules/@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@maplibre/maplibre-gl-style-spec": {
+      "version": "19.3.3",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.3.3.tgz",
+      "integrity": "sha512-cOZZOVhDSulgK0meTsTkmNXb1ahVvmTmWmfx9gRBwc6hq98wS9JP35ESIoNq3xqEan+UN+gn8187Z6E4NKhLsw==",
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/unitbezier": "^0.0.1",
+        "json-stringify-pretty-compact": "^3.0.0",
+        "minimist": "^1.2.8",
+        "rw": "^1.3.3",
+        "sort-object": "^3.0.3"
+      },
+      "bin": {
+        "gl-style-format": "dist/gl-style-format.mjs",
+        "gl-style-migrate": "dist/gl-style-migrate.mjs",
+        "gl-style-validate": "dist/gl-style-validate.mjs"
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -4339,6 +4404,19 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.14",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
+    },
+    "node_modules/@types/geojson-vt": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/@types/geojson-vt/-/geojson-vt-3.2.5.tgz",
+      "integrity": "sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/google.maps": {
       "version": "3.55.11",
       "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.55.11.tgz",
@@ -4410,6 +4488,29 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "node_modules/@types/mapbox__point-geometry": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
+      "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA=="
+    },
+    "node_modules/@types/mapbox__vector-tile": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz",
+      "integrity": "sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==",
+      "dependencies": {
+        "@types/geojson": "*",
+        "@types/mapbox__point-geometry": "*",
+        "@types/pbf": "*"
+      }
+    },
+    "node_modules/@types/mapbox-gl": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-3.4.0.tgz",
+      "integrity": "sha512-tbn++Mm94H1kE7W6FF0oVC9rMXHVzDDNUbS7KfBMRF8NV/8csFi+67ytKcZJ4LsrpsJ+8MC6Os6ZinEDCsrunw==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -4433,6 +4534,11 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
     },
+    "node_modules/@types/pbf": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
+      "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA=="
+    },
     "node_modules/@types/prettier": {
       "version": "2.7.3",
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
@@ -4545,6 +4651,14 @@
       "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==",
       "peer": true
     },
+    "node_modules/@types/supercluster": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
+      "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.9",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz",
@@ -5201,6 +5315,14 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
@@ -5402,6 +5524,14 @@
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
     },
+    "node_modules/assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -6085,6 +6215,23 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/bytewise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bytewise/-/bytewise-1.1.0.tgz",
+      "integrity": "sha512-rHuuseJ9iQ0na6UDhnrRVDh8YnWVlU6xM3VH6q/+yHDeUH2zIhUzP+2/h3LIrhLDBtTqzWpE3p3tP/boefskKQ==",
+      "dependencies": {
+        "bytewise-core": "^1.2.2",
+        "typewise": "^1.0.3"
+      }
+    },
+    "node_modules/bytewise-core": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/bytewise-core/-/bytewise-core-1.2.3.tgz",
+      "integrity": "sha512-nZD//kc78OOxeYtRlVk8/zXqTB4gf/nlguL1ggWA8FuchMyOxcyHR4QPQZMUmA7czC+YnaBrPUCubqAWe50DaA==",
+      "dependencies": {
+        "typewise-core": "^1.2"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -6207,6 +6354,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/cheap-ruler": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cheap-ruler/-/cheap-ruler-4.0.0.tgz",
+      "integrity": "sha512-0BJa8f4t141BYKQyn9NSQt1PguFQXMXwZiA5shfoaBYHAb2fFk2RAX+tiWMoQU+Agtzt3mdt0JtuyshAXqZ+Vw=="
+    },
     "node_modules/check-types": {
       "version": "11.2.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.3.tgz",
@@ -6839,6 +6991,11 @@
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
       "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="
     },
+    "node_modules/csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+    },
     "node_modules/cssdb": {
       "version": "7.11.1",
       "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.11.1.tgz",
@@ -7376,6 +7533,11 @@
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
+    "node_modules/earcut": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.0.tgz",
+      "integrity": "sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg=="
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -8467,6 +8629,17 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -9033,6 +9206,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/geojson-vt": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.2.tgz",
+      "integrity": "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A=="
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -9099,6 +9277,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -9231,6 +9422,11 @@
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
     },
+    "node_modules/grid-index": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -9902,6 +10098,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -10038,6 +10242,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -10206,6 +10421,14 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -12409,6 +12632,11 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
     },
+    "node_modules/json-stringify-pretty-compact": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-3.0.0.tgz",
+      "integrity": "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA=="
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -12475,6 +12703,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -12703,6 +12936,41 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/mapbox-gl": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.7.0.tgz",
+      "integrity": "sha512-dCbVyH1uGobwv6f4QKRv2Z2wuVT/RmspsudK3sTxGRFxZi6Pd2P9axdbVyZpmGddCAREy44pHhvzvO0qgpdKAg==",
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^3.0.0",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^2.0.6",
+        "@mapbox/unitbezier": "^0.0.1",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "@types/geojson": "^7946.0.14",
+        "@types/geojson-vt": "^3.2.5",
+        "@types/mapbox__point-geometry": "^0.1.4",
+        "@types/mapbox__vector-tile": "^1.3.4",
+        "@types/pbf": "^3.0.5",
+        "@types/supercluster": "^7.1.3",
+        "cheap-ruler": "^4.0.0",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^3.0.0",
+        "geojson-vt": "^4.0.2",
+        "gl-matrix": "^3.4.3",
+        "grid-index": "^1.1.0",
+        "kdbush": "^4.0.2",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.2.1",
+        "potpack": "^2.0.0",
+        "quickselect": "^3.0.0",
+        "serialize-to-js": "^3.1.2",
+        "supercluster": "^8.0.1",
+        "tinyqueue": "^3.0.0",
+        "vt-pbf": "^3.1.3"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -12939,6 +13207,11 @@
         "multicast-dns": "cli.js"
       }
     },
+    "node_modules/murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -13471,6 +13744,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/pbf": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.3.0.tgz",
+      "integrity": "sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==",
+      "dependencies": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -14841,6 +15126,11 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/potpack": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
+      "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -14938,6 +15228,11 @@
       "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
       "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
     },
+    "node_modules/protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -15023,6 +15318,11 @@
         }
       ]
     },
+    "node_modules/quickselect": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g=="
+    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -15299,6 +15599,29 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-map-gl": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/react-map-gl/-/react-map-gl-7.1.7.tgz",
+      "integrity": "sha512-mwjc0obkBJOXCcoXQr3VoLqmqwo9vS4bXfbGsdxXzEgVCv/PM0v+1QggL7W0d/ccIy+VCjbXNlGij+PENz6VNg==",
+      "dependencies": {
+        "@maplibre/maplibre-gl-style-spec": "^19.2.1",
+        "@types/mapbox-gl": ">=1.0.0"
+      },
+      "peerDependencies": {
+        "mapbox-gl": ">=1.13.0",
+        "maplibre-gl": ">=1.13.0",
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      },
+      "peerDependenciesMeta": {
+        "mapbox-gl": {
+          "optional": true
+        },
+        "maplibre-gl": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-pro-sidebar": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/react-pro-sidebar/-/react-pro-sidebar-1.1.0.tgz",
@@ -15673,6 +15996,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "node_modules/resolve-url-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
@@ -15864,6 +16195,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "node_modules/safe-array-concat": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.0.tgz",
@@ -16100,6 +16436,14 @@
         "randombytes": "^2.1.0"
       }
     },
+    "node_modules/serialize-to-js": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/serialize-to-js/-/serialize-to-js-3.1.2.tgz",
+      "integrity": "sha512-owllqNuDDEimQat7EPG0tH7JjO090xKNzUtYz6X+Sk2BXDnOCilDdNLwjWeFywG9xkJul1ULvtUQa9O4pUaY0w==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
@@ -16214,6 +16558,20 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/set-value": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -16297,6 +16655,38 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sort-asc": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.2.0.tgz",
+      "integrity": "sha512-umMGhjPeHAI6YjABoSTrFp2zaBtXBej1a0yKkuMUyjjqu6FJsTF+JYwCswWDg+zJfk/5npWUUbd33HH/WLzpaA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-desc": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.2.0.tgz",
+      "integrity": "sha512-NqZqyvL4VPW+RAxxXnB8gvE1kyikh8+pR+T+CXLksVRN9eiQqkQlPwqWYU0mF9Jm7UnctShlxLyAt1CaBOTL1w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-object": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-3.0.3.tgz",
+      "integrity": "sha512-nK7WOY8jik6zaG9CRwZTaD5O7ETWDLZYMM12pqY8htll+7dYeqGfEUPcUBHOpSJg2vJOrvFIY2Dl5cX2ih1hAQ==",
+      "dependencies": {
+        "bytewise": "^1.1.0",
+        "get-value": "^2.0.2",
+        "is-extendable": "^0.1.1",
+        "sort-asc": "^0.2.0",
+        "sort-desc": "^0.2.0",
+        "union-value": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -16389,6 +16779,40 @@
         "wbuf": "^1.7.3"
       }
     },
+    "node_modules/split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "dependencies": {
+        "extend-shallow": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -16931,6 +17355,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -17276,6 +17708,11 @@
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
       "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
     },
+    "node_modules/tinyqueue": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+      "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -17541,6 +17978,19 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/typewise": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typewise/-/typewise-1.0.3.tgz",
+      "integrity": "sha512-aXofE06xGhaQSPzt8hlTY+/YWQhm9P0jYUp1f2XtmW/3Bk0qzXcyFWAtPoo2uTGQj1ZwbDuSyuxicq+aDo8lCQ==",
+      "dependencies": {
+        "typewise-core": "^1.2.0"
+      }
+    },
+    "node_modules/typewise-core": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/typewise-core/-/typewise-core-1.2.0.tgz",
+      "integrity": "sha512-2SCC/WLzj2SbUwzFOzqMCkz5amXLlxtJqDKTICqg30x+2DZxcfZN2MvQZmGfXWKNWaKK9pBPsvkcwv8bF/gxKg=="
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -17596,6 +18046,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/union-value": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
+      "dependencies": {
+        "arr-union": "^3.1.0",
+        "get-value": "^2.0.6",
+        "is-extendable": "^0.1.1",
+        "set-value": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/unique-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
@@ -17749,6 +18213,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vt-pbf": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+      "dependencies": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
diff --git a/web/package.json b/web/package.json
index d6ec7c7b90bca281a0926ca69ddfbf0e0cf31336..11e4fac2eea231da818bd0aae8b3df50e5797641 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,17 +10,20 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/mapbox-gl": "^3.4.0",
     "@types/node": "^16.18.87",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "@vis.gl/react-google-maps": "^1.1.0",
     "axios": "^1.6.8",
     "buffer": "^6.0.3",
+    "mapbox-gl": "^3.7.0",
     "react": "^18.2.0",
     "react-data-table-component": "^7.6.2",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.51.2",
+    "react-map-gl": "^7.1.7",
     "react-pro-sidebar": "^1.1.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 043cee412f94a3ecfe87c9388c834f89e1a0c1bc..0c54f7ff25cb420f58ed174bc56b125909e14ef9 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,9 +1,9 @@
-import { RouterProvider } from 'react-router-dom';
-import './App.css';
-import { AuthContextProvider } from './context/auth_context';
-import { MessageContextProvider } from './context/message_context';
-import { router } from './router/router';
-import { ToastContainer } from 'react-toastify';
+import { RouterProvider } from "react-router-dom";
+import "./App.css";
+import { AuthContextProvider } from "./context/auth_context";
+import { MessageContextProvider } from "./context/message_context";
+import { router } from "./router/router";
+import { ToastContainer } from "react-toastify";
 
 
 function App() {
@@ -11,17 +11,17 @@ function App() {
     <div className="App">
       <AuthContextProvider>
         <MessageContextProvider>
-          <RouterProvider router={router}/>
+          <RouterProvider router={router} />
         </MessageContextProvider>
       </AuthContextProvider>
       <ToastContainer
-            position='bottom-right'
-            autoClose = {1000}
-            hideProgressBar = {true}
-            closeOnClick
-            rtl={false}
-            pauseOnFocusLoss
-          />
+        position="bottom-right"
+        autoClose={1000}
+        hideProgressBar={true}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+      />
     </div>
   );
 }
diff --git a/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx b/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx
index 9a2e93ccf5e6504b728bd85ffd5ced78cdf2b8ca..41a064917c6008a843c71e40e8b164f291b4f847 100644
--- a/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx
+++ b/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx
@@ -1,18 +1,24 @@
 import { faWindowClose } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import "./assets/css/styles.css";
-import { MapComponent, Position } from "../../map/map";
+import { MapGoogleComponent, Position } from "../../map/map_google";
 import { usePlace } from "../../../hooks/usePlace";
 import { languaguesList } from "../../../constants/languages";
 import { LoadingScreen } from "../../loading_screen/loading_screen";
 import { MultipleImagesDropzone } from "../../multiple_images_dropzone/multiple_images_dropzone";
-import { AvailableDays, availableDaysList, EmptyPlace, Place } from "../../../infraestructure/entities/place";
+import {
+  AvailableDays,
+  availableDaysList,
+  EmptyPlace,
+  Place,
+} from "../../../infraestructure/entities/place";
 import { Category } from "../../../infraestructure/entities/category";
-import { Geocoding } from "../../geocoding/geocoding";
+import { GeocodingGoogle } from "../../geocoding/geocoding_google";
 import { APIProvider } from "@vis.gl/react-google-maps";
-import { REACT_APP_GOOGLE_API_KEY } from "../../../constants/api_keys";
 import { LoadingSpinner } from "../../loading_spinner/loading_spinner";
+import { MapBoxComponent } from "../../map/map_mapbox";
+import { GeocodingMapbox } from "../../geocoding/geocoding_mapbox";
 
 interface props {
   setWindowVisibility: (visibility: boolean) => void;
@@ -23,7 +29,14 @@ interface props {
   form?: Place;
 }
 
-export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categoriesList, forceRenderList, isRegister, form}: props) => {
+export const AdminPanelPlaceRegister = ({
+  setWindowVisibility,
+  idTown,
+  categoriesList,
+  forceRenderList,
+  isRegister,
+  form,
+}: props) => {
   const {
     register,
     handleSubmit,
@@ -43,264 +56,350 @@ export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categories
     onSubmitRegister,
     onSubmitUpdate,
     clearErrors,
-    getValues
+    getValues,
   } = usePlace(forceRenderList, setWindowVisibility);
-  const [clickedCategories, setClickedCategories] = useState<boolean[]>(new Array(categoriesList.length).fill(false));  
+  const [clickedCategories, setClickedCategories] = useState<boolean[]>(
+    new Array(categoriesList.length).fill(false)
+  );
   const [isLoading, setIsLoading] = useState(false);
   const [actualPlace, setActualPlace] = useState<Place | null>(null);
-  const [openHourInput, setOpenHourInput] = useState('');
-  const [closeHourInput, setCloseHourInput] = useState('');
+  const [openHourInput, setOpenHourInput] = useState("");
+  const [closeHourInput, setCloseHourInput] = useState("");
 
   //Maps
   const [position, setPosition] = useState<Position | null>(null);
-  const [ isSearching , setIsSearching] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
 
   const onClickCategory = (idCategory: number) => {
     const index = categoriesId.indexOf(idCategory);
-    const indexList = categoriesList.findIndex(category => category.idCategory === idCategory);
-    const clickedCategoriesBackup = clickedCategories.map((clickedCategory, index)=> {
-      if(index === indexList){
-        return !clickedCategory;
-      }else{ 
-        return clickedCategory;
+    const indexList = categoriesList.findIndex(
+      (category) => category.idCategory === idCategory
+    );
+    const clickedCategoriesBackup = clickedCategories.map(
+      (clickedCategory, index) => {
+        if (index === indexList) {
+          return !clickedCategory;
+        } else {
+          return clickedCategory;
+        }
       }
-    })
-    if(index > -1){
-      setCategoriesId(
-        categoriesId.filter(cat => cat !== idCategory)
-      );
-    }else{
-      setCategoriesId(
-        [...categoriesId,
-          idCategory
-        ]
-      )
+    );
+    if (index > -1) {
+      setCategoriesId(categoriesId.filter((cat) => cat !== idCategory));
+    } else {
+      setCategoriesId([...categoriesId, idCategory]);
     }
     setClickedCategories(clickedCategoriesBackup);
-  }
+  };
 
   useEffect(() => {
     setIsLoading(true);
     const fetchData = async () => {
-      setValue('idTown', idTown);
+      setValue("idTown", idTown);
       if (!isRegister && form) {
         const placeGetted = await getPlaceById(form.idPlace || 0);
-        if(placeGetted){
+        if (placeGetted) {
           setActualPlace(placeGetted);
-          setValue('idPlace', placeGetted.idPlace);
-          setValue('name', placeGetted.name);
-          setValue('descriptions', placeGetted.descriptions);
-          setDescriptions(placeGetted.descriptions || ['', '']);
-          setValue('openAt', placeGetted.openAt);
-          setOpenHourInput(placeGetted.openAt < 10 ? `0${placeGetted.openAt}:00` : `${placeGetted.openAt}:00`);
-          setCloseHourInput(placeGetted.closeAt < 10 ? `0${placeGetted.closeAt}:00` : `${placeGetted.closeAt}:00`);
-          setValue('closeAt', placeGetted.closeAt);
-          setValue('available', placeGetted.available);
-          setAvailableDays(placeGetted.available); 
-          setPosition({latitude: Number(placeGetted.latitude), longitude: Number(placeGetted.longitude)});
-          setValue('address', placeGetted.address);
-          const clickedCategoriesBackup : boolean[] = [];
+          setValue("idPlace", placeGetted.idPlace);
+          setValue("name", placeGetted.name);
+          setValue("descriptions", placeGetted.descriptions);
+          setDescriptions(placeGetted.descriptions || ["", ""]);
+          setValue("openAt", placeGetted.openAt);
+          setOpenHourInput(
+            placeGetted.openAt < 10
+              ? `0${placeGetted.openAt}:00`
+              : `${placeGetted.openAt}:00`
+          );
+          setCloseHourInput(
+            placeGetted.closeAt < 10
+              ? `0${placeGetted.closeAt}:00`
+              : `${placeGetted.closeAt}:00`
+          );
+          setValue("closeAt", placeGetted.closeAt);
+          setValue("available", placeGetted.available);
+          setAvailableDays(placeGetted.available);
+          setPosition({
+            latitude: Number(placeGetted.latitude),
+            longitude: Number(placeGetted.longitude),
+          });
+          setValue("address", placeGetted.address);
+          const clickedCategoriesBackup: boolean[] = [];
           categoriesList.forEach((category) => {
-            if(placeGetted.categoriesId.indexOf(category.idCategory) > -1){
+            if (placeGetted.categoriesId.indexOf(category.idCategory) > -1) {
               clickedCategoriesBackup.push(true);
-            }else{
+            } else {
               clickedCategoriesBackup.push(false);
             }
-          }); 
+          });
           setClickedCategories(clickedCategoriesBackup);
           setCategoriesId(placeGetted.categoriesId);
         }
       } else {
-        setValue('available', availableDays, { shouldValidate: true });
+        setValue("available", availableDays, { shouldValidate: true });
       }
     };
     fetchData();
     setIsLoading(false);
-  },[]);
+  }, []);
 
   return (
     <div className="place_register_wrap">
       <div className="place_register_header">
         Registra el lugar
-        <FontAwesomeIcon icon={faWindowClose} className="close_btn"
-          onClick={() => setWindowVisibility(false)}/>
+        <FontAwesomeIcon
+          icon={faWindowClose}
+          className="close_btn"
+          onClick={() => setWindowVisibility(false)}
+        />
       </div>
       <div className="place_register_body">
-        {isLoading || (!isRegister && actualPlace===null)
-            ?
-              <LoadingScreen/>
-            :
-        <form onSubmit={handleSubmit(isRegister ? onSubmitRegister : onSubmitUpdate)}>
-          <div className="inputs_container">
-            <div className="input">
-              <div className="input_header">
-                Nombre del lugar
+        {isLoading || (!isRegister && actualPlace === null) ? (
+          <LoadingScreen />
+        ) : (
+          <form
+            onSubmit={handleSubmit(
+              isRegister ? onSubmitRegister : onSubmitUpdate
+            )}
+          >
+            <div className="inputs_container">
+              <div className="input">
+                <div className="input_header">Nombre del lugar</div>
+                <input type="text" {...register("name")} autoComplete="off" />
+                <p className="error">{errors.name?.message}</p>
               </div>
-              <input 
-                type="text"
-                {...register('name')}
-                autoComplete="off"
-              />
-              <p className="error">{errors.name?.message}</p>
-            </div>
 
-            <div className="input">
-              <div className="input_header">
-                Descripción del lugar
-                <select  name="language_description_select" onChange={(e) => setLanguageDescriptionIndexSelected(Number(e.target.value))}>
+              <div className="input">
+                <div className="input_header">
+                  Descripción del lugar
+                  <select
+                    name="language_description_select"
+                    onChange={(e) =>
+                      setLanguageDescriptionIndexSelected(
+                        Number(e.target.value)
+                      )
+                    }
+                  >
                     {languaguesList.map((language, index) => {
                       return (
-                        <option key={index} value={index}>{language}</option>
+                        <option key={index} value={index}>
+                          {language}
+                        </option>
                       );
                     })}
-                </select>
-              </div>
-              {
-                languaguesList.map((language, index) => {
-                    if(index===languageDescriptionIndexSelected){
-                      return (
-                        <textarea id={index.toString()} 
-                          className="place_description"
-                          value={descriptions[index]}
-                          key={language}
-                          onChange={(e) => {
-                            const updatedDescriptionsList = [...descriptions];
-                            updatedDescriptionsList[index] = e.target.value;
-                            setDescriptions(updatedDescriptionsList);
-                            setValue("descriptions", updatedDescriptionsList, {shouldValidate: true});
-                          }}
-                        />
+                  </select>
+                </div>
+                {languaguesList.map((language, index) => {
+                  if (index === languageDescriptionIndexSelected) {
+                    return (
+                      <textarea
+                        id={index.toString()}
+                        className="place_description"
+                        value={descriptions[index]}
+                        key={language}
+                        onChange={(e) => {
+                          const updatedDescriptionsList = [...descriptions];
+                          updatedDescriptionsList[index] = e.target.value;
+                          setDescriptions(updatedDescriptionsList);
+                          setValue("descriptions", updatedDescriptionsList, {
+                            shouldValidate: true,
+                          });
+                        }}
+                      />
                     );
-                    }
-                })
-              }
-              <p className="error">{errors.descriptions?.message}</p>
-            </div>
-
-            <div className="input">
-              <div className="input_header">
-                Horario
+                  }
+                })}
+                <p className="error">{errors.descriptions?.message}</p>
               </div>
-              <div className="input_body">
-                <div>
-                  Hora de apertura
-                  <input 
-                  type="time"
-                  autoComplete="off"
-                  value={openHourInput}
-                  onChange={(event) => {
-                    setOpenHourInput(event.target.value);
-                    updateTimeForm(event.target.value, true);
-                  }}
-                />
-                </div>
 
-                <div>
-                  Hora de cierre
-                  <input 
-                  type="time"
-                  autoComplete="off"
-                  value={closeHourInput}
-                  onChange={(event) => {
-                    setCloseHourInput(event.target.value);
-                    updateTimeForm(event.target.value, false);
-                  }}
-                />
+              <div className="input">
+                <div className="input_header">Horario</div>
+                <div className="input_body">
+                  <div>
+                    Hora de apertura
+                    <input
+                      type="time"
+                      autoComplete="off"
+                      value={openHourInput}
+                      onChange={(event) => {
+                        setOpenHourInput(event.target.value);
+                        updateTimeForm(event.target.value, true);
+                      }}
+                    />
+                  </div>
+
+                  <div>
+                    Hora de cierre
+                    <input
+                      type="time"
+                      autoComplete="off"
+                      value={closeHourInput}
+                      onChange={(event) => {
+                        setCloseHourInput(event.target.value);
+                        updateTimeForm(event.target.value, false);
+                      }}
+                    />
+                  </div>
                 </div>
-              </div>
-              <p className="error">{errors.openAt?.message || errors.closeAt?.message}</p>
-              Dias disponibles
-              <div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
-                <div>
-                  <select name="days_select" 
-                    onChange={(e) => {
-                      const selectedOption = availableDaysList[Number(e.target.value)];
-                      setAvailableDays(selectedOption.option);
-                      resetField('startDate');
-                      resetField('endDate');
-                      setValue('available', selectedOption.option,{shouldValidate:true});
-                    }}
-                  >
+                <p className="error">
+                  {errors.openAt?.message || errors.closeAt?.message}
+                </p>
+                Dias disponibles
+                <div
+                  style={{
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "center",
+                  }}
+                >
+                  <div>
+                    <select
+                      name="days_select"
+                      onChange={(e) => {
+                        const selectedOption =
+                          availableDaysList[Number(e.target.value)];
+                        setAvailableDays(selectedOption.option);
+                        resetField("startDate");
+                        resetField("endDate");
+                        setValue("available", selectedOption.option, {
+                          shouldValidate: true,
+                        });
+                      }}
+                    >
                       {availableDaysList.map((option, index) => {
                         return (
-                          <option key={index} selected={option.option===actualPlace?.available} value={index}>{option.name}</option>
+                          <option
+                            key={index}
+                            selected={option.option === actualPlace?.available}
+                            value={index}
+                          >
+                            {option.name}
+                          </option>
                         );
                       })}
-                  </select>
-                </div>
+                    </select>
+                  </div>
 
-                <div>
-                  {
-                    availableDays === AvailableDays.CUSTOM 
-                    &&
-                    <div style={{width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                  <div>
+                    {availableDays === AvailableDays.CUSTOM && (
+                      <div
+                        style={{
+                          width: "100%",
+                          display: "flex",
+                          justifyContent: "center",
+                          alignItems: "center",
+                        }}
+                      >
                         Inicio
                         <input
                           type="date"
-                          defaultValue={actualPlace?.startDate?.toString().substring(0,10)}
-                          {...register('startDate')}
+                          defaultValue={actualPlace?.startDate
+                            ?.toString()
+                            .substring(0, 10)}
+                          {...register("startDate")}
                         />
                         Cierre
                         <input
                           type="date"
-                          defaultValue={actualPlace?.endDate?.toString().substring(0,10)}
-                          {...register('endDate')}
+                          defaultValue={actualPlace?.endDate
+                            ?.toString()
+                            .substring(0, 10)}
+                          {...register("endDate")}
                         />
-                    </div>
-                    
-                  }
+                      </div>
+                    )}
+                  </div>
                 </div>
+                <p className="error">
+                  {errors.available?.message ||
+                    errors.startDate?.message ||
+                    errors.endDate?.message}
+                </p>
               </div>
-              <p className="error">{errors.available?.message || errors.startDate?.message || errors.endDate?.message}</p>
-            </div>
-            
-            <div className="input">
-              <div className="input_header">
-                Categorías
-              </div>
-              <div className="categories_cnt">
-                <div className="categories_grid">
-                  {
-                    categoriesList.map((category, index) => {
+
+              <div className="input">
+                <div className="input_header">Categorías</div>
+                <div className="categories_cnt">
+                  <div className="categories_grid">
+                    {categoriesList.map((category, index) => {
                       return (
-                        <div className="category_item" 
-                          onClick={() => onClickCategory(category.idCategory)} 
-                          style={clickedCategories[index] ? {border: '2px solid blue'} : {border: '1px solid black'}}
-                          >
-                            {category.nameES + "  " + category.idCategory}
+                        <div
+                          className="category_item"
+                          key={index}
+                          onClick={() => onClickCategory(category.idCategory)}
+                          style={
+                            clickedCategories[index]
+                              ? { border: "2px solid blue" }
+                              : { border: "1px solid black" }
+                          }
+                        >
+                          {category.nameES + "  " + category.idCategory}
                         </div>
                       );
-                    })
-                  }
+                    })}
+                  </div>
                 </div>
+                <p className="error">{errors.categoriesId?.message}</p>
               </div>
-              <p className="error">{errors.categoriesId?.message}</p>
-            </div>
 
-            <MultipleImagesDropzone setValue={setValue} imagesList={actualPlace?.imagesList}/>
-            <p className="error">{errors.imagesList?.message}</p>
-            <input type="submit"/>
-          </div>
+              <MultipleImagesDropzone
+                setValue={setValue}
+                imagesList={actualPlace?.imagesList}
+              />
+              <p className="error">{errors.imagesList?.message}</p>
+              <input type="submit" />
+            </div>
 
+            <div className="map_container">
+              <div className="google_map">
+                {/* Asegúrate de crear el archivo de variables de entorno (.env) en el directorio raíz e 
+                incluye la siguiente variable*/}
+                {/*
+                  USA LO SIGUIENTE SI DESEA USAR LOS MAPAS DE GOOGLE
 
-          <div className="map_container">
-            <div className="google_map">
-              <APIProvider apiKey={REACT_APP_GOOGLE_API_KEY}>
-                <Geocoding getValues={getValues} register={register} errors={errors} setLoading={setIsSearching} setPosition={setPosition}/>
-                {isSearching && <LoadingSpinner/>}
-                <div className="map_component">
-                  <MapComponent setValue={setValue} setIsLoading={setIsLoading} 
-                    position={position} setPosition={setPosition} clearErrors={clearErrors}/>
-                </div>
-              </APIProvider>
-            </div>
-            <div className="map_error_cnt">
-              <p className="error">{errors.latitude?.message}</p>
+                  <APIProvider
+                  apiKey={process.env.REACT_APP_GOOGLE_API_KEY || ""}
+                >
+                  <GeocodingGoogle
+                    getValues={getValues}
+                    register={register}
+                    errors={errors}
+                    setLoading={setIsSearching}
+                    setPosition={setPosition}
+                  />
+                  {isSearching && <LoadingSpinner />}
+                  <div className="map_component">
+                    <MapGoogleComponent
+                      setValue={setValue}
+                      isLoading={isSearching}
+                      position={position}
+                      setPosition={setPosition}
+                      clearErrors={clearErrors}
+                    />
+                  </div>
+                </APIProvider>
+                  */}
+                <GeocodingMapbox
+                  getValues={getValues}
+                  register={register}
+                  errors={errors}
+                  setLoading={setIsSearching}
+                  setPosition={setPosition}
+                />
+                <MapBoxComponent
+                  setValue={setValue}
+                  position={position}
+                  isLoading={isSearching}
+                  setPosition={setPosition}
+                  clearErrors={clearErrors}
+                />
+              </div>
+              <div className="map_error_cnt">
+                <p className="error">{errors.latitude?.message}</p>
+              </div>
             </div>
-          </div>
-        </form>
-        }
+          </form>
+        )}
       </div>
     </div>
   );
-}
\ No newline at end of file
+};
diff --git a/web/src/components/footer/footer.tsx b/web/src/components/footer/footer.tsx
index 425f31969ebd65d3854fc942cc3849a504aa312b..d87ce63cf8ef657ed023b9ac54756b07461e8b79 100644
--- a/web/src/components/footer/footer.tsx
+++ b/web/src/components/footer/footer.tsx
@@ -1,6 +1,6 @@
-import './assets/css/styles.css';
+import "./assets/css/styles.css";
 
-interface Developer{
+interface Developer {
   name: string;
   lastName: string;
   role: string;
@@ -9,62 +9,72 @@ interface Developer{
 
 export const Footer = () => {
   const style: React.CSSProperties = {
-    fontSize: 11, 
-    textDecoration: 'none', 
-    color: 'black',
-    textAlign: 'left'
-  }
+    fontSize: 11,
+    textDecoration: "none",
+    color: "black",
+    textAlign: "left",
+  };
 
   const developers: Developer[] = [
     {
-      name: 'Lorenzo',
-      lastName: 'Trujillo',
-      role: 'Desarrollador FrontEnd Mobile',
-      linkedInURL: 'https://www.linkedin.com/in/lorenzotrujillorojassd/'
+      name: "Lorenzo",
+      lastName: "Trujillo",
+      role: "Desarrollador FrontEnd Mobile",
+      linkedInURL: "https://www.linkedin.com/in/lorenzotrujillorojassd/",
     },
     {
-      name: 'Diego I.',
-      lastName: 'Correa',
-      role: 'Desarrollador BackEnd',
-      linkedInURL: 'https://www.linkedin.com/in/diego-ivan-correa/'
+      name: "Diego I.",
+      lastName: "Correa",
+      role: "Desarrollador BackEnd",
+      linkedInURL: "https://www.linkedin.com/in/diego-ivan-correa/",
     },
     {
-      name: 'Omar',
-      lastName: 'Luna',
-      role: 'Desarrollador FrontEnd Web',
-      linkedInURL: 'https://www.linkedin.com/in/omar-luna-hern%C3%A1ndez-a280ba267/'
-    }
-  ]
+      name: "Omar",
+      lastName: "Luna",
+      role: "Desarrollador FrontEnd Web",
+      linkedInURL:
+        "https://www.linkedin.com/in/omar-luna-hern%C3%A1ndez-a280ba267/",
+    },
+  ];
 
   return (
     <div className="footer">
-      <div className='footer_credits'>
-        <div className='footer_license'>
+      <div className="footer_credits">
+        <div className="footer_license">
           <div style={style}>
             ©2024
-            <a href='https://labsol.cozcyt.gob.mx/' style={style}> Labsol Network.</a>
+            <a href="https://labsol.cozcyt.gob.mx/" style={style}>
+              {" "}
+              Labsol Network.
+            </a>
           </div>
-          <a href='https://www.gnu.org/licenses/gpl-3.0.html' style={style}>Bajo licencia GPL v.3.</a>
+          <a href="https://www.gnu.org/licenses/gpl-3.0.html" style={style}>
+            Bajo licencia GPL v.3.
+          </a>
         </div>
-        <div className='footer_developers'>
-          {
-            developers.map((dev) => {
-              return (
-                <a style={style} href={dev.linkedInURL}>@ {dev.name + ' ' + dev.lastName + ' (' + dev.role +')'}</a>
-              );
-            })
-          }
+        <div className="footer_developers">
+          {developers.map((dev, index) => {
+            return (
+              <a key={index} style={style} href={dev.linkedInURL}>
+                @ {dev.name + " " + dev.lastName + " (" + dev.role + ")"}
+              </a>
+            );
+          })}
         </div>
       </div>
 
-      <div className='footer_icons'>
-        <div className='footer_images'>
-          <img src='https://sit.cozcyt.gob.mx/static/images/sit_logo_texto_lab.png?v=2' 
-            title="Laboratorio de Software Libre Network"/>
-          <img src='https://sit.cozcyt.gob.mx/static/images/sit_logo_licencia.png?v=2' 
-            title='GNU General Public License v.3.'/>
+      <div className="footer_icons">
+        <div className="footer_images">
+          <img
+            src="https://sit.cozcyt.gob.mx/static/images/sit_logo_texto_lab.png?v=2"
+            title="Laboratorio de Software Libre Network"
+          />
+          <img
+            src="https://sit.cozcyt.gob.mx/static/images/sit_logo_licencia.png?v=2"
+            title="GNU General Public License v.3."
+          />
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+};
diff --git a/web/src/components/geocoding/geocoding.tsx b/web/src/components/geocoding/geocoding.tsx
deleted file mode 100644
index 888f7ed7a7c70d92feacfd4983c17512c2a7b757..0000000000000000000000000000000000000000
--- a/web/src/components/geocoding/geocoding.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useMapsLibrary } from "@vis.gl/react-google-maps";
-import { useState, useEffect, Dispatch, SetStateAction, useRef } from "react";
-import { UseFormGetValues, UseFormRegister, FieldErrors } from "react-hook-form";
-import { Place } from "../../infraestructure/entities/place";
-import { Position } from "../map/map";
-import './assets/css/styles.css';
-
-interface props{
-  getValues: UseFormGetValues<Place>;
-  register: UseFormRegister<Place>;
-  errors: FieldErrors<Place>;
-  setPosition: Dispatch<SetStateAction<Position | null>>
-  setLoading: Dispatch<SetStateAction<boolean>>
-}
-
-export const Geocoding = ({ getValues, register, errors, setPosition, setLoading}: props) => {
-  const geocodingApiLoaded = useMapsLibrary('geocoding');
-  const [geocodingService, setGeocodingService] = useState<google.maps.Geocoder>();
-  const [geocodingResult, setGeocodingResult] = useState<google.maps.GeocoderResult>();
-
-  const getPositionByAddress = () => {
-    const address = getValues('address');
-    if(!geocodingService || !address) return;
-    setLoading(true);
-    geocodingService?.geocode({address}, (results, status) => {
-      if(results && status=="OK"){
-        setGeocodingResult(results[0]);
-      }
-    });
-    setLoading(false);
-  }
-
-
-  useEffect(()=> {
-    if(!geocodingApiLoaded) return;
-    setGeocodingService(new window.google.maps.Geocoder());
-  },[geocodingApiLoaded])
-
-  useEffect(() => {
-    if(!geocodingResult) return;
-    setPosition({latitude: geocodingResult.geometry.location.lat(), longitude: geocodingResult.geometry.location.lng()})
-  }, [geocodingResult])
-
-  return (
-    <div className="address_input_cnt">
-      <label>Dirección</label>
-      <div className="address_locate_cnt">
-        <button type="button" onClick={getPositionByAddress}> Ubicar</button>
-        <input type="text" {...register('address')} 
-        onKeyDown={(event)=>{
-          if(event.key === 'Enter'){
-            getPositionByAddress();
-          }
-        }}
-        />
-      </div>
-      <p className="error">{errors.address?.message}</p>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/web/src/components/geocoding/geocoding_google.tsx b/web/src/components/geocoding/geocoding_google.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f3aa41e673c26181d8b36bd4c31e3e3d7b2fec2c
--- /dev/null
+++ b/web/src/components/geocoding/geocoding_google.tsx
@@ -0,0 +1,79 @@
+import { useMapsLibrary } from "@vis.gl/react-google-maps";
+import { useState, useEffect, Dispatch, SetStateAction, useRef } from "react";
+import {
+  UseFormGetValues,
+  UseFormRegister,
+  FieldErrors,
+} from "react-hook-form";
+import { Place } from "../../infraestructure/entities/place";
+import { Position } from "../map/map_google";
+import "./assets/css/styles.css";
+
+interface props {
+  getValues: UseFormGetValues<Place>;
+  register: UseFormRegister<Place>;
+  errors: FieldErrors<Place>;
+  setPosition: Dispatch<SetStateAction<Position | null>>;
+  setLoading: Dispatch<SetStateAction<boolean>>;
+}
+
+export const GeocodingGoogle = ({
+  getValues,
+  register,
+  errors,
+  setPosition,
+  setLoading,
+}: props) => {
+  const geocodingApiLoaded = useMapsLibrary("geocoding");
+  const [geocodingService, setGeocodingService] =
+    useState<google.maps.Geocoder>();
+  const [geocodingResult, setGeocodingResult] =
+    useState<google.maps.GeocoderResult>();
+
+  const getPositionByAddress = () => {
+    const address = getValues("address");
+    if (!geocodingService || !address) return;
+    setLoading(true);
+    geocodingService?.geocode({ address }, (results, status) => {
+      if (results && status == "OK") {
+        setGeocodingResult(results[0]);
+      }
+    });
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (!geocodingApiLoaded) return;
+    setGeocodingService(new window.google.maps.Geocoder());
+  }, [geocodingApiLoaded]);
+
+  useEffect(() => {
+    if (!geocodingResult) return;
+    setPosition({
+      latitude: geocodingResult.geometry.location.lat(),
+      longitude: geocodingResult.geometry.location.lng(),
+    });
+  }, [geocodingResult]);
+
+  return (
+    <div className="address_input_cnt">
+      <label>Dirección</label>
+      <div className="address_locate_cnt">
+        <button type="button" onClick={getPositionByAddress}>
+          {" "}
+          Ubicar
+        </button>
+        <input
+          type="text"
+          {...register("address")}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              getPositionByAddress();
+            }
+          }}
+        />
+      </div>
+      <p className="error">{errors.address?.message}</p>
+    </div>
+  );
+};
diff --git a/web/src/components/geocoding/geocoding_mapbox.tsx b/web/src/components/geocoding/geocoding_mapbox.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..01707c2528c218f9e71711c42b8aea0d6d97e352
--- /dev/null
+++ b/web/src/components/geocoding/geocoding_mapbox.tsx
@@ -0,0 +1,76 @@
+import { Dispatch, SetStateAction } from "react";
+import {
+  UseFormGetValues,
+  UseFormRegister,
+  FieldErrors,
+} from "react-hook-form";
+import { Place } from "../../infraestructure/entities/place";
+import { Position } from "../map/map_google";
+import "./assets/css/styles.css";
+import axios from "axios";
+
+interface props {
+  getValues: UseFormGetValues<Place>;
+  register: UseFormRegister<Place>;
+  errors: FieldErrors<Place>;
+  setPosition: Dispatch<SetStateAction<Position | null>>;
+  setLoading: Dispatch<SetStateAction<boolean>>;
+}
+
+export const GeocodingMapbox = ({
+  getValues,
+  register,
+  errors,
+  setPosition,
+  setLoading,
+}: props) => {
+  const getResultsAPI = async (address: string) => {
+    try {
+      const { data } = await axios.get(
+        "https://api.mapbox.com/search/geocode/v6/forward",
+        {
+          params: {
+            q: address,
+            access_token: process.env.REACT_APP_MAP_BOX || "",
+          },
+        }
+      );
+      setPosition({
+        latitude: data.features[0].geometry.coordinates[1],
+        longitude: data.features[0].geometry.coordinates[0],
+      });
+    } catch (error) {
+      console.log("Hubo un error al obtener la direccion", error);
+    }
+  };
+
+  const getPositionByAddress = () => {
+    const address = getValues("address");
+    if (!address) return;
+    setLoading(true);
+    getResultsAPI(address);
+    setLoading(false);
+  };
+
+  return (
+    <div className="address_input_cnt">
+      <label>Dirección</label>
+      <div className="address_locate_cnt">
+        <button type="button" onClick={getPositionByAddress}>
+          {" "}
+          Ubicar
+        </button>
+        <input
+          type="text"
+          {...register("address")}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              getPositionByAddress();
+            }
+          }}
+        />
+      </div>
+      <p className="error">{errors.address?.message}</p>
+    </div>
+  );
+};
diff --git a/web/src/components/map/map.tsx b/web/src/components/map/map.tsx
deleted file mode 100644
index e88eecc085b19cdfc6924593249c1546210475d5..0000000000000000000000000000000000000000
--- a/web/src/components/map/map.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from "react";
-import { UseFormClearErrors, UseFormSetValue } from "react-hook-form";
-import { Place } from "../../infraestructure/entities/place";
-import { Map, Marker, useMap } from "@vis.gl/react-google-maps";
-
-interface props{
-  setValue: UseFormSetValue<Place>;
-  setIsLoading: Dispatch<SetStateAction<boolean>>;
-  clearErrors: UseFormClearErrors<Place>;
-  position: Position | null;
-  setPosition: Dispatch<SetStateAction<Position | null>>;
-}
-
-export interface Position{
-  latitude: number;
-  longitude: number;
-}
-
-
-export const MapComponent = ({setValue, setIsLoading, position, setPosition, clearErrors}: props) => {
-  const defaultCenter = {lat: 23.687, lng: -102.74};
-  const mapRef = useMap();
-
-  useEffect(() => {
-    if(position && position.latitude!==0 && position.longitude!==0){
-      setValue('latitude',position.latitude);
-      setValue('longitude',position.longitude);
-      if(mapRef){
-        mapRef.setCenter({lat: position.latitude, lng: position.longitude});
-        mapRef.setZoom(16);
-      }
-      clearErrors('latitude');
-      clearErrors('longitude');
-    }
-  },[position]);
-
-  return (
-    <div style={{width: '100%', height: '100%'}}>
-      <Map defaultCenter={defaultCenter}
-        defaultZoom={8}
-        gestureHandling={'greedy'}
-        disableDefaultUI={true} 
-        onClick={(event)=> {
-          const lat = event.detail.latLng?.lat || 0.0;
-          const lng = event.detail.latLng?.lng || 0.0;
-          setPosition({latitude: lat, longitude: lng});
-        }}
-        
-      >
-        {position && <Marker position={{lat: position.latitude, lng: position.longitude}}/>}
-      </Map>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/web/src/components/map/map_google.tsx b/web/src/components/map/map_google.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f8fea3b3656595c2a40b9ad9fd662c56d63a98c7
--- /dev/null
+++ b/web/src/components/map/map_google.tsx
@@ -0,0 +1,65 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+import { UseFormClearErrors, UseFormSetValue } from "react-hook-form";
+import { Place } from "../../infraestructure/entities/place";
+import { Map, Marker, useMap } from "@vis.gl/react-google-maps";
+import { LoadingSpinner } from "../loading_spinner/loading_spinner";
+
+interface props {
+  setValue: UseFormSetValue<Place>;
+  isLoading: boolean;
+  clearErrors: UseFormClearErrors<Place>;
+  position: Position | null;
+  setPosition: Dispatch<SetStateAction<Position | null>>;
+}
+
+export interface Position {
+  latitude: number;
+  longitude: number;
+}
+
+export const MapGoogleComponent = ({
+  setValue,
+  isLoading,
+  position,
+  setPosition,
+  clearErrors,
+}: props) => {
+  const defaultCenter = { lat: 23.687, lng: -102.74 };
+  const mapRef = useMap();
+
+  useEffect(() => {
+    if (position && position.latitude !== 0 && position.longitude !== 0) {
+      setValue("latitude", position.latitude);
+      setValue("longitude", position.longitude);
+      if (mapRef) {
+        mapRef.setCenter({ lat: position.latitude, lng: position.longitude });
+        mapRef.setZoom(16);
+      }
+      clearErrors("latitude");
+      clearErrors("longitude");
+    }
+  }, [position]);
+
+  return (
+    <div style={{ width: "100%", height: "100%" }}>
+      {isLoading && <LoadingSpinner />}
+      <Map
+        defaultCenter={defaultCenter}
+        defaultZoom={8}
+        gestureHandling={"greedy"}
+        disableDefaultUI={true}
+        onClick={(event) => {
+          const lat = event.detail.latLng?.lat || 0.0;
+          const lng = event.detail.latLng?.lng || 0.0;
+          setPosition({ latitude: lat, longitude: lng });
+        }}
+      >
+        {position && (
+          <Marker
+            position={{ lat: position.latitude, lng: position.longitude }}
+          />
+        )}
+      </Map>
+    </div>
+  );
+};
diff --git a/web/src/components/map/map_mapbox.tsx b/web/src/components/map/map_mapbox.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a0dfab7b46be9afcab2fd71c2c7c4f98e4617421
--- /dev/null
+++ b/web/src/components/map/map_mapbox.tsx
@@ -0,0 +1,93 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+import { UseFormClearErrors, UseFormSetValue } from "react-hook-form";
+import { Place } from "../../infraestructure/entities/place";
+import Map, { Marker, useMap } from "react-map-gl";
+import "mapbox-gl/dist/mapbox-gl.css";
+import { LoadingSpinner } from "../loading_spinner/loading_spinner";
+
+interface props {
+  setValue: UseFormSetValue<Place>;
+  isLoading: boolean;
+  clearErrors: UseFormClearErrors<Place>;
+  position: Position | null;
+  setPosition: Dispatch<SetStateAction<Position | null>>;
+}
+
+export interface Position {
+  latitude: number;
+  longitude: number;
+}
+
+const PositionListener = ({
+  setValue,
+  position,
+  setPosition,
+  clearErrors,
+}: props) => {
+  const mapRef = useMap();
+
+  useEffect(() => {
+    if (position && position.latitude !== 0 && position.longitude !== 0) {
+      setValue("latitude", position.latitude);
+      setValue("longitude", position.longitude);
+      if (mapRef.current) {
+        mapRef.current.flyTo({
+          center: [position.longitude, position.latitude],
+          zoom: 17,
+        });
+      }
+      clearErrors("latitude");
+      clearErrors("longitude");
+    }
+  }, [position]);
+
+  return <div />;
+};
+
+export const MapBoxComponent = ({
+  setValue,
+  isLoading,
+  position,
+  setPosition,
+  clearErrors,
+}: props) => {
+  const defaultCenter = { lat: 23.687, lng: -102.74 };
+
+  return (
+    <div style={{ width: "100%", height: "100%" }}>
+      {isLoading && <LoadingSpinner />}
+      <Map
+        mapboxAccessToken={process.env.REACT_APP_MAP_BOX || ""}
+        initialViewState={{
+          longitude: defaultCenter.lng,
+          latitude: defaultCenter.lat,
+          zoom: 7,
+        }}
+        mapStyle="mapbox://styles/mapbox/streets-v9"
+        onClick={(event) => {
+          if (event.lngLat) {
+            setPosition({
+              latitude: event.lngLat.lat,
+              longitude: event.lngLat.lng,
+            });
+          }
+        }}
+      >
+        <PositionListener
+          setValue={setValue}
+          isLoading={isLoading}
+          position={position}
+          clearErrors={clearErrors}
+          setPosition={setPosition}
+        />
+        {position && (
+          <Marker
+            longitude={position.longitude}
+            latitude={position.latitude}
+            color="red"
+          />
+        )}
+      </Map>
+    </div>
+  );
+};
diff --git a/web/src/components/reset_password_window/assets/css/styles.css b/web/src/components/reset_password_window/assets/css/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..eb27c8385b728cbc783f502087b8a338d0f29613
--- /dev/null
+++ b/web/src/components/reset_password_window/assets/css/styles.css
@@ -0,0 +1,76 @@
+* {
+  user-select: none;
+}
+
+.reset-password-window {
+  position: absolute;
+  z-index: 99;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  width: 50vw;
+  height: 40vh;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  border: solid 2px black;
+}
+
+.reset-password-window .header {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  background: #ccc;
+  height: 10%;
+}
+
+.reset-pass-close-btn {
+  display: inline-block;
+  cursor: pointer;
+  position: absolute;
+  right: 5px;
+}
+
+.reset-password-window .body {
+  height: 90%;
+  width: 100%;
+  position: relative;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.error {
+  color: red;
+  font-size: 12px;
+  padding: 0;
+  margin: 0;
+}
+
+.panel {
+  position: absolute;
+  width: 100%;
+  transition: transform 0.5s ease-in-out;
+}
+
+.panel-enter {
+  transform: translateX(0);
+}
+
+.panel-enter-active {
+  transform: translateX(-100%);
+}
+
+.panel-exit {
+  transform: translateX(-100%);
+}
+
+.panel-exit-active {
+  transform: translateX(0);
+}
diff --git a/web/src/components/reset_password_window/reset_password_window.tsx b/web/src/components/reset_password_window/reset_password_window.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b7b021aa6af64b75986a461cd7a811b02210b9fe
--- /dev/null
+++ b/web/src/components/reset_password_window/reset_password_window.tsx
@@ -0,0 +1,134 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./assets/css/styles.css";
+import {
+  faEye,
+  faEyeSlash,
+  faWindowClose,
+} from "@fortawesome/free-solid-svg-icons";
+import { useResetPassword } from "../../hooks/useResetPassword";
+
+interface props {
+  handleClickToClose: () => void;
+}
+
+export const ResetPasswordWindow = ({ handleClickToClose }: props) => {
+  const {
+    animating,
+    step,
+    register,
+    handleSubmitEmail,
+    onSubmitPassword,
+    errors,
+    handleSubmit,
+    isChanging,
+    valuesNewPassword,
+    valuesNewPasswordConfirm,
+    handleClickShowNewPassword,
+    handleClickShowNewPasswordConfirm,
+    handleMouseDownNewPassword,
+    handleMouseDownNewPasswordConfirm,
+  } = useResetPassword(handleClickToClose);
+
+  return (
+    <div className="reset-password-window">
+      <div className="header">
+        <FontAwesomeIcon
+          icon={faWindowClose}
+          className="reset-pass-close-btn"
+          onClick={() => handleClickToClose()}
+        />
+      </div>
+      <div className="body">
+        <div
+          className={`panel ${!isChanging ? "panel-enter" : "panel-exit"} ${
+            animating ? "panel-enter-active" : ""
+          }`}
+        >
+          {step === 1 && (
+            <div className="email-panel">
+              <h2>Ingrese su correo electrónico existente</h2>
+              <input type="email" autoComplete="off" {...register("email")} />
+              <p className="error">{errors.email?.message}</p>
+              <button onClick={handleSubmitEmail}>Enviar</button>
+            </div>
+          )}
+          {step === 2 && (
+            <div className="code-panel">
+              <form onSubmit={handleSubmit(onSubmitPassword)}>
+                <input type="hidden" {...register("email")} />
+                <div className="input_cnt">
+                  <label>
+                    Ingrese el código de 6 dígitos que llegó a su correo
+                  </label>
+                  <div className="password_cnt">
+                    <input
+                      type="text"
+                      autoComplete="false"
+                      {...register("code")}
+                      maxLength={6}
+                    />
+                  </div>
+                  <p className="error">{errors.code?.message}</p>
+                </div>
+
+                <div className="input_cnt">
+                  <label>Nueva contraseña</label>
+                  <div className="password_cnt">
+                    <input
+                      type={
+                        valuesNewPassword.showPassword ? "text" : "password"
+                      }
+                      {...register("newPassword")}
+                      autoComplete="off"
+                    />
+                    <FontAwesomeIcon
+                      className="visibility-button"
+                      onClick={handleClickShowNewPassword}
+                      onMouseDown={handleMouseDownNewPassword}
+                      icon={valuesNewPassword.showPassword ? faEye : faEyeSlash}
+                    />
+                  </div>
+                  <p className="error">{errors.newPassword?.message}</p>
+                </div>
+
+                <div className="input_cnt">
+                  <label>Confirmar nueva contraseña</label>
+                  <div className="password_cnt">
+                    <input
+                      type={
+                        valuesNewPasswordConfirm.showPassword
+                          ? "text"
+                          : "password"
+                      }
+                      {...register("confirmNewPassword")}
+                      autoComplete="off"
+                    />
+                    <FontAwesomeIcon
+                      className="visibility-button"
+                      onClick={handleClickShowNewPasswordConfirm}
+                      onMouseDown={handleMouseDownNewPasswordConfirm}
+                      icon={
+                        valuesNewPasswordConfirm.showPassword
+                          ? faEye
+                          : faEyeSlash
+                      }
+                    />
+                  </div>
+                  <p className="error">{errors.confirmNewPassword?.message}</p>
+                </div>
+
+                <div className="input_cnt">
+                  <input
+                    className="submit_btn"
+                    type="submit"
+                    content="Cambiar"
+                  />
+                </div>
+              </form>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/web/src/components/sa_panel_admin/sa_panel_admin_list/sa_panel_admin_list.tsx b/web/src/components/sa_panel_admin/sa_panel_admin_list/sa_panel_admin_list.tsx
index 229cae1c6c0cd0db13ae52f1937fdbfd5ff5e0fa..f4ca365714500030ac1a7689ebe00c8ed7694d69 100644
--- a/web/src/components/sa_panel_admin/sa_panel_admin_list/sa_panel_admin_list.tsx
+++ b/web/src/components/sa_panel_admin/sa_panel_admin_list/sa_panel_admin_list.tsx
@@ -110,7 +110,7 @@ export const SuperAdminPanelAdminList = ({isWindowActive, statesList}: props) =>
           }
         </select>
 
-        Estado
+        Pueblo mágico
         <select
           disabled={isWindowActive}
           name="town_select" 
diff --git a/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list.tsx b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list.tsx
index 7e031478d4ac6cce003f8118e086920c35147867..1ef02c8bd8e4fc027962019ad0b6ecb6b14eede4 100644
--- a/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list.tsx
+++ b/web/src/components/sa_panel_town/sa_panel_town_list/sa_panel_town_list.tsx
@@ -17,60 +17,51 @@ interface props {
   statesList: State[];
 }
 
-export const SuperadminPanelTownList = ({windowActive, setWindowActive, statesList}: props) => {
-  const {townsList, getTownsByState, getTownById} = useTown();
+export const SuperadminPanelTownList = ({
+  windowActive,
+  setWindowActive,
+  statesList,
+}: props) => {
+  const { townsList, getTownsByState, getTownById } = useTown();
   const [pending, setPending] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [renderCount, setRenderCount] = useState(0);
   const [actualWindowsActive, setActualWindowActive] = useState(false);
   const [form, setForm] = useState<Town>(townsList[0]);
 
-  const forceRenderList = () =>{
-    setRenderCount(prevCount => prevCount + 1);
-  }
+  const forceRenderList = () => {
+    setRenderCount((prevCount) => prevCount + 1);
+  };
 
   const setData = async (idTown: number) => {
     setIsLoading(true);
     setActualWindowActive(true);
     setWindowActive(true);
     const actualTown = await getTownById(idTown);
-    if(actualTown){
+    if (actualTown) {
       setForm(actualTown);
     }
     setIsLoading(false);
-  }
+  };
 
-  const columns : TableColumn<Town>[] = [
+  const columns: TableColumn<Town>[] = [
     {
-      name: "Identificador", 
-      selector: row => row.idTown,
-      sortable: true
+      name: "Identificador",
+      selector: (row) => row.idTown,
+      sortable: true,
     },
     {
-      name: "Nombre", 
-      selector: row => row.name,
-      sortable: true
-    }, 
-    {
-      name: "Estado", 
-      selector: row => row.state,
-      sortable: true
+      name: "Nombre",
+      selector: (row) => row.name,
+      sortable: true,
     },
     {
-      name: "Acciones",
-      cell: (row) => {
-        return (
-          <FontAwesomeIcon style={{cursor: 'pointer'}} icon={faEdit} 
-            onClick={
-              ()=> setData(row.idTown)
-            }
-          />
-        );
-      }
-    }
+      name: "Estado",
+      selector: (row) => row.state,
+      sortable: true,
+    },
   ];
 
-
   const refreshList = (stateId: number, name: string) => {
     setPending(true);
     const getTownsList = async () => {
@@ -82,7 +73,7 @@ export const SuperadminPanelTownList = ({windowActive, setWindowActive, statesLi
           showErrorAxios(error);
         }
       }
-    }
+    };
     getTownsList();
     setPending(false);
   };
@@ -90,51 +81,58 @@ export const SuperadminPanelTownList = ({windowActive, setWindowActive, statesLi
   return (
     <div className="town_list_cnt">
       <div className="town_list_header">
-      Estado
-      <select
-        disabled={windowActive}
-        name="state_select" 
-        onChange={(event) => {
-          const index = Number(event.target.value);
-          const state = statesList[index];
-          refreshList(state.stateId, state.name);
+        Estado
+        <select
+          disabled={windowActive}
+          name="state_select"
+          onChange={(event) => {
+            const index = Number(event.target.value);
+            const state = statesList[index];
+            refreshList(state.stateId, state.name);
           }}
         >
-          {statesList === null || statesList.length===0 ? 
-          <option disabled defaultValue="" value="">No hay estados</option>
-          : 
-          <>
-            <option disabled selected value={0}>Selecciona el estado</option>
-            {statesList.map((state, index) => {
-            return (
-              <option key={state.stateId} value={index}>{state.name}</option>
-            );
-            })}
-          </>
-          }
+          {statesList === null || statesList.length === 0 ? (
+            <option disabled defaultValue="" value="">
+              No hay estados
+            </option>
+          ) : (
+            <>
+              <option disabled selected value={0}>
+                Selecciona el estado
+              </option>
+              {statesList.map((state, index) => {
+                return (
+                  <option key={state.stateId} value={index}>
+                    {state.name}
+                  </option>
+                );
+              })}
+            </>
+          )}
         </select>
       </div>
       <div className="town_list_body">
-        {
-            actualWindowsActive && !isLoading
-          && 
-            <SuperadminPanelTownRegister 
-              setWindowActive={setWindowActive}
-              setActualWindowActive={setActualWindowActive}
-              statesList={statesList}
-              forceRenderList={forceRenderList}
-              isRegister={false}
-              form={form}
-            />
-        }
-        <DataTable noDataComponent="No hay pueblos que mostrar" progressPending={pending}
-        disabled={windowActive}
-          progressComponent={
-            <LoadingSpinner style={{display: 'flex'}}/>
-          }
-          columns={columns} data={townsList} selectableRows className="data_table"
+        {actualWindowsActive && !isLoading && (
+          <SuperadminPanelTownRegister
+            setWindowActive={setWindowActive}
+            setActualWindowActive={setActualWindowActive}
+            statesList={statesList}
+            forceRenderList={forceRenderList}
+            isRegister={false}
+            form={form}
+          />
+        )}
+        <DataTable
+          noDataComponent="No hay pueblos que mostrar"
+          progressPending={pending}
+          disabled={windowActive}
+          progressComponent={<LoadingSpinner style={{ display: "flex" }} />}
+          columns={columns}
+          data={townsList}
+          selectableRows
+          className="data_table"
         />
       </div>
-    </div> 
+    </div>
   );
-}
\ No newline at end of file
+};
diff --git a/web/src/constants/api_keys.ts b/web/src/constants/api_keys.ts
deleted file mode 100644
index cd8c9ac6f988fdd92d13f0ceb81ec62243011d29..0000000000000000000000000000000000000000
--- a/web/src/constants/api_keys.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const REACT_APP_GOOGLE_API_KEY: string = "AIzaSyBpAU7mFuX3oAyRisHiMI89fRcLuRA_i3o";
\ No newline at end of file
diff --git a/web/src/constants/api_routes.ts b/web/src/constants/api_routes.ts
index 7322314f6894a9ad3b8c709df6651ae4dc54eef4..cdb28e946b242863b0fa83efea54f187a016f608 100644
--- a/web/src/constants/api_routes.ts
+++ b/web/src/constants/api_routes.ts
@@ -1,8 +1,13 @@
-export const API_ROUTE_ADMIN = '/admin';
-export const API_ROUTE_ADMIN_SIGNUP = API_ROUTE_ADMIN+ '/signup';
-export const API_ROUTE_ADMIN_SIGNIN = API_ROUTE_ADMIN+ '/signin';
-export const API_ROUTE_ADMIN_CHANGE_PASSWORD = API_ROUTE_ADMIN+ '/change-password';
-export const API_ROUTE_ADMIN_WHOAMI = API_ROUTE_ADMIN+ '/whoami';
-const API_ROUTE_STATE = '/state';   
-export const API_ROUTE_POINT = '/point';  
-export const API_ROUTE_PLACE = '/place';   
\ No newline at end of file
+export const API_ROUTE_ADMIN = "/admin";
+export const API_ROUTE_ADMIN_SIGNUP = API_ROUTE_ADMIN + "/signup";
+export const API_ROUTE_ADMIN_SIGNIN = API_ROUTE_ADMIN + "/signin";
+export const API_ROUTE_ADMIN_CHANGE_PASSWORD =
+  API_ROUTE_ADMIN + "/change-password";
+export const API_ROUTE_ADMIN_RESET_PASSWORD =
+  API_ROUTE_ADMIN + "/reset-password";
+export const API_ROUTE_ADMIN_GENERATE_RESET_CODE =
+  API_ROUTE_ADMIN + "/get-reset-code";
+export const API_ROUTE_ADMIN_WHOAMI = API_ROUTE_ADMIN + "/whoami";
+const API_ROUTE_STATE = "/state";
+export const API_ROUTE_POINT = "/point";
+export const API_ROUTE_PLACE = "/place";
diff --git a/web/src/data/datasources/prod/admin_datasource.ts b/web/src/data/datasources/prod/admin_datasource.ts
index 517fe6bd9fa259dda834576670842eee44d45cce..a89fa78c9a293249a00c939c433a443daefcd0ee 100644
--- a/web/src/data/datasources/prod/admin_datasource.ts
+++ b/web/src/data/datasources/prod/admin_datasource.ts
@@ -1,66 +1,101 @@
 import axios from "axios";
 import { AdminDatasourceInf } from "../../../infraestructure/datasources/admin_datasource";
-import { Admin, AdminFormValues } from "../../../infraestructure/entities/admin_form_values";
+import {
+  Admin,
+  AdminFormValues,
+} from "../../../infraestructure/entities/admin_form_values";
 import { APIUrl } from "../../../constants/api_url";
 import { AdminModel } from "../../models/prod/AdminModel";
 import { UserRole } from "../../../constants/roles";
-import { API_ROUTE_ADMIN, API_ROUTE_ADMIN_CHANGE_PASSWORD, API_ROUTE_ADMIN_SIGNUP, API_ROUTE_ADMIN_WHOAMI } from "../../../constants/api_routes";
+import {
+  API_ROUTE_ADMIN,
+  API_ROUTE_ADMIN_CHANGE_PASSWORD,
+  API_ROUTE_ADMIN_GENERATE_RESET_CODE,
+  API_ROUTE_ADMIN_RESET_PASSWORD,
+  API_ROUTE_ADMIN_SIGNUP,
+  API_ROUTE_ADMIN_WHOAMI,
+} from "../../../constants/api_routes";
+import { ResetPasswordValues } from "../../../infraestructure/entities/reset_password_values";
 
-export class AdminDatasourceProd implements AdminDatasourceInf{
+export class AdminDatasourceProd implements AdminDatasourceInf {
   async registerAdmin(form: AdminFormValues): Promise<void> {
-    await axios.post(
-      APIUrl + API_ROUTE_ADMIN_SIGNUP,
-      {
-        email: form.email,
-        idTowm: form.townAdmin,
-        password: form.password,
-        name: form.name,
-        lastName: form.lastName
-      }
-    );
+    await axios.post(APIUrl + API_ROUTE_ADMIN_SIGNUP, {
+      email: form.email,
+      idTown: form.townAdmin,
+      password: form.password,
+      name: form.name,
+      lastName: form.lastName,
+    });
   }
 
   async getAdminInfo(token: string): Promise<Admin> {
-    const {data} = await axios.get<AdminModel>(APIUrl + API_ROUTE_ADMIN_WHOAMI,{
-      headers: {
-        'Authorization': `Bearer ${token}`
+    const { data } = await axios.get<AdminModel>(
+      APIUrl + API_ROUTE_ADMIN_WHOAMI,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
       }
-    });
+    );
     const admin: Admin = {
       email: data.email,
       name: data.name,
       lastName: data.lastName,
-      role: data.role === UserRole.SUPERADMIN ? UserRole.SUPERADMIN : UserRole.ADMIN,
-      idTown: data.idTown
-    }
+      role:
+        data.role === UserRole.SUPERADMIN
+          ? UserRole.SUPERADMIN
+          : UserRole.ADMIN,
+      idTown: data.idTown,
+    };
     return admin;
   }
 
-  async changePassword(token: string, prevPassword: string, newPassword: string): Promise<void> {
-    await axios.post(APIUrl + API_ROUTE_ADMIN_CHANGE_PASSWORD, 
+  async changePassword(
+    token: string,
+    prevPassword: string,
+    newPassword: string
+  ): Promise<void> {
+    await axios.post(
+      APIUrl + API_ROUTE_ADMIN_CHANGE_PASSWORD,
       {
-      prevPassword: prevPassword,
-      newPassword: newPassword
+        prevPassword: prevPassword,
+        newPassword: newPassword,
       },
       {
         headers: {
-          'Authorization': `Bearer ${token}`
-        }
+          Authorization: `Bearer ${token}`,
+        },
       }
     );
   }
 
   async getAdminsByTown(idTown: number): Promise<Admin[]> {
-    const {data} = await axios.get<AdminModel[]>(APIUrl + API_ROUTE_ADMIN + `/${idTown}`);
+    const { data } = await axios.get<AdminModel[]>(
+      APIUrl + API_ROUTE_ADMIN + `/${idTown}`
+    );
     const admins: Admin[] = data.map((admin): Admin => {
       return {
         email: admin.email,
         idTown: admin.idTown,
         name: admin.name,
         lastName: admin.lastName,
-        status: admin.status
+        status: admin.status,
       };
-    })
+    });
     return admins;
   }
-}
\ No newline at end of file
+
+  async generateResetCode(email: string): Promise<void> {
+    await axios.post(APIUrl + API_ROUTE_ADMIN_GENERATE_RESET_CODE, {
+      email: email,
+    });
+  }
+
+  async resetPassword(form: ResetPasswordValues): Promise<void> {
+    await axios.post(APIUrl + API_ROUTE_ADMIN_RESET_PASSWORD, {
+      email: form.email,
+      resetCode: form.code,
+      newPassword: form.newPassword,
+    });
+  }
+}
diff --git a/web/src/data/repositories/prod/admin_repository.ts b/web/src/data/repositories/prod/admin_repository.ts
index 34dc370404381ad3249fdebb81d3c4c55fe5252a..b86b4da13577619fce2dc148620fac518c39a73c 100644
--- a/web/src/data/repositories/prod/admin_repository.ts
+++ b/web/src/data/repositories/prod/admin_repository.ts
@@ -1,25 +1,39 @@
 import { AdminDatasourceInf } from "../../../infraestructure/datasources/admin_datasource";
-import { Admin, AdminFormValues } from "../../../infraestructure/entities/admin_form_values";
+import {
+  Admin,
+  AdminFormValues,
+} from "../../../infraestructure/entities/admin_form_values";
+import { ResetPasswordValues } from "../../../infraestructure/entities/reset_password_values";
 import { AdminRepositoryInf } from "../../../infraestructure/repositories/admin_repository";
 
-export class AdminRepositoryProd implements AdminRepositoryInf{
-  constructor(
-    private datasource: AdminDatasourceInf
-  ){}
+export class AdminRepositoryProd implements AdminRepositoryInf {
+  constructor(private datasource: AdminDatasourceInf) {}
 
   async registerAdmin(form: AdminFormValues): Promise<void> {
     return this.datasource.registerAdmin(form);
   }
 
   async getAdminInfo(token: string): Promise<Admin> {
-    return this.datasource.getAdminInfo(token);  
+    return this.datasource.getAdminInfo(token);
   }
 
-  async changePassword(token: string, prevPassword: string, newPassword: string): Promise<void> {
+  async changePassword(
+    token: string,
+    prevPassword: string,
+    newPassword: string
+  ): Promise<void> {
     return this.datasource.changePassword(token, prevPassword, newPassword);
   }
 
   async getAdminsByTown(idTown: number): Promise<Admin[]> {
     return this.datasource.getAdminsByTown(idTown);
   }
-}
\ No newline at end of file
+
+  async generateResetCode(email: string): Promise<void> {
+    return this.datasource.generateResetCode(email);
+  }
+
+  async resetPassword(form: ResetPasswordValues): Promise<void> {
+    return this.datasource.resetPassword(form);
+  }
+}
diff --git a/web/src/hooks/useAdmin.tsx b/web/src/hooks/useAdmin.tsx
index 4fb54bd425edecf7eac9701f48c1709e4a46c4b6..42745b10d627e4b56e50e368a163d6fba395e2bb 100644
--- a/web/src/hooks/useAdmin.tsx
+++ b/web/src/hooks/useAdmin.tsx
@@ -1,7 +1,10 @@
 import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form";
 import { AdminDatasourceProd } from "../data/datasources/prod/admin_datasource";
 import { AdminRepositoryProd } from "../data/repositories/prod/admin_repository";
-import { Admin, AdminFormValues } from "../infraestructure/entities/admin_form_values";
+import {
+  Admin,
+  AdminFormValues,
+} from "../infraestructure/entities/admin_form_values";
 import { toast } from "react-toastify";
 import axios, { AxiosError } from "axios";
 import { useState } from "react";
@@ -16,28 +19,28 @@ const resolver: Resolver<AdminFormValues> = async (data) => {
   if (!data.name) {
     errors.name = {
       type: "required",
-      message: "El nombre del administrador es requerido"
+      message: "El nombre del administrador es requerido",
     };
   }
 
   if (!data.lastName) {
     errors.lastName = {
       type: "required",
-      message: "El apellido del administrador es requerido"
+      message: "El apellido del administrador es requerido",
     };
   }
 
   if (!data.email) {
     errors.email = {
       type: "required",
-      message: "El correo electronico es requerido"
+      message: "El correo electronico es requerido",
     };
-  }else{
+  } else {
     const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
     if (!emailPattern.test(data.email)) {
       errors.email = {
         type: "validate",
-        message: "El correo electronico no es válido"
+        message: "El correo electronico no es válido",
       };
     }
   }
@@ -45,26 +48,26 @@ const resolver: Resolver<AdminFormValues> = async (data) => {
   if (!data.password) {
     errors.password = {
       type: "required",
-      message: "La contraseña es requerida"
+      message: "La contraseña es requerida",
     };
-  }else if(data.confirmPassword!==data.password){
+  } else if (data.confirmPassword !== data.password) {
     errors.confirmPassword = {
       type: "validate",
-      message: "Las contraseñas deben coincidir"
-    }; 
+      message: "Las contraseñas deben coincidir",
+    };
   }
 
   if (!data.confirmPassword) {
     errors.confirmPassword = {
       type: "required",
-      message: "La contraseña es requerida"
+      message: "La contraseña es requerida",
     };
   }
 
   if (!data.townAdmin) {
     errors.townAdmin = {
       type: "required",
-      message: "Elija el pueblo al que va a representar"
+      message: "Elija el pueblo al que va a representar",
     };
   }
 
@@ -74,59 +77,62 @@ const resolver: Resolver<AdminFormValues> = async (data) => {
   };
 };
 
-export const useAdmin = (forceRenderList?: () => void, handleClickToClose?: () => void) => {
+export const useAdmin = (
+  forceRenderList?: () => void,
+  handleClickToClose?: () => void
+) => {
   const {
     register,
     handleSubmit,
-    formState: {errors},
-  } = useForm<AdminFormValues>({resolver});
+    formState: { errors },
+    setError,
+  } = useForm<AdminFormValues>({ resolver });
   const [adminList, setAdminList] = useState<Admin[]>([]);
 
   const onSubmit: SubmitHandler<AdminFormValues> = (data: AdminFormValues) => {
     const fetch = async () => {
-      try{
+      try {
         await adminRepository.registerAdmin(data);
-        if(forceRenderList && handleClickToClose){
+        if (forceRenderList && handleClickToClose) {
           forceRenderList();
           handleClickToClose();
         }
-      }catch(error: any){
+      } catch (error: any) {
         let errorMessage: string = "Ha ocurrido un error";
-        if(axios.isAxiosError(error)){
+        if (axios.isAxiosError(error)) {
           error as AxiosError;
-          switch(error.code){
-            case(axios.AxiosError.ERR_BAD_REQUEST):
-            errorMessage = "Acceso no autorizado";
+          switch (error.code) {
+            case axios.AxiosError.ERR_BAD_REQUEST:
+              errorMessage = "Acceso no autorizado";
+              setError("email", { type: "validate", message: "El email ya existe" });
               break;
-            case(axios.AxiosError.ERR_NETWORK):
+            case axios.AxiosError.ERR_NETWORK:
               errorMessage = "Conexión con el servidor fallida";
               break;
           }
         }
         throw new Error(errorMessage);
       }
-    }
-    toast.promise(
-      fetch(),{
-        pending: "Subiendo datos...",
-        success: "Los datos se han subido correctamente",
-        error: {
-          render({data}){
-            return (data as Error).message;
-          }
-        }
-      }
-    )
-  }
+    };
+    toast.promise(fetch(), {
+      pending: "Subiendo datos...",
+      success: "Los datos se han subido correctamente",
+      error: {
+        render({ data }) {
+          return (data as Error).message;
+        },
+      },
+    });
+  };
 
   const getAdminInfo = async (): Promise<Admin | null> => {
-    const token = localStorage.getItem('token');
-    if(token){
-      try{
+    const token = localStorage.getItem("token");
+    if (token) {
+      try {
         const actualAdmin = await adminRepository.getAdminInfo(token);
         return actualAdmin;
-      }catch(error: any){
-        if(axios.isAxiosError(error)){
+      } catch (error: any) {
+        if (axios.isAxiosError(error)) {
           error as AxiosError;
           showErrorAxios(error);
         }
@@ -134,19 +140,27 @@ export const useAdmin = (forceRenderList?: () => void, handleClickToClose?: () =
       return null;
     }
     return null;
-  }
+  };
 
   const getAdminListByTown = async (idTown: number) => {
-    try{
+    try {
       const adminList = await adminRepository.getAdminsByTown(idTown);
       setAdminList(adminList);
-    }catch(error: any){
-      if(axios.isAxiosError(error)){
+    } catch (error: any) {
+      if (axios.isAxiosError(error)) {
         error as AxiosError;
         showErrorAxios(error);
       }
     }
-  }
+  };
 
-  return {register, handleSubmit, errors, onSubmit, getAdminInfo, adminList, getAdminListByTown};
-}
\ No newline at end of file
+  return {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    getAdminInfo,
+    adminList,
+    getAdminListByTown,
+  };
+};
diff --git a/web/src/hooks/usePlace.tsx b/web/src/hooks/usePlace.tsx
index ed2db5300588ce013c063143a27cc20494956e53..60bf3ce0225a04cd4b7f7bbf4bbde787ac9a8d39 100644
--- a/web/src/hooks/usePlace.tsx
+++ b/web/src/hooks/usePlace.tsx
@@ -1,4 +1,4 @@
-import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form"
+import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form";
 import { Place, AvailableDays } from "../infraestructure/entities/place";
 import { toast } from "react-toastify";
 import { useEffect, useState } from "react";
@@ -15,271 +15,277 @@ const placeRepository = new PlaceRepositoryProd(placeDatasouce);
 const resolver: Resolver<Place> = async (data) => {
   const errors: FieldErrors<Place> = {};
 
-  if(!data.idTown){
+  if (!data.idTown) {
     errors.idTown = {
-      type : "required",
-      message : "Debe seleccionar el pueblo mágico al que pertenece el lugar"
-    }
+      type: "required",
+      message: "Debe seleccionar el pueblo mágico al que pertenece el lugar",
+    };
   }
 
-  if(!data.openAt && data.openAt!==0){
+  if (!data.openAt && data.openAt !== 0) {
     errors.openAt = {
       type: "required",
-      message: "La hora de apertura es requerida"
+      message: "La hora de apertura es requerida",
     };
   }
 
-  if(!data.closeAt && data.closeAt!==0){
+  if (!data.closeAt && data.closeAt !== 0) {
     errors.closeAt = {
       type: "required",
-      message: "La hora de cierre es requerida"
+      message: "La hora de cierre es requerida",
     };
   }
 
-  if(data.openAt>data.closeAt){
+  if (data.openAt > data.closeAt) {
     errors.closeAt = {
       type: "required",
-      message: "La hora de apertura debe ser antes que la hora de cierre"
+      message: "La hora de apertura debe ser antes que la hora de cierre",
     };
   }
 
-  if(!data.name){
+  if (!data.name) {
     errors.name = {
       type: "required",
-      message: "El nombre del lugar es requerido"
+      message: "El nombre del lugar es requerido",
     };
   }
 
-  if(!data.categoriesId){
+  if (!data.categoriesId) {
     errors.categoriesId = {
       type: "required",
-      message: "Debe seleccionar al menos una categoría"
-    }
-  }else{
-    if(data.categoriesId.length < 1){
+      message: "Debe seleccionar al menos una categoría",
+    };
+  } else {
+    if (data.categoriesId.length < 1) {
       errors.categoriesId = {
         type: "required",
-        message: "Debe seleccionar al menos una categoría"
-      }
-    }
-  }
-
-  if(!data.address){
-    errors.address = {
-      type: "required",
-      message: "Debe de ingresar la dirección al lugar"
+        message: "Debe seleccionar al menos una categoría",
+      };
     }
   }
 
-  for(var index = languaguesList.length-1; index>=0; index--){
-    if(!data.descriptions || !data.descriptions[index]){
+  for (var index = languaguesList.length - 1; index >= 0; index--) {
+    if (!data.descriptions || !data.descriptions[index]) {
       errors.descriptions = {
         type: "required",
-        message: "La descripción del lugar en "+languaguesList[index]+" es requerida"
+        message:
+          "La descripción del lugar en " +
+          languaguesList[index] +
+          " es requerida",
       };
     }
   }
 
-  if(!data.available){
+  if (!data.available) {
     errors.available = {
       type: "required",
-      message: "Se requieren los días que está disponible el lugar"
+      message: "Se requieren los días que está disponible el lugar",
     };
-  }else{
-    if(data.available === AvailableDays.CUSTOM){
-      if(!data.startDate){
+  } else {
+    if (data.available === AvailableDays.CUSTOM) {
+      if (!data.startDate) {
         errors.startDate = {
           type: "required",
-          message: "Se requiere la fecha de inicio"
+          message: "Se requiere la fecha de inicio",
         };
       }
-      
-      if(!data.endDate){
+
+      if (!data.endDate) {
         errors.endDate = {
           type: "required",
-          message: "Se requiere la fecha de cierre"
+          message: "Se requiere la fecha de cierre",
         };
       }
 
-      if(data.startDate && data.endDate){
+      if (data.startDate && data.endDate) {
         const startDate = new Date(data.startDate);
         const endDate = new Date(data.endDate);
-        if(startDate.getTime() > endDate.getTime()){
+        if (startDate.getTime() > endDate.getTime()) {
           errors.endDate = {
             type: "required",
-            message: "La fecha de inicio no puede ser después de la fecha de cierre"
+            message:
+              "La fecha de inicio no puede ser después de la fecha de cierre",
           };
         }
       }
     }
   }
 
-  if(!data.latitude || !data.longitude){
+  if (!data.latitude || !data.longitude) {
     errors.latitude = {
       type: "required",
-      message: "Debe de seleccionar la ubicación del lugar"
-    }
+      message: "Debe de seleccionar la ubicación del lugar",
+    };
   }
 
-  if(!data.imagesList || data.imagesList.length<MIN_NUMBER_PLACE_IMAGES){
+  if (!data.imagesList || data.imagesList.length < MIN_NUMBER_PLACE_IMAGES) {
     errors.imagesList = {
       type: "required",
-      message: "Debe de haber al menos "+MIN_NUMBER_PLACE_IMAGES+" imagénes representativas del lugar"
-    }
+      message:
+        "Debe de haber al menos " +
+        MIN_NUMBER_PLACE_IMAGES +
+        " imagénes representativas del lugar",
+    };
   }
 
   return {
     values: Object.keys(errors).length > 0 ? {} : data,
-    errors: errors
+    errors: errors,
   };
 };
 
-export const usePlace = (forceRenderList?: () => void, 
-setIsWindowActive?: (visibility: boolean) => void) => {
+export const usePlace = (
+  forceRenderList?: () => void,
+  setIsWindowActive?: (visibility: boolean) => void
+) => {
   const {
-    register, 
+    register,
     handleSubmit,
     setValue,
-    formState: {errors},
+    formState: { errors },
     clearErrors,
     resetField,
-    getValues
-  } = useForm<Place>({resolver});
-  const [languageDescriptionIndexSelected, setLanguageDescriptionIndexSelected] = useState(0);
-  const [descriptions, setDescriptions] = useState<string[]>(new Array(languaguesList.length).fill(""));
-  const [availableDays, setAvailableDays] = useState<AvailableDays>(AvailableDays.WEEKEND);
+    getValues,
+  } = useForm<Place>({ resolver });
+  const [
+    languageDescriptionIndexSelected,
+    setLanguageDescriptionIndexSelected,
+  ] = useState(0);
+  const [descriptions, setDescriptions] = useState<string[]>(
+    new Array(languaguesList.length).fill("")
+  );
+  const [availableDays, setAvailableDays] = useState<AvailableDays>(
+    AvailableDays.WEEKEND
+  );
   const [placeList, setPlaceList] = useState<Place[]>([]);
   const [pending, setPending] = useState(false);
   const [categoriesId, setCategoriesId] = useState<number[]>([]);
   const [updatedCategories, setUpdatedCategories] = useState(false);
 
-  useEffect(()=> {
-    setValue('categoriesId',categoriesId,{shouldValidate: updatedCategories});
+  useEffect(() => {
+    setValue("categoriesId", categoriesId, {
+      shouldValidate: updatedCategories,
+    });
     setUpdatedCategories(true);
-  },[categoriesId]);
-  
+  }, [categoriesId]);
 
-  const onSubmitRegister : SubmitHandler<Place> = (data: Place) => {
+  const onSubmitRegister: SubmitHandler<Place> = (data: Place) => {
     const fetch = async () => {
-      try{
-        await placeRepository.registerPlace(data).then(() =>{
-          if(forceRenderList && setIsWindowActive){
+      try {
+        await placeRepository.registerPlace(data).then(() => {
+          if (forceRenderList && setIsWindowActive) {
             forceRenderList();
             setIsWindowActive(false);
           }
         });
-      }catch(error: any){
+      } catch (error: any) {
         let errorMessage: string = "Ha ocurrido un error";
-        if(axios.isAxiosError(error)){
+        if (axios.isAxiosError(error)) {
           error as AxiosError;
-          switch(error.code){
-            case(axios.AxiosError.ERR_BAD_REQUEST):
-            errorMessage = "Acceso no autorizado";
+          switch (error.code) {
+            case axios.AxiosError.ERR_BAD_REQUEST:
+              errorMessage = "Acceso no autorizado";
               break;
-            case(axios.AxiosError.ERR_NETWORK):
+            case axios.AxiosError.ERR_NETWORK:
               errorMessage = "Conexión con el servidor fallida";
               break;
           }
         }
         throw new Error(errorMessage);
       }
-    }
-    toast.promise(
-      fetch(),{
-        pending: "Subiendo datos...",
-        success: "Los datos se han subido correctamente",
-        error: {
-          render({data}){
-            return (data as Error).message;
-          }
-        }
-      }
-    )
-  }
+    };
+    toast.promise(fetch(), {
+      pending: "Subiendo datos...",
+      success: "Los datos se han subido correctamente",
+      error: {
+        render({ data }) {
+          return (data as Error).message;
+        },
+      },
+    });
+  };
 
   const onSubmitUpdate: SubmitHandler<Place> = (data: Place) => {
     const fetch = async () => {
-      try{
+      try {
         await placeRepository.updatePlace(data);
-        if(forceRenderList && setIsWindowActive){
+        if (forceRenderList && setIsWindowActive) {
           forceRenderList();
           setIsWindowActive(false);
         }
-      }catch(error: any){
+      } catch (error: any) {
         let errorMessage: string = "Ha ocurrido un error";
-        if(axios.isAxiosError(error)){
+        if (axios.isAxiosError(error)) {
           error as AxiosError;
-          switch(error.code){
-            case(axios.AxiosError.ERR_BAD_REQUEST):
-            errorMessage = "Acceso no autorizado";
+          switch (error.code) {
+            case axios.AxiosError.ERR_BAD_REQUEST:
+              errorMessage = "Acceso no autorizado";
               break;
-            case(axios.AxiosError.ERR_NETWORK):
+            case axios.AxiosError.ERR_NETWORK:
               errorMessage = "Conexión con el servidor fallida";
               break;
           }
         }
         throw new Error(errorMessage);
       }
-    }
-    toast.promise(
-      fetch(),{
-        pending: "Subiendo datos...",
-        success: "Los datos se han subido correctamente",
-        error: {
-          render({data}){
-            return (data as Error).message;
-          }
-        }
-      }
-    )
-  }
+    };
+    toast.promise(fetch(), {
+      pending: "Subiendo datos...",
+      success: "Los datos se han subido correctamente",
+      error: {
+        render({ data }) {
+          return (data as Error).message;
+        },
+      },
+    });
+  };
 
   const updateTimeForm = (time: string, isOpeningHour: boolean) => {
     const timeSplitted = time.split(":");
     let hours = Number(timeSplitted[0]);
     const minutes = Number(timeSplitted[1]);
-    hours += (minutes/60);
+    hours += minutes / 60;
     hours = Math.round(hours);
-    if(isOpeningHour){
-      setValue("openAt", hours, {shouldValidate: true});
-    }else{
-      setValue("closeAt", hours, {shouldValidate: true});
+    if (isOpeningHour) {
+      setValue("openAt", hours, { shouldValidate: true });
+    } else {
+      setValue("closeAt", hours, { shouldValidate: true });
     }
-  }
+  };
 
   const updatePlacesByTown = async (idTown: number) => {
     setPending(true);
-    try{
+    try {
       const places = await placeRepository.getPlacesByTown(idTown);
       setPlaceList(places);
       setPending(false);
-    }catch(error: any){
-      if(axios.isAxiosError(error)){
+    } catch (error: any) {
+      if (axios.isAxiosError(error)) {
         error as AxiosError;
         showErrorAxios(error);
       }
       setPending(false);
     }
-  }
+  };
 
   const getPlaceById = async (idPlace: number): Promise<Place | null> => {
-    try{
+    try {
       const place = await placeRepository.getPlaceById(idPlace);
       return place;
-    }catch(error: any){
-      if(axios.isAxiosError(error)){
+    } catch (error: any) {
+      if (axios.isAxiosError(error)) {
         error as AxiosError;
         showErrorAxios(error);
       }
     }
     return null;
-  }
+  };
 
   return {
-    register, 
-    handleSubmit, 
-    errors, 
-    onSubmitRegister, 
+    register,
+    handleSubmit,
+    errors,
+    onSubmitRegister,
     onSubmitUpdate,
     setValue,
     languageDescriptionIndexSelected,
@@ -297,6 +303,6 @@ setIsWindowActive?: (visibility: boolean) => void) => {
     categoriesId,
     setCategoriesId,
     getPlaceById,
-    getValues
+    getValues,
   };
-}
+};
diff --git a/web/src/hooks/useResetPassword.ts b/web/src/hooks/useResetPassword.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5485115c479e1cd1d31fb0f627afe6ca41259fb4
--- /dev/null
+++ b/web/src/hooks/useResetPassword.ts
@@ -0,0 +1,196 @@
+import { useState } from "react";
+import { ResetPasswordValues } from "../infraestructure/entities/reset_password_values";
+import { FieldErrors, Resolver, SubmitHandler, useForm } from "react-hook-form";
+import { AdminDatasourceProd } from "../data/datasources/prod/admin_datasource";
+import { AdminRepositoryProd } from "../data/repositories/prod/admin_repository";
+import axios, { AxiosError } from "axios";
+import { toast } from "react-toastify";
+import { usePasswoordVisibility } from "./usePasswordVisibility";
+
+const adminDatasource = new AdminDatasourceProd();
+const adminRepository = new AdminRepositoryProd(adminDatasource);
+
+const resolver: Resolver<ResetPasswordValues> = async (data) => {
+  const errors: FieldErrors<ResetPasswordValues> = {};
+
+  if (!data.email) {
+    errors.email = {
+      type: "required",
+      message: "El correo electronico es requerido",
+    };
+  } else {
+    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    if (!emailPattern.test(data.email)) {
+      errors.email = {
+        type: "validate",
+        message: "El correo electronico no es válido",
+      };
+    }
+  }
+
+  if (!data.code) {
+    errors.code = {
+      type: "required",
+      message: "El código es requerido",
+    };
+  } else {
+    if (data.code.toString().length !== 6) {
+      errors.code = {
+        type: "required",
+        message: "El código debe ser de 6 dígitos",
+      };
+    } else {
+      const numberPattern = /^[0-9]+$/;
+      if (!numberPattern.test(data.code.toString())) {
+        errors.code = {
+          type: "validate",
+          message: "El código debe contener solo números",
+        };
+      }
+    }
+  }
+
+  if (!data.newPassword) {
+    errors.newPassword = {
+      type: "required",
+      message: "Se requiere una nueva contraseña",
+    };
+  } else if (data.confirmNewPassword !== data.newPassword) {
+    errors.confirmNewPassword = {
+      type: "validate",
+      message: "Las contraseñas deben coincidir",
+    };
+  }
+
+  if (!data.confirmNewPassword) {
+    errors.confirmNewPassword = {
+      type: "required",
+      message: "Se requiere confirmar la nueva contraseña",
+    };
+  }
+
+  return {
+    values: Object.keys(errors).length > 0 ? {} : data,
+    errors: errors,
+  };
+};
+
+export const useResetPassword = (handleClickToClose?: () => void) => {
+  const [step, setStep] = useState(1);
+  const [isChanging, setIsChanging] = useState(false);
+  const {
+    register,
+    formState: { errors },
+    handleSubmit,
+    getValues,
+    setError,
+  } = useForm<ResetPasswordValues>({ resolver: resolver });
+  const {
+    values: valuesNewPassword,
+    handleClickShowPassword: handleClickShowNewPassword,
+    handleMouseDownPassword: handleMouseDownNewPassword,
+  } = usePasswoordVisibility();
+  const {
+    values: valuesNewPasswordConfirm,
+    handleClickShowPassword: handleClickShowNewPasswordConfirm,
+    handleMouseDownPassword: handleMouseDownNewPasswordConfirm,
+  } = usePasswoordVisibility();
+  const [animating, setAnimating] = useState(false);
+
+  const handleSubmitEmail = () => {
+    const fetch = async () => {
+      try {
+        await adminRepository.generateResetCode(getValues("email")).then(() => {
+          setAnimating(true);
+          setIsChanging(true);
+          setTimeout(() => {
+            setStep(2);
+            setIsChanging(false);
+            setAnimating(false);
+          }, 500);
+        });
+      } catch (error: any) {
+        let errorMessage: string = "Ha ocurrido un error";
+        if (axios.isAxiosError(error)) {
+          error as AxiosError;
+          switch (error.code) {
+            case axios.AxiosError.ERR_BAD_REQUEST:
+              errorMessage = "Acceso no autorizado";
+              break;
+            case axios.AxiosError.ERR_NETWORK:
+              errorMessage = "Conexión con el servidor fallida";
+              break;
+          }
+        }
+        throw new Error(errorMessage);
+      }
+    };
+    toast.promise(fetch(), {
+      pending: "Enviando correo...",
+      success: "Se ha enviado el correo",
+      error: {
+        render({ data }) {
+          return (data as Error).message;
+        },
+      },
+    });
+  };
+
+  const onSubmitPassword: SubmitHandler<ResetPasswordValues> = (
+    data: ResetPasswordValues
+  ) => {
+    const fetch = async () => {
+      try {
+        await adminRepository.resetPassword(data).then(() => {
+          if (handleClickToClose) {
+            handleClickToClose();
+          }
+        });
+      } catch (error: any) {
+        let errorMessage: string = "Ha ocurrido un error";
+        if (axios.isAxiosError(error)) {
+          error as AxiosError;
+          switch (error.code) {
+            case axios.AxiosError.ERR_BAD_REQUEST:
+              errorMessage = "Acceso no autorizado";
+              setError("code", {
+                type: "validate",
+                message: "El código no es correcto",
+              });
+              break;
+            case axios.AxiosError.ERR_NETWORK:
+              errorMessage = "Conexión con el servidor fallida";
+              break;
+          }
+        }
+        throw new Error(errorMessage);
+      }
+    };
+    toast.promise(fetch(), {
+      pending: "Subiendo datos...",
+      success: "La contraseña se ha cambiado",
+      error: {
+        render({ data }) {
+          return (data as Error).message;
+        },
+      },
+    });
+  };
+
+  return {
+    step,
+    animating,
+    handleSubmitEmail,
+    onSubmitPassword,
+    isChanging,
+    register,
+    errors,
+    handleSubmit,
+    valuesNewPassword,
+    valuesNewPasswordConfirm,
+    handleClickShowNewPassword,
+    handleClickShowNewPasswordConfirm,
+    handleMouseDownNewPassword,
+    handleMouseDownNewPasswordConfirm,
+  };
+};
diff --git a/web/src/infraestructure/datasources/admin_datasource.ts b/web/src/infraestructure/datasources/admin_datasource.ts
index 7b77243e2a62bc2ea93b86b4671c95d4bb9f5c67..44c406a3a6770b64bfbf73d569915d954e6ef336 100644
--- a/web/src/infraestructure/datasources/admin_datasource.ts
+++ b/web/src/infraestructure/datasources/admin_datasource.ts
@@ -1,8 +1,15 @@
 import { Admin, AdminFormValues } from "../entities/admin_form_values";
+import { ResetPasswordValues } from "../entities/reset_password_values";
 
-export interface AdminDatasourceInf{
+export interface AdminDatasourceInf {
   registerAdmin(form: AdminFormValues): Promise<void>;
   getAdminInfo(token: string): Promise<Admin>;
-  changePassword(token : string, prevPassword: string, newPassword: string): Promise<void>;
+  changePassword(
+    token: string,
+    prevPassword: string,
+    newPassword: string
+  ): Promise<void>;
   getAdminsByTown(idTown: number): Promise<Admin[]>;
-}
\ No newline at end of file
+  generateResetCode(email: string): Promise<void>;
+  resetPassword(form: ResetPasswordValues): Promise<void>;
+}
diff --git a/web/src/infraestructure/entities/reset_password_values.ts b/web/src/infraestructure/entities/reset_password_values.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a353e140ff733c68c05146bd8b4f4f2c8e7aa02d
--- /dev/null
+++ b/web/src/infraestructure/entities/reset_password_values.ts
@@ -0,0 +1,6 @@
+export interface ResetPasswordValues {
+  email: string;
+  code: number;
+  newPassword: string;
+  confirmNewPassword: string;
+}
diff --git a/web/src/infraestructure/repositories/admin_repository.ts b/web/src/infraestructure/repositories/admin_repository.ts
index e995087bfab27997282fcd610ba36571a5086229..02d19c9cf15846562b714e06f55713d8e4da1f17 100644
--- a/web/src/infraestructure/repositories/admin_repository.ts
+++ b/web/src/infraestructure/repositories/admin_repository.ts
@@ -1,8 +1,15 @@
 import { Admin, AdminFormValues } from "../entities/admin_form_values";
+import { ResetPasswordValues } from "../entities/reset_password_values";
 
-export interface AdminRepositoryInf{
+export interface AdminRepositoryInf {
   registerAdmin(form: AdminFormValues): Promise<void>;
   getAdminInfo(token: string): Promise<Admin>;
-  changePassword(token : string, prevPassword: string, newPassword: string): Promise<void>;
+  changePassword(
+    token: string,
+    prevPassword: string,
+    newPassword: string
+  ): Promise<void>;
   getAdminsByTown(idTown: number): Promise<Admin[]>;
-}
\ No newline at end of file
+  generateResetCode(email: string): Promise<void>;
+  resetPassword(form: ResetPasswordValues): Promise<void>;
+}
diff --git a/web/src/pages/login_page/login_page.tsx b/web/src/pages/login_page/login_page.tsx
index 2d587c7a226740753bdb787563e11935a49a160c..6c6f117cda67bb24bb0dc7dc0efa113eae82e85b 100644
--- a/web/src/pages/login_page/login_page.tsx
+++ b/web/src/pages/login_page/login_page.tsx
@@ -1,95 +1,100 @@
-import { usePasswoordVisibility } from "../../hooks/usePasswordVisibility"
-import "./styles/styles.css"
+import { usePasswoordVisibility } from "../../hooks/usePasswordVisibility";
+import "./styles/styles.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCircleExclamation, faEye , faEyeSlash, faWindowClose} from "@fortawesome/free-solid-svg-icons";
+import {
+  faCircleExclamation,
+  faEye,
+  faEyeSlash,
+  faWindowClose,
+} from "@fortawesome/free-solid-svg-icons";
 import { useLogin } from "../../hooks/useLogin";
 import { useState } from "react";
-import { LoadingScreen } from "../../components/loading_screen/loading_screen";
+import { ResetPasswordWindow } from "../../components/reset_password_window/reset_password_window";
 
 export const LoginPage = () => {
-  const {
-    values,
-    handleClickShowPassword,
-    handleMouseDownPassword,
-  } = usePasswoordVisibility();
-
+  const { values, handleClickShowPassword, handleMouseDownPassword } =
+    usePasswoordVisibility();
+  const [isWindowActive, setIsWindowActive] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  const {
-    register, 
-    handleSubmit, 
-    errors, 
-    onSubmit,
-    clearErrors,
-  } = useLogin(setIsLoading);
+  const { register, handleSubmit, errors, onSubmit, clearErrors } =
+    useLogin(setIsLoading);
+
+  const handleClickToClose = () => {
+    setIsWindowActive(false);
+  };
 
   return (
     <div className="login-page-root">
-      {errors.root?.serverError.type==500 && 
+      {errors.root?.serverError.type === "500" && (
         <div className="server-error-window">
           <div className="window-error-header">
-            <div className="window-title">
-              Error
-            </div>
+            <div className="window-title">Error</div>
             <FontAwesomeIcon
-              icon={faWindowClose} 
+              icon={faWindowClose}
               className="window-close-button"
-              onClick={() => {clearErrors("root.serverError")}}
+              onClick={() => {
+                clearErrors("root.serverError");
+              }}
             />
           </div>
           <div className="window-error-body">
-            <FontAwesomeIcon icon={faCircleExclamation} className="circle-exclamation-icon"/>
+            <FontAwesomeIcon
+              icon={faCircleExclamation}
+              className="circle-exclamation-icon"
+            />
             {errors.root?.serverError.message}
           </div>
         </div>
-      }
+      )}
 
-      {isLoading && <div className="loading_spinner"/>}
+      {isWindowActive && (
+        <ResetPasswordWindow handleClickToClose={handleClickToClose} />
+      )}
+      {isLoading && <div className="loading_spinner" />}
       <div className="login-form-container">
-        <div className="title">
-          Inicia sesión
-        </div>
+        <div className="title">Inicia sesión</div>
         <form onSubmit={handleSubmit(onSubmit)}>
           <div className="login-form-field">
-            <input
-              type="text" 
-              {...register('email')}
-              placeholder=""
-              />
+            <input type="text" {...register("email")} placeholder="" />
             <label>Email</label>
-            
           </div>
           <p className="login_error">{errors.email?.message}</p>
           <div className="login-form-field">
-            <input 
-              type={
-                  values.showPassword
-                  ? "text"
-                  : "password"
-              }
-              {...register('password')} 
+            <input
+              type={values.showPassword ? "text" : "password"}
+              {...register("password")}
               autoComplete="off"
+              readOnly={isLoading || isWindowActive}
             />
             <label>Contraseña</label>
-            <FontAwesomeIcon className="pass-visibility-button"
+            <FontAwesomeIcon
+              className="pass-visibility-button"
               onClick={handleClickShowPassword}
               onMouseDown={handleMouseDownPassword}
               icon={values.showPassword ? faEye : faEyeSlash}
             />
           </div>
           <p className="login_error">{errors.password?.message}</p>
-          <p className="login_error">{errors.root?.serverError.type==401 && errors.root?.serverError.message}</p>
+          <p className="login_error">
+            {errors.root?.serverError.type === "401" &&
+              errors.root?.serverError.message}
+          </p>
+          <p
+            className="reset_password_btn"
+            onClick={() => setIsWindowActive(true)}
+          >
+            ¿Contraseña olvidada?
+          </p>
           <div className="login-form-button">
-            <input type="submit" value="Entrar" 
-              disabled={
-                isLoading
-                ? true
-                :
-                  false
-              }/>
+            <input
+              type="submit"
+              value="Entrar"
+              disabled={isLoading || isWindowActive}
+            />
           </div>
         </form>
       </div>
     </div>
-  )     
-}
\ No newline at end of file
+  );
+};
diff --git a/web/src/pages/login_page/styles/styles.css b/web/src/pages/login_page/styles/styles.css
index d55bf18d22702116095b5e1183b1ba5adf886eef..900dbfecd49052250d51110a1587613828990f1e 100644
--- a/web/src/pages/login_page/styles/styles.css
+++ b/web/src/pages/login_page/styles/styles.css
@@ -121,6 +121,10 @@ form .login-form-button input:active {
   transform: scale(0.95);
 }
 
+.reset_password_btn:hover{
+  color: blue;
+}
+
 .login_error{
   color: red;
   font-size: 12px;