created styles/theme.js and moved the theme configs as required.

modified the tailwind config to utilile the theme and finaly replaced the hardcoded colors

frontend/app/contributors/daily/page.jsx

@@ -34,7 +34,7 @@ const page = () => {
             {contributorsList.slice(0, 4).map((contributor, index) => (
               <tr
                 key={contributor.id}
-                className="border-b last:border-b-0 hover:bg-[#70E3C7] "
+                className="border-b last:border-b-0 hover:bg-primary-light "
               >
                 {/* Badge Column */}
                 <td className="px-4 py-2 w-[130px] text-center">
@@ -120,7 +120,7 @@ const page = () => {
             {contributors.map((contributor, index) => (
               <tr
                 key={contributor.id}
-                className="border-b last:border-b-0 hover:bg-[#70E3C7]"
+                className="border-b last:border-b-0 hover:bg-primary-light"
               >
                 {/* Badge Column */}
                 <td className="px-1 py-2  text-center">

frontend/app/contributors/layout.js

@@ -4,7 +4,7 @@ import Head from "@/components/contributors/Head";
 export default function DashboardLayout({ children }) {
   return (
     <div className="flex overflow-y-auto">
-      <div className="hidden md:block md:w-[384px] bg-[#490878]">
+      <div className="hidden md:block md:w-[384px] bg-primary-main">
         <Sidebar />
       </div>
 

frontend/app/contributors/monthly/page.jsx

@@ -35,7 +35,7 @@ const page = () => {
             {contributorsList.slice(0, 4).map((contributor, index) => (
               <tr
                 key={contributor.id}
-                className="border-b last:border-b-0 hover:bg-[#70E3C7] "
+                className="border-b last:border-b-0 hover:bg-primary-light "
               >
                 {/* Badge Column */}
                 <td className="px-4 py-2 w-[130px] text-center">
@@ -123,7 +123,7 @@ const page = () => {
       {contributors.map((contributor, index) => (
         <tr
           key={contributor.id}
-          className="border-b last:border-b-0 hover:bg-[#70E3C7]"
+          className="border-b last:border-b-0 hover:bg-primary-light"
         >
           {/* Badge Column */}
           <td className="px-1 py-2  text-center">

frontend/app/contributors/total/page.js

@@ -45,7 +45,7 @@ const Total = () => {
             {contributors.map((contributor, index) => (
               <tr
                 key={contributor.id}
-                className="border-b last:border-b-0 hover:bg-[#70E3C7] "
+                className="border-b last:border-b-0 hover:bg-primary-light "
               >
                 {/* Badge Column */}
                 <td className="px-4 py-2 w-[150px] text-center">
@@ -119,7 +119,7 @@ const Total = () => {
             {contributors.map((contributor, index) => (
               <tr
                 key={contributor.id}
-                className="border-b last:border-b-0 hover:bg-[#70E3C7]"
+                className="border-b last:border-b-0 hover:bg-primary-light"
               >
                 {/* Badge Column */}
                 <td className="px-1 py-2  text-center">

frontend/app/contributors/weekly/page.jsx

@@ -34,7 +34,7 @@ const page = () => {
             {contributorsList.slice(0, 4).map((contributor, index) => (
               <tr
                 key={contributor.id}
-                className="border-b last:border-b-0 hover:bg-[#70E3C7] "
+                className="border-b last:border-b-0 hover:bg-primary-light "
               >
                 {/* Badge Column */}
                 <td className="px-4 py-2 w-[130px] text-center">
@@ -120,7 +120,7 @@ const page = () => {
             {contributors.map((contributor, index) => (
               <tr
                 key={contributor.id}
-                className="border-b last:border-b-0 hover:bg-[#70E3C7]"
+                className="border-b last:border-b-0 hover:bg-primary-light"
               >
                 {/* Badge Column */}
                 <td className="px-1 py-2  text-center">

frontend/components/AddressBar.jsx

@@ -10,7 +10,7 @@ const AddressBar = () => {
 
   return (
     <button
-      className="flex  w-[203px] items-center justify-center gap-x-3 rounded-[4px] bg-[#70E3C7] py-[12px] text-center text-base font-medium text-[#490878] disabled:cursor-not-allowed"
+      className="flex  w-[203px] items-center justify-center gap-x-3 rounded-[4px] bg-primary-light py-[12px] text-center text-base font-medium text-primary-main disabled:cursor-not-allowed"
       onMouseEnter={() => setDisplayAddress(false)}
       onMouseLeave={() => setDisplayAddress(true)}
       onClick={disconnect}

frontend/components/Footer.jsx

@@ -10,13 +10,13 @@ const Footer = () => {
   const getCurrentYear = () => new Date().getFullYear();
 
   return (
-    <footer className="bg-[#490878] text-white px-10 py-10">
+    <footer className="bg-primary-main text-white px-10 py-10">
       <div className="max-w-7xl mx-auto space-y-8">
         <div className="flex flex-col gap-10 md:flex-row justify-between">
           {/* Logo and Description Section */}
           <div className="space-y-4">
             <h2 className="text-2xl font-bold">
-              Lyric<span className="text-[#70E3C7]">Flip</span>
+              Lyric<span className="text-primary-light">Flip</span>
             </h2>
             <p className="text-gray-300 max-w-2xl">
               Test your lyrical knowledge, flip the cards, and guess the song!
@@ -73,7 +73,7 @@ const Footer = () => {
                 <Link
                   key={index}
                   href="#"
-                  className="bg-[#70E3C7] hover:bg-[#3CC8B9] transition-colors p-2 rounded-full"
+                  className="bg-primary-light hover:bg-primary-hover transition-colors p-2 rounded-full"
                 >
                   <Icon className="h-5 w-5 text-white" />
                 </Link>
@@ -82,7 +82,7 @@ const Footer = () => {
           </div>
         </div>
         {/* Copyright */}
-        <div className="text-center text-sm text-[#FFFFFF] pt-7 border-t border-[#FFFFFF]">
+        <div className="text-center text-sm text-background-default pt-7 border-t border-background-default">
           &copy; {getCurrentYear()} LyricFlip. All rights reserved
         </div>
       </div>

frontend/components/HeroSection.jsx

@@ -41,7 +41,7 @@ export default function HeroSection() {
               <div className="mt-8 flex flex-col sm:flex-row gap-4">
                 <button
                   onClick={() => setIsModalOpen(true)}
-                  className="w-full sm:w-auto px-8 py-4 text-base font-[600] text-[#490878] rounded-lg bg-[#70E3C7] hover:bg-[#5fcfb5] transition-colors duration-300 flex items-center justify-center gap-2"
+                  className="w-full sm:w-auto px-8 py-4 text-base font-[600] text-primary-main rounded-lg bg-primary-light hover:bg-[#5fcfb5] transition-colors duration-300 flex items-center justify-center gap-2"
                 >
                   <FaPlay className="text-lg" />
                   Play Now
@@ -55,7 +55,7 @@ export default function HeroSection() {
                       section.scrollIntoView({ behavior: "smooth" });
                     }
                   }}
-                  className="w-full sm:w-auto px-8 py-4 text-base font-[600] text-[#70E3C7] rounded-lg border-2 border-[#70E3C7] hover:bg-[#70E3C7] hover:text-[#490878] transition-colors duration-300 flex items-center justify-center gap-2"
+                  className="w-full sm:w-auto px-8 py-4 text-base font-[600] text-primary-light rounded-lg border-2 border-primary-light hover:bg-primary-light hover:text-primary-main transition-colors duration-300 flex items-center justify-center gap-2"
                 >
                   <IoInformationCircleOutline className="text-xl" />
                   How to Play

frontend/components/HowToPlay.jsx

@@ -36,10 +36,10 @@ const HowItWorks = () => {
       <div className="mx-auto max-w-7xl text-center border-red-500 py-[100px]">
         {/* Header Section */}
         <div className="">
-          <h2 className="pb-4 text-5xl font-semibold text-[#FFFFFF] md:text-5xl lg:text-6xl">
+          <h2 className="pb-4 text-5xl font-semibold text-background-default md:text-5xl lg:text-6xl">
             How it works
           </h2>
-          <p className="text-lg text-[#FFFFFF] md:text-xl">
+          <p className="text-lg text-background-default md:text-xl">
             Have fun testing your lyrical knowledge in three (3) easy steps 😊
           </p>
         </div>
@@ -50,11 +50,11 @@ const HowItWorks = () => {
             <div className="space-y-4 my-10" key={index}>
               <h3
                 key={index}
-                className="text-2xl font-bold text-[#FFFFFF] lg:text-3xl pb-3"
+                className="text-2xl font-bold text-background-default lg:text-3xl pb-3"
               >
                 {step.title}
               </h3>
-              <p className="mx-auto max-w-sm text-[#FFFFFF]"></p>
+              <p className="mx-auto max-w-sm text-background-default"></p>
               <p>{step.text}</p>
             </div>
           ))}
@@ -63,7 +63,7 @@ const HowItWorks = () => {
         {/* Buttons */}
         <div className=" flex flex-col items-center justify-center gap-4 md:flex-row ">
           <button
-            className="w-full rounded-full bg-[#70E3C7] px-[69px] py-6 font-semibold text-[#090909] transition md:w-auto"
+            className="w-full rounded-full bg-primary-light px-[69px] py-6 font-semibold text-[#090909] transition md:w-auto"
             onClick={() => setIsModalOpen(true)}
           >
             Play Game
@@ -75,7 +75,7 @@ const HowItWorks = () => {
           >
             <GameSetupForm onStart={handleStartGame} />
           </Modal>
-          <button className="w-full rounded-full border-2 border-[#70E3C7] px-[51px] py-6  font-semibold text-[#70E3C7] md:w-auto">
+          <button className="w-full rounded-full border-2 border-primary-light px-[51px] py-6  font-semibold text-primary-light md:w-auto">
             Connect Wallet
           </button>
         </div>

frontend/components/LeaderBoard.jsx

@@ -196,7 +196,7 @@ export default function Leaderboard() {
                       {entry.username}
                     </div>
                     <div className="md:hidden text-xs md:text-sm ">
-                      <span className="text-[#490878] font-semibold">
+                      <span className="text-primary-main font-semibold">
                         {entry.points} Points
                       </span>
                       <span className="text-gray-500 w-full">
@@ -210,7 +210,7 @@ export default function Leaderboard() {
                 <div className="hidden md:flex flex-[0.45] col-span-3 font-bold text-black">
                   {entry.challenges}
                 </div>
-                <div className="hidden md:block col-span-3 text-[#490878]">
+                <div className="hidden md:block col-span-3 text-primary-main">
                   <span className=" font-semibold">
                     {entry.points.toLocaleString()}
                   </span>

frontend/components/Navbar.jsx

@@ -127,7 +127,7 @@ const Navbar = () => {
                         handleScroll(e, item);
                         setMobileMenuOpen(false);
                       }}
-                      className="block px-3 py-2 text-base font-semibold text-white hover:bg-[#70E3C7]/20"
+                      className="block px-3 py-2 text-base font-semibold text-white hover:bg-primary-light/20"
                     >
                       {item.name}
                     </Link>

frontend/components/WalletBar.jsx

@@ -25,8 +25,8 @@ const WalletBar = () => {
         <button
           onClick={handleConnect}
           disabled={isConnecting}
-          className="px-6 py-3 bg-gradient-to-r from-[#70E3C7] to-[#5ac7ad] text-black rounded-lg 
-                   hover:from-[#5ac7ad] hover:to-[#70E3C7] transition-all duration-300 
+          className="px-6 py-3 bg-gradient-to-r from-primary-light to-[#5ac7ad] text-black rounded-lg 
+                   hover:from-[#5ac7ad] hover:to-primary-light transition-all duration-300 
                    shadow-lg hover:shadow-xl hover:scale-105 active:scale-95
                    flex items-center gap-2 group relative overflow-hidden"
         >

frontend/components/WalletModal.jsx

@@ -48,7 +48,7 @@ export function WalletModal() {
       onClick={() => setConnectModalIsOpen(false)}
     >
       <div
-        className="w-full md:w-[610px] bg-[#70E3C7] bg-opacity-80 text-[#490878] rounded-3xl py-12 px-6 relative text-center"
+        className="w-full md:w-[610px] bg-primary-light bg-opacity-80 text-primary-main rounded-3xl py-12 px-6 relative text-center"
         onClick={(e) => e.stopPropagation()}
       >
         <h3 className="text-xl font-semibold">Connect Wallet</h3>
@@ -98,7 +98,7 @@ export function WalletModal() {
           className={`w-[264px] sm:w-[264px] mt-7 block py-5 rounded-[8px] disabled:cursor-not-allowed
             ${
               selectedConnector
-                ? "bg-[#70E3C7] hover:bg-opacity-80"
+                ? "bg-primary-light hover:bg-opacity-80"
                 : "bg-slate-500"
             }
             text-[#F9F9F9] text-base font-semibold mx-auto transition-colors`}

frontend/components/about-us/FeatureCards.jsx

@@ -6,17 +6,17 @@ import { Music, Trophy, Wallet } from "lucide-react";
 const FeatureCards = () => {
   const features = [
     {
-      icon: <Music className="w-12 h-12 text-[#70E3C7]" />,
+      icon: <Music className="w-12 h-12 text-primary-light" />,
       title: "Interactive Gameplay",
       description: "Test your music knowledge with our innovative card-flipping game mechanics"
     },
     {
-      icon: <Trophy className="w-12 h-12 text-[#70E3C7]" />,
+      icon: <Trophy className="w-12 h-12 text-primary-light" />,
       title: "Compete & Win",
       description: "Challenge friends and climb the leaderboard to prove your musical expertise"
     },
     {
-      icon: <Wallet className="w-12 h-12 text-[#70E3C7]" />,
+      icon: <Wallet className="w-12 h-12 text-primary-light" />,
       title: "Earn Rewards",
       description: "Win tokens and unlock exclusive features as you play and improve"
     }
@@ -33,10 +33,10 @@ const FeatureCards = () => {
             transition={{ delay: index * 0.2 }}
             className="bg-white rounded-xl shadow-xl p-8 hover:transform hover:-translate-y-2 transition-all duration-300"
           >
-            <div className="bg-[#490878]/10 w-20 h-20 rounded-full flex items-center justify-center mb-6">
+            <div className="bg-primary-main/10 w-20 h-20 rounded-full flex items-center justify-center mb-6">
               {feature.icon}
             </div>
-            <h3 className="text-2xl font-semibold text-[#490878] mb-4">{feature.title}</h3>
+            <h3 className="text-2xl font-semibold text-primary-main mb-4">{feature.title}</h3>
             <p className="text-gray-600">{feature.description}</p>
           </motion.div>
         ))}

frontend/components/about-us/HeroSection.jsx

@@ -4,7 +4,7 @@ import { motion } from "framer-motion";
 
 const HeroSection = () => {
   return (
-    <div className="relative h-[60vh] bg-gradient-to-r from-[#490878] to-[#70E3C7]">
+    <div className="relative h-[60vh] bg-gradient-to-r from-primary-main to-primary-light">
       <div className="absolute inset-0 bg-black/50" />
       <div className="relative z-0 container mx-auto px-4 h-full flex items-center justify-center text-center"> {/* Added z-0 */}
         <motion.div

frontend/components/about-us/JoinSection.jsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 
 const JoinSection = () => {
   return (
-    <section className="py-20 bg-gradient-to-r from-[#490878] to-[#70E3C7] text-white">
+    <section className="py-20 bg-gradient-to-r from-primary-main to-primary-light text-white">
       <div className="container mx-auto px-4 text-center">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -21,13 +21,13 @@ const JoinSection = () => {
           <div className="flex gap-4 justify-center">
             <Link 
               href="/signup"
-              className="bg-white text-[#490878] px-8 py-3 rounded-full font-semibold hover:bg-opacity-90 transition-all"
+              className="bg-white text-primary-main px-8 py-3 rounded-full font-semibold hover:bg-opacity-90 transition-all"
             >
               Join Now
             </Link>
             <Link 
               href="/play"
-              className="bg-transparent border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-[#490878] transition-all"
+              className="bg-transparent border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-primary-main transition-all"
             >
               Try Demo
             </Link>

frontend/components/about-us/StatsSection.jsx

@@ -22,7 +22,7 @@ const StatsSection = () => {
               transition={{ delay: index * 0.1 }}
               className="text-center"
             >
-              <h3 className="text-4xl font-bold text-[#490878] mb-2">{stat.number}</h3>
+              <h3 className="text-4xl font-bold text-primary-main mb-2">{stat.number}</h3>
               <p className="text-gray-600">{stat.label}</p>
             </motion.div>
           ))}

frontend/components/about-us/VisionSection.jsx

@@ -21,7 +21,7 @@ const VisionSection = () => {
             transition={{ duration: 0.8 }}
             className="space-y-6"
           >
-            <h2 className="text-4xl font-bold text-[#490878]">Our Vision</h2>
+            <h2 className="text-4xl font-bold text-primary-main">Our Vision</h2>
             <p className="text-lg text-gray-700 leading-relaxed">
               We envision a world where music lovers can seamlessly blend their passion 
               for songs with interactive challenges, fostering a deeper appreciation for 
@@ -30,7 +30,7 @@ const VisionSection = () => {
             <div className="space-y-4">
               {visionPoints.map((item, index) => (
                 <div key={index} className="flex items-center gap-3">
-                  <div className="w-2 h-2 rounded-full bg-[#70E3C7]" />
+                  <div className="w-2 h-2 rounded-full bg-primary-light" />
                   <span className="text-gray-700">{item}</span>
                 </div>
               ))}

frontend/components/auth/LogIn.jsx

@@ -65,8 +65,8 @@ const LogIn = () => {
       <div className='relative flex flex-col justify-center p-8  '>
         {/* LyricFlip logo  at the top left*/}
         <div className='absolute top-4 left-4 flex items-center gap-2'>
-          <Music className='w-5 h-5 bg-[#70E3C7] rounded-md p-1' />
-          <span className='  text-[#490878] text-[10px]'>LyricFlip.</span>
+          <Music className='w-5 h-5 bg-primary-light rounded-md p-1' />
+          <span className='  text-primary-main text-[10px]'>LyricFlip.</span>
         </div>
 
         {/* Help icon at the top right  */}
@@ -99,7 +99,7 @@ const LogIn = () => {
               {/* email field  */}
               <div className='space-y-2 mb-5 flex flex-col '>
                 <Label htmlFor='email'>
-                  <p className='font-semibold text-[#A09D9D]'>Email</p>
+                  <p className='font-semibold text-gray-400'>Email</p>
                 </Label>
                 <div className=' rounded-sm bg-slate-100'>
                   <Field
@@ -120,7 +120,7 @@ const LogIn = () => {
               {/* password field  */}
               <div className='space-y-2 mb-5'>
                 <Label htmlFor='password'>
-                  <p className=' font-semibold text-[#A09D9D]'>Password</p>
+                  <p className=' font-semibold text-gray-400'>Password</p>
                 </Label>
                 <div>
                   <div className=' bg-slate-100 flex items-center justify-between'>
@@ -172,7 +172,7 @@ const LogIn = () => {
               <div className=''>
                 <Button
                   type='submit'
-                  className='w-full rounded-3xl bg-[#D9D9D9] text-[#8C8282]'
+                  className='w-full rounded-3xl bg-gray-300 text-gray-500'
                   disabled={isSubmitting}
                 >
                   {isSubmitting ? "Signing In........ " : "Sign In"}
@@ -183,7 +183,7 @@ const LogIn = () => {
         </Formik>
 
         <p className='mt-14 text-center text-sm'>
-          Don't have an account? <a className='text-[#70E3C7]'>Sign Up</a>
+          Don't have an account? <a className='text-primary-libg-primary-light'>Sign Up</a>
         </p>
       </div>
     </div>