diff --git a/assets/contributors/contributor.css b/assets/contributors/contributor.css
index b1f8cadf4..c2df286b6 100644
--- a/assets/contributors/contributor.css
+++ b/assets/contributors/contributor.css
@@ -21,7 +21,7 @@ body {
     justify-content: center;
     align-items: center;
     min-height: 100vh;
-    background-image: url(../../assets/images/background.jpg);
+    background-image: url(../images/background.jpg);
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
@@ -36,19 +36,34 @@ body {
     scroll-behavior: smooth;
 }
 
-.heroes {
-    font-family: Arial, sans-serif;
-    font-weight: bold;
+.heroes-container {
     margin-top: 25px;
-    font-size: 45px;
-    color: var(--light);
     text-align: center;
-    transition: color 0.3s ease-in-out;
+}
+
+.heroes {
+    padding: 0;
     cursor: pointer;
+    font-weight: bold;
+    color: var(--light);
+    display: inline-block;
+    font-family: Arial, sans-serif;
+    font-size: clamp(3rem, 3vw, 5rem);
+    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
 }
 
 h1:hover {
-    color: var(--primary);
+    color: #1e90ff;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+.dark-mode h1 {
+    color: rgb(255, 255, 0);
+}
+
+.dark-mode h1:hover {
+    color: var(--dark);
+    text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3);
 }
 
 #contributor {
diff --git a/assets/contributors/contributor.html b/assets/contributors/contributor.html
index fb50b9d92..892ca44ef 100644
--- a/assets/contributors/contributor.html
+++ b/assets/contributors/contributor.html
@@ -94,8 +94,10 @@
         </nav>
     </header>
 
-    <h1 class="heroes">Faces of Dedication: Our Contributing Heroes</h1>
-    
+    <div class="heroes-container">
+        <h1 class="heroes">Faces of Dedication: Our Contributing Heroes</h1>
+    </div>
+
     <div id="contributor">
         <div id="grid">
             <!-- Placeholder elements -->