diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index ec9cee2..043491f 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -1,16 +1,26 @@
 import { motion } from 'motion/react';
 import { useTranslation } from '../i18n';
+import {
+  SiReact,
+  SiTypescript,
+  SiNodedotjs,
+  SiPython,
+  SiFirebase,
+  SiPostgresql,
+  SiDocker,
+  SiGit,
+} from 'react-icons/si';
 import styles from './About.module.css';
 
 const techStack = [
-  { name: 'React', icon: '⚛️' },
-  { name: 'TypeScript', icon: '📘' },
-  { name: 'Node.js', icon: '🟢' },
-  { name: 'Python', icon: '🐍' },
-  { name: 'Firebase', icon: '🔥' },
-  { name: 'PostgreSQL', icon: '🐘' },
-  { name: 'Docker', icon: '🐳' },
-  { name: 'Git', icon: '📦' },
+  { name: 'React', icon: SiReact },
+  { name: 'TypeScript', icon: SiTypescript },
+  { name: 'Node.js', icon: SiNodedotjs },
+  { name: 'Python', icon: SiPython },
+  { name: 'Firebase', icon: SiFirebase },
+  { name: 'PostgreSQL', icon: SiPostgresql },
+  { name: 'Docker', icon: SiDocker },
+  { name: 'Git', icon: SiGit },
 ];
 
 const containerVariants = {
@@ -93,7 +103,7 @@ export function About() {
                 variants={itemVariants}
                 whileHover={{ scale: 1.05, y: -4 }}
               >
-                <span className={styles.techIcon}>{tech.icon}</span>
+                <span className={styles.techIcon}><tech.icon /></span>
                 <span className={styles.techName}>{tech.name}</span>
               </motion.div>
             ))}