diff --git a/package-lock.json b/package-lock.json
index 8fc7ac7..cba2e12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "react-dom": "^18.2.0",
         "react-floating-whatsapp": "^5.0.8",
         "react-icons": "^4.12.0",
+        "react-lazy-load-image-component": "^1.6.3",
         "react-router-dom": "^6.21.1",
         "react-vite-template": "file:",
         "react-whatsapp": "^0.3.0",
@@ -1231,6 +1232,18 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
+      "license": "MIT"
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -1417,6 +1430,19 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lazy-load-image-component": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.3.tgz",
+      "integrity": "sha512-kdQYUDbuISF3T9El0sBLNoWrmPohqlytcG4ognLtHYjY8bZAsJ0/Ez+VaV+0QlVyUY3K6dDXkuQAz3GpvdjBkw==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1"
+      },
+      "peerDependencies": {
+        "react": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x || ^19.x.x"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
diff --git a/package.json b/package.json
index 60814a5..dde5391 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "react-dom": "^18.2.0",
     "react-floating-whatsapp": "^5.0.8",
     "react-icons": "^4.12.0",
+    "react-lazy-load-image-component": "^1.6.3",
     "react-router-dom": "^6.21.1",
     "react-vite-template": "file:",
     "react-whatsapp": "^0.3.0",
diff --git a/src/components/gallery/index.jsx b/src/components/gallery/index.jsx
index 5e8b9f5..fcf005a 100644
--- a/src/components/gallery/index.jsx
+++ b/src/components/gallery/index.jsx
@@ -1,10 +1,13 @@
-import React from "react"
-import { Container } from './styles.js'
+import React from "react";
+import { Container } from './styles.js';
 
-const Gallery = ({ image, width, height }) => {
+const Gallery = ({ image, width, height, alt = '' }) => {
   return (
-    <Container photo={image} width={width} height={height}></Container>
-  )
-}
+    <Container width={width} height={height}>
+      <img src={image} alt={alt} loading="lazy" />
+    </Container>
+  );
+};
+
+export default Gallery;
 
-export default Gallery
diff --git a/src/components/gallery/styles.js b/src/components/gallery/styles.js
index eb29ee3..3344f5a 100644
--- a/src/components/gallery/styles.js
+++ b/src/components/gallery/styles.js
@@ -1,16 +1,19 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  background-image: url(${({ photo }) => photo});
-  background-repeat: no-repeat;
-  justify-content: space-around;
-  background-position: center;
-  background-size: cover;
-  background-color: ${({ theme }) => theme.colors.secondaryBackground};
-  flex-direction: row;
-  align-items: center;
-  display: flex;
-  height: ${({ height }) => height}; 
-  width: ${({ width }) => width};
+  width: ${({ width }) => width || '100%'};
+  height: ${({ height }) => height || 'auto'};
+  overflow: hidden;
+  border-radius: 5px;
 
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+    
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
 `;