diff --git a/css/carousel.css b/css/carousel.css
new file mode 100644
index 0000000..6e38de6
--- /dev/null
+++ b/css/carousel.css
@@ -0,0 +1,53 @@
+.stack {
+  position: relative;
+  display: flex;
+  padding-right: 30px;
+}
+
+#features .row:nth-child(odd) .stack {
+  padding-right: 30px;
+}
+
+.screenshot {
+  position: relative;
+  /* animation: lower 100ms forwards; */
+}
+
+.screenshot:nth-child(3) {
+  z-index: 4;
+  left: -200%;
+}
+
+.screenshot:nth-child(2) {
+  z-index: 3;
+  left: calc(-100% + 10px);
+  bottom: 10px;
+}
+.screenshot:nth-child(1) {
+  z-index: 2;
+  left: 20px;
+  bottom: 20px;
+}
+
+@keyframes lower {
+  from {
+    animation-timing-function: ease-in-out;
+  }
+  to {
+    transform: translate(-10px, 10px);
+  }
+}
+
+@keyframes swap {
+  50% {
+    z-index: 3;
+  }
+  67% {
+    transform: translate(35px, -125%) rotate(2.5deg);
+    z-index: 1;
+  }
+  100% {
+    transform: translate(30px, -30px) rotate(0deg);
+    z-index: 0;
+  }
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 78a5941..a5b5c6c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -86,7 +86,7 @@ footer {
     color: white;
 }
 
-.jumbotron p {
+p {
     font-family: var(--body-font);
     font-size: larger;
 }
@@ -99,49 +99,57 @@ footer {
     transition: 0.25s;
 }
 
-img.screenshot {
-    border: white 2px solid;
-    border-radius: 5px;
-    margin: auto;
-}
-
 .feature-card {
     background: var(--rd-blue);
     border: white 2px solid;
-    border-radius: 5px;
     text-align: left;
+    width: 100%;
+}
+
+.screenshot, .feature-card {
+    border-radius: 5px;
 }
 
 .feature-card h3 {
     color: white;
     font-family: var(--pixel-font);
-    text-shadow: 2px 2px var(--rd-purple);
 }
 
 .feature-card p {
     font-family: var(--body-font);
 }
 
-img.d-pad {
-    opacity: 0%;
-    transition: 0.25s;
+/* Alternating Color Styles */
+
+#features .row {
+    padding-top: 20px;
 }
 
-.carousel-button:hover img.d-pad {
-    opacity: 100%;
-    transition: 0.25s;
+#features .row:nth-child(odd) .screenshot {
+    border: var(--rd-blue) 2px solid;
 }
 
-.carousel-indicators {
-    opacity: 0%;
-    pointer-events: none;
-    transition: 0.25s;
+#features .row:nth-child(odd) .feature-card {
+    border: white 2px solid;
+    background: var(--rd-blue);
 }
 
-.carousel:hover .carousel-indicators {
-    opacity: 100%;
-    pointer-events: auto;
-    transition: 0.25s;
+#features .row:nth-child(odd) h3 {
+    text-shadow: 2px 2px var(--rd-purple);
+    padding-right: 20px;
+}
+
+#features .row:nth-child(even) .screenshot {
+    border: var(--rd-purple) 2px solid;
+}
+
+#features .row:nth-child(even) .feature-card {
+    border: white 2px solid;
+    background: var(--rd-purple);
+}
+
+#features .row:nth-child(even) h3 {
+    text-shadow: 2px 2px var(--rd-blue);
 }
 
 /* Link Styles */
diff --git a/index.html b/index.html
index 1199b73..79fdc42 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/carousel.css">
     <link rel="stylesheet" href="css/style.css">
 </head>
 
@@ -230,8 +231,63 @@
         </div>
         <!-- End Jumbotron -->
 
-        <!-- Screenshots and Features as Bootstrap Carousel -->
         <div class="container-fluid mb-4" id="features">
+            <div class="row align-items-center mt-3 mb-3">
+                <div class="col-12 col-lg-8 stack">
+                    <!-- <div class="stack"> -->
+                    <img src="assets/screens/screen01.png" class="img-fluid screenshot"
+                        alt="The RetroDECK and ES-DE logos on a black screen" />
+                    <img src="assets/screens/screen02.png" class="img-fluid screenshot"
+                        alt="The RetroDECK and ES-DE logos on a black screen" />
+                    <img src="assets/screens/screen03.png" class="img-fluid screenshot"
+                        alt="The RetroDECK and ES-DE logos on a black screen" />
+                    <!-- </div> -->
+                </div>
+                <div class="col-12 col-lg-4">
+                    <div class="feature-card p-2 mt-2 mt-lg-0">
+                        <h3>Designed for Gaming Mode</h3>
+                        <p>RetroDECK fits right in with the other games in your Steam library.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row align-items-center mb-3">
+
+                <div class="col-12 col-lg-8 order-lg-2 stack">
+                    <img src="assets/screens/screen01.png" class="img-fluid screenshot"
+                        alt="The RetroDECK and ES-DE logos on a black screen" />
+                    <img src="assets/screens/screen02.png" class="img-fluid screenshot"
+                        alt="The RetroDECK and ES-DE logos on a black screen" />
+                    <img src="assets/screens/screen03.png" class="img-fluid screenshot"
+                        alt="The RetroDECK and ES-DE logos on a black screen" />
+                </div>
+
+                <div class="col-12 col-lg-4 order-lg-1">
+                    <div class="feature-card p-2 mt-2 mt-lg-0">
+                        <h3>Designed for Gaming Mode</h3>
+                        <p>RetroDECK fits right in with the other games in your Steam library.</p>
+                    </div>
+                </div>
+
+            </div>
+
+            <!-- <div class="row align-items-center d-flex mb-4">
+                <div class="col-12 col-lg-8">
+                    <img src="assets/screens/screen01.png" class="img-fluid screenshot"
+                        alt="The RetroDECK and ES-DE logos on a black screen" />
+                </div>
+                <div class="col-12 col-lg-4">
+                    <div class="feature-card p-2 mt-2 mt-lg-0">
+                        <h3>Designed for Gaming Mode</h3>
+                        <p>RetroDECK fits right in with the other games in your Steam library.</p>
+                    </div>
+                </div>
+            </div> -->
+
+        </div>
+
+        <!-- Screenshots and Features as Bootstrap Carousel -->
+        <!-- <div class="container-fluid mb-4" id="features">
             <div class="carousel slide py-2" id="features-carousel">
                 <div class="carousel-indicators">
                     <button type="button" data-bs-target="#features-carousel" data-bs-slide-to="0" class="active"
@@ -313,7 +369,7 @@
                         aria-hidden="true" />
                 </button>
             </div>
-        </div>
+        </div> -->
         <!-- Screenshots and Features as Bootstrap Carousel -->
 
         <!-- Donate Appeal -->
@@ -386,6 +442,7 @@
     <!-- <script src="scripts/gradient.js"></script> -->
     <script src="scripts/features.js"></script>
     <script src="scripts/accessibility.js"></script>
+    <script src="scripts/carousel.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/scripts/carousel.js b/scripts/carousel.js
new file mode 100644
index 0000000..f04cbaa
--- /dev/null
+++ b/scripts/carousel.js
@@ -0,0 +1,21 @@
+let timing = 2000;
+
+// let stack = document.querySelector(".stack");
+let stacks = document.getElementsByClassName('stack');
+
+// [...stack.children].reverse().forEach(i => stack.append(i));
+for (let i = 0; i < stacks.length; i++) {
+    [...stacks[i].children].reverse().forEach(j => stacks[i].append(j));
+    stacks[i].addEventListener("click", swap);
+}
+
+function swap(e) {
+    let thisTarget = e.target
+    if (!thisTarget.classList.contains('screenshot')) return;
+    thisTarget.style.animation = `swap ${timing}ms ease-in-out forwards`;
+
+    setTimeout(() => {
+        thisTarget.style.animation = "";
+        this.prepend(thisTarget);
+    }, timing);
+}
\ No newline at end of file