diff --git a/package-lock.json b/package-lock.json
index 374e018..fc34002 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -2922,12 +2922,12 @@
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/cypress": {
-      "version": "12.17.3",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.17.3.tgz",
-      "integrity": "sha512-/R4+xdIDjUSLYkiQfwJd630S81KIgicmQOLXotFxVXkl+eTeVO+3bHXxdi5KBh/OgC33HWN33kHX+0tQR/ZWpg==",
+      "version": "12.17.4",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.17.4.tgz",
+      "integrity": "sha512-gAN8Pmns9MA5eCDFSDJXWKUpaL3IDd89N9TtIupjYnzLSmlpVr+ZR+vb4U/qaMp+lB6tBvAmt7504c3Z4RU5KQ==",
       "hasInstallScript": true,
       "dependencies": {
-        "@cypress/request": "^2.88.11",
+        "@cypress/request": "2.88.12",
         "@cypress/xvfb": "^1.2.4",
         "@types/node": "^16.18.39",
         "@types/sinonjs__fake-timers": "8.1.1",
@@ -2962,6 +2962,7 @@
         "minimist": "^1.2.8",
         "ospath": "^1.2.2",
         "pretty-bytes": "^5.6.0",
+        "process": "^0.11.10",
         "proxy-from-env": "1.0.0",
         "request-progress": "^3.0.0",
         "semver": "^7.5.3",
@@ -2978,9 +2979,9 @@
       }
     },
     "node_modules/cypress/node_modules/@types/node": {
-      "version": "16.18.39",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.39.tgz",
-      "integrity": "sha512-8q9ZexmdYYyc5/cfujaXb4YOucpQxAV4RMG0himLyDUOEr8Mr79VrqsFI+cQ2M2h89YIuy95lbxuYjxT4Hk4kQ=="
+      "version": "16.18.53",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.53.tgz",
+      "integrity": "sha512-vVmHeo4tpF8zsknALU90Hh24VueYdu45ZlXzYWFbom61YR4avJqTFDC3QlWzjuTdAv6/3xHaxiO9NrtVZXrkmw=="
     },
     "node_modules/cypress/node_modules/execa": {
       "version": "4.1.0",
@@ -3038,9 +3039,9 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.11.9",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
-      "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "node_modules/de-indent": {
       "version": "1.0.2",
@@ -6103,6 +6104,14 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
@@ -7281,9 +7290,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
-      "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig=="
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
diff --git a/public/img/_dev/Angy.jpg b/public/img/team-members/angela-busato.jpg
similarity index 100%
rename from public/img/_dev/Angy.jpg
rename to public/img/team-members/angela-busato.jpg
diff --git a/public/img/_dev/Danersound.jpg b/public/img/team-members/daner-sound.jpg
similarity index 100%
rename from public/img/_dev/Danersound.jpg
rename to public/img/team-members/daner-sound.jpg
diff --git a/public/img/_dev/davideimola.jpg b/public/img/team-members/davide-imola.jpg
similarity index 100%
rename from public/img/_dev/davideimola.jpg
rename to public/img/team-members/davide-imola.jpg
diff --git a/public/img/_dev/gabrielepuliti.png b/public/img/team-members/gabriele-puliti.png
similarity index 100%
rename from public/img/_dev/gabrielepuliti.png
rename to public/img/team-members/gabriele-puliti.png
diff --git a/public/img/_dev/lorenzopieri.png b/public/img/team-members/lorenzo-pieri.png
similarity index 100%
rename from public/img/_dev/lorenzopieri.png
rename to public/img/team-members/lorenzo-pieri.png
diff --git a/public/img/_dev/mikilombardi.jpeg b/public/img/team-members/miki-lombardi.jpeg
similarity index 100%
rename from public/img/_dev/mikilombardi.jpeg
rename to public/img/team-members/miki-lombardi.jpeg
diff --git a/public/img/_dev/nicpuppa.png b/public/img/team-members/nic-puppa.png
similarity index 100%
rename from public/img/_dev/nicpuppa.png
rename to public/img/team-members/nic-puppa.png
diff --git a/public/img/team-members/profile-ph.png b/public/img/team-members/profile-ph.png
new file mode 100644
index 0000000..0989209
Binary files /dev/null and b/public/img/team-members/profile-ph.png differ
diff --git a/src/components/MemberCard.vue b/src/components/MemberCard.vue
new file mode 100644
index 0000000..4b012e1
--- /dev/null
+++ b/src/components/MemberCard.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import SocialIcons from './SocialIcons.vue'
+
+defineProps<{
+  member: string
+}>()
+
+const socials = ['github', 'linkedin', 'twitter', 'website']
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div
+    class="overflow-hidden p-8 font-sans rounded bg-light-bg-secondary dark:bg-dark-bg-secondary"
+    data-test="team-card"
+    :data-test-member-name="`team-member-${member}`"
+  >
+    <div class="relative z-0 flex h-auto items-center justify-center rounded-full my-auto text-center">
+      <div
+        :data-test="`team-member-${member}-index-photo`"
+        class="block w-32 h-32 rounded-full bg-center bg-cover"
+        :style="`background-image: url( ${$t(`team.${member}.image`)} );`"
+      />
+    </div>
+    <div class="relative z-1 flex flex-col items-center justify-center gap-1">
+      <h2
+        class="text-6 font-700 text-text-primary"
+        :data-test="`team-member-${member}-name`"
+      >
+        {{ $t(`team.${member}.name`) }}
+      </h2>
+
+      <SocialIcons :member="member" :socials="socials" />
+
+      <router-link
+        class="font-700 w-fit px-4 py-1 border-1 border-solid border-transparent rounded-full bg-light-bg-primary text-light-text-primary dark:bg-dark-bg-primary dark:text-dark-text-primary hover:bg-dark-bg-primary hover:text-dark-text-primary dark:hover:bg-light-bg-primary dark:hover:text-light-text-primary "
+        :data-test="`team-member-${member}-page-link`"
+        :to="{ name: 'TeamMember', params: { member } }"
+      >
+        {{ t('redirect.profile') }}
+      </router-link>
+    </div>
+  </div>
+</template>
diff --git a/src/components/SocialIcons.vue b/src/components/SocialIcons.vue
new file mode 100644
index 0000000..41ed921
--- /dev/null
+++ b/src/components/SocialIcons.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{
+  member: string
+  socials: string[]
+}>()
+</script>
+
+<template>
+  <div class="w-fit">
+    <div v-for="social in socials" :key="social" class="inline-block">
+      <a
+        v-if="$t(`team.${member}.${social}_url`).length > 1"
+        class="inline-block m-0.2em group"
+        :data-test="`team-member-${member}-${social}`"
+        :href="$t(`team.${member}.${social}${social !== 'website' ? '_url' : ''}`)" target="_blank"
+      >
+        <i :class="[`text-1.2em ${social !== 'website' ? `fab fa-${social}` : 'fa fa-cloud'} group-hover:text-#2e3440`]" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/i18n/messages.ts b/src/i18n/messages.ts
index f4c0830..e456ed1 100644
--- a/src/i18n/messages.ts
+++ b/src/i18n/messages.ts
@@ -64,8 +64,8 @@ const messages = {
         github_url: 'https://github.com/thejoin95',
         linkedin_url: 'https://www.linkedin.com/in/miki-lombardi/',
         twitter_url: 'https://twitter.com/thejoin95',
-        image: '/img/_dev/mikilombardi.jpeg',
-        secondary_image: '/img/_dev/mikilombardi.jpeg',
+        image: '/img/team-members/miki-lombardi.jpeg',
+        secondary_image: '/img/team-members/miki-lombardi.jpeg',
         description: 'Mi definisco un passion driven developer, guidato dalla creatività che ha un sacco di altre passioni: basket, ciclismo, fotografia sono solo alcune di queste. Dal 2014 ho prestato la mia esperienza nel campo dello sviluppo software a Firenze, in Italia.\nHo lavorato come ingegnere del software e architetto di soluzioni per oltre 8 anni sia in società di prodotti che di consulenza, traendo il meglio da entrambi i mondi. Attualmente lavoro come Software Engineer presso Growens, dove sto sviluppando e ottimizzando la piattaforma di email marketing in un team Agile (SCRUM) in full remote.\nNel tempo libero girovago, creo eventi, partecipo a conferenze nazionali e internazionali cercando di vivere la vita al migliore delle mie possibilità!',
         website: 'https://www.mikilombardi.com/',
         permalink: 'mikilombardi',
@@ -76,9 +76,9 @@ const messages = {
         github_url: 'https://github.com/Wabri',
         linkedin_url: 'https://www.linkedin.com/in/%F0%9F%90%A7gabriele-puliti-b62915a9/',
         twitter_url: 'https://twitter.com/WabriDev',
-        image: '/img/_dev/gabrielepuliti.png',
-        secondary_image: '/img/_dev/gabrielepuliti.png',
-        description: 'Ho una dipendenza da tmux e vim. Non mi parlate di frontend perchè non ci capisco niente, ma se volete parlare della vostra rice linux sono tutto orecchi. Sono un appassionato di Storia da quasi sempre, ho provato a diventare un astrofisico fallendo miseramente e mi piace fare lunghe camminate sia in città che nella natura.',
+        image: '/img/team-members/gabriele-puliti.png',
+        secondary_image: '/img/team-members/gabriele-puliti.png',
+        description: 'Ingegnere informatico per lavoro e amante dei gatti, appassionato di giochi da tavolo e ciclista che si impegna a fondo senza successo. Ho un giardino, ma mi manca il pollice verde. Sono un uomo semplice che passa la maggior parte del suo tempo a configurare il suo linux e vim, per CLI tutti quanti!',
         website: '',
         permalink: 'gabrielepuliti',
       },
@@ -88,8 +88,8 @@ const messages = {
         github_url: 'https://github.com/404answernotfound',
         linkedin_url: 'https://www.linkedin.com/in/lorenzopieri/',
         twitter_url: 'https://twitter.com/404answnotfound',
-        image: '/img/_dev/lorenzopieri.png',
-        secondary_image: '/img/_dev/lorenzopieri.png',
+        image: '/img/team-members/lorenzo-pieri.png',
+        secondary_image: '/img/team-members/lorenzo-pieri.png',
         description: 'Scopritore di problemi a soluzioni note. Tanti argomenti diversi e troppe poche ore durante la giornata, trovo divertente insegnare cose complicate in parole semplici, raccontare storie con metodi poco ortodossi e passare il tempo a scrivere codice, anche questa un\'arte a tutti gli effetti. Credo fortemente nell\'unione tra scienza e valore umano (ndr. divertirsi a fare ciò che si ama) e partecipo con passione a non-profit e progetti intenzionati a portare maggiore valore culturale e conoscenza a coloro che ne sono interessati e affascinati.',
         website: 'https://404answernotfound.eu/',
         permalink: 'lorenzopieri',
@@ -100,9 +100,9 @@ const messages = {
         github_url: 'https://github.com/nicpuppa',
         linkedin_url: 'https://www.linkedin.com/in/nicola-puppa-b67a4911a/',
         twitter_url: '',
-        image: '/img/_dev/nicpuppa.png',
-        secondary_image: '/img/_dev/nicpuppa.png',
-        description: 'Globetrotter (covid permettendo), amante delle bibite gassate e climber. Amo le sfide. Mi piace studiare quello che mi interessa. Sono sintetico.',
+        image: '/img/team-members/nic-puppa.png',
+        secondary_image: '/img/team-members/nic-puppa.png',
+        description: 'Globetrotter, amante delle bibite gassate e climber. Amo le sfide. Mi piace studiare.',
         website: '',
         permalink: 'nicpuppa',
       },
@@ -112,9 +112,9 @@ const messages = {
         github_url: 'https://github.com/AngyDev',
         linkedin_url: 'https://www.linkedin.com/in/angela-busato-91145ab1/',
         twitter_url: 'https://twitter.com/angela_busato',
-        image: '/img/_dev/Angy.jpg',
-        secondary_image: '/img/_dev/Angy.jpg',
-        description: 'Sono un\'esploratrice, mi piace la ricerca e la sperimentazione negli ambiti più disparati, programmazione, fotografia, stampa 3D, e fai da te sono i primi della mia lista. Nel tempo libero mi piace viaggiare e conoscere nuovi posti, persone, culture ma soprattutto conoscere il cibo, ci sono sempre cose nuove da scoprire.',
+        image: '/img/team-members/angela-busato.jpg',
+        secondary_image: '/img/team-members/angela-busato.jpg',
+        description: 'Sono un\'esploratrice e il mio motto è "dire sempre di sì a nuove avventure". Mi piace la ricerca e la sperimentazione negli ambiti più disparati, programmazione, fotografia, stampa 3D, e fai da te sono i primi della mia lista. Nel tempo libero mi piace viaggiare e conoscere nuovi posti, persone, culture ma soprattutto conoscere il cibo, ci sono sempre cose nuove da scoprire.',
         website: 'https://www.angydev.eu/',
         permalink: 'AngyDev',
       },
@@ -124,9 +124,9 @@ const messages = {
         github_url: 'https://github.com/DanerSound',
         linkedin_url: 'https://www.linkedin.com/in/andre-cristhian-barreto-donayre/',
         twitter_url: ' ',
-        image: '/img/_dev/Danersound.jpg',
-        secondary_image: '/img/_dev/Danersound.jpg',
-        description: 'Mi piace pensare che possono costruire qualsiasi cosa, infatti nella mia mente ho gia progettato la macchina del tempo e il nervgear, ho solo problemi a trovare dei finanziatori disposti ad investire nella mia follia... chi sono io? beh sono un ex tecnico del suono che adesso sta riprendendo la via dell\'informatico! nel tempo libero e quando non ho voglia di studiare cerco mi montare circuiti usando arduino, creando dei corto il 90% delle volte...dopo tutto brusciando i compotenti si impara!',
+        image: '/img/team-members/daner-sound.jpg',
+        secondary_image: '/img/team-members/daner-sound.jpg',
+        description: 'Mi piace pensare che possono costruire qualsiasi cosa, infatti nella mia mente ho gia progettato la macchina del tempo e il nervgear, ho solo problemi a trovare dei finanziatori disposti ad investire nella mia follia... chi sono io? beh sono un ex tecnico del suono che adesso sta riprendendo la via dell\'informatico! nel tempo libero e quando non ho voglia di studiare cerco mi montare circuiti usando arduino, creando dei corto il 90% delle volte...dopo tutto bruciando i compotenti si impara!',
         website: '',
         permalink: 'DanerSound',
       },
@@ -136,12 +136,24 @@ const messages = {
         github_url: 'https://github.com/davideimola',
         linkedin_url: 'https://www.linkedin.com/in/davideimola/',
         twitter_url: ' ',
-        image: '/img/_dev/davideimola.jpg',
-        secondary_image: '/img/_dev/davideimola.jpg',
+        image: '/img/team-members/davide-imola.jpg',
+        secondary_image: '/img/team-members/davide-imola.jpg',
         description: 'Mettetemi in mano un Cloud provider e mi vedrete felice come un bimbo. Sono un grande appassionato di automazione, approcci cloud-native e tutto quella roba da DevOps Sith. Nel mio tempo libero, faccio roba da nerd (che strano!), quindi leggo fumetti e manga, vedo film e tanta altra roba molto cool (perchè io ci credo)!',
         website: 'https://davideimola.com',
         permalink: 'davideimola',
       },
+      lorenzobugli: {
+        name: 'Lorenzo Bugli',
+        github: 'BugliL',
+        github_url: 'https://github.com/buglil',
+        linkedin_url: 'https://www.linkedin.com/in/buglil/',
+        twitter_url: 'https://twitter.com/BugliLorenzo',
+        image: '/img/team-members/profile-ph.png',
+        secondary_image: '/img/team-members/profile-ph.png',
+        description: 'Non so mai come descrivermi ma fornitemi una bash e qualcosa viene fuori di sicuro! Pythonista da tempo e Linux user da piu\' tempo ancora. Pigro da morire, ma non quando devo progettare un software che faccia le cose al posto mio. Citando un grande maestro \"Fare BENE o non fare, non c\'e\' provare\".',
+        website: ' ',
+        permalink: 'BugliL',
+      },
     },
     events: {
       'sh-sessions-qwik-workshop': {
@@ -347,9 +359,9 @@ const messages = {
         github_url: 'https://github.com/thejoin95',
         linkedin_url: 'https://www.linkedin.com/in/miki-lombardi/',
         twitter_url: 'https://twitter.com/thejoin95',
-        image: '/img/_dev/mikilombardi.jpeg',
-        secondary_image: '/img/_dev/mikilombardi.jpeg',
-        description: 'Mi definisco un passion driven developer, guidato dalla creatività che ha un sacco di altre passioni: basket, ciclismo, fotografia sono solo alcune di queste. Dal 2014 ho prestato la mia esperienza nel campo dello sviluppo software a Firenze, in Italia.\nHo lavorato come ingegnere del software e architetto di soluzioni per oltre 8 anni sia in società di prodotti che di consulenza, traendo il meglio da entrambi i mondi. Attualmente lavoro come Software Engineer presso Growens, dove sto sviluppando e ottimizzando la piattaforma di email marketing in un team Agile (SCRUM) in full remote.\nNel tempo libero girovago, creo eventi, partecipo a conferenze nazionali e internazionali cercando di vivere la vita al migliore delle mie possibilità!',
+        image: '/img/team-members/miki-lombardi.jpeg',
+        secondary_image: '/img/team-members/miki-lombardi.jpeg',
+        description: 'I\'m a passion & creative driven developer who has ton of others passion: basketball, cycling, photography are few of them. Since 2014 I have lent my expertise in the software develpoment and solution architect fields in Europe. I\'ve been working as a software engineer & solution architect for 9+ years in both product and consultancy companies, taking the best from both worlds.I\'m currently working as a Software Development Engineer at Adobe, in Paris, where I\'m developing and optimizing the Adobe Stock project in an Agile team (SCRUM).',
         website: 'https://www.mikilombardi.com/',
         permalink: 'mikilombardi',
       },
@@ -359,9 +371,9 @@ const messages = {
         github_url: 'https://github.com/Wabri',
         linkedin_url: 'https://www.linkedin.com/in/%F0%9F%90%A7gabriele-puliti-b62915a9/',
         twitter_url: 'https://twitter.com/WabriDev',
-        image: '/img/_dev/gabrielepuliti.png',
-        secondary_image: '/img/_dev/gabrielepuliti.png',
-        description: 'Ho una dipendenza da tmux e vim. Non mi parlate di frontend perchè non ci capisco niente, ma se volete parlare della vostra rice linux sono tutto orecchi. Sono un appassionato di Storia da quasi sempre, ho provato a diventare un astrofisico fallendo miseramente e mi piace fare lunghe camminate sia in città che nella natura.',
+        image: '/img/team-members/gabriele-puliti.png',
+        secondary_image: '/img/team-members/gabriele-puliti.png',
+        description: 'Software engineer for work and cats lover, addicted board gamer and try hard with no success cyclist. I have a garden, but I lack the green thumb. I\'m a simple man who spends most of his time configuring his linux and vim, to CLI them all!',
         website: '',
         permalink: 'gabrielepuliti',
       },
@@ -371,9 +383,9 @@ const messages = {
         github_url: 'https://github.com/404answernotfound',
         linkedin_url: 'https://www.linkedin.com/in/lorenzopieri/',
         twitter_url: 'https://twitter.com/404answnotfound',
-        image: '/img/_dev/lorenzopieri.png',
-        secondary_image: '/img/_dev/lorenzopieri.png',
-        description: 'Scopritore di problemi a soluzioni note. Tanti argomenti diversi e troppe poche ore durante la giornata, trovo divertente insegnare cose complicate in parole semplici, raccontare storie con metodi poco ortodossi e passare il tempo a scrivere codice, anche questa un\'arte a tutti gli effetti. Credo fortemente nell\'unione tra scienza e valore umano (ndr. divertirsi a fare ciò che si ama) e partecipo con passione a non-profit e progetti intenzionati a portare maggiore valore culturale e conoscenza a coloro che ne sono interessati e affascinati.',
+        image: '/img/team-members/lorenzo-pieri.png',
+        secondary_image: '/img/team-members/lorenzo-pieri.png',
+        description: 'Discoverer of problems with known solutions. So many different topics and too few hours in the day, I find it fun to teach complicated things in simple words, tell stories in unorthodox methods, and spend time writing code, also an \art in its own right. I strongly believe in the union of science and human value (ed. having fun doing what you love) and passionately participate in nonprofits and projects intent on bringing greater cultural value and knowledge to those who are interested and fascinated by it.',
         website: 'https://404answernotfound.eu/',
         permalink: 'lorenzopieri',
       },
@@ -383,9 +395,9 @@ const messages = {
         github_url: 'https://github.com/nicpuppa',
         linkedin_url: 'https://www.linkedin.com/in/nicola-puppa-b67a4911a/',
         twitter_url: '',
-        image: '/img/_dev/nicpuppa.png',
-        secondary_image: '/img/_dev/nicpuppa.png',
-        description: 'Globetrotter (covid permettendo), amante delle bibite gassate e climber. Amo le sfide. Mi piace studiare quello che mi interessa. Sono sintetico.',
+        image: '/img/team-members/nic-puppa.png',
+        secondary_image: '/img/team-members/nic-puppa.png',
+        description: 'Globetrotter, soda lover and climber. I love challenges. I like to study',
         website: '',
         permalink: 'nicpuppa',
       },
@@ -395,9 +407,9 @@ const messages = {
         github_url: 'https://github.com/AngyDev',
         linkedin_url: 'https://www.linkedin.com/in/angela-busato-91145ab1/',
         twitter_url: 'https://twitter.com/angela_busato',
-        image: '/img/_dev/Angy.jpg',
-        secondary_image: '/img/_dev/Angy.jpg',
-        description: 'Sono un\'esploratrice, mi piace la ricerca e la sperimentazione negli ambiti più disparati, programmazione, fotografia, stampa 3D, e fai da te sono i primi della mia lista. Nel tempo libero mi piace viaggiare e conoscere nuovi posti, persone, culture ma soprattutto conoscere il cibo, ci sono sempre cose nuove da scoprire.',
+        image: '/img/team-members/angela-busato.jpg',
+        secondary_image: '/img/team-members/angela-busato.jpg',
+        description: 'I am an explorer, and my slogan is "saying yes to new adventures". I enjoy research and experimentation in a wide variety of fields, programming, photography, 3D printing, and do-it-yourself are first on my list. In my free time, I like to travel and learn about new places, people, and cultures, but most of all learning about food, there are always new things to discover.',
         website: 'https://www.angydev.eu/',
         permalink: 'AngyDev',
       },
@@ -407,9 +419,9 @@ const messages = {
         github_url: 'https://github.com/DanerSound',
         linkedin_url: 'https://www.linkedin.com/in/andre-cristhian-barreto-donayre/',
         twitter_url: ' ',
-        image: '/img/_dev/Danersound.jpg',
-        secondary_image: '/img/_dev/Danersound.jpg',
-        description: 'Mi piace pensare che possono costruire qualsiasi cosa, infatti nella mia mente ho gia progettato la macchina del tempo e il nervgear, ho solo problemi a trovare dei finanziatori disposti ad investire nella mia follia... chi sono io? beh sono un ex tecnico del suono che adesso sta riprendendo la via dell\'informatico! nel tempo libero e quando non ho voglia di studiare cerco mi montare circuiti usando arduino, creando dei corto il 90% delle volte...dopo tutto brusciando i compotenti si impara!',
+        image: '/img/team-members/daner-sound.jpg',
+        secondary_image: '/img/team-members/daner-sound.jpg',
+        description: 'I like to think that they can build anything. In fact, in my mind, I have already designed the time machine and the nerve gear. I just have trouble finding investors willing to invest in my madness... Who am I? Well, I am a former sound technician who is now getting back into the field of computer science! In my free time, and when I don\'t feel like studying, I try to assemble circuits using Arduino, often ending up short-circuiting them about 90% of the time... After all, you learn by burning components!',
         website: '',
         permalink: 'DanerSound',
       },
@@ -419,12 +431,24 @@ const messages = {
         github_url: 'https://github.com/davideimola',
         linkedin_url: 'https://www.linkedin.com/in/davideimola/',
         twitter_url: ' ',
-        image: '/img/_dev/davideimola.jpg',
-        secondary_image: '/img/_dev/davideimola.jpg',
-        description: 'Mettetemi in mano un Cloud provider e mi vedrete felice come un bimbo. Sono un grande appassionato di automazione, approcci cloud-native e tutto quella roba da DevOps Sith. Nel mio tempo libero, faccio roba da nerd (che strano!), quindi leggo fumetti e manga, vedo film e tanta altra roba molto cool (perchè io ci credo)!',
+        image: '/img/team-members/davide-imola.jpg',
+        secondary_image: '/img/team-members/davide-imola.jpg',
+        description: 'Put a cloud provider in my hand and you\'ll see me as happy as a baby. I\'m a big fan of automation, cloud-native approaches, and all that DevOps Sith stuff. In my spare time, I do nerdy stuff (how weird!), so I read comic books and manga, see movies and lots of other very cool (because I believe in it)!human (ed. have fun doing what you love) stuff, and I participate passionately in nonprofits and projects intent on bringing greater cultural value and knowledge to those who are interested and fascinated by it.',
         website: 'https://davideimola.com',
         permalink: 'davideimola',
       },
+      lorenzobugli: {
+        name: 'Lorenzo Bugli',
+        github: 'BugliL',
+        github_url: 'https://github.com/buglil',
+        linkedin_url: 'https://www.linkedin.com/in/buglil/',
+        twitter_url: 'https://twitter.com/BugliLorenzo',
+        image: '/img/team-members/profile-ph.png',
+        secondary_image: '/img/team-members/profile-ph.png',
+        description: 'I never know how to describe myself, but give me a bash and something will definitely come out! Pythonista for a while and Linux user for even longer. Lazy to death, but not when I have to design software that does the work for me. To quote a great master, "Do GOOD or not do there\'s no try".',
+        website: ' ',
+        permalink: 'BugliL',
+      },
     },
     events: {
       // TODO: Remove the HTML inside of the text. Give a do-over like the events
diff --git a/src/views/TeamMember.vue b/src/views/TeamMember.vue
index fb87b2c..554e427 100644
--- a/src/views/TeamMember.vue
+++ b/src/views/TeamMember.vue
@@ -4,6 +4,7 @@ import type { RouteParamValue } from 'vue-router'
 import { useRoute } from 'vue-router'
 
 import { useI18n } from 'vue-i18n'
+import SocialIcons from '@/components/SocialIcons.vue'
 
 const { t } = useI18n()
 
@@ -18,156 +19,46 @@ const getTeamMemberName = () => {
     member.value = route.params.member as RouteParamValue
 }
 
+const socials = ['github', 'linkedin', 'twitter', 'website']
+
 onMounted(() => {
   getTeamMemberName()
 })
 </script>
 
 <template>
-  <!-- TODO: Add loader -->
   <span v-if="!member">Loading...</span>
   <div v-else class="team">
-    <div class="container">
-      <div class="content">
-        <h1 data-test="member-page-name" class="head-1">
-          {{ $t(`team.${member}.name`) }}
-        </h1>
-        <div>
-          <div
-            class="photo"
-            :style="`background-image: url(${$t(`team.${member}.image`)});`"
-            data-test="member-page-photo"
-          />
-        </div>
-        <div class="socialIcons !p-2">
-          <a
-            v-if="$t(`team.${member}.github_url`).length > 1"
-            :href="$t(`team.${member}.github_url`)" target="_blank"
-            data-test="member-page-github"
-          >
-            <i class="mobile-menu-icon fab fa-github" />
-          </a>
-          <a
-            v-if="$t(`team.${member}.linkedin_url`).length > 1"
-            :href="$t(`team.${member}.linkedin_url`)" target="_blank"
-            data-test="member-page-linkedin"
-          >
-            <i class="mobile-menu-icon fab fa-linkedin" />
-          </a>
-          <a
-            v-if="$t(`team.${member}.twitter_url`).length > 1"
-            :href="$t(`team.${member}.twitter_url`)" target="_blank"
-            data-test="member-page-twitter"
-          >
-            <i class="mobile-menu-icon fab fa-twitter" />
-          </a>
-          <a
-            v-if="$t(`team.${member}.website`).length > 1"
-            :href="$t(`team.${member}.website`)" target="_blank"
-            data-test="member-page-website"
-          >
-            <i class="mobile-menu-icon fa fa-cloud" />
-          </a>
-        </div>
-
-        <!-- TODO: Make this a proper <p> -->
+    <div class="container p-32px max-w-700px m-auto text-center flex flex-col justify-center items-center gap-16px">
+      <h1 data-test="member-page-name" class="text-2rem font-700">
+        {{ $t(`team.${member}.name`) }}
+      </h1>
+      <div>
         <div
-          class="description !p-2"
-          data-test="member-page-description"
-          v-html="$t(`team.${member}.description`)"
+          :data-test="`team-member-${member}-index-photo`"
+          class="block w-128px h-128px rounded-full bg-center bg-cover"
+          :style="`background-image: url( ${$t(`team.${member}.image`)} );`"
         />
-
-        <router-link
-          class="user-profile-link"
-          :to="{ name: 'Team' }" data-test="nav-team-page-link"
-        >
-          {{ t('redirect.back') }}
-        </router-link>
       </div>
+
+      <SocialIcons :member="member" :socials="socials" />
+
+      <p
+        class=""
+        data-test="member-page-description"
+        v-html="$t(`team.${member}.description`)"
+      />
+
+      <router-link
+        class="w-fit px-15px py-5px border-1px border-solid border-transparent rounded-full bg-#586379 text-#fff text-1rem font-700 hover:bg-#2e3440"
+        :to="{ name: 'Team' }" data-test="nav-team-page-link"
+      >
+        {{ t('redirect.back') }}
+      </router-link>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.photo {
-  display: inline-block;
-  width: 128px;
-  height: 128px;
-  border-radius: 100%;
-  background-position: center;
-  background-size: cover;
-  text-align: center;
-}
 
-.team {
-  .content {
-    max-width: 700px;
-    padding: 1.5em 3em;
-    margin: auto;
-    text-align: center;
-  }
-}
-
-.socialIcons {
-  padding: 1em;
-
-  a {
-    display: inline-block;
-    margin: 0.2em;
-
-    .mobile-menu-icon {
-      font-size: 1.2em;
-    }
-
-    &:hover .mobile-menu-icon {
-      color: #2e3440;
-    }
-  }
-}
-
-.description {
-  padding: 1em 0;
-  margin-bottom: 20px;
-}
-
-.user-profile-link {
-  padding: 5px 15px;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  margin: 0 auto;
-  background-color: #586379;
-  color: #fff;
-  font-weight: bold;
-
-  &:hover {
-    background-color: #2e3440;
-  }
-}
-
-@media (width >= 56.25em) {
-  .event {
-    .cta {
-      display: block;
-
-      .btn {
-        margin: 0 5px;
-
-        &:nth-of-type(1) {
-          margin-left: 0;
-        }
-      }
-    }
-  }
-}
-
-.#{$dark-mode-class} {
-  .socialIcons {
-    a {
-      &:hover .mobile-menu-icon {
-        color: #586379;
-      }
-
-    }
-  }
-}
 </style>
diff --git a/src/views/TeamPage.vue b/src/views/TeamPage.vue
index 5bc0aa6..556cc42 100644
--- a/src/views/TeamPage.vue
+++ b/src/views/TeamPage.vue
@@ -1,244 +1,27 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import messages from '@/i18n/messages'
+import MemberCard from '@/components/MemberCard.vue'
 
 const team = Object.keys(messages.it.team)
-
-const { t } = useI18n()
 </script>
 
 <template>
-  <div class="teamList" data-test="team-list">
-    <div class="container">
-      <div class="headline" data-test="team-page-headline">
-        <h1>Schrödinger Hat's fam</h1>
-      </div>
-
-      <div class="content">
-        <div v-for="member in team" :key="member" data-test="team-list">
-          <router-link
-            :data-test="`team-member-${member}-page-link`"
-            :to="{ name: 'TeamMember', params: { member } }"
-          >
-            <!-- TODO: Transform this into a component -->
-            <div
-              class="blog-card"
-              data-test="team-card"
-              :data-test-member-name="`team-member-${member}`"
-            >
-              <div class="meta">
-                <div
-                  :data-test="`team-member-${member}-index-photo`"
-                  class="photo"
-                  :style="`background-image: url( ${$t(`team.${member}.image`)} );`"
-                />
-              </div>
-              <div class="description">
-                <h2
-                  :data-test="`team-member-${member}-name`"
-                >
-                  {{ $t(`team.${member}.name`) }}
-                </h2>
-                <div class="socialIcons">
-                  <a
-                    v-if="$t(`team.${member}.github_url`).length > 1"
-                    :data-test="`team-member-${member}-github`"
-                    :href="$t(`team.${member}.github_url`)" target="_blank"
-                  >
-                    <i class="mobile-menu-icon fab fa-github" />
-                  </a>
-                  <a
-                    v-if="$t(`team.${member}.linkedin_url`).length > 1"
-                    :data-test="`team-member-${member}-linkedin`"
-                    :href="$t(`team.${member}.linkedin_url`)" target="_blank"
-                  >
-                    <i class="mobile-menu-icon fab fa-linkedin" />
-                  </a>
-                  <a
-                    v-if="$t(`team.${member}.twitter_url`).length > 1"
-                    :data-test="`team-member-${member}-twitter`"
-                    :href="$t(`team.${member}.twitter_url`)" target="_blank"
-                  >
-                    <i class="mobile-menu-icon fab fa-twitter" />
-                  </a>
-                  <a
-                    v-if="$t(`team.${member}.website`).length > 1"
-                    :data-test="`team-member-${member}-website`"
-                    :href="$t(`team.${member}.website`)" target="_blank"
-                  >
-                    <i class="mobile-menu-icon fa fa-cloud" />
-                  </a>
-                </div>
-
-                <router-link
-                  class="user-profile-link"
-                  :data-test="`team-member-${member}-page-link`"
-                  :to="{ name: 'TeamMember', params: { member } }"
-                >
-                  {{ t('redirect.profile') }}
-                </router-link>
-              </div>
-            </div>
-          </router-link>
-        </div>
-      </div>
+  <div class="container">
+    <h1 class="max-w-175 m-auto text-center text-8 font-700" data-test="team-page-headline">
+      Schrödinger Hat's fam
+    </h1>
+    <div class="grid grid-cols-1 gap-5 p-6 sm:grid-cols-2 lg:grid-cols-3">
+      <MemberCard
+        v-for="member in team"
+        :key="member"
+        data-test="team-list"
+        :member="member"
+        class="w-full"
+      />
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-// to-do: standardize color variables
-$color_white: #fff;
-$color_prime: $nord3;
-$color_grey: $nord4;
-$color_grey_dark: $nord2;
-
-.teamList {
-  .headline {
-    max-width: 700px;
-    margin: auto;
-    text-align: center;
-
-    h1 {
-      font-size: 2rem;
-      font-weight: 700;
-    }
-  }
-
-  .content {
-    display: grid;
-    padding: 1.5em 3em;
-    gap: 20px;
-    grid-template-columns: repeat(1, 1fr);
-  }
-
-  .blog-card {
-    z-index: 0;
-    overflow: hidden;
-    border-radius: 5px;
-    margin: 1rem auto;
-    margin-bottom: 1.6%;
-    background-color: #d8dee9; //brand color, pick from light-v waves
-    background-image: $color_white;
-    box-shadow: 0 3px 7px -1px rgba(#000, 0.1);
-    font-family: sans-serif;
-    line-height: 1.4;
-
-    a,
-    li {
-      color: $color_white;
-    }
-
-    .meta {
-      position: relative;
-      z-index: 0;
-      display: flex;
-      height: auto;
-      align-items: center;
-      justify-content: center;
-      border-radius: 100%;
-      margin: 2em auto 0;
-      text-align: center;
-    }
-
-    .photo {
-      display: block;
-      width: 128px;
-      height: 128px;
-      border-radius: 100%;
-      background-position: center;
-      background-size: cover;
-    }
-
-    .photo-secondary {
-      display: none;
-      width: 128px;
-      height: 128px;
-      border-radius: 100%;
-      background-position: center;
-      background-size: cover;
-    }
-
-    .description {
-      position: relative;
-      z-index: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 2rem;
-
-      .socialIcons {
-        width: fit-content;
-        padding: 0.5em 0 1em;
-
-        a {
-          display: inline-block;
-          margin: 0.2em;
-
-          .mobile-menu-icon {
-            font-size: 1.2em;
-          }
-
-          &:hover .mobile-menu-icon {
-            color: #2e3440;
-          }
-        }
-      }
-
-      h2,
-      p {
-        font-family: Poppins, sans-serif;
-      }
-
-      h2 {
-        margin: 5px 0;
-        font-size: 1.75rem;
-        font-weight: 700;
-      }
-
-      .user-profile-link {
-        width: fit-content;
-        padding: 5px 15px;
-        border: 1px solid transparent;
-        border-radius: 999px;
-        margin: 0 auto;
-        background-color: #586379;
-        color: #fff;
-        font-size: 1rem;
-        font-weight: 700;
-
-        &:hover {
-          background-color: #2e3440;
-        }
-      }
-    }
-  }
-}
-
-// to-do: standardize media querys
-@media (width >= 640px) {
-  .teamList{
-    .content {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-  }
-}
-
-@media (width >= 1024px) {
-  .teamList{
-    .content {
-      grid-template-columns: repeat(3, 1fr);
-    }
-
-  }
-
-}
-
-.#{$dark-mode-class}{
-  .blog-card {
-    background-color: $nord2;
-  }
 
-}
 </style>
diff --git a/unocss.config.ts b/unocss.config.ts
index 5a739a7..7b0b970 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -11,4 +11,29 @@ export default defineConfig({
     // See: https://unocss.dev/presets/web-fonts
     presetWebFonts(),
   ],
+  theme: {
+    // ...
+    colors: {
+      light: {
+        text: {
+          primary: '#4c566a', // text-light-text-primary
+          secondary: '#eceff4', // text-light-text-secondary
+        },
+        bg: {
+          primary: '#eceff4', // bg-light-bg-primary
+          secondary: '#d8dee9', // bg-light-bg-secondary
+        },
+      },
+      dark: {
+        text: {
+          primary: '#eceff4', // text-dark-text-primary
+          secondary: '#4c566a', // text-dark-text-secondary
+        },
+        bg: {
+          primary: '#2e3440', // bg-dark-bg-primary
+          secondary: '#3b4252', // bg-dark-bg-secondary
+        },
+      },
+    },
+  },
 })