diff --git a/client/package-lock.json b/client/package-lock.json
index 00789d7..dfb8a7e 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -22,7 +22,7 @@
         "next": "13.2.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "use-sync-v": "^2.0.10"
+        "use-sync-v": "^2.0.16"
       },
       "engines": {
         "node": "18.14.2",
@@ -2158,6 +2158,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/diff": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
+      "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -4954,10 +4962,11 @@
       }
     },
     "node_modules/use-sync-v": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/use-sync-v/-/use-sync-v-2.0.10.tgz",
-      "integrity": "sha512-Jwm/V/vuRDSWDJz6N0JdnOdTnHkd3Hg5Hz8VWsnoh2l+sIlukCSTZrLWKcFsIeGxmMbwuiTxPgmfiT2L/za7jA==",
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/use-sync-v/-/use-sync-v-2.0.16.tgz",
+      "integrity": "sha512-3+NMa+wFHbcvxB2pS2Ps0muSiBEoyCfg50iVET7PXJ4kw3bMzxtLEjs9DtVxkJnAEID3VDIGEPz5KBZM6oSgjg==",
       "dependencies": {
+        "diff": "^5.1.0",
         "lodash-es": "^4.17.21",
         "react": "^18.2.0"
       }
diff --git a/client/package.json b/client/package.json
index 8a92bcb..4562dcc 100644
--- a/client/package.json
+++ b/client/package.json
@@ -29,6 +29,6 @@
     "next": "13.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "use-sync-v": "^2.0.10"
+    "use-sync-v": "^2.0.16"
   }
 }
diff --git a/client/src/components/contacts/display/contactsCardContainer/contactCardGroup/contactCard/index.js b/client/src/components/contacts/display/contactsCardContainer/contactCardGroup/contactCard/index.js
index db5fa9f..ca9dae2 100644
--- a/client/src/components/contacts/display/contactsCardContainer/contactCardGroup/contactCard/index.js
+++ b/client/src/components/contacts/display/contactsCardContainer/contactCardGroup/contactCard/index.js
@@ -1,6 +1,7 @@
+import { downloadBlobFromStorage } from '@/lib/utils/firebase/storageutils'
 import { Avatar, Paper, Typography, useTheme } from '@mui/material'
 import { useRouter } from 'next/router'
-import { updateSyncV } from 'use-sync-v'
+import { updateSyncV, useQueryV } from 'use-sync-v'
 
 const getInitial = (first, second, last) => {
   const firstInitial = (first.match(
@@ -28,6 +29,12 @@ export const ContactCard = ({ contact }) => {
   const router = useRouter()
   const theme = useTheme()
 
+  const { data } = useQueryV(`public_picture.${JSON.stringify(contact.profile_picture_url)}`, async () => {
+    const response = await downloadBlobFromStorage(contact.profile_picture_url)
+    const public_picture_url = URL.createObjectURL(response)
+    return public_picture_url
+  })
+
   const initial = getInitial(
     contact.first_name,
     contact.middle_name,
@@ -68,6 +75,7 @@ export const ContactCard = ({ contact }) => {
             backgroundColor: `hsla(${backgroundColor},50%,80%,50%)`,
             border: '1px solid grey',
           }}
+          src={data}
         >
           {initial}
         </Avatar>
@@ -109,6 +117,7 @@ export const ContactCard = ({ contact }) => {
             backgroundColor: `hsla(${backgroundColor},50%,80%,50%)`,
             border: '1px solid grey',
           }}
+          src={data}
         >
           {initial}
         </Avatar>