diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index abf2e29..1ed5bf8 100644
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@@ -1,92 +1,294 @@
-import React from 'react';
+import React from "react";
 import {
-  Box, Container, Grid, Typography, Link, Divider, Stack, useMediaQuery, useTheme
-} from '@mui/material';
-import {
-  Instagram, YouTube, Facebook, LinkedIn
-} from '@mui/icons-material';
-import { motion } from 'framer-motion';
+  Box,
+  Container,
+  Grid,
+  Typography,
+  Link,
+  Divider,
+  Stack,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import { Instagram, YouTube, Facebook, LinkedIn } from "@mui/icons-material";
+import { motion, Variants } from "framer-motion";
 
 export default function Footer() {
   const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isTablet = useMediaQuery(theme.breakpoints.between("sm", "md"));
+
+  // Animation variants
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        when: "beforeChildren",
+      },
+    },
+  };
+
+  const itemVariants: Variants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+        ease: "easeOut",
+      },
+    },
+    hover: {
+      scale: 1.05,
+      color: "#00E0FF",
+      transition: { duration: 0.2 },
+    },
+  };
+
+  const socialIconVariants: Variants = {
+    hidden: { scale: 0 },
+    visible: {
+      scale: 1,
+      transition: {
+        type: "spring",
+        stiffness: 500,
+        damping: 15,
+      },
+    },
+    hover: {
+      scale: 1.2,
+      transition: { duration: 0.2 },
+    },
+  };
 
   return (
-    <Box sx={{ backgroundColor: '#0F111A', color: '#fff', pt: 6, pb: 2 }}>
+    <Box
+      component="footer"
+      sx={{
+        backgroundColor: "#0F111A",
+        color: "#fff",
+        pt: 8,
+        pb: 4,
+        overflow: "hidden",
+      }}
+    >
       <Container maxWidth="lg">
         <motion.div
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8 }}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-50px" }}
+          variants={containerVariants}
         >
-          <Grid container spacing={4}>
+          <Grid container spacing={isMobile ? 3 : 4}>
             {/* Column 1: Explore Links */}
             <Grid item xs={12} sm={6} md={3}>
+              <Typography
+                component={motion.div}
+                variants={itemVariants}
+                variant="h6"
+                fontWeight={600}
+                gutterBottom
+                sx={{ color: "#00E0FF" }}
+              >
+                Explore
+              </Typography>
               <Stack spacing={1}>
-                <Link href="#" color="inherit" underline="hover">About Us</Link>
-                <Link href="#" color="inherit" underline="hover">Portfolio</Link>
-                <Link href="#" color="inherit" underline="hover">Blogs</Link>
-                <Link href="#" color="inherit" underline="hover">Services</Link>
+                {["About Us", "Portfolio", "Blogs", "Services"].map((item) => (
+                  <Link
+                    key={item}
+                    component={motion.a}
+                    variants={itemVariants}
+                    whileHover="hover"
+                    href="#"
+                    color="inherit"
+                    underline="hover"
+                    sx={{
+                      display: "inline-block",
+                      transition: "color 0.2s ease",
+                    }}
+                  >
+                    {item}
+                  </Link>
+                ))}
               </Stack>
             </Grid>
 
             {/* Column 2: Support Links */}
             <Grid item xs={12} sm={6} md={3}>
+              <Typography
+                component={motion.div}
+                variants={itemVariants}
+                variant="h6"
+                fontWeight={600}
+                gutterBottom
+                sx={{ color: "#00E0FF" }}
+              >
+                Support
+              </Typography>
               <Stack spacing={1}>
-                <Link href="#" color="inherit" underline="hover">FAQ’s</Link>
-                <Link href="#" color="inherit" underline="hover">Terms & Conditions</Link>
-                <Link href="#" color="inherit" underline="hover">Privacy Policy</Link>
+                {["FAQ’s", "Terms & Conditions", "Privacy Policy"].map(
+                  (item) => (
+                    <Link
+                      key={item}
+                      component={motion.a}
+                      variants={itemVariants}
+                      whileHover="hover"
+                      href="#"
+                      color="inherit"
+                      underline="hover"
+                      sx={{
+                        display: "inline-block",
+                        transition: "color 0.2s ease",
+                      }}
+                    >
+                      {item}
+                    </Link>
+                  )
+                )}
               </Stack>
             </Grid>
 
-            {/* Column 3: Logo (only visible on md+) */}
-            {!isMobile && (
-              <Grid item xs={12} sm={6} md={3}>
-                <Box sx={{ display: 'flex', justifyContent: { sm: 'center', md: 'flex-end' }, mb: 2 }}>
-                  <img
-                    src="/logo.png" // Replace with actual logo
-                    alt="Quadra Edge"
-                    style={{ maxWidth: '180px', height: 'auto' }}
-                  />
-                </Box>
-              </Grid>
-            )}
+            {/* Column 3: Logo */}
+            <Grid item xs={12} sm={6} md={3}>
+              <Box
+                component={motion.div}
+                variants={itemVariants}
+                sx={{
+                  display: "flex",
+                  justifyContent: isMobile
+                    ? "flex-start"
+                    : isTablet
+                    ? "center"
+                    : "flex-end",
+                  mb: 2,
+                  height: "100%",
+                  alignItems: isMobile ? "flex-start" : "center",
+                }}
+              >
+                <motion.img
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  transition={{
+                    type: "spring",
+                    stiffness: 300,
+                    damping: 15,
+                    delay: 0.2,
+                  }}
+                  src="/logo.png"
+                  alt="Quadra Edge"
+                  style={{
+                    maxWidth: isMobile ? "140px" : "180px",
+                    height: "auto",
+                    filter: "drop-shadow(0 0 8px rgba(0, 224, 255, 0.4))",
+                  }}
+                />
+              </Box>
+            </Grid>
 
             {/* Column 4: Contact Info + Socials */}
             <Grid item xs={12} sm={6} md={3}>
-              {/* Mobile: show logo here instead */}
-              {isMobile && (
-                <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
-                  <img
-                    src="/logo.png" // Replace with actual logo
-                    alt="Quadra Edge"
-                    style={{ maxWidth: '180px', height: 'auto' }}
-                  />
-                </Box>
-              )}
+              <Typography
+                component={motion.div}
+                variants={itemVariants}
+                variant="h6"
+                fontWeight={600}
+                gutterBottom
+                sx={{ color: "#00E0FF" }}
+              >
+                Contact Us
+              </Typography>
 
-              <Typography fontWeight={600} gutterBottom>Contact Us</Typography>
-              <Typography variant="body2" mb={1}>Number</Typography>
-              <Typography variant="body2">Address</Typography>
+              <Typography
+                component={motion.div}
+                variants={itemVariants}
+                variant="body2"
+                mb={1}
+              >
+                +1 (123) 456-7890
+              </Typography>
+
+              <Typography
+                component={motion.div}
+                variants={itemVariants}
+                variant="body2"
+              >
+                123 Business Ave, Suite 100
+                <br />
+                New York, NY 10001
+              </Typography>
 
               <Stack
                 direction="row"
                 spacing={2}
-                sx={{ mt: 2 }}
+                sx={{ mt: 3 }}
+                component={motion.div}
+                variants={containerVariants}
               >
-                <Link href="#"><Instagram sx={{ color: '#00E0FF' }} /></Link>
-                <Link href="#"><YouTube sx={{ color: '#00E0FF' }} /></Link>
-                <Link href="#"><Facebook sx={{ color: '#00E0FF' }} /></Link>
-                <Link href="#"><LinkedIn sx={{ color: '#00E0FF' }} /></Link>
+                {[
+                  { icon: <Instagram />, name: "Instagram" },
+                  { icon: <YouTube />, name: "YouTube" },
+                  { icon: <Facebook />, name: "Facebook" },
+                  { icon: <LinkedIn />, name: "LinkedIn" },
+                ].map((social, index) => (
+                  <Link
+                    key={social.name}
+                    component={motion.a}
+                    variants={socialIconVariants}
+                    whileHover="hover"
+                    href="#"
+                    sx={{
+                      color: "#00E0FF",
+                      display: "flex",
+                      alignItems: "center",
+                    }}
+                    aria-label={social.name}
+                  >
+                    {React.cloneElement(social.icon, {
+                      sx: {
+                        fontSize: isMobile ? "1.8rem" : "2rem",
+                        transition: "transform 0.2s ease",
+                      },
+                    })}
+                  </Link>
+                ))}
               </Stack>
             </Grid>
           </Grid>
 
-          <Divider sx={{ my: 4, borderColor: '#00E0FF' }} />
+          <Divider
+            component={motion.hr}
+            initial={{ scaleX: 0 }}
+            whileInView={{ scaleX: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            sx={{
+              my: 4,
+              borderColor: "#00E0FF",
+              borderBottomWidth: 2,
+              opacity: 0.6,
+            }}
+          />
 
-          <Box textAlign="center">
-            <Typography variant="body2" sx={{ color: '#00E0FF' }}>
-              Copyright © 2025 QuadraEdge
+          <Box
+            component={motion.div}
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.4 }}
+            textAlign="center"
+          >
+            <Typography
+              variant="body2"
+              sx={{
+                color: "#00E0FF",
+                fontSize: isMobile ? "0.8rem" : "0.9rem",
+                letterSpacing: "0.5px",
+              }}
+            >
+              Copyright © {new Date().getFullYear()} QuadraEdge. All rights
+              reserved.
             </Typography>
           </Box>
         </motion.div>