diff --git a/src/pages/interview-prep/BehavioralTab.tsx b/src/pages/interview-prep/BehavioralTab.tsx
index df1d3c72..06f41783 100644
--- a/src/pages/interview-prep/BehavioralTab.tsx
+++ b/src/pages/interview-prep/BehavioralTab.tsx
@@ -34,7 +34,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
         <h2 className="mb-4 text-4xl font-bold text-gray-900 dark:text-white">
           Behavioral Interview Preparation
         </h2>
-        <p className="ml-3 text-center text-xl text-gray-600 dark:text-gray-300">
+        <p className="ml-3 text-center text-xl text-gray-700 dark:text-gray-200">
           Master the art of storytelling and showcase your soft skills with
           confidence
         </p>
@@ -52,13 +52,13 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
           </h3>
           <div className="grid gap-12 md:grid-cols-2">
             <div>
-              <p className="mb-4 text-gray-700 dark:text-gray-300">
+              <p className="mb-4 text-gray-800 dark:text-gray-200">
                 Behavioral interviews focus on how you've handled situations in
                 the past to predict your future performance. These questions
                 typically start with phrases like "Tell me about a time when..."
                 or "Describe a situation where..."
               </p>
-              <p className="text-gray-700 dark:text-gray-300">
+              <p className="text-gray-800 dark:text-gray-200">
                 Unlike technical interviews that test your coding skills,
                 behavioral interviews evaluate your soft skills, cultural fit,
                 and ability to work in a team environment.
@@ -71,25 +71,25 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
               <ul className="space-y-2 text-sm">
                 <li className="flex items-start">
                   <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
-                  <span className="text-gray-600 dark:text-gray-300">
+                  <span className="text-gray-700 dark:text-gray-200">
                     70% of hiring decisions are based on cultural fit
                   </span>
                 </li>
                 <li className="flex items-start">
                   <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
-                  <span className="text-gray-600 dark:text-gray-300">
+                  <span className="text-gray-700 dark:text-gray-200">
                     Assess leadership and communication skills
                   </span>
                 </li>
                 <li className="flex items-start">
                   <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
-                  <span className="text-gray-600 dark:text-gray-300">
+                  <span className="text-gray-700 dark:text-gray-200">
                     Evaluate problem-solving approach
                   </span>
                 </li>
                 <li className="flex items-start">
                   <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
-                  <span className="text-gray-600 dark:text-gray-300">
+                  <span className="text-gray-700 dark:text-gray-200">
                     Determine team collaboration ability
                   </span>
                 </li>
@@ -143,7 +143,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
               <h4 className="mb-2 font-bold text-gray-900 dark:text-white">
                 {item.word}
               </h4>
-              <p className="text-sm text-gray-600 dark:text-gray-300">
+              <p className="text-sm text-gray-700 dark:text-gray-200">
                 {item.desc}
               </p>
             </div>
@@ -162,7 +162,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
                 <strong className="text-red-600 dark:text-red-400">
                   Situation:
                 </strong>
-                <p className="mt-1 text-gray-600 dark:text-gray-300">
+                <p className="mt-1 text-gray-700 dark:text-gray-200">
                   "During my internship, our team was behind schedule on a
                   critical project with only 2 weeks left before the deadline."
                 </p>
@@ -171,7 +171,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
                 <strong className="text-yellow-600 dark:text-yellow-400">
                   Task:
                 </strong>
-                <p className="mt-1 text-gray-600 dark:text-gray-300">
+                <p className="mt-1 text-gray-700 dark:text-gray-200">
                   "As the junior developer, I needed to help coordinate efforts
                   and find ways to accelerate our progress."
                 </p>
@@ -180,7 +180,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
                 <strong className="text-green-600 dark:text-green-400">
                   Action:
                 </strong>
-                <p className="mt-1 text-gray-600 dark:text-gray-300">
+                <p className="mt-1 text-gray-700 dark:text-gray-200">
                   "I organized daily stand-ups, created a shared task board, and
                   volunteered to work extra hours on critical features."
                 </p>
@@ -189,7 +189,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
                 <strong className="text-blue-600 dark:text-blue-400">
                   Result:
                 </strong>
-                <p className="mt-1 text-gray-600 dark:text-gray-300">
+                <p className="mt-1 text-gray-700 dark:text-gray-200">
                   "We delivered the project on time, and my manager praised my
                   initiative. I learned the importance of proactive
                   communication."
@@ -208,7 +208,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
                 <strong className="text-red-600 dark:text-red-400">
                   Situation:
                 </strong>
-                <p className="mt-1 text-gray-600 dark:text-gray-300">
+                <p className="mt-1 text-gray-700 dark:text-gray-200">
                   "Our main application was experiencing frequent crashes
                   affecting 30% of users during peak hours."
                 </p>
@@ -217,7 +217,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
                 <strong className="text-yellow-600 dark:text-yellow-400">
                   Task:
                 </strong>
-                <p className="mt-1 text-gray-600 dark:text-gray-300">
+                <p className="mt-1 text-gray-700 dark:text-gray-200">
                   "I was assigned to identify the root cause and implement a
                   solution within 48 hours."
                 </p>
@@ -226,7 +226,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
                 <strong className="text-green-600 dark:text-green-400">
                   Action:
                 </strong>
-                <p className="mt-1 text-gray-600 dark:text-gray-300">
+                <p className="mt-1 text-gray-700 dark:text-gray-200">
                   "I analyzed logs, reproduced the issue, and discovered a
                   memory leak in our caching system. I implemented a fix and
                   added monitoring."
@@ -236,7 +236,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({
                 <strong className="text-blue-600 dark:text-blue-400">
                   Result:
                 </strong>
-                <p className="mt-1 text-gray-600 dark:text-gray-300">
+                <p className="mt-1 text-gray-700 dark:text-gray-200">
                   "Crashes reduced by 95%, user satisfaction improved, and we
                   prevented similar issues with better monitoring."
                 </p>
diff --git a/src/pages/interview-prep/CompaniesTab.tsx b/src/pages/interview-prep/CompaniesTab.tsx
index 60ed7416..49274a07 100644
--- a/src/pages/interview-prep/CompaniesTab.tsx
+++ b/src/pages/interview-prep/CompaniesTab.tsx
@@ -124,7 +124,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
         <h2 className="mb-6 text-5xl font-bold text-gray-900 dark:text-white">
           Company-Specific Interview Prep
         </h2>
-        <p className="text-xl leading-relaxed text-gray-600 dark:text-gray-300">
+        <p className="text-xl leading-relaxed text-gray-700 dark:text-gray-200">
           Get insider knowledge, real interview questions, and proven strategies
           for landing your dream job at top tech companies
         </p>
@@ -151,7 +151,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
               <span className="mr-4 text-4xl">🏢</span>
               FAANG+ Companies Overview
             </h3>
-            <p className="text-lg text-gray-600 dark:text-gray-300">
+            <p className="text-lg text-gray-700 dark:text-gray-200">
               Navigate the unique interview processes of the world's most
               competitive tech companies
             </p>
@@ -224,10 +224,10 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
                   <h4 className="mb-3 text-lg font-bold text-gray-900 dark:text-white">
                     {item.title}
                   </h4>
-                  <p className="mb-3 text-sm leading-relaxed text-gray-600 dark:text-gray-300">
+                  <p className="mb-3 text-sm leading-relaxed text-gray-700 dark:text-gray-200">
                     {item.description}
                   </p>
-                  <div className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-700 dark:bg-gray-700 dark:text-gray-300">
+                  <div className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                     {item.stats}
                   </div>
                 </motion.div>
@@ -486,7 +486,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
                                   {i + 1}
                                 </span>
                               </div>
-                              <span className="leading-relaxed text-gray-700 dark:text-gray-300">
+                              <span className="leading-relaxed text-gray-800 dark:text-gray-200">
                                 {tip}
                               </span>
                             </motion.li>
@@ -558,7 +558,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
                                     animate={{ opacity: 1, y: 0 }}
                                     transition={{ duration: 0.3 }}
                                   >
-                                    <p className="text-sm leading-relaxed text-gray-700 dark:text-gray-300">
+                                    <p className="text-sm leading-relaxed text-gray-800 dark:text-gray-200">
                                       {item.answer}
                                     </p>
                                   </motion.div>
@@ -590,7 +590,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
                               Community Contributors Needed!
                             </h5>
                           </div>
-                          <p className="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
+                          <p className="mb-6 leading-relaxed text-gray-800 dark:text-gray-200">
                             Help keep {company.company}'s interview information
                             current! Share recent questions, tips, or insights
                             you've encountered to help fellow candidates
@@ -672,7 +672,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
               <span className="mr-4 text-5xl">🤝</span>
               Join Our Interview Prep Community
             </h3>
-            <p className="text-xl text-gray-600 dark:text-gray-300">
+            <p className="text-xl text-gray-700 dark:text-gray-200">
               Help build the most comprehensive company interview resource and
               accelerate your career growth
             </p>
@@ -744,10 +744,10 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
                 <h4 className="mb-3 text-lg font-bold text-gray-900 dark:text-white">
                   {item.title}
                 </h4>
-                <p className="mb-4 text-sm leading-relaxed text-gray-600 dark:text-gray-300">
+                <p className="mb-4 text-sm leading-relaxed text-gray-700 dark:text-gray-200">
                   {item.description}
                 </p>
-                <div className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-700 dark:bg-gray-700 dark:text-gray-300">
+                <div className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                   {item.benefit}
                 </div>
               </motion.div>
diff --git a/src/pages/interview-prep/OverviewTab.tsx b/src/pages/interview-prep/OverviewTab.tsx
index b9b79f97..d86f4728 100644
--- a/src/pages/interview-prep/OverviewTab.tsx
+++ b/src/pages/interview-prep/OverviewTab.tsx
@@ -152,28 +152,28 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
               <ul className="space-y-3">
                 <li className="flex items-start">
                   <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-blue-500"></span>
-                  <span>
+                  <span className="text-gray-800 dark:text-gray-200">
                     <strong>Technical Mastery:</strong> 500+ coding problems,
                     algorithms, data structures, and system design challenges
                   </span>
                 </li>
                 <li className="flex items-start">
                   <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-green-500"></span>
-                  <span className="text-gray-700 dark:text-gray-300">
+                  <span className="text-gray-800 dark:text-gray-200">
                     <strong>Behavioral Excellence:</strong> STAR method
                     framework, leadership scenarios, and communication skills
                   </span>
                 </li>
                 <li className="flex items-start">
                   <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-purple-500"></span>
-                  <span className="text-gray-700 dark:text-gray-300">
+                  <span className="text-gray-800 dark:text-gray-200">
                     <strong>Company Intelligence:</strong> FAANG-specific
                     strategies, culture insights, and insider tips
                   </span>
                 </li>
                 <li className="flex items-start">
                   <span className="mt-2 mr-3 h-2 w-2 flex-shrink-0 rounded-full bg-orange-500"></span>
-                  <span className="text-gray-700 dark:text-gray-300">
+                  <span className="text-gray-800 dark:text-gray-200">
                     <strong>Mock Practice:</strong> Real-time simulations with
                     feedback and performance tracking
                   </span>
@@ -193,7 +193,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
                   <h4 className="mb-2 font-semibold text-gray-900 dark:text-white">
                     Technical Skills (60% Weight)
                   </h4>
-                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                  <p className="text-sm text-gray-700 dark:text-gray-200">
                     Prove you can solve complex problems, write clean code, and
                     design scalable systems. Technical competence is your entry
                     ticket.
@@ -203,7 +203,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
                   <h4 className="mb-2 font-semibold text-gray-900 dark:text-white">
                     Behavioral Skills (40% Weight)
                   </h4>
-                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                  <p className="text-sm text-gray-700 dark:text-gray-200">
                     Demonstrate leadership, collaboration, and cultural fit.
                     Many technically strong candidates fail here due to poor
                     communication or team dynamics.
@@ -211,7 +211,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
                 </div>
               </div>
               <div className="rounded-lg border border-yellow-200 bg-gradient-to-r from-yellow-100 to-orange-100 p-4 dark:border-yellow-700 dark:from-yellow-900/30 dark:to-orange-900/30">
-                <p className="text-sm text-gray-700 dark:text-gray-300">
+                <p className="text-sm text-gray-800 dark:text-gray-100">
                   <strong>💡 Key Insight:</strong> Top companies hire for both
                   technical excellence AND cultural alignment. Neglecting either
                   aspect significantly reduces your success rate.
@@ -374,7 +374,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
                           </div>
                         </div>
 
-                        <p className="mb-6 leading-relaxed text-gray-600 dark:text-gray-300">
+                        <p className="mb-6 leading-relaxed text-gray-700 dark:text-gray-200">
                           {stage.description}
                         </p>
 
@@ -426,7 +426,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
                                   {stage.tips?.map((tip, tipIndex) => (
                                     <motion.li
                                       key={tipIndex}
-                                      className="flex items-start gap-3 text-gray-600 dark:text-gray-300"
+                                      className="flex items-start gap-3 text-gray-700 dark:text-gray-200"
                                       initial={{ opacity: 0, x: -20 }}
                                       animate={{ opacity: 1, x: 0 }}
                                       transition={{
@@ -435,7 +435,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
                                       }}
                                     >
                                       <span className="mt-2 h-2 w-2 flex-shrink-0 rounded-full bg-green-500"></span>
-                                      <span className="leading-relaxed text-gray-700 dark:text-gray-300">
+                                      <span className="leading-relaxed text-gray-800 dark:text-gray-100">
                                         {tip}
                                       </span>
                                     </motion.li>
@@ -499,7 +499,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
                                           delay: qIndex * 0.1,
                                         }}
                                       >
-                                        <p className="text-gray-700 italic dark:text-gray-300">
+                                        <p className="text-gray-800 italic dark:text-gray-100">
                                           "{question}"
                                         </p>
                                       </motion.div>
@@ -535,7 +535,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
               <h4 className="mb-3 text-xl font-bold text-gray-900 dark:text-white">
                 Problem-Solving Mastery
               </h4>
-              <p className="text-sm text-gray-600 dark:text-gray-300">
+              <p className="text-sm text-gray-700 dark:text-gray-200">
                 Build strong algorithmic thinking through consistent practice.
                 Focus on understanding patterns rather than memorizing
                 solutions.
@@ -548,7 +548,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
               <h4 className="mb-3 text-xl font-bold text-gray-900 dark:text-white">
                 Communication Excellence
               </h4>
-              <p className="text-sm text-gray-600 dark:text-gray-300">
+              <p className="text-sm text-gray-700 dark:text-gray-200">
                 Practice explaining complex concepts clearly. Develop your
                 ability to think out loud and collaborate effectively.
               </p>
@@ -560,7 +560,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
               <h4 className="mb-3 text-xl font-bold text-gray-900 dark:text-white">
                 Behavioral Readiness
               </h4>
-              <p className="text-sm text-gray-600 dark:text-gray-300">
+              <p className="text-sm text-gray-700 dark:text-gray-200">
                 Prepare compelling stories using the STAR method. Showcase
                 leadership, growth mindset, and cultural alignment.
               </p>
@@ -635,7 +635,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
                   <h4 className="text-xl font-bold">{section.title}</h4>
                 </div>
                 <div className="flex flex-grow flex-col p-6">
-                  <p className="mb-4 text-sm text-gray-600 dark:text-gray-300">
+                  <p className="mb-4 text-sm text-gray-700 dark:text-gray-200">
                     {section.description}
                   </p>
                   <div className="mb-4 space-y-2">
diff --git a/src/pages/interview-prep/PracticeTab.tsx b/src/pages/interview-prep/PracticeTab.tsx
index 197314e3..e3514e11 100644
--- a/src/pages/interview-prep/PracticeTab.tsx
+++ b/src/pages/interview-prep/PracticeTab.tsx
@@ -275,7 +275,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
             >
               Mock Interview Practice
             </motion.h2>
-            <p className="text-xl leading-relaxed text-gray-700 dark:text-gray-300">
+            <p className="text-xl leading-relaxed text-gray-800 dark:text-gray-200">
               Simulate real interview scenarios with our interactive practice
               sessions. Track your progress, time your responses, and get
               instant feedback to improve your interview performance.
@@ -300,7 +300,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
                 <h3 className="mb-3 text-xl font-bold text-gray-900 dark:text-white">
                   Technical Deep Dive
                 </h3>
-                <p className="mb-4 leading-relaxed text-gray-600 dark:text-gray-300">
+                <p className="mb-4 leading-relaxed text-gray-700 dark:text-gray-200">
                   Explore comprehensive technical resources, coding patterns,
                   and algorithm practice.
                 </p>
@@ -337,7 +337,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
                 <h3 className="mb-3 text-xl font-bold text-gray-900 dark:text-white">
                   Behavioral Mastery
                 </h3>
-                <p className="mb-4 leading-relaxed text-gray-600 dark:text-gray-300">
+                <p className="mb-4 leading-relaxed text-gray-700 dark:text-gray-200">
                   Master the STAR method and practice storytelling for
                   behavioral interviews.
                 </p>
@@ -375,7 +375,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
                 <h3 className="mb-3 text-xl font-bold text-gray-900 dark:text-white">
                   Company Research
                 </h3>
-                <p className="mb-4 leading-relaxed text-gray-600 dark:text-gray-300">
+                <p className="mb-4 leading-relaxed text-gray-700 dark:text-gray-200">
                   Research specific companies, their interview processes, and
                   preparation strategies.
                 </p>
@@ -497,7 +497,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
       >
         <div className="flex flex-wrap items-center gap-8">
           <div className="flex items-center space-x-4">
-            <label className="text-sm font-bold text-gray-700 dark:text-gray-300">
+            <label className="text-sm font-bold text-gray-800 dark:text-gray-200">
               Filter by Type:
             </label>
             <motion.select
@@ -513,7 +513,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
             </motion.select>
           </div>
           <div className="flex items-center space-x-4">
-            <label className="text-sm font-bold text-gray-700 dark:text-gray-300">
+            <label className="text-sm font-bold text-gray-800 dark:text-gray-200">
               Filter by Difficulty:
             </label>
             <motion.select
@@ -529,7 +529,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
             </motion.select>
           </div>
           <motion.div
-            className="rounded-xl border border-gray-200 bg-gradient-to-r from-gray-100 to-slate-100 px-6 py-3 text-sm font-bold text-gray-600 shadow-lg dark:border-gray-600 dark:from-gray-700 dark:to-slate-700 dark:text-gray-400"
+            className="rounded-xl border border-gray-200 bg-gradient-to-r from-gray-100 to-slate-100 px-6 py-3 text-sm font-bold text-gray-800 shadow-lg dark:border-gray-600 dark:from-gray-700 dark:to-slate-700 dark:text-gray-200"
             whileHover={{ scale: 1.05 }}
           >
             <span className="font-black text-blue-600 dark:text-blue-400">
@@ -664,7 +664,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
                 {question.category && (
                   <div className="mb-6 flex items-center space-x-3">
                     <span className="text-lg text-gray-400">📂</span>
-                    <span className="rounded-full bg-gray-100 px-3 py-1 text-sm font-bold text-gray-600 dark:bg-gray-700 dark:text-gray-400">
+                    <span className="rounded-full bg-gray-100 px-3 py-1 text-sm font-bold text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                       {question.category}
                     </span>
                   </div>
@@ -674,7 +674,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
               <div className="flex-1 px-8 pb-4">
                 <motion.button
                   onClick={() => toggleHints(question.id)}
-                  className="group flex w-full items-center justify-between space-x-3 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-600 shadow-lg transition-colors hover:bg-gray-100 hover:text-gray-800 dark:border-gray-600 dark:bg-gray-700/50 dark:text-gray-400 dark:hover:bg-gray-600/50 dark:hover:text-gray-200"
+                  className="group flex w-full items-center justify-between space-x-3 rounded-xl border border-gray-300 bg-white px-4 py-3 text-sm shadow-lg transition-all hover:bg-gray-50 hover:shadow-xl dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700"
                   whileHover={{ scale: 1.02 }}
                   whileTap={{ scale: 0.98 }}
                 >
@@ -691,7 +691,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
                     </span>
                   </div>
                   <motion.span
-                    className="rounded-full border border-blue-200 bg-gradient-to-r from-blue-100 to-purple-100 px-3 py-1 text-xs font-bold text-blue-700 dark:border-blue-700 dark:from-blue-900/40 dark:to-purple-900/40 dark:text-blue-300"
+                    className="rounded-full border border-blue-300 bg-gradient-to-r from-blue-200 to-purple-200 px-3 py-1 text-xs font-bold text-blue-800 dark:border-blue-600 dark:from-blue-800/60 dark:to-purple-800/60 dark:text-blue-200"
                     whileHover={{ scale: 1.1 }}
                   >
                     {question.hints.length}
@@ -725,7 +725,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
                         {question.hints.map((hint, i) => (
                           <motion.li
                             key={i}
-                            className="flex items-start space-x-4 text-sm text-gray-700 dark:text-gray-300"
+                            className="flex items-start space-x-4 text-sm text-gray-800 dark:text-gray-200"
                             initial={{ opacity: 0, x: -20 }}
                             animate={{ opacity: 1, x: 0 }}
                             transition={{ delay: i * 0.1 }}
@@ -737,7 +737,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
                             >
                               {i + 1}
                             </motion.span>
-                            <span className="leading-relaxed font-medium text-gray-700 dark:text-gray-300">
+                            <span className="leading-relaxed font-medium text-gray-800 dark:text-gray-200">
                               {hint}
                             </span>
                           </motion.li>
@@ -751,7 +751,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
                   <div className="mt-6">
                     <motion.button
                       onClick={() => toggleResources(question.id)}
-                      className="group flex w-full items-center justify-between space-x-3 rounded-xl border-2 border-indigo-200/50 bg-gradient-to-r from-indigo-50 via-purple-50 to-pink-50 px-4 py-3 text-sm text-gray-600 shadow-lg transition-colors hover:from-indigo-100 hover:via-purple-100 hover:to-pink-100 hover:text-gray-800 dark:border-indigo-700/50 dark:from-indigo-900/30 dark:via-purple-900/30 dark:to-pink-900/30 dark:text-gray-400 dark:hover:from-indigo-800/40 dark:hover:via-purple-800/40 dark:hover:to-pink-800/40 dark:hover:text-gray-200"
+                      className="group flex w-full items-center justify-between space-x-3 rounded-xl border-2 border-indigo-300 bg-gradient-to-r from-indigo-100 via-purple-100 to-pink-100 px-4 py-3 text-sm shadow-lg transition-all hover:from-indigo-200 hover:via-purple-200 hover:to-pink-200 hover:shadow-xl dark:border-indigo-600 dark:from-indigo-900/50 dark:via-purple-900/50 dark:to-pink-900/50 dark:hover:from-indigo-800/60 dark:hover:via-purple-800/60 dark:hover:to-pink-800/60"
                       whileHover={{ scale: 1.02 }}
                       whileTap={{ scale: 0.98 }}
                     >
@@ -772,7 +772,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
                         </span>
                       </div>
                       <motion.span
-                        className="rounded-full border border-indigo-200 bg-gradient-to-r from-indigo-100 to-purple-100 px-3 py-1 text-xs font-bold text-indigo-700 dark:border-indigo-700 dark:from-indigo-900/40 dark:to-purple-900/40 dark:text-indigo-300"
+                        className="rounded-full border border-indigo-300 bg-gradient-to-r from-indigo-200 to-purple-200 px-3 py-1 text-xs font-bold text-indigo-800 dark:border-indigo-600 dark:from-indigo-800/60 dark:to-purple-800/60 dark:text-indigo-200"
                         whileHover={{ scale: 1.1 }}
                       >
                         {question.links.length}
@@ -834,7 +834,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
                                   case "tool":
                                     return "from-orange-100 to-red-100 dark:from-orange-900/40 dark:to-red-900/40 text-orange-700 dark:text-orange-300 border-orange-200 dark:border-orange-700";
                                   default:
-                                    return "from-gray-100 to-slate-100 dark:from-gray-700 dark:to-slate-700 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-600";
+                                    return "from-gray-100 to-slate-100 dark:from-gray-700 dark:to-slate-700 text-gray-800 dark:text-gray-200 border-gray-200 dark:border-gray-600";
                                 }
                               };
 
@@ -950,7 +950,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
                       disabled={!!activeSession}
                       className={`flex w-full items-center justify-center space-x-3 rounded-xl border-2 py-4 font-black shadow-2xl transition-all ${
                         completedQuestions.has(question.id)
-                          ? "cursor-default border-gray-300 bg-gradient-to-r from-gray-200 to-slate-200 text-gray-600 dark:border-gray-500 dark:from-gray-600 dark:to-slate-600 dark:text-gray-300"
+                          ? "cursor-default border-gray-300 bg-gradient-to-r from-gray-200 to-slate-200 text-gray-800 dark:border-gray-500 dark:from-gray-600 dark:to-slate-600 dark:text-gray-200"
                           : activeSession
                             ? "cursor-not-allowed border-gray-400 bg-gradient-to-r from-gray-300 to-slate-300 text-gray-500 dark:border-gray-600 dark:from-gray-700 dark:to-slate-700 dark:text-gray-400"
                             : "border-blue-500/20 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 text-white hover:from-blue-700 hover:via-indigo-700 hover:to-purple-700 hover:shadow-blue-500/25"
@@ -1067,7 +1067,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
               <h4 className="mb-3 text-lg font-black text-gray-900 dark:text-white">
                 {feature.title}
               </h4>
-              <p className="text-sm leading-relaxed font-medium text-gray-600 dark:text-gray-300">
+              <p className="text-sm leading-relaxed font-medium text-gray-700 dark:text-gray-200">
                 {feature.desc}
               </p>
             </motion.div>
diff --git a/src/pages/interview-prep/TechnicalTab.tsx b/src/pages/interview-prep/TechnicalTab.tsx
index c095732d..60f92514 100644
--- a/src/pages/interview-prep/TechnicalTab.tsx
+++ b/src/pages/interview-prep/TechnicalTab.tsx
@@ -63,7 +63,7 @@ const TechnicalTab: React.FC<TechnicalTabProps> = ({
             <h2 className="mb-6 text-4xl font-bold text-gray-900 dark:text-white">
               Master Technical Interviews
             </h2>
-            <p className="text-lg text-gray-600 dark:text-gray-300">
+            <p className="text-lg text-gray-700 dark:text-gray-200">
               Technical interviews are the cornerstone of software engineering
               hiring. They evaluate your problem-solving abilities, coding
               skills, and understanding of computer science fundamentals.
@@ -79,7 +79,7 @@ const TechnicalTab: React.FC<TechnicalTabProps> = ({
               <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
                 Problem Solving
               </h3>
-              <p className="text-sm text-gray-600 dark:text-gray-300">
+              <p className="text-sm text-gray-700 dark:text-gray-200">
                 Develop systematic approaches to break down complex problems
                 into manageable components.
               </p>
@@ -91,7 +91,7 @@ const TechnicalTab: React.FC<TechnicalTabProps> = ({
               <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
                 Pattern Recognition
               </h3>
-              <p className="text-sm text-gray-600 dark:text-gray-300">
+              <p className="text-sm text-gray-700 dark:text-gray-200">
                 Learn to identify common patterns and apply proven techniques to
                 solve similar problems efficiently.
               </p>
@@ -103,7 +103,7 @@ const TechnicalTab: React.FC<TechnicalTabProps> = ({
               <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
                 Communication
               </h3>
-              <p className="text-sm text-gray-600 dark:text-gray-300">
+              <p className="text-sm text-gray-700 dark:text-gray-200">
                 Master the art of explaining your approach, discussing
                 trade-offs, and collaborating with interviewers.
               </p>
@@ -116,7 +116,7 @@ const TechnicalTab: React.FC<TechnicalTabProps> = ({
                 <h4 className="mb-2 font-semibold text-gray-900 dark:text-white">
                   Success Strategy
                 </h4>
-                <p className="text-sm text-gray-700 dark:text-gray-300">
+                <p className="text-sm text-gray-800 dark:text-gray-100">
                   Focus on understanding patterns rather than memorizing
                   solutions. Practice explaining your thought process out loud,
                   and always consider time/space complexity. Consistent daily
@@ -320,7 +320,7 @@ const TechnicalTab: React.FC<TechnicalTabProps> = ({
                 <h4 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
                   {platform.name}
                 </h4>
-                <p className="mb-3 text-sm text-gray-600 dark:text-gray-300">
+                <p className="mb-3 text-sm text-gray-700 dark:text-gray-200">
                   {platform.description}
                 </p>
                 <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
@@ -401,7 +401,7 @@ const TechnicalTab: React.FC<TechnicalTabProps> = ({
                 <h4 className="font-semibold text-gray-900 dark:text-white">
                   Start with Easy Problems
                 </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-300">
+                <p className="text-sm text-gray-700 dark:text-gray-200">
                   Build confidence and understand patterns before tackling
                   harder challenges.
                 </p>
@@ -415,7 +415,7 @@ const TechnicalTab: React.FC<TechnicalTabProps> = ({
                 <h4 className="font-semibold text-gray-900 dark:text-white">
                   Practice Consistently
                 </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-300">
+                <p className="text-sm text-gray-700 dark:text-gray-200">
                   Solve 1-2 problems daily rather than cramming before
                   interviews.
                 </p>
@@ -429,7 +429,7 @@ const TechnicalTab: React.FC<TechnicalTabProps> = ({
                 <h4 className="font-semibold text-gray-900 dark:text-white">
                   Focus on Patterns
                 </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-300">
+                <p className="text-sm text-gray-700 dark:text-gray-200">
                   Learn common problem-solving patterns like two pointers,
                   sliding window, etc.
                 </p>
@@ -445,7 +445,7 @@ const TechnicalTab: React.FC<TechnicalTabProps> = ({
                 <h4 className="font-semibold text-gray-900 dark:text-white">
                   Time Yourself
                 </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-300">
+                <p className="text-sm text-gray-700 dark:text-gray-200">
                   Practice under time constraints to simulate real interview
                   conditions.
                 </p>
@@ -459,7 +459,7 @@ const TechnicalTab: React.FC<TechnicalTabProps> = ({
                 <h4 className="font-semibold text-gray-900 dark:text-white">
                   Explain Your Thinking
                 </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-300">
+                <p className="text-sm text-gray-700 dark:text-gray-200">
                   Practice verbalizing your approach and reasoning process.
                 </p>
               </div>
@@ -472,7 +472,7 @@ const TechnicalTab: React.FC<TechnicalTabProps> = ({
                 <h4 className="font-semibold text-gray-900 dark:text-white">
                   Review Solutions
                 </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-300">
+                <p className="text-sm text-gray-700 dark:text-gray-200">
                   Study optimal solutions and alternative approaches after
                   solving problems.
                 </p>