diff --git a/src/assets/images/team/ihor_hladkov.jfif b/src/assets/images/team/ihor_hladkov.jfif
new file mode 100644
index 0000000..f436a84
Binary files /dev/null and b/src/assets/images/team/ihor_hladkov.jfif differ
diff --git a/src/assets/images/team/maksym_kuznetsov.jfif b/src/assets/images/team/maksym_kuznetsov.jfif
new file mode 100644
index 0000000..a97ae7f
Binary files /dev/null and b/src/assets/images/team/maksym_kuznetsov.jfif differ
diff --git a/src/assets/images/team/nazar_baraban.jfif b/src/assets/images/team/nazar_baraban.jfif
new file mode 100644
index 0000000..d179a10
Binary files /dev/null and b/src/assets/images/team/nazar_baraban.jfif differ
diff --git a/src/assets/images/team/olena_vats.jfif b/src/assets/images/team/olena_vats.jfif
new file mode 100644
index 0000000..3a42823
Binary files /dev/null and b/src/assets/images/team/olena_vats.jfif differ
diff --git a/src/assets/images/team/olha_sheliakina.jfif b/src/assets/images/team/olha_sheliakina.jfif
new file mode 100644
index 0000000..cbd4fa0
Binary files /dev/null and b/src/assets/images/team/olha_sheliakina.jfif differ
diff --git a/src/assets/images/team/vlad_roznatovskyi.jfif b/src/assets/images/team/vlad_roznatovskyi.jfif
new file mode 100644
index 0000000..9b4b20d
Binary files /dev/null and b/src/assets/images/team/vlad_roznatovskyi.jfif differ
diff --git a/src/components/ContactCard.tsx b/src/components/ContactCard.tsx
new file mode 100644
index 0000000..3408508
--- /dev/null
+++ b/src/components/ContactCard.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Contact } from '../types/Contact';
+import { FiGithub, FiLinkedin, FiMail, FiSend } from 'react-icons/fi';
+
+type Props = {
+  contact: Contact;
+};
+
+const ContactCard: React.FC<Props> = ({ contact }) => {
+  const {
+    name: devName,
+    image,
+    motto,
+    linkedIn,
+    github,
+    email,
+    telegramLink,
+  } = contact;
+
+  return (
+    <article
+      className="card box-border p-8 relative
+        flex flex-col gap-4
+        border border-secondary rounded-lg
+        min-w-[272px]
+        bg-white text-primary
+        hover:shadow-card"
+    >
+      <a href={linkedIn} target="_blank">
+        <img
+          alt={devName}
+          src={require(`../assets/images/team/${image}`)}
+          className="w-[210px] h-[210px] object-cover rounded-full self-center"
+        />
+      </a>
+
+      <h2 className="font-bold text-xl">{devName}</h2>
+
+      <ul className="text-secondary">
+        <li>
+          <a
+            href={linkedIn}
+            className="flex gap-2 items-center hover:text-secondary-accent"
+            target="_blank"
+          >
+            <FiLinkedin />
+            LinkedIn
+          </a>
+        </li>
+        <li>
+          <a
+            href={github}
+            className="flex gap-2 items-center hover:text-secondary-accent"
+            target="_blank"
+          >
+            <FiGithub />
+            Github
+          </a>
+        </li>
+        <li>
+          <a
+            href={`mailto:${email}`}
+            className="flex gap-2 items-center hover:text-secondary-accent"
+          >
+            <FiMail />
+            Email
+          </a>
+        </li>
+        <li>
+          <a
+            href={telegramLink}
+            className="flex gap-2 items-center hover:text-secondary-accent"
+            target="_blank"
+          >
+            <FiSend />
+            Telegram
+          </a>
+        </li>
+      </ul>
+
+      <p>{motto}</p>
+    </article>
+  );
+};
+
+export default ContactCard;
diff --git a/src/pages/ContactsPage.tsx b/src/pages/ContactsPage.tsx
index b32702a..75ad46f 100644
--- a/src/pages/ContactsPage.tsx
+++ b/src/pages/ContactsPage.tsx
@@ -1,4 +1,6 @@
 import BreadCrumb from '../components/BreadCrumb';
+import ContactCard from '../components/ContactCard';
+import { contacts } from '../utils/contacts';
 
 const ContactsPage = () => {
   return (
@@ -15,60 +17,9 @@ const ContactsPage = () => {
       </div>
 
       <section className="grid grid-cols-1 gap-4 tablet:grid-cols-2 desktop:grid-cols-4">
-        <article
-          className="card box-border p-8 relative
-            border border-secondary rounded-lg
-            min-w-[272px]  max-h-[440px]
-            bg-white
-            hover:shadow-card tablet:max-h-[506px]"
-        >
-          <h2>Olena Vats</h2>
-        </article>
-        <article
-          className="card box-border p-8 relative
-            border border-secondary rounded-lg
-            min-w-[272px]  max-h-[440px]
-            bg-white
-            hover:shadow-card tablet:max-h-[506px]"
-        >
-          <h2>Olena Vats</h2>
-        </article>
-        <article
-          className="card box-border p-8 relative
-            border border-secondary rounded-lg
-            min-w-[272px]  max-h-[440px]
-            bg-white
-            hover:shadow-card tablet:max-h-[506px]"
-        >
-          <h2>Olena Vats</h2>
-        </article>
-        <article
-          className="card box-border p-8 relative
-            border border-secondary rounded-lg
-            min-w-[272px]  max-h-[440px]
-            bg-white
-            hover:shadow-card tablet:max-h-[506px]"
-        >
-          <h2>Olena Vats</h2>
-        </article>
-        <article
-          className="card box-border p-8 relative
-            border border-secondary rounded-lg
-            min-w-[272px]  max-h-[440px]
-            bg-white
-            hover:shadow-card tablet:max-h-[506px]"
-        >
-          <h2>Olena Vats</h2>
-        </article>
-        <article
-          className="card box-border p-8 relative
-            border border-secondary rounded-lg
-            min-w-[272px]  max-h-[440px]
-            bg-white
-            hover:shadow-card tablet:max-h-[506px]"
-        >
-          <h2>Olena Vats</h2>
-        </article>
+        {contacts.map((contact) => (
+          <ContactCard key={contact.id} contact={contact} />
+        ))}
       </section>
     </main>
   );
diff --git a/src/types/Contact.ts b/src/types/Contact.ts
new file mode 100644
index 0000000..2e1c086
--- /dev/null
+++ b/src/types/Contact.ts
@@ -0,0 +1,10 @@
+export interface Contact {
+  name: string;
+  image: string;
+  id: string;
+  telegramLink: string;
+  github: string;
+  email: string;
+  linkedIn: string;
+  motto: string;
+}
diff --git a/src/utils/contacts.ts b/src/utils/contacts.ts
new file mode 100644
index 0000000..38d418b
--- /dev/null
+++ b/src/utils/contacts.ts
@@ -0,0 +1,65 @@
+import { Contact } from '../types/Contact';
+
+export const contacts: Contact[] = [
+  {
+    name: 'Maksym Kuznetsov',
+    image: 'maksym_kuznetsov.jfif',
+    id: 'dev-0',
+    telegramLink: 'https://t.me/MaxSchmide',
+    github: 'https://github.com/MaxSchmide',
+    email: 'kuznetsov.max.v@gmail.com',
+    linkedIn: 'https://www.linkedin.com/in/maxschmide/',
+    motto: "It's not a bug, it's a feature",
+  },
+  {
+    name: 'Olha Sheliakina',
+    image: 'olha_sheliakina.jfif',
+    id: 'dev-1',
+    telegramLink: 'https://t.me/olia_sheliakina',
+    github: 'https://github.com/OlhaSheliakina',
+    email: 'olha.sheliakina.mail@gmail.com',
+    linkedIn: 'https://www.linkedin.com/in/olha-sheliakina-248497283',
+    motto: "Code, Debug, Don't Cry (Much)",
+  },
+  {
+    name: 'Nazar Baraban',
+    image: 'nazar_baraban.jfif',
+    id: 'dev-2',
+    telegramLink: 'https://t.me/nazar_10_04',
+    github: 'https://github.com/NazarBaraban',
+    email: 'barabannazar44@gmail.com',
+    linkedIn: 'https://www.linkedin.com/in/nazar-baraban-5661b5283/',
+    motto: 'Programmers never make mistakes, we just have unexpected features',
+  },
+  {
+    name: 'Ihor Hladkov',
+    image: 'ihor_hladkov.jfif',
+    id: 'dev-3',
+    telegramLink: 'https://t.me/ihorhladkov',
+    github: 'https://github.com/ihorhladkov',
+    email: 'ihor.hladkov@gmail.com',
+    linkedIn: 'https://www.linkedin.com/in/ihor-hladkov-b9b481283/',
+    motto:
+      'Once, I asked, "What is the meaning of life?" In response, I received, "Read the documentation."',
+  },
+  {
+    name: 'Vlad Roznatovskyi',
+    image: 'vlad_roznatovskyi.jfif',
+    id: 'dev-4',
+    telegramLink: 'https://t.me/perfectAcedia',
+    github: 'https://github.com/perfectAcedia',
+    email: 'vladyslav.roznatovskyi@gmail.com',
+    linkedIn: 'https://www.linkedin.com/in/vladyslav-roznatovskyi-3b9491283/',
+    motto: 'No desire, no hire',
+  },
+  {
+    name: 'Olena Vats',
+    image: 'olena_vats.jfif',
+    id: 'dev-5',
+    telegramLink: 'https://t.me/olenaOle1',
+    github: 'https://github.com/olena-ole',
+    email: 'olenavats.employment@gmail.com',
+    linkedIn: 'https://www.linkedin.com/in/olena-vats-20ab131b8/',
+    motto: 'It works on my machine',
+  },
+];