diff --git a/backend/main.go b/backend/main.go
index e0b58e3..032434a 100644
--- a/backend/main.go
+++ b/backend/main.go
@@ -107,6 +107,13 @@ func main() {
 						Data: note,
 					})
 				}
+
+				for _, contact := range image.Contacts {
+					dataTypes = append(dataTypes, DataType{
+						Type: "contact",
+						Data: contact,
+					})
+				}
 			}
 
 			jsonImages, err := json.Marshal(dataTypes)
@@ -210,7 +217,7 @@ func main() {
 				return
 			}
 
-			userImage, err := imageModel.Process(r.Context(), uuid.MustParse(userId), model.Image{
+			userImage, err := imageModel.Process(r.Context(), userId, model.Image{
 				Image:     image,
 				ImageName: imageName,
 			})
diff --git a/backend/models/user.go b/backend/models/user.go
index ff72d24..5e5dd1b 100644
--- a/backend/models/user.go
+++ b/backend/models/user.go
@@ -39,6 +39,8 @@ type ImageWithProperties struct {
 	}
 
 	Notes []model.Notes
+
+	Contacts []model.Contacts
 }
 
 func getUserIdFromImage(ctx context.Context, dbPool *sql.DB, imageId uuid.UUID) (uuid.UUID, error) {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4ab8981..844d7c1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,13 +1,14 @@
+import { A } from "@solidjs/router";
 import { IconSearch } from "@tabler/icons-solidjs";
 import clsx from "clsx";
 import Fuse from "fuse.js";
 import { For, createEffect, createResource, createSignal } from "solid-js";
 import { SearchCardEvent } from "./components/search-card/SearchCardEvent";
 import { SearchCardLocation } from "./components/search-card/SearchCardLocation";
-import { UserImage, getUserImages } from "./network";
-import { getCardSize } from "./utils/getCardSize";
 import { SearchCardNote } from "./components/search-card/SearchCardNote";
-import { A } from "@solidjs/router";
+import { type UserImage, getUserImages } from "./network";
+import { getCardSize } from "./utils/getCardSize";
+import { SearchCardContact } from "./components/search-card/SearchCardContact";
 
 const getCardComponent = (item: UserImage) => {
     switch (item.type) {
@@ -17,8 +18,8 @@ const getCardComponent = (item: UserImage) => {
             return <SearchCardEvent item={item} />;
         case "note":
             return <SearchCardNote item={item} />;
-        // case "Contact":
-        //     return <SearchCardContact item={item} />;
+        case "contact":
+            return <SearchCardContact item={item} />;
         // case "Website":
         //     return <SearchCardWebsite item={item} />;
         // case "Note":
diff --git a/frontend/src/components/search-card/SearchCardContact.tsx b/frontend/src/components/search-card/SearchCardContact.tsx
index e817e34..066fae3 100644
--- a/frontend/src/components/search-card/SearchCardContact.tsx
+++ b/frontend/src/components/search-card/SearchCardContact.tsx
@@ -1,10 +1,10 @@
 import { Separator } from "@kobalte/core/separator";
 
 import { IconUser } from "@tabler/icons-solidjs";
-import type { Contact } from "../../network/types";
+import type { UserImage } from "../../network";
 
 type Props = {
-    item: Contact;
+    item: Extract<UserImage, { type: "contact" }>;
 };
 
 export const SearchCardContact = ({ item }: Props) => {
@@ -13,13 +13,15 @@ export const SearchCardContact = ({ item }: Props) => {
     return (
         <div class="absolute inset-0 p-3 bg-orange-50">
             <div class="grid grid-cols-[auto_20px] gap-1 mb-1">
-                <p class="text-sm text-neutral-900 font-bold">{data.name}</p>
+                <p class="text-sm text-neutral-900 font-bold">{data.Name}</p>
                 <IconUser size={20} class="text-neutral-500 mt-1" />
             </div>
-            <p class="text-xs text-neutral-500">{data.phoneNumber}</p>
+            <p class="text-xs text-neutral-500">{data.PhoneNumber}</p>
+            <Separator class="my-2" />
+            <p class="text-xs text-neutral-500">{data.Email}</p>
             <Separator class="my-2" />
             <p class="text-xs text-neutral-500 line-clamp-2 overflow-hidden">
-                {data.notes}
+                {data.Description}
             </p>
         </div>
     );
diff --git a/frontend/src/network/index.ts b/frontend/src/network/index.ts
index 9c5100c..1fd94b5 100644
--- a/frontend/src/network/index.ts
+++ b/frontend/src/network/index.ts
@@ -109,10 +109,16 @@ const noteDataType = strictObject({
     data: noteValidator,
 });
 
+const contactDataType = strictObject({
+    type: literal("contact"),
+    data: contactValidator,
+});
+
 const dataTypeValidator = variant("type", [
     locationDataType,
     eventDataType,
     noteDataType,
+    contactDataType,
 ]);
 const getUserImagesResponseValidator = array(dataTypeValidator);