diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.html b/src/app/components/contacts/contact-detail/contact-detail.component.html
new file mode 100644
index 0000000..39de1c2
--- /dev/null
+++ b/src/app/components/contacts/contact-detail/contact-detail.component.html
@@ -0,0 +1,8 @@
+<section>
+  <div class="header">
+    <div class="title">Contacts</div>
+    <div class="blue-bar"></div>
+    <div class="metrics-txt">Better with a team</div>
+  </div>
+  <p>{{ userService.displayUserName(paramsId) }}</p>
+</section>
diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.scss b/src/app/components/contacts/contact-detail/contact-detail.component.scss
new file mode 100644
index 0000000..f844f97
--- /dev/null
+++ b/src/app/components/contacts/contact-detail/contact-detail.component.scss
@@ -0,0 +1,31 @@
+section {
+  position: absolute;
+  top: -64px;
+  left: 339px;
+  width: calc(100vw - 635px);
+  min-height: calc(100vh - 128px);
+  padding: 64px 48px 48px 48px;
+  box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.1);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 73px;
+  .title {
+    font-size: 61px;
+    font-weight: 700;
+    padding-right: 24px;
+  }
+  .metrics-txt {
+    font-size: 27px;
+    font-weight: 400;
+    padding-left: 24px;
+  }
+  .blue-bar {
+    height: 80%;
+    width: 3px;
+    background-color: var(--light-blue);
+  }
+}
diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.spec.ts b/src/app/components/contacts/contact-detail/contact-detail.component.spec.ts
new file mode 100644
index 0000000..509a228
--- /dev/null
+++ b/src/app/components/contacts/contact-detail/contact-detail.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactDetailComponent } from './contact-detail.component';
+
+describe('ContactDetailComponent', () => {
+  let component: ContactDetailComponent;
+  let fixture: ComponentFixture<ContactDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ContactDetailComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ContactDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.ts b/src/app/components/contacts/contact-detail/contact-detail.component.ts
new file mode 100644
index 0000000..db09ea9
--- /dev/null
+++ b/src/app/components/contacts/contact-detail/contact-detail.component.ts
@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+import { ContactsComponent } from '../contacts.component';
+import { ActivatedRoute } from '@angular/router';
+import { UserService } from '../../../services/user.service';
+
+@Component({
+  selector: 'app-contact-detail',
+  standalone: true,
+  imports: [],
+  templateUrl: './contact-detail.component.html',
+  styleUrl: './contact-detail.component.scss',
+})
+export class ContactDetailComponent {
+  paramsId = '';
+
+  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'];
+      });
+    }
+  }
+}
diff --git a/src/app/components/contacts/contacts.component.html b/src/app/components/contacts/contacts.component.html
index 2a9c505..1464f31 100644
--- a/src/app/components/contacts/contacts.component.html
+++ b/src/app/components/contacts/contacts.component.html
@@ -20,7 +20,7 @@
         <div
           class="circle"
           [ngStyle]="{
-            'background-color': displayUserDetails(
+            'background-color': userService.displayUserDetails(
               usersByFirstLetter[sortLetter][index],
               'color'
             )
@@ -28,7 +28,7 @@
         >
           <div class="initials">
             {{
-              displayUserDetails(
+              userService.displayUserDetails(
                 usersByFirstLetter[sortLetter][index],
                 "initials"
               )
@@ -36,17 +36,25 @@
           </div>
         </div>
         <div class="details">
-          <p>{{ displayUserName(usersByFirstLetter[sortLetter][index]) }}</p>
-          <a href="tel:">asdasdasd</a>
+          <p>
+            {{
+              userService.displayUserName(usersByFirstLetter[sortLetter][index])
+            }}
+          </p>
+          <span>
+            {{
+              userService.displayUserDetails(
+                usersByFirstLetter[sortLetter][index],
+                "email"
+              )
+            }}
+          </span>
         </div>
       </div>
       } }
     </div>
   </div>
   @if (paramsId) {
-  <div class="right-frame">
-    <h2>Contacts</h2>
-    <p>{{ displayUserName(paramsId) }}</p>
-  </div>
+  <app-contact-detail></app-contact-detail>
   }
 </section>
diff --git a/src/app/components/contacts/contacts.component.scss b/src/app/components/contacts/contacts.component.scss
index 875199b..aaedb97 100644
--- a/src/app/components/contacts/contacts.component.scss
+++ b/src/app/components/contacts/contacts.component.scss
@@ -94,7 +94,7 @@ section {
     font-weight: 400;
     margin-bottom: 6px;
   }
-  a {
+  span {
     font-size: 16px;
     font-weight: 400;
     text-decoration: none;
@@ -102,16 +102,6 @@ section {
   }
 }
 
-.right-frame {
-  position: absolute;
-  top: -64px;
-  left: 339px;
-  width: calc(100vw - 635px);
-  min-height: calc(100vh - 128px);
-  padding: 64px 48px 48px 48px;
-  box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.1);
-}
-
 @media screen and (max-width: 910px) {
   .left-frame {
     position: fixed;
diff --git a/src/app/components/contacts/contacts.component.ts b/src/app/components/contacts/contacts.component.ts
index aad2b3e..ecfebc9 100644
--- a/src/app/components/contacts/contacts.component.ts
+++ b/src/app/components/contacts/contacts.component.ts
@@ -1,13 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { UserService } from '../../services/user.service';
 import { User } from '../../interfaces/user.interface';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, RouterLink } from '@angular/router';
+import { ContactDetailComponent } from './contact-detail/contact-detail.component';
 
 @Component({
   selector: 'app-contacts',
   standalone: true,
-  imports: [CommonModule, RouterLink],
+  imports: [CommonModule, RouterLink, ContactDetailComponent],
   templateUrl: './contacts.component.html',
   styleUrl: './contacts.component.scss',
 })
@@ -18,10 +19,9 @@ export class ContactsComponent {
   userMap: { [key: string]: User } = {};
   paramsId = '';
 
-  constructor(private userService: UserService, private route: ActivatedRoute) {
+  constructor(public userService: UserService, private route: ActivatedRoute) {
     this.userService.subUserList().subscribe(() => {
       this.allUsers = this.loadAllUser();
-      this.organizeUserData();
       this.sortAllUsers();
       this.sortUsersFirstLetter();
       this.sortUsersByFirstLetter();
@@ -40,13 +40,6 @@ export class ContactsComponent {
     }
   }
 
-  organizeUserData() {
-    this.userMap = {};
-    this.allUsers.forEach((user) => {
-      this.userMap[user.id] = user;
-    });
-  }
-
   loadAllUser(): User[] {
     // Without Guest
     return this.userService.allUsers.filter((user, index) => index !== 0);
@@ -77,19 +70,4 @@ export class ContactsComponent {
       this.usersByFirstLetter[firstLetter].push(user.id);
     });
   }
-
-  displayUserName(id: string) {
-    if (this.userMap[id]) {
-      return this.userMap[id].firstName + ', ' + this.userMap[id].lastName;
-    }
-    return '';
-  }
-
-  displayUserDetails(id: string, query: keyof User) {
-    if (this.userMap[id]) {
-      const user = this.userMap[id];
-      return user[query];
-    }
-    return '';
-  }
 }
diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts
index aec0957..72a61b5 100644
--- a/src/app/services/user.service.ts
+++ b/src/app/services/user.service.ts
@@ -10,8 +10,13 @@ export class UserService {
   firestore: Firestore = inject(Firestore);
 
   allUsers: User[] = [];
+  userMap: { [key: string]: User } = {};
 
-  constructor() {}
+  constructor() {
+    this.subUserList().subscribe(() => {
+      this.organizeUserData();
+    });
+  }
 
   subUserList() {
     return new Observable<void>((observer) => {
@@ -29,4 +34,26 @@ export class UserService {
       return () => unsubscribe();
     });
   }
+
+  organizeUserData() {
+    this.userMap = {};
+    this.allUsers.forEach((user) => {
+      this.userMap[user.id] = user;
+    });
+  }
+
+  displayUserName(id: string) {
+    if (this.userMap[id]) {
+      return this.userMap[id].firstName + ', ' + this.userMap[id].lastName;
+    }
+    return 'sd';
+  }
+
+  displayUserDetails(id: string, query: keyof User) {
+    if (this.userMap[id]) {
+      const user = this.userMap[id];
+      return user[query];
+    }
+    return '';
+  }
 }