diff --git a/src/components/sections/Skills.tsx b/src/components/sections/Skills.tsx
index c7a0f23..61adc14 100644
--- a/src/components/sections/Skills.tsx
+++ b/src/components/sections/Skills.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useTranslations } from 'next-intl';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Database, Server, Code2, Bot, Workflow, FileCode2 } from 'lucide-react';
@@ -28,6 +28,14 @@ const Skills = () => {
   const [selectedSkill, setSelectedSkill] = useState<string | null>(null);
   const [skills, setSkills] = useState<Skill[]>([]);
 
+  const handleHoverStart = useCallback((skillName: string) => {
+    setSelectedSkill(skillName);
+  }, []);
+
+  const handleHoverEnd = useCallback(() => {
+    setSelectedSkill(null);
+  }, []);
+
   useEffect(() => {
     try {
       const translatedSkills = t.raw('skills') as Skill[];
@@ -108,8 +116,8 @@ const Skills = () => {
                     }`}
                     whileHover={{ scale: 1.05 }}
                     whileTap={{ scale: 0.98 }}
-                    onHoverStart={() => setSelectedSkill(skill.name)}
-                    onHoverEnd={() => setSelectedSkill(null)}
+                    onHoverStart={() => handleHoverStart(skill.name)}
+                    onHoverEnd={handleHoverEnd}
                     role="button"
                   >
                     <motion.div