diff --git a/package-lock.json b/package-lock.json
index f8a9778..db132f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,12 +10,15 @@
       "dependencies": {
         "next": "14.1.0",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-icons": "^5.0.1",
+        "react-image-gallery": "^1.3.0"
       },
       "devDependencies": {
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@types/react-image-gallery": "^1.2.4",
         "autoprefixer": "^10.0.1",
         "eslint": "^8",
         "eslint-config-next": "14.1.0",
@@ -487,6 +490,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-image-gallery": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/react-image-gallery/-/react-image-gallery-1.2.4.tgz",
+      "integrity": "sha512-H0xpmT5rlSH0qiTvcUDCPDLRBi3J3Xa4COqaDqGb7ffLFpQoPAxpZdNuKCuThhFI0xJmNnMubZiD6B3kCBHtcw==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
@@ -3731,6 +3743,22 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-image-gallery": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.3.0.tgz",
+      "integrity": "sha512-lKnPaOzxqSdujPFyl+CkVw0j1aYoNCHk61cvr1h7aahf5aWqmPcR9YhUB4cYrt5Tn5KHDaPUzYm5/+cX9WxzaA==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index d9a6c91..a7f49b7 100644
--- a/package.json
+++ b/package.json
@@ -9,19 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.0"
+    "react-icons": "^5.0.1",
+    "react-image-gallery": "^1.3.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-image-gallery": "^1.2.4",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.0"
+    "typescript": "^5"
   }
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ccbb590..e6db74e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,9 @@
-import Image from "next/image";
+import Banner from "@/components/Banner";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <h1>Landing</h1>
+    <main>
+      <Banner />
     </main>
   );
 }
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
new file mode 100644
index 0000000..6dc3d95
--- /dev/null
+++ b/src/components/Banner.tsx
@@ -0,0 +1,62 @@
+"use client";
+import { FC, useRef } from "react";
+import useMobile from "@/hooks/useMobile";
+
+import "react-image-gallery/styles/css/image-gallery.css";
+import ImageGallery from "react-image-gallery";
+
+import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs";
+
+const Banner: FC = () => {
+  const { isMobile } = useMobile();
+  const images = [
+    {
+      original: `/images/banner1${isMobile ? "m" : "d"}.webp`,
+    },
+    {
+      original: `/images/banner2${isMobile ? "m" : "d"}.webp`,
+    },
+  ];
+
+  const slideRef = useRef<ImageGallery>(null);
+
+  return (
+    <section className="max-w-f-hd mx-auto relative group">
+      <ImageGallery
+        ref={slideRef}
+        items={images}
+        showFullscreenButton={false}
+        showPlayButton={false}
+        slideInterval={4000}
+        autoPlay
+        renderLeftNav={(onClick, disabled) => (
+          <button
+            onClick={onClick}
+            disabled={disabled}
+            className="hover:text-primary-lm transition-all ease-linear duration-300 absolute top-[50%] translate-y-[-50%] bg-background-lm z-10 p-2 rounded-full invisible group-hover:visible left-2 opacity-80"
+          >
+            <BsChevronCompactLeft size={31} />
+          </button>
+        )}
+        renderRightNav={(onClick, disabled) => (
+          <button
+            onClick={onClick}
+            disabled={disabled}
+            className="hover:text-primary-lm transition-all ease-linear duration-300 absolute top-[50%] translate-y-[-50%] bg-background-lm z-10 p-2 rounded-full invisible group-hover:visible right-2 opacity-80"
+          >
+            <BsChevronCompactRight size={31} />
+          </button>
+        )}
+        onClick={() => {
+          if (slideRef.current?.getCurrentIndex() === 1) {
+            window.open(
+              "https://actualizatucarro.mercadoshops.com.co/",
+              "_blank"
+            );
+          }
+        }}
+      />
+    </section>
+  );
+};
+export default Banner;
diff --git a/src/hooks/useMobile.ts b/src/hooks/useMobile.ts
new file mode 100644
index 0000000..f9a12a1
--- /dev/null
+++ b/src/hooks/useMobile.ts
@@ -0,0 +1,14 @@
+import { useState, useEffect } from "react";
+
+const useMobile = () => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    setIsMobile(window.innerWidth <= 600);
+  }, []);
+
+  return {
+    isMobile,
+  };
+};
+export default useMobile;