diff --git a/frontend/__tests__/unit/data/mockUserDetails.ts b/frontend/__tests__/unit/data/mockUserDetails.ts
index 258952153..ad56c3a9f 100644
--- a/frontend/__tests__/unit/data/mockUserDetails.ts
+++ b/frontend/__tests__/unit/data/mockUserDetails.ts
@@ -4,7 +4,7 @@ export const mockUserDetailsData = {
     name: 'Test User',
     avatarUrl: 'https://example.com/avatar.jpg',
     url: 'https://github.com/testuser',
-    bio: 'This is a test user',
+    bio: 'Test @User',
     company: 'Test Company',
     location: 'Test Location',
     email: 'testuser@example.com',
diff --git a/frontend/__tests__/unit/pages/UserDetails.test.tsx b/frontend/__tests__/unit/pages/UserDetails.test.tsx
index 21b8ebcb7..264df9c37 100644
--- a/frontend/__tests__/unit/pages/UserDetails.test.tsx
+++ b/frontend/__tests__/unit/pages/UserDetails.test.tsx
@@ -72,7 +72,8 @@ describe('UserDetailsPage', () => {
 
     expect(screen.getByText('Test User')).toBeInTheDocument()
     expect(screen.getByText(`@testuser`)).toBeInTheDocument()
-    expect(screen.getByText('This is a test user')).toBeInTheDocument()
+    expect(screen.getByText('Test')).toBeInTheDocument()
+    expect(screen.getByText('@User')).toBeInTheDocument()
     expect(screen.getByText('Test Company')).toBeInTheDocument()
     expect(screen.getByText('Test Location')).toBeInTheDocument()
   })
diff --git a/frontend/src/pages/UserDetails.tsx b/frontend/src/pages/UserDetails.tsx
index 0b289fa28..5659fe879 100644
--- a/frontend/src/pages/UserDetails.tsx
+++ b/frontend/src/pages/UserDetails.tsx
@@ -91,6 +91,27 @@ const UserDetailsPage: React.FC = () => {
     )
   }
 
+  const formattedBio = user?.bio?.split(' ').map((word, index) => {
+    let mentionMatch = word.match(/^@([\w-.]+)$/)
+    if (mentionMatch) {
+      // Removed dot at the end of the mention
+      if (mentionMatch[0].endsWith('.')) mentionMatch[0] = mentionMatch[0].slice(0, -1)
+      return (
+        <Link
+          key={index}
+          href={`https://github.com/${mentionMatch[1]}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-500 hover:underline"
+        >
+          {mentionMatch[0]}
+          <span> </span>
+        </Link>
+      )
+    }
+    return <span key={index}>{word} </span>
+  })
+
   return (
     <MetadataManager pageTitle={user?.name || user?.login} description={user?.bio} url={user.url}>
       <div className="mt-24 min-h-screen w-full p-4">
@@ -150,7 +171,9 @@ const UserDetailsPage: React.FC = () => {
               </div>
             </div>
             <div className="px-6 py-6">
-              {user.bio && <p className="text-lg text-gray-700 dark:text-gray-300">{user.bio}</p>}
+              {user.bio && (
+                <p className="text-lg text-gray-700 dark:text-gray-300">{formattedBio}</p>
+              )}
               <div className="mt-4 space-y-3">
                 {user.company && (
                   <div className="flex items-center space-x-2 text-gray-600 dark:text-gray-400">
@@ -229,7 +252,6 @@ const UserDetailsPage: React.FC = () => {
                   </div>
                 </div>
               )}
-
               {user.releases && user.releases.length > 0 && (
                 <div className="space-y-4">
                   <h2 className="text-xl font-semibold text-gray-900 dark:text-white">