diff --git a/assets/css/styles.css b/assets/css/styles.css
index 068b30f..aa73a75 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -27,7 +27,7 @@ body {
   background: var(--bg);
   color: var(--text);
   min-height: 100vh;
-  transition: background 0.3s ease;
+  transition: background 0.3s ease, color 0.3s ease;
 }
 
 header {
diff --git a/assets/js/main.js b/assets/js/main.js
index 35bcc3e..3b7946c 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,6 +1,9 @@
 document.addEventListener("DOMContentLoaded", function () {
+  loadRides();
+  initTheme();
+});
 
-  /* ===== LOAD RIDES ===== */
+function loadRides() {
   fetch("data/rides.json")
     .then(res => {
       if (!res.ok) {
@@ -39,8 +42,9 @@ document.addEventListener("DOMContentLoaded", function () {
         container.innerHTML = `<p class="error-message">Failed to load rides. Please try again later.</p>`;
       }
     });
+}
 
-  /* ===== THEME SYSTEM ===== */
+function initTheme() {
   const toggleBtn = document.getElementById("themeToggle");
   const icon = document.getElementById("themeIcon");
 
@@ -71,5 +75,4 @@ document.addEventListener("DOMContentLoaded", function () {
       icon.textContent = "☀️";
     }
   });
-
-});
+}