diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 2e8fa6d..d054110 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Container, Grid, Typography, Link, IconButton, Divider } from "@mui/material";
-import { LocationOn, Email, Phone } from "@mui/icons-material";
+import { LocationOn, Email } from "@mui/icons-material";
 import InstagramIcon from "@mui/icons-material/Instagram";
 import TwitterIcon from "@mui/icons-material/Twitter";
 import FacebookIcon from "@mui/icons-material/Facebook";
@@ -17,7 +17,7 @@ const Footer: React.FC = () => {
               Loop Sustainability
             </Typography>
             <Typography variant="body2" sx={{ mt: 1, color: "gray" }}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+              Loop Sustainability helps businesses responsibly recycle used electronic items through advanced refining and disintegration processes. We ensure compliance, sustainability, and a circular economy approach to e-waste management.
             </Typography>
           </Grid>
 
@@ -26,22 +26,26 @@ const Footer: React.FC = () => {
             <Typography variant="h6" fontWeight="bold">
               Get in Touch
             </Typography>
-            <Box display="flex" alignItems="center" sx={{ mt: 1 }}>
-              <LocationOn color="primary" />
-              <Typography variant="body2" sx={{ ml: 1 }}>8819 Ohio St. South Gate, CA 90280</Typography>
+            <Box display="flex" alignItems="flex-start" sx={{ mt: 1 }}>
+              <LocationOn color="primary" sx={{ mt: 0.5 }} />
+              <Typography variant="body2" sx={{ ml: 1 }}>
+                Hyderabad Office: 3rd Floor, Plot No: 1303 and 1304, Ayyappa Society, Khanamet, Madhapur, Hyderabad 500081, Telangana, India.
+              </Typography>
+            </Box>
+            <Box display="flex" alignItems="flex-start" sx={{ mt: 1 }}>
+              <LocationOn color="primary" sx={{ mt: 0.5 }} />
+              <Typography variant="body2" sx={{ ml: 1 }}>
+                Chennai Office: Plot No 1, Kundrathur Main Road, Sri Guruvayurappan Nagar, Manancherry, Chengalpattu, Chennai 600069, Tamil Nadu, India.
+              </Typography>
             </Box>
             <Box display="flex" alignItems="center" sx={{ mt: 1 }}>
               <Email color="primary" />
-              <Typography variant="body2" sx={{ ml: 1 }}>Ourstudio@hello.com</Typography>
-            </Box>
-            <Box display="flex" alignItems="center" sx={{ mt: 1 }}>
-              <Phone color="primary" />
-              <Typography variant="body2" sx={{ ml: 1 }}>+1 386-688-3295</Typography>
+              <Typography variant="body2" sx={{ ml: 1 }}>reach@letsloop.in</Typography>
             </Box>
           </Grid>
 
           {/* Company Links */}
-          <Grid item xs={12} md={4}>
+          <Grid item xs={12} md={4} textAlign="right">
             <Typography variant="h6" fontWeight="bold">
               Company
             </Typography>
@@ -52,25 +56,25 @@ const Footer: React.FC = () => {
                 </Link>
               ))}
             </Box>
+
+            {/* Social Media Icons */}
+            <Box display="flex" justifyContent="flex-end" sx={{ mt: 2 }}>
+              <IconButton color="default">
+                <InstagramIcon />
+              </IconButton>
+              <IconButton color="default">
+                <TwitterIcon />
+              </IconButton>
+              <IconButton color="default">
+                <FacebookIcon />
+              </IconButton>
+              <IconButton color="default">
+                <YouTubeIcon />
+              </IconButton>
+            </Box>
           </Grid>
         </Grid>
 
-        {/* Social Media Icons */}
-        <Box display="flex" justifyContent="flex-end" sx={{ mt: 4 }}>
-          <IconButton color="default">
-            <InstagramIcon />
-          </IconButton>
-          <IconButton color="default">
-            <TwitterIcon />
-          </IconButton>
-          <IconButton color="default">
-            <FacebookIcon />
-          </IconButton>
-          <IconButton color="default">
-            <YouTubeIcon />
-          </IconButton>
-        </Box>
-
         {/* Footer Links */}
         <Divider sx={{ my: 4 }} />
         <Box textAlign="center">
diff --git a/src/components/header.tsx b/src/components/header.tsx
index bad4420..61a0db1 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -22,7 +22,7 @@ const Header: React.FC = () => {
         width: {
           xs: "91.6vw",
           sm: "95.5vw",
-          md: "91.6vw",
+          md: "96.5vw",
           lg: "96.8vw",
           xl: "96.4vw"
         },
diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index 9177f9b..16278ea 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -113,11 +113,11 @@ const HomePage: React.FC = () => {
                 {/* Grid 2 */}
                 <Box
                     sx={{
-                        height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 },
+                        height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 ,md:2695 },
                         width: '100%',
                         backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
                         backgroundSize: "contain",
-                        backgroundPosition: { lg: "center", xs: "50% 86%" },
+                        backgroundPosition: { lg: "center", xs: "50% 86%" , md: "50% 80%" },
                         backgroundRepeat: "no-repeat",
                         paddingBottom: { lg: 20, xs: 0 }
                     }}
@@ -131,7 +131,7 @@ const HomePage: React.FC = () => {
                         }}
                     >
                         {/* ROW 1 */}
-                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
+                        <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
                             <Box ref={mineRef} sx={{
                                 height: { xs: "70%", lg: "215px" },
                                 width: { xs: "80%", lg: "870px" },
@@ -153,11 +153,11 @@ const HomePage: React.FC = () => {
                                 </Box>
                             </Box>
                         </Grid>
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
+                        <Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md:'none', sm: 'block' } }}></Grid>
 
                         {/* ROW 2 */}
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
-                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px', }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' , md:'none' } }}></Grid>
+                        <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px', }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
                             <Box ref={manufactureRef} sx={{
                                 height: { xs: "472px", lg: "215px" },
                                 width: { xs: "80%", lg: "552px" },
@@ -182,7 +182,7 @@ const HomePage: React.FC = () => {
                         </Grid>
 
                         {/* ROW 3 */}
-                        <Grid item xs={12} lg={6} sx={{
+                        <Grid item xs={12} lg={6} md={6} sx={{
                             background: '#ffffff00', height: { xl: "500px", lg: '401px' },
                             display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
                         }}>
@@ -209,11 +209,11 @@ const HomePage: React.FC = () => {
 
                             </Box>
                         </Grid>
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block',md:'none' } }}></Grid>
 
                         {/* ROW 4 */}
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
-                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md:'none' } }}></Grid>
+                        <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
                             <Box ref={useRefBox} sx={{
                                 height: { xs: "451px", lg: "215px", sm: '555px' },
                                 width: { xs: "80%", lg: "550px" },
@@ -352,10 +352,10 @@ const HomePage: React.FC = () => {
                             </Box>
                         </Grid>
                         {/* mobile only */}
-                        <Grid container spacing={2} rowSpacing={12} sx={{ display: { xs: "flex", md: "none" } }}>
+                        <Grid container spacing={2} rowSpacing={{ xs: 12, sm: 14, md: 34 }} sx={{ display: { xs: "flex", md: "flex" , lg:'none' } }}>
                             {/* Reuse */}
                             <Grid item xs={6}>
-                                <Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
+                                <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
                                     <Box sx={{ background: "#95CD41", p: 1 }}>
                                         <Typography variant="h4">Reuse</Typography>
                                         <Typography variant="body2">
@@ -370,7 +370,7 @@ const HomePage: React.FC = () => {
 
                             {/* Repair */}
                             <Grid item xs={6}>
-                                <Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
+                                <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
                                     <Box sx={{ background: "#95CD41", p: 1 }}>
                                         <Typography variant="h4">Repair</Typography>
                                         <Typography variant="body2">
@@ -387,7 +387,7 @@ const HomePage: React.FC = () => {
 
                             {/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
                             <Grid item xs={6} sx={{ mt: 2 }}>
-                                <Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
+                                <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
                                     <Box sx={{ width: "100%" }}>
                                         <img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
                                     </Box>
@@ -401,11 +401,11 @@ const HomePage: React.FC = () => {
 
                             {/* Remine */}
                             <Grid item xs={6} sx={{ mt: 2 } }>
-                                <Box sx={{ p: 2, textAlign: "center", borderRadius: 2 }}>
+                                <Box sx={{ p: 2,textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
                                     <Box sx={{ width: "100%" }}>
                                         <img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1 ,textAlign:'left'  }}>
+                                    <Box sx={{ background: "#95CD41", p: 1, textAlign:{xs: "left" , md:'center'}, }}>
                                     <Typography variant="h4" sx={{fontSize:'1.6rem'}}>Remine</Typography>
                                     <Typography variant="body2" >We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources .closing the loop on electronic waste.</Typography>
                                     </Box>
diff --git a/src/components/imageandgif/KartikReddy.png b/src/components/imageandgif/KartikReddy.png
new file mode 100644
index 0000000..eb73a9c
Binary files /dev/null and b/src/components/imageandgif/KartikReddy.png differ
diff --git a/src/components/imageandgif/MukeshLamba.png b/src/components/imageandgif/MukeshLamba.png
new file mode 100644
index 0000000..d4e59e3
Binary files /dev/null and b/src/components/imageandgif/MukeshLamba.png differ
diff --git a/src/components/imageandgif/Palani.png b/src/components/imageandgif/Palani.png
new file mode 100644
index 0000000..e5f1587
Binary files /dev/null and b/src/components/imageandgif/Palani.png differ
diff --git a/src/components/imageandgif/RamaKrishnan.png b/src/components/imageandgif/RamaKrishnan.png
new file mode 100644
index 0000000..780a85f
Binary files /dev/null and b/src/components/imageandgif/RamaKrishnan.png differ
diff --git a/src/components/imageandgif/RamanaReddy.png b/src/components/imageandgif/RamanaReddy.png
new file mode 100644
index 0000000..752cdb5
Binary files /dev/null and b/src/components/imageandgif/RamanaReddy.png differ
diff --git a/src/components/imageandgif/Suresh.png b/src/components/imageandgif/Suresh.png
new file mode 100644
index 0000000..7143adb
Binary files /dev/null and b/src/components/imageandgif/Suresh.png differ
diff --git a/src/components/ourteam.tsx b/src/components/ourteam.tsx
index 6cc9a9c..5789daf 100644
--- a/src/components/ourteam.tsx
+++ b/src/components/ourteam.tsx
@@ -14,7 +14,12 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 
 import robert from "../components/imageandgif/robert.png";
-
+import RamanaReddy from "../components/imageandgif/RamanaReddy.png";
+import MukeshLamba from "../components/imageandgif/MukeshLamba.png";
+import RamaKrishnan from "../components/imageandgif/RamaKrishnan.png";
+import KartikReddy from "../components/imageandgif/KartikReddy.png";
+import Suresh from "../components/imageandgif/Suresh.png";
+import Palani from "../components/imageandgif/Palani.png";
 interface TeamMember {
     name: string;
     role: string;
@@ -22,12 +27,12 @@ interface TeamMember {
 }
 
 const teamMembers: TeamMember[] = [
-    { name: "John Doe", role: "Software Engineer", image: robert },
-    { name: "Jane Smith", role: "UI/UX Designer", image: robert },
-    { name: "Alice Johnson", role: "Project Manager", image: robert },
-    { name: "Robert Brown", role: "Marketing Lead", image: robert },
-    { name: "Emma Wilson", role: "Backend Developer", image: robert },
-    { name: "Michael Davis", role: "Data Analyst", image: robert },
+    { name: "Ramana Reddy", role: "Software Engineer", image: RamanaReddy },
+    { name: "Mukesh Lamba", role: "UI/UX Designer", image: MukeshLamba },
+    { name: "Rama Krishnan", role: "Project Manager", image: RamaKrishnan },
+    { name: "Kartik Reddy", role: "Marketing Lead", image: KartikReddy },
+    { name: "Suresh", role: "Backend Developer", image: Suresh },
+    { name: "Palani", role: "Data Analyst", image: Palani },
 ];
 
 const OurTeam: React.FC = () => {
@@ -51,17 +56,18 @@ const OurTeam: React.FC = () => {
                 display="flex"
                 alignItems="center"
                 gap={1}
-                sx={{ cursor: "pointer" }}
+                sx={{ cursor: "pointer", marginBottom: 10 }}
                 onClick={() => setShowTeam(!showTeam)}
             >
-                <Typography variant="h5" sx={{ fontWeight: "bold" }}>
+                <Typography variant="h4" sx={{ fontWeight: "bold" }}>
                     Our Team
                 </Typography>
+
                 <IconButton sx={{ color: "black" }}>
                     {showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />}
                 </IconButton>
             </Box>
-
+            <Typography variant="body2">For over a decade, our team members have been actively involved in institutional reuse and recycling across various organizations and projects in India. We take pride in our leadership, strong industry relationships, regulatory expertise, process efficiency, and technical proficiency.</Typography>
             {/* Expanding Team Section */}
             <motion.div
                 initial={{ opacity: 0, height: 0 }}
@@ -69,21 +75,71 @@ const OurTeam: React.FC = () => {
                 transition={{ duration: 0.5, ease: "easeInOut" }}
                 style={{ overflow: "hidden", width: "100%" }}
             >
-                <Grid container spacing={2} justifyContent="center" sx={{ marginTop: "20px" }}>
+                <Grid
+                    container
+                    columnSpacing={1} 
+                    rowSpacing={3}     
+                    justifyContent="center"
+                    sx={{ marginTop: "20px" }}
+                >
                     {teamMembers.map((member, index) => (
                         <Grid item xs={12} sm={6} md={4} key={index}>
                             <Card
                                 sx={{
                                     boxShadow: "0 4px 10px rgba(0,0,0,0.15)",
-                                    borderRadius: "12px",
+                                    borderRadius: "8px",
                                     textAlign: "center",
                                     transition: "transform 0.3s",
                                     "&:hover": { transform: "translateY(-5px)" },
                                     backgroundColor: "white",
-                                    maxWidth: "230px",
+                                    maxWidth: "200px",
                                     margin: "0 auto",
+                                    position: "relative",
+                                    "&::before, &::after": {
+                                        content: '""',
+                                        position: "absolute",
+                                        width: "10px",
+                                        height: "10px",
+                                        border: "2px solid black",
+                                    },
+                                    "&::before": {
+                                        top: 0,
+                                        left: 0,
+                                        borderRight: "none",
+                                        borderBottom: "none",
+                                    },
+                                    "&::after": {
+                                        top: 0,
+                                        right: 0,
+                                        borderLeft: "none",
+                                        borderBottom: "none",
+                                    },
+                                    "& .bottom-left": {
+                                        content: '""',
+                                        position: "absolute",
+                                        bottom: 0,
+                                        left: 0,
+                                        width: "10px",
+                                        height: "10px",
+                                        border: "2px solid black",
+                                        borderTop: "none",
+                                        borderRight: "none",
+                                    },
+                                    "& .bottom-right": {
+                                        content: '""',
+                                        position: "absolute",
+                                        bottom: 0,
+                                        right: 0,
+                                        width: "10px",
+                                        height: "10px",
+                                        border: "2px solid black",
+                                        borderTop: "none",
+                                        borderLeft: "none",
+                                    },
                                 }}
                             >
+                                <Box className="bottom-left" />
+                                <Box className="bottom-right" />
                                 <CardContent sx={{ paddingBottom: 1 }}>
                                     <Typography variant="h6" sx={{ fontSize: "1rem", fontWeight: "bold" }}>
                                         {member.name}
@@ -92,10 +148,6 @@ const OurTeam: React.FC = () => {
                                         {member.role}
                                     </Typography>
                                 </CardContent>
-
-                                {/* Divider */}
-                                <Divider sx={{ width: "80%", margin: "0 auto 10px auto" }} />
-
                                 <CardMedia
                                     component="img"
                                     height="140"
@@ -109,6 +161,7 @@ const OurTeam: React.FC = () => {
                                     }}
                                 />
                             </Card>
+
                         </Grid>
                     ))}
                 </Grid>