diff --git a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.html b/src/app/components/contacts/contact-edit-new/contact-edit-new.component.html
index d0695e9..d3f349a 100644
--- a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.html
+++ b/src/app/components/contacts/contact-edit-new/contact-edit-new.component.html
@@ -28,4 +28,31 @@
     </div>
   </div>
 </section>
+} @else {
+<section>
+  <div class="dialog">
+    <div class="header">
+      <img src="./../../../../assets/img/logo.svg" alt="" />
+      <p>{{ "contacts.addContact" | translate }}</p>
+      <app-btn-close [isEditContactDialogOpen]="false"></app-btn-close>
+    </div>
+    <div class="content">
+      <div class="badge">
+        <div
+          class="circle"
+          [ngStyle]="{
+            'background-color': randomColor
+          }"
+        >
+          <div class="initials">{{ userInitials }}</div>
+        </div>
+      </div>
+      <div class="form">
+        <app-contact-form
+          (inititalsEmitter)="inititalsEmitter($event)"
+        ></app-contact-form>
+      </div>
+    </div>
+  </div>
+</section>
 }
diff --git a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.ts b/src/app/components/contacts/contact-edit-new/contact-edit-new.component.ts
index ec2b7d3..fa16c6a 100644
--- a/src/app/components/contacts/contact-edit-new/contact-edit-new.component.ts
+++ b/src/app/components/contacts/contact-edit-new/contact-edit-new.component.ts
@@ -1,9 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { BtnCloseComponent } from '../../../shared/components/buttons/btn-close/btn-close.component';
 import { FirebaseService } from '../../../services/firebase.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { ContactFormComponent } from './contact-form/contact-form.component';
+import { SharedService } from '../../../services/shared.service';
+import { User } from '../../../interfaces/user.interface';
 
 @Component({
   selector: 'app-contact-edit',
@@ -17,8 +19,33 @@ import { ContactFormComponent } from './contact-form/contact-form.component';
   templateUrl: './contact-edit-new.component.html',
   styleUrl: './contact-edit-new.component.scss',
 })
-export class ContactEditNewComponent {
+export class ContactEditNewComponent implements OnInit {
   @Input() currentUserId: string | undefined;
+  randomColor: string = '';
+  userInitials: string = '';
 
-  constructor(public firebaseService: FirebaseService) {}
+  userData: User = {
+    uId: '',
+    firstName: '',
+    lastName: '',
+    email: '',
+    phone: '',
+    initials: '',
+    color: this.randomColor,
+    status: false,
+    lastLogin: 0,
+  };
+
+  constructor(
+    public firebaseService: FirebaseService,
+    public sharedService: SharedService
+  ) {}
+
+  inititalsEmitter(emitter: string) {
+    this.userInitials = emitter;
+  }
+
+  ngOnInit() {
+    this.randomColor = this.sharedService.generateRandomColor();
+  }
 }
diff --git a/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.html b/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.html
index 3b12137..730dd15 100644
--- a/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.html
+++ b/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.html
@@ -19,6 +19,7 @@
         }}"
         [(ngModel)]="contactData.firstName"
         autocomplete="off"
+        (keyup)="updateFormData()"
         required
       />
       @if (sharedService.isContactViewMedia) {
@@ -41,6 +42,7 @@
         }}"
         [(ngModel)]="contactData.lastName"
         autocomplete="off"
+        (keyup)="updateFormData()"
         required
       />
     </div>
diff --git a/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts b/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts
index 5a3ab84..d2b89d4 100644
--- a/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts
+++ b/src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts
@@ -1,4 +1,11 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { SharedService } from '../../../../services/shared.service';
@@ -13,7 +20,8 @@ import { FormBtnComponent } from '../../../../shared/components/buttons/form-btn
   styleUrl: './contact-form.component.scss',
 })
 export class ContactFormComponent implements OnChanges {
-  @Input() currentUserId!: string;
+  @Input() currentUserId: string | undefined;
+  @Output() inititalsEmitter = new EventEmitter<string>();
 
   constructor(
     private firebaseService: FirebaseService,
@@ -35,24 +43,51 @@ export class ContactFormComponent implements OnChanges {
     }
   }
 
+  addInitials() {
+    const initials = this.contactData
+      ? this.contactData.firstName.slice(0, 1) +
+        this.contactData.lastName.slice(0, 1)
+      : '';
+    this.inititalsEmitter.emit(initials);
+  }
+
+  updateFormData() {
+    console.log(this.contactData);
+    this.addInitials();
+    const initials = this.contactData
+      ? this.contactData.firstName.slice(0, 1).toUpperCase() +
+        this.contactData.lastName.slice(0, 1).toUpperCase()
+      : '';
+    console.log(initials);
+  }
+
   private updateContactData() {
-    this.contactData.firstName = this.firebaseService
-      .getUserDetails(this.currentUserId, 'firstName')
-      .join(', ');
-    this.contactData.lastName = this.firebaseService
-      .getUserDetails(this.currentUserId, 'lastName')
-      .join(', ');
-    this.contactData.email = this.firebaseService
-      .getUserDetails(this.currentUserId, 'email')
-      .join(', ');
-    this.contactData.phone = this.firebaseService
-      .getUserDetails(this.currentUserId, 'phone')
-      .join(', ');
+    if (this.currentUserId) {
+      this.contactData.firstName = this.firebaseService
+        .getUserDetails(this.currentUserId, 'firstName')
+        .join(', ');
+      this.contactData.lastName = this.firebaseService
+        .getUserDetails(this.currentUserId, 'lastName')
+        .join(', ');
+      this.contactData.email = this.firebaseService
+        .getUserDetails(this.currentUserId, 'email')
+        .join(', ');
+      this.contactData.phone = this.firebaseService
+        .getUserDetails(this.currentUserId, 'phone')
+        .join(', ');
+    }
   }
 
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
-      this.firebaseService.updateUserData(this.currentUserId, this.contactData);
+      if (this.currentUserId) {
+        this.firebaseService.updateUserData(
+          this.currentUserId,
+          this.contactData
+        );
+      } else {
+        console.log('new contact');
+      }
       this.closeEditDialog();
     }
   }
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 60bafbe..2aca5b1 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -141,6 +141,7 @@
     "contactPhoneTxT": "Keine Telefonnummer",
     "contactLastOnline": "Zuletzt online gesehen",
     "contactLastOnlineTxt": "Derzeit online",
+    "addContact": "Kontakt hinzufügen",
     "editContact": "Kontakt bearbeiten",
     "firstName": "Vorname",
     "lastName": "Nachname",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index d6c817a..76e0543 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -142,6 +142,7 @@
     "contactLastOnline": "Last seen online",
     "contactLastOnlineTxt": "Currently online",
     "editContact": "Edit contact",
+    "addContact": "Add contact",
     "firstName": "First name",
     "lastName": "Last name",
     "email": "Email",