diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index c0c2e8e..07cb5fc 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -1,10 +1,11 @@
 import { useRef, useState, useEffect, useCallback } from 'react';
+import { Link } from 'react-router-dom';
 import { GlassCard } from '@/components/GlassCard';
 import avatar from '@/assets/avatar.png';
-import { Home, MessageCircle, Rss, GitBranch, Search, ExternalLink } from 'lucide-react';
+import { MessageCircle, Rss, GitBranch, Search, ExternalLink, ArrowUpRight } from 'lucide-react';
 
 const items = [
-  { icon: MessageCircle, label: 'Who Am I?', href: 'https://damaj.tech/site/whoami', desc: 'About me' },
+  { icon: MessageCircle, label: 'Who Am I?', href: '/whoami', desc: 'About me', internal: true },
   { icon: Rss, label: 'Blog', href: 'https://damaj.tech/site/blog', desc: 'My writings' },
   { icon: GitBranch, label: 'Git Server', href: 'https://git.damaj.tech/', desc: 'Self-hosted Forgejo' },
   { icon: Search, label: 'SearXNG', href: 'https://searxng.damaj.tech/', desc: 'Private search' },
@@ -151,28 +152,36 @@ const Index = () => {
           const cardW = isMobile ? 110 : 130;
           const cardH = isMobile ? 80 : 90;
 
-          return (
-            <a
-              key={item.label}
-              ref={(el) => { cardRefs.current[i] = el; }}
-              href={item.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="absolute"
-              style={{
-                left: `calc(50% + ${x}px - ${cardW / 2}px)`,
-                top: `calc(50% + ${y}px - ${cardH / 2}px)`,
-                width: cardW,
-              }}
-            >
-              <GlassCard className="p-3 md:p-4 link-arrow-parent cursor-pointer">
-                <div className="flex items-start justify-between">
-                  <item.icon className="w-4 h-4 text-primary mb-1.5" />
-                  <ExternalLink className="w-3 h-3 text-muted-foreground link-arrow" />
-                </div>
-                <p className="font-heading font-semibold text-foreground text-xs md:text-sm leading-tight">{item.label}</p>
-                <p className="text-[10px] text-muted-foreground mt-0.5 leading-tight">{item.desc}</p>
-              </GlassCard>
+          const cardContent = (
+            <GlassCard className="p-3 md:p-4 link-arrow-parent cursor-pointer">
+              <div className="flex items-start justify-between">
+                <item.icon className="w-4 h-4 text-primary mb-1.5" />
+                {item.internal
+                  ? <ArrowUpRight className="w-3 h-3 text-muted-foreground link-arrow" />
+                  : <ExternalLink className="w-3 h-3 text-muted-foreground link-arrow" />}
+              </div>
+              <p className="font-heading font-semibold text-foreground text-xs md:text-sm leading-tight">{item.label}</p>
+              <p className="text-[10px] text-muted-foreground mt-0.5 leading-tight">{item.desc}</p>
+            </GlassCard>
+          );
+
+          const commonProps = {
+            ref: (el: HTMLAnchorElement | null) => { cardRefs.current[i] = el; },
+            className: 'absolute',
+            style: {
+              left: `calc(50% + ${x}px - ${cardW / 2}px)`,
+              top: `calc(50% + ${y}px - ${cardH / 2}px)`,
+              width: cardW,
+            },
+          };
+
+          return item.internal ? (
+            <Link key={item.label} to={item.href} {...commonProps}>
+              {cardContent}
+            </Link>
+          ) : (
+            <a key={item.label} href={item.href} target="_blank" rel="noopener noreferrer" {...commonProps}>
+              {cardContent}
             </a>
           );
         })}