diff --git a/.github/README.md b/.github/README.md
index ec94bfc7..1ee96e6a 100644
--- a/.github/README.md
+++ b/.github/README.md
@@ -152,11 +152,15 @@ Or, for your convenience, you may simply run the following command, provided tha
     cordova emulate ios
     cordova emulate android
     ```
-11. If you'd also like to dockerize the application, you can run the following command:
+11. If you'd also like to dockerize the application, `cd` into the root directory and run the following command:
     ```bash
     npm run docker
     ```
-    This will create a Docker image of the application, which you can then deploy to a containerized environment.
+    Or
+    ```bash
+    docker compose up
+    ```
+    This will create a Docker image of the application, which you can then deploy to a containerized environment. Ensure that Docker is up and running on your system before running this command.
 12. As you develop, be sure to save & commit your changes (and don't forget to create a branch for your new feature):
     ```bash
     git commit -m 'Add some AmazingFeature'
diff --git a/MovieVerse-Backend/.idea/workspace.xml b/MovieVerse-Backend/.idea/workspace.xml
index 9210f6a0..00667f36 100644
--- a/MovieVerse-Backend/.idea/workspace.xml
+++ b/MovieVerse-Backend/.idea/workspace.xml
@@ -4,11 +4,7 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="8bb29d63-e98d-4c08-9f32-16747d3aec75" name="Changes" comment="Fix: Updated Backend (#196)">
-      <change beforePath="$PROJECT_DIR$/../.idea/dataSources.local.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../.idea/dataSources.local.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate" beforeDir="false" afterPath="$PROJECT_DIR$/../MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate" afterDir="false" />
-    </list>
+    <list default="true" id="8bb29d63-e98d-4c08-9f32-16747d3aec75" name="Changes" comment="Fix: Updated Backend (#196)" />
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -215,11 +211,11 @@
       <method v="2" />
     </configuration>
     <list>
-      <item itemvalue="Django Server.Django-Backend" />
       <item itemvalue="Django tests.Test: movieverse.tests" />
-      <item itemvalue="OpenAPI/Swagger Code Generator.movieverse-openapi.yaml" />
       <item itemvalue="Python.flask" />
       <item itemvalue="Python.python manage.py runserver" />
+      <item itemvalue="Django Server.Django-Backend" />
+      <item itemvalue="OpenAPI/Swagger Code Generator.movieverse-openapi.yaml" />
       <item itemvalue="Python tests.Python tests in api_test_suite.py" />
     </list>
     <recent_temporary>
@@ -235,8 +231,8 @@
   <component name="SharedIndexes">
     <attachedChunks>
       <set>
-        <option value="bundled-js-predefined-1d06a55b98c1-0b3e54e931b4-JavaScript-PY-241.17890.14" />
-        <option value="bundled-python-sdk-5b207ade9991-7e9c3bbb6e34-com.jetbrains.pycharm.pro.sharedIndexes.bundled-PY-241.17890.14" />
+        <option value="bundled-js-predefined-1d06a55b98c1-0b3e54e931b4-JavaScript-PY-241.18034.82" />
+        <option value="bundled-python-sdk-975db3bf15a3-2767605e8bc2-com.jetbrains.pycharm.pro.sharedIndexes.bundled-PY-241.18034.82" />
       </set>
     </attachedChunks>
   </component>
@@ -264,6 +260,7 @@
       <workItem from="1718859543200" duration="2000" />
       <workItem from="1719110625564" duration="2062000" />
       <workItem from="1719151721860" duration="573000" />
+      <workItem from="1721010829658" duration="240000" />
     </task>
     <task id="LOCAL-00001" summary="Enhanced Backend">
       <option name="closed" value="true" />
diff --git a/MovieVerse-Frontend/README.md b/MovieVerse-Frontend/README.md
index 08035ab6..1a216e41 100644
--- a/MovieVerse-Frontend/README.md
+++ b/MovieVerse-Frontend/README.md
@@ -122,7 +122,7 @@ The tests directory contains a collection of test scripts and suites for the `Mo
 
 ## Getting Started
 
-To get started with MovieVerse:
+To get started with `MovieVerse-Frontend`:
 
 1. **Clone the repository**: Use Git to clone the app to your local machine:
     ```bash
@@ -140,12 +140,14 @@ To get started with MovieVerse:
     ```bash
     yarn install
     ```
-4. **Run the app**: Start the frontend server on your local server and navigate to the appropriate port to view it:
+4. **Run the app**: `cd` into the root directory then start the frontend server on your local server and navigate to the appropriate port to view it:
     ```bash
+    cd ..
     npm start
     ```
     Or using yarn:
      ```bash
+     cd ..
      yarn start
      ```
 5. **Explore the app**: Interact with the app's features, pages, and functionalities to get a feel for how it works.
diff --git a/MovieVerse-Frontend/html/about.html b/MovieVerse-Frontend/html/about.html
index 87048c73..5a808f24 100644
--- a/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Frontend/html/about.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>About The MovieVerse - Your Ultimate Movie Guide</title>
@@ -215,20 +214,16 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 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>
-
         <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
-
         <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -249,7 +244,6 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 <button type="button" id="clear-search" style="display: none">Clear</button>
             </div>
         </form>
-
         <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
         <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
         <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
@@ -258,18 +252,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
         <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: 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
             </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="analytics.html">MovieVerse Analytics</a></li>
             <li><a href="#aboutHeader">About The MovieVerse</a></li>
@@ -286,18 +277,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
-
     <main id="main2" style="margin: 0 auto">
         <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
         <p style="color: white; text-align: center">Welcome to The MovieVerse, your ultimate database for exploring the magic of movies. Created by <strong><a id="profileLink" href="http://github.com/hoangsonww">Son Nguyen</a></strong> in 2023 with a vision to celebrate cinematic art, MovieVerse offers a unique but comprehensive platform for more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
         <div style="width: 100%">
             <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
         </div>
-
         <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
         <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-
         <ul style="align-content: center; color: white">
             <li><i style="margin-right: 3px" class="fas fa-film"></i> <strong>Curated Movie Collections:</strong> Explore an array of movies categorized by genre, director, language, and era, including specialized sections like Director's Spotlight and award-winning films.</li>
             <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
@@ -313,11 +301,8 @@ <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
             <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
             <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
         </ul>
-
         <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
-
         <p style="color: white; text-align: center; margin-bottom: 12px">Like MovieVerse, our other apps are designed to enhance your daily life and help you stay organized, focused, and informed. Check out our other apps below, or visit my <a style="text-decoration: underline" id="githubLink" href="https://github.com/hoangsonww">GitHub profile</a> for more!</p>
-
         <ul style="align-content: center; color: white">
             <li>
                 <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
@@ -340,10 +325,8 @@ <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
                 <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
             </li>
         </ul>
-
         <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
         <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
-
         <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
         <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
         <br/>
@@ -354,20 +337,17 @@ <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
                 <i style="margin-left: 3px" class="fab fa-github"></i>
             </em>
         </p>
-
         <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
         <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
         <br/>
         <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
         <br/>
         <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
-
         <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
         <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
         <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
         <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
     </main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -381,7 +361,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -412,12 +391,10 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             <span>Trivia</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <script>
         window.addEventListener('load', function() {
             adjustAnchorHeights();
@@ -516,13 +493,11 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <footer>
         <a href="../../index.html" style="cursor: pointer; text-decoration: none">
             <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
         </a>
     </footer>
-
     <script>
         document.getElementById('logo').addEventListener('click', function() {
             document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
@@ -983,11 +958,9 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchBar = document.getElementById('search');
@@ -1016,7 +989,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             toggleVisibility();
         });
     </script>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchInput = document.getElementById('search');
@@ -1049,7 +1021,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             searchInput.addEventListener('input', toggleButtons);
         });
     </script>
-
     <script>
         function showSpinner() {
             document.getElementById('myModal').classList.add('modal-visible');
diff --git a/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Frontend/html/actor-details.html
index e96b40fe..ad563777 100644
--- a/MovieVerse-Frontend/html/actor-details.html
+++ b/MovieVerse-Frontend/html/actor-details.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>Actor Details - The MovieVerse</title>
@@ -466,7 +465,7 @@ <h2 id="actor-name" class="actor-header"></h2>
         document.getElementById('actor-image').addEventListener('click', function() {
             const imageUrl = this.src.replace('w1280', 'original')
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Frontend/html/chat.html b/MovieVerse-Frontend/html/chat.html
index 438da315..4054ba67 100644
--- a/MovieVerse-Frontend/html/chat.html
+++ b/MovieVerse-Frontend/html/chat.html
@@ -499,6 +499,7 @@ <h3>Recent & Suggested Chats</h3>
     </script>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading chats...</p>
     </div>
     <footer id="footer">
         <p>© 2024 The MovieVerse. All rights reserved.</p>
diff --git a/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Frontend/html/company-details.html
index f0b6c77c..afb9de67 100644
--- a/MovieVerse-Frontend/html/company-details.html
+++ b/MovieVerse-Frontend/html/company-details.html
@@ -479,7 +479,7 @@ <h2 id="company-name" class="company-header"></h2>
         document.getElementById('company-logo').addEventListener('click', function() {
             const imageUrl = this.src.replace('w500', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; background-color: white">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Frontend/html/director-details.html
index 55acbdc4..14778aa6 100644
--- a/MovieVerse-Frontend/html/director-details.html
+++ b/MovieVerse-Frontend/html/director-details.html
@@ -820,7 +820,7 @@ <h2 id="director-name" class="director-header"></h2>
     document.getElementById('director-image').addEventListener('click', function() {
         const imageUrl = this.src.replace('w1280', 'original');
         const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 95%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
         document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Frontend/html/movie-details.html
index bfc4fb00..c50bce4e 100644
--- a/MovieVerse-Frontend/html/movie-details.html
+++ b/MovieVerse-Frontend/html/movie-details.html
@@ -883,7 +883,7 @@ <h2 id="movie-rating" class="movie-rating"></h2>
         document.getElementById('movie-image').addEventListener('click', function() {
             let imageUrl = this.src.replace('w780', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;" alt="Movie Image" />
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Frontend/html/notifications.html b/MovieVerse-Frontend/html/notifications.html
index 5aeeaee8..e34b5aad 100644
--- a/MovieVerse-Frontend/html/notifications.html
+++ b/MovieVerse-Frontend/html/notifications.html
@@ -354,7 +354,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
     </nav>
     <main>
         <section id="newFeatures">
-            <h2 style="cursor: pointer">New Features</h2>
+            <h2 style="cursor: pointer" id="newFeaturesHeader">New Features</h2>
             <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
@@ -370,7 +370,7 @@ <h2 style="cursor: pointer">New Features</h2>
             </p>
         </section>
         <section id="newReleases">
-            <h2 style="cursor: pointer">New Releases</h2>
+            <h2 id="newReleasesHeader" style="cursor: pointer">New Releases</h2>
             <h3>Since Your Last Visit</h3>
             <ul id="releasesSinceLastVisit"></ul>
             <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
@@ -385,7 +385,7 @@ <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
             </p>
         </section>
         <section id="tipsTricks">
-            <h2 style="cursor: pointer">Tips & Tricks</h2>
+            <h2 style="cursor: pointer" id="tipsTricksHeader">Tips & Tricks</h2>
             <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
@@ -400,7 +400,7 @@ <h2 style="cursor: pointer">Tips & Tricks</h2>
             </p>
         </section>
         <section id="popularActors">
-            <h2 style="cursor: pointer">Popular Actors</h2>
+            <h2 style="cursor: pointer" id="popularActorsHeader">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">
@@ -408,7 +408,7 @@ <h2 style="cursor: pointer">Popular Actors</h2>
             </p>
         </section>
         <section id="popularDirectors">
-            <h2 style="cursor: pointer">Popular Directors</h2>
+            <h2 style="cursor: pointer" id="popularDirectorsHeader">Popular Directors</h2>
             <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -495,31 +495,31 @@ <h2 style="cursor: pointer">Popular Directors</h2>
             }
         });
 
-        document.getElementById('newFeatures').addEventListener('click', function(e) {
+        document.getElementById('newFeaturesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('newReleases').addEventListener('click', function(e) {
+        document.getElementById('newReleasesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+        document.getElementById('tipsTricksHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularActors').addEventListener('click', function(e) {
+        document.getElementById('popularActorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+        document.getElementById('popularDirectorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
diff --git a/MovieVerse-Frontend/js/actor-details.js b/MovieVerse-Frontend/js/actor-details.js
index 0035b2e1..f8b7b542 100644
--- a/MovieVerse-Frontend/js/actor-details.js
+++ b/MovieVerse-Frontend/js/actor-details.js
@@ -325,7 +325,7 @@ async function populateActorDetails(actor, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
@@ -808,4 +808,4 @@ function applyTextColor(color) {
         .forEach(element => {
             element.style.color = color;
         });
-}
\ No newline at end of file
+}
diff --git a/MovieVerse-Frontend/js/chat.js b/MovieVerse-Frontend/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Frontend/js/chat.js
+++ b/MovieVerse-Frontend/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
diff --git a/MovieVerse-Frontend/js/chatbot.js b/MovieVerse-Frontend/js/chatbot.js
index 6c17c9b3..30ad3a1f 100644
--- a/MovieVerse-Frontend/js/chatbot.js
+++ b/MovieVerse-Frontend/js/chatbot.js
@@ -268,63 +268,6 @@ 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
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -352,50 +295,6 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
@@ -419,41 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -468,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -552,68 +383,9 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    // if (lowerMessage.startsWith("do you know about ") ||
-    //     lowerMessage.startsWith("tell me about ") ||
-    //     lowerMessage.startsWith("what is ")) {
-    //     const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-    //     return await fetchMovieDetailsFromTMDB(movieName);
-    // }
-
-    // if (lowerMessage.startsWith("show me details about ") ||
-    //     lowerMessage.startsWith("i want to know more about ") ||
-    //     lowerMessage.startsWith("details about ") ||
-    //     lowerMessage.startsWith("search for ")) {
-    //     const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-    //     fetchAndRedirectToMovieDetails(movieName);
-    //     return `Searching for details about "${movieName}". Please wait...`;
-    // }
-
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
@@ -626,9 +398,6 @@ async function movieVerseResponse(message) {
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();
@@ -688,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';
diff --git a/MovieVerse-Frontend/js/director-details.js b/MovieVerse-Frontend/js/director-details.js
index 4f8daa13..ce289989 100644
--- a/MovieVerse-Frontend/js/director-details.js
+++ b/MovieVerse-Frontend/js/director-details.js
@@ -317,7 +317,7 @@ async function populateDirectorDetails(director, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Frontend/js/movie-details.js
index 5d9e8acf..1f3c85b8 100644
--- a/MovieVerse-Frontend/js/movie-details.js
+++ b/MovieVerse-Frontend/js/movie-details.js
@@ -1427,7 +1427,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
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 87048c73..5a808f24 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
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>About The MovieVerse - Your Ultimate Movie Guide</title>
@@ -215,20 +214,16 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 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>
-
         <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
-
         <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -249,7 +244,6 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 <button type="button" id="clear-search" style="display: none">Clear</button>
             </div>
         </form>
-
         <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
         <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
         <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
@@ -258,18 +252,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
         <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: 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
             </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="analytics.html">MovieVerse Analytics</a></li>
             <li><a href="#aboutHeader">About The MovieVerse</a></li>
@@ -286,18 +277,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
-
     <main id="main2" style="margin: 0 auto">
         <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
         <p style="color: white; text-align: center">Welcome to The MovieVerse, your ultimate database for exploring the magic of movies. Created by <strong><a id="profileLink" href="http://github.com/hoangsonww">Son Nguyen</a></strong> in 2023 with a vision to celebrate cinematic art, MovieVerse offers a unique but comprehensive platform for more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
         <div style="width: 100%">
             <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
         </div>
-
         <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
         <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-
         <ul style="align-content: center; color: white">
             <li><i style="margin-right: 3px" class="fas fa-film"></i> <strong>Curated Movie Collections:</strong> Explore an array of movies categorized by genre, director, language, and era, including specialized sections like Director's Spotlight and award-winning films.</li>
             <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
@@ -313,11 +301,8 @@ <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
             <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
             <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
         </ul>
-
         <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
-
         <p style="color: white; text-align: center; margin-bottom: 12px">Like MovieVerse, our other apps are designed to enhance your daily life and help you stay organized, focused, and informed. Check out our other apps below, or visit my <a style="text-decoration: underline" id="githubLink" href="https://github.com/hoangsonww">GitHub profile</a> for more!</p>
-
         <ul style="align-content: center; color: white">
             <li>
                 <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
@@ -340,10 +325,8 @@ <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
                 <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
             </li>
         </ul>
-
         <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
         <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
-
         <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
         <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
         <br/>
@@ -354,20 +337,17 @@ <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
                 <i style="margin-left: 3px" class="fab fa-github"></i>
             </em>
         </p>
-
         <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
         <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
         <br/>
         <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
         <br/>
         <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
-
         <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
         <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
         <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
         <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
     </main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -381,7 +361,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -412,12 +391,10 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             <span>Trivia</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <script>
         window.addEventListener('load', function() {
             adjustAnchorHeights();
@@ -516,13 +493,11 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <footer>
         <a href="../../index.html" style="cursor: pointer; text-decoration: none">
             <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
         </a>
     </footer>
-
     <script>
         document.getElementById('logo').addEventListener('click', function() {
             document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
@@ -983,11 +958,9 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchBar = document.getElementById('search');
@@ -1016,7 +989,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             toggleVisibility();
         });
     </script>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchInput = document.getElementById('search');
@@ -1049,7 +1021,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             searchInput.addEventListener('input', toggleButtons);
         });
     </script>
-
     <script>
         function showSpinner() {
             document.getElementById('myModal').classList.add('modal-visible');
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 e96b40fe..ad563777 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
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>Actor Details - The MovieVerse</title>
@@ -466,7 +465,7 @@ <h2 id="actor-name" class="actor-header"></h2>
         document.getElementById('actor-image').addEventListener('click', function() {
             const imageUrl = this.src.replace('w1280', 'original')
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
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 17112431..9b02e879 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
@@ -341,7 +341,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
     </nav>
     <div>
         <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
-        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>150,000</strong> monthly active users!</p>
+        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>450,000</strong> monthly active users!</p>
     </div>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
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 438da315..4054ba67 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
@@ -499,6 +499,7 @@ <h3>Recent & Suggested Chats</h3>
     </script>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading chats...</p>
     </div>
     <footer id="footer">
         <p>© 2024 The MovieVerse. All rights reserved.</p>
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 f0b6c77c..afb9de67 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
@@ -479,7 +479,7 @@ <h2 id="company-name" class="company-header"></h2>
         document.getElementById('company-logo').addEventListener('click', function() {
             const imageUrl = this.src.replace('w500', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; background-color: white">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
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 55acbdc4..14778aa6 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
@@ -820,7 +820,7 @@ <h2 id="director-name" class="director-header"></h2>
     document.getElementById('director-image').addEventListener('click', function() {
         const imageUrl = this.src.replace('w1280', 'original');
         const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 95%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
         document.body.insertAdjacentHTML('beforeend', modalHtml);
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 bfc4fb00..c50bce4e 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
@@ -883,7 +883,7 @@ <h2 id="movie-rating" class="movie-rating"></h2>
         document.getElementById('movie-image').addEventListener('click', function() {
             let imageUrl = this.src.replace('w780', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;" alt="Movie Image" />
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
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 5aeeaee8..e34b5aad 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
@@ -354,7 +354,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
     </nav>
     <main>
         <section id="newFeatures">
-            <h2 style="cursor: pointer">New Features</h2>
+            <h2 style="cursor: pointer" id="newFeaturesHeader">New Features</h2>
             <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
@@ -370,7 +370,7 @@ <h2 style="cursor: pointer">New Features</h2>
             </p>
         </section>
         <section id="newReleases">
-            <h2 style="cursor: pointer">New Releases</h2>
+            <h2 id="newReleasesHeader" style="cursor: pointer">New Releases</h2>
             <h3>Since Your Last Visit</h3>
             <ul id="releasesSinceLastVisit"></ul>
             <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
@@ -385,7 +385,7 @@ <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
             </p>
         </section>
         <section id="tipsTricks">
-            <h2 style="cursor: pointer">Tips & Tricks</h2>
+            <h2 style="cursor: pointer" id="tipsTricksHeader">Tips & Tricks</h2>
             <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
@@ -400,7 +400,7 @@ <h2 style="cursor: pointer">Tips & Tricks</h2>
             </p>
         </section>
         <section id="popularActors">
-            <h2 style="cursor: pointer">Popular Actors</h2>
+            <h2 style="cursor: pointer" id="popularActorsHeader">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">
@@ -408,7 +408,7 @@ <h2 style="cursor: pointer">Popular Actors</h2>
             </p>
         </section>
         <section id="popularDirectors">
-            <h2 style="cursor: pointer">Popular Directors</h2>
+            <h2 style="cursor: pointer" id="popularDirectorsHeader">Popular Directors</h2>
             <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -495,31 +495,31 @@ <h2 style="cursor: pointer">Popular Directors</h2>
             }
         });
 
-        document.getElementById('newFeatures').addEventListener('click', function(e) {
+        document.getElementById('newFeaturesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('newReleases').addEventListener('click', function(e) {
+        document.getElementById('newReleasesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+        document.getElementById('tipsTricksHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularActors').addEventListener('click', function(e) {
+        document.getElementById('popularActorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+        document.getElementById('popularDirectorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/actor-details.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/actor-details.js
index 0035b2e1..f8b7b542 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/actor-details.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/actor-details.js
@@ -325,7 +325,7 @@ async function populateActorDetails(actor, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
@@ -808,4 +808,4 @@ function applyTextColor(color) {
         .forEach(element => {
             element.style.color = color;
         });
-}
\ No newline at end of file
+}
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chat.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chat.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
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 6c17c9b3..30ad3a1f 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
@@ -268,63 +268,6 @@ 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
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -352,50 +295,6 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
@@ -419,41 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -468,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -552,68 +383,9 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    // if (lowerMessage.startsWith("do you know about ") ||
-    //     lowerMessage.startsWith("tell me about ") ||
-    //     lowerMessage.startsWith("what is ")) {
-    //     const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-    //     return await fetchMovieDetailsFromTMDB(movieName);
-    // }
-
-    // if (lowerMessage.startsWith("show me details about ") ||
-    //     lowerMessage.startsWith("i want to know more about ") ||
-    //     lowerMessage.startsWith("details about ") ||
-    //     lowerMessage.startsWith("search for ")) {
-    //     const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-    //     fetchAndRedirectToMovieDetails(movieName);
-    //     return `Searching for details about "${movieName}". Please wait...`;
-    // }
-
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
@@ -626,9 +398,6 @@ async function movieVerseResponse(message) {
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();
@@ -688,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/director-details.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/director-details.js
index 4f8daa13..ce289989 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/director-details.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/director-details.js
@@ -317,7 +317,7 @@ async function populateDirectorDetails(director, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-details.js
index 5d9e8acf..1f3c85b8 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-details.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/movie-details.js
@@ -1427,7 +1427,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.css b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.css
deleted file mode 100644
index ecea7e8e..00000000
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/css/index.css
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-* {
-    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-}
-
-body {
-    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
-    background-color:#E4E4E4;
-    background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
-    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
-    font-size:12px;
-    height:100vh;
-    margin:0px;
-    padding:0px;
-    /* Padding to avoid the "unsafe" areas behind notches in the screen */
-    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
-    text-transform:uppercase;
-    width:100%;
-}
-
-/* Portrait layout (default) */
-.app {
-    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
-    position:absolute;             /* position in the center of the screen */
-    left:50%;
-    top:50%;
-    height:50px;                   /* text area height */
-    width:225px;                   /* text area width */
-    text-align:center;
-    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
-    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
-                                   /* offset horizontal: half of text area width */
-}
-
-/* Landscape layout (with min-width) */
-@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
-    .app {
-        background-position:left center;
-        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
-        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
-                                      /* offset horizontal: half of image width and text area width */
-    }
-}
-
-h1 {
-    font-size:24px;
-    font-weight:normal;
-    margin:0px;
-    overflow:visible;
-    padding:0px;
-    text-align:center;
-}
-
-.event {
-    border-radius:4px;
-    color:#FFFFFF;
-    font-size:12px;
-    margin:0px 30px;
-    padding:2px 0px;
-}
-
-.event.listening {
-    background-color:#333333;
-    display:block;
-}
-
-.event.received {
-    background-color:#4B946A;
-    display:none;
-}
-
-#deviceready.ready .event.listening { display: none; }
-#deviceready.ready .event.received { display: block; }
-
-@keyframes fade {
-    from { opacity: 1.0; }
-    50% { opacity: 0.4; }
-    to { opacity: 1.0; }
-}
-
-.blink {
-    animation:fade 3000ms infinite;
-    -webkit-animation:fade 3000ms infinite;
-}
-
-
-@media screen and (prefers-color-scheme: dark) {
-    body {
-        background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
-    }
-}
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 89635dda..cb97d18f 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
@@ -1,10 +1,8 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
-
     <!-- Meta tags for SEO -->
     <meta name="description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -49,12 +47,10 @@
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" as="style">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" media="print" onload="this.media='all';">
     <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></noscript>
-
     <!-- Poppins Fonts -->
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-
     <!-- Schema.org markup for Rich Results -->
     <script type="application/ld+json">
         {
@@ -115,7 +111,6 @@
             "url": "https://movie-verse.com/MovieVerse-Frontend/html/inception.html"
         }
     </script>
-
     <style>
         @font-face {
             font-family: 'Poppins';
@@ -535,7 +530,6 @@
         }
     </style>
 </head>
-
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
 <script>
     window.dataLayer = window.dataLayer || [];
@@ -543,7 +537,6 @@
     gtag('js', new Date());
     gtag('config', 'G-CQKJ67FXZ4');
 </script>
-
 <body>
     <header id="homepage-header" style="margin-bottom: -10px">
         <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
@@ -588,7 +581,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <ul id="newReleasesList"></ul>
         </div>
     </header>
-
     <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;">
@@ -632,7 +624,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <li><a href="MovieVerse-Frontend/html/feedback.html">MovieVerse Feedback</a></li>
         </ul>
     </nav>
-
     <div class="mobile-sign-in-container">
         <button id="mobileGoogleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="mobileSignInOutText">Sign In</span>
@@ -644,17 +635,14 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <i class="fas fa-user" id="mobileProfileIcon"></i>
         </button>
     </div>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <div class="genres">
         <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2>
     </div>
     <div id="most-popular-pagination" class="pagination" style="text-align: center"></div>
     <main id="most-popular"></main>
-
     <div id="ad-container3" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -668,7 +656,6 @@ <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="recommendedDIV">
         <h2 id="other" style="cursor: pointer" title="Here are some personalized movie suggestions we've generated based on your preferences! Check them out, and let us know what you think!">
             Recommended For You: Personalized Movie Suggestions
@@ -676,7 +663,6 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     </div>
     <div id="recommended-pagination" class="pagination" style="text-align: center"></div>
     <main id="recommended"></main>
-
     <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -689,13 +675,11 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="award-winning-div">
         <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning Movies</h2>
     </div>
     <div id="award-winning-pagination" class="pagination" style="text-align: center"></div>
     <main id="award-winning"></main>
-
     <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -708,13 +692,11 @@ <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" style="display: flex; justify-content: space-between; align-items: center;">
         <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
         <button id="change-director-btn" onclick="changeDirector()" style="padding: 5px 10px; margin-right: 10px; margin-top: 25px; cursor: pointer;">Change Director</button>
     </div>
     <main id="director-spotlight"></main>
-
     <div id="ad-container5" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -727,13 +709,11 @@ <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="action-div">
         <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</h2>
     </div>
     <div id="action-pagination" class="pagination" style="text-align: center"></div>
     <main id="action"></main>
-
     <div id="ad-container6" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -746,13 +726,11 @@ <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="vietnamese-div">
         <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese Movies</h2>
     </div>
     <div id="vietnamese-pagination" class="pagination" style="text-align: center"></div>
     <main id="vietnamese"></main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -765,13 +743,11 @@ <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="indian-div">
         <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian Movies</h2>
     </div>
     <div id="indian-pagination" class="pagination" style="text-align: center"></div>
     <main id="indian"></main>
-
     <div id="ad-container4" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -784,13 +760,11 @@ <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="korean-div">
         <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies</h2>
     </div>
     <div id="korean-pagination" class="pagination" style="text-align: center"></div>
     <main id="korean"></main>
-
     <div id="ad-container7" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -803,115 +777,96 @@ <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies<
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="tv-series-div">
         <h2 id="other" style="cursor: pointer">Binge-Worthy Series: Trending TV Series</h2>
     </div>
     <div id="tv-series-pagination" class="pagination" style="text-align: center"></div>
     <main id="tv-series" ></main>
-
     <div class="genres" id="hidden-gems-div">
         <h2 id="other" style="cursor: pointer">Hidden Treasures: Discover Gems in Cinema</h2>
     </div>
     <div id="hidden-gems-pagination" class="pagination" style="text-align: center"></div>
     <main id="hidden-gems"></main>
-
     <div class="genres" id="horror-div">
         <h2 id="other" style="cursor: pointer">Scream Queens & Slashers: Trending Horror Movies</h2>
     </div>
     <div id="horror-pagination" class="pagination" style="text-align: center"></div>
     <main id="horror"></main>
-
     <div class="genres" id="documentary-div">
         <h2 id="other" style="cursor: pointer">Real Stories: Trending Documentary Movies</h2>
     </div>
     <div id="documentary-pagination" class="pagination" style="text-align: center"></div>
     <main id="documentary" ></main>
-
     <div class="genres" id="animation-div">
         <h2 id="other" style="cursor: pointer">Animated Adventures: Trending Animated Movies</h2>
     </div>
     <div id="animation-pagination" class="pagination" style="text-align: center"></div>
     <main id="animation"></main>
-
     <div class="genres" id="sci-fi-div">
         <h2 id="other" style="cursor: pointer">Future Visions: Trending Science Fiction Movies</h2>
     </div>
     <div id="sci-fi-pagination" class="pagination" style="text-align: center"></div>
     <main id="sci-fi"></main>
-
     <div class="genres" id="western-div">
         <h2 id="other" style="cursor: pointer">Wild West: Trending Western Movies</h2>
     </div>
     <div id="western-pagination" class="pagination" style="text-align: center"></div>
     <main id="western"></main>
-
     <div class="genres" id="romantic-div">
         <h2 id="other" style="cursor: pointer">Love Is in the Air: Trending Romantic Movies</h2>
     </div>
     <div id="romantic-pagination" class="pagination" style="text-align: center"></div>
     <main id="romantic"></main>
-
     <div class="genres" id="thriller-div">
         <h2 id="other" style="cursor: pointer">Edge of Your Seat: Trending Thriller Movies</h2>
     </div>
     <div id="thriller-pagination" class="pagination" style="text-align: center"></div>
     <main id="thriller"></main>
-
     <div class="genres" id="war-div">
         <h2 id="other" style="cursor: pointer">War Stories: Trending War Movies</h2>
     </div>
     <div id="war-pagination" class="pagination" style="text-align: center"></div>
     <main id="war"></main>
-
     <div class="genres" id="mystery-div">
         <h2 id="other" style="cursor: pointer">Whodunit? Mystery & Intrigue in Trending Mystery Movies</h2>
     </div>
     <div id="mystery-pagination" class="pagination" style="text-align: center"></div>
     <main id="mystery"></main>
-
     <div class="genres" id="crime-div">
         <h2 id="other" style="cursor: pointer">Underworld Tales: Trending Crime Movies</h2>
     </div>
     <div id="crime-pagination" class="pagination" style="text-align: center"></div>
     <main id="crime"></main>
-
     <div class="genres" id="comedy-div">
         <h2 id="other" style="cursor: pointer">Laughs Galore: Trending Comedy Movies</h2>
     </div>
     <div id="comedy-pagination" class="pagination" style="text-align: center"></div>
     <main id="comedy"></main>
-
     <div class="genres" id="fantasy-div">
         <h2 id="other" style="cursor: pointer">Other Worlds: Trending Fantasy Movies</h2>
     </div>
     <div id="fantasy-pagination" class="pagination" style="text-align: center"></div>
     <main id="fantasy"></main>
-
     <div class="genres" id="family-div">
         <h2 id="other" style="cursor: pointer">Family Fun Time: Trending Family Movies</h2>
     </div>
     <div id="family-pagination" class="pagination" style="text-align: center"></div>
     <main id="family"></main>
-
     <div class="genres" id="musical-div">
         <h2 id="other" style="cursor: pointer">Enchanting Melodies: Trending Musical Movies</h2>
     </div>
     <div id="musical-pagination" class="pagination" style="text-align: center"></div>
     <main id="musical"></main>
-
     <div class="genres" id="drama-div">
         <h2 id="other" style="cursor: pointer">Emotional Journeys: Trending Drama Movies</h2>
     </div>
     <div id="drama-pagination" class="pagination" style="text-align: center"></div>
     <main id="drama"></main>
-
     <div class="genres" id="classic-div">
         <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movies</h2>
     </div>
     <div id="classic-pagination" class="pagination" style="text-align: center"></div>
     <main id="classic"></main>
-
     <button id="chat-button" onclick="window.location.href='MovieVerse-Frontend/html/chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
     <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 1001">Settings</button>
     <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 255px; right: 10px; z-index: 1001" title="Get a recommended movie to watch for today!">Surprise Me!</button>
@@ -920,7 +875,6 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
     <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 150px; right: 10px; z-index: 1001" title="Want to know more about movies? Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
     <button id="trivia-btn" onclick="window.location.href='MovieVerse-Frontend/html/trivia.html'" style="bottom: 115px; right: 10px; z-index: 1001" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
     <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 1001">Back To Top</button>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="MovieVerse-Frontend/html/chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -955,23 +909,19 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
             <span>Top</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <footer style="margin-top: 40px">
         <p id="footer">© 2024 The MovieVerse. All rights reserved.</p>
         <p>Learn more <a href="MovieVerse-Frontend/html/about.html" id="githubLink10">about The MovieVerse</a> and <a href="MovieVerse-Frontend/html/notifications.html" id="githubLink8">what we offer.</a></p>
         <p style="font-size: 0.1px">View our demos at: <a href="MovieVerse-Frontend/html/inception.html" id="githubLink11">Inception</a>, <a href="MovieVerse-Frontend/html/christopher-nolan.html" id="githubLink16">Christopher Nolan</a>, <a href="MovieVerse-Frontend/html/leonardo-dicaprio.html" id="githubLink9">Leonardo DiCaprio</a>, use our <a href="MovieVerse-Frontend/html/chat.html" id="githubLink14">chat application</a>, or explore the <a href="MovieVerse-Frontend/html/user-profile.html" id="githubLink5">profile feature</a>!</p>
     </footer>
-
     <div id="google_translate_element"></div>
     <div id="translate_control">
         <div class="translate-trigger">Translate</div>
     </div>
-
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     <script>
         function googleTranslateElementInit() {
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chat.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chat.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chatbot.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chatbot.js
index 47871124..30ad3a1f 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chatbot.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/chatbot.js
@@ -3,6 +3,7 @@ import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/ge
 const chatbotInput = document.getElementById("chatbotInput");
 const chatbotBody = document.getElementById("chatbotBody");
 const movieee = `https://${getMovieVerseData()}/3`;
+
 let initialMainContent;
 let conversationHistory = [];
 
@@ -177,6 +178,7 @@ function updateMovieVisitCount(movieId, movieTitle) {
     if (!movieVisits[movieId]) {
         movieVisits[movieId] = { count: 0, title: movieTitle };
     }
+
     movieVisits[movieId].count += 1;
 
     if (!uniqueMoviesViewed.includes(movieId)) {
@@ -219,6 +221,7 @@ function getMostVisitedMovie() {
 
 function getMostVisitedActor() {
     const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+
     let mostVisitedActor = '';
     let maxVisits = 0;
 
@@ -234,6 +237,7 @@ function getMostVisitedActor() {
 
 function getTriviaAccuracy() {
     let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+
     if (triviaStats.totalAttempted === 0) {
         return 'No trivia attempted';
     }
@@ -264,63 +268,6 @@ 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
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -348,66 +295,20 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
             <span style="color: #ff8623;">MovieVerse Assistant:</span>
             <span style="display: inline-block; text-align: left; color: #fff;">
-                Welcome to MovieVerse Assistant! Here's how to get started:
+                Welcome to MovieVerse Assistant 🍿! Here's how to get started:
             </span>
         </div>
         <ul style="text-align: left; margin-bottom: 10px; color: #fff;">
             <li>To find details about a movie, type "Show me details about [movie name]".</li>
-            <li>To watch a movie trailer, type "Show trailer for [movie name]".</li>
-            <li>Or, if you just want quick information about a movie, type "Tell me about [movie name]" or "Do you know about [movie name]".</li>
             <li>You can also ask about genres, top-rated movies, latest movies, get a recommended movie, and any general questions!</li>
-            <li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like the first three pre-defined functionalities above, as they might trigger those specific functions instead of a broader search.</li> 
+            <li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like "Show me details about ...", as they might trigger specific functions instead of a broader search.</li> 
         </ul>
-        <div style="text-align: left; color: #fff;">How may I assist you today?</div>
+        <div style="text-align: left; color: #fff;">How may I assist you today? 🎬🍿</div>
     `;
     chatbotBody.innerHTML += `<div>${initialMessage}</div>`;
     scrollToBottom();
@@ -417,40 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -465,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -549,79 +383,21 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    if (lowerMessage.startsWith("do you know about ") ||
-        lowerMessage.startsWith("tell me about ") ||
-        lowerMessage.startsWith("what is ")) {
-        const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-        return await fetchMovieDetailsFromTMDB(movieName);
-    }
-    if (lowerMessage.startsWith("show me details about ") ||
-        lowerMessage.startsWith("i want to know more about ") ||
-        lowerMessage.startsWith("details about ") ||
-        lowerMessage.startsWith("search for ")) {
-        const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-        fetchAndRedirectToMovieDetails(movieName);
-        return `Searching for details about "${movieName}". Please wait...`;
-    }
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
         return `Searching for the trailer of "${movieName}". Please wait...`;
     }
+
     if (lowerMessage.startsWith("hello") || lowerMessage.startsWith("hi") || lowerMessage.startsWith("hey")) {
         return "Hello! How can I assist you with MovieVerse today?";
     }
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();
@@ -629,7 +405,10 @@ async function movieVerseResponse(message) {
         let fullResponse = '';
         try {
             const genAI = new GoogleGenerativeAI(getAIResponse());
-            const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+            const model = genAI.getGenerativeModel({
+                model: "gemini-1.5-flash",
+                systemInstruction: "You are MovieVerse Assistant - an AI Chatbot of the MovieVerse App. You are here to help users with movie-related or any other general queries. You are trained and powered by MovieVerse AI and Google to provide the best assistance. You can also provide information about movies, actors, directors, genres, and companies, or recommend movies to users.",
+            });
 
             conversationHistory.push({ role: "user", parts: [{ text: message }] });
 
@@ -678,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';
@@ -764,6 +544,7 @@ async function showMovieOfTheDay() {
 function fallbackMovieSelection() {
     const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
     const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+
     localStorage.setItem('selectedMovieId', randomFallbackMovie);
     window.location.href = 'movie-details.html';
 }
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/movie-details.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/movie-details.js
index 957fda89..5d9e8acf 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/movie-details.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/movie-details.js
@@ -1639,8 +1639,15 @@ function createImdbRatingCircle(imdbRating, imdbId) {
     if (imdbRating === 'N/A' || imdbRating === null || imdbRating === undefined) {
         imdbRating = 'N/A';
     }
-
-    imdbRating = imdbRating.toFixed(1);
+    else {
+        imdbRating = parseFloat(imdbRating);
+        if (!isNaN(imdbRating)) {
+            imdbRating = imdbRating.toFixed(1);
+        }
+        else {
+            imdbRating = 'N/A';
+        }
+    }
 
     let circleContainer = document.getElementById('imdbRatingCircleContainer');
     if (!circleContainer) {
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/sign-in.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/sign-in.js
index ca744c7d..dbb35fc4 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/sign-in.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/js/sign-in.js
@@ -58,7 +58,7 @@ document.getElementById('signInForm').addEventListener('submit', async function(
             alert('Successfully signed in!');
             localStorage.setItem('isSignedIn', JSON.stringify(true));
             localStorage.setItem('currentlySignedInMovieVerseUser', email);
-            window.location.href = '../../../../Downloads/The-MovieVerse-Database-ee3ec4ea5610d37178bc008fd505fd99c5f83070/index.html';
+            window.location.href = '../../index.html';
         } else {
             alert('Invalid email or password. Ensure that you have entered a correct combination of email and password - one that we have on file.');
         }
diff --git a/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj b/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj
index 359b349b..a1a529d6 100644
--- a/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj
+++ b/MovieVerse-Mobile/platforms/ios/MovieVerse.xcodeproj/project.pbxproj
@@ -15,9 +15,9 @@
 		302D95F214D2391D003F00A1 /* MainViewController.xib in Resources */ = {isa = PBXBuildFile; fileRef = 302D95F014D2391D003F00A1 /* MainViewController.xib */; };
 		4E7CA2B6272ABB0D00177EF9 /* config.xml in Copy Staging Resources */ = {isa = PBXBuildFile; fileRef = F840E1F0165FE0F500CFE078 /* config.xml */; };
 		4E7CA2B7272ABB0D00177EF9 /* www in Copy Staging Resources */ = {isa = PBXBuildFile; fileRef = 301BF56E109A69640062928A /* www */; };
+		5FFC3F37AA7C4EB09DC474FD /* CDVStatusBar.m in Sources */ = {isa = PBXBuildFile; fileRef = 899EE768E3C34C8A9180DB8F /* CDVStatusBar.m */; };
 		6AFF5BF91D6E424B00AB3073 /* CDVLaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 6AFF5BF81D6E424B00AB3073 /* CDVLaunchScreen.storyboard */; };
-		70B9A13EF2054688973B7685 /* CDVStatusBar.m in Sources */ = {isa = PBXBuildFile; fileRef = 3CDC76DB70D4467C8EBCD9DE /* CDVStatusBar.m */; };
-		CA583DA8FD7CF9576A4DB510 /* libPods-MovieVerse.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 09685F2C616288208F45DA74 /* libPods-MovieVerse.a */; };
+		DE2D9157EB4568D8E3027BB9 /* libPods-MovieVerse.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 67D1FBE10E1C62D022DA813C /* libPods-MovieVerse.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -61,7 +61,7 @@
 
 /* Begin PBXFileReference section */
 		0207DA571B56EA530066E2B4 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
-		09685F2C616288208F45DA74 /* libPods-MovieVerse.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-MovieVerse.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		0D4D48181E26272771737167 /* Pods-MovieVerse.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MovieVerse.release.xcconfig"; path = "Target Support Files/Pods-MovieVerse/Pods-MovieVerse.release.xcconfig"; sourceTree = "<group>"; };
 		1D3623240D0F684500981E51 /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = "<group>"; };
 		1D3623250D0F684500981E51 /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = "<group>"; };
 		1D6058910D05DD3D006BFB54 /* MovieVerse.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = MovieVerse.app; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -75,12 +75,12 @@
 		3047A5101AB8059700498E2A /* build-release.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = "build-release.xcconfig"; path = "cordova/build-release.xcconfig"; sourceTree = SOURCE_ROOT; };
 		3047A5111AB8059700498E2A /* build.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = build.xcconfig; path = cordova/build.xcconfig; sourceTree = SOURCE_ROOT; };
 		32CA4F630368D1EE00C91783 /* MovieVerse-Prefix.pch */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "MovieVerse-Prefix.pch"; sourceTree = "<group>"; };
-		3CDC76DB70D4467C8EBCD9DE /* CDVStatusBar.m */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.objc; name = CDVStatusBar.m; path = "cordova-plugin-statusbar/CDVStatusBar.m"; sourceTree = "<group>"; };
+		3D4AAB9E905347F5A465A054 /* CDVStatusBar.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = CDVStatusBar.h; path = "cordova-plugin-statusbar/CDVStatusBar.h"; sourceTree = "<group>"; };
+		67D1FBE10E1C62D022DA813C /* libPods-MovieVerse.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-MovieVerse.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		6AFF5BF81D6E424B00AB3073 /* CDVLaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; path = CDVLaunchScreen.storyboard; sourceTree = "<group>"; };
-		8B6975EB1EB6B40C2EDAFB3D /* Pods-MovieVerse.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MovieVerse.release.xcconfig"; path = "Target Support Files/Pods-MovieVerse/Pods-MovieVerse.release.xcconfig"; sourceTree = "<group>"; };
-		8CA19BF3BD13464D53C78056 /* Pods-MovieVerse.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MovieVerse.debug.xcconfig"; path = "Target Support Files/Pods-MovieVerse/Pods-MovieVerse.debug.xcconfig"; sourceTree = "<group>"; };
+		899EE768E3C34C8A9180DB8F /* CDVStatusBar.m */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.objc; name = CDVStatusBar.m; path = "cordova-plugin-statusbar/CDVStatusBar.m"; sourceTree = "<group>"; };
 		8D1107310486CEB800E47090 /* MovieVerse-Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = "MovieVerse-Info.plist"; plistStructureDefinitionIdentifier = "com.apple.xcode.plist.structure-definition.iphone.info-plist"; sourceTree = "<group>"; };
-		A6CC00D27F2549A789D7EA48 /* CDVStatusBar.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = CDVStatusBar.h; path = "cordova-plugin-statusbar/CDVStatusBar.h"; sourceTree = "<group>"; };
+		C6E658613EA4D7333DA51B3D /* Pods-MovieVerse.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-MovieVerse.debug.xcconfig"; path = "Target Support Files/Pods-MovieVerse/Pods-MovieVerse.debug.xcconfig"; sourceTree = "<group>"; };
 		EB87FDF31871DA8E0020F90C /* www */ = {isa = PBXFileReference; lastKnownFileType = folder; name = www; path = ../../www; sourceTree = "<group>"; };
 		EB87FDF41871DAF40020F90C /* config.xml */ = {isa = PBXFileReference; lastKnownFileType = text.xml; name = config.xml; path = ../../config.xml; sourceTree = "<group>"; };
 		ED33DF2A687741AEAF9F8254 /* Bridging-Header.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "Bridging-Header.h"; sourceTree = "<group>"; };
@@ -93,7 +93,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				301BF552109A68D80062928A /* libCordova.a in Frameworks */,
-				CA583DA8FD7CF9576A4DB510 /* libPods-MovieVerse.a in Frameworks */,
+				DE2D9157EB4568D8E3027BB9 /* libPods-MovieVerse.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -121,7 +121,7 @@
 				29B97317FDCFA39411CA2CEA /* Resources */,
 				29B97323FDCFA39411CA2CEA /* Frameworks */,
 				19C28FACFE9D520D11CA2CBB /* Products */,
-				92A3381BDFE98E7D600C23AD /* Pods */,
+				71FB44DFCD83A88BB3F855B7 /* Pods */,
 			);
 			name = CustomTemplate;
 			sourceTree = "<group>";
@@ -156,7 +156,7 @@
 		29B97323FDCFA39411CA2CEA /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
-				09685F2C616288208F45DA74 /* libPods-MovieVerse.a */,
+				67D1FBE10E1C62D022DA813C /* libPods-MovieVerse.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -183,18 +183,18 @@
 		307C750510C5A3420062BCA9 /* Plugins */ = {
 			isa = PBXGroup;
 			children = (
-				3CDC76DB70D4467C8EBCD9DE /* CDVStatusBar.m */,
-				A6CC00D27F2549A789D7EA48 /* CDVStatusBar.h */,
+				899EE768E3C34C8A9180DB8F /* CDVStatusBar.m */,
+				3D4AAB9E905347F5A465A054 /* CDVStatusBar.h */,
 			);
 			name = Plugins;
 			path = MovieVerse/Plugins;
 			sourceTree = SOURCE_ROOT;
 		};
-		92A3381BDFE98E7D600C23AD /* Pods */ = {
+		71FB44DFCD83A88BB3F855B7 /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				8CA19BF3BD13464D53C78056 /* Pods-MovieVerse.debug.xcconfig */,
-				8B6975EB1EB6B40C2EDAFB3D /* Pods-MovieVerse.release.xcconfig */,
+				C6E658613EA4D7333DA51B3D /* Pods-MovieVerse.debug.xcconfig */,
+				0D4D48181E26272771737167 /* Pods-MovieVerse.release.xcconfig */,
 			);
 			name = Pods;
 			path = Pods;
@@ -216,7 +216,7 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 1D6058960D05DD3E006BFB54 /* Build configuration list for PBXNativeTarget "MovieVerse" */;
 			buildPhases = (
-				336D929C7E4EBB5DAE982A7D /* [CP] Check Pods Manifest.lock */,
+				40AA869E3105B8EACFDB9445 /* [CP] Check Pods Manifest.lock */,
 				857339E32710CC9700A1C74C /* Copy Staging Resources */,
 				1D60588D0D05DD3D006BFB54 /* Resources */,
 				1D60588E0D05DD3D006BFB54 /* Sources */,
@@ -301,7 +301,7 @@
 /* End PBXResourcesBuildPhase section */
 
 /* Begin PBXShellScriptBuildPhase section */
-		336D929C7E4EBB5DAE982A7D /* [CP] Check Pods Manifest.lock */ = {
+		40AA869E3105B8EACFDB9445 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -333,7 +333,7 @@
 				1D60589B0D05DD56006BFB54 /* main.m in Sources */,
 				1D3623260D0F684500981E51 /* AppDelegate.m in Sources */,
 				302D95F114D2391D003F00A1 /* MainViewController.m in Sources */,
-				70B9A13EF2054688973B7685 /* CDVStatusBar.m in Sources */,
+				5FFC3F37AA7C4EB09DC474FD /* CDVStatusBar.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
diff --git a/MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate b/MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate
index 1c694f58..ad00f6c0 100644
Binary files a/MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate and b/MovieVerse-Mobile/platforms/ios/MovieVerse.xcworkspace/xcuserdata/davidnguyen.xcuserdatad/UserInterfaceState.xcuserstate differ
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 87048c73..5a808f24 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/about.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>About The MovieVerse - Your Ultimate Movie Guide</title>
@@ -215,20 +214,16 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 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>
-
         <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
-
         <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -249,7 +244,6 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 <button type="button" id="clear-search" style="display: none">Clear</button>
             </div>
         </form>
-
         <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
         <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
         <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
@@ -258,18 +252,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
         <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: 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
             </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="analytics.html">MovieVerse Analytics</a></li>
             <li><a href="#aboutHeader">About The MovieVerse</a></li>
@@ -286,18 +277,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
-
     <main id="main2" style="margin: 0 auto">
         <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
         <p style="color: white; text-align: center">Welcome to The MovieVerse, your ultimate database for exploring the magic of movies. Created by <strong><a id="profileLink" href="http://github.com/hoangsonww">Son Nguyen</a></strong> in 2023 with a vision to celebrate cinematic art, MovieVerse offers a unique but comprehensive platform for more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
         <div style="width: 100%">
             <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
         </div>
-
         <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
         <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-
         <ul style="align-content: center; color: white">
             <li><i style="margin-right: 3px" class="fas fa-film"></i> <strong>Curated Movie Collections:</strong> Explore an array of movies categorized by genre, director, language, and era, including specialized sections like Director's Spotlight and award-winning films.</li>
             <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
@@ -313,11 +301,8 @@ <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
             <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
             <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
         </ul>
-
         <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
-
         <p style="color: white; text-align: center; margin-bottom: 12px">Like MovieVerse, our other apps are designed to enhance your daily life and help you stay organized, focused, and informed. Check out our other apps below, or visit my <a style="text-decoration: underline" id="githubLink" href="https://github.com/hoangsonww">GitHub profile</a> for more!</p>
-
         <ul style="align-content: center; color: white">
             <li>
                 <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
@@ -340,10 +325,8 @@ <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
                 <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
             </li>
         </ul>
-
         <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
         <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
-
         <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
         <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
         <br/>
@@ -354,20 +337,17 @@ <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
                 <i style="margin-left: 3px" class="fab fa-github"></i>
             </em>
         </p>
-
         <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
         <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
         <br/>
         <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
         <br/>
         <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
-
         <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
         <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
         <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
         <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
     </main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -381,7 +361,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -412,12 +391,10 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             <span>Trivia</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <script>
         window.addEventListener('load', function() {
             adjustAnchorHeights();
@@ -516,13 +493,11 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <footer>
         <a href="../../index.html" style="cursor: pointer; text-decoration: none">
             <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
         </a>
     </footer>
-
     <script>
         document.getElementById('logo').addEventListener('click', function() {
             document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
@@ -983,11 +958,9 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchBar = document.getElementById('search');
@@ -1016,7 +989,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             toggleVisibility();
         });
     </script>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchInput = document.getElementById('search');
@@ -1049,7 +1021,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             searchInput.addEventListener('input', toggleButtons);
         });
     </script>
-
     <script>
         function showSpinner() {
             document.getElementById('myModal').classList.add('modal-visible');
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 e96b40fe..ad563777 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
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>Actor Details - The MovieVerse</title>
@@ -466,7 +465,7 @@ <h2 id="actor-name" class="actor-header"></h2>
         document.getElementById('actor-image').addEventListener('click', function() {
             const imageUrl = this.src.replace('w1280', 'original')
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
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 17112431..9b02e879 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/analytics.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/analytics.html
@@ -341,7 +341,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
     </nav>
     <div>
         <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
-        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>150,000</strong> monthly active users!</p>
+        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>450,000</strong> monthly active users!</p>
     </div>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
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 438da315..4054ba67 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chat.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chat.html
@@ -499,6 +499,7 @@ <h3>Recent & Suggested Chats</h3>
     </script>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading chats...</p>
     </div>
     <footer id="footer">
         <p>© 2024 The MovieVerse. All rights reserved.</p>
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 f0b6c77c..afb9de67 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
@@ -479,7 +479,7 @@ <h2 id="company-name" class="company-header"></h2>
         document.getElementById('company-logo').addEventListener('click', function() {
             const imageUrl = this.src.replace('w500', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; background-color: white">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
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 55acbdc4..14778aa6 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
@@ -820,7 +820,7 @@ <h2 id="director-name" class="director-header"></h2>
     document.getElementById('director-image').addEventListener('click', function() {
         const imageUrl = this.src.replace('w1280', 'original');
         const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 95%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
         document.body.insertAdjacentHTML('beforeend', modalHtml);
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 bfc4fb00..c50bce4e 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
@@ -883,7 +883,7 @@ <h2 id="movie-rating" class="movie-rating"></h2>
         document.getElementById('movie-image').addEventListener('click', function() {
             let imageUrl = this.src.replace('w780', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;" alt="Movie Image" />
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
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 5aeeaee8..e34b5aad 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/notifications.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/notifications.html
@@ -354,7 +354,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
     </nav>
     <main>
         <section id="newFeatures">
-            <h2 style="cursor: pointer">New Features</h2>
+            <h2 style="cursor: pointer" id="newFeaturesHeader">New Features</h2>
             <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
@@ -370,7 +370,7 @@ <h2 style="cursor: pointer">New Features</h2>
             </p>
         </section>
         <section id="newReleases">
-            <h2 style="cursor: pointer">New Releases</h2>
+            <h2 id="newReleasesHeader" style="cursor: pointer">New Releases</h2>
             <h3>Since Your Last Visit</h3>
             <ul id="releasesSinceLastVisit"></ul>
             <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
@@ -385,7 +385,7 @@ <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
             </p>
         </section>
         <section id="tipsTricks">
-            <h2 style="cursor: pointer">Tips & Tricks</h2>
+            <h2 style="cursor: pointer" id="tipsTricksHeader">Tips & Tricks</h2>
             <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
@@ -400,7 +400,7 @@ <h2 style="cursor: pointer">Tips & Tricks</h2>
             </p>
         </section>
         <section id="popularActors">
-            <h2 style="cursor: pointer">Popular Actors</h2>
+            <h2 style="cursor: pointer" id="popularActorsHeader">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">
@@ -408,7 +408,7 @@ <h2 style="cursor: pointer">Popular Actors</h2>
             </p>
         </section>
         <section id="popularDirectors">
-            <h2 style="cursor: pointer">Popular Directors</h2>
+            <h2 style="cursor: pointer" id="popularDirectorsHeader">Popular Directors</h2>
             <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -495,31 +495,31 @@ <h2 style="cursor: pointer">Popular Directors</h2>
             }
         });
 
-        document.getElementById('newFeatures').addEventListener('click', function(e) {
+        document.getElementById('newFeaturesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('newReleases').addEventListener('click', function(e) {
+        document.getElementById('newReleasesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+        document.getElementById('tipsTricksHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularActors').addEventListener('click', function(e) {
+        document.getElementById('popularActorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+        document.getElementById('popularDirectorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/actor-details.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/actor-details.js
index 0035b2e1..f8b7b542 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/actor-details.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/actor-details.js
@@ -325,7 +325,7 @@ async function populateActorDetails(actor, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
@@ -808,4 +808,4 @@ function applyTextColor(color) {
         .forEach(element => {
             element.style.color = color;
         });
-}
\ No newline at end of file
+}
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chat.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chat.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
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 6c17c9b3..30ad3a1f 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chatbot.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/chatbot.js
@@ -268,63 +268,6 @@ 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
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -352,50 +295,6 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
@@ -419,41 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -468,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -552,68 +383,9 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    // if (lowerMessage.startsWith("do you know about ") ||
-    //     lowerMessage.startsWith("tell me about ") ||
-    //     lowerMessage.startsWith("what is ")) {
-    //     const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-    //     return await fetchMovieDetailsFromTMDB(movieName);
-    // }
-
-    // if (lowerMessage.startsWith("show me details about ") ||
-    //     lowerMessage.startsWith("i want to know more about ") ||
-    //     lowerMessage.startsWith("details about ") ||
-    //     lowerMessage.startsWith("search for ")) {
-    //     const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-    //     fetchAndRedirectToMovieDetails(movieName);
-    //     return `Searching for details about "${movieName}". Please wait...`;
-    // }
-
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
@@ -626,9 +398,6 @@ async function movieVerseResponse(message) {
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();
@@ -688,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/director-details.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/director-details.js
index 4f8daa13..ce289989 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/director-details.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/director-details.js
@@ -317,7 +317,7 @@ async function populateDirectorDetails(director, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-details.js
index 5d9e8acf..1f3c85b8 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-details.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/movie-details.js
@@ -1427,7 +1427,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/css/index.css b/MovieVerse-Mobile/platforms/ios/www/css/index.css
deleted file mode 100644
index ecea7e8e..00000000
--- a/MovieVerse-Mobile/platforms/ios/www/css/index.css
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-* {
-    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-}
-
-body {
-    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
-    background-color:#E4E4E4;
-    background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
-    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
-    font-size:12px;
-    height:100vh;
-    margin:0px;
-    padding:0px;
-    /* Padding to avoid the "unsafe" areas behind notches in the screen */
-    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
-    text-transform:uppercase;
-    width:100%;
-}
-
-/* Portrait layout (default) */
-.app {
-    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
-    position:absolute;             /* position in the center of the screen */
-    left:50%;
-    top:50%;
-    height:50px;                   /* text area height */
-    width:225px;                   /* text area width */
-    text-align:center;
-    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
-    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
-                                   /* offset horizontal: half of text area width */
-}
-
-/* Landscape layout (with min-width) */
-@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
-    .app {
-        background-position:left center;
-        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
-        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
-                                      /* offset horizontal: half of image width and text area width */
-    }
-}
-
-h1 {
-    font-size:24px;
-    font-weight:normal;
-    margin:0px;
-    overflow:visible;
-    padding:0px;
-    text-align:center;
-}
-
-.event {
-    border-radius:4px;
-    color:#FFFFFF;
-    font-size:12px;
-    margin:0px 30px;
-    padding:2px 0px;
-}
-
-.event.listening {
-    background-color:#333333;
-    display:block;
-}
-
-.event.received {
-    background-color:#4B946A;
-    display:none;
-}
-
-#deviceready.ready .event.listening { display: none; }
-#deviceready.ready .event.received { display: block; }
-
-@keyframes fade {
-    from { opacity: 1.0; }
-    50% { opacity: 0.4; }
-    to { opacity: 1.0; }
-}
-
-.blink {
-    animation:fade 3000ms infinite;
-    -webkit-animation:fade 3000ms infinite;
-}
-
-
-@media screen and (prefers-color-scheme: dark) {
-    body {
-        background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
-    }
-}
diff --git a/MovieVerse-Mobile/platforms/ios/www/index.html b/MovieVerse-Mobile/platforms/ios/www/index.html
index 89635dda..cb97d18f 100644
--- a/MovieVerse-Mobile/platforms/ios/www/index.html
+++ b/MovieVerse-Mobile/platforms/ios/www/index.html
@@ -1,10 +1,8 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
-
     <!-- Meta tags for SEO -->
     <meta name="description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -49,12 +47,10 @@
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" as="style">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" media="print" onload="this.media='all';">
     <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></noscript>
-
     <!-- Poppins Fonts -->
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-
     <!-- Schema.org markup for Rich Results -->
     <script type="application/ld+json">
         {
@@ -115,7 +111,6 @@
             "url": "https://movie-verse.com/MovieVerse-Frontend/html/inception.html"
         }
     </script>
-
     <style>
         @font-face {
             font-family: 'Poppins';
@@ -535,7 +530,6 @@
         }
     </style>
 </head>
-
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
 <script>
     window.dataLayer = window.dataLayer || [];
@@ -543,7 +537,6 @@
     gtag('js', new Date());
     gtag('config', 'G-CQKJ67FXZ4');
 </script>
-
 <body>
     <header id="homepage-header" style="margin-bottom: -10px">
         <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
@@ -588,7 +581,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <ul id="newReleasesList"></ul>
         </div>
     </header>
-
     <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;">
@@ -632,7 +624,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <li><a href="MovieVerse-Frontend/html/feedback.html">MovieVerse Feedback</a></li>
         </ul>
     </nav>
-
     <div class="mobile-sign-in-container">
         <button id="mobileGoogleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="mobileSignInOutText">Sign In</span>
@@ -644,17 +635,14 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <i class="fas fa-user" id="mobileProfileIcon"></i>
         </button>
     </div>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <div class="genres">
         <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2>
     </div>
     <div id="most-popular-pagination" class="pagination" style="text-align: center"></div>
     <main id="most-popular"></main>
-
     <div id="ad-container3" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -668,7 +656,6 @@ <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="recommendedDIV">
         <h2 id="other" style="cursor: pointer" title="Here are some personalized movie suggestions we've generated based on your preferences! Check them out, and let us know what you think!">
             Recommended For You: Personalized Movie Suggestions
@@ -676,7 +663,6 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     </div>
     <div id="recommended-pagination" class="pagination" style="text-align: center"></div>
     <main id="recommended"></main>
-
     <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -689,13 +675,11 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="award-winning-div">
         <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning Movies</h2>
     </div>
     <div id="award-winning-pagination" class="pagination" style="text-align: center"></div>
     <main id="award-winning"></main>
-
     <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -708,13 +692,11 @@ <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" style="display: flex; justify-content: space-between; align-items: center;">
         <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
         <button id="change-director-btn" onclick="changeDirector()" style="padding: 5px 10px; margin-right: 10px; margin-top: 25px; cursor: pointer;">Change Director</button>
     </div>
     <main id="director-spotlight"></main>
-
     <div id="ad-container5" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -727,13 +709,11 @@ <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="action-div">
         <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</h2>
     </div>
     <div id="action-pagination" class="pagination" style="text-align: center"></div>
     <main id="action"></main>
-
     <div id="ad-container6" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -746,13 +726,11 @@ <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="vietnamese-div">
         <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese Movies</h2>
     </div>
     <div id="vietnamese-pagination" class="pagination" style="text-align: center"></div>
     <main id="vietnamese"></main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -765,13 +743,11 @@ <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="indian-div">
         <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian Movies</h2>
     </div>
     <div id="indian-pagination" class="pagination" style="text-align: center"></div>
     <main id="indian"></main>
-
     <div id="ad-container4" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -784,13 +760,11 @@ <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="korean-div">
         <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies</h2>
     </div>
     <div id="korean-pagination" class="pagination" style="text-align: center"></div>
     <main id="korean"></main>
-
     <div id="ad-container7" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -803,115 +777,96 @@ <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies<
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="tv-series-div">
         <h2 id="other" style="cursor: pointer">Binge-Worthy Series: Trending TV Series</h2>
     </div>
     <div id="tv-series-pagination" class="pagination" style="text-align: center"></div>
     <main id="tv-series" ></main>
-
     <div class="genres" id="hidden-gems-div">
         <h2 id="other" style="cursor: pointer">Hidden Treasures: Discover Gems in Cinema</h2>
     </div>
     <div id="hidden-gems-pagination" class="pagination" style="text-align: center"></div>
     <main id="hidden-gems"></main>
-
     <div class="genres" id="horror-div">
         <h2 id="other" style="cursor: pointer">Scream Queens & Slashers: Trending Horror Movies</h2>
     </div>
     <div id="horror-pagination" class="pagination" style="text-align: center"></div>
     <main id="horror"></main>
-
     <div class="genres" id="documentary-div">
         <h2 id="other" style="cursor: pointer">Real Stories: Trending Documentary Movies</h2>
     </div>
     <div id="documentary-pagination" class="pagination" style="text-align: center"></div>
     <main id="documentary" ></main>
-
     <div class="genres" id="animation-div">
         <h2 id="other" style="cursor: pointer">Animated Adventures: Trending Animated Movies</h2>
     </div>
     <div id="animation-pagination" class="pagination" style="text-align: center"></div>
     <main id="animation"></main>
-
     <div class="genres" id="sci-fi-div">
         <h2 id="other" style="cursor: pointer">Future Visions: Trending Science Fiction Movies</h2>
     </div>
     <div id="sci-fi-pagination" class="pagination" style="text-align: center"></div>
     <main id="sci-fi"></main>
-
     <div class="genres" id="western-div">
         <h2 id="other" style="cursor: pointer">Wild West: Trending Western Movies</h2>
     </div>
     <div id="western-pagination" class="pagination" style="text-align: center"></div>
     <main id="western"></main>
-
     <div class="genres" id="romantic-div">
         <h2 id="other" style="cursor: pointer">Love Is in the Air: Trending Romantic Movies</h2>
     </div>
     <div id="romantic-pagination" class="pagination" style="text-align: center"></div>
     <main id="romantic"></main>
-
     <div class="genres" id="thriller-div">
         <h2 id="other" style="cursor: pointer">Edge of Your Seat: Trending Thriller Movies</h2>
     </div>
     <div id="thriller-pagination" class="pagination" style="text-align: center"></div>
     <main id="thriller"></main>
-
     <div class="genres" id="war-div">
         <h2 id="other" style="cursor: pointer">War Stories: Trending War Movies</h2>
     </div>
     <div id="war-pagination" class="pagination" style="text-align: center"></div>
     <main id="war"></main>
-
     <div class="genres" id="mystery-div">
         <h2 id="other" style="cursor: pointer">Whodunit? Mystery & Intrigue in Trending Mystery Movies</h2>
     </div>
     <div id="mystery-pagination" class="pagination" style="text-align: center"></div>
     <main id="mystery"></main>
-
     <div class="genres" id="crime-div">
         <h2 id="other" style="cursor: pointer">Underworld Tales: Trending Crime Movies</h2>
     </div>
     <div id="crime-pagination" class="pagination" style="text-align: center"></div>
     <main id="crime"></main>
-
     <div class="genres" id="comedy-div">
         <h2 id="other" style="cursor: pointer">Laughs Galore: Trending Comedy Movies</h2>
     </div>
     <div id="comedy-pagination" class="pagination" style="text-align: center"></div>
     <main id="comedy"></main>
-
     <div class="genres" id="fantasy-div">
         <h2 id="other" style="cursor: pointer">Other Worlds: Trending Fantasy Movies</h2>
     </div>
     <div id="fantasy-pagination" class="pagination" style="text-align: center"></div>
     <main id="fantasy"></main>
-
     <div class="genres" id="family-div">
         <h2 id="other" style="cursor: pointer">Family Fun Time: Trending Family Movies</h2>
     </div>
     <div id="family-pagination" class="pagination" style="text-align: center"></div>
     <main id="family"></main>
-
     <div class="genres" id="musical-div">
         <h2 id="other" style="cursor: pointer">Enchanting Melodies: Trending Musical Movies</h2>
     </div>
     <div id="musical-pagination" class="pagination" style="text-align: center"></div>
     <main id="musical"></main>
-
     <div class="genres" id="drama-div">
         <h2 id="other" style="cursor: pointer">Emotional Journeys: Trending Drama Movies</h2>
     </div>
     <div id="drama-pagination" class="pagination" style="text-align: center"></div>
     <main id="drama"></main>
-
     <div class="genres" id="classic-div">
         <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movies</h2>
     </div>
     <div id="classic-pagination" class="pagination" style="text-align: center"></div>
     <main id="classic"></main>
-
     <button id="chat-button" onclick="window.location.href='MovieVerse-Frontend/html/chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
     <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 1001">Settings</button>
     <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 255px; right: 10px; z-index: 1001" title="Get a recommended movie to watch for today!">Surprise Me!</button>
@@ -920,7 +875,6 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
     <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 150px; right: 10px; z-index: 1001" title="Want to know more about movies? Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
     <button id="trivia-btn" onclick="window.location.href='MovieVerse-Frontend/html/trivia.html'" style="bottom: 115px; right: 10px; z-index: 1001" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
     <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 1001">Back To Top</button>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="MovieVerse-Frontend/html/chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -955,23 +909,19 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
             <span>Top</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <footer style="margin-top: 40px">
         <p id="footer">© 2024 The MovieVerse. All rights reserved.</p>
         <p>Learn more <a href="MovieVerse-Frontend/html/about.html" id="githubLink10">about The MovieVerse</a> and <a href="MovieVerse-Frontend/html/notifications.html" id="githubLink8">what we offer.</a></p>
         <p style="font-size: 0.1px">View our demos at: <a href="MovieVerse-Frontend/html/inception.html" id="githubLink11">Inception</a>, <a href="MovieVerse-Frontend/html/christopher-nolan.html" id="githubLink16">Christopher Nolan</a>, <a href="MovieVerse-Frontend/html/leonardo-dicaprio.html" id="githubLink9">Leonardo DiCaprio</a>, use our <a href="MovieVerse-Frontend/html/chat.html" id="githubLink14">chat application</a>, or explore the <a href="MovieVerse-Frontend/html/user-profile.html" id="githubLink5">profile feature</a>!</p>
     </footer>
-
     <div id="google_translate_element"></div>
     <div id="translate_control">
         <div class="translate-trigger">Translate</div>
     </div>
-
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     <script>
         function googleTranslateElementInit() {
diff --git a/MovieVerse-Mobile/platforms/ios/www/js/chat.js b/MovieVerse-Mobile/platforms/ios/www/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Mobile/platforms/ios/www/js/chat.js
+++ b/MovieVerse-Mobile/platforms/ios/www/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
diff --git a/MovieVerse-Mobile/platforms/ios/www/js/chatbot.js b/MovieVerse-Mobile/platforms/ios/www/js/chatbot.js
index 47871124..30ad3a1f 100644
--- a/MovieVerse-Mobile/platforms/ios/www/js/chatbot.js
+++ b/MovieVerse-Mobile/platforms/ios/www/js/chatbot.js
@@ -3,6 +3,7 @@ import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/ge
 const chatbotInput = document.getElementById("chatbotInput");
 const chatbotBody = document.getElementById("chatbotBody");
 const movieee = `https://${getMovieVerseData()}/3`;
+
 let initialMainContent;
 let conversationHistory = [];
 
@@ -177,6 +178,7 @@ function updateMovieVisitCount(movieId, movieTitle) {
     if (!movieVisits[movieId]) {
         movieVisits[movieId] = { count: 0, title: movieTitle };
     }
+
     movieVisits[movieId].count += 1;
 
     if (!uniqueMoviesViewed.includes(movieId)) {
@@ -219,6 +221,7 @@ function getMostVisitedMovie() {
 
 function getMostVisitedActor() {
     const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+
     let mostVisitedActor = '';
     let maxVisits = 0;
 
@@ -234,6 +237,7 @@ function getMostVisitedActor() {
 
 function getTriviaAccuracy() {
     let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+
     if (triviaStats.totalAttempted === 0) {
         return 'No trivia attempted';
     }
@@ -264,63 +268,6 @@ 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
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -348,66 +295,20 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
             <span style="color: #ff8623;">MovieVerse Assistant:</span>
             <span style="display: inline-block; text-align: left; color: #fff;">
-                Welcome to MovieVerse Assistant! Here's how to get started:
+                Welcome to MovieVerse Assistant 🍿! Here's how to get started:
             </span>
         </div>
         <ul style="text-align: left; margin-bottom: 10px; color: #fff;">
             <li>To find details about a movie, type "Show me details about [movie name]".</li>
-            <li>To watch a movie trailer, type "Show trailer for [movie name]".</li>
-            <li>Or, if you just want quick information about a movie, type "Tell me about [movie name]" or "Do you know about [movie name]".</li>
             <li>You can also ask about genres, top-rated movies, latest movies, get a recommended movie, and any general questions!</li>
-            <li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like the first three pre-defined functionalities above, as they might trigger those specific functions instead of a broader search.</li> 
+            <li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like "Show me details about ...", as they might trigger specific functions instead of a broader search.</li> 
         </ul>
-        <div style="text-align: left; color: #fff;">How may I assist you today?</div>
+        <div style="text-align: left; color: #fff;">How may I assist you today? 🎬🍿</div>
     `;
     chatbotBody.innerHTML += `<div>${initialMessage}</div>`;
     scrollToBottom();
@@ -417,40 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -465,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -549,79 +383,21 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    if (lowerMessage.startsWith("do you know about ") ||
-        lowerMessage.startsWith("tell me about ") ||
-        lowerMessage.startsWith("what is ")) {
-        const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-        return await fetchMovieDetailsFromTMDB(movieName);
-    }
-    if (lowerMessage.startsWith("show me details about ") ||
-        lowerMessage.startsWith("i want to know more about ") ||
-        lowerMessage.startsWith("details about ") ||
-        lowerMessage.startsWith("search for ")) {
-        const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-        fetchAndRedirectToMovieDetails(movieName);
-        return `Searching for details about "${movieName}". Please wait...`;
-    }
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
         return `Searching for the trailer of "${movieName}". Please wait...`;
     }
+
     if (lowerMessage.startsWith("hello") || lowerMessage.startsWith("hi") || lowerMessage.startsWith("hey")) {
         return "Hello! How can I assist you with MovieVerse today?";
     }
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();
@@ -629,7 +405,10 @@ async function movieVerseResponse(message) {
         let fullResponse = '';
         try {
             const genAI = new GoogleGenerativeAI(getAIResponse());
-            const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+            const model = genAI.getGenerativeModel({
+                model: "gemini-1.5-flash",
+                systemInstruction: "You are MovieVerse Assistant - an AI Chatbot of the MovieVerse App. You are here to help users with movie-related or any other general queries. You are trained and powered by MovieVerse AI and Google to provide the best assistance. You can also provide information about movies, actors, directors, genres, and companies, or recommend movies to users.",
+            });
 
             conversationHistory.push({ role: "user", parts: [{ text: message }] });
 
@@ -678,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';
@@ -764,6 +544,7 @@ async function showMovieOfTheDay() {
 function fallbackMovieSelection() {
     const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
     const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+
     localStorage.setItem('selectedMovieId', randomFallbackMovie);
     window.location.href = 'movie-details.html';
 }
diff --git a/MovieVerse-Mobile/platforms/ios/www/js/movie-details.js b/MovieVerse-Mobile/platforms/ios/www/js/movie-details.js
index 957fda89..5d9e8acf 100644
--- a/MovieVerse-Mobile/platforms/ios/www/js/movie-details.js
+++ b/MovieVerse-Mobile/platforms/ios/www/js/movie-details.js
@@ -1639,8 +1639,15 @@ function createImdbRatingCircle(imdbRating, imdbId) {
     if (imdbRating === 'N/A' || imdbRating === null || imdbRating === undefined) {
         imdbRating = 'N/A';
     }
-
-    imdbRating = imdbRating.toFixed(1);
+    else {
+        imdbRating = parseFloat(imdbRating);
+        if (!isNaN(imdbRating)) {
+            imdbRating = imdbRating.toFixed(1);
+        }
+        else {
+            imdbRating = 'N/A';
+        }
+    }
 
     let circleContainer = document.getElementById('imdbRatingCircleContainer');
     if (!circleContainer) {
diff --git a/MovieVerse-Mobile/platforms/ios/www/js/sign-in.js b/MovieVerse-Mobile/platforms/ios/www/js/sign-in.js
index ca744c7d..dbb35fc4 100644
--- a/MovieVerse-Mobile/platforms/ios/www/js/sign-in.js
+++ b/MovieVerse-Mobile/platforms/ios/www/js/sign-in.js
@@ -58,7 +58,7 @@ document.getElementById('signInForm').addEventListener('submit', async function(
             alert('Successfully signed in!');
             localStorage.setItem('isSignedIn', JSON.stringify(true));
             localStorage.setItem('currentlySignedInMovieVerseUser', email);
-            window.location.href = '../../../../Downloads/The-MovieVerse-Database-ee3ec4ea5610d37178bc008fd505fd99c5f83070/index.html';
+            window.location.href = '../../index.html';
         } else {
             alert('Invalid email or password. Ensure that you have entered a correct combination of email and password - one that we have on file.');
         }
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html
index 87048c73..5a808f24 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>About The MovieVerse - Your Ultimate Movie Guide</title>
@@ -215,20 +214,16 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 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>
-
         <button id="nav-toggle" class="nav-toggle notranslate" title="Toggle side navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
-
         <button id="googleSignInBtn" class="nav-btn notranslate" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -249,7 +244,6 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
                 <button type="button" id="clear-search" style="display: none">Clear</button>
             </div>
         </form>
-
         <button id="chat-button" onclick="window.location.href='chat.html'" style="bottom: 300px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
         <button id="settings-btn" style="position: fixed; bottom: 265px; right: 10px">Settings</button>
         <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 230px; right: 10px">Surprise Me!</button>
@@ -258,18 +252,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
         <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 125px; right: 10px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
         <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: 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
             </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="analytics.html">MovieVerse Analytics</a></li>
             <li><a href="#aboutHeader">About The MovieVerse</a></li>
@@ -286,18 +277,15 @@ <h1 id="my-heading" style="margin-bottom: -9px" class="notranslate">
             <li><a href="support.html">Contact Support</a></li>
         </ul>
     </nav>
-
     <main id="main2" style="margin: 0 auto">
         <h2 id="aboutHeader" style="align-self: center; cursor: pointer">About The MovieVerse</h2>
         <p style="color: white; text-align: center">Welcome to The MovieVerse, your ultimate database for exploring the magic of movies. Created by <strong><a id="profileLink" href="http://github.com/hoangsonww">Son Nguyen</a></strong> in 2023 with a vision to celebrate cinematic art, MovieVerse offers a unique but comprehensive platform for more than <strong>290,000</strong> movie lovers worldwide to discover, engage, and immerse themselves in the world of film.</p>
         <div style="width: 100%">
             <img id="logo" src="../../images/uwu.webp" alt="The MovieVerse" style="width: 200px; max-width: 800px; margin: 20px auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)">
         </div>
-
         <p style="color: white; text-align: center; width: 100%;">Thank you for visiting MovieVerse today!  🎬🍿</p>
         <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-
         <ul style="align-content: center; color: white">
             <li><i style="margin-right: 3px" class="fas fa-film"></i> <strong>Curated Movie Collections:</strong> Explore an array of movies categorized by genre, director, language, and era, including specialized sections like Director's Spotlight and award-winning films.</li>
             <li><i style="margin-right: 3px" class="fas fa-user-tie"></i> <strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
@@ -313,11 +301,8 @@ <h3 id="subheading1" style="cursor: pointer">Core Features:</h3>
             <li><i style="margin-right: 3px" class="fas fa-star"></i> <strong>User Ratings and Reviews:</strong> <a id="githubLink1" href="movie-details.html">Rate</a> movies on a scale of 1 to 10, with your ratings contributing to the overall rating of each movie in our database & share your thoughts and opinions with the MovieVerse community.</li>
             <li><i style="margin-right: 3px" class="fas fa-star-half-alt"></i> <strong>IMDb, Metacritics, and Rotten Tomatoes Ratings:</strong> Aside from ratings from our users, you can also view IMDb, Metacritics, and RT ratings for each movie directly <a id="githubLink1" href="movie-details.html">within our app</a>.</li>
         </ul>
-
         <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
-
         <p style="color: white; text-align: center; margin-bottom: 12px">Like MovieVerse, our other apps are designed to enhance your daily life and help you stay organized, focused, and informed. Check out our other apps below, or visit my <a style="text-decoration: underline" id="githubLink" href="https://github.com/hoangsonww">GitHub profile</a> for more!</p>
-
         <ul style="align-content: center; color: white">
             <li>
                 <p style="color: black; text-align: center">Organize your thoughts effortlessly with StickyNotes, a simple yet effective note-taking app that can also help you focus on your tasks by setting reminders and pomodoro timers.</p>
@@ -340,10 +325,8 @@ <h3 id="subheading2" style="cursor: pointer">Explore Our Other Apps:</h3>
                 <button onclick="window.location.href='https://hoangsonww.github.io/The-Event-Horizon-App/';" class="app-btn">The EventHorizon App</button>
             </li>
         </ul>
-
         <h3 id="subheading" style="cursor: pointer">Our Vision:</h3>
         <p style="color: white; text-align: center">Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.</p>
-
         <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
         <p style="color: white; text-align: center">We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including AI-driven recommendations and social integration for shared movie experiences.</p>
         <br/>
@@ -354,20 +337,17 @@ <h3 id="subheading3" style="cursor: pointer">Join The Journey:</h3>
                 <i style="margin-left: 3px" class="fab fa-github"></i>
             </em>
         </p>
-
         <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
         <p style="color: white; text-align: center">Here are some links that you might find useful: You can explore the <a href="analytics.html" style="text-decoration: underline" id="githubLink">analytics page</a> of our database, read our <a style="text-decoration: underline" id="githubLink" href="terms-of-service.html">terms of service</a>, and review our <a style="text-decoration: underline" id="githubLink" href="privacy-policy.html">privacy policy</a>. Feel free to <a style="text-decoration: underline" id="githubLink" href="support.html">reach out</a> to us or <a style="text-decoration: underline" id="githubLink" href="feedback.html">submit feedback</a> if you have any questions or concerns!</p>
         <br/>
         <p style="color: white; text-align: center">You're also encouraged to <a style="text-decoration: underline" id="githubLink" href="create-account.html">create an account</a> and join our <a style="text-decoration: underline" id="githubLink" href="sign-in.html">community</a> to enjoy personalized movie recommendations, create/share watch lists, and more. We look forward to having you on board!</p>
         <br/>
         <p style="color: white; text-align: center">If you are also interested in the website's creator and developer, feel free to visit my <a style="text-decoration: underline" id="githubLink" href="https://www.linkedin.com/in/hoangsonw/">LinkedIn profile</a>!
-
         <button onclick="window.location.href='analytics.html'" style="border: none; margin-top: 40px" class="app-btn">MovieVerse Analytics</button>
         <button onclick="window.location.href='terms-of-service.html'" style="border: none; margin-top: 40px" class="app-btn">Terms of Service</button>
         <button onclick="window.location.href='privacy-policy.html';" style="border: none; margin-top: 40px" class="app-btn">Privacy Policy</button>
         <button onclick="window.location.href='support.html'" style="border: none; margin-top: 40px" class="app-btn">Contact Support</button>
     </main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -381,7 +361,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -412,12 +391,10 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             <span>Trivia</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <script>
         window.addEventListener('load', function() {
             adjustAnchorHeights();
@@ -516,13 +493,11 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <footer>
         <a href="../../index.html" style="cursor: pointer; text-decoration: none">
             <p style="cursor: pointer; text-decoration: none">© 2024 The MovieVerse. All rights reserved. Special thanks for The Movie Database (TMDb).</p>
         </a>
     </footer>
-
     <script>
         document.getElementById('logo').addEventListener('click', function() {
             document.getElementById('subheading1').scrollIntoView({ behavior: 'smooth' });
@@ -983,11 +958,9 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             }
         });
     </script>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchBar = document.getElementById('search');
@@ -1016,7 +989,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             toggleVisibility();
         });
     </script>
-
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const searchInput = document.getElementById('search');
@@ -1049,7 +1021,6 @@ <h3 id="subheading4" style="cursor: pointer">Useful Links:</h3>
             searchInput.addEventListener('input', toggleButtons);
         });
     </script>
-
     <script>
         function showSpinner() {
             document.getElementById('myModal').classList.add('modal-visible');
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html
index e96b40fe..ad563777 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>Actor Details - The MovieVerse</title>
@@ -466,7 +465,7 @@ <h2 id="actor-name" class="actor-header"></h2>
         document.getElementById('actor-image').addEventListener('click', function() {
             const imageUrl = this.src.replace('w1280', 'original')
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html
index 17112431..9b02e879 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html
@@ -341,7 +341,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
     </nav>
     <div>
         <div class="chart-title" style="font-size: 28px; font-weight: bold">The MovieVerse Analytics</div>
-        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>150,000</strong> monthly active users!</p>
+        <p class="chart-description">Take a look at how our database has evolved over the years to serve more than <strong>450,000</strong> monthly active users!</p>
     </div>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chat.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chat.html
index 438da315..4054ba67 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chat.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chat.html
@@ -499,6 +499,7 @@ <h3>Recent & Suggested Chats</h3>
     </script>
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
+        <p style="color: white; margin-left: 10px">Loading chats...</p>
     </div>
     <footer id="footer">
         <p>© 2024 The MovieVerse. All rights reserved.</p>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html
index f0b6c77c..afb9de67 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html
@@ -479,7 +479,7 @@ <h2 id="company-name" class="company-header"></h2>
         document.getElementById('company-logo').addEventListener('click', function() {
             const imageUrl = this.src.replace('w500', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 10002; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; background-color: white">
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; background-color: white">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html
index 55acbdc4..14778aa6 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html
@@ -820,7 +820,7 @@ <h2 id="director-name" class="director-header"></h2>
     document.getElementById('director-image').addEventListener('click', function() {
         const imageUrl = this.src.replace('w1280', 'original');
         const modalHtml = `<div id="image-modal" style="z-index: 1000200000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;">
+                                <img src="${imageUrl}" style="max-width: 95%; max-height: 95%; border-radius: 10px;">
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
         document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
index bfc4fb00..c50bce4e 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
@@ -883,7 +883,7 @@ <h2 id="movie-rating" class="movie-rating"></h2>
         document.getElementById('movie-image').addEventListener('click', function() {
             let imageUrl = this.src.replace('w780', 'original');
             const modalHtml = `<div id="image-modal" style="z-index: 100020000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
-                                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px;" alt="Movie Image" />
+                                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px;" alt="Movie Image" />
                                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn" onclick="document.getElementById('image-modal').remove();">&times;</span>
                             </div>`;
             document.body.insertAdjacentHTML('beforeend', modalHtml);
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/notifications.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/notifications.html
index 5aeeaee8..e34b5aad 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/notifications.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/notifications.html
@@ -354,7 +354,7 @@ <h1 id="my-heading" style="margin-bottom: -24px" class="notranslate">
     </nav>
     <main>
         <section id="newFeatures">
-            <h2 style="cursor: pointer">New Features</h2>
+            <h2 style="cursor: pointer" id="newFeaturesHeader">New Features</h2>
             <p style="color: black">Explore the exciting new features we've recently launched to enhance your MovieVerse experience:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-search"></i> <strong>Enhanced Search Functionality:</strong> Dive deeper into our movie catalog with precise filters for genre, rating, and release year.</li>
@@ -370,7 +370,7 @@ <h2 style="cursor: pointer">New Features</h2>
             </p>
         </section>
         <section id="newReleases">
-            <h2 style="cursor: pointer">New Releases</h2>
+            <h2 id="newReleasesHeader" style="cursor: pointer">New Releases</h2>
             <h3>Since Your Last Visit</h3>
             <ul id="releasesSinceLastVisit"></ul>
             <h3 style="margin-top: 35px">Since the Beginning of This Month</h3>
@@ -385,7 +385,7 @@ <h3 style="margin-top: 35px">More Recommended Movies For You</h3>
             </p>
         </section>
         <section id="tipsTricks">
-            <h2 style="cursor: pointer">Tips & Tricks</h2>
+            <h2 style="cursor: pointer" id="tipsTricksHeader">Tips & Tricks</h2>
             <p style="color: black">Maximize your enjoyment of The MovieVerse with these handy tips:</p>
             <ul>
                 <li><i style="margin-right: 3px" class="fas fa-list-ul"></i> <strong>Creating Custom Watchlists:</strong> Curate your own personal movie collections and keep track of your must-watch films with ease.</li>
@@ -400,7 +400,7 @@ <h2 style="cursor: pointer">Tips & Tricks</h2>
             </p>
         </section>
         <section id="popularActors">
-            <h2 style="cursor: pointer">Popular Actors</h2>
+            <h2 style="cursor: pointer" id="popularActorsHeader">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">
@@ -408,7 +408,7 @@ <h2 style="cursor: pointer">Popular Actors</h2>
             </p>
         </section>
         <section id="popularDirectors">
-            <h2 style="cursor: pointer">Popular Directors</h2>
+            <h2 style="cursor: pointer" id="popularDirectorsHeader">Popular Directors</h2>
             <p style="color: black">Discover the visionaries behind the camera who are currently shaping the world of cinema!</p>
             <ul></ul>
             <p style="color: black; margin-top: 35px">
@@ -495,31 +495,31 @@ <h2 style="cursor: pointer">Popular Directors</h2>
             }
         });
 
-        document.getElementById('newFeatures').addEventListener('click', function(e) {
+        document.getElementById('newFeaturesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newFeatures').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('newReleases').addEventListener('click', function(e) {
+        document.getElementById('newReleasesHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('newReleases').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('tipsTricks').addEventListener('click', function(e) {
+        document.getElementById('tipsTricksHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('tipsTricks').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularActors').addEventListener('click', function(e) {
+        document.getElementById('popularActorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularActors').scrollIntoView({ behavior: 'smooth' });
         });
 
-        document.getElementById('popularDirectors').addEventListener('click', function(e) {
+        document.getElementById('popularDirectorsHeader').addEventListener('click', function(e) {
             e.preventDefault();
 
             document.getElementById('popularDirectors').scrollIntoView({ behavior: 'smooth' });
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/actor-details.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/actor-details.js
index 0035b2e1..f8b7b542 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/actor-details.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/actor-details.js
@@ -325,7 +325,7 @@ async function populateActorDetails(actor, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
@@ -808,4 +808,4 @@ function applyTextColor(color) {
         .forEach(element => {
             element.style.color = color;
         });
-}
\ No newline at end of file
+}
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chat.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chat.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chatbot.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chatbot.js
index 6c17c9b3..30ad3a1f 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chatbot.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/chatbot.js
@@ -268,63 +268,6 @@ 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
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -352,50 +295,6 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
@@ -419,41 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -468,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -552,68 +383,9 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    // if (lowerMessage.startsWith("do you know about ") ||
-    //     lowerMessage.startsWith("tell me about ") ||
-    //     lowerMessage.startsWith("what is ")) {
-    //     const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-    //     return await fetchMovieDetailsFromTMDB(movieName);
-    // }
-
-    // if (lowerMessage.startsWith("show me details about ") ||
-    //     lowerMessage.startsWith("i want to know more about ") ||
-    //     lowerMessage.startsWith("details about ") ||
-    //     lowerMessage.startsWith("search for ")) {
-    //     const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-    //     fetchAndRedirectToMovieDetails(movieName);
-    //     return `Searching for details about "${movieName}". Please wait...`;
-    // }
-
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
@@ -626,9 +398,6 @@ async function movieVerseResponse(message) {
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();
@@ -688,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/director-details.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/director-details.js
index 4f8daa13..ce289989 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/director-details.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/director-details.js
@@ -317,7 +317,7 @@ async function populateDirectorDetails(director, credits) {
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 10px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" alt="Media Image"/>
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js
index 5d9e8acf..1f3c85b8 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js
@@ -1427,7 +1427,7 @@ async function populateMovieDetails(movie, imdbRating, rtRating, metascore, awar
         const modalHtml = `
             <div id="image-modal" style="z-index: 100022222; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center;">
                 <button id="prevModalButton" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-left"></i></button>
-                <img src="${imageUrl}" style="max-width: 80%; max-height: 80%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
+                <img src="${imageUrl}" style="max-width: 80%; max-height: 95%; border-radius: 16px; cursor: default; transition: opacity 0.5s ease-in-out;" onclick="event.stopPropagation();" loading="lazy" alt="Movie Image">
                 <button id="nextModalButton" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: #7378c5; color: white; border-radius: 8px; height: 30px; width: 30px; border: none; cursor: pointer; z-index: 11;"><i class="fas fa-arrow-right"></i></button>
                 <span style="position: absolute; top: 10px; right: 25px; font-size: 40px; cursor: pointer" id="removeBtn">&times;</span>
             </div>
diff --git a/MovieVerse-Mobile/www/css/index.css b/MovieVerse-Mobile/www/css/index.css
deleted file mode 100644
index ecea7e8e..00000000
--- a/MovieVerse-Mobile/www/css/index.css
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-* {
-    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-}
-
-body {
-    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
-    background-color:#E4E4E4;
-    background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
-    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
-    font-size:12px;
-    height:100vh;
-    margin:0px;
-    padding:0px;
-    /* Padding to avoid the "unsafe" areas behind notches in the screen */
-    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
-    text-transform:uppercase;
-    width:100%;
-}
-
-/* Portrait layout (default) */
-.app {
-    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
-    position:absolute;             /* position in the center of the screen */
-    left:50%;
-    top:50%;
-    height:50px;                   /* text area height */
-    width:225px;                   /* text area width */
-    text-align:center;
-    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
-    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
-                                   /* offset horizontal: half of text area width */
-}
-
-/* Landscape layout (with min-width) */
-@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
-    .app {
-        background-position:left center;
-        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
-        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
-                                      /* offset horizontal: half of image width and text area width */
-    }
-}
-
-h1 {
-    font-size:24px;
-    font-weight:normal;
-    margin:0px;
-    overflow:visible;
-    padding:0px;
-    text-align:center;
-}
-
-.event {
-    border-radius:4px;
-    color:#FFFFFF;
-    font-size:12px;
-    margin:0px 30px;
-    padding:2px 0px;
-}
-
-.event.listening {
-    background-color:#333333;
-    display:block;
-}
-
-.event.received {
-    background-color:#4B946A;
-    display:none;
-}
-
-#deviceready.ready .event.listening { display: none; }
-#deviceready.ready .event.received { display: block; }
-
-@keyframes fade {
-    from { opacity: 1.0; }
-    50% { opacity: 0.4; }
-    to { opacity: 1.0; }
-}
-
-.blink {
-    animation:fade 3000ms infinite;
-    -webkit-animation:fade 3000ms infinite;
-}
-
-
-@media screen and (prefers-color-scheme: dark) {
-    body {
-        background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
-    }
-}
diff --git a/MovieVerse-Mobile/www/index.html b/MovieVerse-Mobile/www/index.html
index 89635dda..cb97d18f 100644
--- a/MovieVerse-Mobile/www/index.html
+++ b/MovieVerse-Mobile/www/index.html
@@ -1,10 +1,8 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
-
     <!-- Meta tags for SEO -->
     <meta name="description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -49,12 +47,10 @@
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" as="style">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" media="print" onload="this.media='all';">
     <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></noscript>
-
     <!-- Poppins Fonts -->
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-
     <!-- Schema.org markup for Rich Results -->
     <script type="application/ld+json">
         {
@@ -115,7 +111,6 @@
             "url": "https://movie-verse.com/MovieVerse-Frontend/html/inception.html"
         }
     </script>
-
     <style>
         @font-face {
             font-family: 'Poppins';
@@ -535,7 +530,6 @@
         }
     </style>
 </head>
-
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
 <script>
     window.dataLayer = window.dataLayer || [];
@@ -543,7 +537,6 @@
     gtag('js', new Date());
     gtag('config', 'G-CQKJ67FXZ4');
 </script>
-
 <body>
     <header id="homepage-header" style="margin-bottom: -10px">
         <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
@@ -588,7 +581,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <ul id="newReleasesList"></ul>
         </div>
     </header>
-
     <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;">
@@ -632,7 +624,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <li><a href="MovieVerse-Frontend/html/feedback.html">MovieVerse Feedback</a></li>
         </ul>
     </nav>
-
     <div class="mobile-sign-in-container">
         <button id="mobileGoogleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="mobileSignInOutText">Sign In</span>
@@ -644,17 +635,14 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <i class="fas fa-user" id="mobileProfileIcon"></i>
         </button>
     </div>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <div class="genres">
         <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2>
     </div>
     <div id="most-popular-pagination" class="pagination" style="text-align: center"></div>
     <main id="most-popular"></main>
-
     <div id="ad-container3" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -668,7 +656,6 @@ <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="recommendedDIV">
         <h2 id="other" style="cursor: pointer" title="Here are some personalized movie suggestions we've generated based on your preferences! Check them out, and let us know what you think!">
             Recommended For You: Personalized Movie Suggestions
@@ -676,7 +663,6 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     </div>
     <div id="recommended-pagination" class="pagination" style="text-align: center"></div>
     <main id="recommended"></main>
-
     <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -689,13 +675,11 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="award-winning-div">
         <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning Movies</h2>
     </div>
     <div id="award-winning-pagination" class="pagination" style="text-align: center"></div>
     <main id="award-winning"></main>
-
     <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -708,13 +692,11 @@ <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" style="display: flex; justify-content: space-between; align-items: center;">
         <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
         <button id="change-director-btn" onclick="changeDirector()" style="padding: 5px 10px; margin-right: 10px; margin-top: 25px; cursor: pointer;">Change Director</button>
     </div>
     <main id="director-spotlight"></main>
-
     <div id="ad-container5" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -727,13 +709,11 @@ <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="action-div">
         <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</h2>
     </div>
     <div id="action-pagination" class="pagination" style="text-align: center"></div>
     <main id="action"></main>
-
     <div id="ad-container6" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -746,13 +726,11 @@ <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="vietnamese-div">
         <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese Movies</h2>
     </div>
     <div id="vietnamese-pagination" class="pagination" style="text-align: center"></div>
     <main id="vietnamese"></main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -765,13 +743,11 @@ <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="indian-div">
         <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian Movies</h2>
     </div>
     <div id="indian-pagination" class="pagination" style="text-align: center"></div>
     <main id="indian"></main>
-
     <div id="ad-container4" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -784,13 +760,11 @@ <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="korean-div">
         <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies</h2>
     </div>
     <div id="korean-pagination" class="pagination" style="text-align: center"></div>
     <main id="korean"></main>
-
     <div id="ad-container7" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -803,115 +777,96 @@ <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies<
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="tv-series-div">
         <h2 id="other" style="cursor: pointer">Binge-Worthy Series: Trending TV Series</h2>
     </div>
     <div id="tv-series-pagination" class="pagination" style="text-align: center"></div>
     <main id="tv-series" ></main>
-
     <div class="genres" id="hidden-gems-div">
         <h2 id="other" style="cursor: pointer">Hidden Treasures: Discover Gems in Cinema</h2>
     </div>
     <div id="hidden-gems-pagination" class="pagination" style="text-align: center"></div>
     <main id="hidden-gems"></main>
-
     <div class="genres" id="horror-div">
         <h2 id="other" style="cursor: pointer">Scream Queens & Slashers: Trending Horror Movies</h2>
     </div>
     <div id="horror-pagination" class="pagination" style="text-align: center"></div>
     <main id="horror"></main>
-
     <div class="genres" id="documentary-div">
         <h2 id="other" style="cursor: pointer">Real Stories: Trending Documentary Movies</h2>
     </div>
     <div id="documentary-pagination" class="pagination" style="text-align: center"></div>
     <main id="documentary" ></main>
-
     <div class="genres" id="animation-div">
         <h2 id="other" style="cursor: pointer">Animated Adventures: Trending Animated Movies</h2>
     </div>
     <div id="animation-pagination" class="pagination" style="text-align: center"></div>
     <main id="animation"></main>
-
     <div class="genres" id="sci-fi-div">
         <h2 id="other" style="cursor: pointer">Future Visions: Trending Science Fiction Movies</h2>
     </div>
     <div id="sci-fi-pagination" class="pagination" style="text-align: center"></div>
     <main id="sci-fi"></main>
-
     <div class="genres" id="western-div">
         <h2 id="other" style="cursor: pointer">Wild West: Trending Western Movies</h2>
     </div>
     <div id="western-pagination" class="pagination" style="text-align: center"></div>
     <main id="western"></main>
-
     <div class="genres" id="romantic-div">
         <h2 id="other" style="cursor: pointer">Love Is in the Air: Trending Romantic Movies</h2>
     </div>
     <div id="romantic-pagination" class="pagination" style="text-align: center"></div>
     <main id="romantic"></main>
-
     <div class="genres" id="thriller-div">
         <h2 id="other" style="cursor: pointer">Edge of Your Seat: Trending Thriller Movies</h2>
     </div>
     <div id="thriller-pagination" class="pagination" style="text-align: center"></div>
     <main id="thriller"></main>
-
     <div class="genres" id="war-div">
         <h2 id="other" style="cursor: pointer">War Stories: Trending War Movies</h2>
     </div>
     <div id="war-pagination" class="pagination" style="text-align: center"></div>
     <main id="war"></main>
-
     <div class="genres" id="mystery-div">
         <h2 id="other" style="cursor: pointer">Whodunit? Mystery & Intrigue in Trending Mystery Movies</h2>
     </div>
     <div id="mystery-pagination" class="pagination" style="text-align: center"></div>
     <main id="mystery"></main>
-
     <div class="genres" id="crime-div">
         <h2 id="other" style="cursor: pointer">Underworld Tales: Trending Crime Movies</h2>
     </div>
     <div id="crime-pagination" class="pagination" style="text-align: center"></div>
     <main id="crime"></main>
-
     <div class="genres" id="comedy-div">
         <h2 id="other" style="cursor: pointer">Laughs Galore: Trending Comedy Movies</h2>
     </div>
     <div id="comedy-pagination" class="pagination" style="text-align: center"></div>
     <main id="comedy"></main>
-
     <div class="genres" id="fantasy-div">
         <h2 id="other" style="cursor: pointer">Other Worlds: Trending Fantasy Movies</h2>
     </div>
     <div id="fantasy-pagination" class="pagination" style="text-align: center"></div>
     <main id="fantasy"></main>
-
     <div class="genres" id="family-div">
         <h2 id="other" style="cursor: pointer">Family Fun Time: Trending Family Movies</h2>
     </div>
     <div id="family-pagination" class="pagination" style="text-align: center"></div>
     <main id="family"></main>
-
     <div class="genres" id="musical-div">
         <h2 id="other" style="cursor: pointer">Enchanting Melodies: Trending Musical Movies</h2>
     </div>
     <div id="musical-pagination" class="pagination" style="text-align: center"></div>
     <main id="musical"></main>
-
     <div class="genres" id="drama-div">
         <h2 id="other" style="cursor: pointer">Emotional Journeys: Trending Drama Movies</h2>
     </div>
     <div id="drama-pagination" class="pagination" style="text-align: center"></div>
     <main id="drama"></main>
-
     <div class="genres" id="classic-div">
         <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movies</h2>
     </div>
     <div id="classic-pagination" class="pagination" style="text-align: center"></div>
     <main id="classic"></main>
-
     <button id="chat-button" onclick="window.location.href='MovieVerse-Frontend/html/chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
     <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 1001">Settings</button>
     <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 255px; right: 10px; z-index: 1001" title="Get a recommended movie to watch for today!">Surprise Me!</button>
@@ -920,7 +875,6 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
     <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 150px; right: 10px; z-index: 1001" title="Want to know more about movies? Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
     <button id="trivia-btn" onclick="window.location.href='MovieVerse-Frontend/html/trivia.html'" style="bottom: 115px; right: 10px; z-index: 1001" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
     <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 1001">Back To Top</button>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="MovieVerse-Frontend/html/chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -955,23 +909,19 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
             <span>Top</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <footer style="margin-top: 40px">
         <p id="footer">© 2024 The MovieVerse. All rights reserved.</p>
         <p>Learn more <a href="MovieVerse-Frontend/html/about.html" id="githubLink10">about The MovieVerse</a> and <a href="MovieVerse-Frontend/html/notifications.html" id="githubLink8">what we offer.</a></p>
         <p style="font-size: 0.1px">View our demos at: <a href="MovieVerse-Frontend/html/inception.html" id="githubLink11">Inception</a>, <a href="MovieVerse-Frontend/html/christopher-nolan.html" id="githubLink16">Christopher Nolan</a>, <a href="MovieVerse-Frontend/html/leonardo-dicaprio.html" id="githubLink9">Leonardo DiCaprio</a>, use our <a href="MovieVerse-Frontend/html/chat.html" id="githubLink14">chat application</a>, or explore the <a href="MovieVerse-Frontend/html/user-profile.html" id="githubLink5">profile feature</a>!</p>
     </footer>
-
     <div id="google_translate_element"></div>
     <div id="translate_control">
         <div class="translate-trigger">Translate</div>
     </div>
-
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     <script>
         function googleTranslateElementInit() {
diff --git a/MovieVerse-Mobile/www/js/chat.js b/MovieVerse-Mobile/www/js/chat.js
index 35bf02de..7f598097 100644
--- a/MovieVerse-Mobile/www/js/chat.js
+++ b/MovieVerse-Mobile/www/js/chat.js
@@ -32,12 +32,21 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     else {
         mainElement.style.display = '';
+        loadUserList();
+        setupSearchListeners();
     }
-
-    loadUserList();
-    setupSearchListeners();
 });
 
+async function animateLoadingDots() {
+    const loadingTextElement = document.querySelector('#myModal p');
+    let dots = "";
+
+    while (document.getElementById('myModal').classList.contains('modal-visible')) {
+        loadingTextElement.textContent = `Loading chats${dots}`;
+        dots = (dots.length < 3) ? dots + "." : ".";
+        await new Promise(resolve => setTimeout(resolve, 500));
+    }
+}
 
 const firebaseConfig = {
     apiKey: atob("QUl6YVN5REw2a1FuU2ZVZDhVdDhIRnJwS3VpdnF6MXhkWG03aw=="),
@@ -273,6 +282,7 @@ async function performSearch(searchText, isNewSearch = false) {
 
     try {
         showSpinner();
+        animateLoadingDots();
 
         let userQuery = query(
             collection(db, 'MovieVerseUsers'),
@@ -360,6 +370,7 @@ let previouslySelectedUserElement = null;
 async function loadUserList() {
     try {
         showSpinner();
+        animateLoadingDots();
 
         const userLimit = 5;
         const messageLimit = 30;
diff --git a/MovieVerse-Mobile/www/js/chatbot.js b/MovieVerse-Mobile/www/js/chatbot.js
index 47871124..30ad3a1f 100644
--- a/MovieVerse-Mobile/www/js/chatbot.js
+++ b/MovieVerse-Mobile/www/js/chatbot.js
@@ -3,6 +3,7 @@ import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/ge
 const chatbotInput = document.getElementById("chatbotInput");
 const chatbotBody = document.getElementById("chatbotBody");
 const movieee = `https://${getMovieVerseData()}/3`;
+
 let initialMainContent;
 let conversationHistory = [];
 
@@ -177,6 +178,7 @@ function updateMovieVisitCount(movieId, movieTitle) {
     if (!movieVisits[movieId]) {
         movieVisits[movieId] = { count: 0, title: movieTitle };
     }
+
     movieVisits[movieId].count += 1;
 
     if (!uniqueMoviesViewed.includes(movieId)) {
@@ -219,6 +221,7 @@ function getMostVisitedMovie() {
 
 function getMostVisitedActor() {
     const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+
     let mostVisitedActor = '';
     let maxVisits = 0;
 
@@ -234,6 +237,7 @@ function getMostVisitedActor() {
 
 function getTriviaAccuracy() {
     let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+
     if (triviaStats.totalAttempted === 0) {
         return 'No trivia attempted';
     }
@@ -264,63 +268,6 @@ 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
-    if (screenWidth <= 1021.24) return 20; // 2 movies per row
-    if (screenWidth <= 1353.74) return 21; // 3 movies per row
-    if (screenWidth <= 1684.9) return 20; // 4 movies per row
-    if (screenWidth <= 2017.49) return 20; // 5 movies per row
-    if (screenWidth <= 2349.99) return 18; // 6 movies per row
-    if (screenWidth <= 2681.99) return 21; // 7 movies per row
-    if (screenWidth <= 3014.49) return 24; // 8 movies per row
-    if (screenWidth <= 3345.99) return 27; // 9 movies per row
-    if (screenWidth <= 3677.99) return 20; // 10 movies per row
-    if (screenWidth <= 4009.99) return 22; // 11 movies per row
-    if (screenWidth <= 4340.99) return 24; // 12 movies per row
-    if (screenWidth <= 4673.49) return 26; // 13 movies per row
-    if (screenWidth <= 5005.99) return 28; // 14 movies per row
-    if (screenWidth <= 5337.99) return 30; // 15 movies per row
-    if (screenWidth <= 5669.99) return 32; // 16 movies per row
-    if (screenWidth <= 6001.99) return 34; // 17 movies per row
-    if (screenWidth <= 6333.99) return 36; // 18 movies per row
-    if (screenWidth <= 6665.99) return 38; // 19 movies per row
-    if (screenWidth <= 6997.99) return 40; // 20 movies per row
-    if (screenWidth <= 7329.99) return 42; // 21 movies per row
-    if (screenWidth <= 7661.99) return 44; // 22 movies per row
-    if (screenWidth <= 7993.99) return 46; // 23 movies per row
-    if (screenWidth <= 8325.99) return 48; // 24 movies per row
-    return 20;
-}
-
 function initializeChatbot() {
     const chatbotInput = document.getElementById("chatbotInput");
     sendInitialInstructions();
@@ -348,66 +295,20 @@ async function sendMessage(message) {
     scrollToBottom();
 }
 
-function showMovies(movies, mainElement) {
-    mainElement.innerHTML = '';
-    movies.forEach(movie => {
-        const { id, poster_path, title, vote_average, overview } = movie;
-        const movieEl = document.createElement('div');
-        movieEl.classList.add('movie');
-        const movieImage = poster_path
-            ? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
-            : `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;
-
-        const voteAvg = vote_average.toFixed(1);
-        movieEl.innerHTML = `
-            ${movieImage}
-            <div class="movie-info" style="cursor: pointer;">
-                <h3>${title}</h3>
-                <span class="${getClassByRate(vote_average)}">${voteAvg}</span>
-            </div>
-            <div class="overview" style="cursor: pointer;">
-                <h4>Movie Intro: </h4>
-                ${overview}
-            </div>`;
-
-        movieEl.addEventListener('click', () => {
-            localStorage.setItem('selectedMovieId', id);
-            window.location.href = 'movie-details.html';
-            updateMovieVisitCount(id, title);
-        });
-
-        mainElement.appendChild(movieEl);
-    });
-}
-
-function getClassByRate(vote){
-    if (vote >= 8) {
-        return 'green';
-    }
-    else if (vote >= 5) {
-        return 'orange';
-    }
-    else {
-        return 'red';
-    }
-}
-
 function sendInitialInstructions() {
     const initialMessage = `
         <div style="text-align: left">
             <span style="color: #ff8623;">MovieVerse Assistant:</span>
             <span style="display: inline-block; text-align: left; color: #fff;">
-                Welcome to MovieVerse Assistant! Here's how to get started:
+                Welcome to MovieVerse Assistant 🍿! Here's how to get started:
             </span>
         </div>
         <ul style="text-align: left; margin-bottom: 10px; color: #fff;">
             <li>To find details about a movie, type "Show me details about [movie name]".</li>
-            <li>To watch a movie trailer, type "Show trailer for [movie name]".</li>
-            <li>Or, if you just want quick information about a movie, type "Tell me about [movie name]" or "Do you know about [movie name]".</li>
             <li>You can also ask about genres, top-rated movies, latest movies, get a recommended movie, and any general questions!</li>
-            <li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like the first three pre-defined functionalities above, as they might trigger those specific functions instead of a broader search.</li> 
+            <li>💡<b>Tip:</b> To get the best results, try to avoid phrasing requests like "Show me details about ...", as they might trigger specific functions instead of a broader search.</li> 
         </ul>
-        <div style="text-align: left; color: #fff;">How may I assist you today?</div>
+        <div style="text-align: left; color: #fff;">How may I assist you today? 🎬🍿</div>
     `;
     chatbotBody.innerHTML += `<div>${initialMessage}</div>`;
     scrollToBottom();
@@ -417,40 +318,6 @@ function scrollToBottom() {
     chatbotBody.scrollTop = chatbotBody.scrollHeight;
 }
 
-async function getMovies(url, mainElement) {
-    clearMovieDetails();
-    const numberOfMovies = calculateMoviesToDisplay();
-    const pagesToFetch = numberOfMovies <= 20 ? 1 : 2;
-    let allMovies = [];
-
-    for (let page = 1; page <= pagesToFetch; page++) {
-        const response = await fetch(`${url}&page=${page}`);
-        const data = await response.json();
-        allMovies = allMovies.concat(data.results);
-    }
-
-    const popularityThreshold = 0.5;
-
-    allMovies.sort((a, b) => {
-        const popularityDifference = Math.abs(a.popularity - b.popularity);
-        if (popularityDifference < popularityThreshold) {
-            return b.vote_average - a.vote_average;
-        }
-        return b.popularity - a.popularity;
-    });
-
-    if (allMovies.length > 0) {
-        showMovies(allMovies.slice(0, numberOfMovies), mainElement);
-        document.getElementById('clear-search-btn').style.display = 'inline-block';
-    }
-    else {
-        mainElement.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
-        document.getElementById('clear-search-btn').style.display = 'none';
-    }
-
-    document.getElementById('alt-title').innerHTML = '';
-}
-
 document.getElementById('clear-search-btn').addEventListener('click', function() {
     document.getElementById('main').innerHTML = initialMainContent;
     initializeChatbot();
@@ -465,39 +332,6 @@ form.addEventListener('submit', (e) => {
     window.location.href = 'search.html';
 });
 
-function handleSearch() {
-    const searchQuery = document.getElementById('search').value;
-    localStorage.setItem('searchQuery', searchQuery);
-    window.location.href = 'search.html';
-}
-
-function clearMovieDetails() {
-    const movieDetailsContainer = document.getElementById('main');
-    if (movieDetailsContainer) {
-        movieDetailsContainer.innerHTML = '';
-    }
-}
-
-async function fetchAndRedirectToMovieDetails(movieName) {
-    const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const movie = data.results[0];
-        if (movie) {
-            localStorage.setItem('selectedMovieId', movie.id);
-            window.location.href = 'movie-details.html';
-        }
-        else {
-            alert('Movie not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching movie details:', error);
-        alert('Failed to fetch movie details. Please try again later.');
-    }
-}
-
 async function fetchMovieTrailer(movieName) {
     const searchUrl = SEARCHPATH + encodeURIComponent(movieName);
     try {
@@ -549,79 +383,21 @@ function createTrailerButton(trailerUrl, movieTitle) {
     });
 }
 
-async function fetchPersonDetails(name, type) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/person?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(name)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const person = data.results[0];
-
-        if (person) {
-            localStorage.setItem(type === 'director' ? 'selectedDirectorId' : 'selectedActorId', person.id);
-            window.location.href = type === 'director' ? 'director-details.html' : 'actor-details.html';
-        }
-        else {
-            alert(`${type.charAt(0).toUpperCase() + type.slice(1)} not found. Please try another search.`);
-        }
-    }
-    catch (error) {
-        console.log(`Error fetching ${type} details:`, error);
-        alert(`Failed to fetch ${type} details. Please try again later.`);
-    }
-}
-
-async function fetchCompanyDetails(companyName) {
-    const searchUrl = `https://${getMovieVerseData()}/3/search/company?${generateMovieNames()}${getMovieCode()}&query=${encodeURIComponent(companyName)}`;
-    try {
-        const response = await fetch(searchUrl);
-        const data = await response.json();
-        const company = data.results[0];
-
-        if (company) {
-            localStorage.setItem('selectedCompanyId', company.id);
-            window.location.href = 'company-details.html';
-        }
-        else {
-            alert('Company not found. Please try another search.');
-        }
-    }
-    catch (error) {
-        console.log('Error fetching company details:', error);
-        alert('Failed to fetch company details. Please try again later.');
-    }
-}
-
 async function movieVerseResponse(message) {
     const lowerMessage = message.toLowerCase();
 
-    if (lowerMessage.startsWith("do you know about ") ||
-        lowerMessage.startsWith("tell me about ") ||
-        lowerMessage.startsWith("what is ")) {
-        const movieName = lowerMessage.replace(/^(do you know about|show me|tell me about|what is) /, '');
-        return await fetchMovieDetailsFromTMDB(movieName);
-    }
-    if (lowerMessage.startsWith("show me details about ") ||
-        lowerMessage.startsWith("i want to know more about ") ||
-        lowerMessage.startsWith("details about ") ||
-        lowerMessage.startsWith("search for ")) {
-        const movieName = lowerMessage.replace("show me details about ", "").replace("i want to know more about ", "");
-        fetchAndRedirectToMovieDetails(movieName);
-        return `Searching for details about "${movieName}". Please wait...`;
-    }
     if (lowerMessage.startsWith("show trailer for ")) {
         const movieName = lowerMessage.replace("show trailer for ", "");
         fetchMovieTrailer(movieName);
         return `Searching for the trailer of "${movieName}". Please wait...`;
     }
+
     if (lowerMessage.startsWith("hello") || lowerMessage.startsWith("hi") || lowerMessage.startsWith("hey")) {
         return "Hello! How can I assist you with MovieVerse today?";
     }
     else if (lowerMessage.startsWith("bye") || lowerMessage.startsWith("goodbye")) {
         return "Goodbye! Thank you for using MovieVerse Assistant and have a nice day!";
     }
-    else if (lowerMessage.startsWith("who r u") || lowerMessage.startsWith("who are you") || lowerMessage.startsWith("what is your name") || lowerMessage.startsWith("what's your name") || lowerMessage.startsWith("what are you") || lowerMessage.startsWith("what r u") || lowerMessage.startsWith("what can u do") || lowerMessage.startsWith("what can you do") || lowerMessage.startsWith("introduce yourself")) {
-        return "I am MovieVerse Assistant, here to help you with all your movie-related or any other general queries. I am trained and powered by MovieVerse AI and Google to provide you with the best assistance!";
-    }
     else {
         showSpinner();
         animateLoadingDots();
@@ -629,7 +405,10 @@ async function movieVerseResponse(message) {
         let fullResponse = '';
         try {
             const genAI = new GoogleGenerativeAI(getAIResponse());
-            const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+            const model = genAI.getGenerativeModel({
+                model: "gemini-1.5-flash",
+                systemInstruction: "You are MovieVerse Assistant - an AI Chatbot of the MovieVerse App. You are here to help users with movie-related or any other general queries. You are trained and powered by MovieVerse AI and Google to provide the best assistance. You can also provide information about movies, actors, directors, genres, and companies, or recommend movies to users.",
+            });
 
             conversationHistory.push({ role: "user", parts: [{ text: message }] });
 
@@ -678,6 +457,7 @@ async function animateLoadingDots() {
 function removeMarkdown(text) {
     const converter = new showdown.Converter();
     const html = converter.makeHtml(text);
+
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     return tempDiv.textContent || tempDiv.innerText || '';
@@ -764,6 +544,7 @@ async function showMovieOfTheDay() {
 function fallbackMovieSelection() {
     const fallbackMovies = [432413, 299534, 1726, 562, 118340, 455207, 493922, 447332, 22970, 530385, 27205, 264660, 120467, 603, 577922, 76341, 539, 419704, 515001, 118340, 424, 98];
     const randomFallbackMovie = fallbackMovies[Math.floor(Math.random() * fallbackMovies.length)];
+
     localStorage.setItem('selectedMovieId', randomFallbackMovie);
     window.location.href = 'movie-details.html';
 }
diff --git a/MovieVerse-Mobile/www/js/movie-details.js b/MovieVerse-Mobile/www/js/movie-details.js
index 957fda89..5d9e8acf 100644
--- a/MovieVerse-Mobile/www/js/movie-details.js
+++ b/MovieVerse-Mobile/www/js/movie-details.js
@@ -1639,8 +1639,15 @@ function createImdbRatingCircle(imdbRating, imdbId) {
     if (imdbRating === 'N/A' || imdbRating === null || imdbRating === undefined) {
         imdbRating = 'N/A';
     }
-
-    imdbRating = imdbRating.toFixed(1);
+    else {
+        imdbRating = parseFloat(imdbRating);
+        if (!isNaN(imdbRating)) {
+            imdbRating = imdbRating.toFixed(1);
+        }
+        else {
+            imdbRating = 'N/A';
+        }
+    }
 
     let circleContainer = document.getElementById('imdbRatingCircleContainer');
     if (!circleContainer) {
diff --git a/MovieVerse-Mobile/www/js/sign-in.js b/MovieVerse-Mobile/www/js/sign-in.js
index ca744c7d..dbb35fc4 100644
--- a/MovieVerse-Mobile/www/js/sign-in.js
+++ b/MovieVerse-Mobile/www/js/sign-in.js
@@ -58,7 +58,7 @@ document.getElementById('signInForm').addEventListener('submit', async function(
             alert('Successfully signed in!');
             localStorage.setItem('isSignedIn', JSON.stringify(true));
             localStorage.setItem('currentlySignedInMovieVerseUser', email);
-            window.location.href = '../../../../Downloads/The-MovieVerse-Database-ee3ec4ea5610d37178bc008fd505fd99c5f83070/index.html';
+            window.location.href = '../../index.html';
         } else {
             alert('Invalid email or password. Ensure that you have entered a correct combination of email and password - one that we have on file.');
         }
diff --git a/index.html b/index.html
index f0028e16..7c717780 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,11 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
 <head>
     <meta charset="UTF-8">
     <title>The MovieVerse - Explore Movies, TV Series, and More</title>
-
     <!-- Meta tags for SEO -->
     <meta name="description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta property="fb:app_id" content="753617793197513" />
     <meta property="og:title" content="The MovieVerse - Your Ultimate Movie Guide" />
     <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
@@ -19,9 +16,7 @@
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:image:alt" content="Movie reel and popcorn, symbolizing The MovieVerse as a guide to the cinema world" />
     <meta property="og:favicon" content="https://movie-verse.com/images/favicon.ico" />
-    <meta name="naver-site-verification" content="2b6efdfb68cee6ad6fa4227d38a19b414e819bb7" />
-    <meta name="facebook-domain-verification" content="uogl1tjp9660kf4kq988ayjhslpxn1" />
-    <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews, tv shows, movie verse, movieverse, film" />
+    <meta name="keywords" content="movies, movies verse, film guide, directors, actors, movie genres, cinema, film reviews, tv shows, movie verse, moviesverse, movieverse, moviesvers, film, movie" />
     <meta name="author" content="Son Nguyen Hoang">
     <link rel="canonical" href="https://movie-verse.com/"/>
     <meta name="robots" content="index, follow">
@@ -37,8 +32,8 @@
     <meta name="twitter:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more.">
     <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
     <meta name="yandex-verification" content="82af90b194a42a28" />
+    <meta property="fb:app_id" content="753617793197513" />
     <meta name="referrer" content="no-referrer-when-downgrade">
-
     <!-- JS and CSS files -->
     <script src="index.js" defer></script>
     <script src="/MovieVerse-Frontend/js/settings.js" defer></script>
@@ -49,12 +44,10 @@
     <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" as="style">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" media="print" onload="this.media='all';">
     <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></noscript>
-
     <!-- Poppins Fonts -->
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
     <link rel="preload" href="https://movie-verse.com/fonts/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-
     <!-- Schema.org markup for Rich Results -->
     <script type="application/ld+json">
         {
@@ -115,7 +108,6 @@
             "url": "https://movie-verse.com/MovieVerse-Frontend/html/inception.html"
         }
     </script>
-
     <style>
         @font-face {
             font-family: 'Poppins';
@@ -535,7 +527,6 @@
         }
     </style>
 </head>
-
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
 <script>
     window.dataLayer = window.dataLayer || [];
@@ -543,7 +534,6 @@
     gtag('js', new Date());
     gtag('config', 'G-CQKJ67FXZ4');
 </script>
-
 <body>
     <header id="homepage-header" style="margin-bottom: -10px">
         <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
@@ -588,7 +578,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <ul id="newReleasesList"></ul>
         </div>
     </header>
-
     <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;">
@@ -632,7 +621,6 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <li><a href="MovieVerse-Frontend/html/feedback.html">MovieVerse Feedback</a></li>
         </ul>
     </nav>
-
     <div class="mobile-sign-in-container">
         <button id="mobileGoogleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="mobileSignInOutText">Sign In</span>
@@ -644,17 +632,14 @@ <h1 id="my-heading" style="margin-bottom: -25px" class="notranslate">
             <i class="fas fa-user" id="mobileProfileIcon"></i>
         </button>
     </div>
-
     <div id="myModal" class="modal-overlay">
         <div class="spinner"></div>
     </div>
-
     <div class="genres">
         <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2>
     </div>
     <div id="most-popular-pagination" class="pagination" style="text-align: center"></div>
     <main id="most-popular"></main>
-
     <div id="ad-container3" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -668,7 +653,6 @@ <h2 id="other" style="cursor: pointer">Global Hits: Popular Movies Worldwide</h2
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="recommendedDIV">
         <h2 id="other" style="cursor: pointer" title="Here are some personalized movie suggestions we've generated based on your preferences! Check them out, and let us know what you think!">
             Recommended For You: Personalized Movie Suggestions
@@ -676,7 +660,6 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     </div>
     <div id="recommended-pagination" class="pagination" style="text-align: center"></div>
     <main id="recommended"></main>
-
     <div id="ad-container" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -689,13 +672,11 @@ <h2 id="other" style="cursor: pointer" title="Here are some personalized movie s
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="award-winning-div">
         <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning Movies</h2>
     </div>
     <div id="award-winning-pagination" class="pagination" style="text-align: center"></div>
     <main id="award-winning"></main>
-
     <div id="ad-container1" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px);" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -708,13 +689,11 @@ <h2 id="other" style="cursor: pointer">Critics' Choice: Trending Award-Winning M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" style="display: flex; justify-content: space-between; align-items: center;">
         <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
         <button id="change-director-btn" onclick="changeDirector()" style="padding: 5px 10px; margin-right: 10px; margin-top: 25px; cursor: pointer;">Change Director</button>
     </div>
     <main id="director-spotlight"></main>
-
     <div id="ad-container5" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -727,13 +706,11 @@ <h2 id="director-spotlight-title" style="cursor: pointer; ">Director's Spotlight
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="action-div">
         <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</h2>
     </div>
     <div id="action-pagination" class="pagination" style="text-align: center"></div>
     <main id="action"></main>
-
     <div id="ad-container6" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -746,13 +723,11 @@ <h2 id="other" style="cursor: pointer">Adrenaline Rush: Trending Action Movies</
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="vietnamese-div">
         <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese Movies</h2>
     </div>
     <div id="vietnamese-pagination" class="pagination" style="text-align: center"></div>
     <main id="vietnamese"></main>
-
     <div id="ad-container2" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -765,13 +740,11 @@ <h2 id="other" style="cursor: pointer">Cinematic Excellence: Trending Vietnamese
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="indian-div">
         <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian Movies</h2>
     </div>
     <div id="indian-pagination" class="pagination" style="text-align: center"></div>
     <main id="indian"></main>
-
     <div id="ad-container4" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -784,13 +757,11 @@ <h2 id="other" style="cursor: pointer">Bollywood Blockbusters: Trending Indian M
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="korean-div">
         <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies</h2>
     </div>
     <div id="korean-pagination" class="pagination" style="text-align: center"></div>
     <main id="korean"></main>
-
     <div id="ad-container7" style="text-align: center; cursor: pointer; background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin: 20px auto; padding: 10px; border-radius: 8px; width: auto; max-width: calc(100% - 40px)" title="Displaying ads helps us maintain our websites, servers, and databases to provide you with free services. Thank you for your support!">
         <p style="margin: 0;">Advertisement</p>
         <ins class="adsbygoogle"
@@ -803,115 +774,96 @@ <h2 id="other" style="cursor: pointer">K-Drama & Beyond: Trending Korean Movies<
     <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
-
     <div class="genres" id="tv-series-div">
         <h2 id="other" style="cursor: pointer">Binge-Worthy Series: Trending TV Series</h2>
     </div>
     <div id="tv-series-pagination" class="pagination" style="text-align: center"></div>
     <main id="tv-series" ></main>
-
     <div class="genres" id="hidden-gems-div">
         <h2 id="other" style="cursor: pointer">Hidden Treasures: Discover Gems in Cinema</h2>
     </div>
     <div id="hidden-gems-pagination" class="pagination" style="text-align: center"></div>
     <main id="hidden-gems"></main>
-
     <div class="genres" id="horror-div">
         <h2 id="other" style="cursor: pointer">Scream Queens & Slashers: Trending Horror Movies</h2>
     </div>
     <div id="horror-pagination" class="pagination" style="text-align: center"></div>
     <main id="horror"></main>
-
     <div class="genres" id="documentary-div">
         <h2 id="other" style="cursor: pointer">Real Stories: Trending Documentary Movies</h2>
     </div>
     <div id="documentary-pagination" class="pagination" style="text-align: center"></div>
     <main id="documentary" ></main>
-
     <div class="genres" id="animation-div">
         <h2 id="other" style="cursor: pointer">Animated Adventures: Trending Animated Movies</h2>
     </div>
     <div id="animation-pagination" class="pagination" style="text-align: center"></div>
     <main id="animation"></main>
-
     <div class="genres" id="sci-fi-div">
         <h2 id="other" style="cursor: pointer">Future Visions: Trending Science Fiction Movies</h2>
     </div>
     <div id="sci-fi-pagination" class="pagination" style="text-align: center"></div>
     <main id="sci-fi"></main>
-
     <div class="genres" id="western-div">
         <h2 id="other" style="cursor: pointer">Wild West: Trending Western Movies</h2>
     </div>
     <div id="western-pagination" class="pagination" style="text-align: center"></div>
     <main id="western"></main>
-
     <div class="genres" id="romantic-div">
         <h2 id="other" style="cursor: pointer">Love Is in the Air: Trending Romantic Movies</h2>
     </div>
     <div id="romantic-pagination" class="pagination" style="text-align: center"></div>
     <main id="romantic"></main>
-
     <div class="genres" id="thriller-div">
         <h2 id="other" style="cursor: pointer">Edge of Your Seat: Trending Thriller Movies</h2>
     </div>
     <div id="thriller-pagination" class="pagination" style="text-align: center"></div>
     <main id="thriller"></main>
-
     <div class="genres" id="war-div">
         <h2 id="other" style="cursor: pointer">War Stories: Trending War Movies</h2>
     </div>
     <div id="war-pagination" class="pagination" style="text-align: center"></div>
     <main id="war"></main>
-
     <div class="genres" id="mystery-div">
         <h2 id="other" style="cursor: pointer">Whodunit? Mystery & Intrigue in Trending Mystery Movies</h2>
     </div>
     <div id="mystery-pagination" class="pagination" style="text-align: center"></div>
     <main id="mystery"></main>
-
     <div class="genres" id="crime-div">
         <h2 id="other" style="cursor: pointer">Underworld Tales: Trending Crime Movies</h2>
     </div>
     <div id="crime-pagination" class="pagination" style="text-align: center"></div>
     <main id="crime"></main>
-
     <div class="genres" id="comedy-div">
         <h2 id="other" style="cursor: pointer">Laughs Galore: Trending Comedy Movies</h2>
     </div>
     <div id="comedy-pagination" class="pagination" style="text-align: center"></div>
     <main id="comedy"></main>
-
     <div class="genres" id="fantasy-div">
         <h2 id="other" style="cursor: pointer">Other Worlds: Trending Fantasy Movies</h2>
     </div>
     <div id="fantasy-pagination" class="pagination" style="text-align: center"></div>
     <main id="fantasy"></main>
-
     <div class="genres" id="family-div">
         <h2 id="other" style="cursor: pointer">Family Fun Time: Trending Family Movies</h2>
     </div>
     <div id="family-pagination" class="pagination" style="text-align: center"></div>
     <main id="family"></main>
-
     <div class="genres" id="musical-div">
         <h2 id="other" style="cursor: pointer">Enchanting Melodies: Trending Musical Movies</h2>
     </div>
     <div id="musical-pagination" class="pagination" style="text-align: center"></div>
     <main id="musical"></main>
-
     <div class="genres" id="drama-div">
         <h2 id="other" style="cursor: pointer">Emotional Journeys: Trending Drama Movies</h2>
     </div>
     <div id="drama-pagination" class="pagination" style="text-align: center"></div>
     <main id="drama"></main>
-
     <div class="genres" id="classic-div">
         <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movies</h2>
     </div>
     <div id="classic-pagination" class="pagination" style="text-align: center"></div>
     <main id="classic"></main>
-
     <button id="chat-button" onclick="window.location.href='MovieVerse-Frontend/html/chat.html'" style="bottom: 325px; right: 10px; z-index: 1001" title="Chat with fellow MovieVerse users!">Chat</button>
     <button id="settings-btn" style="position: fixed; bottom: 290px; right: 10px; z-index: 1001">Settings</button>
     <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 255px; right: 10px; z-index: 1001" title="Get a recommended movie to watch for today!">Surprise Me!</button>
@@ -920,7 +872,6 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
     <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 150px; right: 10px; z-index: 1001" title="Want to know more about movies? Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
     <button id="trivia-btn" onclick="window.location.href='MovieVerse-Frontend/html/trivia.html'" style="bottom: 115px; right: 10px; z-index: 1001" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
     <button id="back-to-top-btn" style="bottom: 80px; right: 10px; z-index: 1001">Back To Top</button>
-
     <div id="mobile-bottom-bar" class="mobile-bottom-bar">
         <a href="MovieVerse-Frontend/html/chat.html" class="bottom-bar-item">
             <i class="fas fa-comments"></i>
@@ -955,23 +906,19 @@ <h2 id="other" style="cursor: pointer">Timeless Classics: Trending Classic Movie
             <span>Top</span>
         </a>
     </div>
-
     <button id="menu-btn" style="position: fixed; bottom: 10px; right: 10px; z-index: 1001" title="Toggle Menu Buttons">
         <i class="fas fa-ellipsis-h"></i><br>
         <span>Menu</span>
     </button>
-
     <footer style="margin-top: 40px">
         <p id="footer">© 2024 The MovieVerse. All rights reserved.</p>
         <p>Learn more <a href="MovieVerse-Frontend/html/about.html" id="githubLink10">about The MovieVerse</a> and <a href="MovieVerse-Frontend/html/notifications.html" id="githubLink8">what we offer.</a></p>
         <p style="font-size: 0.1px">View our demos at: <a href="MovieVerse-Frontend/html/inception.html" id="githubLink11">Inception</a>, <a href="MovieVerse-Frontend/html/christopher-nolan.html" id="githubLink16">Christopher Nolan</a>, <a href="MovieVerse-Frontend/html/leonardo-dicaprio.html" id="githubLink9">Leonardo DiCaprio</a>, use our <a href="MovieVerse-Frontend/html/chat.html" id="githubLink14">chat application</a>, or explore the <a href="MovieVerse-Frontend/html/user-profile.html" id="githubLink5">profile feature</a>!</p>
     </footer>
-
     <div id="google_translate_element"></div>
     <div id="translate_control">
         <div class="translate-trigger">Translate</div>
     </div>
-
     <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     <script>
         function googleTranslateElementInit() {
diff --git a/package.json b/package.json
index e0dd1a5a..70c52930 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "build": "npm run start",
     "test": "http-server -o",
     "serve": "http-server -o",
-    "docker": "docker-compose up",
+    "docker": "docker compose up",
     "dev:android": "cd MovieVerse-Mobile && cordova run android",
     "dev:ios": "cd MovieVerse-Mobile && cordova run ios",
     "build:android": "cd MovieVerse-Mobile && cordova build android",