diff --git a/src/components/aboutus/aboutus.tsx b/src/components/aboutus/aboutus.tsx
index 0b93e07..6ad6774 100644
--- a/src/components/aboutus/aboutus.tsx
+++ b/src/components/aboutus/aboutus.tsx
@@ -1,41 +1,135 @@
 import { Box, Typography, Button } from "@mui/material";
 import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
+import { motion } from "framer-motion";
 
 const AboutUs = () => {
+  // Animation variants
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        duration: 0.6,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.6,
+        ease: "easeOut" as const,
+      },
+    },
+    hover: {
+      scale: 1.02,
+      transition: { duration: 0.3 },
+    },
+  };
+
   return (
-    <Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 10, px: 3 }}>
-      <Box textAlign="center" maxWidth={800} mx="auto">
-        <Typography variant="h4" fontWeight="bold" gutterBottom>
-          About Us
-        </Typography>
-        <Typography variant="body1" paragraph>
-          Lorem ipsum dolor sit amet consectetur. Nisl sed sed tortor eros. Enim
-          hendrerit elit interdum malesuada sit dis est pharetra suspendisse. In
-          dolor venenatis ultricies aliquet lacinia. Faucibus commodo eu gravida
-          auctor eu et sit ut. Sed praesent sed odio aliquam in fermentum. Sit
-          vitae morbi sodales sem velit eu tempus velit nunc. Turpis in in
-          luctus et nulla purus nibh ut. Enim sed fermentum purus molestie
-          parturient morbi nunc aliquet. Aliquam sed etiam turpis non lectus
-          commodo cras leo gravida.
-        </Typography>
-        <Button
-          variant="outlined"
-          endIcon={<ArrowOutwardIcon />}
-          sx={{
-            mt: 2,
-            borderColor: "#00FFD1",
-            color: "#00FFD1",
-            borderRadius: "30px",
-            fontWeight: "bold",
-            px: 4,
-            "&:hover": {
-              backgroundColor: "#00FFD1",
-              color: "#000",
-            },
-          }}
-        >
-          GET IN TOUCH
-        </Button>
+    <Box
+      component={motion.div}
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true, margin: "-100px" }}
+      sx={{
+        backgroundColor: "#1d2733",
+        color: "#fff",
+        py: { xs: 8, md: 12 },
+        px: 3,
+        overflow: "hidden",
+      }}
+    >
+      <Box
+        component={motion.div}
+        variants={containerVariants}
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, margin: "-100px" }}
+        textAlign="center"
+        maxWidth={800}
+        mx="auto"
+      >
+        <Box component={motion.div} variants={itemVariants} whileHover="hover">
+          <Typography
+            variant="h2"
+            gutterBottom
+            sx={{
+              fontFamily: "'Cormorant Garamond', serif",
+              fontWeight: 600,
+              fontSize: { xs: "2.5rem", md: "3rem" },
+              letterSpacing: "1px",
+              mb: 4,
+              position: "relative",
+              "&:after": {
+                content: '""',
+                display: "block",
+                width: "80px",
+                height: "3px",
+                background: "linear-gradient(90deg, #00FFD1, transparent)",
+                margin: "20px auto 0",
+                borderRadius: "2px",
+              },
+            }}
+          >
+            About Us
+          </Typography>
+        </Box>
+
+        <Box component={motion.div} variants={itemVariants}>
+          <Typography
+            paragraph
+            sx={{
+              fontFamily: "'Montserrat', sans-serif",
+              fontSize: { xs: "1rem", md: "1.1rem" },
+              lineHeight: 1.9,
+              fontWeight: 300,
+              mb: 4,
+              color: "rgba(255,255,255,0.85)",
+            }}
+          >
+            Lorem ipsum dolor sit amet consectetur. Nisl sed sed tortor eros.
+            Enim hendrerit elit interdum malesuada sit dis est pharetra
+            suspendisse. In dolor venenatis ultricies aliquet lacinia. Faucibus
+            commodo eu gravida auctor eu et sit ut. Sed praesent sed odio
+            aliquam in fermentum. Sit vitae morbi sodales sem velit eu tempus
+            velit nunc. Turpis in in luctus et nulla purus nibh ut. Enim sed
+            fermentum purus molestie parturient morbi nunc aliquet. Aliquam sed
+            etiam turpis non lectus commodo cras leo gravida.
+          </Typography>
+        </Box>
+
+        <Box component={motion.div} variants={itemVariants} whileHover="hover">
+          <Button
+            variant="outlined"
+            endIcon={<ArrowOutwardIcon />}
+            sx={{
+              mt: 2,
+              borderColor: "#00FFD1",
+              color: "#00FFD1",
+              borderRadius: "30px",
+              fontWeight: 500,
+              px: 4,
+              py: 1.5,
+              fontFamily: "'Montserrat', sans-serif",
+              letterSpacing: "1px",
+              fontSize: "0.9rem",
+              transition: "all 0.3s ease",
+              "&:hover": {
+                backgroundColor: "#00FFD1",
+                color: "#000",
+                boxShadow: "0 5px 15px rgba(0, 255, 209, 0.4)",
+              },
+            }}
+          >
+            GET IN TOUCH
+          </Button>
+        </Box>
       </Box>
     </Box>
   );