diff --git a/css/style.css b/css/style.css
index ec66113..5ecdb45 100644
--- a/css/style.css
+++ b/css/style.css
@@ -134,8 +134,9 @@ img.screenshot {
     background: var(--rd-blue);
     border: white 2px solid;
     border-radius: 5px;
+    text-align: left;
     /* transition: 0.5s; */
-    width: 75%;
+    /* width: 75%; */
 }
 
 .feature-card h3 {
@@ -149,6 +150,28 @@ img.screenshot {
     font-family: var(--body-font);
 }
 
+img.d-pad {
+    opacity: 0%;
+    transition: 0.25s;
+}
+
+.carousel-button:hover img.d-pad {
+    opacity: 100%;
+    transition: 0.25s;
+}
+
+.carousel-indicators {
+    opacity: 0%;
+    pointer-events: none;
+    transition: 0.25s;
+}
+
+.carousel:hover .carousel-indicators {
+    opacity: 100%;
+    pointer-events: auto;
+    transition: 0.25s;
+}
+
 /* Link Styles */
 .jumbotron p a, footer a, a.btn {
     color: var(--rd-purple);
diff --git a/index.html b/index.html
index 1c708df..c803935 100644
--- a/index.html
+++ b/index.html
@@ -290,10 +290,17 @@
         <!-- 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-inner">
+                <div class="carousel-indicators">
+                    <button type="button" data-bs-target="#features-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+                    <button type="button" data-bs-target="#features-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
+                    <button type="button" data-bs-target="#features-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
+                    <button type="button" data-bs-target="#features-carousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
+                    <button type="button" data-bs-target="#features-carousel" data-bs-slide-to="4" aria-label="Slide 5"></button>
+                </div>
+                <div class="carousel-inner pb-md-5">
                     <div class="carousel-item active feature-container">
-                        <img src="assets/screens/large/screen01.png" class="d-block w-75 screenshot" alt="" />
-                        <div class="feature-card px-5 mt-2 mx-auto">
+                        <img src="assets/screens/large/screen01.png" class="d-block w-100 screenshot" alt="" />
+                        <div class="feature-card px-2 mt-2 mx-auto">
                             <h3>Feature 1</h3>
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
                                 sodales
@@ -302,8 +309,8 @@
                     </div>
 
                     <div class="carousel-item feature-container">
-                        <img src="assets/screens/large/screen02.png" class="d-block w-75 screenshot" alt="" />
-                        <div class="feature-card px-5 mt-2 mx-auto">
+                        <img src="assets/screens/large/screen02.png" class="d-block w-100 screenshot" alt="" />
+                        <div class="feature-card px-2 mt-2 mx-auto">
                             <h3>Feature 2</h3>
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
                                 sodales
@@ -312,8 +319,8 @@
                     </div>
 
                     <div class="carousel-item feature-container">
-                        <img src="assets/screens/large/screen03.png" class="d-block w-75 screenshot" alt="" />
-                        <div class="feature-card px-5 mt-2 mx-auto">
+                        <img src="assets/screens/large/screen03.png" class="d-block w-100 screenshot" alt="" />
+                        <div class="feature-card px-2 mt-2 mx-auto">
                             <h3>Feature 3</h3>
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
                                 sodales
@@ -322,8 +329,8 @@
                     </div>
 
                     <div class="carousel-item feature-container">
-                        <img src="assets/screens/large/screen04.png" class="d-block w-75 screenshot" alt="" />
-                        <div class="feature-card px-5 mt-2 mx-auto">
+                        <img src="assets/screens/large/screen04.png" class="d-block w-100 screenshot" alt="" />
+                        <div class="feature-card px-2 mt-2 mx-auto">
                             <h3>Feature 4</h3>
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
                                 sodales
@@ -332,8 +339,8 @@
                     </div>
 
                     <div class="carousel-item feature-container">
-                        <img src="assets/screens/large/screen05.png" class="d-block w-75 screenshot" alt="" />
-                        <div class="feature-card px-5 mt-2 mx-auto">
+                        <img src="assets/screens/large/screen05.png" class="d-block w-100 screenshot" alt="" />
+                        <div class="feature-card px-2 mt-2 mx-auto">
                             <h3>Feature 5</h3>
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
                                 sodales
@@ -341,15 +348,12 @@
                         </div>
                     </div>
                 </div>
-                <button class="carousel-control-prev" type="button" data-bs-target="#features-carousel" data-bs-slide="prev" id="carousel-prev">
-                    <!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span> -->
+                
+                <button class="carousel-control-prev carousel-button" type="button" data-bs-target="#features-carousel" data-bs-slide="prev" id="carousel-prev">
                     <img class="d-pad d-none d-md-block" src="assets/pixel-icons/steamdeck_dpad_left_outline.svg" aria-hidden="true"/>
-                    <span class="visually-hidden">Previous</span>
                 </button>
-                <button class="carousel-control-next" type="button" data-bs-target="#features-carousel" data-bs-slide="next" id="carousel-next">
-                    <!-- <span class="carousel-control-next-icon" aria-hidden="true"></span> -->
+                <button class="carousel-control-next carousel-button" type="button" data-bs-target="#features-carousel" data-bs-slide="next" id="carousel-next">
                     <img class="d-pad d-none d-md-block" src="assets/pixel-icons/steamdeck_dpad_right_outline.svg" aria-hidden="true"/>
-                    <span class="visually-hidden">Next</span>
                 </button>
             </div>
         </div>