diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index 8bbe0f9..2e2f68a 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/src/components/GlobeDemo.tsx b/src/components/GlobeDemo.tsx
index e9c6308..f72a7fc 100644
--- a/src/components/GlobeDemo.tsx
+++ b/src/components/GlobeDemo.tsx
@@ -45,10 +45,10 @@ const GlobeDemo: React.FC = () => {
           <p className='text-gray-300 mb-4'>使用鼠标拖拽旋转地球，滚轮缩放</p>
           <div className='flex justify-center space-x-4'>
             <div className='bg-gray-800 px-4 py-2 rounded'>
-              <span className='text-cyan-400'>✨ 真实地球纹理</span>
+              <span className='text-primary'>✨ 真实地球纹理</span>
             </div>
             <div className='bg-gray-800 px-4 py-2 rounded'>
-              <span className='text-blue-400'>🌍 大气层效果</span>
+              <span className='text-primary'>🌍 大气层效果</span>
             </div>
             <div className='bg-gray-800 px-4 py-2 rounded'>
               <span className='text-green-400'>🔄 自动旋转</span>
diff --git a/src/components/common/ParallaxContainer.tsx b/src/components/common/ParallaxContainer.tsx
index 306a7b9..2094581 100644
--- a/src/components/common/ParallaxContainer.tsx
+++ b/src/components/common/ParallaxContainer.tsx
@@ -32,7 +32,7 @@ const ParallaxContainer: React.FC<ParallaxContainerProps> = ({ children }) => {
 
         {/* Floating geometric shapes */}
         <div
-          className='absolute top-1/4 left-1/6 w-4 h-4 bg-cyan-400/20 rounded-full'
+          className='absolute top-1/4 left-1/6 w-4 h-4 bg-blue-500/15 rounded-full'
           style={{
             transform: `translateY(${scrollProgress * PARALLAX_CONFIG.background.slow * 100}px) rotate(${scrollProgress * 360}deg)`,
           }}
@@ -52,13 +52,13 @@ const ParallaxContainer: React.FC<ParallaxContainerProps> = ({ children }) => {
 
         {/* Gradient glow */}
         <div
-          className='absolute top-0 left-1/2 w-96 h-96 bg-gradient-to-br from-cyan-500/5 to-blue-500/5 rounded-full blur-3xl'
+          className='absolute top-0 left-1/2 w-96 h-96 bg-gradient-to-br from-blue-500/5 to-gray-700/5 rounded-full blur-3xl'
           style={{
             transform: `translateX(-50%) translateY(${scrollProgress * PARALLAX_CONFIG.background.slow * 200}px)`,
           }}
         />
         <div
-          className='absolute bottom-0 right-1/4 w-64 h-64 bg-gradient-to-tl from-purple-500/5 to-pink-500/5 rounded-full blur-3xl'
+          className='absolute bottom-0 right-1/4 w-64 h-64 bg-gradient-to-tl from-gray-700/5 to-gray-800/5 rounded-full blur-3xl'
           style={{
             transform: `translateY(${-scrollProgress * PARALLAX_CONFIG.background.medium * 150}px)`,
           }}
diff --git a/src/components/sections/AboutSection.tsx b/src/components/sections/AboutSection.tsx
index cee60e1..521ddd5 100644
--- a/src/components/sections/AboutSection.tsx
+++ b/src/components/sections/AboutSection.tsx
@@ -78,9 +78,9 @@ const AboutSection = React.memo(() => {
             variants={fadeInUp}
           >
             <div className='relative'>
-              <div className='absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-3xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200'></div>
+              <div className='absolute -inset-1 bg-gradient-to-r from-blue-600 to-gray-700 rounded-3xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200'></div>
               <div className='relative bg-background/90 rounded-3xl p-8'>
-                <h3 className='text-2xl font-bold text-cyan-400 mb-4 heading-modern'>
+                <h3 className='text-2xl font-bold text-primary mb-4 heading-modern'>
                   {t('about.cards.experience.title')}
                 </h3>
                 <p className='text-gray-300 font-semibold mb-3 text-lg'>
@@ -97,9 +97,9 @@ const AboutSection = React.memo(() => {
             variants={fadeInUp}
           >
             <div className='relative'>
-              <div className='absolute -inset-1 bg-gradient-to-r from-purple-500 to-pink-600 rounded-3xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200'></div>
+              <div className='absolute -inset-1 bg-gradient-to-r from-blue-700 to-gray-800 rounded-3xl blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200'></div>
               <div className='relative bg-background/90 rounded-3xl p-8'>
-                <h3 className='text-2xl font-bold text-purple-400 mb-4 heading-modern'>
+                <h3 className='text-2xl font-bold text-gray-300 mb-4 heading-modern'>
                   {t('about.cards.projects.title')}
                 </h3>
                 <p className='text-gray-300 font-semibold mb-3 text-lg'>
@@ -138,7 +138,7 @@ const AboutSection = React.memo(() => {
           <div className='grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6'>
             {Object.entries(advantages).map(([key, value], index) => (
               <motion.div key={key} className='group relative' variants={fadeInUp}>
-                <div className='absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-1000 group-hover:duration-200'></div>
+                <div className='absolute -inset-0.5 bg-gradient-to-r from-gray-700 to-gray-800 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-1000 group-hover:duration-200'></div>
                 <div className='relative flex items-start gap-4 p-6 glass-card hover:scale-[1.02] transition-all duration-300'>
                   <div
                     className={`w-3 h-3 rounded-full mt-2 flex-shrink-0 animate-pulse ${
diff --git a/src/components/sections/ContactSection.tsx b/src/components/sections/ContactSection.tsx
index 0760837..cf56d9f 100644
--- a/src/components/sections/ContactSection.tsx
+++ b/src/components/sections/ContactSection.tsx
@@ -70,7 +70,7 @@ const ContactSection = () => {
         style={{ transform: `translateY(${Number(parallaxY || 0) * 0.6}px)` }}
       />
       <div
-        className='absolute top-1/3 left-1/3 w-20 h-20 bg-purple-500/10 rounded-full blur-xl'
+        className='absolute top-1/3 left-1/3 w-20 h-20 bg-primary/10 rounded-full blur-xl'
         style={{ transform: `translateY(${Number(parallaxY || 0) * 0.3}px)` }}
       />
       <div className='relative z-10'>
@@ -99,15 +99,15 @@ const ContactSection = () => {
             animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
             transition={{ duration: 0.5 }}
           >
-            <div className='absolute -inset-1 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200'></div>
+            <div className='absolute -inset-1 bg-gradient-to-r from-blue-600 to-gray-700 rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200'></div>
             <div className='relative card-modern'>
-              <h3 className='text-2xl font-bold mb-8 text-cyan-400 heading-modern'>
+              <h3 className='text-2xl font-bold mb-8 text-primary heading-modern'>
                 {t('contact.info')}
               </h3>
 
               <div className='space-y-6 mb-10'>
                 <div className='flex items-center group/item hover:scale-105 transition-transform duration-300'>
-                  <div className='w-14 h-14 rounded-2xl bg-gradient-to-r from-cyan-500/20 to-blue-500/20 flex items-center justify-center mr-6 group-hover/item:shadow-glow transition-all duration-300'>
+                  <div className='w-14 h-14 rounded-2xl bg-gradient-to-r from-primary/20 to-blue-500/20 flex items-center justify-center mr-6 group-hover/item:shadow-glow transition-all duration-300'>
                     <svg
                       className='w-7 h-7 text-cyan-400'
                       fill='none'
@@ -127,7 +127,7 @@ const ContactSection = () => {
                     <p className='text-gray-400 text-base font-medium'>{t('contact.email')}</p>
                     <a
                       href='mailto:jimmflyyang@gmail.com'
-                      className='text-text hover:text-cyan-400 transition-colors text-lg font-semibold'
+                      className='text-text hover:text-primary-hover transition-colors text-lg font-semibold'
                     >
                       jimmflyyang@gmail.com
                     </a>
@@ -203,9 +203,9 @@ const ContactSection = () => {
             animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 30 }}
             transition={{ duration: 0.5, delay: 0.2 }}
           >
-            <div className='absolute -inset-1 bg-gradient-to-r from-purple-500 to-pink-600 rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200'></div>
+            <div className='absolute -inset-1 bg-gradient-to-r from-blue-700 to-gray-800 rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200'></div>
             <div className='relative card-modern'>
-              <h3 className='text-2xl font-bold mb-8 text-purple-400 heading-modern'>
+              <h3 className='text-2xl font-bold mb-8 text-gray-300 heading-modern'>
                 {t('contact.form.title')}
               </h3>
 
@@ -253,7 +253,7 @@ const ContactSection = () => {
                       value={formData.name}
                       onChange={handleChange}
                       required
-                      className='w-full px-6 py-4 rounded-2xl bg-gray-800/50 border-2 border-gray-700/50 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 text-text text-lg transition-all duration-300 group-hover:border-purple-500/50'
+                      className='w-full px-6 py-4 rounded-2xl bg-gray-800/50 border-2 border-gray-700/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 text-text text-lg transition-all duration-300 group-hover:border-primary/50'
                       placeholder='Your Name'
                     />
                   </div>
@@ -272,7 +272,7 @@ const ContactSection = () => {
                       value={formData.email}
                       onChange={handleChange}
                       required
-                      className='w-full px-6 py-4 rounded-2xl bg-gray-800/50 border-2 border-gray-700/50 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 text-text text-lg transition-all duration-300 group-hover:border-purple-500/50'
+                      className='w-full px-6 py-4 rounded-2xl bg-gray-800/50 border-2 border-gray-700/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 text-text text-lg transition-all duration-300 group-hover:border-primary/50'
                       placeholder='your.email@example.com'
                     />
                   </div>
@@ -291,14 +291,14 @@ const ContactSection = () => {
                       onChange={handleChange}
                       required
                       rows={6}
-                      className='w-full px-6 py-4 rounded-2xl bg-gray-800/50 border-2 border-gray-700/50 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 text-text text-lg resize-none transition-all duration-300 group-hover:border-purple-500/50'
+                      className='w-full px-6 py-4 rounded-2xl bg-gray-800/50 border-2 border-gray-700/50 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 text-text text-lg resize-none transition-all duration-300 group-hover:border-primary/50'
                       placeholder='Your message...'
                     />
                   </div>
 
                   <motion.button
                     type='submit'
-                    className='w-full py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold text-lg rounded-2xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 flex justify-center items-center shadow-lg hover:shadow-xl transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed'
+                    className='w-full py-4 bg-gradient-to-r from-primary to-primary-hover text-white font-bold text-lg rounded-2xl hover:from-primary-hover hover:to-primary transition-all duration-300 flex justify-center items-center shadow-lg hover:shadow-xl transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed'
                     disabled={isSubmitting}
                     whileHover={{ scale: 1.02 }}
                     whileTap={{ scale: 0.98 }}
diff --git a/src/components/sections/ExperienceSection.tsx b/src/components/sections/ExperienceSection.tsx
index aeb52da..dcdfe2f 100644
--- a/src/components/sections/ExperienceSection.tsx
+++ b/src/components/sections/ExperienceSection.tsx
@@ -54,17 +54,17 @@ const ExperienceSection = React.memo(() => {
 
               <div className='relative card-modern'>
                 {/* Modern timeline decoration */}
-                <div className='absolute left-0 top-8 bottom-8 w-1.5 bg-gradient-to-b from-cyan-400 via-purple-500 to-pink-500 rounded-full shadow-glow' />
-                <div className='absolute left-[-6px] top-8 w-4 h-4 bg-gradient-to-r from-cyan-400 to-purple-500 rounded-full shadow-lg animate-pulse' />
+                <div className='absolute left-0 top-8 bottom-8 w-1.5 bg-gradient-to-b from-primary via-blue-500 to-gray-600 rounded-full shadow-glow' />
+                <div className='absolute left-[-6px] top-8 w-4 h-4 bg-gradient-to-r from-primary to-blue-500 rounded-full shadow-lg animate-pulse' />
 
                 <div className='ml-12'>
                   {/* Enhanced company and position information */}
                   <div className='flex flex-col md:flex-row md:items-center md:justify-between mb-6'>
                     <div className='group-hover:scale-105 transition-transform duration-300'>
-                      <h3 className='text-3xl font-black text-cyan-400 mb-3 heading-modern'>
+                      <h3 className='text-3xl font-black text-primary mb-3 heading-modern'>
                         {t(experience.company)}
                       </h3>
-                      <h4 className='text-2xl font-bold text-purple-300 mb-2 heading-modern'>
+                      <h4 className='text-2xl font-bold text-gray-300 mb-2 heading-modern'>
                         {t(experience.position)}
                       </h4>
                     </div>
@@ -83,7 +83,7 @@ const ExperienceSection = React.memo(() => {
 
                   {/* Enhanced achievements */}
                   <div className='mb-8'>
-                    <h5 className='text-2xl font-bold text-purple-400 mb-6 heading-modern'>
+                    <h5 className='text-2xl font-bold text-gray-400 mb-6 heading-modern'>
                       {t('experience.achievements')}
                     </h5>
                     <ul className='space-y-4'>
@@ -94,7 +94,7 @@ const ExperienceSection = React.memo(() => {
                           variants={fadeInUp}
                           transition={{ delay: index * 0.2 + achievementIndex * 0.1 }}
                         >
-                          <span className='text-cyan-400 mr-4 mt-1 text-xl group-hover:text-purple-400 transition-colors'>
+                          <span className='text-primary mr-4 mt-1 text-xl group-hover:text-gray-400 transition-colors'>
                             ▸
                           </span>
                           <span className='text-lg leading-relaxed text-modern group-hover:text-white transition-colors'>
@@ -114,7 +114,7 @@ const ExperienceSection = React.memo(() => {
                       {experience.technologies.map((tech, techIndex) => (
                         <motion.span
                           key={techIndex}
-                          className='px-4 py-2 bg-gradient-to-r from-cyan-500/10 to-purple-500/10 text-cyan-300 rounded-xl text-sm font-semibold border border-cyan-500/20 hover:border-purple-500/30 hover:scale-105 transition-all duration-300'
+                          className='px-4 py-2 bg-gradient-to-r from-primary/10 to-gray-700/10 text-white rounded-xl text-sm font-semibold border border-primary/20 hover:border-primary/40 hover:scale-105 transition-all duration-300'
                           variants={fadeInUp}
                           transition={{ delay: index * 0.2 + techIndex * 0.05 }}
                           whileHover={{ scale: 1.05 }}
diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
index dc2fa05..b98e904 100644
--- a/src/components/sections/HeroSection.tsx
+++ b/src/components/sections/HeroSection.tsx
@@ -34,20 +34,20 @@ const HeroSection = React.memo(() => {
   return (
     <section className='min-h-screen flex items-center justify-center relative overflow-hidden pt-16 sm:pt-20'>
       {/* Background effect layer - contains gradient background and multi-layer parallax glow effects */}
-      {/* Main background gradient - sophisticated dark gradient */}
-      <div className='absolute inset-0 bg-gradient-to-br from-slate-900 via-purple-900/20 to-slate-900' />
+      {/* Main background gradient - Apple-inspired subtle gradient */}
+      <div className='absolute inset-0 bg-gradient-to-br from-black via-gray-900/40 to-black' />
 
-      {/* Enhanced glow effects with modern colors */}
+      {/* Refined glow effects with Apple-style colors */}
       <div
-        className='absolute top-20 left-20 w-96 h-96 bg-gradient-to-r from-purple-500/15 to-pink-500/15 rounded-full blur-3xl'
+        className='absolute top-20 left-20 w-96 h-96 bg-gradient-to-r from-blue-500/8 to-blue-400/6 rounded-full blur-3xl'
         style={getLayerStyle(0)}
       />
       <div
-        className='absolute bottom-20 right-20 w-[500px] h-[500px] bg-gradient-to-r from-cyan-400/10 to-blue-500/10 rounded-full blur-3xl'
+        className='absolute bottom-20 right-20 w-[500px] h-[500px] bg-gradient-to-r from-blue-600/6 to-gray-700/8 rounded-full blur-3xl'
         style={getLayerStyle(1)}
       />
       <div
-        className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] bg-gradient-to-r from-indigo-500/8 to-purple-500/8 rounded-full blur-3xl'
+        className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] bg-gradient-to-r from-gray-800/5 to-gray-900/5 rounded-full blur-3xl'
         style={getLayerStyle(2)}
       />
 
@@ -66,7 +66,7 @@ const HeroSection = React.memo(() => {
               className='text-6xl md:text-8xl font-black mb-8 heading-modern tracking-tighter'
               variants={fadeInUp}
             >
-              <span className='bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500 bg-clip-text text-transparent'>
+              <span className='bg-gradient-to-r from-white via-gray-100 to-gray-200 bg-clip-text text-transparent'>
                 {name}
               </span>
             </motion.h1>
@@ -98,14 +98,14 @@ const HeroSection = React.memo(() => {
             >
               <motion.a
                 href='#projects'
-                className='button-modern bg-gradient-to-r from-cyan-500 to-purple-600 text-white font-bold hover:shadow-glow whitespace-nowrap'
+                className='button-modern text-white font-bold hover:shadow-glow whitespace-nowrap'
                 variants={fadeInUp}
               >
                 {cta}
               </motion.a>
               <motion.a
                 href='#contact'
-                className='button-modern border-2 border-purple-500/50 text-purple-400 hover:bg-purple-500/10 whitespace-nowrap'
+                className='button-modern border-2 border-white/20 bg-transparent text-white hover:bg-white/10 whitespace-nowrap'
                 variants={fadeInUp}
               >
                 {contactMe}
@@ -113,7 +113,7 @@ const HeroSection = React.memo(() => {
               <motion.a
                 href={`${import.meta.env.BASE_URL}resume_cn_onepage.pdf`}
                 download
-                className='button-modern border-2 border-cyan-500/50 text-cyan-300 hover:bg-cyan-500/10 flex items-center justify-center gap-2 whitespace-nowrap'
+                className='button-modern border-2 border-white/20 bg-transparent text-white hover:bg-white/10 flex items-center justify-center gap-2 whitespace-nowrap'
                 variants={fadeInUp}
               >
                 <svg
@@ -163,7 +163,7 @@ const HeroSection = React.memo(() => {
             {/* 3D globe container - enhanced with glow effect */}
             <div className='relative w-96 h-96 md:w-[32rem] md:h-[32rem]'>
               {/* Ambient glow behind globe */}
-              <div className='absolute inset-0 bg-gradient-to-r from-cyan-400/20 to-purple-500/20 rounded-full blur-2xl animate-glow' />
+              <div className='absolute inset-0 bg-gradient-to-r from-blue-500/15 to-gray-700/10 rounded-full blur-2xl animate-glow' />
 
               {/* Three.js Canvas - 3D rendering canvas */}
               <Canvas
@@ -174,8 +174,8 @@ const HeroSection = React.memo(() => {
                 <Suspense fallback={null}>
                   {/* Enhanced lighting setup */}
                   <ambientLight intensity={1.2} />
-                  <pointLight position={[-3, -2, -3]} intensity={0.3} color='#4a90e2' />
-                  <pointLight position={[3, 2, 3]} intensity={0.2} color='#a855f7' />
+                  <pointLight position={[-3, -2, -3]} intensity={0.3} color='#0071e3' />
+                  <pointLight position={[3, 2, 3]} intensity={0.2} color='#86868b' />
 
                   {/* 3D globe model component */}
                   <RealisticGlobe
diff --git a/src/components/sections/ProjectsSection.tsx b/src/components/sections/ProjectsSection.tsx
index aa449b0..bae20c3 100644
--- a/src/components/sections/ProjectsSection.tsx
+++ b/src/components/sections/ProjectsSection.tsx
@@ -55,11 +55,11 @@ const ProjectsSection = () => {
     <section id='projects' ref={sectionRef} className='section-container relative overflow-hidden'>
       {/* Background decorative elements - Parallax effect */}
       <div
-        className='absolute top-16 right-16 w-40 h-40 bg-purple-500/8 rounded-full blur-2xl'
+        className='absolute top-16 right-16 w-40 h-40 bg-blue-500/8 rounded-full blur-2xl'
         style={{ transform: `translateY(${Number(parallaxY || 0) * 0.3}px)` }}
       />
       <div
-        className='absolute bottom-16 left-16 w-32 h-32 bg-cyan-500/8 rounded-full blur-2xl'
+        className='absolute bottom-16 left-16 w-32 h-32 bg-gray-700/8 rounded-full blur-2xl'
         style={{ transform: `translateY(${Number(parallaxY || 0) * 0.5}px)` }}
       />
       <div
@@ -94,10 +94,10 @@ const ProjectsSection = () => {
               <div
                 className={`absolute -inset-1 rounded-3xl blur opacity-25 group-hover:opacity-60 transition duration-1000 group-hover:duration-200 ${
                   index % 3 === 0
-                    ? 'bg-gradient-to-r from-cyan-500 to-blue-600'
+                    ? 'bg-gradient-to-r from-blue-600 to-gray-700'
                     : index % 3 === 1
-                      ? 'bg-gradient-to-r from-purple-500 to-pink-600'
-                      : 'bg-gradient-to-r from-emerald-500 to-teal-600'
+                      ? 'bg-gradient-to-r from-blue-700 to-gray-800'
+                      : 'bg-gradient-to-r from-gray-700 to-gray-800'
                 }`}
               ></div>
 
@@ -110,7 +110,7 @@ const ProjectsSection = () => {
                         ? 'bg-cyan-500/10'
                         : index % 3 === 1
                           ? 'bg-purple-500/10'
-                          : 'bg-emerald-500/10'
+                          : 'bg-gray-700/10'
                     }`}
                   >
                     {project.image}
@@ -120,10 +120,10 @@ const ProjectsSection = () => {
                 <h3
                   className={`text-2xl font-bold mb-4 group-hover:scale-105 transition-all duration-300 heading-modern ${
                     index % 3 === 0
-                      ? 'text-cyan-400'
+                      ? 'text-primary'
                       : index % 3 === 1
-                        ? 'text-purple-400'
-                        : 'text-emerald-400'
+                        ? 'text-gray-300'
+                        : 'text-gray-300'
                   }`}
                 >
                   {project.title}
@@ -139,10 +139,10 @@ const ProjectsSection = () => {
                       key={tech}
                       className={`px-3 py-1.5 rounded-xl text-sm font-medium transition-all duration-300 ${
                         index % 3 === 0
-                          ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/20'
+                          ? 'bg-primary/10 text-white border border-primary/20'
                           : index % 3 === 1
-                            ? 'bg-purple-500/10 text-purple-300 border border-purple-500/20'
-                            : 'bg-emerald-500/10 text-emerald-300 border border-emerald-500/20'
+                            ? 'bg-gray-700/10 text-white border border-gray-700/20'
+                            : 'bg-gray-700/10 text-white border border-gray-700/20'
                       }`}
                       style={{
                         animationDelay: `${techIndex * 0.1}s`,
@@ -157,10 +157,10 @@ const ProjectsSection = () => {
                   <button
                     className={`button-modern text-sm font-semibold border-2 transition-all duration-300 ${
                       index % 3 === 0
-                        ? 'border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10'
+                        ? 'border-primary/50 text-white hover:bg-primary/10'
                         : index % 3 === 1
-                          ? 'border-purple-500/50 text-purple-400 hover:bg-purple-500/10'
-                          : 'border-emerald-500/50 text-emerald-400 hover:bg-emerald-500/10'
+                          ? 'border-gray-500/50 text-white hover:bg-gray-500/10'
+                          : 'border-gray-500/50 text-gray-300 hover:bg-gray-700/10'
                     }`}
                   >
                     {t('projects.viewDetails')}
diff --git a/src/components/sections/SkillsSection.tsx b/src/components/sections/SkillsSection.tsx
index a5fa97b..06aff44 100644
--- a/src/components/sections/SkillsSection.tsx
+++ b/src/components/sections/SkillsSection.tsx
@@ -56,9 +56,9 @@ const SkillsSection: React.FC = React.memo(() => {
             whileInView='show'
             viewport={viewport}
           >
-            <div className='absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200'></div>
+            <div className='absolute -inset-1 bg-gradient-to-r from-blue-600 to-gray-700 rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200'></div>
             <div className='relative card-modern'>
-              <h3 className='text-2xl font-bold mb-8 text-cyan-400 heading-modern'>
+              <h3 className='text-2xl font-bold mb-8 text-primary heading-modern'>
                 {t('skills.frontend')}
               </h3>
               <motion.div
diff --git a/src/index.css b/src/index.css
index 7f11a33..f09f75a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,16 +5,39 @@
 @tailwind utilities;
 
 :root {
-  --color-background: #0a0a0f;
-  --color-text: #f0f6ff;
-  --color-primary: #64ffda;
-  --color-secondary: #8892b0;
-  --color-accent: #1a1a2e;
-  --color-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  --color-gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-  --color-gradient-tertiary: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-  --color-gradient-purple: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
-  --color-gradient-orange: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+  --color-background: #000000;
+  --color-background-elevated: #1d1d1f;
+  --color-text: #f5f5f7;
+  --color-text-secondary: #86868b;
+  --color-primary: #0071e3;
+  --color-primary-hover: #0077ed;
+  --color-secondary: #86868b;
+  --color-accent: #1d1d1f;
+  --color-gradient-primary: linear-gradient(
+    180deg,
+    rgba(0, 113, 227, 0.1) 0%,
+    rgba(0, 113, 227, 0.05) 100%
+  );
+  --color-gradient-secondary: linear-gradient(
+    180deg,
+    rgba(29, 29, 31, 0.8) 0%,
+    rgba(0, 0, 0, 0.8) 100%
+  );
+  --color-gradient-tertiary: linear-gradient(
+    180deg,
+    rgba(0, 113, 227, 0.15) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  --color-gradient-subtle: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.05) 0%,
+    rgba(255, 255, 255, 0.02) 100%
+  );
+  --color-gradient-glass: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0.05) 100%
+  );
 }
 
 @layer base {
@@ -25,26 +48,23 @@
 
 @layer components {
   .glass-card {
-    @apply bg-background/20 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl;
-    background: linear-gradient(
-      145deg,
-      rgba(255, 255, 255, 0.1) 0%,
-      rgba(255, 255, 255, 0.05) 100%
-    );
+    @apply backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl;
+    background: rgba(29, 29, 31, 0.72);
   }
 
   .glass-card-hover {
-    @apply transition-all duration-500 ease-out hover:scale-[1.02] hover:shadow-3xl;
+    @apply transition-all duration-500 ease-out;
     box-shadow:
-      0 25px 50px -12px rgba(0, 0, 0, 0.25),
-      0 0 0 1px rgba(255, 255, 255, 0.1);
+      0 20px 40px -10px rgba(0, 0, 0, 0.3),
+      0 0 0 1px rgba(255, 255, 255, 0.08);
   }
 
   .glass-card-hover:hover {
+    transform: translateY(-2px);
     box-shadow:
-      0 35px 60px -12px rgba(0, 0, 0, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.15),
-      0 0 80px rgba(100, 255, 218, 0.1);
+      0 24px 48px -12px rgba(0, 0, 0, 0.4),
+      0 0 0 1px rgba(255, 255, 255, 0.12),
+      0 0 24px rgba(0, 113, 227, 0.15);
   }
 
   .section-container {
@@ -52,7 +72,7 @@
   }
 
   .heading-gradient {
-    @apply bg-gradient-to-r from-primary via-purple-400 to-pink-400 bg-clip-text text-transparent;
+    @apply bg-gradient-to-r from-white via-gray-100 to-gray-300 bg-clip-text text-transparent;
   }
 
   .heading-modern {
@@ -66,9 +86,16 @@
   }
 
   .button-modern {
-    @apply relative overflow-hidden rounded-2xl px-8 py-4 font-semibold transition-all duration-300 transform hover:scale-105;
-    background: linear-gradient(135deg, rgba(100, 255, 218, 0.1) 0%, rgba(120, 100, 255, 0.1) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    @apply relative overflow-hidden rounded-full px-8 py-4 font-semibold transition-all duration-300;
+    background: #0071e3;
+    border: none;
+    color: #ffffff;
+  }
+
+  .button-modern:hover {
+    background: #0077ed;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.4);
   }
 
   .button-modern::before {
@@ -78,7 +105,7 @@
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
     transition: left 0.5s;
   }
 
@@ -88,11 +115,8 @@
 
   .card-modern {
     @apply glass-card glass-card-hover p-8 rounded-3xl;
-    background: linear-gradient(
-      145deg,
-      rgba(255, 255, 255, 0.08) 0%,
-      rgba(255, 255, 255, 0.02) 100%
-    );
+    background: rgba(29, 29, 31, 0.6);
+    backdrop-filter: blur(20px);
   }
 
   .gradient-border {
@@ -104,8 +128,8 @@
     content: '';
     position: absolute;
     inset: 0;
-    padding: 2px;
-    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #f5576c);
+    padding: 1px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
     border-radius: inherit;
     mask:
       linear-gradient(#fff 0 0) content-box,
@@ -129,10 +153,10 @@ html {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--color-primary);
+  background: #424245;
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-primary);
+  background: #535358;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 8a8fb3c..218e08f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,11 +4,24 @@ export default {
   theme: {
     extend: {
       colors: {
-        background: '#0a0a0f',
-        text: '#f0f6ff',
-        primary: '#64ffda',
-        secondary: '#8892b0',
-        accent: '#1a1a2e',
+        background: '#000000',
+        'background-elevated': '#1d1d1f',
+        text: '#f5f5f7',
+        'text-secondary': '#86868b',
+        primary: '#0071e3',
+        'primary-hover': '#0077ed',
+        secondary: '#86868b',
+        accent: '#1d1d1f',
+        'gray-50': '#fafafa',
+        'gray-100': '#f5f5f5',
+        'gray-200': '#e5e5e5',
+        'gray-300': '#d4d4d4',
+        'gray-400': '#a3a3a3',
+        'gray-500': '#737373',
+        'gray-600': '#525252',
+        'gray-700': '#424242',
+        'gray-800': '#262626',
+        'gray-900': '#171717',
       },
       fontFamily: {
         sans: ['Inter', 'system-ui', 'sans-serif'],
@@ -36,8 +49,8 @@ export default {
           '50%': { transform: 'translateY(-10px)' },
         },
         glow: {
-          '0%': { boxShadow: '0 0 20px rgba(100, 255, 218, 0.5)' },
-          '100%': { boxShadow: '0 0 40px rgba(100, 255, 218, 0.8)' },
+          '0%': { boxShadow: '0 0 20px rgba(0, 113, 227, 0.3)' },
+          '100%': { boxShadow: '0 0 40px rgba(0, 113, 227, 0.5)' },
         },
         shimmer: {
           '0%': { transform: 'translateX(-100%)' },
@@ -45,9 +58,9 @@ export default {
         },
       },
       boxShadow: {
-        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
-        'glow': '0 0 40px rgba(100, 255, 218, 0.3)',
-        'glow-lg': '0 0 60px rgba(100, 255, 218, 0.4)',
+        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.5)',
+        'glow': '0 0 40px rgba(0, 113, 227, 0.2)',
+        'glow-lg': '0 0 60px rgba(0, 113, 227, 0.3)',
       },
       backdropBlur: {
         '3xl': '64px',