diff --git a/app/(private)/layout.tsx b/app/(private)/layout.tsx
index 783808a..289489c 100644
--- a/app/(private)/layout.tsx
+++ b/app/(private)/layout.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import Logout from "../Components/auth/Logout/Logout";
+import BackgroundRotator from "../Components/layout/BackgroundRotator.tsx/BackgroundRotator";
 export default async function PrivateLayout({
   children,
 }: {
@@ -9,7 +10,7 @@ export default async function PrivateLayout({
     <div className="mainContainer">
       <div className="container">
         <Logout />
-        <div className="img"></div>
+        <BackgroundRotator/>
         {children}
       </div>
     </div>
diff --git a/app/Components/layout/BackgroundRotator.tsx/Background.css b/app/Components/layout/BackgroundRotator.tsx/Background.css
new file mode 100644
index 0000000..9051a87
--- /dev/null
+++ b/app/Components/layout/BackgroundRotator.tsx/Background.css
@@ -0,0 +1,68 @@
+.backgroundContainer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 725px;
+    height: 615px;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.bgImage {
+    position: absolute;
+    inset: 0;
+    background-size: cover;
+    background-position: center;
+    transition: opacity 2s ease-in-out;
+    opacity: 1;
+    z-index: 1;
+}
+
+.bgImage.fade {
+    z-index: 0;
+    opacity: 0;
+}
+
+.bgImage.fade.active {
+    opacity: 1;
+    z-index: 1;
+}
+
+.bgImage::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
+}
+
+@media (max-width: 800px) {
+
+    .backgroundContainer {
+        background-image: url("/rock.jpg");
+        background-size: cover;
+        background-position: center;
+        width: 600px;
+        height: 650px;
+        right: 50%;
+        transform: translateX(50%);
+    }
+
+    .bgImage {
+        display: none;
+        visibility: hidden;
+    }
+
+    .backgroundContainer::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
+    }
+
+    .backgroundContainer::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(to left, #f9f9f9, rgba(128, 128, 128, 0));
+    }
+}
\ No newline at end of file
diff --git a/app/Components/layout/BackgroundRotator.tsx/BackgroundRotator.tsx b/app/Components/layout/BackgroundRotator.tsx/BackgroundRotator.tsx
new file mode 100644
index 0000000..be64702
--- /dev/null
+++ b/app/Components/layout/BackgroundRotator.tsx/BackgroundRotator.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import "./Background.css";
+
+const images = [
+  "/rock2.jpg",
+  "/CEDETEC.jpg",
+  "/FES-ACATLAN.jpg",
+  "/DSC.jpeg",
+];
+
+export default function BackgroundRotator() {
+  const [current, setCurrent] = useState(0);
+  const [next, setNext] = useState(1);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIsTransitioning(true);
+
+      setTimeout(() => {
+        setCurrent(next);
+        setNext((next + 1) % images.length);
+        setIsTransitioning(false);
+      }, 2000);
+    }, 20000);
+
+    return () => clearInterval(interval);
+  }, [next]);
+
+  return (
+    <div className="backgroundContainer">
+      <div
+        className="bgImage"
+        style={{ backgroundImage: `url(${images[current]})` }}
+      />
+
+      <div
+        className={`bgImage fade ${isTransitioning ? "active" : ""}`}
+        style={{ backgroundImage: `url(${images[next]})` }}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index f471b73..3896e47 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -105,28 +105,6 @@ footer p {
   gap: 1rem;
 }
 
-.img {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 725px;
-  height: 615px;
-  background-image: url("/rock2.jpg");
-  background-size: cover;
-  background-position: center;
-  overflow: hidden;
-  z-index: -1;
-  opacity: 1;
-}
-
-.img::after {
-  display: flex;
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
-}
-
 input,
 select {
   flex: 1;
@@ -631,35 +609,6 @@ table td:last-child {
     border-radius: 0;
   }
 
-  .img {
-    background-image: url("/rock.jpg");
-    right: 50%;
-    transform: translateX(50%);
-    width: 600px;
-    opacity: 1;
-    height: 650px;
-  }
-
-  .img::before,
-  .img::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    z-index: 1;
-  }
-
-  .img::before {
-    left: 0;
-    background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
-  }
-
-  .img::after {
-    right: 0;
-    background: linear-gradient(to left, #f9f9f9, rgba(128, 128, 128, 0));
-  }
-
   .containerSection {
     align-items: start;
     scrollbar-width: none;
diff --git a/app/page.tsx b/app/page.tsx
index 0070e55..a70edd3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,5 @@
 import Login from "./Components/auth/Login/Login";
+import BackgroundRotator from "./Components/layout/BackgroundRotator.tsx/BackgroundRotator";
 import { LoginRedirect } from "./Routes/LoginRedirect";
 
 export default function Home() {
@@ -6,7 +7,7 @@ export default function Home() {
     <div className="loginContainer">
       <LoginRedirect>
         <div className="container">
-          <div className="img"></div>
+          <BackgroundRotator/>
           <Login />
         </div>
       </LoginRedirect>
diff --git a/public/CEDETEC.jpg b/public/CEDETEC.jpg
new file mode 100644
index 0000000..74cdcf8
Binary files /dev/null and b/public/CEDETEC.jpg differ
diff --git a/public/CIDWA.jpeg b/public/CIDWA.jpeg
new file mode 100644
index 0000000..cfa8703
Binary files /dev/null and b/public/CIDWA.jpeg differ
diff --git a/public/DSC.jpeg b/public/DSC.jpeg
new file mode 100644
index 0000000..40b307e
Binary files /dev/null and b/public/DSC.jpeg differ
diff --git a/public/FES-ACATLAN.jpg b/public/FES-ACATLAN.jpg
new file mode 100644
index 0000000..64dbe66
Binary files /dev/null and b/public/FES-ACATLAN.jpg differ