diff --git a/src/developers/[developerSlug].md b/src/developers/[developerSlug].md
index fdcd4c57ff..751efb0a08 100644
--- a/src/developers/[developerSlug].md
+++ b/src/developers/[developerSlug].md
@@ -1,14 +1,23 @@
 ---
 page: true
 footer: false
-title: Vue Developers
+title: Vue Developer
 ---
 
 <script setup>
 import { useData } from 'vitepress'
+import { onMounted, ref } from 'vue'
+import developersData from './developers.json'
 import Page from './components/DeveloperPage.vue'
 
 const { page } = useData()
+const developer = ref(developersData.find(dev => dev.slug === page.value.params.developerSlug) || {})
+
+onMounted(() => {
+  if (developer.value) {
+    document.title = `${developer.value.name} - Vue Developer | Vue.js`
+  }
+})
 </script>
 
-<Page :developerId="page.params.developerId" :developerSlug="page.params.developerSlug" />
+<Page :developer="developer" />
diff --git a/src/developers/[developerSlug].paths.ts b/src/developers/[developerSlug].paths.ts
index 8d65fabfe2..9f5d4c1964 100644
--- a/src/developers/[developerSlug].paths.ts
+++ b/src/developers/[developerSlug].paths.ts
@@ -5,7 +5,7 @@ export default {
     return {
       params: {
         developerId: developer.id,
-        developerSlug: `${developer.id}-${developer.alias.toLowerCase()}-freelance-developer`
+        developerSlug: developer.slug,
       }
     }
   })
diff --git a/src/developers/components/CloudinaryImage.vue b/src/developers/components/CloudinaryImage.vue
index 95a5e3f995..7db3a6e057 100644
--- a/src/developers/components/CloudinaryImage.vue
+++ b/src/developers/components/CloudinaryImage.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import partnerConfig from '../partnerConfig.js'
+
+const { cloudinaryUrl } = partnerConfig
 
 const props = withDefaults(defineProps<{
   src: string,
@@ -17,8 +20,6 @@ const props = withDefaults(defineProps<{
   faceRecognition: false,
 });
 
-const cloudinaryUrl = 'https://res.cloudinary.com/proxify-io/image/upload'
-
 const imageSrc = computed(() => {
   const attributes = [
     'f_auto',
diff --git a/src/developers/components/DeveloperCard.vue b/src/developers/components/DeveloperCard.vue
index f8a0acb7e7..cbe446a579 100644
--- a/src/developers/components/DeveloperCard.vue
+++ b/src/developers/components/DeveloperCard.vue
@@ -1,35 +1,29 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { DeveloperProfile } from './type'
 import { truncateTextFromArray } from './utils'
 import { VTIconMapPin } from '@vue/theme'
 import CloudinaryImage from './CloudinaryImage.vue'
 import DeveloperProficiencies from './DeveloperProficiencies.vue'
 import DeveloperCompensations from './DeveloperCompensations.vue'
-import { useRouter } from 'vitepress'
-
-const router = useRouter()
 
 const props = defineProps<{
   data: DeveloperProfile
   hero?: boolean
 }>()
 
-const { id, alias, name, description, compensations, proficiencies, location } = props.data
+const { id, slug, name, description, compensations, proficiencies, location } = props.data
 
-const profileImage = computed(() => `/vue/developers/${id}.jpg`)
-const trimmedDescription = computed(() => truncateTextFromArray(description, 220))
+const profileLink = `/developers/${slug}.html`
+const profileImage = `/vue/developers/${id}.jpg`
+const trimmedDescription = truncateTextFromArray(description, 220)
 
-function openDeveloperPage() {
-  router.go(`./developers/${id}-${alias.toLowerCase()}-freelance-developer.html`)
-}
 </script>
 
 <template>
-  <div
+  <a
     class="developer-card"
     :class="{ 'developer-card--hero': hero }"
-    @click="openDeveloperPage"
+    :href="profileLink"
   >
     <div class="developer-card__header">
       <div v-if="!hero && profileImage" class="developer-card__avatar">
@@ -80,7 +74,7 @@ function openDeveloperPage() {
         :height="605"
       />
     </div>
-  </div>
+  </a>
 </template>
 
 <style scoped>
diff --git a/src/developers/components/DeveloperCompensations.vue b/src/developers/components/DeveloperCompensations.vue
index da6ffe67fd..c7bd417182 100644
--- a/src/developers/components/DeveloperCompensations.vue
+++ b/src/developers/components/DeveloperCompensations.vue
@@ -13,7 +13,7 @@ defineProps<{
     <h4 v-if="title">{{ title }}</h4>
     <div>
       <div v-if="compensations" class="developer-compensations__list">
-        <div v-for="(compensation, key) in compensations" :key="key">
+        <div v-for="(compensation, key) in compensations" :key="`compensation-${key}`">
           {{ compensation }}
         </div>
       </div>
diff --git a/src/developers/components/DeveloperPage.vue b/src/developers/components/DeveloperPage.vue
index 7e4065f948..24fd918b35 100644
--- a/src/developers/components/DeveloperPage.vue
+++ b/src/developers/components/DeveloperPage.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import data from '../developers.json'
 import partnerConfig from '../partnerConfig.js'
-import { DeveloperProfiles } from './type'
+import { DeveloperProfile } from './type'
 import { generateUTMUrl } from './utils'
 import { VTIconChevronLeft, VTIconMapPin } from '@vue/theme'
 import CloudinaryImage from './CloudinaryImage.vue'
@@ -15,17 +14,12 @@ import DeveloperPageFooter from './DeveloperPageFooter.vue'
 import { useRoute } from 'vitepress'
 
 const props = defineProps<{
-  developerId: number
-  developerSlug: string
+  developer: DeveloperProfile
 }>()
 
-const developer = (data as DeveloperProfiles).find(
-  (developer) => developer.id === props.developerId
-)!
+const { id, name, location, description, compensations, proficiencies, experiences, education } = props.developer
 
-const { id, name, location, description, compensations, proficiencies, experiences, education } = developer
-
-const profileImage = computed(() => `/vue/developers/${id}.jpg`)
+const profileImage = `/vue/developers/${id}.jpg`
 
 const route = useRoute()
 const hireUsLink = computed(() => generateUTMUrl(partnerConfig.hireUsButtonUrl, route.path))
@@ -63,7 +57,7 @@ const hireUsLink = computed(() => generateUTMUrl(partnerConfig.hireUsButtonUrl,
           </p>
 
           <div v-if="description" class="developer-page__description">
-            <p v-for="desc in description" :key="desc">{{ desc }}</p>
+            <p v-for="(desc, key) in description" :key="`p-desc-${key}`">{{ desc }}</p>
           </div>
         </div>
 
diff --git a/src/developers/components/DeveloperProficiencies.vue b/src/developers/components/DeveloperProficiencies.vue
index d1082fcf2c..65a4e8becc 100644
--- a/src/developers/components/DeveloperProficiencies.vue
+++ b/src/developers/components/DeveloperProficiencies.vue
@@ -37,11 +37,11 @@ const toggleShowAll = (event: Event) => {
   <div class="developer-proficiencies">
     <h4 v-if="title" class="developer-proficiencies__title">{{ title }}</h4>
     <div class="developer-proficiencies__list">
-      <span class="developer-proficiencies__item" v-for="p in visibleProficiencies" :key="p">{{ p }}</span>
+      <span class="developer-proficiencies__item" v-for="(p, key) in visibleProficiencies" :key="`prof-${key}`">{{ p }}</span>
       <button
         v-if="shouldShowButton"
-        @click.stop="toggleShowAll"
         class="developer-proficiencies__toggle"
+        @click.stop="toggleShowAll"
       >
         {{ showAll ? 'Show less' : 'Show all' }}
       </button>
diff --git a/src/developers/components/type.ts b/src/developers/components/type.ts
index 389bb7e138..3326e6a02d 100644
--- a/src/developers/components/type.ts
+++ b/src/developers/components/type.ts
@@ -29,6 +29,7 @@ export interface DeveloperCompensations {
 
 export interface DeveloperProfile {
   id: number;
+  slug: string;
   name: string;
   alias: string;
   description: string[];
diff --git a/src/developers/developers.json b/src/developers/developers.json
index 4917c27b53..696387f759 100644
--- a/src/developers/developers.json
+++ b/src/developers/developers.json
@@ -2,6 +2,7 @@
   {
     "id": 1346,
     "name": "Stelios Kitziris",
+    "slug": "stelios-vue-node-fullstack-developer",
     "alias": "Stelios",
     "description": [
       "Stelios is a fullstack developer with over six years of commercial experience, specializing in the MEVN stack.",
@@ -219,6 +220,7 @@
   {
     "id": 2535,
     "name": "Tomek Jankowski",
+    "slug": "tomek-vue-node-fullstack-developer",
     "alias": "Tomek",
     "description": [
       "Tomek is a fullstack developer with over 17 years of commercial experience. Over the years, he has transitioned from using PHP to mastering modern tech stacks, focusing on Vue.js and Node.js in the last six years. His expertise in these technologies has driven the development and support of robust, high-traffic systems.",
@@ -356,6 +358,7 @@
   {
     "id": 3021,
     "name": "Vardan Hayrapetyan",
+    "slug": "vardan-vue-node-fullstack-developer",
     "alias": "Vardan",
     "description": [
       "Vardan is a frontend-heavy fullstack developer with expertise in Vue.js, and Node.js. With six years of experience, he has worked on several large-scale web applications, particularly excelling in the real estate sector.",
@@ -545,6 +548,7 @@
   {
     "id": 5486,
     "name": "Abdulqudus Abubakre",
+    "slug": "abdulqudus-vue-frontend-developer",
     "alias": "Abdulqudus",
     "description": [
       "Abdulqudus is a senior frontend developer with over six years of commercial experience. His main framework of choice is Vue.js. He has also worked with frameworks like Nuxt.js and Vuetify for over three years. He is a fan of TDD and uses Cypress as a main testing tool in all his projects.",
@@ -747,6 +751,7 @@
   {
     "id": 5328,
     "name": "Santiago Anaya",
+    "slug": "santiago-anaya-vue-ruby-fullstack-developer",
     "alias": "Santiago",
     "description": [
       "Santiago is a fullstack engineer with over six years of commercial experience, focusing on frontend development. He is an expert in Vue.js. On the backend, he uses Ruby on Rails and various relational databases, particularly PostgreSQL.",
@@ -889,6 +894,7 @@
   {
     "id": 5697,
     "name": "Harshit Sangani",
+    "slug": "harshit-vue-frontend-developer",
     "alias": "Harshit",
     "description": [
       "Harshit is a frontend engineer with over six years of commercial experience, specializing in Vue.js. He has been integral to various stages of the software development lifecycle, from ideation to deployment, ensuring top-notch user experiences and scalable applications.",
@@ -1076,6 +1082,7 @@
   {
     "id": 3709,
     "name": "Kostiantyn Draliuk",
+    "slug": "kostiantyn-vue-frontend-developer",
     "alias": "Kostiantyn",
     "description": [
       "Kostiantyn is a frontend developer with eight years of commercial experience. His primary expertise lies in Vue.js, where he has demonstrated exceptional proficiency in building robust and scalable web applications.",
@@ -1229,6 +1236,7 @@
   {
     "id": 5022,
     "name": "Eduard Miskov",
+    "slug": "eduard-miskov-vue-frontend-developer",
     "alias": "Eduard",
     "description": [
       "Eduard is a frontend developer with over seven years of commercial experience. His primary expertise is crafting visually appealing and user-friendly web applications using Vue.js.",
@@ -1532,6 +1540,7 @@
   {
     "id": 4747,
     "name": "Emmanuel Sackey",
+    "slug": "emmanuel-vue-js-ts-nuxt-nest-fullstack-dev",
     "alias": "Emmanuel",
     "description": [
       "Emmanuel is a frontend-heavy fullstack developer with seven years of professional experience, proficient in Vue.js and Node.js. His main focus is on creating user-friendly web pages and dependable back-end systems.",
@@ -1735,6 +1744,7 @@
   {
     "id": 1020,
     "name": "Abdusaid Umarov",
+    "slug": "abdusaid-html-css-vue-typescript-frontend-dev",
     "alias": "Abdusaid",
     "intro": "Abdusaid is a Senior Frontend Developer with over six years of experience, where he’s made a name for himself in Vue.js and Nuxt.js. His skill in Vue.js is top-notch, proven by the perfect 100% score he achieved on the Proxify test.",
     "description": [
diff --git a/src/developers/partnerConfig.js b/src/developers/partnerConfig.js
index e1c5edfe86..dc69693a7b 100644
--- a/src/developers/partnerConfig.js
+++ b/src/developers/partnerConfig.js
@@ -7,6 +7,7 @@ const websiteLabel = 'proxify.io'
 const websiteUrl = 'https://proxify.io/'
 const applyUrl = 'https://career.proxify.io/apply'
 const hireUrl = 'https://proxify.io/hire-vuejs'
+const cloudinaryUrl = 'https://res.cloudinary.com/proxify-io/image/upload'
 
 
 const partnerConfig = {
@@ -19,6 +20,9 @@ const partnerConfig = {
   websiteUrl: websiteUrl,
   hireUsButtonUrl: hireUrl,
 
+  // Cloudinary storage URL
+  cloudinaryUrl: cloudinaryUrl,
+
   // Hero Section
   pageHeroBanner: {
     title: 'Vue Developers',