diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.scss b/src/app/components/contacts/contact-detail/contact-detail.component.scss
index dab2414..1581c29 100644
--- a/src/app/components/contacts/contact-detail/contact-detail.component.scss
+++ b/src/app/components/contacts/contact-detail/contact-detail.component.scss
@@ -11,7 +11,7 @@ section {
 /*------------- ANIMATION -------------*/
 
 .animation-coming-in {
-  animation: coming-in 1s ease-in-out;
+  animation: coming-in 250ms ease-in-out;
   opacity: 1;
 }
 
diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.ts b/src/app/components/contacts/contact-detail/contact-detail.component.ts
index ae3d0ad..fd50444 100644
--- a/src/app/components/contacts/contact-detail/contact-detail.component.ts
+++ b/src/app/components/contacts/contact-detail/contact-detail.component.ts
@@ -1,29 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { UserService } from '../../../services/user.service';
 import { CommonModule } from '@angular/common';
+import { ContactsComponent } from '../contacts.component';
 
 @Component({
   selector: 'app-contact-detail',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, ContactsComponent],
   templateUrl: './contact-detail.component.html',
   styleUrl: './contact-detail.component.scss',
 })
 export class ContactDetailComponent {
-  paramsId = '';
+  @Input() paramsId: string = '';
 
-  constructor(public userService: UserService, private route: ActivatedRoute) {}
-
-  ngOnInit(): void {
-    this.routeUserId();
-  }
-
-  routeUserId() {
-    if (this.route.params.subscribe()) {
-      this.route.params.subscribe((params) => {
-        this.paramsId = params['id'];
-      });
-    }
-  }
+  constructor(public userService: UserService) {}
 }
diff --git a/src/app/components/contacts/contacts.component.html b/src/app/components/contacts/contacts.component.html
index c046464..b507682 100644
--- a/src/app/components/contacts/contacts.component.html
+++ b/src/app/components/contacts/contacts.component.html
@@ -68,5 +68,5 @@
       } }
     </div>
   </div>
-  <app-contact-detail></app-contact-detail>
+  <app-contact-detail [paramsId]="paramsId"></app-contact-detail>
 </section>
diff --git a/src/app/components/contacts/contacts.component.ts b/src/app/components/contacts/contacts.component.ts
index b6bd286..e5309ff 100644
--- a/src/app/components/contacts/contacts.component.ts
+++ b/src/app/components/contacts/contacts.component.ts
@@ -16,8 +16,7 @@ export class ContactsComponent {
   allUsers: User[] = [];
   usersFirstLetter: string[] = [];
   usersByFirstLetter: { [key: string]: string[] } = {};
-  userMap: { [key: string]: User } = {};
-  paramsId = '';
+  paramsId: string = '';
 
   constructor(public userService: UserService, private route: ActivatedRoute) {
     this.userService.subUserList().subscribe(() => {