diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index fa96d34..bd44dd2 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -1,11 +1,9 @@
 import React, { useRef } from "react";
 import { Box, Grid, Typography } from "@mui/material";
 import logo from "../loopslogo2.png";
-import backone from "../components/imageandgif/backgroundone.png";
-import backthree from "../components/imageandgif/backgroundthree.png";
-import backfour from "../components/imageandgif/backgroundfour.png";
-import backfive from "../components/imageandgif/backgroundfive.png";
-import backsix from "../components/imageandgif/backgroundsix.png";
+import backone from "../components/imageandgif/newbgone.png";
+import backtwo from "../components/imageandgif/newnewtwo.png";
+import backthree from "../components/imageandgif/newthree.png";
 import gifone from "../components/imageandgif/gifone.gif"
 import giftwo from "../components/imageandgif/giftwo.gif"
 import gifthree from "../components/imageandgif/gifthree.gif"
@@ -52,6 +50,7 @@ const HomePage: React.FC = () => {
                         backgroundSize: "contain",
                         backgroundPosition: "right center",
                         backgroundRepeat: "no-repeat",
+                        marginBottom: "399px",
                     }}
                 >
                     <Box
@@ -93,24 +92,25 @@ const HomePage: React.FC = () => {
                 <Grid
                     item
                     xs={12}
-
                     sx={{
-                        height: "400px",
+
+                        height: "965px",
                         backgroundColor: "white",
                         position: "relative",
                         backgroundImage: `url(${backone})`,
                         backgroundSize: "contain",
-                        backgroundPosition: "center",
+                        backgroundPositionX: "50.5%",
+                        backgroundPositionY: "60%",
                         backgroundRepeat: "no-repeat",
                     }}>
                     <Box
                         ref={mineRef} // Attach ref here
                         sx={{
                             position: "absolute",
-                            top: "80%",
-                            right: "3%",
+                            top: "4%",
+                            left: "10%",
                             transform: "translateY(-50%)",
-                            height: "400px",
+                            height: "200px",
                             width: "630px",
                             backgroundColor: "white",
                             zIndex: 1,
@@ -128,32 +128,15 @@ const HomePage: React.FC = () => {
                             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto quis inventore expedita neque, dolorum ea consectetur repudiandae iste. Aliquid, aspernatur in!</p>
                         </Box>
                     </Box>
-                </Grid>
-
-                {/* Grid 3 */}
-                <Grid
-                    item
-                    xs={12}
-
-                    sx={{
-                        height: "400px",
-                        backgroundColor: "white",
-                        position: "relative",
-                        backgroundImage: `url(${backone})`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "50.5% 50%",
-                        backgroundRepeat: "no-repeat",
-
-                    }}>
                     <Box
                         ref={manufactureRef} // Attach ref here
                         sx={{
                             position: "absolute",
-                            top: "73%",
-                            left: "2%",
+                            top: "38%",
+                            right: "4%",
                             transform: "translateY(-50%)",
-                            height: "400px",
-                            width: "630px",
+                            height: "215px",
+                            width: "560px",
                             backgroundColor: "white",
                             zIndex: 1,
                             display: "flex",
@@ -170,29 +153,12 @@ const HomePage: React.FC = () => {
                             <img src={giftwo} alt="Gif" style={{ width: "100%", height: "auto" }} />
                         </Box>
                     </Box>
-                </Grid>
-
-                {/* Grid 4 */}
-                <Grid
-                    item
-                    xs={12}
-
-                    sx={{
-                        height: "308px",
-                        backgroundColor: "white",
-                        position: "relative",
-                        backgroundImage: `url(${backthree})`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "61.2% 50%",
-                        backgroundRepeat: "no-repeat",
-
-                    }}>
                     <Box
                         ref={assembleRef}
                         sx={{
                             position: "absolute",
-                            top: "-12%",
-                            right: "5%",
+                            top: "75%",
+                            left: "5%",
                             transform: "translateY(-50%)",
                             height: "167px",
                             width: "534px",
@@ -212,19 +178,22 @@ const HomePage: React.FC = () => {
                             <img src={gifthree} alt="Gif" style={{ width: "100%", height: "auto" }} />
                         </Box>
                     </Box>
+
                 </Grid>
 
-                {/* Grid 5 */}
+                {/* Grid 3 */}
                 <Grid
                     item
                     xs={12}
+
                     sx={{
-                        height: "408px",
+                        height: "615px",
                         backgroundColor: "white",
                         position: "relative",
-                        backgroundImage: `url(${backfour})`,
+                        backgroundImage: `url(${backtwo})`,
                         backgroundSize: "contain",
-                        backgroundPosition: "58% 50%",
+                        backgroundPositionX: "41.5%",
+                        backgroundPositionY: "60%",
                         backgroundRepeat: "no-repeat",
 
                     }}>
@@ -232,8 +201,8 @@ const HomePage: React.FC = () => {
                         ref={useRefBox}
                         sx={{
                             position: "absolute",
-                            top: "10%",
-                            left: "8%",
+                            top: "17%",
+                            right: "25%",
                             transform: "translateY(-50%)",
                             height: "167px",
                             width: "523px",
@@ -253,19 +222,36 @@ const HomePage: React.FC = () => {
                             <img src={giffour} alt="Gif" style={{ width: "100%", height: "auto" }} />
                         </Box>
                     </Box>
+                </Grid>
+
+                {/* Grid 4 */}
+                <Grid
+                    item
+                    xs={12}
+
+                    sx={{
+                        height: "778px",
+                        backgroundColor: "white",
+                        position: "relative",
+                        backgroundImage: `url(${backthree})`,
+                        backgroundSize: "contain",
+                        backgroundPosition: "47.2% 50%",
+                        backgroundRepeat: "no-repeat",
+
+                    }}>
                     <Box
                         ref={reuseRef}
                         sx={{
                             position: "absolute",
-                            top: "60%",
-                            left: "7%",
+                            top: "7%",
+                            left: "17%",
                             transform: "translateY(-23%)",
                             height: "167px",
                             width: "388px",
                             backgroundColor: "white",
                             zIndex: 1,
                             display: "flex",
-                            flexDirection: 'column',
+                            flexDirection: 'row-reverse',
                             alignItems: "center",
                             padding: "10px",
                         }}
@@ -278,28 +264,13 @@ const HomePage: React.FC = () => {
                             <img src={gifsix} alt="Gif" style={{ width: "100%", height: "100%" }} />
                         </Box>
                     </Box>
-                </Grid>
 
-                {/* Grid 6 */}
-                <Grid
-                    item
-                    xs={12}
-
-                    sx={{
-                        height: "400px",
-                        position: "relative",
-                        backgroundImage: `url(${backfive})`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "63% 50%",
-                        backgroundRepeat: "no-repeat",
-
-                    }}>
                     <Box
                         ref={repairRef}
                         sx={{
                             position: "absolute",
-                            top: "12%",
-                            left: "39%",
+                            top: "20%",
+                            right: "13%",
                             transform: "translateY(-23%)",
                             height: "167px",
                             width: "390px",
@@ -319,12 +290,13 @@ const HomePage: React.FC = () => {
                             <img src={giffive} alt="Gif" style={{ width: "100%", height: "100%" }} />
                         </Box>
                     </Box>
+                    {/*  */}
                     <Box
-                     ref={disintegrateRef}
+                        ref={disintegrateRef}
                         sx={{
                             position: "absolute",
-                            top: "70%",
-                            left: "22%",
+                            top: "61%",
+                            left: "6%",
                             transform: "translateY(-23%)",
                             height: "167px",
                             width: "409px",
@@ -344,27 +316,13 @@ const HomePage: React.FC = () => {
                             <img src={gifseven} alt="Gif" style={{ width: "100%", height: "auto" }} />
                         </Box>
                     </Box>
-                </Grid>
-                {/* grid  */}
-                <Grid
-                    item
-                    xs={12}
-                    // Attach ref here
-                    sx={{
-                        height: "285px",
-                        position: "relative",
-                        backgroundImage: `url(${backsix})`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "56% 50%",
-                        backgroundRepeat: "no-repeat",
 
-                    }}>
                     <Box
-                    ref={remineRef} 
+                        ref={remineRef}
                         sx={{
                             position: "absolute",
-                            top: "44%",
-                            left: "56%",
+                            top: "65%",
+                            right: "8%",
                             transform: "translateY(-23%)",
                             height: "167px",
                             width: "309px",
@@ -393,17 +351,17 @@ const HomePage: React.FC = () => {
                     sx={{
                         height: "300px",
                         backgroundImage: `url(${loopgreen})`,
-                        
+
                         position: "relative",
                         backgroundSize: "contain",
                         backgroundPosition: "center",
                         backgroundRepeat: "no-repeat",
                     }}>
-                   
+
                 </Grid>
             </Grid>
-            <PartnerWork/>
-            <Footer/>
+            <PartnerWork />
+            <Footer />
         </Box>
     );
 };
diff --git a/src/components/imageandgif/backgroundnewone.png b/src/components/imageandgif/backgroundnewone.png
new file mode 100644
index 0000000..69c8ce8
Binary files /dev/null and b/src/components/imageandgif/backgroundnewone.png differ
diff --git a/src/components/imageandgif/backgroundnewtwo.png b/src/components/imageandgif/backgroundnewtwo.png
new file mode 100644
index 0000000..4902962
Binary files /dev/null and b/src/components/imageandgif/backgroundnewtwo.png differ
diff --git a/src/components/imageandgif/bgone.png b/src/components/imageandgif/bgone.png
new file mode 100644
index 0000000..a322caf
Binary files /dev/null and b/src/components/imageandgif/bgone.png differ
diff --git a/src/components/imageandgif/newbgone.png b/src/components/imageandgif/newbgone.png
new file mode 100644
index 0000000..8fbac77
Binary files /dev/null and b/src/components/imageandgif/newbgone.png differ
diff --git a/src/components/imageandgif/newbgtwo.png b/src/components/imageandgif/newbgtwo.png
new file mode 100644
index 0000000..0ffeb53
Binary files /dev/null and b/src/components/imageandgif/newbgtwo.png differ
diff --git a/src/components/imageandgif/newnewtwo.png b/src/components/imageandgif/newnewtwo.png
new file mode 100644
index 0000000..f795fad
Binary files /dev/null and b/src/components/imageandgif/newnewtwo.png differ
diff --git a/src/components/imageandgif/newthree.png b/src/components/imageandgif/newthree.png
new file mode 100644
index 0000000..44ed22e
Binary files /dev/null and b/src/components/imageandgif/newthree.png differ