diff --git a/app/assets/stylesheets/pages/_contacts.scss b/app/assets/stylesheets/pages/_contacts.scss
index e2cdc7c..7e420f5 100644
--- a/app/assets/stylesheets/pages/_contacts.scss
+++ b/app/assets/stylesheets/pages/_contacts.scss
@@ -152,6 +152,7 @@ a:hover {
 @media only screen and (max-width: 1100px) {
     .modal-picture {
       width: 50px;
+      height: 50px;
     }
 }
 
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 948618c..5e9289f 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -81,8 +81,10 @@ App.cable.subscriptions.create({
       acceptButton.style.display = "block"
 
       triggerCalleeModalEvent()
+      const photo = document.getElementById('caller-photo');
       document.getElementById('caller-name').innerHTML = data["message"]["caller_info"]
-      document.getElementById('caller-photo').src = data["message"]["caller_photo"]
+      photo.src = data["message"]["caller_photo"];
+      photo.style.objectFit = "cover";
 
       chatRoomId = data["message"]["chat_room_id"]
       console.log(`user with id: ${userId} needs to subscribe to chatroom ${[chatRoomId]}`)
diff --git a/app/views/pages/_contact.html.erb b/app/views/pages/_contact.html.erb
index 86f0f0d..e3c3aca 100644
--- a/app/views/pages/_contact.html.erb
+++ b/app/views/pages/_contact.html.erb
@@ -4,7 +4,7 @@
       <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar profile dropdown-toggle img-circle" width=65>
     <% else %>
       <%= cl_image_tag(contact.photo, class: "profile avatar dropdown-toggle img-circle", width:65, transformation: [
-          { gravity: "face:auto", width: 100, height: 100, radius: "max", crop: "crop" }
+          { gravity: "face:auto", width: 500, height: 500, radius: "max", crop: "crop" }
         ])%>
     <% end %>
     <div class="text text-color">
@@ -42,7 +42,7 @@
                 <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar profile dropdown-toggle img-circle modal-picture" width=150>
               <% else %>
                 <%= cl_image_tag(contact.photo, class: "profile avatar dropdown-toggle img-circle modal-picture", width:150, transformation: [
-          { gravity: "face:auto", width: 100, height: 100, radius: "max", crop: "crop" }])%>
+          { gravity: "face:auto", width: 500, height: 500, radius: "max", crop: "crop" }])%>
               <% end %>
               <div class="modal-text">
                 <h4 class="modal-title" id="myModalLabel">Calling</h4>
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index 5c2a24d..b5d084f 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -16,7 +16,7 @@
               <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="avatar dropdown-toggle img-circle">
             <% else %>
               <%= cl_image_tag(current_user.photo, class: "avatar dropdown-toggle img-circle", transformation: [
-          { gravity: "face:auto", width: 100, height: 100, radius: "max", crop: "crop" }
+          { gravity: "face:auto", width: 500, height: 500, radius: "max", crop: "crop" }
         ])%>
             <% end %>
           </div>