From acb113f825a6d030713a5676b94f01d1f7aaf83f Mon Sep 17 00:00:00 2001
From: Son Nguyen <hoangson091104@gmail.com>
Date: Fri, 24 May 2024 20:35:31 +0700
Subject: [PATCH] Update: Enhanced app functionalities (#196)

---
 MovieVerse-Frontend/css/trivia.css            |  82 +++++
 MovieVerse-Frontend/html/about.html           |  29 +-
 MovieVerse-Frontend/html/actor-details.html   |   2 +-
 MovieVerse-Frontend/html/analytics.html       |   4 +-
 MovieVerse-Frontend/html/api_fails.html       |  19 +-
 MovieVerse-Frontend/html/chat.html            |   2 +-
 MovieVerse-Frontend/html/chatbot.html         |  19 +-
 .../html/christopher-nolan.html               |   2 +-
 MovieVerse-Frontend/html/company-details.html |   2 +-
 MovieVerse-Frontend/html/create-account.html  |   2 +-
 .../html/director-details.html                |   2 +-
 MovieVerse-Frontend/html/favorites.html       | 187 +++++++++-
 MovieVerse-Frontend/html/feedback.html        |   2 +-
 MovieVerse-Frontend/html/inception.html       |   2 +-
 .../html/leonardo-dicaprio.html               |   2 +-
 MovieVerse-Frontend/html/movie-details.html   |   2 +-
 MovieVerse-Frontend/html/movie-match.html     |   2 +-
 MovieVerse-Frontend/html/movie-timeline.html  |  27 +-
 MovieVerse-Frontend/html/notifications.html   |  42 ++-
 MovieVerse-Frontend/html/offline.html         |   2 +-
 MovieVerse-Frontend/html/privacy-policy.html  |   3 +-
 MovieVerse-Frontend/html/reset-password.html  |   2 +-
 MovieVerse-Frontend/html/search.html          |  41 ++-
 MovieVerse-Frontend/html/settings.html        |   2 +-
 MovieVerse-Frontend/html/sign-in.html         |   2 +-
 MovieVerse-Frontend/html/support.html         |   2 +-
 .../html/terms-of-service.html                |   4 +-
 MovieVerse-Frontend/html/trivia.html          | 342 +++++++++++++++++-
 MovieVerse-Frontend/html/tv-details.html      |   2 +-
 MovieVerse-Frontend/html/user-profile.html    |   2 +-
 MovieVerse-Frontend/js/chatbot.js             |  68 +++-
 MovieVerse-Frontend/js/favorites.js           |  83 +++--
 MovieVerse-Frontend/js/movie-timeline.js      |  69 +++-
 MovieVerse-Frontend/js/search.js              |  62 +++-
 MovieVerse-Mobile/.gitignore                  |   2 +-
 .../www/MovieVerse-Frontend/css/trivia.css    |  82 +++++
 .../www/MovieVerse-Frontend/html/about.html   |  29 +-
 .../html/actor-details.html                   |   2 +-
 .../MovieVerse-Frontend/html/analytics.html   |   4 +-
 .../MovieVerse-Frontend/html/api_fails.html   |  19 +-
 .../www/MovieVerse-Frontend/html/chat.html    |   2 +-
 .../www/MovieVerse-Frontend/html/chatbot.html |  19 +-
 .../html/christopher-nolan.html               |   2 +-
 .../html/company-details.html                 |   2 +-
 .../html/create-account.html                  |   2 +-
 .../html/director-details.html                |   2 +-
 .../MovieVerse-Frontend/html/favorites.html   | 187 +++++++++-
 .../MovieVerse-Frontend/html/feedback.html    |   2 +-
 .../MovieVerse-Frontend/html/inception.html   |   2 +-
 .../html/leonardo-dicaprio.html               |   2 +-
 .../html/movie-details.html                   |   2 +-
 .../MovieVerse-Frontend/html/movie-match.html |   2 +-
 .../html/movie-timeline.html                  |  27 +-
 .../html/notifications.html                   |  42 ++-
 .../www/MovieVerse-Frontend/html/offline.html |   2 +-
 .../html/privacy-policy.html                  |   3 +-
 .../html/reset-password.html                  |   2 +-
 .../www/MovieVerse-Frontend/html/search.html  |  41 ++-
 .../MovieVerse-Frontend/html/settings.html    |   2 +-
 .../www/MovieVerse-Frontend/html/sign-in.html |   2 +-
 .../www/MovieVerse-Frontend/html/support.html |   2 +-
 .../html/terms-of-service.html                |   4 +-
 .../www/MovieVerse-Frontend/html/trivia.html  | 342 +++++++++++++++++-
 .../MovieVerse-Frontend/html/tv-details.html  |   2 +-
 .../html/user-profile.html                    |   2 +-
 .../www/MovieVerse-Frontend/js/chatbot.js     |  68 +++-
 .../www/MovieVerse-Frontend/js/favorites.js   |  83 +++--
 .../MovieVerse-Frontend/js/movie-timeline.js  |  69 +++-
 .../www/MovieVerse-Frontend/js/search.js      |  62 +++-
 .../app/src/main/assets/www/index.html        |   4 +-
 .../www/MovieVerse-Frontend/css/trivia.css    |  82 +++++
 .../www/MovieVerse-Frontend/html/about.html   |  29 +-
 .../html/actor-details.html                   |   2 +-
 .../MovieVerse-Frontend/html/analytics.html   |   4 +-
 .../MovieVerse-Frontend/html/api_fails.html   |  19 +-
 .../www/MovieVerse-Frontend/html/chat.html    |   2 +-
 .../www/MovieVerse-Frontend/html/chatbot.html |  19 +-
 .../html/christopher-nolan.html               |   2 +-
 .../html/company-details.html                 |   2 +-
 .../html/create-account.html                  |   2 +-
 .../html/director-details.html                |   2 +-
 .../MovieVerse-Frontend/html/favorites.html   | 187 +++++++++-
 .../MovieVerse-Frontend/html/feedback.html    |   2 +-
 .../MovieVerse-Frontend/html/inception.html   |   2 +-
 .../html/leonardo-dicaprio.html               |   2 +-
 .../html/movie-details.html                   |   2 +-
 .../MovieVerse-Frontend/html/movie-match.html |   2 +-
 .../html/movie-timeline.html                  |  27 +-
 .../html/notifications.html                   |  42 ++-
 .../www/MovieVerse-Frontend/html/offline.html |   2 +-
 .../html/privacy-policy.html                  |   3 +-
 .../html/reset-password.html                  |   2 +-
 .../www/MovieVerse-Frontend/html/search.html  |  41 ++-
 .../MovieVerse-Frontend/html/settings.html    |   2 +-
 .../www/MovieVerse-Frontend/html/sign-in.html |   2 +-
 .../www/MovieVerse-Frontend/html/support.html |   2 +-
 .../html/terms-of-service.html                |   4 +-
 .../www/MovieVerse-Frontend/html/trivia.html  | 342 +++++++++++++++++-
 .../MovieVerse-Frontend/html/tv-details.html  |   2 +-
 .../html/user-profile.html                    |   2 +-
 .../ios/www/MovieVerse-Frontend/js/chatbot.js |  68 +++-
 .../www/MovieVerse-Frontend/js/favorites.js   |  83 +++--
 .../MovieVerse-Frontend/js/movie-timeline.js  |  69 +++-
 .../ios/www/MovieVerse-Frontend/js/search.js  |  62 +++-
 .../platforms/ios/www/index.html              |   4 +-
 .../www/MovieVerse-Frontend/css/trivia.css    |  82 +++++
 .../www/MovieVerse-Frontend/html/about.html   |  29 +-
 .../html/actor-details.html                   |   2 +-
 .../MovieVerse-Frontend/html/analytics.html   |   4 +-
 .../MovieVerse-Frontend/html/api_fails.html   |  19 +-
 .../www/MovieVerse-Frontend/html/chat.html    |   2 +-
 .../www/MovieVerse-Frontend/html/chatbot.html |  19 +-
 .../html/christopher-nolan.html               |   2 +-
 .../html/company-details.html                 |   2 +-
 .../html/create-account.html                  |   2 +-
 .../html/director-details.html                |   2 +-
 .../MovieVerse-Frontend/html/favorites.html   | 187 +++++++++-
 .../MovieVerse-Frontend/html/feedback.html    |   2 +-
 .../MovieVerse-Frontend/html/inception.html   |   2 +-
 .../html/leonardo-dicaprio.html               |   2 +-
 .../html/movie-details.html                   |   2 +-
 .../MovieVerse-Frontend/html/movie-match.html |   2 +-
 .../html/movie-timeline.html                  |  27 +-
 .../html/notifications.html                   |  42 ++-
 .../www/MovieVerse-Frontend/html/offline.html |   2 +-
 .../html/privacy-policy.html                  |   3 +-
 .../html/reset-password.html                  |   2 +-
 .../www/MovieVerse-Frontend/html/search.html  |  41 ++-
 .../MovieVerse-Frontend/html/settings.html    |   2 +-
 .../www/MovieVerse-Frontend/html/sign-in.html |   2 +-
 .../www/MovieVerse-Frontend/html/support.html |   2 +-
 .../html/terms-of-service.html                |   4 +-
 .../www/MovieVerse-Frontend/html/trivia.html  | 342 +++++++++++++++++-
 .../MovieVerse-Frontend/html/tv-details.html  |   2 +-
 .../html/user-profile.html                    |   2 +-
 .../www/MovieVerse-Frontend/js/chatbot.js     |  68 +++-
 .../www/MovieVerse-Frontend/js/favorites.js   |  83 +++--
 .../MovieVerse-Frontend/js/movie-timeline.js  |  69 +++-
 .../www/MovieVerse-Frontend/js/search.js      |  62 +++-
 MovieVerse-Mobile/www/index.html              |   4 +-
 index.html                                    |   4 +-
 141 files changed, 3973 insertions(+), 513 deletions(-)

diff --git a/MovieVerse-Frontend/css/trivia.css b/MovieVerse-Frontend/css/trivia.css
index 59bb2d77..a9c7716e 100644
--- a/MovieVerse-Frontend/css/trivia.css
+++ b/MovieVerse-Frontend/css/trivia.css
@@ -962,6 +962,88 @@ main {
     background-color: #ff8623;
 }
 
+.side-nav {
+    position: fixed;
+    left: -250px;
+    top: 0;
+    width: 250px;
+    height: 100%;
+    background-color: #373b69;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    overflow-y: auto;
+    transition: left 0.39s;
+    z-index: 1000;
+}
+
+.side-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.side-nav ul li {
+    padding: 15px 20px;
+    border-radius: 8px;
+    text-align: left;
+}
+
+.side-nav ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding-left: 5px;
+}
+
+.side-nav ul li a:hover {
+    background-color: #ff8623;
+    border-radius: 8px;
+}
+
+.nav-toggle {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 1.5rem;
+    top: 5px;
+    left: 15px;
+    border-radius: 8px;
+    padding: 3.5px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    display: flex;
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    padding-left: 4.25px;
+}
+
+.nav-toggle i {
+    line-height: inherit;
+}
+
+.nav-toggle:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#button-remove {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#button-remove:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
 @media (max-width: 900px) {
     #profileBtn {
         display: none;
diff --git a/MovieVerse-Frontend/html/about.html b/MovieVerse-Frontend/html/about.html
index f8948cc1..915c6280 100644
--- a/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Frontend/html/about.html
@@ -169,6 +169,23 @@
                 bottom: 70px;
             }
         }
+
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+
+        .highlight2 {
+            color: orange;
+        }
+
+        .highlight2:hover {
+            color: #ff8623;
+        }
     </style>
 </head>
 
@@ -221,7 +238,7 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -264,10 +281,10 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002;">
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight">vieV</span>erse Menu
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
             </div>
         </a>
 
@@ -285,10 +302,10 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="#subheading4">Useful Links</a></li>
             <li><a href="terms-of-service.html">Terms of Service</a></li>
             <li><a href="privacy-policy.html">Privacy Policy</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
             <li><a href="sign-in.html">Sign In</a></li>
             <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
 
diff --git a/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Frontend/html/actor-details.html
index 1ee35dd6..9cf910bc 100644
--- a/MovieVerse-Frontend/html/actor-details.html
+++ b/MovieVerse-Frontend/html/actor-details.html
@@ -230,7 +230,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Frontend/html/analytics.html
index 413312dc..10c4f815 100644
--- a/MovieVerse-Frontend/html/analytics.html
+++ b/MovieVerse-Frontend/html/analytics.html
@@ -309,7 +309,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             </h1>
         </a>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -351,7 +351,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002;">
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu
diff --git a/MovieVerse-Frontend/html/api_fails.html b/MovieVerse-Frontend/html/api_fails.html
index 5bd353e2..80e3184f 100644
--- a/MovieVerse-Frontend/html/api_fails.html
+++ b/MovieVerse-Frontend/html/api_fails.html
@@ -483,7 +483,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -560,19 +560,6 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
         }
 
-        function updateClock() {
-            var now = new Date();
-            var hours = now.getHours();
-            var minutes = now.getMinutes();
-            hours = hours < 10 ? '0' + hours : hours;
-            minutes = minutes < 10 ? '0' + minutes : minutes;
-            var timeString = hours + ':' + minutes;
-            document.getElementById('clock').innerHTML = timeString;
-        }
-
-        setInterval(updateClock, 1000);
-        window.onload = updateClock;
-
         document.getElementById('settings-btn').addEventListener('click', () => {
             window.location.href = 'settings.html';
         });
@@ -581,7 +568,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             applySettings();
 
             function applySettings() {
-                const defaultBg = '../../images/universe-1.png';
+                const defaultBg = '../../images/universe-1.webp';
                 const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
@@ -1075,4 +1062,4 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/MovieVerse-Frontend/html/chat.html b/MovieVerse-Frontend/html/chat.html
index c513caff..01d7d12b 100644
--- a/MovieVerse-Frontend/html/chat.html
+++ b/MovieVerse-Frontend/html/chat.html
@@ -491,7 +491,7 @@ <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/chatbot.html b/MovieVerse-Frontend/html/chatbot.html
index 893885e4..40b2a891 100644
--- a/MovieVerse-Frontend/html/chatbot.html
+++ b/MovieVerse-Frontend/html/chatbot.html
@@ -192,6 +192,10 @@
             background-color: #f4f4f4 !important;
         }
 
+        #homepage-header {
+            margin-top: -10px;
+        }
+
         @media (max-width: 767px) {
             #google_translate_element {
                 bottom: 120px;
@@ -200,6 +204,10 @@
             #translate_control {
                 bottom: 70px;
             }
+
+            #homepage-header {
+                margin-top: 10px;
+            }
         }
     </style>
 </head>
@@ -246,13 +254,18 @@
             }, { passive: true });
         })
     </script>
-    <header style="margin-top: 10px !important;">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+    <header id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
 
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
@@ -268,7 +281,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
 
-        <form id="form1">
+        <form id="form1" style="margin-top: 20px">
             <div class="search-container">
                 <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
                 <button type="button" id="button-search" onclick="handleSearch()">Search</button>
diff --git a/MovieVerse-Frontend/html/christopher-nolan.html b/MovieVerse-Frontend/html/christopher-nolan.html
index 19153d77..2874ec08 100644
--- a/MovieVerse-Frontend/html/christopher-nolan.html
+++ b/MovieVerse-Frontend/html/christopher-nolan.html
@@ -214,7 +214,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Frontend/html/company-details.html
index b5f51c7e..f70294c3 100644
--- a/MovieVerse-Frontend/html/company-details.html
+++ b/MovieVerse-Frontend/html/company-details.html
@@ -229,7 +229,7 @@ <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/create-account.html b/MovieVerse-Frontend/html/create-account.html
index 04465d60..47a7d740 100644
--- a/MovieVerse-Frontend/html/create-account.html
+++ b/MovieVerse-Frontend/html/create-account.html
@@ -295,7 +295,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Frontend/html/director-details.html
index a09e5ac8..23839b49 100644
--- a/MovieVerse-Frontend/html/director-details.html
+++ b/MovieVerse-Frontend/html/director-details.html
@@ -223,7 +223,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/favorites.html b/MovieVerse-Frontend/html/favorites.html
index 684fa44b..08cdac01 100644
--- a/MovieVerse-Frontend/html/favorites.html
+++ b/MovieVerse-Frontend/html/favorites.html
@@ -351,11 +351,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             </h1>
         </div>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
 
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()" style="z-index: 1000000">
+            <i class="fas fa-bars"></i>
+        </button>
+
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
@@ -384,6 +388,26 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         </form>
     </header>
 
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul id="watchlist-links" style="overflow-y: auto">
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
     <div class="watchlist-buttons-container">
         <button id="create-watchlist-btn">Create Watch Lists</button>
         <button id="edit-watchlist-btn">Edit Watch Lists</button>
@@ -530,7 +554,168 @@ <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
         <span>Menu</span>
     </button>
 
+    <script type="module">
+        import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js';
+        import { getFirestore, doc, setDoc, collection, updateDoc, getDocs, getDoc, query, where, orderBy, writeBatch, deleteDoc } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js';
+
+        let initialMoviesSelection = [];
+        let initialTVSeriesSelection = [];
+
+        function translateFBC(value) {
+            return atob(value);
+        }
+
+        function getFBConfig1() {
+            const fbConfig1 = "QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw==";
+            return translateFBC(fbConfig1);
+        }
+
+        function getFBConfig2() {
+            const fbConfig2 = "bW92aWV2ZXJzZS1hcHAuZmlyZWJhc2VhcHAuY29t";
+            return translateFBC(fbConfig2);
+        }
+
+        function getFBConfig3() {
+            const fbConfig3 = "bW92aWV2ZXJzZS1hcHAuYXBwc3BvdC5jb20=";
+            return translateFBC(fbConfig3);
+        }
+
+        function getFBConfig4() {
+            const fbConfig4 = "ODAyOTQzNzE4ODcx";
+            return translateFBC(fbConfig4);
+        }
+
+        function getFBConfig5() {
+            const fbConfig5 = "MTo4MDI5NDM3MTg4NzE6d2ViOjQ4YmM5MTZjYzk5ZTI3MjQyMTI3OTI=";
+            return translateFBC(fbConfig5);
+        }
+
+        const firebaseConfig = {
+            apiKey: getFBConfig1(),
+            authDomain: getFBConfig2(),
+            projectId: "movieverse-app",
+            storageBucket: getFBConfig3(),
+            messagingSenderId: getFBConfig4(),
+            appId: getFBConfig5()
+        };
+
+        const app = initializeApp(firebaseConfig);
+        const db = getFirestore(app);
+
+        async function loadNavWatchlistLinks() {
+            const navList = document.getElementById('watchlist-links');
+            const firstStaticItem = navList.querySelector('li');
+
+            try {
+                showSpinner();
+
+                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+                let watchlists = [];
+
+                if (currentUserEmail) {
+                    const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
+                    const querySnapshot = await getDocs(q);
+                    watchlists = querySnapshot.docs.map(doc => ({ id: doc.id, name: doc.data().name }));
+                }
+                else {
+                    watchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
+                }
+
+                watchlists.push({ name: "Favorite Movies", id: "favorites-watchlist" });
+                watchlists.push({ name: "Favorite TV Series", id: "favorites-tvseries-watchlist" });
+
+                navList.querySelectorAll('li.dynamic').forEach(li => li.remove());
+
+                let counter = 1;
+
+                watchlists.forEach(watchlist => {
+                    const listItem = document.createElement('li');
+                    listItem.className = 'dynamic';
+                    const link = document.createElement('a');
+                    link.href = `#${watchlist.name.replace(/\s+/g, '-').toLowerCase()}`;
+
+                    if (watchlist.name !== "Favorite Movies" && watchlist.name !== "Favorite TV Series") {
+                        link.textContent = `Watchlist ${counter}: ${watchlist.name}`;
+                        counter++;
+                    }
+                    else {
+                        link.textContent = watchlist.name;
+                    }
+
+                    listItem.appendChild(link);
+                    navList.insertBefore(listItem, firstStaticItem);
+                });
+
+                hideSpinner();
+                assignIdsToWatchlists();
+            }
+            catch (error) {
+                console.error('Error loading watchlists for navigation:', error);
+                hideSpinner();
+            }
+        }
+
+        function assignIdsToWatchlists() {
+            document.querySelectorAll('.watchlist').forEach(watchlist => {
+                const title = watchlist.querySelector('.watchlist-title').textContent.trim();
+                if (!watchlist.id) {
+                    watchlist.id = title.replace(/\s+/g, '-').toLowerCase();
+                }
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', loadNavWatchlistLinks);
+    </script>
+
     <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        document.addEventListener('click', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            const navToggle = document.getElementById('nav-toggle');
+            if (!sideNav.contains(event.target) && !navToggle.contains(event.target) && sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
         function handleSignInOut() {
             const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
 
diff --git a/MovieVerse-Frontend/html/feedback.html b/MovieVerse-Frontend/html/feedback.html
index 10755163..2eb1f580 100644
--- a/MovieVerse-Frontend/html/feedback.html
+++ b/MovieVerse-Frontend/html/feedback.html
@@ -550,7 +550,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/inception.html b/MovieVerse-Frontend/html/inception.html
index 556a38d9..897d13a4 100644
--- a/MovieVerse-Frontend/html/inception.html
+++ b/MovieVerse-Frontend/html/inception.html
@@ -219,7 +219,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/leonardo-dicaprio.html b/MovieVerse-Frontend/html/leonardo-dicaprio.html
index 994b0594..18a4d369 100644
--- a/MovieVerse-Frontend/html/leonardo-dicaprio.html
+++ b/MovieVerse-Frontend/html/leonardo-dicaprio.html
@@ -214,7 +214,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Frontend/html/movie-details.html
index 00e12abc..fbc846ba 100644
--- a/MovieVerse-Frontend/html/movie-details.html
+++ b/MovieVerse-Frontend/html/movie-details.html
@@ -277,7 +277,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/movie-match.html b/MovieVerse-Frontend/html/movie-match.html
index 4de6e5d2..d0a7a52a 100644
--- a/MovieVerse-Frontend/html/movie-match.html
+++ b/MovieVerse-Frontend/html/movie-match.html
@@ -213,7 +213,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/movie-timeline.html b/MovieVerse-Frontend/html/movie-timeline.html
index 3621d4ed..0feef768 100644
--- a/MovieVerse-Frontend/html/movie-timeline.html
+++ b/MovieVerse-Frontend/html/movie-timeline.html
@@ -171,6 +171,29 @@
                 bottom: 70px;
             }
         }
+
+        .load-more-container {
+            width: 100%;
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        .load-more-container button {
+            margin: 10px auto;
+            background-color: #7378c5;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font: inherit;
+            display: block;
+            transition: background-color 0.3s ease;
+        }
+
+        .load-more-container button:hover {
+            background-color: #ff8623;
+        }
     </style>
 </head>
 
@@ -223,7 +246,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -266,7 +289,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </div>
             <button id="clear-search-btn" style="display: none; color: white">Clear Search Results</button>
         </div>
-        <div class="center-container1">
+        <div class="center-container1" id="center-container1">
             <main id="results" style="scroll-behavior: smooth">
                 <!-- Movies will be dynamically loaded here -->
             </main>
diff --git a/MovieVerse-Frontend/html/notifications.html b/MovieVerse-Frontend/html/notifications.html
index 08a810b3..cc233067 100644
--- a/MovieVerse-Frontend/html/notifications.html
+++ b/MovieVerse-Frontend/html/notifications.html
@@ -329,7 +329,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -368,7 +368,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
 
     <main>
         <section id="newFeatures">
-            <h2>New Features</h2>
+            <h2 style="cursor: pointer">New Features</h2>
             <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
             <ul>
                 <li><strong>Enhanced Search Functionality:</strong> Our new search engine supports advanced filters for genres, ratings, and release years.</li>
@@ -385,7 +385,7 @@ <h2>New Features</h2>
         </section>
 
         <section id="newReleases">
-            <h2>New Releases</h2>
+            <h2 style="cursor: pointer">New Releases</h2>
 
             <h3>Since Your Last Visit</h3>
             <ul id="releasesSinceLastVisit"></ul>
@@ -406,7 +406,7 @@ <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
         </section>
 
         <section id="tipsTricks">
-            <h2>Tips & Tricks</h2>
+            <h2 style="cursor: pointer">Tips & Tricks</h2>
             <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
             <ul>
                 <li><strong>Creating Custom Watchlists:</strong> Learn how to create personalized watchlists to keep track of your favorite movies.</li>
@@ -422,7 +422,7 @@ <h2>Tips & Tricks</h2>
         </section>
 
         <section id="popularActors">
-            <h2>Popular Actors</h2>
+            <h2 style="cursor: pointer">Popular Actors</h2>
             <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -431,7 +431,7 @@ <h2>Popular Actors</h2>
         </section>
 
         <section id="popularDirectors">
-            <h2>Popular Directors</h2>
+            <h2 style="cursor: pointer">Popular Directors</h2>
             <p style="color: black">Discover the visionaries behind the camera who are shaping the world of cinema!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -474,6 +474,36 @@ <h2>Popular Directors</h2>
     </script>
 
     <script>
+        document.getElementById('newFeatures').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('newReleases').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularActors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
+        });
+
         document.addEventListener('DOMContentLoaded', function() {
             const updateDateElements = document.querySelectorAll('.updateDate');
             const today = new Date();
diff --git a/MovieVerse-Frontend/html/offline.html b/MovieVerse-Frontend/html/offline.html
index 0eacaba4..2569eb2c 100644
--- a/MovieVerse-Frontend/html/offline.html
+++ b/MovieVerse-Frontend/html/offline.html
@@ -251,7 +251,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/privacy-policy.html b/MovieVerse-Frontend/html/privacy-policy.html
index 8635f2f9..c6e4567c 100644
--- a/MovieVerse-Frontend/html/privacy-policy.html
+++ b/MovieVerse-Frontend/html/privacy-policy.html
@@ -255,7 +255,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -1145,5 +1145,4 @@ <h2 style="color: white">Cookies and Web Beacons</h2>
     </script>
 
 </body>
-
 </html>
diff --git a/MovieVerse-Frontend/html/reset-password.html b/MovieVerse-Frontend/html/reset-password.html
index 3a0bcc02..b954599e 100644
--- a/MovieVerse-Frontend/html/reset-password.html
+++ b/MovieVerse-Frontend/html/reset-password.html
@@ -276,7 +276,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/search.html b/MovieVerse-Frontend/html/search.html
index f005f746..688aef0a 100644
--- a/MovieVerse-Frontend/html/search.html
+++ b/MovieVerse-Frontend/html/search.html
@@ -213,7 +213,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -255,9 +255,9 @@ <h2 id="search-results-label">Search Results</h2>
             <button data-category="person" onclick="showResults('person')">People</button>
         </div>
 
-        <button id="toggle-filters-btn">Filter Results</button>
+        <button id="toggle-filters-btn">Filter & Sort Results</button>
 
-        <!-- Filters for Movies and TV Series -->
+        <!-- Filters for Movies -->
         <div id="movie-tv-filters" style="display: none;">
             <p style="font-weight: bold">Filters Search Results</p>
             <label for="genre-filter">Genre:</label>
@@ -279,6 +279,19 @@ <h2 id="search-results-label">Search Results</h2>
             <span id="rating-value" style="color: white; font: inherit"></span>
 
             <button id="reset-filters">Reset Filters</button>
+
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+
+            <label for="sort-movie"><strong>Sort by:</strong></label>
+            <select id="sort-movie" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="release_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="release_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
         </div>
 
         <!-- Filters for TV Series -->
@@ -303,6 +316,19 @@ <h2 id="search-results-label">Search Results</h2>
             <span id="rating-tv-value" style="color: white; font: inherit"></span>
 
             <button id="reset-filters">Reset Filters</button>
+
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+
+            <label for="sort-tv"><strong>Sort by:</strong></label>
+            <select id="sort-tv" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="first_air_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="first_air_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
         </div>
 
         <!-- Filters for People -->
@@ -328,6 +354,15 @@ <h2 id="search-results-label">Search Results</h2>
 
             <span id="popularity-value" style="color: white; font: inherit"></span>
             <button id="reset-filters">Reset Filters</button>
+
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+
+            <label for="sort-people"><strong>Sort by:</strong></label>
+            <select id="sort-people" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+            </select>
         </div>
 
         <div id="movie-match-container1" class="movie-match-container1">
diff --git a/MovieVerse-Frontend/html/settings.html b/MovieVerse-Frontend/html/settings.html
index 8d2f1031..f698b5ef 100644
--- a/MovieVerse-Frontend/html/settings.html
+++ b/MovieVerse-Frontend/html/settings.html
@@ -364,7 +364,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/sign-in.html b/MovieVerse-Frontend/html/sign-in.html
index d803f4a6..67a21c66 100644
--- a/MovieVerse-Frontend/html/sign-in.html
+++ b/MovieVerse-Frontend/html/sign-in.html
@@ -298,7 +298,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/support.html b/MovieVerse-Frontend/html/support.html
index 1d242cfa..b64a996b 100644
--- a/MovieVerse-Frontend/html/support.html
+++ b/MovieVerse-Frontend/html/support.html
@@ -536,7 +536,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/terms-of-service.html b/MovieVerse-Frontend/html/terms-of-service.html
index c626fb77..3a8ed6ef 100644
--- a/MovieVerse-Frontend/html/terms-of-service.html
+++ b/MovieVerse-Frontend/html/terms-of-service.html
@@ -248,7 +248,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -704,7 +704,7 @@ <h2 style="color: white">Contact Us</h2>
             applySettings();
 
             function applySettings() {
-                const defaultBg = '../../images/universe-1.png';
+                const defaultBg = '../../images/universe-1.webp';
                 const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
diff --git a/MovieVerse-Frontend/html/trivia.html b/MovieVerse-Frontend/html/trivia.html
index 07e4afea..3a6cd2b5 100644
--- a/MovieVerse-Frontend/html/trivia.html
+++ b/MovieVerse-Frontend/html/trivia.html
@@ -82,10 +82,10 @@
             margin-top: 25px;
         }
 
-        @keyframes fadeInUp {
+        @keyframes dropIn {
             0% {
                 opacity: 0;
-                transform: translateY(20px);
+                transform: translateY(-50px);
             }
             100% {
                 opacity: 1;
@@ -96,7 +96,7 @@
         #my-heading {
             margin-bottom: -25px;
             opacity: 0;
-            animation: fadeInUp 1s ease forwards;
+            animation: dropIn 1s ease forwards;
         }
 
         #my-heading a {
@@ -109,7 +109,7 @@
         .highlight {
             display: inline-block;
             opacity: 0;
-            animation: fadeInUp 1s ease forwards 0.5s;
+            animation: dropIn 1s ease forwards 0.5s;
         }
 
         #form {
@@ -243,6 +243,35 @@
                 bottom: 70px;
             }
         }
+
+        #local-time {
+            cursor: pointer;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1.5s;
+        }
+
+        #local-time p,
+        #local-time div {
+            opacity: 0;
+            animation: dropIn 1s ease forwards 2s;
+        }
+
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+
+        .highlight2 {
+            color: orange;
+        }
+
+        .highlight2:hover {
+            color: #ff8623;
+        }
     </style>
 </head>
 
@@ -295,6 +324,11 @@ <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="not
             </a>
         </h1>
 
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
@@ -305,6 +339,10 @@ <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="not
             <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
         </button>
 
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+
         <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
@@ -323,6 +361,36 @@ <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="not
         </form>
     </header>
 
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul style="overflow-y: auto">
+            <li><a href="#0">Question 1</a></li>
+            <li><a href="#1">Question 2</a></li>
+            <li><a href="#2">Question 3</a></li>
+            <li><a href="#3">Question 4</a></li>
+            <li><a href="#4">Question 5</a></li>
+            <li><a href="#5">Question 6</a></li>
+            <li><a href="#6">Question 7</a></li>
+            <li><a href="#7">Question 8</a></li>
+            <li><a href="#8">Question 9</a></li>
+            <li><a href="#9">Question 10</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
     <div>
         <div style="font-weight: bold; font-size: 32px" id="trivia-label">Movie Trivia Quiz</div>
     </div>
@@ -373,6 +441,54 @@ <h3>Trivia Results</h3>
     <script src="../js/quiz.js" type="module"></script>
 
     <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        document.addEventListener('click', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            const navToggle = document.getElementById('nav-toggle');
+            if (!sideNav.contains(event.target) && !navToggle.contains(event.target) && sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
         document.getElementById('settings-btn').addEventListener('click', () => {
             window.location.href = 'settings.html';
         });
@@ -448,6 +564,224 @@ <h3>Trivia Results</h3>
         <span>Menu</span>
     </button>
 
+    <script>
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+
     <script>
         async function showMovieOfTheDay() {
             const year = new Date().getFullYear();
diff --git a/MovieVerse-Frontend/html/tv-details.html b/MovieVerse-Frontend/html/tv-details.html
index 286b8aaa..3d453df7 100644
--- a/MovieVerse-Frontend/html/tv-details.html
+++ b/MovieVerse-Frontend/html/tv-details.html
@@ -296,7 +296,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/html/user-profile.html b/MovieVerse-Frontend/html/user-profile.html
index 01427ac8..7ddee20b 100644
--- a/MovieVerse-Frontend/html/user-profile.html
+++ b/MovieVerse-Frontend/html/user-profile.html
@@ -447,7 +447,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Frontend/js/chatbot.js b/MovieVerse-Frontend/js/chatbot.js
index 800a1f5f..9df8ce8b 100644
--- a/MovieVerse-Frontend/js/chatbot.js
+++ b/MovieVerse-Frontend/js/chatbot.js
@@ -10,6 +10,7 @@ const movieCode = {
 
 function getMovieCode() {
     return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+    return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
 }
 
 function generateMovieNames(input) {
@@ -167,11 +168,34 @@ async function rotateUserStats() {
 
 function updateMovieVisitCount(movieId, movieTitle) {
     let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+    let uniqueMoviesViewed = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+
     if (!movieVisits[movieId]) {
         movieVisits[movieId] = { count: 0, title: movieTitle };
     }
     movieVisits[movieId].count += 1;
+
+    if (!uniqueMoviesViewed.includes(movieId)) {
+        uniqueMoviesViewed.push(movieId);
+    }
+
     localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+    localStorage.setItem('uniqueMoviesViewed', JSON.stringify(uniqueMoviesViewed));
+}
+
+function getMostVisitedDirector() {
+    const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+    let mostVisitedDirector = '';
+    let maxVisits = 0;
+
+    for (const directorId in directorVisits) {
+        if (directorVisits[directorId].count > maxVisits) {
+            mostVisitedDirector = directorVisits[directorId].name;
+            maxVisits = directorVisits[directorId].count;
+        }
+    }
+
+    return mostVisitedDirector || 'Not Available';
 }
 
 function getMostVisitedMovie() {
@@ -204,26 +228,12 @@ function getMostVisitedActor() {
     return mostVisitedActor || 'Not Available';
 }
 
-function getMostVisitedDirector() {
-    const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-    let mostVisitedDirector = '';
-    let maxVisits = 0;
-
-    for (const directorId in directorVisits) {
-        if (directorVisits[directorId].count > maxVisits) {
-            mostVisitedDirector = directorVisits[directorId].name;
-            maxVisits = directorVisits[directorId].count;
-        }
-    }
-
-    return mostVisitedDirector || 'Not Available';
-}
-
 function getTriviaAccuracy() {
     let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
     if (triviaStats.totalAttempted === 0) {
         return 'No trivia attempted';
     }
+
     let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
     return `${accuracy.toFixed(1)}% accuracy`;
 }
@@ -250,6 +260,34 @@ function getMostCommonGenre() {
 
 document.addEventListener('DOMContentLoaded', rotateUserStats);
 
+function updateUniqueDirectorsViewed(directorId) {
+    let viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+    if (!viewedDirectors.includes(directorId)) {
+        viewedDirectors.push(directorId);
+        localStorage.setItem('uniqueDirectorsViewed', JSON.stringify(viewedDirectors));
+    }
+}
+
+function updateActorVisitCount(actorId, actorName) {
+    let actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+    if (!actorVisits[actorId]) {
+        actorVisits[actorId] = { count: 0, name: actorName };
+    }
+
+    actorVisits[actorId].count += 1;
+    localStorage.setItem('actorVisits', JSON.stringify(actorVisits));
+}
+
+function updateDirectorVisitCount(directorId, directorName) {
+    let directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+    if (!directorVisits[directorId]) {
+        directorVisits[directorId] = { count: 0, name: directorName };
+    }
+
+    directorVisits[directorId].count += 1;
+    localStorage.setItem('directorVisits', JSON.stringify(directorVisits));
+}
+
 function calculateMoviesToDisplay() {
     const screenWidth = window.innerWidth;
     if (screenWidth <= 689.9) return 10; // 1 movie per row
diff --git a/MovieVerse-Frontend/js/favorites.js b/MovieVerse-Frontend/js/favorites.js
index 55518565..06efb125 100644
--- a/MovieVerse-Frontend/js/favorites.js
+++ b/MovieVerse-Frontend/js/favorites.js
@@ -559,18 +559,35 @@ async function populateCreateModalWithFavorites() {
 }
 
 document.getElementById('create-watchlist-form').addEventListener('submit', async function(e) {
+    e.preventDefault();
+    showSpinner();
+
+    const name = document.getElementById('new-watchlist-name').value.trim();
+    const description = document.getElementById('new-watchlist-description').value;
+    const selectedMovies = Array.from(document.querySelectorAll('#movies-container input:checked')).map(checkbox => checkbox.value);
+    const selectedTVSeries = Array.from(document.querySelectorAll('#tvseries-container input:checked')).map(checkbox => checkbox.value);
+    const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+
+    let isDuplicate = false;
+    let maxOrder = 0;
+    let localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
+
     try {
-        showSpinner();
-        e.preventDefault();
+        if (currentUserEmail) {
+            const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
+            const querySnapshot = await getDocs(q);
+            maxOrder = querySnapshot.docs.reduce((max, docSnapshot) => Math.max(max, docSnapshot.data().order || 0), 0);
+            isDuplicate = querySnapshot.docs.some(doc => doc.data().name.toLowerCase() === name.toLowerCase());
+        }
+        else {
+            isDuplicate = localWatchlists.some(watchlist => watchlist.name.toLowerCase() === name.toLowerCase());
+        }
 
-        const name = document.getElementById('new-watchlist-name').value;
-        const description = document.getElementById('new-watchlist-description').value;
-        const selectedMovies = Array.from(document.querySelectorAll('#movies-container input:checked')).map(checkbox => checkbox.value);
-        const selectedTVSeries = Array.from(document.querySelectorAll('#tvseries-container input:checked')).map(checkbox => checkbox.value);
-        const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-        const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
-        const querySnapshot = await getDocs(q);
-        let maxOrder = querySnapshot.docs.reduce((max, docSnapshot) => Math.max(max, docSnapshot.data().order || 0), 0);
+        if (isDuplicate) {
+            alert('A watchlist with this name already exists. Please choose a different name.');
+            hideSpinner();
+            return;
+        }
 
         if (currentUserEmail) {
             const newWatchlistRef = doc(collection(db, 'watchlists'));
@@ -586,7 +603,6 @@ document.getElementById('create-watchlist-form').addEventListener('submit', asyn
             });
         }
         else {
-            const localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
             localWatchlists.push({
                 id: `local-${new Date().getTime()}`,
                 userEmail: "",
@@ -599,20 +615,10 @@ document.getElementById('create-watchlist-form').addEventListener('submit', asyn
             });
             localStorage.setItem('localWatchlists', JSON.stringify(localWatchlists));
         }
-
-        closeModal('create-watchlist-modal');
-        loadWatchLists();
-        hideSpinner();
-        window.location.reload();
     }
     catch (error) {
         if (error.code === 'resource-exhausted') {
             console.log('Firebase quota exceeded. Using localStorage for watchlists.');
-            const name = document.getElementById('new-watchlist-name').value;
-            const description = document.getElementById('new-watchlist-description').value;
-            const selectedMovies = Array.from(document.querySelectorAll('#movies-container input:checked')).map(checkbox => checkbox.value);
-            const selectedTVSeries = Array.from(document.querySelectorAll('#tvseries-container input:checked')).map(checkbox => checkbox.value);
-            const localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
             localWatchlists.push({
                 id: `local-${new Date().getTime()}`,
                 userEmail: "",
@@ -624,12 +630,17 @@ document.getElementById('create-watchlist-form').addEventListener('submit', asyn
                 createdAt: new Date().toISOString()
             });
             localStorage.setItem('localWatchlists', JSON.stringify(localWatchlists));
-            closeModal('create-watchlist-modal');
-            loadWatchLists();
-            hideSpinner();
-            window.location.reload();
+        }
+        else {
+            console.error('An error occurred while creating a watchlist:', error);
+            alert('Failed to create the watchlist due to an error.');
         }
     }
+
+    closeModal('create-watchlist-modal');
+    loadWatchLists();
+    hideSpinner();
+    window.location.reload();
 });
 
 async function getTVSeriesTitle(seriesId) {
@@ -1368,7 +1379,7 @@ async function loadWatchLists() {
         if (favorites.length > 0) {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-watchlist';
+            favoritesDiv.id = 'favorite-movies';
 
             const title = document.createElement('h3');
             title.textContent = "Favorite Movies";
@@ -1395,7 +1406,7 @@ async function loadWatchLists() {
         else {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-watchlist';
+            favoritesDiv.id = 'favorite-movies';
             favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite Movies</h3><p style="text-align: center">No favorite movies added yet.</p></div>';
             displaySection.appendChild(favoritesDiv);
         }
@@ -1403,7 +1414,7 @@ async function loadWatchLists() {
         if (favoritesTVSeries.length > 0) {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-tvseries-watchlist';
+            favoritesDiv.id = 'favorite-tv-series';
 
             const title = document.createElement('h3');
             title.textContent = "Favorite TV Series";
@@ -1430,7 +1441,7 @@ async function loadWatchLists() {
         else {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-tvseries-watchlist';
+            favoritesDiv.id = 'favorite-tv-series';
             favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite TV Series</h3><p style="text-align: center">No favorite TV series added yet.</p></div>';
             displaySection.appendChild(favoritesDiv);
         }
@@ -1464,7 +1475,7 @@ async function loadWatchLists() {
             if (favorites.length > 0) {
                 const favoritesDiv = document.createElement('div');
                 favoritesDiv.className = 'watchlist';
-                favoritesDiv.id = 'favorites-watchlist';
+                favoritesDiv.id = 'favorite-movies';
 
                 const title = document.createElement('h3');
                 title.textContent = "Favorite Movies";
@@ -1491,7 +1502,7 @@ async function loadWatchLists() {
             else {
                 const favoritesDiv = document.createElement('div');
                 favoritesDiv.className = 'watchlist';
-                favoritesDiv.id = 'favorites-watchlist';
+                favoritesDiv.id = 'favorite-movies';
                 favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite Movies</h3><p style="text-align: center">No favorite movies added yet.</p></div>';
                 displaySection.appendChild(favoritesDiv);
             }
@@ -1499,7 +1510,7 @@ async function loadWatchLists() {
             if (favoritesTVSeries.length > 0) {
                 const favoritesDiv = document.createElement('div');
                 favoritesDiv.className = 'watchlist';
-                favoritesDiv.id = 'favorites-tvseries-watchlist';
+                favoritesDiv.id = 'favorite-tv-series';
 
                 const title = document.createElement('h3');
                 title.textContent = "Favorite TV Series";
@@ -1524,6 +1535,14 @@ async function loadWatchLists() {
                 displaySection.appendChild(favoritesDiv);
                 hideSpinner();
             }
+            else {
+                const favoritesDiv = document.createElement('div');
+                favoritesDiv.className = 'watchlist';
+                favoritesDiv.id = 'favorite-tv-series';
+                favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite TV Series</h3><p style="text-align: center">No favorite TV series added yet.</p></div>';
+                displaySection.appendChild(favoritesDiv);
+                hideSpinner();
+            }
         }
         else {
             console.error('An error occurred:', error);
diff --git a/MovieVerse-Frontend/js/movie-timeline.js b/MovieVerse-Frontend/js/movie-timeline.js
index eabe2e25..a69d9e14 100644
--- a/MovieVerse-Frontend/js/movie-timeline.js
+++ b/MovieVerse-Frontend/js/movie-timeline.js
@@ -330,8 +330,24 @@ function updateMovies() {
     }
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
+function showMovies(movies, mainElement, startYear, endYear, append) {
+    showSpinner();
+
+    if (!append) {
+        mainElement.innerHTML = '';
+        const header = document.createElement('h2');
+        header.style.textAlign = "center";
+        header.style.marginTop = "20px";
+        header.style.marginBottom = "20px";
+        header.style.color = "#ff8623";
+        header.style.fontSize = '23px';
+        header.textContent = `Movies from ${startYear} to ${endYear}`;
+        const centerContainer1 = document.getElementById('center-container1');
+        centerContainer1.innerHTML = '';
+        centerContainer1.appendChild(header);
+        centerContainer1.appendChild(mainElement);
+    }
+
     movies.forEach(movie => {
         const movieEl = document.createElement('div');
         movieEl.classList.add('movie');
@@ -368,19 +384,52 @@ function showMovies(movies, mainElement) {
         movieEl.style.cursor = 'pointer';
         mainElement.appendChild(movieEl);
     });
+    const centerContainer1 = document.getElementById('center-container1');
+    centerContainer1.appendChild(mainElement);
+
+    createLoadMoreButton(startYear, endYear, mainElement);
+    hideSpinner();
 }
 
-document.getElementById('clear-search-btn').addEventListener('click', () => {
-    location.reload();
-});
+function createLoadMoreButton(startYear, endYear, mainElement) {
+    const existingButtonDiv = mainElement.querySelector('.load-more-container');
+    if (existingButtonDiv) {
+        mainElement.removeChild(existingButtonDiv);
+    }
+
+    const buttonContainer = document.createElement('div');
+    buttonContainer.className = 'load-more-container';
+    buttonContainer.style.width = '100%';
+    buttonContainer.style.textAlign = 'center';
+    buttonContainer.style.marginTop = '20px';
+
+    const moreButton = document.createElement('button');
+    moreButton.textContent = "Get More Movies in this Period";
+    moreButton.style.margin = '10px auto';
 
-async function fetchMoviesByTimePeriod(startYear, endYear) {
-    const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&primary_release_date.gte=${startYear}-01-01&primary_release_date.lte=${endYear}-12-31`;
+    moreButton.addEventListener('click', function() {
+        currentPage++;
+        fetchMoviesByTimePeriod(startYear, endYear, true);
+    });
+
+    buttonContainer.appendChild(moreButton);
+    mainElement.appendChild(buttonContainer);
+}
+
+let currentPage = 1;
+
+async function fetchMoviesByTimePeriod(startYear, endYear, append = false) {
+    const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&primary_release_date.gte=${startYear}-01-01&primary_release_date.lte=${endYear}-12-31&page=${currentPage}`;
     const response = await fetch(url);
     const data = await response.json();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const moviesToShow = data.results.slice(0, numberOfMovies);
-    showMovies(moviesToShow, document.getElementById('results'));
+    const moviesToShow = data.results;
+
+    if (append) {
+        showMovies(moviesToShow, document.getElementById('results'), startYear, endYear, true);
+    }
+    else {
+        showMovies(moviesToShow, document.getElementById('results'), startYear, endYear, false);
+    }
 }
 
 document.getElementById('load-movies').addEventListener('click', () => {
diff --git a/MovieVerse-Frontend/js/search.js b/MovieVerse-Frontend/js/search.js
index c4f9c0b1..cd665e18 100644
--- a/MovieVerse-Frontend/js/search.js
+++ b/MovieVerse-Frontend/js/search.js
@@ -404,7 +404,7 @@ function attachEventListeners() {
         movieFilters.style.display = 'none';
         tvFilters.style.display = 'none';
         peopleFilters.style.display = 'none';
-        toggleFiltersBtn.textContent = 'Filter Results';
+        toggleFiltersBtn.textContent = 'Filter & Sort Results';
     });
 
     tvBtn.addEventListener('click', () => {
@@ -414,7 +414,7 @@ function attachEventListeners() {
         movieFilters.style.display = 'none';
         tvFilters.style.display = 'none';
         peopleFilters.style.display = 'none';
-        toggleFiltersBtn.textContent = 'Filter Results';
+        toggleFiltersBtn.textContent = 'Filter & Sort Results';
     });
 
     peopleBtn.addEventListener('click', () => {
@@ -424,7 +424,7 @@ function attachEventListeners() {
         movieFilters.style.display = 'none';
         tvFilters.style.display = 'none';
         peopleFilters.style.display = 'none';
-        toggleFiltersBtn.textContent = 'Filter Results';
+        toggleFiltersBtn.textContent = 'Filter & Sort Results';
     });
 
     toggleFiltersBtn.addEventListener('click', () => {
@@ -529,10 +529,26 @@ document.addEventListener('DOMContentLoaded', function() {
             toggleFiltersBtn.textContent = 'Close Filters';
         }
         else {
-            toggleFiltersBtn.textContent = 'Filter Results';
+            toggleFiltersBtn.textContent = 'Filter & Sort Results';
         }
     });
 
+    document.getElementById('sort-movie').addEventListener('change', () => {
+        movieSortChanged = true;
+        showResults('movie');
+    });
+
+    document.getElementById('sort-tv').addEventListener('change', () => {
+        tvSortChanged = true;
+        showResults('tv');
+    });
+
+    document.getElementById('sort-people').addEventListener('change', () => {
+        peopleSortChanged = true;
+        showResults('person');
+    });
+
+
     document.querySelectorAll('.category-buttons button').forEach(button => {
         button.addEventListener('click', function() {
             currentCategory = this.getAttribute('data-category');
@@ -540,6 +556,10 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 });
 
+let movieSortChanged = false;
+let tvSortChanged = false;
+let peopleSortChanged = false;
+
 function attachArrowKeyNavigation() {
     const categories = ['movie', 'tv', 'person'];
     let currentIndex = 0;
@@ -580,6 +600,23 @@ function getMovieVerseData(input) {
     return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
 }
 
+function sortResults(results, sortBy) {
+    if (!sortBy) return results;
+
+    const [property, order] = sortBy.split('.');
+    results.sort((a, b) => {
+        let propA = (property === 'release_date' || property === 'first_air_date') ? new Date(a[property]) : a[property];
+        let propB = (property === 'release_date' || property === 'first_air_date') ? new Date(b[property]) : b[property];
+
+        if (order === 'asc') {
+            return propA > propB ? 1 : propA < propB ? -1 : 0;
+        } else {
+            return propA < propB ? 1 : propA > propB ? -1 : 0;
+        }
+    });
+    return results;
+}
+
 async function showResults(category) {
     showSpinner();
     localStorage.setItem('selectedCategory', category);
@@ -591,6 +628,17 @@ async function showResults(category) {
     const code = getMovieCode();
     const baseApiUrl = `https://${getMovieVerseData()}/3`;
     let url = `${baseApiUrl}/search/${category}?${generateMovieNames()}${code}&query=${encodeURIComponent(searchQuery)}`;
+    let sortValue = '';
+
+    if (category === 'movie') {
+        sortValue = document.getElementById('sort-movie').value;
+    }
+    else if (category === 'tv') {
+        sortValue = document.getElementById('sort-tv').value;
+    }
+    else if (category === 'person') {
+        sortValue = document.getElementById('sort-people').value;
+    }
 
     try {
         const response = await fetch(url);
@@ -652,6 +700,12 @@ async function showResults(category) {
             });
         }
 
+        if ((category === 'movie' && movieSortChanged) ||
+            (category === 'tv' && tvSortChanged) ||
+            (category === 'person' && peopleSortChanged)) {
+            data.results = sortResults(data.results, sortValue);
+        }
+
         displayResults(data.results, category, searchQuery);
     }
     catch (error) {
diff --git a/MovieVerse-Mobile/.gitignore b/MovieVerse-Mobile/.gitignore
index 1cfe9bba..8b137891 100644
--- a/MovieVerse-Mobile/.gitignore
+++ b/MovieVerse-Mobile/.gitignore
@@ -1 +1 @@
-platforms
+
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/trivia.css b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/trivia.css
index 59bb2d77..a9c7716e 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/trivia.css
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/trivia.css
@@ -962,6 +962,88 @@ main {
     background-color: #ff8623;
 }
 
+.side-nav {
+    position: fixed;
+    left: -250px;
+    top: 0;
+    width: 250px;
+    height: 100%;
+    background-color: #373b69;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    overflow-y: auto;
+    transition: left 0.39s;
+    z-index: 1000;
+}
+
+.side-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.side-nav ul li {
+    padding: 15px 20px;
+    border-radius: 8px;
+    text-align: left;
+}
+
+.side-nav ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding-left: 5px;
+}
+
+.side-nav ul li a:hover {
+    background-color: #ff8623;
+    border-radius: 8px;
+}
+
+.nav-toggle {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 1.5rem;
+    top: 5px;
+    left: 15px;
+    border-radius: 8px;
+    padding: 3.5px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    display: flex;
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    padding-left: 4.25px;
+}
+
+.nav-toggle i {
+    line-height: inherit;
+}
+
+.nav-toggle:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#button-remove {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#button-remove:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
 @media (max-width: 900px) {
     #profileBtn {
         display: none;
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/about.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/about.html
index f8948cc1..915c6280 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/about.html
@@ -169,6 +169,23 @@
                 bottom: 70px;
             }
         }
+
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+
+        .highlight2 {
+            color: orange;
+        }
+
+        .highlight2:hover {
+            color: #ff8623;
+        }
     </style>
 </head>
 
@@ -221,7 +238,7 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -264,10 +281,10 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002;">
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight">vieV</span>erse Menu
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
             </div>
         </a>
 
@@ -285,10 +302,10 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="#subheading4">Useful Links</a></li>
             <li><a href="terms-of-service.html">Terms of Service</a></li>
             <li><a href="privacy-policy.html">Privacy Policy</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
             <li><a href="sign-in.html">Sign In</a></li>
             <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
 
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/actor-details.html
index 1ee35dd6..9cf910bc 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/actor-details.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/actor-details.html
@@ -230,7 +230,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/analytics.html
index 413312dc..10c4f815 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/analytics.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/analytics.html
@@ -309,7 +309,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             </h1>
         </a>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -351,7 +351,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002;">
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/api_fails.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/api_fails.html
index 5bd353e2..80e3184f 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/api_fails.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/api_fails.html
@@ -483,7 +483,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -560,19 +560,6 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
         }
 
-        function updateClock() {
-            var now = new Date();
-            var hours = now.getHours();
-            var minutes = now.getMinutes();
-            hours = hours < 10 ? '0' + hours : hours;
-            minutes = minutes < 10 ? '0' + minutes : minutes;
-            var timeString = hours + ':' + minutes;
-            document.getElementById('clock').innerHTML = timeString;
-        }
-
-        setInterval(updateClock, 1000);
-        window.onload = updateClock;
-
         document.getElementById('settings-btn').addEventListener('click', () => {
             window.location.href = 'settings.html';
         });
@@ -581,7 +568,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             applySettings();
 
             function applySettings() {
-                const defaultBg = '../../images/universe-1.png';
+                const defaultBg = '../../images/universe-1.webp';
                 const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
@@ -1075,4 +1062,4 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chat.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chat.html
index c513caff..01d7d12b 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chat.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chat.html
@@ -491,7 +491,7 @@ <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chatbot.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chatbot.html
index 893885e4..40b2a891 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chatbot.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chatbot.html
@@ -192,6 +192,10 @@
             background-color: #f4f4f4 !important;
         }
 
+        #homepage-header {
+            margin-top: -10px;
+        }
+
         @media (max-width: 767px) {
             #google_translate_element {
                 bottom: 120px;
@@ -200,6 +204,10 @@
             #translate_control {
                 bottom: 70px;
             }
+
+            #homepage-header {
+                margin-top: 10px;
+            }
         }
     </style>
 </head>
@@ -246,13 +254,18 @@
             }, { passive: true });
         })
     </script>
-    <header style="margin-top: 10px !important;">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+    <header id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
 
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
@@ -268,7 +281,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
 
-        <form id="form1">
+        <form id="form1" style="margin-top: 20px">
             <div class="search-container">
                 <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
                 <button type="button" id="button-search" onclick="handleSearch()">Search</button>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/christopher-nolan.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/christopher-nolan.html
index 19153d77..2874ec08 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/christopher-nolan.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/christopher-nolan.html
@@ -214,7 +214,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/company-details.html
index b5f51c7e..f70294c3 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/company-details.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/company-details.html
@@ -229,7 +229,7 @@ <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/create-account.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/create-account.html
index 04465d60..47a7d740 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/create-account.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/create-account.html
@@ -295,7 +295,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/director-details.html
index a09e5ac8..23839b49 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/director-details.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/director-details.html
@@ -223,7 +223,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/favorites.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/favorites.html
index 684fa44b..08cdac01 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/favorites.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/favorites.html
@@ -351,11 +351,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             </h1>
         </div>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
 
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()" style="z-index: 1000000">
+            <i class="fas fa-bars"></i>
+        </button>
+
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
@@ -384,6 +388,26 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         </form>
     </header>
 
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul id="watchlist-links" style="overflow-y: auto">
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
     <div class="watchlist-buttons-container">
         <button id="create-watchlist-btn">Create Watch Lists</button>
         <button id="edit-watchlist-btn">Edit Watch Lists</button>
@@ -530,7 +554,168 @@ <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
         <span>Menu</span>
     </button>
 
+    <script type="module">
+        import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js';
+        import { getFirestore, doc, setDoc, collection, updateDoc, getDocs, getDoc, query, where, orderBy, writeBatch, deleteDoc } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js';
+
+        let initialMoviesSelection = [];
+        let initialTVSeriesSelection = [];
+
+        function translateFBC(value) {
+            return atob(value);
+        }
+
+        function getFBConfig1() {
+            const fbConfig1 = "QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw==";
+            return translateFBC(fbConfig1);
+        }
+
+        function getFBConfig2() {
+            const fbConfig2 = "bW92aWV2ZXJzZS1hcHAuZmlyZWJhc2VhcHAuY29t";
+            return translateFBC(fbConfig2);
+        }
+
+        function getFBConfig3() {
+            const fbConfig3 = "bW92aWV2ZXJzZS1hcHAuYXBwc3BvdC5jb20=";
+            return translateFBC(fbConfig3);
+        }
+
+        function getFBConfig4() {
+            const fbConfig4 = "ODAyOTQzNzE4ODcx";
+            return translateFBC(fbConfig4);
+        }
+
+        function getFBConfig5() {
+            const fbConfig5 = "MTo4MDI5NDM3MTg4NzE6d2ViOjQ4YmM5MTZjYzk5ZTI3MjQyMTI3OTI=";
+            return translateFBC(fbConfig5);
+        }
+
+        const firebaseConfig = {
+            apiKey: getFBConfig1(),
+            authDomain: getFBConfig2(),
+            projectId: "movieverse-app",
+            storageBucket: getFBConfig3(),
+            messagingSenderId: getFBConfig4(),
+            appId: getFBConfig5()
+        };
+
+        const app = initializeApp(firebaseConfig);
+        const db = getFirestore(app);
+
+        async function loadNavWatchlistLinks() {
+            const navList = document.getElementById('watchlist-links');
+            const firstStaticItem = navList.querySelector('li');
+
+            try {
+                showSpinner();
+
+                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+                let watchlists = [];
+
+                if (currentUserEmail) {
+                    const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
+                    const querySnapshot = await getDocs(q);
+                    watchlists = querySnapshot.docs.map(doc => ({ id: doc.id, name: doc.data().name }));
+                }
+                else {
+                    watchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
+                }
+
+                watchlists.push({ name: "Favorite Movies", id: "favorites-watchlist" });
+                watchlists.push({ name: "Favorite TV Series", id: "favorites-tvseries-watchlist" });
+
+                navList.querySelectorAll('li.dynamic').forEach(li => li.remove());
+
+                let counter = 1;
+
+                watchlists.forEach(watchlist => {
+                    const listItem = document.createElement('li');
+                    listItem.className = 'dynamic';
+                    const link = document.createElement('a');
+                    link.href = `#${watchlist.name.replace(/\s+/g, '-').toLowerCase()}`;
+
+                    if (watchlist.name !== "Favorite Movies" && watchlist.name !== "Favorite TV Series") {
+                        link.textContent = `Watchlist ${counter}: ${watchlist.name}`;
+                        counter++;
+                    }
+                    else {
+                        link.textContent = watchlist.name;
+                    }
+
+                    listItem.appendChild(link);
+                    navList.insertBefore(listItem, firstStaticItem);
+                });
+
+                hideSpinner();
+                assignIdsToWatchlists();
+            }
+            catch (error) {
+                console.error('Error loading watchlists for navigation:', error);
+                hideSpinner();
+            }
+        }
+
+        function assignIdsToWatchlists() {
+            document.querySelectorAll('.watchlist').forEach(watchlist => {
+                const title = watchlist.querySelector('.watchlist-title').textContent.trim();
+                if (!watchlist.id) {
+                    watchlist.id = title.replace(/\s+/g, '-').toLowerCase();
+                }
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', loadNavWatchlistLinks);
+    </script>
+
     <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        document.addEventListener('click', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            const navToggle = document.getElementById('nav-toggle');
+            if (!sideNav.contains(event.target) && !navToggle.contains(event.target) && sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
         function handleSignInOut() {
             const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
 
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/feedback.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/feedback.html
index 10755163..2eb1f580 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/feedback.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/feedback.html
@@ -550,7 +550,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/inception.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/inception.html
index 556a38d9..897d13a4 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/inception.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/inception.html
@@ -219,7 +219,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/leonardo-dicaprio.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
index 994b0594..18a4d369 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
@@ -214,7 +214,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-details.html
index 00e12abc..fbc846ba 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-details.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-details.html
@@ -277,7 +277,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-match.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-match.html
index 4de6e5d2..d0a7a52a 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-match.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-match.html
@@ -213,7 +213,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-timeline.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-timeline.html
index 3621d4ed..0feef768 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-timeline.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-timeline.html
@@ -171,6 +171,29 @@
                 bottom: 70px;
             }
         }
+
+        .load-more-container {
+            width: 100%;
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        .load-more-container button {
+            margin: 10px auto;
+            background-color: #7378c5;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font: inherit;
+            display: block;
+            transition: background-color 0.3s ease;
+        }
+
+        .load-more-container button:hover {
+            background-color: #ff8623;
+        }
     </style>
 </head>
 
@@ -223,7 +246,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -266,7 +289,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </div>
             <button id="clear-search-btn" style="display: none; color: white">Clear Search Results</button>
         </div>
-        <div class="center-container1">
+        <div class="center-container1" id="center-container1">
             <main id="results" style="scroll-behavior: smooth">
                 <!-- Movies will be dynamically loaded here -->
             </main>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/notifications.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/notifications.html
index 08a810b3..cc233067 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/notifications.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/notifications.html
@@ -329,7 +329,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -368,7 +368,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
 
     <main>
         <section id="newFeatures">
-            <h2>New Features</h2>
+            <h2 style="cursor: pointer">New Features</h2>
             <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
             <ul>
                 <li><strong>Enhanced Search Functionality:</strong> Our new search engine supports advanced filters for genres, ratings, and release years.</li>
@@ -385,7 +385,7 @@ <h2>New Features</h2>
         </section>
 
         <section id="newReleases">
-            <h2>New Releases</h2>
+            <h2 style="cursor: pointer">New Releases</h2>
 
             <h3>Since Your Last Visit</h3>
             <ul id="releasesSinceLastVisit"></ul>
@@ -406,7 +406,7 @@ <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
         </section>
 
         <section id="tipsTricks">
-            <h2>Tips & Tricks</h2>
+            <h2 style="cursor: pointer">Tips & Tricks</h2>
             <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
             <ul>
                 <li><strong>Creating Custom Watchlists:</strong> Learn how to create personalized watchlists to keep track of your favorite movies.</li>
@@ -422,7 +422,7 @@ <h2>Tips & Tricks</h2>
         </section>
 
         <section id="popularActors">
-            <h2>Popular Actors</h2>
+            <h2 style="cursor: pointer">Popular Actors</h2>
             <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -431,7 +431,7 @@ <h2>Popular Actors</h2>
         </section>
 
         <section id="popularDirectors">
-            <h2>Popular Directors</h2>
+            <h2 style="cursor: pointer">Popular Directors</h2>
             <p style="color: black">Discover the visionaries behind the camera who are shaping the world of cinema!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -474,6 +474,36 @@ <h2>Popular Directors</h2>
     </script>
 
     <script>
+        document.getElementById('newFeatures').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('newReleases').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularActors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
+        });
+
         document.addEventListener('DOMContentLoaded', function() {
             const updateDateElements = document.querySelectorAll('.updateDate');
             const today = new Date();
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/offline.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/offline.html
index 0eacaba4..2569eb2c 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/offline.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/offline.html
@@ -251,7 +251,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/privacy-policy.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/privacy-policy.html
index 8635f2f9..c6e4567c 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/privacy-policy.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/privacy-policy.html
@@ -255,7 +255,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -1145,5 +1145,4 @@ <h2 style="color: white">Cookies and Web Beacons</h2>
     </script>
 
 </body>
-
 </html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/reset-password.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/reset-password.html
index 3a0bcc02..b954599e 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/reset-password.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/reset-password.html
@@ -276,7 +276,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/search.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/search.html
index f005f746..688aef0a 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/search.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/search.html
@@ -213,7 +213,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -255,9 +255,9 @@ <h2 id="search-results-label">Search Results</h2>
             <button data-category="person" onclick="showResults('person')">People</button>
         </div>
 
-        <button id="toggle-filters-btn">Filter Results</button>
+        <button id="toggle-filters-btn">Filter & Sort Results</button>
 
-        <!-- Filters for Movies and TV Series -->
+        <!-- Filters for Movies -->
         <div id="movie-tv-filters" style="display: none;">
             <p style="font-weight: bold">Filters Search Results</p>
             <label for="genre-filter">Genre:</label>
@@ -279,6 +279,19 @@ <h2 id="search-results-label">Search Results</h2>
             <span id="rating-value" style="color: white; font: inherit"></span>
 
             <button id="reset-filters">Reset Filters</button>
+
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+
+            <label for="sort-movie"><strong>Sort by:</strong></label>
+            <select id="sort-movie" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="release_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="release_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
         </div>
 
         <!-- Filters for TV Series -->
@@ -303,6 +316,19 @@ <h2 id="search-results-label">Search Results</h2>
             <span id="rating-tv-value" style="color: white; font: inherit"></span>
 
             <button id="reset-filters">Reset Filters</button>
+
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+
+            <label for="sort-tv"><strong>Sort by:</strong></label>
+            <select id="sort-tv" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="first_air_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="first_air_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
         </div>
 
         <!-- Filters for People -->
@@ -328,6 +354,15 @@ <h2 id="search-results-label">Search Results</h2>
 
             <span id="popularity-value" style="color: white; font: inherit"></span>
             <button id="reset-filters">Reset Filters</button>
+
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+
+            <label for="sort-people"><strong>Sort by:</strong></label>
+            <select id="sort-people" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+            </select>
         </div>
 
         <div id="movie-match-container1" class="movie-match-container1">
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/settings.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/settings.html
index 8d2f1031..f698b5ef 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/settings.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/settings.html
@@ -364,7 +364,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/sign-in.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/sign-in.html
index d803f4a6..67a21c66 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/sign-in.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/sign-in.html
@@ -298,7 +298,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/support.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/support.html
index 1d242cfa..b64a996b 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/support.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/support.html
@@ -536,7 +536,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/terms-of-service.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/terms-of-service.html
index c626fb77..3a8ed6ef 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/terms-of-service.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/terms-of-service.html
@@ -248,7 +248,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -704,7 +704,7 @@ <h2 style="color: white">Contact Us</h2>
             applySettings();
 
             function applySettings() {
-                const defaultBg = '../../images/universe-1.png';
+                const defaultBg = '../../images/universe-1.webp';
                 const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/trivia.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/trivia.html
index 07e4afea..3a6cd2b5 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/trivia.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/trivia.html
@@ -82,10 +82,10 @@
             margin-top: 25px;
         }
 
-        @keyframes fadeInUp {
+        @keyframes dropIn {
             0% {
                 opacity: 0;
-                transform: translateY(20px);
+                transform: translateY(-50px);
             }
             100% {
                 opacity: 1;
@@ -96,7 +96,7 @@
         #my-heading {
             margin-bottom: -25px;
             opacity: 0;
-            animation: fadeInUp 1s ease forwards;
+            animation: dropIn 1s ease forwards;
         }
 
         #my-heading a {
@@ -109,7 +109,7 @@
         .highlight {
             display: inline-block;
             opacity: 0;
-            animation: fadeInUp 1s ease forwards 0.5s;
+            animation: dropIn 1s ease forwards 0.5s;
         }
 
         #form {
@@ -243,6 +243,35 @@
                 bottom: 70px;
             }
         }
+
+        #local-time {
+            cursor: pointer;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1.5s;
+        }
+
+        #local-time p,
+        #local-time div {
+            opacity: 0;
+            animation: dropIn 1s ease forwards 2s;
+        }
+
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+
+        .highlight2 {
+            color: orange;
+        }
+
+        .highlight2:hover {
+            color: #ff8623;
+        }
     </style>
 </head>
 
@@ -295,6 +324,11 @@ <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="not
             </a>
         </h1>
 
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
@@ -305,6 +339,10 @@ <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="not
             <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
         </button>
 
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+
         <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
@@ -323,6 +361,36 @@ <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="not
         </form>
     </header>
 
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul style="overflow-y: auto">
+            <li><a href="#0">Question 1</a></li>
+            <li><a href="#1">Question 2</a></li>
+            <li><a href="#2">Question 3</a></li>
+            <li><a href="#3">Question 4</a></li>
+            <li><a href="#4">Question 5</a></li>
+            <li><a href="#5">Question 6</a></li>
+            <li><a href="#6">Question 7</a></li>
+            <li><a href="#7">Question 8</a></li>
+            <li><a href="#8">Question 9</a></li>
+            <li><a href="#9">Question 10</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
     <div>
         <div style="font-weight: bold; font-size: 32px" id="trivia-label">Movie Trivia Quiz</div>
     </div>
@@ -373,6 +441,54 @@ <h3>Trivia Results</h3>
     <script src="../js/quiz.js" type="module"></script>
 
     <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        document.addEventListener('click', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            const navToggle = document.getElementById('nav-toggle');
+            if (!sideNav.contains(event.target) && !navToggle.contains(event.target) && sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
         document.getElementById('settings-btn').addEventListener('click', () => {
             window.location.href = 'settings.html';
         });
@@ -448,6 +564,224 @@ <h3>Trivia Results</h3>
         <span>Menu</span>
     </button>
 
+    <script>
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+
     <script>
         async function showMovieOfTheDay() {
             const year = new Date().getFullYear();
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/tv-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/tv-details.html
index 286b8aaa..3d453df7 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/tv-details.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/tv-details.html
@@ -296,7 +296,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/user-profile.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/user-profile.html
index 01427ac8..7ddee20b 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/user-profile.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/user-profile.html
@@ -447,7 +447,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chatbot.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chatbot.js
index 800a1f5f..9df8ce8b 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chatbot.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chatbot.js
@@ -10,6 +10,7 @@ const movieCode = {
 
 function getMovieCode() {
     return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+    return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
 }
 
 function generateMovieNames(input) {
@@ -167,11 +168,34 @@ async function rotateUserStats() {
 
 function updateMovieVisitCount(movieId, movieTitle) {
     let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+    let uniqueMoviesViewed = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+
     if (!movieVisits[movieId]) {
         movieVisits[movieId] = { count: 0, title: movieTitle };
     }
     movieVisits[movieId].count += 1;
+
+    if (!uniqueMoviesViewed.includes(movieId)) {
+        uniqueMoviesViewed.push(movieId);
+    }
+
     localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+    localStorage.setItem('uniqueMoviesViewed', JSON.stringify(uniqueMoviesViewed));
+}
+
+function getMostVisitedDirector() {
+    const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+    let mostVisitedDirector = '';
+    let maxVisits = 0;
+
+    for (const directorId in directorVisits) {
+        if (directorVisits[directorId].count > maxVisits) {
+            mostVisitedDirector = directorVisits[directorId].name;
+            maxVisits = directorVisits[directorId].count;
+        }
+    }
+
+    return mostVisitedDirector || 'Not Available';
 }
 
 function getMostVisitedMovie() {
@@ -204,26 +228,12 @@ function getMostVisitedActor() {
     return mostVisitedActor || 'Not Available';
 }
 
-function getMostVisitedDirector() {
-    const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-    let mostVisitedDirector = '';
-    let maxVisits = 0;
-
-    for (const directorId in directorVisits) {
-        if (directorVisits[directorId].count > maxVisits) {
-            mostVisitedDirector = directorVisits[directorId].name;
-            maxVisits = directorVisits[directorId].count;
-        }
-    }
-
-    return mostVisitedDirector || 'Not Available';
-}
-
 function getTriviaAccuracy() {
     let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
     if (triviaStats.totalAttempted === 0) {
         return 'No trivia attempted';
     }
+
     let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
     return `${accuracy.toFixed(1)}% accuracy`;
 }
@@ -250,6 +260,34 @@ function getMostCommonGenre() {
 
 document.addEventListener('DOMContentLoaded', rotateUserStats);
 
+function updateUniqueDirectorsViewed(directorId) {
+    let viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+    if (!viewedDirectors.includes(directorId)) {
+        viewedDirectors.push(directorId);
+        localStorage.setItem('uniqueDirectorsViewed', JSON.stringify(viewedDirectors));
+    }
+}
+
+function updateActorVisitCount(actorId, actorName) {
+    let actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+    if (!actorVisits[actorId]) {
+        actorVisits[actorId] = { count: 0, name: actorName };
+    }
+
+    actorVisits[actorId].count += 1;
+    localStorage.setItem('actorVisits', JSON.stringify(actorVisits));
+}
+
+function updateDirectorVisitCount(directorId, directorName) {
+    let directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+    if (!directorVisits[directorId]) {
+        directorVisits[directorId] = { count: 0, name: directorName };
+    }
+
+    directorVisits[directorId].count += 1;
+    localStorage.setItem('directorVisits', JSON.stringify(directorVisits));
+}
+
 function calculateMoviesToDisplay() {
     const screenWidth = window.innerWidth;
     if (screenWidth <= 689.9) return 10; // 1 movie per row
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/favorites.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/favorites.js
index 55518565..06efb125 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/favorites.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/favorites.js
@@ -559,18 +559,35 @@ async function populateCreateModalWithFavorites() {
 }
 
 document.getElementById('create-watchlist-form').addEventListener('submit', async function(e) {
+    e.preventDefault();
+    showSpinner();
+
+    const name = document.getElementById('new-watchlist-name').value.trim();
+    const description = document.getElementById('new-watchlist-description').value;
+    const selectedMovies = Array.from(document.querySelectorAll('#movies-container input:checked')).map(checkbox => checkbox.value);
+    const selectedTVSeries = Array.from(document.querySelectorAll('#tvseries-container input:checked')).map(checkbox => checkbox.value);
+    const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+
+    let isDuplicate = false;
+    let maxOrder = 0;
+    let localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
+
     try {
-        showSpinner();
-        e.preventDefault();
+        if (currentUserEmail) {
+            const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
+            const querySnapshot = await getDocs(q);
+            maxOrder = querySnapshot.docs.reduce((max, docSnapshot) => Math.max(max, docSnapshot.data().order || 0), 0);
+            isDuplicate = querySnapshot.docs.some(doc => doc.data().name.toLowerCase() === name.toLowerCase());
+        }
+        else {
+            isDuplicate = localWatchlists.some(watchlist => watchlist.name.toLowerCase() === name.toLowerCase());
+        }
 
-        const name = document.getElementById('new-watchlist-name').value;
-        const description = document.getElementById('new-watchlist-description').value;
-        const selectedMovies = Array.from(document.querySelectorAll('#movies-container input:checked')).map(checkbox => checkbox.value);
-        const selectedTVSeries = Array.from(document.querySelectorAll('#tvseries-container input:checked')).map(checkbox => checkbox.value);
-        const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-        const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
-        const querySnapshot = await getDocs(q);
-        let maxOrder = querySnapshot.docs.reduce((max, docSnapshot) => Math.max(max, docSnapshot.data().order || 0), 0);
+        if (isDuplicate) {
+            alert('A watchlist with this name already exists. Please choose a different name.');
+            hideSpinner();
+            return;
+        }
 
         if (currentUserEmail) {
             const newWatchlistRef = doc(collection(db, 'watchlists'));
@@ -586,7 +603,6 @@ document.getElementById('create-watchlist-form').addEventListener('submit', asyn
             });
         }
         else {
-            const localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
             localWatchlists.push({
                 id: `local-${new Date().getTime()}`,
                 userEmail: "",
@@ -599,20 +615,10 @@ document.getElementById('create-watchlist-form').addEventListener('submit', asyn
             });
             localStorage.setItem('localWatchlists', JSON.stringify(localWatchlists));
         }
-
-        closeModal('create-watchlist-modal');
-        loadWatchLists();
-        hideSpinner();
-        window.location.reload();
     }
     catch (error) {
         if (error.code === 'resource-exhausted') {
             console.log('Firebase quota exceeded. Using localStorage for watchlists.');
-            const name = document.getElementById('new-watchlist-name').value;
-            const description = document.getElementById('new-watchlist-description').value;
-            const selectedMovies = Array.from(document.querySelectorAll('#movies-container input:checked')).map(checkbox => checkbox.value);
-            const selectedTVSeries = Array.from(document.querySelectorAll('#tvseries-container input:checked')).map(checkbox => checkbox.value);
-            const localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
             localWatchlists.push({
                 id: `local-${new Date().getTime()}`,
                 userEmail: "",
@@ -624,12 +630,17 @@ document.getElementById('create-watchlist-form').addEventListener('submit', asyn
                 createdAt: new Date().toISOString()
             });
             localStorage.setItem('localWatchlists', JSON.stringify(localWatchlists));
-            closeModal('create-watchlist-modal');
-            loadWatchLists();
-            hideSpinner();
-            window.location.reload();
+        }
+        else {
+            console.error('An error occurred while creating a watchlist:', error);
+            alert('Failed to create the watchlist due to an error.');
         }
     }
+
+    closeModal('create-watchlist-modal');
+    loadWatchLists();
+    hideSpinner();
+    window.location.reload();
 });
 
 async function getTVSeriesTitle(seriesId) {
@@ -1368,7 +1379,7 @@ async function loadWatchLists() {
         if (favorites.length > 0) {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-watchlist';
+            favoritesDiv.id = 'favorite-movies';
 
             const title = document.createElement('h3');
             title.textContent = "Favorite Movies";
@@ -1395,7 +1406,7 @@ async function loadWatchLists() {
         else {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-watchlist';
+            favoritesDiv.id = 'favorite-movies';
             favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite Movies</h3><p style="text-align: center">No favorite movies added yet.</p></div>';
             displaySection.appendChild(favoritesDiv);
         }
@@ -1403,7 +1414,7 @@ async function loadWatchLists() {
         if (favoritesTVSeries.length > 0) {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-tvseries-watchlist';
+            favoritesDiv.id = 'favorite-tv-series';
 
             const title = document.createElement('h3');
             title.textContent = "Favorite TV Series";
@@ -1430,7 +1441,7 @@ async function loadWatchLists() {
         else {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-tvseries-watchlist';
+            favoritesDiv.id = 'favorite-tv-series';
             favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite TV Series</h3><p style="text-align: center">No favorite TV series added yet.</p></div>';
             displaySection.appendChild(favoritesDiv);
         }
@@ -1464,7 +1475,7 @@ async function loadWatchLists() {
             if (favorites.length > 0) {
                 const favoritesDiv = document.createElement('div');
                 favoritesDiv.className = 'watchlist';
-                favoritesDiv.id = 'favorites-watchlist';
+                favoritesDiv.id = 'favorite-movies';
 
                 const title = document.createElement('h3');
                 title.textContent = "Favorite Movies";
@@ -1491,7 +1502,7 @@ async function loadWatchLists() {
             else {
                 const favoritesDiv = document.createElement('div');
                 favoritesDiv.className = 'watchlist';
-                favoritesDiv.id = 'favorites-watchlist';
+                favoritesDiv.id = 'favorite-movies';
                 favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite Movies</h3><p style="text-align: center">No favorite movies added yet.</p></div>';
                 displaySection.appendChild(favoritesDiv);
             }
@@ -1499,7 +1510,7 @@ async function loadWatchLists() {
             if (favoritesTVSeries.length > 0) {
                 const favoritesDiv = document.createElement('div');
                 favoritesDiv.className = 'watchlist';
-                favoritesDiv.id = 'favorites-tvseries-watchlist';
+                favoritesDiv.id = 'favorite-tv-series';
 
                 const title = document.createElement('h3');
                 title.textContent = "Favorite TV Series";
@@ -1524,6 +1535,14 @@ async function loadWatchLists() {
                 displaySection.appendChild(favoritesDiv);
                 hideSpinner();
             }
+            else {
+                const favoritesDiv = document.createElement('div');
+                favoritesDiv.className = 'watchlist';
+                favoritesDiv.id = 'favorite-tv-series';
+                favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite TV Series</h3><p style="text-align: center">No favorite TV series added yet.</p></div>';
+                displaySection.appendChild(favoritesDiv);
+                hideSpinner();
+            }
         }
         else {
             console.error('An error occurred:', error);
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-timeline.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-timeline.js
index eabe2e25..a69d9e14 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-timeline.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-timeline.js
@@ -330,8 +330,24 @@ function updateMovies() {
     }
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
+function showMovies(movies, mainElement, startYear, endYear, append) {
+    showSpinner();
+
+    if (!append) {
+        mainElement.innerHTML = '';
+        const header = document.createElement('h2');
+        header.style.textAlign = "center";
+        header.style.marginTop = "20px";
+        header.style.marginBottom = "20px";
+        header.style.color = "#ff8623";
+        header.style.fontSize = '23px';
+        header.textContent = `Movies from ${startYear} to ${endYear}`;
+        const centerContainer1 = document.getElementById('center-container1');
+        centerContainer1.innerHTML = '';
+        centerContainer1.appendChild(header);
+        centerContainer1.appendChild(mainElement);
+    }
+
     movies.forEach(movie => {
         const movieEl = document.createElement('div');
         movieEl.classList.add('movie');
@@ -368,19 +384,52 @@ function showMovies(movies, mainElement) {
         movieEl.style.cursor = 'pointer';
         mainElement.appendChild(movieEl);
     });
+    const centerContainer1 = document.getElementById('center-container1');
+    centerContainer1.appendChild(mainElement);
+
+    createLoadMoreButton(startYear, endYear, mainElement);
+    hideSpinner();
 }
 
-document.getElementById('clear-search-btn').addEventListener('click', () => {
-    location.reload();
-});
+function createLoadMoreButton(startYear, endYear, mainElement) {
+    const existingButtonDiv = mainElement.querySelector('.load-more-container');
+    if (existingButtonDiv) {
+        mainElement.removeChild(existingButtonDiv);
+    }
+
+    const buttonContainer = document.createElement('div');
+    buttonContainer.className = 'load-more-container';
+    buttonContainer.style.width = '100%';
+    buttonContainer.style.textAlign = 'center';
+    buttonContainer.style.marginTop = '20px';
+
+    const moreButton = document.createElement('button');
+    moreButton.textContent = "Get More Movies in this Period";
+    moreButton.style.margin = '10px auto';
 
-async function fetchMoviesByTimePeriod(startYear, endYear) {
-    const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&primary_release_date.gte=${startYear}-01-01&primary_release_date.lte=${endYear}-12-31`;
+    moreButton.addEventListener('click', function() {
+        currentPage++;
+        fetchMoviesByTimePeriod(startYear, endYear, true);
+    });
+
+    buttonContainer.appendChild(moreButton);
+    mainElement.appendChild(buttonContainer);
+}
+
+let currentPage = 1;
+
+async function fetchMoviesByTimePeriod(startYear, endYear, append = false) {
+    const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&primary_release_date.gte=${startYear}-01-01&primary_release_date.lte=${endYear}-12-31&page=${currentPage}`;
     const response = await fetch(url);
     const data = await response.json();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const moviesToShow = data.results.slice(0, numberOfMovies);
-    showMovies(moviesToShow, document.getElementById('results'));
+    const moviesToShow = data.results;
+
+    if (append) {
+        showMovies(moviesToShow, document.getElementById('results'), startYear, endYear, true);
+    }
+    else {
+        showMovies(moviesToShow, document.getElementById('results'), startYear, endYear, false);
+    }
 }
 
 document.getElementById('load-movies').addEventListener('click', () => {
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/search.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/search.js
index c4f9c0b1..cd665e18 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/search.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/search.js
@@ -404,7 +404,7 @@ function attachEventListeners() {
         movieFilters.style.display = 'none';
         tvFilters.style.display = 'none';
         peopleFilters.style.display = 'none';
-        toggleFiltersBtn.textContent = 'Filter Results';
+        toggleFiltersBtn.textContent = 'Filter & Sort Results';
     });
 
     tvBtn.addEventListener('click', () => {
@@ -414,7 +414,7 @@ function attachEventListeners() {
         movieFilters.style.display = 'none';
         tvFilters.style.display = 'none';
         peopleFilters.style.display = 'none';
-        toggleFiltersBtn.textContent = 'Filter Results';
+        toggleFiltersBtn.textContent = 'Filter & Sort Results';
     });
 
     peopleBtn.addEventListener('click', () => {
@@ -424,7 +424,7 @@ function attachEventListeners() {
         movieFilters.style.display = 'none';
         tvFilters.style.display = 'none';
         peopleFilters.style.display = 'none';
-        toggleFiltersBtn.textContent = 'Filter Results';
+        toggleFiltersBtn.textContent = 'Filter & Sort Results';
     });
 
     toggleFiltersBtn.addEventListener('click', () => {
@@ -529,10 +529,26 @@ document.addEventListener('DOMContentLoaded', function() {
             toggleFiltersBtn.textContent = 'Close Filters';
         }
         else {
-            toggleFiltersBtn.textContent = 'Filter Results';
+            toggleFiltersBtn.textContent = 'Filter & Sort Results';
         }
     });
 
+    document.getElementById('sort-movie').addEventListener('change', () => {
+        movieSortChanged = true;
+        showResults('movie');
+    });
+
+    document.getElementById('sort-tv').addEventListener('change', () => {
+        tvSortChanged = true;
+        showResults('tv');
+    });
+
+    document.getElementById('sort-people').addEventListener('change', () => {
+        peopleSortChanged = true;
+        showResults('person');
+    });
+
+
     document.querySelectorAll('.category-buttons button').forEach(button => {
         button.addEventListener('click', function() {
             currentCategory = this.getAttribute('data-category');
@@ -540,6 +556,10 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 });
 
+let movieSortChanged = false;
+let tvSortChanged = false;
+let peopleSortChanged = false;
+
 function attachArrowKeyNavigation() {
     const categories = ['movie', 'tv', 'person'];
     let currentIndex = 0;
@@ -580,6 +600,23 @@ function getMovieVerseData(input) {
     return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
 }
 
+function sortResults(results, sortBy) {
+    if (!sortBy) return results;
+
+    const [property, order] = sortBy.split('.');
+    results.sort((a, b) => {
+        let propA = (property === 'release_date' || property === 'first_air_date') ? new Date(a[property]) : a[property];
+        let propB = (property === 'release_date' || property === 'first_air_date') ? new Date(b[property]) : b[property];
+
+        if (order === 'asc') {
+            return propA > propB ? 1 : propA < propB ? -1 : 0;
+        } else {
+            return propA < propB ? 1 : propA > propB ? -1 : 0;
+        }
+    });
+    return results;
+}
+
 async function showResults(category) {
     showSpinner();
     localStorage.setItem('selectedCategory', category);
@@ -591,6 +628,17 @@ async function showResults(category) {
     const code = getMovieCode();
     const baseApiUrl = `https://${getMovieVerseData()}/3`;
     let url = `${baseApiUrl}/search/${category}?${generateMovieNames()}${code}&query=${encodeURIComponent(searchQuery)}`;
+    let sortValue = '';
+
+    if (category === 'movie') {
+        sortValue = document.getElementById('sort-movie').value;
+    }
+    else if (category === 'tv') {
+        sortValue = document.getElementById('sort-tv').value;
+    }
+    else if (category === 'person') {
+        sortValue = document.getElementById('sort-people').value;
+    }
 
     try {
         const response = await fetch(url);
@@ -652,6 +700,12 @@ async function showResults(category) {
             });
         }
 
+        if ((category === 'movie' && movieSortChanged) ||
+            (category === 'tv' && tvSortChanged) ||
+            (category === 'person' && peopleSortChanged)) {
+            data.results = sortResults(data.results, sortValue);
+        }
+
         displayResults(data.results, category, searchQuery);
     }
     catch (error) {
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html
index 2728fa60..c8072b93 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/index.html
@@ -604,7 +604,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats on this machine">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats on this machine">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -642,7 +642,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
         </div>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002000;">
+    <nav id="side-nav" class="side-nav" style="z-index: 10000000">
         <a id="heading-href" class="notranslate" style="cursor: pointer; text-align: center">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px !important; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/trivia.css b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/trivia.css
index 59bb2d77..a9c7716e 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/trivia.css
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/trivia.css
@@ -962,6 +962,88 @@ main {
     background-color: #ff8623;
 }
 
+.side-nav {
+    position: fixed;
+    left: -250px;
+    top: 0;
+    width: 250px;
+    height: 100%;
+    background-color: #373b69;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    overflow-y: auto;
+    transition: left 0.39s;
+    z-index: 1000;
+}
+
+.side-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.side-nav ul li {
+    padding: 15px 20px;
+    border-radius: 8px;
+    text-align: left;
+}
+
+.side-nav ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding-left: 5px;
+}
+
+.side-nav ul li a:hover {
+    background-color: #ff8623;
+    border-radius: 8px;
+}
+
+.nav-toggle {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 1.5rem;
+    top: 5px;
+    left: 15px;
+    border-radius: 8px;
+    padding: 3.5px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    display: flex;
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    padding-left: 4.25px;
+}
+
+.nav-toggle i {
+    line-height: inherit;
+}
+
+.nav-toggle:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#button-remove {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#button-remove:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
 @media (max-width: 900px) {
     #profileBtn {
         display: none;
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/about.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/about.html
index f8948cc1..915c6280 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/about.html
@@ -169,6 +169,23 @@
                 bottom: 70px;
             }
         }
+
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+
+        .highlight2 {
+            color: orange;
+        }
+
+        .highlight2:hover {
+            color: #ff8623;
+        }
     </style>
 </head>
 
@@ -221,7 +238,7 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -264,10 +281,10 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002;">
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight">vieV</span>erse Menu
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
             </div>
         </a>
 
@@ -285,10 +302,10 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="#subheading4">Useful Links</a></li>
             <li><a href="terms-of-service.html">Terms of Service</a></li>
             <li><a href="privacy-policy.html">Privacy Policy</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
             <li><a href="sign-in.html">Sign In</a></li>
             <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
 
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/actor-details.html
index 1ee35dd6..9cf910bc 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/actor-details.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/actor-details.html
@@ -230,7 +230,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/analytics.html
index 413312dc..10c4f815 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/analytics.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/analytics.html
@@ -309,7 +309,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             </h1>
         </a>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -351,7 +351,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002;">
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/api_fails.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/api_fails.html
index 5bd353e2..80e3184f 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/api_fails.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/api_fails.html
@@ -483,7 +483,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -560,19 +560,6 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
         }
 
-        function updateClock() {
-            var now = new Date();
-            var hours = now.getHours();
-            var minutes = now.getMinutes();
-            hours = hours < 10 ? '0' + hours : hours;
-            minutes = minutes < 10 ? '0' + minutes : minutes;
-            var timeString = hours + ':' + minutes;
-            document.getElementById('clock').innerHTML = timeString;
-        }
-
-        setInterval(updateClock, 1000);
-        window.onload = updateClock;
-
         document.getElementById('settings-btn').addEventListener('click', () => {
             window.location.href = 'settings.html';
         });
@@ -581,7 +568,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             applySettings();
 
             function applySettings() {
-                const defaultBg = '../../images/universe-1.png';
+                const defaultBg = '../../images/universe-1.webp';
                 const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
@@ -1075,4 +1062,4 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chat.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chat.html
index c513caff..01d7d12b 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chat.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chat.html
@@ -491,7 +491,7 @@ <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chatbot.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chatbot.html
index 893885e4..40b2a891 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chatbot.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chatbot.html
@@ -192,6 +192,10 @@
             background-color: #f4f4f4 !important;
         }
 
+        #homepage-header {
+            margin-top: -10px;
+        }
+
         @media (max-width: 767px) {
             #google_translate_element {
                 bottom: 120px;
@@ -200,6 +204,10 @@
             #translate_control {
                 bottom: 70px;
             }
+
+            #homepage-header {
+                margin-top: 10px;
+            }
         }
     </style>
 </head>
@@ -246,13 +254,18 @@
             }, { passive: true });
         })
     </script>
-    <header style="margin-top: 10px !important;">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+    <header id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
 
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
@@ -268,7 +281,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
 
-        <form id="form1">
+        <form id="form1" style="margin-top: 20px">
             <div class="search-container">
                 <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
                 <button type="button" id="button-search" onclick="handleSearch()">Search</button>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/christopher-nolan.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/christopher-nolan.html
index 19153d77..2874ec08 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/christopher-nolan.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/christopher-nolan.html
@@ -214,7 +214,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/company-details.html
index b5f51c7e..f70294c3 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/company-details.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/company-details.html
@@ -229,7 +229,7 @@ <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/create-account.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/create-account.html
index 04465d60..47a7d740 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/create-account.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/create-account.html
@@ -295,7 +295,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/director-details.html
index a09e5ac8..23839b49 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/director-details.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/director-details.html
@@ -223,7 +223,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/favorites.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/favorites.html
index 684fa44b..08cdac01 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/favorites.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/favorites.html
@@ -351,11 +351,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             </h1>
         </div>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
 
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()" style="z-index: 1000000">
+            <i class="fas fa-bars"></i>
+        </button>
+
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
@@ -384,6 +388,26 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         </form>
     </header>
 
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul id="watchlist-links" style="overflow-y: auto">
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
     <div class="watchlist-buttons-container">
         <button id="create-watchlist-btn">Create Watch Lists</button>
         <button id="edit-watchlist-btn">Edit Watch Lists</button>
@@ -530,7 +554,168 @@ <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
         <span>Menu</span>
     </button>
 
+    <script type="module">
+        import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js';
+        import { getFirestore, doc, setDoc, collection, updateDoc, getDocs, getDoc, query, where, orderBy, writeBatch, deleteDoc } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js';
+
+        let initialMoviesSelection = [];
+        let initialTVSeriesSelection = [];
+
+        function translateFBC(value) {
+            return atob(value);
+        }
+
+        function getFBConfig1() {
+            const fbConfig1 = "QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw==";
+            return translateFBC(fbConfig1);
+        }
+
+        function getFBConfig2() {
+            const fbConfig2 = "bW92aWV2ZXJzZS1hcHAuZmlyZWJhc2VhcHAuY29t";
+            return translateFBC(fbConfig2);
+        }
+
+        function getFBConfig3() {
+            const fbConfig3 = "bW92aWV2ZXJzZS1hcHAuYXBwc3BvdC5jb20=";
+            return translateFBC(fbConfig3);
+        }
+
+        function getFBConfig4() {
+            const fbConfig4 = "ODAyOTQzNzE4ODcx";
+            return translateFBC(fbConfig4);
+        }
+
+        function getFBConfig5() {
+            const fbConfig5 = "MTo4MDI5NDM3MTg4NzE6d2ViOjQ4YmM5MTZjYzk5ZTI3MjQyMTI3OTI=";
+            return translateFBC(fbConfig5);
+        }
+
+        const firebaseConfig = {
+            apiKey: getFBConfig1(),
+            authDomain: getFBConfig2(),
+            projectId: "movieverse-app",
+            storageBucket: getFBConfig3(),
+            messagingSenderId: getFBConfig4(),
+            appId: getFBConfig5()
+        };
+
+        const app = initializeApp(firebaseConfig);
+        const db = getFirestore(app);
+
+        async function loadNavWatchlistLinks() {
+            const navList = document.getElementById('watchlist-links');
+            const firstStaticItem = navList.querySelector('li');
+
+            try {
+                showSpinner();
+
+                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+                let watchlists = [];
+
+                if (currentUserEmail) {
+                    const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
+                    const querySnapshot = await getDocs(q);
+                    watchlists = querySnapshot.docs.map(doc => ({ id: doc.id, name: doc.data().name }));
+                }
+                else {
+                    watchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
+                }
+
+                watchlists.push({ name: "Favorite Movies", id: "favorites-watchlist" });
+                watchlists.push({ name: "Favorite TV Series", id: "favorites-tvseries-watchlist" });
+
+                navList.querySelectorAll('li.dynamic').forEach(li => li.remove());
+
+                let counter = 1;
+
+                watchlists.forEach(watchlist => {
+                    const listItem = document.createElement('li');
+                    listItem.className = 'dynamic';
+                    const link = document.createElement('a');
+                    link.href = `#${watchlist.name.replace(/\s+/g, '-').toLowerCase()}`;
+
+                    if (watchlist.name !== "Favorite Movies" && watchlist.name !== "Favorite TV Series") {
+                        link.textContent = `Watchlist ${counter}: ${watchlist.name}`;
+                        counter++;
+                    }
+                    else {
+                        link.textContent = watchlist.name;
+                    }
+
+                    listItem.appendChild(link);
+                    navList.insertBefore(listItem, firstStaticItem);
+                });
+
+                hideSpinner();
+                assignIdsToWatchlists();
+            }
+            catch (error) {
+                console.error('Error loading watchlists for navigation:', error);
+                hideSpinner();
+            }
+        }
+
+        function assignIdsToWatchlists() {
+            document.querySelectorAll('.watchlist').forEach(watchlist => {
+                const title = watchlist.querySelector('.watchlist-title').textContent.trim();
+                if (!watchlist.id) {
+                    watchlist.id = title.replace(/\s+/g, '-').toLowerCase();
+                }
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', loadNavWatchlistLinks);
+    </script>
+
     <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        document.addEventListener('click', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            const navToggle = document.getElementById('nav-toggle');
+            if (!sideNav.contains(event.target) && !navToggle.contains(event.target) && sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
         function handleSignInOut() {
             const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
 
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/feedback.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/feedback.html
index 10755163..2eb1f580 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/feedback.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/feedback.html
@@ -550,7 +550,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/inception.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/inception.html
index 556a38d9..897d13a4 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/inception.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/inception.html
@@ -219,7 +219,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/leonardo-dicaprio.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
index 994b0594..18a4d369 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
@@ -214,7 +214,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-details.html
index 00e12abc..fbc846ba 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-details.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-details.html
@@ -277,7 +277,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-match.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-match.html
index 4de6e5d2..d0a7a52a 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-match.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-match.html
@@ -213,7 +213,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-timeline.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-timeline.html
index 3621d4ed..0feef768 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-timeline.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-timeline.html
@@ -171,6 +171,29 @@
                 bottom: 70px;
             }
         }
+
+        .load-more-container {
+            width: 100%;
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        .load-more-container button {
+            margin: 10px auto;
+            background-color: #7378c5;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font: inherit;
+            display: block;
+            transition: background-color 0.3s ease;
+        }
+
+        .load-more-container button:hover {
+            background-color: #ff8623;
+        }
     </style>
 </head>
 
@@ -223,7 +246,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -266,7 +289,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </div>
             <button id="clear-search-btn" style="display: none; color: white">Clear Search Results</button>
         </div>
-        <div class="center-container1">
+        <div class="center-container1" id="center-container1">
             <main id="results" style="scroll-behavior: smooth">
                 <!-- Movies will be dynamically loaded here -->
             </main>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/notifications.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/notifications.html
index 08a810b3..cc233067 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/notifications.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/notifications.html
@@ -329,7 +329,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -368,7 +368,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
 
     <main>
         <section id="newFeatures">
-            <h2>New Features</h2>
+            <h2 style="cursor: pointer">New Features</h2>
             <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
             <ul>
                 <li><strong>Enhanced Search Functionality:</strong> Our new search engine supports advanced filters for genres, ratings, and release years.</li>
@@ -385,7 +385,7 @@ <h2>New Features</h2>
         </section>
 
         <section id="newReleases">
-            <h2>New Releases</h2>
+            <h2 style="cursor: pointer">New Releases</h2>
 
             <h3>Since Your Last Visit</h3>
             <ul id="releasesSinceLastVisit"></ul>
@@ -406,7 +406,7 @@ <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
         </section>
 
         <section id="tipsTricks">
-            <h2>Tips & Tricks</h2>
+            <h2 style="cursor: pointer">Tips & Tricks</h2>
             <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
             <ul>
                 <li><strong>Creating Custom Watchlists:</strong> Learn how to create personalized watchlists to keep track of your favorite movies.</li>
@@ -422,7 +422,7 @@ <h2>Tips & Tricks</h2>
         </section>
 
         <section id="popularActors">
-            <h2>Popular Actors</h2>
+            <h2 style="cursor: pointer">Popular Actors</h2>
             <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -431,7 +431,7 @@ <h2>Popular Actors</h2>
         </section>
 
         <section id="popularDirectors">
-            <h2>Popular Directors</h2>
+            <h2 style="cursor: pointer">Popular Directors</h2>
             <p style="color: black">Discover the visionaries behind the camera who are shaping the world of cinema!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -474,6 +474,36 @@ <h2>Popular Directors</h2>
     </script>
 
     <script>
+        document.getElementById('newFeatures').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('newReleases').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularActors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
+        });
+
         document.addEventListener('DOMContentLoaded', function() {
             const updateDateElements = document.querySelectorAll('.updateDate');
             const today = new Date();
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/offline.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/offline.html
index 0eacaba4..2569eb2c 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/offline.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/offline.html
@@ -251,7 +251,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/privacy-policy.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/privacy-policy.html
index 8635f2f9..c6e4567c 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/privacy-policy.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/privacy-policy.html
@@ -255,7 +255,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -1145,5 +1145,4 @@ <h2 style="color: white">Cookies and Web Beacons</h2>
     </script>
 
 </body>
-
 </html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/reset-password.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/reset-password.html
index 3a0bcc02..b954599e 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/reset-password.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/reset-password.html
@@ -276,7 +276,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/search.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/search.html
index f005f746..688aef0a 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/search.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/search.html
@@ -213,7 +213,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -255,9 +255,9 @@ <h2 id="search-results-label">Search Results</h2>
             <button data-category="person" onclick="showResults('person')">People</button>
         </div>
 
-        <button id="toggle-filters-btn">Filter Results</button>
+        <button id="toggle-filters-btn">Filter & Sort Results</button>
 
-        <!-- Filters for Movies and TV Series -->
+        <!-- Filters for Movies -->
         <div id="movie-tv-filters" style="display: none;">
             <p style="font-weight: bold">Filters Search Results</p>
             <label for="genre-filter">Genre:</label>
@@ -279,6 +279,19 @@ <h2 id="search-results-label">Search Results</h2>
             <span id="rating-value" style="color: white; font: inherit"></span>
 
             <button id="reset-filters">Reset Filters</button>
+
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+
+            <label for="sort-movie"><strong>Sort by:</strong></label>
+            <select id="sort-movie" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="release_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="release_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
         </div>
 
         <!-- Filters for TV Series -->
@@ -303,6 +316,19 @@ <h2 id="search-results-label">Search Results</h2>
             <span id="rating-tv-value" style="color: white; font: inherit"></span>
 
             <button id="reset-filters">Reset Filters</button>
+
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+
+            <label for="sort-tv"><strong>Sort by:</strong></label>
+            <select id="sort-tv" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="first_air_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="first_air_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
         </div>
 
         <!-- Filters for People -->
@@ -328,6 +354,15 @@ <h2 id="search-results-label">Search Results</h2>
 
             <span id="popularity-value" style="color: white; font: inherit"></span>
             <button id="reset-filters">Reset Filters</button>
+
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+
+            <label for="sort-people"><strong>Sort by:</strong></label>
+            <select id="sort-people" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+            </select>
         </div>
 
         <div id="movie-match-container1" class="movie-match-container1">
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/settings.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/settings.html
index 8d2f1031..f698b5ef 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/settings.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/settings.html
@@ -364,7 +364,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/sign-in.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/sign-in.html
index d803f4a6..67a21c66 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/sign-in.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/sign-in.html
@@ -298,7 +298,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/support.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/support.html
index 1d242cfa..b64a996b 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/support.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/support.html
@@ -536,7 +536,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/terms-of-service.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/terms-of-service.html
index c626fb77..3a8ed6ef 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/terms-of-service.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/terms-of-service.html
@@ -248,7 +248,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -704,7 +704,7 @@ <h2 style="color: white">Contact Us</h2>
             applySettings();
 
             function applySettings() {
-                const defaultBg = '../../images/universe-1.png';
+                const defaultBg = '../../images/universe-1.webp';
                 const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/trivia.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/trivia.html
index 07e4afea..3a6cd2b5 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/trivia.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/trivia.html
@@ -82,10 +82,10 @@
             margin-top: 25px;
         }
 
-        @keyframes fadeInUp {
+        @keyframes dropIn {
             0% {
                 opacity: 0;
-                transform: translateY(20px);
+                transform: translateY(-50px);
             }
             100% {
                 opacity: 1;
@@ -96,7 +96,7 @@
         #my-heading {
             margin-bottom: -25px;
             opacity: 0;
-            animation: fadeInUp 1s ease forwards;
+            animation: dropIn 1s ease forwards;
         }
 
         #my-heading a {
@@ -109,7 +109,7 @@
         .highlight {
             display: inline-block;
             opacity: 0;
-            animation: fadeInUp 1s ease forwards 0.5s;
+            animation: dropIn 1s ease forwards 0.5s;
         }
 
         #form {
@@ -243,6 +243,35 @@
                 bottom: 70px;
             }
         }
+
+        #local-time {
+            cursor: pointer;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1.5s;
+        }
+
+        #local-time p,
+        #local-time div {
+            opacity: 0;
+            animation: dropIn 1s ease forwards 2s;
+        }
+
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+
+        .highlight2 {
+            color: orange;
+        }
+
+        .highlight2:hover {
+            color: #ff8623;
+        }
     </style>
 </head>
 
@@ -295,6 +324,11 @@ <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="not
             </a>
         </h1>
 
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
@@ -305,6 +339,10 @@ <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="not
             <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
         </button>
 
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+
         <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
@@ -323,6 +361,36 @@ <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="not
         </form>
     </header>
 
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul style="overflow-y: auto">
+            <li><a href="#0">Question 1</a></li>
+            <li><a href="#1">Question 2</a></li>
+            <li><a href="#2">Question 3</a></li>
+            <li><a href="#3">Question 4</a></li>
+            <li><a href="#4">Question 5</a></li>
+            <li><a href="#5">Question 6</a></li>
+            <li><a href="#6">Question 7</a></li>
+            <li><a href="#7">Question 8</a></li>
+            <li><a href="#8">Question 9</a></li>
+            <li><a href="#9">Question 10</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
     <div>
         <div style="font-weight: bold; font-size: 32px" id="trivia-label">Movie Trivia Quiz</div>
     </div>
@@ -373,6 +441,54 @@ <h3>Trivia Results</h3>
     <script src="../js/quiz.js" type="module"></script>
 
     <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        document.addEventListener('click', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            const navToggle = document.getElementById('nav-toggle');
+            if (!sideNav.contains(event.target) && !navToggle.contains(event.target) && sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
         document.getElementById('settings-btn').addEventListener('click', () => {
             window.location.href = 'settings.html';
         });
@@ -448,6 +564,224 @@ <h3>Trivia Results</h3>
         <span>Menu</span>
     </button>
 
+    <script>
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+
     <script>
         async function showMovieOfTheDay() {
             const year = new Date().getFullYear();
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/tv-details.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/tv-details.html
index 286b8aaa..3d453df7 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/tv-details.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/tv-details.html
@@ -296,7 +296,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/user-profile.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/user-profile.html
index 01427ac8..7ddee20b 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/user-profile.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/user-profile.html
@@ -447,7 +447,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chatbot.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chatbot.js
index 800a1f5f..9df8ce8b 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chatbot.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chatbot.js
@@ -10,6 +10,7 @@ const movieCode = {
 
 function getMovieCode() {
     return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+    return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
 }
 
 function generateMovieNames(input) {
@@ -167,11 +168,34 @@ async function rotateUserStats() {
 
 function updateMovieVisitCount(movieId, movieTitle) {
     let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+    let uniqueMoviesViewed = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+
     if (!movieVisits[movieId]) {
         movieVisits[movieId] = { count: 0, title: movieTitle };
     }
     movieVisits[movieId].count += 1;
+
+    if (!uniqueMoviesViewed.includes(movieId)) {
+        uniqueMoviesViewed.push(movieId);
+    }
+
     localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+    localStorage.setItem('uniqueMoviesViewed', JSON.stringify(uniqueMoviesViewed));
+}
+
+function getMostVisitedDirector() {
+    const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+    let mostVisitedDirector = '';
+    let maxVisits = 0;
+
+    for (const directorId in directorVisits) {
+        if (directorVisits[directorId].count > maxVisits) {
+            mostVisitedDirector = directorVisits[directorId].name;
+            maxVisits = directorVisits[directorId].count;
+        }
+    }
+
+    return mostVisitedDirector || 'Not Available';
 }
 
 function getMostVisitedMovie() {
@@ -204,26 +228,12 @@ function getMostVisitedActor() {
     return mostVisitedActor || 'Not Available';
 }
 
-function getMostVisitedDirector() {
-    const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-    let mostVisitedDirector = '';
-    let maxVisits = 0;
-
-    for (const directorId in directorVisits) {
-        if (directorVisits[directorId].count > maxVisits) {
-            mostVisitedDirector = directorVisits[directorId].name;
-            maxVisits = directorVisits[directorId].count;
-        }
-    }
-
-    return mostVisitedDirector || 'Not Available';
-}
-
 function getTriviaAccuracy() {
     let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
     if (triviaStats.totalAttempted === 0) {
         return 'No trivia attempted';
     }
+
     let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
     return `${accuracy.toFixed(1)}% accuracy`;
 }
@@ -250,6 +260,34 @@ function getMostCommonGenre() {
 
 document.addEventListener('DOMContentLoaded', rotateUserStats);
 
+function updateUniqueDirectorsViewed(directorId) {
+    let viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+    if (!viewedDirectors.includes(directorId)) {
+        viewedDirectors.push(directorId);
+        localStorage.setItem('uniqueDirectorsViewed', JSON.stringify(viewedDirectors));
+    }
+}
+
+function updateActorVisitCount(actorId, actorName) {
+    let actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+    if (!actorVisits[actorId]) {
+        actorVisits[actorId] = { count: 0, name: actorName };
+    }
+
+    actorVisits[actorId].count += 1;
+    localStorage.setItem('actorVisits', JSON.stringify(actorVisits));
+}
+
+function updateDirectorVisitCount(directorId, directorName) {
+    let directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+    if (!directorVisits[directorId]) {
+        directorVisits[directorId] = { count: 0, name: directorName };
+    }
+
+    directorVisits[directorId].count += 1;
+    localStorage.setItem('directorVisits', JSON.stringify(directorVisits));
+}
+
 function calculateMoviesToDisplay() {
     const screenWidth = window.innerWidth;
     if (screenWidth <= 689.9) return 10; // 1 movie per row
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/favorites.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/favorites.js
index 55518565..06efb125 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/favorites.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/favorites.js
@@ -559,18 +559,35 @@ async function populateCreateModalWithFavorites() {
 }
 
 document.getElementById('create-watchlist-form').addEventListener('submit', async function(e) {
+    e.preventDefault();
+    showSpinner();
+
+    const name = document.getElementById('new-watchlist-name').value.trim();
+    const description = document.getElementById('new-watchlist-description').value;
+    const selectedMovies = Array.from(document.querySelectorAll('#movies-container input:checked')).map(checkbox => checkbox.value);
+    const selectedTVSeries = Array.from(document.querySelectorAll('#tvseries-container input:checked')).map(checkbox => checkbox.value);
+    const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+
+    let isDuplicate = false;
+    let maxOrder = 0;
+    let localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
+
     try {
-        showSpinner();
-        e.preventDefault();
+        if (currentUserEmail) {
+            const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
+            const querySnapshot = await getDocs(q);
+            maxOrder = querySnapshot.docs.reduce((max, docSnapshot) => Math.max(max, docSnapshot.data().order || 0), 0);
+            isDuplicate = querySnapshot.docs.some(doc => doc.data().name.toLowerCase() === name.toLowerCase());
+        }
+        else {
+            isDuplicate = localWatchlists.some(watchlist => watchlist.name.toLowerCase() === name.toLowerCase());
+        }
 
-        const name = document.getElementById('new-watchlist-name').value;
-        const description = document.getElementById('new-watchlist-description').value;
-        const selectedMovies = Array.from(document.querySelectorAll('#movies-container input:checked')).map(checkbox => checkbox.value);
-        const selectedTVSeries = Array.from(document.querySelectorAll('#tvseries-container input:checked')).map(checkbox => checkbox.value);
-        const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-        const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
-        const querySnapshot = await getDocs(q);
-        let maxOrder = querySnapshot.docs.reduce((max, docSnapshot) => Math.max(max, docSnapshot.data().order || 0), 0);
+        if (isDuplicate) {
+            alert('A watchlist with this name already exists. Please choose a different name.');
+            hideSpinner();
+            return;
+        }
 
         if (currentUserEmail) {
             const newWatchlistRef = doc(collection(db, 'watchlists'));
@@ -586,7 +603,6 @@ document.getElementById('create-watchlist-form').addEventListener('submit', asyn
             });
         }
         else {
-            const localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
             localWatchlists.push({
                 id: `local-${new Date().getTime()}`,
                 userEmail: "",
@@ -599,20 +615,10 @@ document.getElementById('create-watchlist-form').addEventListener('submit', asyn
             });
             localStorage.setItem('localWatchlists', JSON.stringify(localWatchlists));
         }
-
-        closeModal('create-watchlist-modal');
-        loadWatchLists();
-        hideSpinner();
-        window.location.reload();
     }
     catch (error) {
         if (error.code === 'resource-exhausted') {
             console.log('Firebase quota exceeded. Using localStorage for watchlists.');
-            const name = document.getElementById('new-watchlist-name').value;
-            const description = document.getElementById('new-watchlist-description').value;
-            const selectedMovies = Array.from(document.querySelectorAll('#movies-container input:checked')).map(checkbox => checkbox.value);
-            const selectedTVSeries = Array.from(document.querySelectorAll('#tvseries-container input:checked')).map(checkbox => checkbox.value);
-            const localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
             localWatchlists.push({
                 id: `local-${new Date().getTime()}`,
                 userEmail: "",
@@ -624,12 +630,17 @@ document.getElementById('create-watchlist-form').addEventListener('submit', asyn
                 createdAt: new Date().toISOString()
             });
             localStorage.setItem('localWatchlists', JSON.stringify(localWatchlists));
-            closeModal('create-watchlist-modal');
-            loadWatchLists();
-            hideSpinner();
-            window.location.reload();
+        }
+        else {
+            console.error('An error occurred while creating a watchlist:', error);
+            alert('Failed to create the watchlist due to an error.');
         }
     }
+
+    closeModal('create-watchlist-modal');
+    loadWatchLists();
+    hideSpinner();
+    window.location.reload();
 });
 
 async function getTVSeriesTitle(seriesId) {
@@ -1368,7 +1379,7 @@ async function loadWatchLists() {
         if (favorites.length > 0) {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-watchlist';
+            favoritesDiv.id = 'favorite-movies';
 
             const title = document.createElement('h3');
             title.textContent = "Favorite Movies";
@@ -1395,7 +1406,7 @@ async function loadWatchLists() {
         else {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-watchlist';
+            favoritesDiv.id = 'favorite-movies';
             favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite Movies</h3><p style="text-align: center">No favorite movies added yet.</p></div>';
             displaySection.appendChild(favoritesDiv);
         }
@@ -1403,7 +1414,7 @@ async function loadWatchLists() {
         if (favoritesTVSeries.length > 0) {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-tvseries-watchlist';
+            favoritesDiv.id = 'favorite-tv-series';
 
             const title = document.createElement('h3');
             title.textContent = "Favorite TV Series";
@@ -1430,7 +1441,7 @@ async function loadWatchLists() {
         else {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-tvseries-watchlist';
+            favoritesDiv.id = 'favorite-tv-series';
             favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite TV Series</h3><p style="text-align: center">No favorite TV series added yet.</p></div>';
             displaySection.appendChild(favoritesDiv);
         }
@@ -1464,7 +1475,7 @@ async function loadWatchLists() {
             if (favorites.length > 0) {
                 const favoritesDiv = document.createElement('div');
                 favoritesDiv.className = 'watchlist';
-                favoritesDiv.id = 'favorites-watchlist';
+                favoritesDiv.id = 'favorite-movies';
 
                 const title = document.createElement('h3');
                 title.textContent = "Favorite Movies";
@@ -1491,7 +1502,7 @@ async function loadWatchLists() {
             else {
                 const favoritesDiv = document.createElement('div');
                 favoritesDiv.className = 'watchlist';
-                favoritesDiv.id = 'favorites-watchlist';
+                favoritesDiv.id = 'favorite-movies';
                 favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite Movies</h3><p style="text-align: center">No favorite movies added yet.</p></div>';
                 displaySection.appendChild(favoritesDiv);
             }
@@ -1499,7 +1510,7 @@ async function loadWatchLists() {
             if (favoritesTVSeries.length > 0) {
                 const favoritesDiv = document.createElement('div');
                 favoritesDiv.className = 'watchlist';
-                favoritesDiv.id = 'favorites-tvseries-watchlist';
+                favoritesDiv.id = 'favorite-tv-series';
 
                 const title = document.createElement('h3');
                 title.textContent = "Favorite TV Series";
@@ -1524,6 +1535,14 @@ async function loadWatchLists() {
                 displaySection.appendChild(favoritesDiv);
                 hideSpinner();
             }
+            else {
+                const favoritesDiv = document.createElement('div');
+                favoritesDiv.className = 'watchlist';
+                favoritesDiv.id = 'favorite-tv-series';
+                favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite TV Series</h3><p style="text-align: center">No favorite TV series added yet.</p></div>';
+                displaySection.appendChild(favoritesDiv);
+                hideSpinner();
+            }
         }
         else {
             console.error('An error occurred:', error);
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-timeline.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-timeline.js
index eabe2e25..a69d9e14 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-timeline.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-timeline.js
@@ -330,8 +330,24 @@ function updateMovies() {
     }
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
+function showMovies(movies, mainElement, startYear, endYear, append) {
+    showSpinner();
+
+    if (!append) {
+        mainElement.innerHTML = '';
+        const header = document.createElement('h2');
+        header.style.textAlign = "center";
+        header.style.marginTop = "20px";
+        header.style.marginBottom = "20px";
+        header.style.color = "#ff8623";
+        header.style.fontSize = '23px';
+        header.textContent = `Movies from ${startYear} to ${endYear}`;
+        const centerContainer1 = document.getElementById('center-container1');
+        centerContainer1.innerHTML = '';
+        centerContainer1.appendChild(header);
+        centerContainer1.appendChild(mainElement);
+    }
+
     movies.forEach(movie => {
         const movieEl = document.createElement('div');
         movieEl.classList.add('movie');
@@ -368,19 +384,52 @@ function showMovies(movies, mainElement) {
         movieEl.style.cursor = 'pointer';
         mainElement.appendChild(movieEl);
     });
+    const centerContainer1 = document.getElementById('center-container1');
+    centerContainer1.appendChild(mainElement);
+
+    createLoadMoreButton(startYear, endYear, mainElement);
+    hideSpinner();
 }
 
-document.getElementById('clear-search-btn').addEventListener('click', () => {
-    location.reload();
-});
+function createLoadMoreButton(startYear, endYear, mainElement) {
+    const existingButtonDiv = mainElement.querySelector('.load-more-container');
+    if (existingButtonDiv) {
+        mainElement.removeChild(existingButtonDiv);
+    }
+
+    const buttonContainer = document.createElement('div');
+    buttonContainer.className = 'load-more-container';
+    buttonContainer.style.width = '100%';
+    buttonContainer.style.textAlign = 'center';
+    buttonContainer.style.marginTop = '20px';
+
+    const moreButton = document.createElement('button');
+    moreButton.textContent = "Get More Movies in this Period";
+    moreButton.style.margin = '10px auto';
 
-async function fetchMoviesByTimePeriod(startYear, endYear) {
-    const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&primary_release_date.gte=${startYear}-01-01&primary_release_date.lte=${endYear}-12-31`;
+    moreButton.addEventListener('click', function() {
+        currentPage++;
+        fetchMoviesByTimePeriod(startYear, endYear, true);
+    });
+
+    buttonContainer.appendChild(moreButton);
+    mainElement.appendChild(buttonContainer);
+}
+
+let currentPage = 1;
+
+async function fetchMoviesByTimePeriod(startYear, endYear, append = false) {
+    const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&primary_release_date.gte=${startYear}-01-01&primary_release_date.lte=${endYear}-12-31&page=${currentPage}`;
     const response = await fetch(url);
     const data = await response.json();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const moviesToShow = data.results.slice(0, numberOfMovies);
-    showMovies(moviesToShow, document.getElementById('results'));
+    const moviesToShow = data.results;
+
+    if (append) {
+        showMovies(moviesToShow, document.getElementById('results'), startYear, endYear, true);
+    }
+    else {
+        showMovies(moviesToShow, document.getElementById('results'), startYear, endYear, false);
+    }
 }
 
 document.getElementById('load-movies').addEventListener('click', () => {
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/search.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/search.js
index c4f9c0b1..cd665e18 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/search.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/search.js
@@ -404,7 +404,7 @@ function attachEventListeners() {
         movieFilters.style.display = 'none';
         tvFilters.style.display = 'none';
         peopleFilters.style.display = 'none';
-        toggleFiltersBtn.textContent = 'Filter Results';
+        toggleFiltersBtn.textContent = 'Filter & Sort Results';
     });
 
     tvBtn.addEventListener('click', () => {
@@ -414,7 +414,7 @@ function attachEventListeners() {
         movieFilters.style.display = 'none';
         tvFilters.style.display = 'none';
         peopleFilters.style.display = 'none';
-        toggleFiltersBtn.textContent = 'Filter Results';
+        toggleFiltersBtn.textContent = 'Filter & Sort Results';
     });
 
     peopleBtn.addEventListener('click', () => {
@@ -424,7 +424,7 @@ function attachEventListeners() {
         movieFilters.style.display = 'none';
         tvFilters.style.display = 'none';
         peopleFilters.style.display = 'none';
-        toggleFiltersBtn.textContent = 'Filter Results';
+        toggleFiltersBtn.textContent = 'Filter & Sort Results';
     });
 
     toggleFiltersBtn.addEventListener('click', () => {
@@ -529,10 +529,26 @@ document.addEventListener('DOMContentLoaded', function() {
             toggleFiltersBtn.textContent = 'Close Filters';
         }
         else {
-            toggleFiltersBtn.textContent = 'Filter Results';
+            toggleFiltersBtn.textContent = 'Filter & Sort Results';
         }
     });
 
+    document.getElementById('sort-movie').addEventListener('change', () => {
+        movieSortChanged = true;
+        showResults('movie');
+    });
+
+    document.getElementById('sort-tv').addEventListener('change', () => {
+        tvSortChanged = true;
+        showResults('tv');
+    });
+
+    document.getElementById('sort-people').addEventListener('change', () => {
+        peopleSortChanged = true;
+        showResults('person');
+    });
+
+
     document.querySelectorAll('.category-buttons button').forEach(button => {
         button.addEventListener('click', function() {
             currentCategory = this.getAttribute('data-category');
@@ -540,6 +556,10 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 });
 
+let movieSortChanged = false;
+let tvSortChanged = false;
+let peopleSortChanged = false;
+
 function attachArrowKeyNavigation() {
     const categories = ['movie', 'tv', 'person'];
     let currentIndex = 0;
@@ -580,6 +600,23 @@ function getMovieVerseData(input) {
     return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
 }
 
+function sortResults(results, sortBy) {
+    if (!sortBy) return results;
+
+    const [property, order] = sortBy.split('.');
+    results.sort((a, b) => {
+        let propA = (property === 'release_date' || property === 'first_air_date') ? new Date(a[property]) : a[property];
+        let propB = (property === 'release_date' || property === 'first_air_date') ? new Date(b[property]) : b[property];
+
+        if (order === 'asc') {
+            return propA > propB ? 1 : propA < propB ? -1 : 0;
+        } else {
+            return propA < propB ? 1 : propA > propB ? -1 : 0;
+        }
+    });
+    return results;
+}
+
 async function showResults(category) {
     showSpinner();
     localStorage.setItem('selectedCategory', category);
@@ -591,6 +628,17 @@ async function showResults(category) {
     const code = getMovieCode();
     const baseApiUrl = `https://${getMovieVerseData()}/3`;
     let url = `${baseApiUrl}/search/${category}?${generateMovieNames()}${code}&query=${encodeURIComponent(searchQuery)}`;
+    let sortValue = '';
+
+    if (category === 'movie') {
+        sortValue = document.getElementById('sort-movie').value;
+    }
+    else if (category === 'tv') {
+        sortValue = document.getElementById('sort-tv').value;
+    }
+    else if (category === 'person') {
+        sortValue = document.getElementById('sort-people').value;
+    }
 
     try {
         const response = await fetch(url);
@@ -652,6 +700,12 @@ async function showResults(category) {
             });
         }
 
+        if ((category === 'movie' && movieSortChanged) ||
+            (category === 'tv' && tvSortChanged) ||
+            (category === 'person' && peopleSortChanged)) {
+            data.results = sortResults(data.results, sortValue);
+        }
+
         displayResults(data.results, category, searchQuery);
     }
     catch (error) {
diff --git a/MovieVerse-Mobile/platforms/ios/www/index.html b/MovieVerse-Mobile/platforms/ios/www/index.html
index 2728fa60..c8072b93 100644
--- a/MovieVerse-Mobile/platforms/ios/www/index.html
+++ b/MovieVerse-Mobile/platforms/ios/www/index.html
@@ -604,7 +604,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats on this machine">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats on this machine">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -642,7 +642,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
         </div>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002000;">
+    <nav id="side-nav" class="side-nav" style="z-index: 10000000">
         <a id="heading-href" class="notranslate" style="cursor: pointer; text-align: center">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px !important; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/css/trivia.css b/MovieVerse-Mobile/www/MovieVerse-Frontend/css/trivia.css
index 59bb2d77..a9c7716e 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/css/trivia.css
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/css/trivia.css
@@ -962,6 +962,88 @@ main {
     background-color: #ff8623;
 }
 
+.side-nav {
+    position: fixed;
+    left: -250px;
+    top: 0;
+    width: 250px;
+    height: 100%;
+    background-color: #373b69;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    overflow-y: auto;
+    transition: left 0.39s;
+    z-index: 1000;
+}
+
+.side-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.side-nav ul li {
+    padding: 15px 20px;
+    border-radius: 8px;
+    text-align: left;
+}
+
+.side-nav ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding-left: 5px;
+}
+
+.side-nav ul li a:hover {
+    background-color: #ff8623;
+    border-radius: 8px;
+}
+
+.nav-toggle {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 1.5rem;
+    top: 5px;
+    left: 15px;
+    border-radius: 8px;
+    padding: 3.5px;
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    display: flex;
+    position: fixed;
+    justify-content: center;
+    align-items: center;
+    padding-left: 4.25px;
+}
+
+.nav-toggle i {
+    line-height: inherit;
+}
+
+.nav-toggle:hover {
+    background-color: #ff8623;
+    transition: 0.3s ease-in;
+}
+
+#button-remove {
+    color: #171616;
+    background-color: #7378c5;
+    font: inherit;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
+#button-remove:hover {
+    background-color: #ff8623;
+    transition: 0.1s linear;
+}
+
 @media (max-width: 900px) {
     #profileBtn {
         display: none;
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html
index f8948cc1..915c6280 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html
@@ -169,6 +169,23 @@
                 bottom: 70px;
             }
         }
+
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+
+        .highlight2 {
+            color: orange;
+        }
+
+        .highlight2:hover {
+            color: #ff8623;
+        }
     </style>
 </head>
 
@@ -221,7 +238,7 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -264,10 +281,10 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002;">
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
-            <div id="my-heading" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
-                The Mo<span class="highlight">vieV</span>erse Menu
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
             </div>
         </a>
 
@@ -285,10 +302,10 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="#subheading4">Useful Links</a></li>
             <li><a href="terms-of-service.html">Terms of Service</a></li>
             <li><a href="privacy-policy.html">Privacy Policy</a></li>
-            <li><a href="feedback.html">Submit Feedback</a></li>
-            <li><a href="support.html">Contact Support</a></li>
             <li><a href="sign-in.html">Sign In</a></li>
             <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
 
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html
index 1ee35dd6..9cf910bc 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html
@@ -230,7 +230,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html
index 413312dc..10c4f815 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html
@@ -309,7 +309,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             </h1>
         </a>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -351,7 +351,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 90px; right: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002;">
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
         <a id="heading-href" style="cursor: pointer" href="../../index.html" title="Click to go back to the home page">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/api_fails.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/api_fails.html
index 5bd353e2..80e3184f 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/api_fails.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/api_fails.html
@@ -483,7 +483,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -560,19 +560,6 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
         }
 
-        function updateClock() {
-            var now = new Date();
-            var hours = now.getHours();
-            var minutes = now.getMinutes();
-            hours = hours < 10 ? '0' + hours : hours;
-            minutes = minutes < 10 ? '0' + minutes : minutes;
-            var timeString = hours + ':' + minutes;
-            document.getElementById('clock').innerHTML = timeString;
-        }
-
-        setInterval(updateClock, 1000);
-        window.onload = updateClock;
-
         document.getElementById('settings-btn').addEventListener('click', () => {
             window.location.href = 'settings.html';
         });
@@ -581,7 +568,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             applySettings();
 
             function applySettings() {
-                const defaultBg = '../../images/universe-1.png';
+                const defaultBg = '../../images/universe-1.webp';
                 const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
@@ -1075,4 +1062,4 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chat.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chat.html
index c513caff..01d7d12b 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chat.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chat.html
@@ -491,7 +491,7 @@ <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chatbot.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chatbot.html
index 893885e4..40b2a891 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chatbot.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chatbot.html
@@ -192,6 +192,10 @@
             background-color: #f4f4f4 !important;
         }
 
+        #homepage-header {
+            margin-top: -10px;
+        }
+
         @media (max-width: 767px) {
             #google_translate_element {
                 bottom: 120px;
@@ -200,6 +204,10 @@
             #translate_control {
                 bottom: 70px;
             }
+
+            #homepage-header {
+                margin-top: 10px;
+            }
         }
     </style>
 </head>
@@ -246,13 +254,18 @@
             }, { passive: true });
         })
     </script>
-    <header style="margin-top: 10px !important;">
-        <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
+    <header id="homepage-header">
+        <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
 
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
@@ -268,7 +281,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
 
-        <form id="form1">
+        <form id="form1" style="margin-top: 20px">
             <div class="search-container">
                 <input type="text" id="search" placeholder="Search For Films, Actors..." class="search" title="Search for movies, actors, TV series, and more!" />
                 <button type="button" id="button-search" onclick="handleSearch()">Search</button>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/christopher-nolan.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/christopher-nolan.html
index 19153d77..2874ec08 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/christopher-nolan.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/christopher-nolan.html
@@ -214,7 +214,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html
index b5f51c7e..f70294c3 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html
@@ -229,7 +229,7 @@ <h1 id="my-heading" style="margin-bottom: -23px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/create-account.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/create-account.html
index 04465d60..47a7d740 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/create-account.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/create-account.html
@@ -295,7 +295,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html
index a09e5ac8..23839b49 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html
@@ -223,7 +223,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/favorites.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/favorites.html
index 684fa44b..08cdac01 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/favorites.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/favorites.html
@@ -351,11 +351,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             </h1>
         </div>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
 
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()" style="z-index: 1000000">
+            <i class="fas fa-bars"></i>
+        </button>
+
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
@@ -384,6 +388,26 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         </form>
     </header>
 
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul id="watchlist-links" style="overflow-y: auto">
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
     <div class="watchlist-buttons-container">
         <button id="create-watchlist-btn">Create Watch Lists</button>
         <button id="edit-watchlist-btn">Edit Watch Lists</button>
@@ -530,7 +554,168 @@ <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
         <span>Menu</span>
     </button>
 
+    <script type="module">
+        import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js';
+        import { getFirestore, doc, setDoc, collection, updateDoc, getDocs, getDoc, query, where, orderBy, writeBatch, deleteDoc } from 'https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js';
+
+        let initialMoviesSelection = [];
+        let initialTVSeriesSelection = [];
+
+        function translateFBC(value) {
+            return atob(value);
+        }
+
+        function getFBConfig1() {
+            const fbConfig1 = "QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw==";
+            return translateFBC(fbConfig1);
+        }
+
+        function getFBConfig2() {
+            const fbConfig2 = "bW92aWV2ZXJzZS1hcHAuZmlyZWJhc2VhcHAuY29t";
+            return translateFBC(fbConfig2);
+        }
+
+        function getFBConfig3() {
+            const fbConfig3 = "bW92aWV2ZXJzZS1hcHAuYXBwc3BvdC5jb20=";
+            return translateFBC(fbConfig3);
+        }
+
+        function getFBConfig4() {
+            const fbConfig4 = "ODAyOTQzNzE4ODcx";
+            return translateFBC(fbConfig4);
+        }
+
+        function getFBConfig5() {
+            const fbConfig5 = "MTo4MDI5NDM3MTg4NzE6d2ViOjQ4YmM5MTZjYzk5ZTI3MjQyMTI3OTI=";
+            return translateFBC(fbConfig5);
+        }
+
+        const firebaseConfig = {
+            apiKey: getFBConfig1(),
+            authDomain: getFBConfig2(),
+            projectId: "movieverse-app",
+            storageBucket: getFBConfig3(),
+            messagingSenderId: getFBConfig4(),
+            appId: getFBConfig5()
+        };
+
+        const app = initializeApp(firebaseConfig);
+        const db = getFirestore(app);
+
+        async function loadNavWatchlistLinks() {
+            const navList = document.getElementById('watchlist-links');
+            const firstStaticItem = navList.querySelector('li');
+
+            try {
+                showSpinner();
+
+                const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+                let watchlists = [];
+
+                if (currentUserEmail) {
+                    const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
+                    const querySnapshot = await getDocs(q);
+                    watchlists = querySnapshot.docs.map(doc => ({ id: doc.id, name: doc.data().name }));
+                }
+                else {
+                    watchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
+                }
+
+                watchlists.push({ name: "Favorite Movies", id: "favorites-watchlist" });
+                watchlists.push({ name: "Favorite TV Series", id: "favorites-tvseries-watchlist" });
+
+                navList.querySelectorAll('li.dynamic').forEach(li => li.remove());
+
+                let counter = 1;
+
+                watchlists.forEach(watchlist => {
+                    const listItem = document.createElement('li');
+                    listItem.className = 'dynamic';
+                    const link = document.createElement('a');
+                    link.href = `#${watchlist.name.replace(/\s+/g, '-').toLowerCase()}`;
+
+                    if (watchlist.name !== "Favorite Movies" && watchlist.name !== "Favorite TV Series") {
+                        link.textContent = `Watchlist ${counter}: ${watchlist.name}`;
+                        counter++;
+                    }
+                    else {
+                        link.textContent = watchlist.name;
+                    }
+
+                    listItem.appendChild(link);
+                    navList.insertBefore(listItem, firstStaticItem);
+                });
+
+                hideSpinner();
+                assignIdsToWatchlists();
+            }
+            catch (error) {
+                console.error('Error loading watchlists for navigation:', error);
+                hideSpinner();
+            }
+        }
+
+        function assignIdsToWatchlists() {
+            document.querySelectorAll('.watchlist').forEach(watchlist => {
+                const title = watchlist.querySelector('.watchlist-title').textContent.trim();
+                if (!watchlist.id) {
+                    watchlist.id = title.replace(/\s+/g, '-').toLowerCase();
+                }
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', loadNavWatchlistLinks);
+    </script>
+
     <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        document.addEventListener('click', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            const navToggle = document.getElementById('nav-toggle');
+            if (!sideNav.contains(event.target) && !navToggle.contains(event.target) && sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
         function handleSignInOut() {
             const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
 
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/feedback.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/feedback.html
index 10755163..2eb1f580 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/feedback.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/feedback.html
@@ -550,7 +550,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/inception.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/inception.html
index 556a38d9..897d13a4 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/inception.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/inception.html
@@ -219,7 +219,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/leonardo-dicaprio.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
index 994b0594..18a4d369 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
@@ -214,7 +214,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
index 00e12abc..fbc846ba 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
@@ -277,7 +277,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-match.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-match.html
index 4de6e5d2..d0a7a52a 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-match.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-match.html
@@ -213,7 +213,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-timeline.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-timeline.html
index 3621d4ed..0feef768 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-timeline.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-timeline.html
@@ -171,6 +171,29 @@
                 bottom: 70px;
             }
         }
+
+        .load-more-container {
+            width: 100%;
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        .load-more-container button {
+            margin: 10px auto;
+            background-color: #7378c5;
+            color: white;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font: inherit;
+            display: block;
+            transition: background-color 0.3s ease;
+        }
+
+        .load-more-container button:hover {
+            background-color: #ff8623;
+        }
     </style>
 </head>
 
@@ -223,7 +246,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -266,7 +289,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </div>
             <button id="clear-search-btn" style="display: none; color: white">Clear Search Results</button>
         </div>
-        <div class="center-container1">
+        <div class="center-container1" id="center-container1">
             <main id="results" style="scroll-behavior: smooth">
                 <!-- Movies will be dynamically loaded here -->
             </main>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/notifications.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/notifications.html
index 08a810b3..cc233067 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/notifications.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/notifications.html
@@ -329,7 +329,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -368,7 +368,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
 
     <main>
         <section id="newFeatures">
-            <h2>New Features</h2>
+            <h2 style="cursor: pointer">New Features</h2>
             <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
             <ul>
                 <li><strong>Enhanced Search Functionality:</strong> Our new search engine supports advanced filters for genres, ratings, and release years.</li>
@@ -385,7 +385,7 @@ <h2>New Features</h2>
         </section>
 
         <section id="newReleases">
-            <h2>New Releases</h2>
+            <h2 style="cursor: pointer">New Releases</h2>
 
             <h3>Since Your Last Visit</h3>
             <ul id="releasesSinceLastVisit"></ul>
@@ -406,7 +406,7 @@ <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
         </section>
 
         <section id="tipsTricks">
-            <h2>Tips & Tricks</h2>
+            <h2 style="cursor: pointer">Tips & Tricks</h2>
             <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
             <ul>
                 <li><strong>Creating Custom Watchlists:</strong> Learn how to create personalized watchlists to keep track of your favorite movies.</li>
@@ -422,7 +422,7 @@ <h2>Tips & Tricks</h2>
         </section>
 
         <section id="popularActors">
-            <h2>Popular Actors</h2>
+            <h2 style="cursor: pointer">Popular Actors</h2>
             <p style="color: black">Explore films featuring the actors our users can’t get enough of this month!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -431,7 +431,7 @@ <h2>Popular Actors</h2>
         </section>
 
         <section id="popularDirectors">
-            <h2>Popular Directors</h2>
+            <h2 style="cursor: pointer">Popular Directors</h2>
             <p style="color: black">Discover the visionaries behind the camera who are shaping the world of cinema!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -474,6 +474,36 @@ <h2>Popular Directors</h2>
     </script>
 
     <script>
+        document.getElementById('newFeatures').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('newReleases').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularActors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
+        });
+
+        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+            e.preventDefault();
+
+            document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
+        });
+
         document.addEventListener('DOMContentLoaded', function() {
             const updateDateElements = document.querySelectorAll('.updateDate');
             const today = new Date();
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/offline.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/offline.html
index 0eacaba4..2569eb2c 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/offline.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/offline.html
@@ -251,7 +251,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/privacy-policy.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/privacy-policy.html
index 8635f2f9..c6e4567c 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/privacy-policy.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/privacy-policy.html
@@ -255,7 +255,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -1145,5 +1145,4 @@ <h2 style="color: white">Cookies and Web Beacons</h2>
     </script>
 
 </body>
-
 </html>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/reset-password.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/reset-password.html
index 3a0bcc02..b954599e 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/reset-password.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/reset-password.html
@@ -276,7 +276,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/search.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/search.html
index f005f746..688aef0a 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/search.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/search.html
@@ -213,7 +213,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -255,9 +255,9 @@ <h2 id="search-results-label">Search Results</h2>
             <button data-category="person" onclick="showResults('person')">People</button>
         </div>
 
-        <button id="toggle-filters-btn">Filter Results</button>
+        <button id="toggle-filters-btn">Filter & Sort Results</button>
 
-        <!-- Filters for Movies and TV Series -->
+        <!-- Filters for Movies -->
         <div id="movie-tv-filters" style="display: none;">
             <p style="font-weight: bold">Filters Search Results</p>
             <label for="genre-filter">Genre:</label>
@@ -279,6 +279,19 @@ <h2 id="search-results-label">Search Results</h2>
             <span id="rating-value" style="color: white; font: inherit"></span>
 
             <button id="reset-filters">Reset Filters</button>
+
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+
+            <label for="sort-movie"><strong>Sort by:</strong></label>
+            <select id="sort-movie" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="release_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="release_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
         </div>
 
         <!-- Filters for TV Series -->
@@ -303,6 +316,19 @@ <h2 id="search-results-label">Search Results</h2>
             <span id="rating-tv-value" style="color: white; font: inherit"></span>
 
             <button id="reset-filters">Reset Filters</button>
+
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+
+            <label for="sort-tv"><strong>Sort by:</strong></label>
+            <select id="sort-tv" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="first_air_date.asc">Sort by release date (oldest to latest)</option>
+                <option value="first_air_date.desc">Sort by release date (latest to oldest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="vote_average.desc">Sort by vote average (highest to lowest)</option>
+                <option value="vote_average.asc">Sort by vote average (lowest to highest)</option>
+            </select>
         </div>
 
         <!-- Filters for People -->
@@ -328,6 +354,15 @@ <h2 id="search-results-label">Search Results</h2>
 
             <span id="popularity-value" style="color: white; font: inherit"></span>
             <button id="reset-filters">Reset Filters</button>
+
+            <div style="border-top: 1px solid white; margin-top: 20px; padding-top: 10px"></div>
+
+            <label for="sort-people"><strong>Sort by:</strong></label>
+            <select id="sort-people" style="max-width: 300px">
+                <option value="">Default</option>
+                <option value="popularity.asc">Sort by popularity (lowest to highest)</option>
+                <option value="popularity.desc">Sort by popularity (highest to lowest)</option>
+            </select>
         </div>
 
         <div id="movie-match-container1" class="movie-match-container1">
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/settings.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/settings.html
index 8d2f1031..f698b5ef 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/settings.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/settings.html
@@ -364,7 +364,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/sign-in.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/sign-in.html
index d803f4a6..67a21c66 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/sign-in.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/sign-in.html
@@ -298,7 +298,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/support.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/support.html
index 1d242cfa..b64a996b 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/support.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/support.html
@@ -536,7 +536,7 @@ <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 19px" class="notran
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/terms-of-service.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/terms-of-service.html
index c626fb77..3a8ed6ef 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/terms-of-service.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/terms-of-service.html
@@ -248,7 +248,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -704,7 +704,7 @@ <h2 style="color: white">Contact Us</h2>
             applySettings();
 
             function applySettings() {
-                const defaultBg = '../../images/universe-1.png';
+                const defaultBg = '../../images/universe-1.webp';
                 const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/trivia.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/trivia.html
index 07e4afea..3a6cd2b5 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/trivia.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/trivia.html
@@ -82,10 +82,10 @@
             margin-top: 25px;
         }
 
-        @keyframes fadeInUp {
+        @keyframes dropIn {
             0% {
                 opacity: 0;
-                transform: translateY(20px);
+                transform: translateY(-50px);
             }
             100% {
                 opacity: 1;
@@ -96,7 +96,7 @@
         #my-heading {
             margin-bottom: -25px;
             opacity: 0;
-            animation: fadeInUp 1s ease forwards;
+            animation: dropIn 1s ease forwards;
         }
 
         #my-heading a {
@@ -109,7 +109,7 @@
         .highlight {
             display: inline-block;
             opacity: 0;
-            animation: fadeInUp 1s ease forwards 0.5s;
+            animation: dropIn 1s ease forwards 0.5s;
         }
 
         #form {
@@ -243,6 +243,35 @@
                 bottom: 70px;
             }
         }
+
+        #local-time {
+            cursor: pointer;
+            opacity: 0;
+            animation: dropIn 1s ease forwards 1.5s;
+        }
+
+        #local-time p,
+        #local-time div {
+            opacity: 0;
+            animation: dropIn 1s ease forwards 2s;
+        }
+
+        #my-heading1 {
+            color: #ff8623;
+            padding: 10px;
+            font-size: 36px;
+            text-align: center;
+            background-color: transparent;
+            margin-left: 40px;
+        }
+
+        .highlight2 {
+            color: orange;
+        }
+
+        .highlight2:hover {
+            color: #ff8623;
+        }
     </style>
 </head>
 
@@ -295,6 +324,11 @@ <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="not
             </a>
         </h1>
 
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
+            <p id="stats-label" class="clock" style="font-size: 16px;"></p>
+            <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
+        </div>
+
         <button class="back-btn notranslate" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about notranslate" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn notranslate" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
@@ -305,6 +339,10 @@ <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="not
             <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
         </button>
 
+        <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+
         <button id="profileBtn" class="nav-btn notranslate" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
@@ -323,6 +361,36 @@ <h1 id="my-heading" style="margin-bottom: -5.5px; margin-top: 10.5px" class="not
         </form>
     </header>
 
+    <nav id="side-nav" class="side-nav" style="z-index: 1000000">
+        <a id="heading-href" style="cursor: pointer; text-decoration: none" href="../../index.html" title="Click to go back to the home page">
+            <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px; font-size: 2.1em; font-weight: bold;">
+                The Mo<span class="highlight2">vieV</span>erse Menu
+            </div>
+        </a>
+
+        <div id="button-container">
+            <button id="button-remove" title="Close the navbar" onclick="removeNavBar()">Close</button>
+        </div>
+
+        <ul style="overflow-y: auto">
+            <li><a href="#0">Question 1</a></li>
+            <li><a href="#1">Question 2</a></li>
+            <li><a href="#2">Question 3</a></li>
+            <li><a href="#3">Question 4</a></li>
+            <li><a href="#4">Question 5</a></li>
+            <li><a href="#5">Question 6</a></li>
+            <li><a href="#6">Question 7</a></li>
+            <li><a href="#7">Question 8</a></li>
+            <li><a href="#8">Question 9</a></li>
+            <li><a href="#9">Question 10</a></li>
+            <li><a href="sign-in.html">Sign In</a></li>
+            <li><a href="user-profile.html">Profile</a></li>
+            <li><a href="analytics.html">MovieVerse Analytics</a></li>
+            <li><a href="feedback.html">Submit Feedback</a></li>
+            <li><a href="support.html">Contact Support</a></li>
+        </ul>
+    </nav>
+
     <div>
         <div style="font-weight: bold; font-size: 32px" id="trivia-label">Movie Trivia Quiz</div>
     </div>
@@ -373,6 +441,54 @@ <h3>Trivia Results</h3>
     <script src="../js/quiz.js" type="module"></script>
 
     <script>
+        function toggleNav() {
+            const sideNav = document.getElementById('side-nav');
+            sideNav.classList.toggle('manual-toggle');
+            adjustNavBar();
+        }
+
+        function removeNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+            }
+
+            adjustNavBar();
+        }
+
+        function adjustNavBar() {
+            const sideNav = document.getElementById('side-nav');
+            if (sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0px';
+            }
+            else {
+                sideNav.style.left = '-250px';
+            }
+        }
+
+        document.addEventListener('mousemove', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '0';
+            }
+        });
+
+        document.getElementById('side-nav').addEventListener('mouseleave', function() {
+            const sideNav = document.getElementById('side-nav');
+            if (!sideNav.classList.contains('manual-toggle')) {
+                sideNav.style.left = '-250px';
+            }
+        });
+
+        document.addEventListener('click', function(event) {
+            const sideNav = document.getElementById('side-nav');
+            const navToggle = document.getElementById('nav-toggle');
+            if (!sideNav.contains(event.target) && !navToggle.contains(event.target) && sideNav.classList.contains('manual-toggle')) {
+                sideNav.classList.remove('manual-toggle');
+                adjustNavBar();
+            }
+        });
+
         document.getElementById('settings-btn').addEventListener('click', () => {
             window.location.href = 'settings.html';
         });
@@ -448,6 +564,224 @@ <h3>Trivia Results</h3>
         <span>Menu</span>
     </button>
 
+    <script>
+        async function ensureGenreMapIsAvailable() {
+            if (!localStorage.getItem('genreMap')) {
+                await fetchGenreMap();
+            }
+        }
+
+        async function fetchGenreMap() {
+            const url = `https://${getMovieVerseData()}/3/genre/movie/list?${generateMovieNames()}${getMovieCode()}`;
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                const genreMap = data.genres.reduce((map, genre) => {
+                    map[genre.id] = genre.name;
+                    return map;
+                }, {});
+                localStorage.setItem('genreMap', JSON.stringify(genreMap));
+            }
+            catch (error) {
+                console.log('Error fetching genre map:', error);
+            }
+        }
+
+        async function rotateUserStats() {
+            await ensureGenreMapIsAvailable();
+
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('moviesFavorited')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Favorite Genre",
+                    getValue: () => {
+                        const mostCommonGenreCode = getMostCommonGenre();
+                        const genreMapString = localStorage.getItem('genreMap');
+                        if (!genreMapString) {
+                            console.log('No genre map found in localStorage.');
+                            return 'Not Available';
+                        }
+
+                        let genreMap;
+                        try {
+                            genreMap = JSON.parse(genreMapString);
+                        }
+                        catch (e) {
+                            console.log('Error parsing genre map:', e);
+                            return 'Not Available';
+                        }
+
+                        let genreObject;
+                        if (Array.isArray(genreMap)) {
+                            genreObject = genreMap.reduce((acc, genre) => {
+                                acc[genre.id] = genre.name;
+                                return acc;
+                            }, {});
+                        }
+                        else if (typeof genreMap === 'object' && genreMap !== null) {
+                            genreObject = genreMap;
+                        }
+                        else {
+                            console.log('genreMap is neither an array nor a proper object:', genreMap);
+                            return 'Not Available';
+                        }
+
+                        return genreObject[mostCommonGenreCode] || 'Not Available';
+                    }
+                },
+                { label: "Watchlists Created", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy },
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenresArray = JSON.parse(localStorage.getItem('favoriteGenres')) || [];
+            const genreCounts = favoriteGenresArray.reduce((acc, genre) => {
+                acc[genre] = (acc[genre] || 0) + 1;
+                return acc;
+            }, {});
+
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in genreCounts) {
+                if (genreCounts[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = genreCounts[genre];
+                }
+            }
+
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+
     <script>
         async function showMovieOfTheDay() {
             const year = new Date().getFullYear();
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/tv-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/tv-details.html
index 286b8aaa..3d453df7 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/tv-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/tv-details.html
@@ -296,7 +296,7 @@ <h1 id="my-heading" style="margin-bottom: -10px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/user-profile.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/user-profile.html
index 01427ac8..7ddee20b 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/user-profile.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/user-profile.html
@@ -447,7 +447,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
             </a>
         </h1>
 
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats!">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats!">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chatbot.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chatbot.js
index 800a1f5f..9df8ce8b 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chatbot.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chatbot.js
@@ -10,6 +10,7 @@ const movieCode = {
 
 function getMovieCode() {
     return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
+    return atob(movieCode.part1) + atob(movieCode.part2) + atob(movieCode.part3);
 }
 
 function generateMovieNames(input) {
@@ -167,11 +168,34 @@ async function rotateUserStats() {
 
 function updateMovieVisitCount(movieId, movieTitle) {
     let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+    let uniqueMoviesViewed = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+
     if (!movieVisits[movieId]) {
         movieVisits[movieId] = { count: 0, title: movieTitle };
     }
     movieVisits[movieId].count += 1;
+
+    if (!uniqueMoviesViewed.includes(movieId)) {
+        uniqueMoviesViewed.push(movieId);
+    }
+
     localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+    localStorage.setItem('uniqueMoviesViewed', JSON.stringify(uniqueMoviesViewed));
+}
+
+function getMostVisitedDirector() {
+    const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+    let mostVisitedDirector = '';
+    let maxVisits = 0;
+
+    for (const directorId in directorVisits) {
+        if (directorVisits[directorId].count > maxVisits) {
+            mostVisitedDirector = directorVisits[directorId].name;
+            maxVisits = directorVisits[directorId].count;
+        }
+    }
+
+    return mostVisitedDirector || 'Not Available';
 }
 
 function getMostVisitedMovie() {
@@ -204,26 +228,12 @@ function getMostVisitedActor() {
     return mostVisitedActor || 'Not Available';
 }
 
-function getMostVisitedDirector() {
-    const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
-    let mostVisitedDirector = '';
-    let maxVisits = 0;
-
-    for (const directorId in directorVisits) {
-        if (directorVisits[directorId].count > maxVisits) {
-            mostVisitedDirector = directorVisits[directorId].name;
-            maxVisits = directorVisits[directorId].count;
-        }
-    }
-
-    return mostVisitedDirector || 'Not Available';
-}
-
 function getTriviaAccuracy() {
     let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
     if (triviaStats.totalAttempted === 0) {
         return 'No trivia attempted';
     }
+
     let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
     return `${accuracy.toFixed(1)}% accuracy`;
 }
@@ -250,6 +260,34 @@ function getMostCommonGenre() {
 
 document.addEventListener('DOMContentLoaded', rotateUserStats);
 
+function updateUniqueDirectorsViewed(directorId) {
+    let viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+    if (!viewedDirectors.includes(directorId)) {
+        viewedDirectors.push(directorId);
+        localStorage.setItem('uniqueDirectorsViewed', JSON.stringify(viewedDirectors));
+    }
+}
+
+function updateActorVisitCount(actorId, actorName) {
+    let actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+    if (!actorVisits[actorId]) {
+        actorVisits[actorId] = { count: 0, name: actorName };
+    }
+
+    actorVisits[actorId].count += 1;
+    localStorage.setItem('actorVisits', JSON.stringify(actorVisits));
+}
+
+function updateDirectorVisitCount(directorId, directorName) {
+    let directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+    if (!directorVisits[directorId]) {
+        directorVisits[directorId] = { count: 0, name: directorName };
+    }
+
+    directorVisits[directorId].count += 1;
+    localStorage.setItem('directorVisits', JSON.stringify(directorVisits));
+}
+
 function calculateMoviesToDisplay() {
     const screenWidth = window.innerWidth;
     if (screenWidth <= 689.9) return 10; // 1 movie per row
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/favorites.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/favorites.js
index 55518565..06efb125 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/favorites.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/favorites.js
@@ -559,18 +559,35 @@ async function populateCreateModalWithFavorites() {
 }
 
 document.getElementById('create-watchlist-form').addEventListener('submit', async function(e) {
+    e.preventDefault();
+    showSpinner();
+
+    const name = document.getElementById('new-watchlist-name').value.trim();
+    const description = document.getElementById('new-watchlist-description').value;
+    const selectedMovies = Array.from(document.querySelectorAll('#movies-container input:checked')).map(checkbox => checkbox.value);
+    const selectedTVSeries = Array.from(document.querySelectorAll('#tvseries-container input:checked')).map(checkbox => checkbox.value);
+    const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
+
+    let isDuplicate = false;
+    let maxOrder = 0;
+    let localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
+
     try {
-        showSpinner();
-        e.preventDefault();
+        if (currentUserEmail) {
+            const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
+            const querySnapshot = await getDocs(q);
+            maxOrder = querySnapshot.docs.reduce((max, docSnapshot) => Math.max(max, docSnapshot.data().order || 0), 0);
+            isDuplicate = querySnapshot.docs.some(doc => doc.data().name.toLowerCase() === name.toLowerCase());
+        }
+        else {
+            isDuplicate = localWatchlists.some(watchlist => watchlist.name.toLowerCase() === name.toLowerCase());
+        }
 
-        const name = document.getElementById('new-watchlist-name').value;
-        const description = document.getElementById('new-watchlist-description').value;
-        const selectedMovies = Array.from(document.querySelectorAll('#movies-container input:checked')).map(checkbox => checkbox.value);
-        const selectedTVSeries = Array.from(document.querySelectorAll('#tvseries-container input:checked')).map(checkbox => checkbox.value);
-        const currentUserEmail = localStorage.getItem('currentlySignedInMovieVerseUser');
-        const q = query(collection(db, "watchlists"), where("userEmail", "==", currentUserEmail));
-        const querySnapshot = await getDocs(q);
-        let maxOrder = querySnapshot.docs.reduce((max, docSnapshot) => Math.max(max, docSnapshot.data().order || 0), 0);
+        if (isDuplicate) {
+            alert('A watchlist with this name already exists. Please choose a different name.');
+            hideSpinner();
+            return;
+        }
 
         if (currentUserEmail) {
             const newWatchlistRef = doc(collection(db, 'watchlists'));
@@ -586,7 +603,6 @@ document.getElementById('create-watchlist-form').addEventListener('submit', asyn
             });
         }
         else {
-            const localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
             localWatchlists.push({
                 id: `local-${new Date().getTime()}`,
                 userEmail: "",
@@ -599,20 +615,10 @@ document.getElementById('create-watchlist-form').addEventListener('submit', asyn
             });
             localStorage.setItem('localWatchlists', JSON.stringify(localWatchlists));
         }
-
-        closeModal('create-watchlist-modal');
-        loadWatchLists();
-        hideSpinner();
-        window.location.reload();
     }
     catch (error) {
         if (error.code === 'resource-exhausted') {
             console.log('Firebase quota exceeded. Using localStorage for watchlists.');
-            const name = document.getElementById('new-watchlist-name').value;
-            const description = document.getElementById('new-watchlist-description').value;
-            const selectedMovies = Array.from(document.querySelectorAll('#movies-container input:checked')).map(checkbox => checkbox.value);
-            const selectedTVSeries = Array.from(document.querySelectorAll('#tvseries-container input:checked')).map(checkbox => checkbox.value);
-            const localWatchlists = JSON.parse(localStorage.getItem('localWatchlists')) || [];
             localWatchlists.push({
                 id: `local-${new Date().getTime()}`,
                 userEmail: "",
@@ -624,12 +630,17 @@ document.getElementById('create-watchlist-form').addEventListener('submit', asyn
                 createdAt: new Date().toISOString()
             });
             localStorage.setItem('localWatchlists', JSON.stringify(localWatchlists));
-            closeModal('create-watchlist-modal');
-            loadWatchLists();
-            hideSpinner();
-            window.location.reload();
+        }
+        else {
+            console.error('An error occurred while creating a watchlist:', error);
+            alert('Failed to create the watchlist due to an error.');
         }
     }
+
+    closeModal('create-watchlist-modal');
+    loadWatchLists();
+    hideSpinner();
+    window.location.reload();
 });
 
 async function getTVSeriesTitle(seriesId) {
@@ -1368,7 +1379,7 @@ async function loadWatchLists() {
         if (favorites.length > 0) {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-watchlist';
+            favoritesDiv.id = 'favorite-movies';
 
             const title = document.createElement('h3');
             title.textContent = "Favorite Movies";
@@ -1395,7 +1406,7 @@ async function loadWatchLists() {
         else {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-watchlist';
+            favoritesDiv.id = 'favorite-movies';
             favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite Movies</h3><p style="text-align: center">No favorite movies added yet.</p></div>';
             displaySection.appendChild(favoritesDiv);
         }
@@ -1403,7 +1414,7 @@ async function loadWatchLists() {
         if (favoritesTVSeries.length > 0) {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-tvseries-watchlist';
+            favoritesDiv.id = 'favorite-tv-series';
 
             const title = document.createElement('h3');
             title.textContent = "Favorite TV Series";
@@ -1430,7 +1441,7 @@ async function loadWatchLists() {
         else {
             const favoritesDiv = document.createElement('div');
             favoritesDiv.className = 'watchlist';
-            favoritesDiv.id = 'favorites-tvseries-watchlist';
+            favoritesDiv.id = 'favorite-tv-series';
             favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite TV Series</h3><p style="text-align: center">No favorite TV series added yet.</p></div>';
             displaySection.appendChild(favoritesDiv);
         }
@@ -1464,7 +1475,7 @@ async function loadWatchLists() {
             if (favorites.length > 0) {
                 const favoritesDiv = document.createElement('div');
                 favoritesDiv.className = 'watchlist';
-                favoritesDiv.id = 'favorites-watchlist';
+                favoritesDiv.id = 'favorite-movies';
 
                 const title = document.createElement('h3');
                 title.textContent = "Favorite Movies";
@@ -1491,7 +1502,7 @@ async function loadWatchLists() {
             else {
                 const favoritesDiv = document.createElement('div');
                 favoritesDiv.className = 'watchlist';
-                favoritesDiv.id = 'favorites-watchlist';
+                favoritesDiv.id = 'favorite-movies';
                 favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite Movies</h3><p style="text-align: center">No favorite movies added yet.</p></div>';
                 displaySection.appendChild(favoritesDiv);
             }
@@ -1499,7 +1510,7 @@ async function loadWatchLists() {
             if (favoritesTVSeries.length > 0) {
                 const favoritesDiv = document.createElement('div');
                 favoritesDiv.className = 'watchlist';
-                favoritesDiv.id = 'favorites-tvseries-watchlist';
+                favoritesDiv.id = 'favorite-tv-series';
 
                 const title = document.createElement('h3');
                 title.textContent = "Favorite TV Series";
@@ -1524,6 +1535,14 @@ async function loadWatchLists() {
                 displaySection.appendChild(favoritesDiv);
                 hideSpinner();
             }
+            else {
+                const favoritesDiv = document.createElement('div');
+                favoritesDiv.className = 'watchlist';
+                favoritesDiv.id = 'favorite-tv-series';
+                favoritesDiv.innerHTML = '<div style="text-align: center"><h3 style="text-align: center; font-size: 24px; color: #ff8623">Favorite TV Series</h3><p style="text-align: center">No favorite TV series added yet.</p></div>';
+                displaySection.appendChild(favoritesDiv);
+                hideSpinner();
+            }
         }
         else {
             console.error('An error occurred:', error);
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-timeline.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-timeline.js
index eabe2e25..a69d9e14 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-timeline.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-timeline.js
@@ -330,8 +330,24 @@ function updateMovies() {
     }
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
+function showMovies(movies, mainElement, startYear, endYear, append) {
+    showSpinner();
+
+    if (!append) {
+        mainElement.innerHTML = '';
+        const header = document.createElement('h2');
+        header.style.textAlign = "center";
+        header.style.marginTop = "20px";
+        header.style.marginBottom = "20px";
+        header.style.color = "#ff8623";
+        header.style.fontSize = '23px';
+        header.textContent = `Movies from ${startYear} to ${endYear}`;
+        const centerContainer1 = document.getElementById('center-container1');
+        centerContainer1.innerHTML = '';
+        centerContainer1.appendChild(header);
+        centerContainer1.appendChild(mainElement);
+    }
+
     movies.forEach(movie => {
         const movieEl = document.createElement('div');
         movieEl.classList.add('movie');
@@ -368,19 +384,52 @@ function showMovies(movies, mainElement) {
         movieEl.style.cursor = 'pointer';
         mainElement.appendChild(movieEl);
     });
+    const centerContainer1 = document.getElementById('center-container1');
+    centerContainer1.appendChild(mainElement);
+
+    createLoadMoreButton(startYear, endYear, mainElement);
+    hideSpinner();
 }
 
-document.getElementById('clear-search-btn').addEventListener('click', () => {
-    location.reload();
-});
+function createLoadMoreButton(startYear, endYear, mainElement) {
+    const existingButtonDiv = mainElement.querySelector('.load-more-container');
+    if (existingButtonDiv) {
+        mainElement.removeChild(existingButtonDiv);
+    }
+
+    const buttonContainer = document.createElement('div');
+    buttonContainer.className = 'load-more-container';
+    buttonContainer.style.width = '100%';
+    buttonContainer.style.textAlign = 'center';
+    buttonContainer.style.marginTop = '20px';
+
+    const moreButton = document.createElement('button');
+    moreButton.textContent = "Get More Movies in this Period";
+    moreButton.style.margin = '10px auto';
 
-async function fetchMoviesByTimePeriod(startYear, endYear) {
-    const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&primary_release_date.gte=${startYear}-01-01&primary_release_date.lte=${endYear}-12-31`;
+    moreButton.addEventListener('click', function() {
+        currentPage++;
+        fetchMoviesByTimePeriod(startYear, endYear, true);
+    });
+
+    buttonContainer.appendChild(moreButton);
+    mainElement.appendChild(buttonContainer);
+}
+
+let currentPage = 1;
+
+async function fetchMoviesByTimePeriod(startYear, endYear, append = false) {
+    const url = `https://${getMovieVerseData()}/3/discover/movie?${generateMovieNames()}${getMovieCode()}&primary_release_date.gte=${startYear}-01-01&primary_release_date.lte=${endYear}-12-31&page=${currentPage}`;
     const response = await fetch(url);
     const data = await response.json();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const moviesToShow = data.results.slice(0, numberOfMovies);
-    showMovies(moviesToShow, document.getElementById('results'));
+    const moviesToShow = data.results;
+
+    if (append) {
+        showMovies(moviesToShow, document.getElementById('results'), startYear, endYear, true);
+    }
+    else {
+        showMovies(moviesToShow, document.getElementById('results'), startYear, endYear, false);
+    }
 }
 
 document.getElementById('load-movies').addEventListener('click', () => {
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/search.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/search.js
index c4f9c0b1..cd665e18 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/search.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/search.js
@@ -404,7 +404,7 @@ function attachEventListeners() {
         movieFilters.style.display = 'none';
         tvFilters.style.display = 'none';
         peopleFilters.style.display = 'none';
-        toggleFiltersBtn.textContent = 'Filter Results';
+        toggleFiltersBtn.textContent = 'Filter & Sort Results';
     });
 
     tvBtn.addEventListener('click', () => {
@@ -414,7 +414,7 @@ function attachEventListeners() {
         movieFilters.style.display = 'none';
         tvFilters.style.display = 'none';
         peopleFilters.style.display = 'none';
-        toggleFiltersBtn.textContent = 'Filter Results';
+        toggleFiltersBtn.textContent = 'Filter & Sort Results';
     });
 
     peopleBtn.addEventListener('click', () => {
@@ -424,7 +424,7 @@ function attachEventListeners() {
         movieFilters.style.display = 'none';
         tvFilters.style.display = 'none';
         peopleFilters.style.display = 'none';
-        toggleFiltersBtn.textContent = 'Filter Results';
+        toggleFiltersBtn.textContent = 'Filter & Sort Results';
     });
 
     toggleFiltersBtn.addEventListener('click', () => {
@@ -529,10 +529,26 @@ document.addEventListener('DOMContentLoaded', function() {
             toggleFiltersBtn.textContent = 'Close Filters';
         }
         else {
-            toggleFiltersBtn.textContent = 'Filter Results';
+            toggleFiltersBtn.textContent = 'Filter & Sort Results';
         }
     });
 
+    document.getElementById('sort-movie').addEventListener('change', () => {
+        movieSortChanged = true;
+        showResults('movie');
+    });
+
+    document.getElementById('sort-tv').addEventListener('change', () => {
+        tvSortChanged = true;
+        showResults('tv');
+    });
+
+    document.getElementById('sort-people').addEventListener('change', () => {
+        peopleSortChanged = true;
+        showResults('person');
+    });
+
+
     document.querySelectorAll('.category-buttons button').forEach(button => {
         button.addEventListener('click', function() {
             currentCategory = this.getAttribute('data-category');
@@ -540,6 +556,10 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 });
 
+let movieSortChanged = false;
+let tvSortChanged = false;
+let peopleSortChanged = false;
+
 function attachArrowKeyNavigation() {
     const categories = ['movie', 'tv', 'person'];
     let currentIndex = 0;
@@ -580,6 +600,23 @@ function getMovieVerseData(input) {
     return String.fromCharCode(97, 112, 105, 46, 116, 104, 101, 109, 111, 118, 105, 101, 100, 98, 46, 111, 114, 103);
 }
 
+function sortResults(results, sortBy) {
+    if (!sortBy) return results;
+
+    const [property, order] = sortBy.split('.');
+    results.sort((a, b) => {
+        let propA = (property === 'release_date' || property === 'first_air_date') ? new Date(a[property]) : a[property];
+        let propB = (property === 'release_date' || property === 'first_air_date') ? new Date(b[property]) : b[property];
+
+        if (order === 'asc') {
+            return propA > propB ? 1 : propA < propB ? -1 : 0;
+        } else {
+            return propA < propB ? 1 : propA > propB ? -1 : 0;
+        }
+    });
+    return results;
+}
+
 async function showResults(category) {
     showSpinner();
     localStorage.setItem('selectedCategory', category);
@@ -591,6 +628,17 @@ async function showResults(category) {
     const code = getMovieCode();
     const baseApiUrl = `https://${getMovieVerseData()}/3`;
     let url = `${baseApiUrl}/search/${category}?${generateMovieNames()}${code}&query=${encodeURIComponent(searchQuery)}`;
+    let sortValue = '';
+
+    if (category === 'movie') {
+        sortValue = document.getElementById('sort-movie').value;
+    }
+    else if (category === 'tv') {
+        sortValue = document.getElementById('sort-tv').value;
+    }
+    else if (category === 'person') {
+        sortValue = document.getElementById('sort-people').value;
+    }
 
     try {
         const response = await fetch(url);
@@ -652,6 +700,12 @@ async function showResults(category) {
             });
         }
 
+        if ((category === 'movie' && movieSortChanged) ||
+            (category === 'tv' && tvSortChanged) ||
+            (category === 'person' && peopleSortChanged)) {
+            data.results = sortResults(data.results, sortValue);
+        }
+
         displayResults(data.results, category, searchQuery);
     }
     catch (error) {
diff --git a/MovieVerse-Mobile/www/index.html b/MovieVerse-Mobile/www/index.html
index 2728fa60..c8072b93 100644
--- a/MovieVerse-Mobile/www/index.html
+++ b/MovieVerse-Mobile/www/index.html
@@ -604,7 +604,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats on this machine">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats on this machine">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -642,7 +642,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
         </div>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002000;">
+    <nav id="side-nav" class="side-nav" style="z-index: 10000000">
         <a id="heading-href" class="notranslate" style="cursor: pointer; text-align: center">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px !important; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu
diff --git a/index.html b/index.html
index 70644a92..a644079b 100644
--- a/index.html
+++ b/index.html
@@ -604,7 +604,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
                 The Mo<span class="highlight" id="highlight">vieV</span>erse
             </a>
         </h1>
-        <div id="local-time" style="cursor: pointer" title="Click to view more of your stats on this machine">
+        <div id="local-time" style="cursor: pointer; margin-left: 40px" title="Click to view more of your stats on this machine">
             <p id="stats-label" class="clock" style="font-size: 16px;"></p>
             <div id="stats-display" class="clock" style="font-size: 1.25em; font-weight: bold;"></div>
         </div>
@@ -642,7 +642,7 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
         </div>
     </header>
 
-    <nav id="side-nav" class="side-nav" style="z-index: 1002000;">
+    <nav id="side-nav" class="side-nav" style="z-index: 10000000">
         <a id="heading-href" class="notranslate" style="cursor: pointer; text-align: center">
             <div id="my-heading1" style="margin-bottom: 15px; margin-left: 0; margin-top: 15px !important; font-size: 2.1em; font-weight: bold;">
                 The Mo<span class="highlight2">vieV</span>erse Menu