diff --git a/src/containers/FAQ.tsx b/src/containers/FAQ.tsx
index 91c7a59..58f1842 100644
--- a/src/containers/FAQ.tsx
+++ b/src/containers/FAQ.tsx
@@ -79,7 +79,7 @@ export const FAQ = () => {
         />
         
         <motion.div 
-          className="absolute bottom-10 right-1/3 w-80 h-80 rounded-full bg-purple-500/5"
+          className="absolute bottom-10 right-1/3 w-80 h-80 rounded-full bg-secondary"
           animate={{
             scale: [1.2, 1, 1.2],
             opacity: [0.4, 0.7, 0.4],
@@ -140,7 +140,7 @@ export const FAQ = () => {
         >
           <HelpCircle className="w-4 h-4 text-primary" />
           <span className="text-sm font-medium text-primary">Got Questions?</span>
-          <Sparkles className="w-4 h-4 text-primary" />
+          <Sparkles className="w-4 h-4 text-secondary" />
         </motion.div>
 
         <motion.h2 
@@ -150,7 +150,7 @@ export const FAQ = () => {
         >
           Frequently Asked{" "}
           <motion.span
-            className="bg-gradient-to-r from-primary via-purple-500 to-primary text-transparent bg-clip-text relative"
+            className="bg-gradient-to-r from-primary via-secondary to-primary text-transparent bg-clip-text relative"
             animate={{ 
               backgroundPosition: ["0% center", "100% center", "0% center"],
             }}
@@ -174,13 +174,13 @@ export const FAQ = () => {
         
         {/* Animated divider */}
         <motion.div 
-          className="h-1 w-0 bg-gradient-to-r from-primary to-purple-500 rounded-full mx-auto mt-6"
+          className="h-1 w-0 bg-gradient-to-r from-primary to-secondary rounded-full mx-auto mt-6"
           animate={isInView ? { width: 100 } : { width: 0 }}
           transition={{ delay: 0.5, duration: 1 }}
         />
 
         <motion.p
-          className="text-xl text-muted-foreground mt-6 max-w-2xl mx-auto"
+          className="text-lg text-muted-foreground mt-6 max-w-2xl mx-auto"
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ delay: 0.6, duration: 0.8 }}
@@ -255,7 +255,7 @@ export const FAQ = () => {
                         animate={{ rotate: isOpen ? 360 : 0 }}
                         transition={{ duration: 0.5, type: "spring" }}
                       >
-                        <HelpCircle className="w-5 h-5 text-primary" />
+                        <HelpCircle className="w-5 h-5 text-primary dark:text-secondary" />
                       </motion.div>
                     </motion.div>
                     
diff --git a/src/containers/Newsletter.tsx b/src/containers/Newsletter.tsx
index 97e3420..02f09f7 100644
--- a/src/containers/Newsletter.tsx
+++ b/src/containers/Newsletter.tsx
@@ -57,7 +57,7 @@ export const Newsletter = () => {
           />
           
           <motion.div 
-            className="absolute bottom-0 right-1/4 w-80 h-80 rounded-full bg-purple-500/10"
+            className="absolute bottom-0 right-1/4 w-80 h-80 rounded-full bg-secondary"
             animate={{
               scale: [1.2, 1, 1.2],
               opacity: [0.1, 0.15, 0.1],
@@ -121,7 +121,7 @@ export const Newsletter = () => {
               className="relative inline-block"
             >
               <motion.span
-                className="bg-gradient-to-r from-primary via-purple-500 to-primary text-transparent bg-clip-text"
+                className="bg-gradient-to-r from-primary via-secondary to-primary text-transparent bg-clip-text"
                 animate={{ 
                   backgroundPosition: ["0% center", "100% center", "0% center"],
                 }}
@@ -146,14 +146,14 @@ export const Newsletter = () => {
           </motion.h3>
           
           <motion.div 
-            className="h-1 w-0 bg-gradient-to-r from-primary to-purple-500 mx-auto mt-4 rounded-full"
+            className="h-1 w-0 bg-gradient-to-r from-primary to-secondary mx-auto mt-4 rounded-full"
             animate={isInView ? { width: 80 } : { width: 0 }}
             transition={{ delay: 0.3, duration: 0.8 }}
           />
         </motion.div>
 
         <motion.p 
-          className="text-xl text-muted-foreground text-center mt-6 mb-12 relative"
+          className="text-lg text-muted-foreground text-center mt-6 mb-12 relative"
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ duration: 0.6, delay: 0.3 }}
@@ -191,7 +191,7 @@ export const Newsletter = () => {
           className="perspective-1000 relative"
         >
           <motion.div
-            className="absolute -inset-4 rounded-xl bg-gradient-to-r from-primary/20 via-purple-500/20 to-primary/20 -z-10"
+            className="absolute -inset-4 rounded-xl bg-gradient-to-r from-primary/20 via-secondary/20 to-primary/20 -z-10"
             animate={{
               backgroundPosition: ['0% center', '100% center', '0% center'],
               opacity: [0.4, 0.6, 0.4],
@@ -228,7 +228,7 @@ export const Newsletter = () => {
               
               <Input
                 placeholder="pythoncameroon@gmail.com"
-                className="bg-muted/50 dark:bg-muted/80 backdrop-blur-sm h-12 pl-4 pr-4 border-primary/20 focus-visible:ring-primary"
+                className="bg-muted/50 dark:bg-muted/80 backdrop-blur-sm h-12 pl-4 pr-4 border-primary/20 focus-visible:ring-primary dark:border-secondary/20 dark:focus-visible:ring-secondary"
                 aria-label="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
@@ -268,7 +268,7 @@ export const Newsletter = () => {
               className="relative overflow-hidden"
             >
               <Button 
-                className="relative h-12 min-w-[120px] overflow-hidden" 
+                className="relative h-12 min-w-[120px] overflow-hidden hover:text-primary dark:hover:text-secondary dark:bg-secondary dark:hover:bg-transparent" 
                 disabled={isSubmitting || isSuccess}
               >
                 <AnimatePresence mode="wait">
@@ -324,7 +324,7 @@ export const Newsletter = () => {
                 </AnimatePresence>
                 
                 <motion.div 
-                  className="absolute inset-0 bg-gradient-to-r from-primary/80 via-purple-500/80 to-primary/80 -z-10"
+                  className="absolute inset-0 bg-gradient-to-r from-primary/80 via-secondary/80 to-primary/80 -z-10"
                   animate={{
                     backgroundPosition: ['0% center', '100% center', '0% center'],
                   }}
@@ -363,7 +363,7 @@ export const Newsletter = () => {
           {["Updates", "Events", "Tutorials", "Community"].map((tag, i) => (
             <motion.div
               key={tag}
-              className="px-3 py-1 bg-muted/50 backdrop-blur-sm rounded-full text-sm"
+              className="px-3 py-1 bg-secondary dark:bg-muted backdrop-blur-sm rounded-full text-sm"
               initial={{ opacity: 0, scale: 0.8 }}
               animate={{ opacity: 1, scale: 1 }}
               transition={{ delay: 0.8 + (i * 0.1), duration: 0.3 }}
diff --git a/src/containers/Team.tsx b/src/containers/Team.tsx
index 217d3bf..1a16e80 100644
--- a/src/containers/Team.tsx
+++ b/src/containers/Team.tsx
@@ -284,7 +284,7 @@ const ProfileImage = ({ member, isHovered }: { member: TeamProps, isHovered: boo
       ) : (
         // Default placeholder when all images fail
         <motion.div
-          className="w-full h-full bg-gradient-to-br from-primary/20 to-purple-500/20 flex items-center justify-center"
+          className="w-full h-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center"
           animate={{
             scale: isHovered ? 1.1 : 1,
           }}
@@ -350,7 +350,7 @@ export const Team = () => {
       {/* Animated background elements */}
       <div className="absolute inset-0 -z-10">
         <motion.div 
-          className="absolute top-10 left-1/5 w-96 h-96 rounded-full bg-primary/5"
+          className="absolute top-10 left-1/5 w-96 h-96 rounded-full bg-primary"
           animate={{
             scale: [1, 1.3, 1],
             opacity: [0.3, 0.6, 0.3],
@@ -362,7 +362,7 @@ export const Team = () => {
         />
         
         <motion.div 
-          className="absolute bottom-20 right-1/4 w-80 h-80 rounded-full bg-purple-500/5"
+          className="absolute bottom-20 right-1/4 w-80 h-80 rounded-full bg-secondary"
           animate={{
             scale: [1.3, 1, 1.3],
             opacity: [0.4, 0.7, 0.4],
@@ -418,7 +418,7 @@ export const Team = () => {
         transition={{ duration: 0.8 }}
       >
         <motion.div
-          className="inline-flex items-center gap-2 mb-4 px-4 py-2 rounded-full bg-primary/10 border border-primary/20"
+          className="inline-flex items-center gap-2 mb-4 px-4 py-2 rounded-full bg-primary/10 border border-slate-500/30"
           initial={{ opacity: 0, scale: 0.8 }}
           animate={isInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
           transition={{ delay: 0.2, duration: 0.6 }}
@@ -426,7 +426,7 @@ export const Team = () => {
         >
           <Users className="w-4 h-4 text-primary" />
           <span className="text-sm font-medium text-primary">Our Amazing Team</span>
-          <Star className="w-4 h-4 text-primary" />
+          <Star className="w-4 h-4 text-secondary" />
         </motion.div>
 
         <motion.h2 
@@ -435,7 +435,7 @@ export const Team = () => {
           transition={{ duration: 4, repeat: Infinity, repeatType: "reverse" }}
         >
           <motion.span
-            className="bg-gradient-to-r from-primary via-purple-500 to-primary text-transparent bg-clip-text relative"
+            className="bg-gradient-to-r from-primary via-secondary to-primary text-transparent bg-clip-text relative"
             animate={{ 
               backgroundPosition: ["0% center", "100% center", "0% center"],
             }}
@@ -459,13 +459,13 @@ export const Team = () => {
         
         {/* Animated divider */}
         <motion.div 
-          className="h-1 w-0 bg-gradient-to-r from-primary to-purple-500 rounded-full mx-auto mt-6"
+          className="h-1 w-0 bg-gradient-to-r from-primary to-secondary rounded-full mx-auto mt-6"
           animate={isInView ? { width: 120 } : { width: 0 }}
           transition={{ delay: 0.5, duration: 1 }}
         />
 
         <motion.p
-          className="text-xl text-muted-foreground mt-6 max-w-2xl mx-auto"
+          className="text-lg text-muted-foreground mt-6 max-w-2xl mx-auto"
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ delay: 0.6, duration: 0.8 }}
@@ -476,7 +476,7 @@ export const Team = () => {
 
       {/* Team grid */}
       <motion.div 
-        className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-8 gap-y-12"
+        className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 gap-y-12 place-items-center justify-items-center"
         initial={{ opacity: 0 }}
         animate={isInView ? { opacity: 1 } : { opacity: 0 }}
         transition={{ delay: 0.7, duration: 0.8 }}
@@ -536,7 +536,7 @@ export const Team = () => {
                   >
                     {/* Rotating background gradient */}
                     <motion.div
-                      className="absolute -inset-3 bg-gradient-to-r from-primary/30 via-purple-500/30 to-primary/30 rounded-full -z-10"
+                      className="absolute -inset-3 bg-gradient-to-r from-primary/30 via-secondary/30 to-primary/30 rounded-full -z-10"
                       animate={{
                         rotate: isHovered ? 360 : 0,
                         scale: isHovered ? 1.1 : 1,
diff --git a/src/layouts/Footer.tsx b/src/layouts/Footer.tsx
index e791878..f3b7a21 100644
--- a/src/layouts/Footer.tsx
+++ b/src/layouts/Footer.tsx
@@ -1,7 +1,14 @@
 import { useState, useRef } from "react";
 import { motion, useInView, AnimatePresence } from "framer-motion";
-import { LogoIcon } from "../components/Icons";
-import { Github, Twitter, Linkedin, Youtube, MessageCircle, Phone } from "lucide-react";
+import {
+  Github,
+  Twitter,
+  Linkedin,
+  Youtube,
+  MessageCircle,
+  Phone,
+  Heart,
+} from "lucide-react";
 
 export const Footer = () => {
   const footerRef = useRef(null);
@@ -21,10 +28,22 @@ export const Footer = () => {
     {
       title: "Follow US",
       links: [
-        { name: "Github", url: "https://github.com/pythoncameroon", icon: "Github" },
-        { name: "Twitter(X)", url: "https://x.com/pythoncameroon", icon: "Twitter" },
-        { name: "LinkedIn", url: "https://linkedin.com/company/PythonCameroon", icon: "Linkedin" },
-      ]
+        {
+          name: "Github",
+          url: "https://github.com/pythoncameroon",
+          icon: "Github",
+        },
+        {
+          name: "Twitter(X)",
+          url: "https://x.com/pythoncameroon",
+          icon: "Twitter",
+        },
+        {
+          name: "LinkedIn",
+          url: "https://linkedin.com/company/PythonCameroon",
+          icon: "Linkedin",
+        },
+      ],
     },
     {
       title: "About",
@@ -32,20 +51,28 @@ export const Footer = () => {
         { name: "FAQ", url: "#faq", icon: null },
         { name: "Team", url: "#team", icon: null },
         { name: "Community", url: "#community", icon: null },
-      ]
+      ],
     },
     {
       title: "Community",
       links: [
         { name: "Youtube", url: "#", icon: "Youtube" },
-        { name: "Discord", url: "https://discord.gg/TWVCKCe3Dt", icon: "Discord" },
-        { name: "WhatsApp", url: "https://chat.whatsapp.com/Ckc80ophGEH0NJFmZAzDMr", icon: "WhatsApp" },
-      ]
-    }
+        {
+          name: "Discord",
+          url: "https://discord.gg/TWVCKCe3Dt",
+          icon: "Discord",
+        },
+        {
+          name: "WhatsApp",
+          url: "https://chat.whatsapp.com/Ckc80ophGEH0NJFmZAzDMr",
+          icon: "WhatsApp",
+        },
+      ],
+    },
   ];
 
   return (
-    <motion.footer 
+    <motion.footer
       id="footer"
       ref={footerRef}
       className="relative overflow-hidden"
@@ -55,27 +82,32 @@ export const Footer = () => {
     >
       {/* Animated background */}
       <div className="absolute inset-0 -z-10">
-        <motion.div 
-          className="absolute top-0 left-1/4 w-96 h-96 rounded-full bg-primary/10"
+        <motion.div
+          className="absolute top-0 left-1/4 w-96 h-96 rounded-full bg-primary"
           animate={{
             scale: [1, 1.2, 1],
             opacity: [0.05, 0.1, 0.05],
             x: [0, 50, 0],
-            y: [0, -30, 0]
+            y: [0, -30, 0],
           }}
           transition={{ duration: 15, repeat: Infinity, ease: "easeInOut" }}
           style={{ filter: "blur(120px)" }}
         />
-        
-        <motion.div 
-          className="absolute bottom-0 right-1/3 w-80 h-80 rounded-full bg-purple-500/10"
+
+        <motion.div
+          className="absolute bottom-0 right-1/3 w-80 h-80 rounded-full bg-secondary"
           animate={{
             scale: [1.2, 1, 1.2],
             opacity: [0.05, 0.12, 0.05],
             x: [0, -40, 0],
-            y: [0, 20, 0]
+            y: [0, 20, 0],
+          }}
+          transition={{
+            duration: 12,
+            repeat: Infinity,
+            ease: "easeInOut",
+            delay: 4,
           }}
-          transition={{ duration: 12, repeat: Infinity, ease: "easeInOut", delay: 4 }}
           style={{ filter: "blur(100px)" }}
         />
 
@@ -84,7 +116,7 @@ export const Footer = () => {
       </div>
 
       {/* Animated top divider */}
-      <motion.hr 
+      <motion.hr
         className="w-11/12 mx-auto"
         initial={{ width: "0%" }}
         animate={isInView ? { width: "91.666667%" } : { width: "0%" }}
@@ -94,10 +126,14 @@ export const Footer = () => {
       <section className="container py-20 relative">
         <div className="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-x-12 gap-y-8">
           {/* Logo section with enhanced animations */}
-          <motion.div 
-            className="col-span-full xl:col-span-2"
+          <motion.div
+            className="col-span-full md:col-span-2 xl:col-span-3"
             initial={{ opacity: 0, y: 30, scale: 0.9 }}
-            animate={isInView ? { opacity: 1, y: 0, scale: 1 } : { opacity: 0, y: 30, scale: 0.9 }}
+            animate={
+              isInView
+                ? { opacity: 1, y: 0, scale: 1 }
+                : { opacity: 0, y: 30, scale: 0.9 }
+            }
             transition={{ duration: 0.8, delay: 0.2 }}
           >
             <motion.a
@@ -112,8 +148,6 @@ export const Footer = () => {
                 whileHover={{ rotate: 10 }}
                 transition={{ duration: 0.3 }}
               >
-                <LogoIcon />
-                
                 {/* Floating particles around logo */}
                 <AnimatePresence>
                   {isInView && (
@@ -122,23 +156,23 @@ export const Footer = () => {
                         <motion.div
                           key={`logo-particle-${i}`}
                           className="absolute w-1 h-1 rounded-full bg-primary"
-                          initial={{ 
+                          initial={{
                             opacity: 0,
                             scale: 0,
                             x: 0,
-                            y: 0
+                            y: 0,
                           }}
-                          animate={{ 
+                          animate={{
                             opacity: [0, 0.8, 0],
                             scale: [0, 1, 0],
                             x: Math.cos((i * Math.PI) / 3) * 30,
                             y: Math.sin((i * Math.PI) / 3) * 30,
                           }}
-                          transition={{ 
+                          transition={{
                             duration: 3,
                             repeat: Infinity,
                             delay: i * 0.5,
-                            ease: "easeInOut"
+                            ease: "easeInOut",
                           }}
                           style={{ filter: "blur(0.5px)" }}
                         />
@@ -148,23 +182,27 @@ export const Footer = () => {
                 </AnimatePresence>
 
                 {/* Glow effect */}
-                <motion.div 
+                <motion.div
                   className="absolute inset-0 rounded-full bg-primary opacity-0 group-hover:opacity-20"
-                  animate={{ 
+                  animate={{
                     scale: [1, 1.2, 1],
-                    opacity: [0, 0.1, 0]
+                    opacity: [0, 0.1, 0],
                   }}
                   transition={{ duration: 3, repeat: Infinity }}
                   style={{ filter: "blur(15px)" }}
                 />
               </motion.div>
-              
+
               <motion.span
-                className="ml-3 bg-gradient-to-r from-primary via-purple-500 to-primary text-transparent bg-clip-text font-bold"
-                animate={{ 
+                className="bg-gradient-to-r from-primary via-secondary to-primary text-transparent bg-clip-text font-black text-4xl sm:text-5xl "
+                animate={{
                   backgroundPosition: ["0% center", "100% center", "0% center"],
                 }}
-                transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
+                transition={{
+                  duration: 6,
+                  repeat: Infinity,
+                  ease: "easeInOut",
+                }}
                 style={{ backgroundSize: "200% auto" }}
               >
                 Python Cameroon
@@ -172,19 +210,22 @@ export const Footer = () => {
             </motion.a>
 
             {/* Description */}
-            <motion.p 
-              className="text-muted-foreground mt-4 max-w-md"
+            <motion.p
+              className="text-muted-foreground mt-4 max-w-md text-sm"
               initial={{ opacity: 0, y: 20 }}
-              animate={isInView ? { opacity: 0.8, y: 0 } : { opacity: 0, y: 20 }}
+              animate={
+                isInView ? { opacity: 0.8, y: 0 } : { opacity: 0, y: 20 }
+              }
               transition={{ delay: 0.4, duration: 0.6 }}
             >
-              Empowering Python developers across Cameroon through community, learning, and innovation.
+              Empowering Python developers across Cameroon through community,
+              learning, and innovation.
             </motion.p>
           </motion.div>
 
           {/* Footer sections with staggered animations */}
           {footerSections.map((section, sectionIndex) => (
-            <motion.div 
+            <motion.div
               key={section.title}
               className="flex flex-col gap-2 relative"
               initial={{ opacity: 0, y: 30 }}
@@ -194,28 +235,31 @@ export const Footer = () => {
               onMouseLeave={() => setHoveredSection(null)}
             >
               {/* Section title with glow effect */}
-              <motion.h3 
+              <motion.h3
                 className="font-bold text-lg relative"
                 animate={{
-                  color: hoveredSection === section.title ? 
-                    "hsl(var(--primary))" : 
-                    "hsl(var(--foreground))",
+                  color:
+                    hoveredSection === section.title
+                      ? "hsl(var(--primary))"
+                      : "hsl(var(--foreground))",
                 }}
                 transition={{ duration: 0.3 }}
               >
                 {section.title}
-                
+
                 {/* Underline animation */}
-                <motion.div 
-                  className="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-primary to-purple-500"
+                <motion.div
+                  className="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-primary to-secondary"
                   initial={{ width: "0%" }}
-                  animate={{ width: hoveredSection === section.title ? "100%" : "0%" }}
+                  animate={{
+                    width: hoveredSection === section.title ? "100%" : "0%",
+                  }}
                   transition={{ duration: 0.3 }}
                 />
-                
+
                 {/* Background glow */}
                 {hoveredSection === section.title && (
-                  <motion.div 
+                  <motion.div
                     className="absolute -inset-2 rounded-lg bg-primary/10 -z-10"
                     initial={{ opacity: 0, scale: 0.8 }}
                     animate={{ opacity: 1, scale: 1 }}
@@ -229,19 +273,26 @@ export const Footer = () => {
               {/* Links with hover animations */}
               <AnimatePresence>
                 {section.links.map((link, linkIndex) => {
-                  const IconComponent = link.icon ? socialIcons[link.icon as keyof typeof socialIcons] : null;
-                  
+                  const IconComponent = link.icon
+                    ? socialIcons[link.icon as keyof typeof socialIcons]
+                    : null;
+
                   return (
                     <motion.div
                       key={link.name}
                       initial={{ opacity: 0, x: -20 }}
                       animate={{ opacity: 1, x: 0 }}
-                      transition={{ delay: 0.4 + sectionIndex * 0.1 + linkIndex * 0.05, duration: 0.4 }}
+                      transition={{
+                        delay: 0.4 + sectionIndex * 0.1 + linkIndex * 0.05,
+                        duration: 0.4,
+                      }}
                     >
                       <motion.a
                         rel="noreferrer noopener"
                         href={link.url}
-                        target={link.url.startsWith('http') ? "_blank" : undefined}
+                        target={
+                          link.url.startsWith("http") ? "_blank" : undefined
+                        }
                         className="opacity-60 hover:opacity-100 flex items-center gap-2 group relative py-1"
                         whileHover={{ x: 5, scale: 1.02 }}
                         transition={{ duration: 0.2 }}
@@ -251,22 +302,25 @@ export const Footer = () => {
                             whileHover={{ rotate: 10, scale: 1.1 }}
                             transition={{ duration: 0.2 }}
                           >
-                            <IconComponent size={16} className="text-primary/70 group-hover:text-primary" />
+                            <IconComponent
+                              size={16}
+                              className="text-primary/70 group-hover:text-primary"
+                            />
                           </motion.div>
                         )}
-                        
+
                         <span className="relative">
                           {link.name}
-                          
+
                           {/* Underline effect */}
-                          <motion.span 
-                            className="absolute bottom-0 left-0 h-px w-0 bg-gradient-to-r from-primary to-purple-500 group-hover:w-full"
+                          <motion.span
+                            className="absolute bottom-0 left-0 h-px w-0 bg-gradient-to-r from-primary to-secondary group-hover:w-full"
                             transition={{ duration: 0.3 }}
                           />
                         </span>
 
                         {/* Hover glow effect */}
-                        <motion.div 
+                        <motion.div
                           className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 rounded-md -z-10"
                           transition={{ duration: 0.3 }}
                         />
@@ -280,59 +334,52 @@ export const Footer = () => {
         </div>
 
         {/* Bottom section with animated copyright */}
-        <motion.div 
-          className="border-t border-primary/20 pt-8 mt-16 text-center"
+        <motion.div
+          className="border-t border-slate-500/20 pt-8 mt-16 text-center"
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ delay: 0.8, duration: 0.6 }}
         >
-          <motion.p 
+          <motion.p
             className="text-muted-foreground relative"
             animate={{
-              filter: ["blur(0px)", "blur(0.5px)", "blur(0px)"]
+              filter: ["blur(0px)", "blur(0.5px)", "blur(0px)"],
             }}
             transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
           >
             © {new Date().getFullYear()}{" "}
-            <motion.span
-              className="bg-gradient-to-r from-primary to-purple-500 text-transparent bg-clip-text font-medium"
-              animate={{ 
-                backgroundPosition: ["0% center", "100% center", "0% center"],
+            <span className="font-bold" style={{ backgroundSize: "200% auto" }}>
+              Python Cameroon
+            </span>
+            . All rights reserved. Built with{" "}
+            <motion.div
+              className="inline-block ml-1"
+              animate={{
+                scale: [1, 1.2, 1],
+                rotate: [0, 5, -5, 0],
+              }}
+              transition={{
+                duration: 2,
+                repeat: Infinity,
+                ease: "easeInOut",
               }}
-              transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
-              style={{ backgroundSize: "200% auto" }}
             >
-              Python Cameroon
-            </motion.span>
-            . All rights reserved. Built with ❤️ for the community.
+              <Heart className="inline-block w-5 h-5 text-primary dark:text-secondary" />
+            </motion.div>{" "}
+            for the community.
           </motion.p>
-
-          {/* Floating heart animation */}
-          <motion.div
-            className="inline-block ml-1"
-            animate={{
-              scale: [1, 1.2, 1],
-              rotate: [0, 5, -5, 0],
-            }}
-            transition={{
-              duration: 2,
-              repeat: Infinity,
-              ease: "easeInOut"
-            }}
-          >
-            ❤️
-          </motion.div>
         </motion.div>
       </section>
 
       {/* Bottom animated border */}
-      <motion.div 
+      <motion.div
         className="absolute bottom-0 left-0 right-0 h-px"
         initial={{ scaleX: 0 }}
         animate={isInView ? { scaleX: 1 } : { scaleX: 0 }}
         transition={{ duration: 1.5, ease: "easeOut", delay: 1 }}
         style={{
-          background: "linear-gradient(to right, transparent, rgba(var(--primary-rgb), 0.5), transparent)"
+          background:
+            "linear-gradient(to right, transparent, rgba(var(--primary-rgb), 0.5), transparent)",
         }}
       />
     </motion.footer>
diff --git a/src/layouts/Navbar.tsx b/src/layouts/Navbar.tsx
index af03a45..87e1c19 100644
--- a/src/layouts/Navbar.tsx
+++ b/src/layouts/Navbar.tsx
@@ -111,7 +111,7 @@ export const Navbar = () => {
 
   return (
     <motion.header
-      className={`sticky border-b-[1px] top-0 z-40 w-full transition-all duration-300
+      className={`fixed border-b-[1px] top-0 z-40 w-full transition-all duration-300
         ${
           scrolled
             ? "backdrop-blur-lg bg-white/80 dark:bg-background/80"