diff --git a/src/components/home/FeaturesSection.tsx b/src/components/home/FeaturesSection.tsx
index bffa99f..a789c16 100644
--- a/src/components/home/FeaturesSection.tsx
+++ b/src/components/home/FeaturesSection.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import Image from 'next/image';
+import Link from 'next/link';
 import type { FeaturesContent, FeaturedAgentItem } from '@/types/cms';
 import { resolveImageUrl } from '@/services/cms.service';
 
@@ -21,8 +22,8 @@ function AgentCard({ agent, className = '' }: { agent: FeaturedAgentItem; classN
     }
   }, [agent.imageUrl]);
 
-  return (
-    <div className={`bg-white border border-[#00293d]/10 rounded-[15px] w-[254px] overflow-hidden ${className}`}>
+  const cardInner = (
+    <div className={`bg-white border border-[#00293d]/10 rounded-[15px] w-[254px] overflow-hidden ${agent.id ? 'hover:shadow-xl transition-shadow cursor-pointer' : ''} ${className}`}>
       <div className="h-[161px] w-full overflow-hidden rounded-t-[15px] bg-gray-100 relative">
         {imgSrc && (
           <img
@@ -66,6 +67,11 @@ function AgentCard({ agent, className = '' }: { agent: FeaturedAgentItem; classN
       </div>
     </div>
   );
+
+  if (agent.id) {
+    return <Link href={`/user/profile/${agent.id}`}>{cardInner}</Link>;
+  }
+  return cardInner;
 }
 
 export function FeaturesSection({ content }: { content?: FeaturesContent }) {
diff --git a/src/components/home/TopProfessionals.tsx b/src/components/home/TopProfessionals.tsx
index bb26f15..5c3f713 100644
--- a/src/components/home/TopProfessionals.tsx
+++ b/src/components/home/TopProfessionals.tsx
@@ -211,6 +211,7 @@ async function resolveAvatarUrl(avatar: string | null): Promise<string> {
 
 interface DisplayProfessional {
   id: string;
+  profileId?: string;
   name: string;
   subtitle: string;
   location: string;
@@ -249,6 +250,7 @@ export function TopProfessionals({ content }: { content?: TopProfessionalsConten
               const imageUrl = await resolveAvatarUrl(entry.imageUrl || null);
               return {
                 id: `cms-${index}`,
+                profileId: entry.id,
                 name: entry.name,
                 subtitle: entry.subtitle || '',
                 location: entry.location || '',
@@ -358,19 +360,31 @@ export function TopProfessionals({ content }: { content?: TopProfessionalsConten
               ))}
             </>
           ) : displayData.length > 0 ? (
-            displayData.map((professional) => (
-              <ProfessionalCard
-                key={professional.id}
-                name={professional.name}
-                subtitle={professional.subtitle}
-                location={professional.location}
-                experience={professional.experience}
-                expertise={professional.expertise}
-                imageUrl={professional.imageUrl}
-                isVerified={professional.isVerified}
-                rating={professional.rating}
-              />
-            ))
+            displayData.map((professional) => {
+              const card = (
+                <ProfessionalCard
+                  name={professional.name}
+                  subtitle={professional.subtitle}
+                  location={professional.location}
+                  experience={professional.experience}
+                  expertise={professional.expertise}
+                  imageUrl={professional.imageUrl}
+                  isVerified={professional.isVerified}
+                  rating={professional.rating}
+                />
+              );
+              return professional.profileId ? (
+                <Link
+                  key={professional.id}
+                  href={`/user/profile/${professional.profileId}`}
+                  className="hover:shadow-xl transition-shadow rounded-[15px]"
+                >
+                  {card}
+                </Link>
+              ) : (
+                <div key={professional.id}>{card}</div>
+              );
+            })
           ) : (
             // No data message
             <div className="col-span-3 flex items-center justify-center py-12">
diff --git a/src/types/cms.ts b/src/types/cms.ts
index 2472298..b418b77 100644
--- a/src/types/cms.ts
+++ b/src/types/cms.ts
@@ -12,6 +12,7 @@ export interface FeatureItem {
 }
 
 export interface FeaturedAgentItem {
+  id?: string;
   name: string;
   role: string;
   rating: string;
@@ -28,6 +29,7 @@ export interface FeaturesContent {
 }
 
 export interface ProfessionalItem {
+  id?: string;
   name: string;
   subtitle: string;
   location: string;