diff --git a/public/images/arrow_left_alt.png b/public/images/arrow_left_alt.png
new file mode 100644
index 00000000..f4ff0e3c
Binary files /dev/null and b/public/images/arrow_left_alt.png differ
diff --git a/public/images/arrow_right_alt.png b/public/images/arrow_right_alt.png
new file mode 100644
index 00000000..e442cf23
Binary files /dev/null and b/public/images/arrow_right_alt.png differ
diff --git a/src/Carousel/Carousel.css b/src/Carousel/Carousel.css
index a73df19c..dbcbe9ac 100644
--- a/src/Carousel/Carousel.css
+++ b/src/Carousel/Carousel.css
@@ -5,44 +5,63 @@ body {
 }
 
 .Carousel {
-    height: 90vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    margin: 50px auto;
-    position: relative; /* Relative positioning for the button container */
-    width: 80vw; /* Set a fixed width for the carousel */
-    /* height: 80vh; Set a fixed height for the carousel */
-    overflow: hidden; /* Hide overflow to keep images within the container */ 
+    margin: auto auto auto auto;
+    width: fit-content;
+    height: fit-content;
+    
     border-radius: 5%;
     background-size: cover;
     background-size: no-repeat;
-
 }
 
 .Carousel img {
-    width: 50vh; /* Ensure the image covers the container's width */
+    width: calc(15vw + 15vh); /* Ensure the image covers the container's width */
     object-fit: cover;
     object-position: 55% 50%;
     justify-content: center;
     align-items: center;
+    transition: 0.5s ease;
 }
 
 .left-button button, .right-button button {
-    background-color: #4a5568;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    padding: 8px 16px;
+    /* base button layout */
+    background-color: transparent;
+    width: 5vh;
+    height: 5vh;
+    border-radius: 50%;
+
+    /* centering image in button */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* ring animation */
+    border: 0.2rem solid transparent;
+    padding: 0.2rem;
+    background-clip: content-box;
+
+    transition: 
+        transform 0.5s ease, 
+        border 0.5s ease, 
+        background-color 0.2s ease;
+}
+
+.left-button button:hover, .right-button button:hover {
+    border: 0.2rem solid purple;
+    transform: scale(1.3);
+}
+
+.left-button button:active, .right-button button:active {
+    background-color: purple;
 }
 
 .left-button img, .right-button img {
-    width: 30px; /* Adjust the width as needed */
+    width: auto; /* Adjust the width as needed */
     height: auto; /* Maintains the aspect ratio */
-    display: block; /* Ensures the image doesn't have extra space around it */
-    margin-top: 30px;
 }
 
 .button-container {
@@ -50,14 +69,49 @@ body {
     justify-content: bottom;
     align-items: bottom;
     position: absolute;
-    width: 180%;
+    overflow: hidden;
+    width: 100%;
+    height: fit-content;
     padding: 20px 0;
     box-sizing: border-box;
 }
 
 /* Custom spacing between buttons using margin */
-.left-button, .right-button{
-    margin-right: auto; /* Pushes the button to the left */
-    margin-left: auto; /* Pushes the button to the left */
+.left-button{
+    position: relative;
+    left: 2%; /* the left button should have a 2% margin from the border of the box */
+}
+
+/* Custom spacing between buttons using margin */
+.right-button{
+    position: relative;
+    left: calc(98% - 10vh); /*the right button also needs a 2% border from the box, but life isn't easy. this is the formula for it: 100% - [margin_width] - 2*[button_size] */
+}
+
+.nav-button {
+    /* base nav button layout */
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    margin: 0 0.25rem 0 0.25rem;
+
+    /* ring animation */
+    border: 0.2rem solid transparent;
+    padding: 0.2rem;
+    background-clip: content-box;
+    
+    transition: 
+        transform 0.5s ease, 
+        border 0.5s ease, 
+        background-color 0.5s ease;
 }
 
+.nav-button:hover{
+    border: 0.2rem solid purple;
+    transform: scale(1.3);
+}
+
+.nav-buttons-container{
+    position: absolute;
+    bottom: 1vh;
+}
\ No newline at end of file
diff --git a/src/Carousel/Carousel.js b/src/Carousel/Carousel.js
index 609298b6..2c4c5ef8 100644
--- a/src/Carousel/Carousel.js
+++ b/src/Carousel/Carousel.js
@@ -10,6 +10,12 @@ export const images = [
     "images/LGTM.png",
 ];
 
+// Preload the images to reduce the chance of oddities occuring on the carousel
+for (const image of images) {
+    const imageElement = new Image();
+    imageElement.src = image;
+  }
+
 export const name = [
      "C++",
      "Java",
@@ -28,35 +34,61 @@ export const text = [
     "Looks Good To Merge, Let's Get The Money, Let's Guzzle That Milk",
 ]   
 
-export const Carousel = ({ imageIndex }) => {
+export const Carousel = ({ imageIndex, fade }) => {
     return (
         <div className="Carousel">
-                <div className="heading-text" style={{fontSize: "4vh", marginTop: "3vh", marginBottom: "2vh", fontFamily: "cursive"}}>{name[imageIndex]}</div>
-                <img class="h-auto" src={images[imageIndex]} alt={`Displaying ${images[imageIndex]}`} />
-                <div className="description-text" style={{fontSize: "3vh", marginTop: "3vh"}}>{text[imageIndex]}</div>
+                <div className="heading-text" style={{
+                    fontSize: "calc(4vw + 2vh)",
+                    marginTop: "3vh", 
+                    marginBottom: "2vh",
+                    fontFamily: "cursive",
+                    opacity: fade ? 0 : 1, 
+                    transition: 'opacity 0.5s ease-in-out',
+                    }}>{name[imageIndex]}</div>
+
+                <img class="h-auto" src={images[imageIndex]} alt={`Displaying ${images[imageIndex]}`} style={{
+                    opacity: fade ? 0 : 1,
+                    transition: 'opacity 0.5s ease-in-out',}}/>
+                <div className="description-text" style={{
+                    fontSize: "calc(2vw + 1vh)", 
+                    padding: "4vh",
+                    opacity: fade ? 0 : 1, 
+                    transition: 'opacity 0.5s ease-in-out',}}>{text[imageIndex]}</div>
         </div>
     );
 };
     
-export const Carousel_Rotate_Left = ({ onRotate }) => {
+export const Carousel_Rotate_Left = ({fadeFunction}) => {
     return (
         <div className="left-button">
-            <button onClick={onRotate} style={{ background: 'none', border: 'none' }}>
-                <img src="images/arrow_left.png" alt="Rotate Left" />
+            <button onClick={fadeFunction}>
+                <img src="images/arrow_left_alt.png" alt="Rotate Left" />
             </button>
         </div>
     );
 };
 
-export const Carousel_Rotate_Right = ({ onRotate }) => {
+export const Carousel_Rotate_Right = ({fadeFunction}) => {
     return (
         <div className="right-button">
-            <button onClick={onRotate} style={{ background: 'none', border: 'none' }}>
-                <img src="images/arrow_right.png" alt="Rotate Right" />
+            <button onClick={fadeFunction}>
+                <img src="images/arrow_right_alt.png" alt="Rotate Right" />
             </button>
         </div>
     );
-};  
+};
+
+export const Carousel_Navigation_Buttons = ({ fadeFunction, movementFunction, activeIndex }) => {
+    return (
+        <div className="nav-buttons-container">
+            {images.map((_, index) => (
+                <button className="nav-button" key={index} onClick={() => fadeFunction(movementFunction, index)} style={{
+                    backgroundColor: activeIndex === index ? 'purple' : '#000000',
+                }}></button>
+            ))}
+        </div>
+    );
+}
 
 
 
diff --git a/src/Home/Home.css b/src/Home/Home.css
index fc861c4c..1b3a34b8 100644
--- a/src/Home/Home.css
+++ b/src/Home/Home.css
@@ -62,7 +62,7 @@
 
 #meetHeading{
     font-family: cursive;
-    font-size: 4em;
+    font-size: calc(6vw + 2vh);
 
     padding-left: 20px;
     padding-right: 20px;
@@ -110,7 +110,7 @@
 
 #downloadLabel{
     
-    font-size: 40px;
+    font-size: calc(4vw + 1vh);
     padding-bottom: 20px;
     
 }
@@ -130,6 +130,25 @@
     width: 100%
 }
 
+#downloadButton a{
+    font-size: calc(2vw + 0.5vh);
+}
+
 #musicButton{
     z-index: 1;
 }
+
+.Carousel-Wrapper {
+    height: calc(75vh + 10vw);
+    width: 80vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 3vh auto 10px auto;
+    position: relative; /* Relative positioning for the button container */
+    
+    border-radius: 5%;
+    background-size: cover;
+    background-size: no-repeat;
+}
\ No newline at end of file
diff --git a/src/Home/Home.js b/src/Home/Home.js
index a0cd99fa..fa4e28db 100644
--- a/src/Home/Home.js
+++ b/src/Home/Home.js
@@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from 'react';
 import "./Home.css";
 import Navbar from "../Navbar/Navbar";
 import Footer from "../Footer/Footer";
-import {Carousel, Carousel_Rotate_Left, Carousel_Rotate_Right, images} from '../Carousel/Carousel';
+import {Carousel, Carousel_Rotate_Left, Carousel_Rotate_Right, Carousel_Navigation_Buttons, images} from '../Carousel/Carousel';
 
 
 const Home = () => {
@@ -10,6 +10,8 @@ const Home = () => {
     const audioRef = useRef(null); // Ref for the audio element     
     const [videoPlaying, setVideoPlaying] = useState(false);
     const [currentImageIndex, setCurrentImageIndex] = useState(0);
+    const [fade, setFade] = useState(false);
+    const fadeTimeout = 0.75 * 1000;
 
     const handleRotateLeft = () => {
         setCurrentImageIndex(prevIndex => (prevIndex - 1 + images.length) % images.length);
@@ -19,7 +21,27 @@ const Home = () => {
         setCurrentImageIndex(prevIndex => (prevIndex + 1) % images.length);
     };
     
-
+    const handleButtonNav = (selectedIndex) => {
+        setCurrentImageIndex(selectedIndex);
+    }
+
+    const handleFadeArrows = (movementFunction) => {
+        setFade(true);
+        setTimeout(() => {
+            movementFunction();
+            setFade(false);
+        }, fadeTimeout)
+    }
+
+    const handleFadeNav = (movementFunction, selectedIndex) => {
+        if(!(selectedIndex === currentImageIndex)){
+            setFade(true);
+            setTimeout(() => {
+                movementFunction(selectedIndex);
+                setFade(false);
+            }, fadeTimeout)
+        }
+    }
 
     const toggleMute = () => {
         setIsMuted(!isMuted);
@@ -112,13 +134,14 @@ const Home = () => {
 
 
             <div id="meetChars">
-                <h2 id="meetHeading">Meet Our Charactetrs!</h2>
-                <div className="Carousel border-4 border-custom-purple w-3/5 ">
-                    <Carousel imageIndex={currentImageIndex} />
+                <h2 id="meetHeading">Meet Our Characters!</h2>
+                <div className="Carousel-Wrapper border-4 border-custom-purple w-3/5 ">
+                    <Carousel imageIndex={currentImageIndex} fade={fade}/>
                     <div className="button-container">
-                        <Carousel_Rotate_Left onRotate={handleRotateLeft} />
-                        <Carousel_Rotate_Right onRotate={handleRotateRight} />
+                        <Carousel_Rotate_Left fadeFunction={() => handleFadeArrows(handleRotateLeft)} />
+                        <Carousel_Rotate_Right fadeFunction={() => handleFadeArrows(handleRotateRight)} />
                     </div>
+                    <Carousel_Navigation_Buttons fadeFunction={handleFadeNav} movementFunction={handleButtonNav} activeIndex={currentImageIndex} />
                 </div>
             </div>