diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.html b/src/app/components/contacts/contact-detail/contact-detail.component.html
index 7d33130..2480d4a 100644
--- a/src/app/components/contacts/contact-detail/contact-detail.component.html
+++ b/src/app/components/contacts/contact-detail/contact-detail.component.html
@@ -28,7 +28,7 @@
           {{ userService.getUserDetails(currentUserId, "initials") }}
         </div>
       </div>
-      <div class="details">
+      <div class="word-wrap">
         <div class="name">
           {{ userService.getUserDetails(currentUserId, "firstName") }}
           {{ userService.getUserDetails(currentUserId, "lastName") }}
@@ -45,7 +45,7 @@
         </div>
       </div>
     </div>
-    <div class="contact">
+    <div class="contact word-wrap">
       <div class="headline">Contact Information</div>
       <div class="info">
         <p>Email:</p>
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 8f515b5..0101140 100644
--- a/src/app/components/contacts/contact-detail/contact-detail.component.scss
+++ b/src/app/components/contacts/contact-detail/contact-detail.component.scss
@@ -70,8 +70,7 @@ section {
   }
 }
 
-.details {
-  margin-left: 32px;
+.word-wrap {
   overflow: hidden;
   word-wrap: break-word;
   overflow-wrap: break-word;
@@ -82,13 +81,14 @@ section {
   display: flex;
   align-items: center;
   font-size: 47px;
-  font-weight: 500;
+  font-weight: 600;
+  padding-left: 32px;
 }
 
 .btns {
   display: flex;
   align-items: center;
-  padding-top: 12px;
+  padding: 12px 0 0 32px;
   img {
     width: 20px;
     height: 20px;
@@ -228,6 +228,23 @@ section {
     width: calc(100vw - 36px);
   }
 
+  .name {
+    font-size: 36px;
+    font-weight: 600;
+    padding-left: 18px;
+  }
+
+  .circle {
+    width: 80px;
+    min-width: 80px;
+    height: 80px;
+    border: 2px solid var(--white);
+    .initials {
+      font-size: 27px;
+      font-weight: 400;
+    }
+  }
+
   .headerline {
     .title {
       font-size: 47px;
diff --git a/src/app/components/contacts/contacts.component.scss b/src/app/components/contacts/contacts.component.scss
index e3b8330..4902c19 100644
--- a/src/app/components/contacts/contacts.component.scss
+++ b/src/app/components/contacts/contacts.component.scss
@@ -157,4 +157,12 @@ section {
       margin-top: 0;
     }
   }
+
+  .contact {
+    padding: 16px 0;
+  }
+
+  .first-letter {
+    padding-left: 16px;
+  }
 }
diff --git a/src/app/components/contacts/contacts.component.ts b/src/app/components/contacts/contacts.component.ts
index 7aa57a9..893a2ac 100644
--- a/src/app/components/contacts/contacts.component.ts
+++ b/src/app/components/contacts/contacts.component.ts
@@ -41,7 +41,6 @@ export class ContactsComponent {
     } else {
       this.showAllUsers = true;
     }
-    console.log(this.showAllUsers);
   }
 
   loadAllUserWithoutGuest(): User[] {
diff --git a/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss b/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss
index c527eb2..1cb1eb6 100644
--- a/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss
+++ b/src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss
@@ -40,7 +40,7 @@ nav {
 
 @media screen and (max-width: 450px) {
   .nav-links {
-    width: 70px;
+    width: 80px;
     height: 60px;
     img {
       width: 20px;
@@ -51,6 +51,7 @@ nav {
 
 @media screen and (max-width: 380px) {
   .nav-links {
+    width: 70px;
     p {
       font-size: 12px;
     }