diff --git a/.github/README.md b/.github/README.md
index c9849666..0257fac0 100644
--- a/.github/README.md
+++ b/.github/README.md
@@ -64,27 +64,24 @@ There is also a mobile version of The MovieVerse, which is developed using Apach
 
 ## Project Structure
 
-The MovieVerse is a full-stack application with a robust backend and a user-friendly frontend. The project is divided into the following **3 primary** directories:
+The MovieVerse is a full-stack application with a robust backend and a user-friendly frontend. The project is divided into the following **3 main** directories:
 1. `MovieVerse-Backend`: The backend directory contains the server-side code, including the API, database, and server configuration.
 2. `MovieVerse-Frontend`: The frontend directory contains the client-side code, including the user interface, user experience, and client configuration.
 3. `MovieVerse-Mobile`: The mobile app directory contains the mobile application code, including the mobile user interface, user experience, and mobile client configuration.
 
 ## Technology Stack
 
-| Frontend Technologies                                     | Backend Technologies                                             | Database Technologies                           | Mobile App Development                                            | Additional Technologies                                         |
-|-----------------------------------------------------------|------------------------------------------------------------------|-------------------------------------------------|-------------------------------------------------------------------|-----------------------------------------------------------------|
-| [React](https://reactjs.org/)                             | [Node.js](https://nodejs.org/en/)                                | [MongoDB](https://www.mongodb.com/)             | [Apache Cordova](https://cordova.apache.org/)                     | [Webpack](https://webpack.js.org/)                              |
-| [Vue](https://vuejs.org/)                                 | [Express](https://expressjs.com/)                                | [MySQL](https://www.mysql.com/)                 | [React Native](https://reactnative.dev/)                          | [Babel](https://babeljs.io/)                                    |
-| [HTML5](https://html.com/)                                | [Django](https://www.djangoproject.com/)                         | [Google Firebase](https://firebase.google.com/) | [Swift (for iOS development)](https://developer.apple.com/swift/) | [Docker](https://www.docker.com/)                               |
-| [CSS3](https://www.w3.org/Style/CSS/Overview.en.html)     | [Django REST Framework](https://www.django-rest-framework.org/)  |                                                 |                                                                   | [Emscripten](https://emscripten.org/)                           |
-| [JavaScript (Vanilla JS)](http://vanilla-js.com/)         | [Flask](https://flask.palletsprojects.com/en/1.1.x/)             |                                                 |                                                                   | [WebAssembly](https://webassembly.org/)                         |
-| [TypeScript](https://www.typescriptlang.org/)             | [Flask RESTful](https://flask-restful.readthedocs.io/en/latest/) |                                                 |                                                                   | [C](https://en.wikipedia.org/wiki/C_(programming_language))     |
-| [Bootstrap](https://getbootstrap.com/)                    | [Python](https://www.python.org/)                                |                                                 |                                                                   | [Google Analytics](https://analytics.google.com/analytics/web/) |
-| [React Bootstrap](https://react-bootstrap.github.io/)     | [Java](https://www.java.com/en/)                                 |                                                 |                                                                   | [ESLint](https://eslint.org/)                                   |
-| [React Icons](https://react-icons.github.io/react-icons/) | [GraphQL](https://graphql.org/)                                  |                                                 |                                                                   |                                                                 |
-| [SASS](https://sass-lang.com/)                            | [Ruby on Rails](https://rubyonrails.org/)                        |                                                 |                                                                   |                                                                 |
-| [Single Spa](https://single-spa.js.org/)                  | [C (Emscripten, WebAssembly)](https://emscripten.org/)           |                                                 |                                                                   |                                                                 |
-| [Redux](https://redux.js.org/)                            | [JavaScript](https://www.javascript.com/)                        |                                                 |                                                                   |                                                                 |
+| Frontend Technologies                                           | Backend Technologies                                            | Database Technologies                           | Mobile App Development                                            | Additional Technologies                                         |
+|-----------------------------------------------------------------|-----------------------------------------------------------------|-------------------------------------------------|-------------------------------------------------------------------|-----------------------------------------------------------------|
+| [React](https://reactjs.org/)                                   | [Node.js](https://nodejs.org/en/)                               | [MongoDB](https://www.mongodb.com/)             | [Apache Cordova](https://cordova.apache.org/)                     | [Webpack](https://webpack.js.org/)                              |
+| [Vue](https://vuejs.org/)                                       | [Express](https://expressjs.com/)                               | [MySQL](https://www.mysql.com/)                 | [React Native](https://reactnative.dev/)                          | [Babel](https://babeljs.io/)                                    |
+| [HTML5](https://html.com/)                                      | [Django](https://www.djangoproject.com/)                        | [Google Firebase](https://firebase.google.com/) | [Swift (for iOS development)](https://developer.apple.com/swift/) | [Docker](https://www.docker.com/)                               |
+| [CSS3](https://www.w3.org/Style/CSS/Overview.en.html)           | [Django REST Framework](https://www.django-rest-framework.org/) |                                                 | [Kotlin (for Android)](https://kotlinlang.org/)                   | [Emscripten](https://emscripten.org/)                           |
+| [JavaScript (Vanilla JS)](http://vanilla-js.com/)               | [Flask](https://flask.palletsprojects.com/en/1.1.x/)            |                                                 | [Java (for Android)](https://www.java.com/en/)                    | [WebAssembly](https://webassembly.org/)                         |
+| [TypeScript](https://www.typescriptlang.org/)                   | [Python](https://www.python.org/)                               |                                                 |                                                                   | [Google Analytics](https://analytics.google.com/analytics/web/) |
+| [FontAwesome Icons](https://react-icons.github.io/react-icons/) | [Ruby on Rails](https://rubyonrails.org/)                       |                                                 |                                                                   | [ESLint](https://eslint.org/)                                   |
+| [SASS](https://sass-lang.com/)                                  | [C (Emscripten, WebAssembly)](https://emscripten.org/)          |                                                 |                                                                   | [Git](https://git-scm.com/)                                     |
+| [Single Spa](https://single-spa.js.org/)                        | [JavaScript](https://www.javascript.com/)                       |                                                 |                                                                   |                                                                 |
 
 
 ## Contributing
diff --git a/404.html b/404.html
index 13e4e2b4..12af9726 100644
--- a/404.html
+++ b/404.html
@@ -213,7 +213,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='index.html'" title="Go back to homepage">Home</button>
         <button class="about" onclick="window.location.href='MovieVerse-Frontend/html/about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Backend/backend_django/__pycache__/__init__.cpython-311.pyc b/MovieVerse-Backend/backend_django/__pycache__/__init__.cpython-311.pyc
new file mode 100644
index 00000000..492c2fd1
Binary files /dev/null and b/MovieVerse-Backend/backend_django/__pycache__/__init__.cpython-311.pyc differ
diff --git a/MovieVerse-Backend/backend_django/__pycache__/settings.cpython-311.pyc b/MovieVerse-Backend/backend_django/__pycache__/settings.cpython-311.pyc
new file mode 100644
index 00000000..b1d09563
Binary files /dev/null and b/MovieVerse-Backend/backend_django/__pycache__/settings.cpython-311.pyc differ
diff --git a/MovieVerse-Backend/backend_django/__pycache__/urls.cpython-311.pyc b/MovieVerse-Backend/backend_django/__pycache__/urls.cpython-311.pyc
new file mode 100644
index 00000000..fad1b69a
Binary files /dev/null and b/MovieVerse-Backend/backend_django/__pycache__/urls.cpython-311.pyc differ
diff --git a/MovieVerse-Backend/backend_django/__pycache__/wsgi.cpython-311.pyc b/MovieVerse-Backend/backend_django/__pycache__/wsgi.cpython-311.pyc
new file mode 100644
index 00000000..9d2c44f5
Binary files /dev/null and b/MovieVerse-Backend/backend_django/__pycache__/wsgi.cpython-311.pyc differ
diff --git a/MovieVerse-Databases/firebase.json b/MovieVerse-Databases/firebase.json
new file mode 100644
index 00000000..c2d5ad68
--- /dev/null
+++ b/MovieVerse-Databases/firebase.json
@@ -0,0 +1,23 @@
+{
+  "hosting": {
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  },
+  "firestore": {
+    "rules": "firestore.rules",
+    "indexes": "firestore.indexes.json"
+  },
+  "storage": {
+    "rules": "storage.rules"
+  }
+}
diff --git a/MovieVerse-Databases/firestore.indexes.json b/MovieVerse-Databases/firestore.indexes.json
new file mode 100644
index 00000000..33b4b233
--- /dev/null
+++ b/MovieVerse-Databases/firestore.indexes.json
@@ -0,0 +1,59 @@
+{
+  "indexes": [
+    {
+      "collectionGroup": "movies",
+      "queryScope": "COLLECTION",
+      "fields": [
+        { "fieldPath": "genre", "order": "ASCENDING" },
+        { "fieldPath": "releaseYear", "order": "ASCENDING" }
+      ]
+    },
+    {
+      "collectionGroup": "directors",
+      "queryScope": "COLLECTION",
+      "fields": [
+        { "fieldPath": "name", "order": "ASCENDING" }
+      ],
+      "fieldOverrides": [
+        {
+          "fieldPath": "name",
+          "arrayConfig": "CONTAINS"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "actors",
+      "queryScope": "COLLECTION",
+      "fields": [
+        { "fieldPath": "name", "order": "ASCENDING" }
+      ],
+      "fieldOverrides": [
+        {
+          "fieldPath": "name",
+          "arrayConfig": "CONTAINS"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "users",
+      "queryScope": "COLLECTION",
+      "fields": [
+        { "fieldPath": "name", "order": "ASCENDING" }
+      ],
+      "fieldOverrides": [
+        {
+          "fieldPath": "name",
+          "arrayConfig": "CONTAINS"
+        }
+      ]
+    },
+    {
+      "collectionGroup": "reviews",
+      "queryScope": "COLLECTION",
+      "fields": [
+        { "fieldPath": "rating", "order": "ASCENDING" }
+      ]
+    }
+  ],
+  "fieldOverrides": []
+}
diff --git a/MovieVerse-Databases/firestore.rules b/MovieVerse-Databases/firestore.rules
new file mode 100644
index 00000000..48c1085e
--- /dev/null
+++ b/MovieVerse-Databases/firestore.rules
@@ -0,0 +1,8 @@
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /movies/{movie} {
+      allow read: if true;
+      allow write: if request.auth != null;
+    }
+  }
+}
diff --git a/MovieVerse-Databases/storage.rules b/MovieVerse-Databases/storage.rules
new file mode 100644
index 00000000..0baaeed6
--- /dev/null
+++ b/MovieVerse-Databases/storage.rules
@@ -0,0 +1,8 @@
+service firebase.storage {
+  match /b/{bucket}/o {
+    match /moviePosters/{poster} {
+      allow read: if true;
+      allow write: if request.auth != null;
+    }
+  }
+}
diff --git a/MovieVerse-Frontend/css/style.css b/MovieVerse-Frontend/css/style.css
index 334fd4a9..53d9f101 100644
--- a/MovieVerse-Frontend/css/style.css
+++ b/MovieVerse-Frontend/css/style.css
@@ -1168,7 +1168,7 @@ p {
 }
 
 .app-btn {
-    background-color: #534caf;
+    background-color: #7378c5;
     border: 1px solid #ddd;
     border-radius: 8px;
     padding: 10px 15px;
@@ -1179,6 +1179,7 @@ p {
     display: block;
     width: auto;
     margin: 10px auto;
+    transition: 0.1s ease-in;
 }
 
 .clock {
diff --git a/MovieVerse-Frontend/html/about.html b/MovieVerse-Frontend/html/about.html
index 91d6a52e..d39d86a5 100644
--- a/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Frontend/html/about.html
@@ -43,6 +43,7 @@
 
         gtag('config', 'G-CQKJ67FXZ4');
     </script>
+
     <style>
         #local-time {
             transform: translateX(15%);
@@ -68,7 +69,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -158,7 +159,7 @@ <h3 id="subheading">Join The Journey:</h3>
         <p style="color: white; text-align: center"><em>Thank you for being a part of The MovieVerse. For more insights and updates, connect with us on our <a style="text-decoration: underline" id="githubLink" href="https://github.com/hoangsonww/The-MovieVerse-Database">GitHub page</a>.</em></p>
 
         <h3 id="subheading">Useful Links:</h3>
-        <p style="color: white">Here are some links that you might find useful. You can explore the analytics page of our database (<strong style="text-decoration: underline">MovieVerse Analytics</strong>), read our <strong style="text-decoration: underline">terms of service</strong>, and review our <strong style="text-decoration: underline">privacy policy</strong>. Feel free to reach out to us if you have any questions or concerns.</p>
+        <p style="color: white">Here are some links that you might find useful. You can explore the analytics page of our database (<a href="analytics.html" style="color: white"><strong style="text-decoration: underline">MovieVerse Analytics</strong></a>), read our <a href="terms-of-service.html" style="color: white"><strong style="text-decoration: underline">terms of service</strong></a>, and review our <a href="privacy-policy.html" style="color: white"><strong style="text-decoration: underline">privacy policy</strong></a>. Feel free to reach out to us if you have any questions or concerns.</p>
 
         <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>
@@ -255,6 +256,7 @@ <h3 id="subheading">Useful Links:</h3>
 
         document.addEventListener("DOMContentLoaded", function() {
             updateSignInButtonState();
+            setBodyClass();
             document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
         });
 
@@ -285,9 +287,6 @@ <h3 id="subheading">Useful Links:</h3>
             }
         });
 
-        /**
-         * Rotates the user stats and movie quotes displayed in the main element.
-         */
         function rotateUserStats() {
             const stats = [
                 {
@@ -463,6 +462,19 @@ <h3 id="subheading">Useful Links:</h3>
             localStorage.setItem('searchQuery', searchQuery);
             window.location.href = 'search.html';
         }
+
+        function setBodyClass() {
+            if (window.innerWidth < 768) {
+                document.body.classList.remove('movie-details-body');
+                document.body.classList.add('movie-details-body4');
+            }
+            else {
+                document.body.classList.remove('movie-details-body4');
+                document.body.classList.add('movie-details-body');
+            }
+        }
+
+        window.addEventListener('resize', setBodyClass);
     </script>
 </body>
 </html>
diff --git a/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Frontend/html/actor-details.html
index fc6ca282..1a477c02 100644
--- a/MovieVerse-Frontend/html/actor-details.html
+++ b/MovieVerse-Frontend/html/actor-details.html
@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Actor Details</title>
+    <title>Actor Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -54,7 +54,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Frontend/html/analytics.html
index 29571265..86ebf17a 100644
--- a/MovieVerse-Frontend/html/analytics.html
+++ b/MovieVerse-Frontend/html/analytics.html
@@ -8,8 +8,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -55,7 +55,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/chatbot.html b/MovieVerse-Frontend/html/chatbot.html
index 20903cd1..faf1aa9c 100644
--- a/MovieVerse-Frontend/html/chatbot.html
+++ b/MovieVerse-Frontend/html/chatbot.html
@@ -12,8 +12,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -87,7 +87,7 @@ <h1 id="stats-display" class="clock" style="font-size: 20px"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
diff --git a/MovieVerse-Frontend/html/christopher-nolan.html b/MovieVerse-Frontend/html/christopher-nolan.html
index 75c305f7..b4f1938f 100644
--- a/MovieVerse-Frontend/html/christopher-nolan.html
+++ b/MovieVerse-Frontend/html/christopher-nolan.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -57,7 +57,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Frontend/html/company-details.html
index 3d04c3bd..07a185e3 100644
--- a/MovieVerse-Frontend/html/company-details.html
+++ b/MovieVerse-Frontend/html/company-details.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Company Details</title>
+    <title>Company Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/company-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -12,8 +12,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -58,7 +58,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/create-account.html b/MovieVerse-Frontend/html/create-account.html
index ffab1c13..88c71c0b 100644
--- a/MovieVerse-Frontend/html/create-account.html
+++ b/MovieVerse-Frontend/html/create-account.html
@@ -8,8 +8,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -117,7 +117,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
diff --git a/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Frontend/html/director-details.html
index e0941c30..17de817b 100644
--- a/MovieVerse-Frontend/html/director-details.html
+++ b/MovieVerse-Frontend/html/director-details.html
@@ -2,16 +2,16 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Director Details</title>
+    <title>Director Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/director-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <<meta property="og:locale" content="en_US" />
+    <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -56,7 +56,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/favorites.html b/MovieVerse-Frontend/html/favorites.html
index c0bb9a81..eeac8343 100644
--- a/MovieVerse-Frontend/html/favorites.html
+++ b/MovieVerse-Frontend/html/favorites.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
-    <title>Favorite Movies & Watchlists</title>
+    <title>Favorites & Watchlists - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/movie-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -12,8 +13,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -163,6 +164,11 @@
             display: none;
             transition: height 0.5s ease-in-out;
             margin-bottom: 240px;
+            transition: background-color 0.3s ease-in-out;
+        }
+
+        #how-to-use-section:hover {
+            background-color: #534caf;
         }
     </style>
 </head>
@@ -184,7 +190,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
@@ -263,12 +269,11 @@ <h2>Delete Watch Lists</h2>
 
     <div id="how-to-use-section" style="display: none; text-align: center; padding: 20px; margin-top: 20px;">
         <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
-        <p>First, in order to create a watchlist, you must have at least one favorite movie or TV series. You can add movies and TV series to your favorites by clicking the heart icon on the movie or TV series details page. Your favorites are stored in our databases and can be accessed from any device!</p>
-        <p>You can search for any movies or TV shows using the search bar at the top of the page. Once you have added some favorites, you can create a watchlist by clicking the "Create a Watch List" button.</p>
-        <p>The list of movies and TV shows in the create watchlist form will be populated with your favorite movies and TV series. You can select the movies and TV series you want to include in your watchlist and give it a name and description.</p>
-        <p>After creating a watchlist, you can edit or delete it by clicking the "Edit a Watch List" or "Delete Watch Lists" buttons respectively.</p>
-        <p>Remember that when editing a watchlist, you must first select the watchlist you want to edit from the dropdown list. You can then change the name, description, and the movies and TV series included in the watchlist. Any updates to the watchlists will be saved to your account.</p>
-        <p>Synchronize your watchlists and favorites across devices by signing in with your MovieVerse account. If you do not sign in, your created watchlists and favorites will be stored locally on your device and will be synced with your account when you sign back in.</p>
+        <p>To start creating a watchlist, add movies and TV series to your favorites by clicking the heart icon on their pages. Your favorites serve as a pool for building watchlists.</p>
+        <p>Once you have favorites, you can create a watchlist. Select items from your favorites, then name and describe your watchlist. You can later edit or delete any watchlist through the corresponding "Edit" or "Delete" options.</p>
+        <p>Editing a watchlist allows you to modify its name, description, and contents. Select the watchlist to edit from the dropdown menu, make your changes, and save them to update your watchlist.</p>
+        <p>For seamless access across devices, sign in to your MovieVerse account. This ensures your favorites and watchlists are stored in our database and can be accessed anytime, anywhere. Without signing in, your data is stored locally and will sync upon your next sign-in.</p>
+        <p><em>Note: if you sign in for the first time without any previously signed-in account, any locally stored favorites and watchlists will be replaced by your account data. To avoid losing data, consider backing it up or noting it down before signing in.</em></p>
         <p style="font-weight: bold; margin-top: 30px">Enjoy using MovieVerse Watchlists!</p>
     </div>
 
diff --git a/MovieVerse-Frontend/html/inception.html b/MovieVerse-Frontend/html/inception.html
index 720c3d5a..c5638417 100644
--- a/MovieVerse-Frontend/html/inception.html
+++ b/MovieVerse-Frontend/html/inception.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -63,7 +63,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/leonardo-dicaprio.html b/MovieVerse-Frontend/html/leonardo-dicaprio.html
index 5ad8bfb3..d59b0c8c 100644
--- a/MovieVerse-Frontend/html/leonardo-dicaprio.html
+++ b/MovieVerse-Frontend/html/leonardo-dicaprio.html
@@ -9,8 +9,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -56,7 +56,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Frontend/html/movie-details.html
index 5193382c..10a4fce8 100644
--- a/MovieVerse-Frontend/html/movie-details.html
+++ b/MovieVerse-Frontend/html/movie-details.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Movie Details</title>
+    <title>Movie Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/movie-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -63,7 +63,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/movie-match.html b/MovieVerse-Frontend/html/movie-match.html
index 7cac9bde..1b39ad5b 100644
--- a/MovieVerse-Frontend/html/movie-match.html
+++ b/MovieVerse-Frontend/html/movie-match.html
@@ -9,8 +9,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -56,7 +56,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/movie-timeline.html b/MovieVerse-Frontend/html/movie-timeline.html
index 3568bfba..b61aecf7 100644
--- a/MovieVerse-Frontend/html/movie-timeline.html
+++ b/MovieVerse-Frontend/html/movie-timeline.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -55,7 +55,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/offline.html b/MovieVerse-Frontend/html/offline.html
index b4991c46..785a9766 100644
--- a/MovieVerse-Frontend/html/offline.html
+++ b/MovieVerse-Frontend/html/offline.html
@@ -251,7 +251,7 @@ <h1 id="stats-display" class="clock"></h1>
 
     <button class="back-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
     <button class="about" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-    <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+    <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
     <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
         <span id="signInOutText">Sign In</span>
         <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/privacy-policy.html b/MovieVerse-Frontend/html/privacy-policy.html
index 99f23b0a..eb3c0fe7 100644
--- a/MovieVerse-Frontend/html/privacy-policy.html
+++ b/MovieVerse-Frontend/html/privacy-policy.html
@@ -17,8 +17,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -85,7 +85,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
diff --git a/MovieVerse-Frontend/html/reset-password.html b/MovieVerse-Frontend/html/reset-password.html
index 09219234..d0b9ce40 100644
--- a/MovieVerse-Frontend/html/reset-password.html
+++ b/MovieVerse-Frontend/html/reset-password.html
@@ -11,8 +11,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -111,7 +111,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
diff --git a/MovieVerse-Frontend/html/search.html b/MovieVerse-Frontend/html/search.html
index a329beea..7dee39dc 100644
--- a/MovieVerse-Frontend/html/search.html
+++ b/MovieVerse-Frontend/html/search.html
@@ -6,12 +6,12 @@
     <title>Search Results - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <<meta property="og:locale" content="en_US" />
+    <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -46,7 +46,7 @@
 
 <body class="movie-details-body4">
 
-    <header style="margin-bottom: -50px; margin-top: -28px">
+    <header style="margin-bottom: -50px; margin-top: -5px">
         <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer" title="Click to go back to the home page">
             <h1 id="my-heading" style="margin-bottom: -10px">
                 The Mo<span class="highlight">vieV</span>erse
@@ -58,7 +58,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/settings.html b/MovieVerse-Frontend/html/settings.html
index 5b36bdc9..6cfeffa9 100644
--- a/MovieVerse-Frontend/html/settings.html
+++ b/MovieVerse-Frontend/html/settings.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -170,7 +170,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/sign-in.html b/MovieVerse-Frontend/html/sign-in.html
index 490bb274..279ced4b 100644
--- a/MovieVerse-Frontend/html/sign-in.html
+++ b/MovieVerse-Frontend/html/sign-in.html
@@ -4,12 +4,12 @@
     <meta charset="UTF-8">
     <title>Sign In - The MovieVerse</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <<meta property="og:locale" content="en_US" />
+    <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -125,7 +125,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
diff --git a/MovieVerse-Frontend/html/terms-of-service.html b/MovieVerse-Frontend/html/terms-of-service.html
index 5b4a39a0..65fa5d08 100644
--- a/MovieVerse-Frontend/html/terms-of-service.html
+++ b/MovieVerse-Frontend/html/terms-of-service.html
@@ -17,8 +17,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -86,7 +86,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
diff --git a/MovieVerse-Frontend/html/trivia.html b/MovieVerse-Frontend/html/trivia.html
index 2a023e9c..29d2a7fb 100644
--- a/MovieVerse-Frontend/html/trivia.html
+++ b/MovieVerse-Frontend/html/trivia.html
@@ -81,7 +81,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
diff --git a/MovieVerse-Frontend/html/tv-details.html b/MovieVerse-Frontend/html/tv-details.html
index da58aeb0..ce41ef43 100644
--- a/MovieVerse-Frontend/html/tv-details.html
+++ b/MovieVerse-Frontend/html/tv-details.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>TV Details</title>
+    <title>TV Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/tv-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -84,7 +84,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Frontend/html/user-profile.html b/MovieVerse-Frontend/html/user-profile.html
index 84c63c79..2c99a805 100644
--- a/MovieVerse-Frontend/html/user-profile.html
+++ b/MovieVerse-Frontend/html/user-profile.html
@@ -11,8 +11,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -278,7 +278,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
diff --git a/MovieVerse-Frontend/js/company-details.js b/MovieVerse-Frontend/js/company-details.js
index 5748a209..27ff5495 100644
--- a/MovieVerse-Frontend/js/company-details.js
+++ b/MovieVerse-Frontend/js/company-details.js
@@ -364,6 +364,8 @@ async function fetchCompanyDetails(companyId) {
         else {
             companyWebsite.textContent = 'Website Not Available';
         }
+
+        updateBrowserURL(company.name);
     }
     catch (error) {
         console.error('Error fetching company details:', error);
@@ -747,3 +749,13 @@ function displayCompanyMovies(movies) {
         moviesList.appendChild(movieContainer);
     });
 }
+
+function updateBrowserURL(title) {
+    const nameSlug = createNameSlug(title);
+    const newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + nameSlug;
+    window.history.replaceState({ path: newURL }, '', newURL);
+}
+
+function createNameSlug(title) {
+    return title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]/g, '');
+}
\ No newline at end of file
diff --git a/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Frontend/js/movie-details.js
index 27fc7c57..d0fcb867 100644
--- a/MovieVerse-Frontend/js/movie-details.js
+++ b/MovieVerse-Frontend/js/movie-details.js
@@ -1022,7 +1022,7 @@ function populateMovieDetails(movie, imdbRating, rtRating, metascore, awards, ra
 
     const popularityThreshold = 80;
     const isPopular = movie.popularity >= popularityThreshold;
-    const popularityText = isPopular ? `${popularityScore} (This movie is popular)` : `${popularityScore} (This movie is unpopular)`;
+    const popularityText = isPopular ? `${popularityScore} (This movie is <strong>popular</strong>)` : `${popularityScore} (This movie is <strong>unpopular</strong>)`;
 
     const adultContentIndicator = movie.adult
         ? `<span class="adult-indicator">Adult Content</span>`
diff --git a/MovieVerse-Frontend/js/search.js b/MovieVerse-Frontend/js/search.js
index e166376d..4caf4efb 100644
--- a/MovieVerse-Frontend/js/search.js
+++ b/MovieVerse-Frontend/js/search.js
@@ -242,6 +242,8 @@ async function showResults(category) {
         console.error('Error fetching search results:', error);
         document.querySelector('.movie-match-container1').innerHTML = '<p>Error fetching results. Please try again later.</p>';
     }
+
+    updateBrowserURL(searchQuery);
 }
 
 document.querySelector('button[onclick="showResults(\'movie\')"]').addEventListener('click', function() {
@@ -429,4 +431,14 @@ function handleSearch() {
     const searchQuery = document.getElementById('search').value;
     localStorage.setItem('searchQuery', searchQuery);
     window.location.reload();
+}
+
+function updateBrowserURL(title) {
+    const nameSlug = createNameSlug(title);
+    const newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?search_query=' + nameSlug;
+    window.history.replaceState({ path: newURL }, '', newURL);
+}
+
+function createNameSlug(title) {
+    return title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]/g, '');
 }
\ No newline at end of file
diff --git a/MovieVerse-Mobile/README.md b/MovieVerse-Mobile/README.md
index 8d780f96..1a46e20e 100644
--- a/MovieVerse-Mobile/README.md
+++ b/MovieVerse-Mobile/README.md
@@ -4,6 +4,8 @@
 
 MovieVerse is a dynamic, user-friendly mobile application that offers an extensive library of movies across various genres. Designed for movie enthusiasts, it provides a seamless browsing experience on iOS devices, including iPhones and iPads. Explore popular, award-winning, and hidden gems, or dive into categories like action, horror, romance, and more. MovieVerse is your ultimate mobile destination for movie discovery and entertainment.
 
+**Note:** The app is under active development and will be available for download on the App Store and Google Play Store soon.
+
 ## Features
 
 ### Easy Navigation
@@ -23,11 +25,6 @@ MovieVerse is a dynamic, user-friendly mobile application that offers an extensi
 
 ### And many more!
 
-## Installation
-
-1. **Download the App**: Visit the App Store and search for "MovieVerse" to download and install the app on your iOS device.
-2. **Open MovieVerse**: Tap on the MovieVerse icon on your home screen to launch the app.
-
 ## Development
 
 ### Prerequisites
@@ -66,9 +63,16 @@ cordova build android
 cordova emulate ios
 cordova emulate android
 ```
-7. **Open the Project**: Open the project in Xcode or Android Studio to view the source code and test the app within the simulator.
+7. **Open the Project**: Open the project in Xcode and/or Android Studio to view the source code and test the app within the simulator.
 8. **Enjoy coding!**
 
+**Important**: If you make any changes to the source code of the mobile app, you will need to update the iOS build process by removing iOS and adding it again using the following commands:
+```
+cordova platform rm ios
+cordova platform add ios
+```
+The Android app, however, will build and run automatically as expected without any additional steps.
+
 ## Usage
 
 ### Browsing Movies
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/404.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/404.html
index 4fd8344b..12af9726 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/404.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/404.html
@@ -13,6 +13,7 @@
         .center-text {
             text-align: center;
         }
+
         .center-button {
             display: block;
             margin: 20px auto;
@@ -21,10 +22,11 @@
             border: none;
             background-color: #7378c5;
             font: inherit;
-            color: #000000;
+            color: #ffffff;
             margin-top: 40px;
             border-radius: 8px;
         }
+
         .center-button:hover {
             background-color: #ff8623;
             transition: background-color 0.3s;
@@ -197,7 +199,6 @@
     </script>
 </head>
 <body class="movie-details-body">
-    <!-- Header with buttons -->
     <header>
         <a href="index.html" style="text-decoration: none; color: inherit; cursor: pointer">
             <h1 id="my-heading" style="margin-bottom: -10px">
@@ -210,11 +211,18 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <h1 id="stats-display" class="clock"></h1>
         </div>
 
-        <button id="settings-btn" style="position: fixed; bottom: 220px">Settings</button>
         <button class="back-btn" onclick="window.location.href='index.html'" title="Go back to homepage">Home</button>
         <button class="about" onclick="window.location.href='MovieVerse-Frontend/html/about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="Go to your favorites list">Favorites</button>
-
+        <button class="favorites-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
         <form id="form1">
             <input
                     type="text"
@@ -225,11 +233,12 @@ <h1 id="stats-display" class="clock"></h1>
             <button type="button" id="button-search" onclick="handleSearch()">Search</button>
         </form>
 
-        <button id="movie-match-btn3" onclick="window.location.href='MovieVerse-Frontend/html/movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 140px">Movie Timeline</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 100px">Movie of the Day</button>
-        <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="margin-bottom: -39px" title="Engage in movie discussions">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='MovieVerse-Frontend/html/trivia.html'" style="margin-bottom: -40px" title="Test your movie knowledge">MovieVerse Trivia</button>
+        <button id="settings-btn" style="position: fixed; bottom: 185px">Settings</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 150px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px">Movie Timeline</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 80px">Recommendation</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 45px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
     <!-- Main 404 content -->
@@ -271,6 +280,45 @@ <h1 style="font-size: 50px; color: #ff8623;">404</h1>
             window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
         }
 
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'MovieVerse-Frontend/html/sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
         function updateClock() {
             var now = new Date();
             var hours = now.getHours();
@@ -326,5 +374,11 @@ <h1 style="font-size: 50px; color: #ff8623;">404</h1>
             window.location.href = 'MovieVerse-Frontend/html/search.html';
         }
     </script>
+
+    <footer style="margin-top: 400px">
+        <p>© 2024 The MovieVerse. All rights reserved.</p>
+    </footer>
+
 </body>
+
 </html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/chatbot.css b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/chatbot.css
index f48b0f60..e8a67d83 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/chatbot.css
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/chatbot.css
@@ -543,7 +543,7 @@ ol li:hover {
 
 #local-time {
     margin-top: 20px;
-    transform: translateX(15%);
+    transform: translateX(11%);
     padding: 10px;
     border-radius: 10px;
     z-index: 10;
@@ -569,7 +569,7 @@ ol li:hover {
     font-family: inherit;
     font-size: 1rem;
     padding: 0.5rem 1rem;
-    width: 250px;
+    width: 210px;
 }
 
 main {
@@ -664,7 +664,7 @@ main {
     }
 
     .about {
-        margin-left: 0px;
+        margin-left: 0;
     }
 
     .favorites-btn {
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/style.css b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/style.css
index 072827fd..53d9f101 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/style.css
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/style.css
@@ -1168,7 +1168,7 @@ p {
 }
 
 .app-btn {
-    background-color: #534caf;
+    background-color: #7378c5;
     border: 1px solid #ddd;
     border-radius: 8px;
     padding: 10px 15px;
@@ -1179,6 +1179,7 @@ p {
     display: block;
     width: auto;
     margin: 10px auto;
+    transition: 0.1s ease-in;
 }
 
 .clock {
@@ -1454,6 +1455,10 @@ p {
     margin-bottom: 20px;
 }
 
+#search-results-label:hover {
+    color: #f509d9;
+}
+
 .category-buttons button {
     background-color: #7378c5;
     font: inherit;
@@ -1463,7 +1468,7 @@ p {
     cursor: pointer;
     padding: 10px 15px;
     margin: 10px;
-    transition: 0.3s ease-in;
+    transition: 0.1s ease-in;
 }
 
 .category-buttons button:hover {
@@ -1722,6 +1727,15 @@ canvas {
     }
 }
 
+#ratingImdb {
+    color: #ff710d;
+    font-size: 17px;
+}
+
+#ratingImdb:hover {
+    color: #f509d9;
+}
+
 .chart-title {
     text-align: center;
     color: #ff710d;
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/trivia.css b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/trivia.css
index 72443323..d8a64a60 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/trivia.css
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/css/trivia.css
@@ -181,14 +181,6 @@ p {
     color: #f509d9;
 }
 
-footer {
-    text-align: center;
-    padding: 20px 0;
-    margin-top: 40px;
-    background-color: #7378c5;
-    color: white !important;
-}
-
 .button2 {
     background-color: #7378c5;
     font: inherit;
@@ -232,7 +224,7 @@ header {
     font-family: inherit;
     font-size: 1rem;
     padding: 0.5rem 1rem;
-    width: 250px;
+    width: 400px;
 }
 
 #main {
@@ -610,7 +602,6 @@ main {
     justify-content: center;
 }
 
-
 #clear-search-btn {
     display: block;
     margin: 20px auto;
@@ -654,7 +645,7 @@ main {
         cursor: pointer;
         position: absolute;
         top: 0;
-        margin-left: -200px;
+        margin-left: -180px;
         border-radius: 8px;
     }
 
@@ -672,7 +663,7 @@ main {
         cursor: pointer;
         position: absolute;
         top: 0;
-        margin-left: -20px;
+        margin-left: 0;
         border-radius: 8px;
     }
 
@@ -689,7 +680,7 @@ main {
         cursor: pointer;
         position: absolute;
         top: 0;
-        margin-left: 168px;
+        margin-left: 188px;
         border-radius: 8px;
         padding-left: 10px;
         padding-right: 10px;
@@ -734,3 +725,11 @@ main {
     border: none;
     cursor: pointer;
 }
+
+footer {
+    text-align: center;
+    padding: 20px 0;
+    margin-top: 40px;
+    background-color: #7378c5;
+    color: white !important;
+}
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 91d6a52e..d39d86a5 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
@@ -43,6 +43,7 @@
 
         gtag('config', 'G-CQKJ67FXZ4');
     </script>
+
     <style>
         #local-time {
             transform: translateX(15%);
@@ -68,7 +69,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -158,7 +159,7 @@ <h3 id="subheading">Join The Journey:</h3>
         <p style="color: white; text-align: center"><em>Thank you for being a part of The MovieVerse. For more insights and updates, connect with us on our <a style="text-decoration: underline" id="githubLink" href="https://github.com/hoangsonww/The-MovieVerse-Database">GitHub page</a>.</em></p>
 
         <h3 id="subheading">Useful Links:</h3>
-        <p style="color: white">Here are some links that you might find useful. You can explore the analytics page of our database (<strong style="text-decoration: underline">MovieVerse Analytics</strong>), read our <strong style="text-decoration: underline">terms of service</strong>, and review our <strong style="text-decoration: underline">privacy policy</strong>. Feel free to reach out to us if you have any questions or concerns.</p>
+        <p style="color: white">Here are some links that you might find useful. You can explore the analytics page of our database (<a href="analytics.html" style="color: white"><strong style="text-decoration: underline">MovieVerse Analytics</strong></a>), read our <a href="terms-of-service.html" style="color: white"><strong style="text-decoration: underline">terms of service</strong></a>, and review our <a href="privacy-policy.html" style="color: white"><strong style="text-decoration: underline">privacy policy</strong></a>. Feel free to reach out to us if you have any questions or concerns.</p>
 
         <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>
@@ -255,6 +256,7 @@ <h3 id="subheading">Useful Links:</h3>
 
         document.addEventListener("DOMContentLoaded", function() {
             updateSignInButtonState();
+            setBodyClass();
             document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
         });
 
@@ -285,9 +287,6 @@ <h3 id="subheading">Useful Links:</h3>
             }
         });
 
-        /**
-         * Rotates the user stats and movie quotes displayed in the main element.
-         */
         function rotateUserStats() {
             const stats = [
                 {
@@ -463,6 +462,19 @@ <h3 id="subheading">Useful Links:</h3>
             localStorage.setItem('searchQuery', searchQuery);
             window.location.href = 'search.html';
         }
+
+        function setBodyClass() {
+            if (window.innerWidth < 768) {
+                document.body.classList.remove('movie-details-body');
+                document.body.classList.add('movie-details-body4');
+            }
+            else {
+                document.body.classList.remove('movie-details-body4');
+                document.body.classList.add('movie-details-body');
+            }
+        }
+
+        window.addEventListener('resize', setBodyClass);
     </script>
 </body>
 </html>
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 fc6ca282..1a477c02 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
@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Actor Details</title>
+    <title>Actor Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -54,7 +54,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
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 0141ed15..86ebf17a 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
@@ -8,8 +8,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -42,7 +42,7 @@
 </head>
 <body class="movie-details-body">
     <header id="homepage-header" style="margin-top: -5px">
-        <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+        <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: 0">
             <h1 id="my-heading" style="margin-bottom: -10px">
                 The Mo<span class="highlight">vieV</span>erse
             </h1>
@@ -55,7 +55,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chatbot.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chatbot.html
index 501776c0..faf1aa9c 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chatbot.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/chatbot.html
@@ -12,8 +12,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -32,11 +32,8 @@
     <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
     <meta name="referrer" content="no-referrer-when-downgrade">
-
     <script src="../js/settings.js"></script>
-
     <link rel="manifest" href="../../manifest.json">
-
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
     <script>
         window.dataLayer = window.dataLayer || [];
@@ -45,13 +42,39 @@
 
         gtag('config', 'G-CQKJ67FXZ4');
     </script>
+    <style>
+        #header {
+            margin-top: 26px;
+            padding-left: 25px;
+        }
+
+        #form {
+            margin-top: -5px;
+            margin-right: 55px;
+        }
+
+        #local-time {
+            margin-top: 0;
+        }
+
+        @media (max-width: 800px){
+            #header {
+                margin-top: 10px;
+            }
+
+            #form {
+                margin-top: -15px;
+                margin-right: 0;
+            }
+        }
+    </style>
 </head>
 
 <body>
-    <header id="header" style="margin-top: 15px">
+    <header id="header">
         <div id="header-title">
             <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer" title="Click to go back to the home page">
-                <h1 id="my-heading" style="margin-bottom: -10px">
+                <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 10px">
                     The Mo<span class="highlight">vieV</span>erse
                 </h1>
             </a>
@@ -64,7 +87,7 @@ <h1 id="stats-display" class="clock" style="font-size: 20px"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
@@ -92,14 +115,12 @@ <h4 id="alt-title">Here, you can ask the chatbot about any movie-related topics
     </div>
 
     <main id="main">
-
         <div id="chatbotContainer">
             <div id="chatbotHeader">The MovieVerse Assistant</div>
             <div id="chatbotBody"></div>
             <input id="chatbotInput" type="text" placeholder="Ask me about anything...">
             <button id="sendButton">Send</button>
         </div>
-
     </main>
 
     <button id="alt-home-btn" onclick="window.location.href='../../index.html'">Home</button>
@@ -124,6 +145,7 @@ <h4 id="alt-title">Here, you can ask the chatbot about any movie-related topics
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
 
+
                 if (savedBg) {
                     document.body.style.backgroundImage = `url('${savedBg}')`;
                 }
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/christopher-nolan.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/christopher-nolan.html
index 75c305f7..b4f1938f 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/christopher-nolan.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/christopher-nolan.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -57,7 +57,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
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 3d04c3bd..07a185e3 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
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Company Details</title>
+    <title>Company Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/company-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -12,8 +12,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -58,7 +58,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/create-account.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/create-account.html
index fde391fa..88c71c0b 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/create-account.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/create-account.html
@@ -8,8 +8,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -117,20 +117,20 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form1">
-        <input
-                type="text"
-                id="search"
-                placeholder="Search For Anything..."
-                class="search"
-        />
-        <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-    </form>
+        <form id="form1" style="margin-top: 19px">
+            <input
+                    type="text"
+                    id="search"
+                    placeholder="Search For Anything..."
+                    class="search"
+            />
+            <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+        </form>
         <button id="settings-btn" style="position: fixed; bottom: 185px; z-index: 1000">Settings</button>
         <button id="movie-match-btn3" style="z-index: 1000; bottom: 150px" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>
         <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px; z-index: 1000">Movie Timeline</button>
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 e0941c30..17de817b 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
@@ -2,16 +2,16 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Director Details</title>
+    <title>Director Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/director-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <<meta property="og:locale" content="en_US" />
+    <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -56,7 +56,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/favorites.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/favorites.html
index 52f368c0..eeac8343 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/favorites.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/favorites.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
-    <title>Favorite Movies & Watchlists</title>
+    <title>Favorites & Watchlists - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/movie-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -12,8 +13,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -106,7 +107,8 @@
             justify-content: center;
             gap: 10px;
             margin-left: 0;
-            margin-top: 15px;
+            margin-top: 35px;
+            margin-bottom: 15px;
         }
 
         #local-time {
@@ -162,6 +164,11 @@
             display: none;
             transition: height 0.5s ease-in-out;
             margin-bottom: 240px;
+            transition: background-color 0.3s ease-in-out;
+        }
+
+        #how-to-use-section:hover {
+            background-color: #534caf;
         }
     </style>
 </head>
@@ -183,7 +190,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
@@ -196,7 +203,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
 
-        <form id="form">
+        <form id="form" style="margin-top: 5px">
             <input
                     type="text"
                     id="search"
@@ -262,12 +269,11 @@ <h2>Delete Watch Lists</h2>
 
     <div id="how-to-use-section" style="display: none; text-align: center; padding: 20px; margin-top: 20px;">
         <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
-        <p>First, in order to create a watchlist, you must have at least one favorite movie or TV series. You can add movies and TV series to your favorites by clicking the heart icon on the movie or TV series details page. Your favorites are stored in our databases and can be accessed from any device!</p>
-        <p>You can search for any movies or TV shows using the search bar at the top of the page. Once you have added some favorites, you can create a watchlist by clicking the "Create a Watch List" button.</p>
-        <p>The list of movies and TV shows in the create watchlist form will be populated with your favorite movies and TV series. You can select the movies and TV series you want to include in your watchlist and give it a name and description.</p>
-        <p>After creating a watchlist, you can edit or delete it by clicking the "Edit a Watch List" or "Delete Watch Lists" buttons respectively.</p>
-        <p>Remember that when editing a watchlist, you must first select the watchlist you want to edit from the dropdown list. You can then change the name, description, and the movies and TV series included in the watchlist. Any updates to the watchlists will be saved to your account.</p>
-        <p>Synchronize your watchlists and favorites across devices by signing in with your MovieVerse account. If you do not sign in, your created watchlists and favorites will be stored locally on your device and will be synced with your account when you sign back in.</p>
+        <p>To start creating a watchlist, add movies and TV series to your favorites by clicking the heart icon on their pages. Your favorites serve as a pool for building watchlists.</p>
+        <p>Once you have favorites, you can create a watchlist. Select items from your favorites, then name and describe your watchlist. You can later edit or delete any watchlist through the corresponding "Edit" or "Delete" options.</p>
+        <p>Editing a watchlist allows you to modify its name, description, and contents. Select the watchlist to edit from the dropdown menu, make your changes, and save them to update your watchlist.</p>
+        <p>For seamless access across devices, sign in to your MovieVerse account. This ensures your favorites and watchlists are stored in our database and can be accessed anytime, anywhere. Without signing in, your data is stored locally and will sync upon your next sign-in.</p>
+        <p><em>Note: if you sign in for the first time without any previously signed-in account, any locally stored favorites and watchlists will be replaced by your account data. To avoid losing data, consider backing it up or noting it down before signing in.</em></p>
         <p style="font-weight: bold; margin-top: 30px">Enjoy using MovieVerse Watchlists!</p>
     </div>
 
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/inception.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/inception.html
index 720c3d5a..c5638417 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/inception.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/inception.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -63,7 +63,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/leonardo-dicaprio.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
index 5ad8bfb3..d59b0c8c 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
@@ -9,8 +9,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -56,7 +56,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
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 5193382c..10a4fce8 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
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Movie Details</title>
+    <title>Movie Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/movie-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -63,7 +63,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-match.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-match.html
index 7cac9bde..1b39ad5b 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-match.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-match.html
@@ -9,8 +9,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -56,7 +56,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-timeline.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-timeline.html
index 3568bfba..b61aecf7 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-timeline.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/movie-timeline.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -55,7 +55,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/offline.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/offline.html
new file mode 100644
index 00000000..785a9766
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/offline.html
@@ -0,0 +1,382 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>You're Offline - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+
+        function rotateUserStats() {
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Your Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Your Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Your Unique Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Your Favorited Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('favorites')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Your Most Common Favorited Genre",
+                    getValue: getMostCommonGenre
+                },
+                { label: "Your Created Watchlists", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Your Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Your Unique Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Your Unique Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                {
+                    label: "Your Unique Production Companies Discovered",
+                    getValue: () => {
+                        const viewedCompanies = JSON.parse(localStorage.getItem('uniqueCompaniesViewed')) || [];
+                        return viewedCompanies.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy }
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenres = JSON.parse(localStorage.getItem('favoriteGenres')) || {};
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in favoriteGenres) {
+                if (favoriteGenres[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = favoriteGenres[genre];
+                }
+            }
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+</head>
+<body class="movie-details-body">
+<!-- Header with buttons -->
+<header>
+    <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+        <h1 id="my-heading" style="margin-bottom: -10px">
+            The Mo<span class="highlight">vieV</span>erse
+        </h1>
+    </a>
+
+    <div id="local-time" style="cursor: pointer">
+        <p id="stats-label" class="clock" style="font-size: 16px"></p>
+        <h1 id="stats-display" class="clock"></h1>
+    </div>
+
+    <button class="back-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+    <button class="about" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+    <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+    <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
+        <span id="signInOutText">Sign In</span>
+        <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+        <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+    </button>
+    <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+        <span id="profileText">Profile</span>
+        <i class="fas fa-user" id="profileIcon"></i>
+    </button>
+    <form id="form1">
+        <input
+                type="text"
+                id="search"
+                placeholder="Search For Anything..."
+                class="search"
+        />
+        <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+    </form>
+
+    <button id="settings-btn" style="position: fixed; bottom: 185px; right: 0">Settings</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 150px; right: 0">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px; right: 0">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 80px; right: 0">Recommendation</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 45px; right: 0" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 10px; right: 0" title="Test your movie knowledge">MovieVerse Trivia</button>
+</header>
+
+<div class="center-text" style="padding: 150px;">
+    <h1 style="font-size: 50px; color: #ff8623; margin-top: 20px">You're Offline</h1>
+    <p>It seems you're offline. Please check your internet connection and try again. If you're still having trouble, please contact your service provider.</p>
+    <button class="center-button" onclick="window.location.href='index.html'">Try Again</button>
+</div>
+
+<script>
+    async function showMovieOfTheDay() {
+        const year = new Date().getFullYear();
+        const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            const movies = data.results;
+
+            if (movies.length > 0) {
+                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                localStorage.setItem('selectedMovieId', randomMovie.id);
+                window.location.href = 'movie-details.html';
+            }
+            else {
+                fallbackMovieSelection();
+            }
+        }
+        catch (error) {
+            console.error('Error fetching movie:', error);
+            fallbackMovieSelection();
+        }
+    }
+
+    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 = 'MovieVerse-Frontend/html/movie-details.html';
+    }
+
+    function updateClock() {
+        var now = new Date();
+        var hours = now.getHours();
+        var minutes = now.getMinutes();
+        hours = hours < 10 ? '0' + hours : hours;
+        minutes = minutes < 10 ? '0' + minutes : minutes;
+        var timeString = hours + ':' + minutes;
+        document.getElementById('clock').innerHTML = timeString;
+    }
+
+    setInterval(updateClock, 1000);
+    window.onload = updateClock;
+
+    document.getElementById('settings-btn').addEventListener('click', () => {
+        window.location.href = 'MovieVerse-Frontend/html/settings.html';
+    });
+
+    document.addEventListener('DOMContentLoaded', () => {
+        applySettings();
+
+        function applySettings() {
+            const defaultBg = '../../images/universe-1.png';
+            const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+            const savedTextColor = localStorage.getItem('textColor');
+            const savedFontSize = localStorage.getItem('fontSize');
+            document.body.style.backgroundImage = `url('${savedBg}')`;
+
+            if (savedTextColor) {
+                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                    element.style.color = savedTextColor;
+                });
+            }
+
+            if (savedFontSize) {
+                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                document.body.style.fontSize = size;
+            }
+        }
+    });
+
+    const form = document.getElementById('form1');
+
+    form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const searchQuery = document.getElementById('search').value;
+        localStorage.setItem('searchQuery', searchQuery);
+        window.location.href = 'search.html';
+    });
+
+    function handleSearch() {
+        const searchQuery = document.getElementById('search').value;
+        localStorage.setItem('searchQuery', searchQuery);
+        window.location.href = 'search.html';
+    }
+</script>
+
+<footer style="margin-top: 400px">
+    <p>© 2024 The MovieVerse. All rights reserved.</p>
+</footer>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/privacy-policy.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/privacy-policy.html
index 581feb6f..eb3c0fe7 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/privacy-policy.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/privacy-policy.html
@@ -17,8 +17,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -85,7 +85,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
@@ -112,7 +112,7 @@ <h1 id="stats-display" class="clock"></h1>
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
-    <main class="content-area" style="text-align: center;   ">
+    <main class="content-area" style="text-align: center">
         <div style="text-align: center; width: 100vw; margin-left: 10px">
             <h1 id="privacy-header">Privacy Policy</h1>
         </div>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/reset-password.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/reset-password.html
index 72035012..d0b9ce40 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/reset-password.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/reset-password.html
@@ -11,8 +11,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -111,12 +111,13 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form1">
+
+        <form id="form1" style="margin-top: 19px">
             <input
                     type="text"
                     id="search"
@@ -125,6 +126,7 @@ <h1 id="stats-display" class="clock"></h1>
             />
             <button type="button" id="button-search" onclick="handleSearch()">Search</button>
         </form>
+
         <button id="settings-btn" style="position: fixed; bottom: 185px; z-index: 1000">Settings</button>
         <button id="movie-match-btn3" style="z-index: 1000; bottom: 150px" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>
         <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px; z-index: 1000">Movie Timeline</button>
@@ -392,6 +394,7 @@ <h2>Reset Password</h2>
             }
         }
     </script>
+
     <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
     <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
 
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/search.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/search.html
index a329beea..7dee39dc 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/search.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/search.html
@@ -6,12 +6,12 @@
     <title>Search Results - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <<meta property="og:locale" content="en_US" />
+    <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -46,7 +46,7 @@
 
 <body class="movie-details-body4">
 
-    <header style="margin-bottom: -50px; margin-top: -28px">
+    <header style="margin-bottom: -50px; margin-top: -5px">
         <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer" title="Click to go back to the home page">
             <h1 id="my-heading" style="margin-bottom: -10px">
                 The Mo<span class="highlight">vieV</span>erse
@@ -58,7 +58,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/settings.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/settings.html
index e5a43e43..6cfeffa9 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/settings.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/settings.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -170,7 +170,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -180,7 +180,7 @@ <h1 id="stats-display" class="clock"></h1>
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form">
+        <form id="form" style="margin-top: 5px">
             <input
                     type="text"
                     id="search"
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/sign-in.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/sign-in.html
index c03f5201..279ced4b 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/sign-in.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/sign-in.html
@@ -4,12 +4,12 @@
     <meta charset="UTF-8">
     <title>Sign In - The MovieVerse</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <<meta property="og:locale" content="en_US" />
+    <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -125,12 +125,12 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form1">
+        <form id="form1" style="margin-top: 19px">
             <input
                     type="text"
                     id="search"
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/terms-of-service.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/terms-of-service.html
index 5b4a39a0..65fa5d08 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/terms-of-service.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/terms-of-service.html
@@ -17,8 +17,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -86,7 +86,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/trivia.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/trivia.html
index 61604fe3..29d2a7fb 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/trivia.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/trivia.html
@@ -50,11 +50,28 @@
         label:hover {
             color: #f509d9;
         }
+
+        #my-heading {
+            margin-top: 25px;
+        }
+
+        #form {
+            margin-top: 16px;
+        }
+
+        @media (max-width: 600px) {
+            #my-heading {
+                margin-top: 10px;
+            }
+
+            #form {
+                margin-top: 0;
+            }
+        }
     </style>
 </head>
 
 <body>
-
     <header style="margin-bottom: -50px; margin-top: 10px">
         <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: 5px" title="Click to go back to the home page">
             <h1 id="my-heading" style="margin-bottom: -10px">
@@ -64,7 +81,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
@@ -83,7 +100,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
                     id="search"
                     placeholder="Search For Anything..."
                     class="search"
-                    style="width: 200px"
+                    style="width: 215px"
             />
             <button type="button" id="button-search" onclick="handleSearch()">Search</button>
         </form>
@@ -138,6 +155,7 @@ <h3>Trivia Results</h3>
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
 
+
                 if (savedBg) {
                     document.body.style.backgroundImage = `url('${savedBg}')`;
                 }
@@ -157,7 +175,5 @@ <h3>Trivia Results</h3>
     <footer>
         <p style="color: white">© 2024 The MovieVerse. All rights reserved.</p>
     </footer>
-
 </body>
-
 </html>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/tv-details.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/tv-details.html
index 0dab1880..ce41ef43 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/tv-details.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/tv-details.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>TV Details</title>
+    <title>TV Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/tv-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -62,6 +62,12 @@
         #prod-companies:hover {
             color: #f509d9;
         }
+
+        @media (max-width: 800px) {
+            .movie-description {
+                margin-top: -75px;
+            }
+        }
     </style>
 </head>
 
@@ -78,7 +84,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -111,6 +117,7 @@ <h2 id="search-title"></h2>
     <div class="details-container" id="movie-details-container">
         <!-- Left side for Title and Image -->
         <div class="movie-left">
+
             <!-- Container for Title and Favorites Button -->
             <div class="title-favorites-container">
                 <h2 id="movie-title" class="movie-header"></h2>
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/user-profile.html b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/user-profile.html
index 8afa34ac..2c99a805 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/user-profile.html
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/html/user-profile.html
@@ -11,8 +11,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -278,7 +278,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
@@ -288,7 +288,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
             <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
         </button>
-        <form id="form1">
+        <form id="form1" style="margin-top: 20px">
             <input
                     type="text"
                     id="search"
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/company-details.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/company-details.js
index 5748a209..27ff5495 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/company-details.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/company-details.js
@@ -364,6 +364,8 @@ async function fetchCompanyDetails(companyId) {
         else {
             companyWebsite.textContent = 'Website Not Available';
         }
+
+        updateBrowserURL(company.name);
     }
     catch (error) {
         console.error('Error fetching company details:', error);
@@ -747,3 +749,13 @@ function displayCompanyMovies(movies) {
         moviesList.appendChild(movieContainer);
     });
 }
+
+function updateBrowserURL(title) {
+    const nameSlug = createNameSlug(title);
+    const newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + nameSlug;
+    window.history.replaceState({ path: newURL }, '', newURL);
+}
+
+function createNameSlug(title) {
+    return title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]/g, '');
+}
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/favorites.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/favorites.js
index edc438d2..58eb3cf0 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/favorites.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/favorites.js
@@ -60,18 +60,32 @@ function generateMovieNames(input) {
     return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
 }
 
-document.getElementById('how-to-use-btn').addEventListener('click', function() {
-    var howToUseSection = document.getElementById('how-to-use-section');
-    if (howToUseSection.style.display === 'none') {
-        howToUseSection.style.display = 'block';
-        window.location.href = '#how-to-use-section';
-        document.getElementById('how-to-use-btn').textContent = 'Hide Tutorial';
+document.addEventListener('DOMContentLoaded', function() {
+    adjustButtonMargin();
+    document.getElementById('how-to-use-btn').addEventListener('click', function() {
+        let howToUseSection = document.getElementById('how-to-use-section');
+        if (howToUseSection.style.display === 'none') {
+            howToUseSection.style.display = 'block';
+            window.location.href = '#how-to-use-section';
+            document.getElementById('how-to-use-btn').textContent = 'Hide Tutorial';
+            document.getElementById('how-to-use-btn').style.marginBottom = '0';
+        } else {
+            howToUseSection.style.display = 'none';
+            document.getElementById('how-to-use-btn').textContent = 'How to Use';
+            document.getElementById('how-to-use-btn').style.marginBottom = '180px';
+        }
+    });
+});
+
+function adjustButtonMargin() {
+    let howToUseSection = document.getElementById('how-to-use-section');
+    if (howToUseSection.style.display === 'none' || !howToUseSection.style.display) {
+        document.getElementById('how-to-use-btn').style.marginBottom = '200px';
     }
     else {
-        howToUseSection.style.display = 'none';
-        document.getElementById('how-to-use-btn').textContent = 'How to Use';
+        document.getElementById('how-to-use-btn').style.marginBottom = '0';
     }
-});
+}
 
 function rotateUserStats() {
     const stats = [
@@ -1294,6 +1308,7 @@ function pinWatchList(watchlistDiv, watchlistId) {
 
     localStorage.setItem('watchlists', JSON.stringify(watchlists));
     watchlistDiv.classList.toggle('pinned');
+
     loadWatchLists();
     window.location.reload();
 }
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 ce382d89..d0fcb867 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
@@ -780,17 +780,13 @@ function getRatingDetails(rating) {
     return details;
 }
 
-function getMovieCode2() {
-    const encodedKey = "MmJhOGU1MzY=";
-    return atob(encodedKey);
-}
-
 async function fetchMovieRatings(imdbId, tmdbMovieData) {
-    const omdbApiKey = `${getMovieCode2()}`;
-    const omdbUrl = `https://www.omdbapi.com/?i=${imdbId}&apikey=${omdbApiKey}`;
+    const omdbCode = `${getMovieCode2()}`;
+    const omdb = `https://${getMovieActor()}/?i=${imdbId}&${getMovieName()}${omdbCode}`;
 
+    console.log(omdb);
     try {
-        const response = await fetch(omdbUrl);
+        const response = await fetch(omdb);
         const data = await response.json();
 
         let imdbRating = data.imdbRating ? data.imdbRating : 'N/A';
@@ -845,7 +841,7 @@ function calculateFallbackRTRating(imdbRating, tmdbRating) {
     const weightImdb = 0.8;
     const weightTmdb = 0.1;
 
-    return ((normalizedImdbRating * weightImdb) + (normalizedTmdbRating * weightTmdb)).toFixed(0) + '%'; // Calculate fallback RT rating out of 100% scale (in case data is not available from OMDB)
+    return ((normalizedImdbRating * weightImdb) + (normalizedTmdbRating * weightTmdb)).toFixed(0) + '%';
 }
 
 function calculateFallbackMetacriticsRating(imdbRating, tmdbRating) {
@@ -855,7 +851,7 @@ function calculateFallbackMetacriticsRating(imdbRating, tmdbRating) {
     const weightImdb = 0.8;
     const weightTmdb = 0.1;
 
-    return ((normalizedImdbRating * weightImdb) + (normalizedTmdbRating * weightTmdb)).toFixed(0); // Calculate fallback Metacritics rating out of 100 scale (in case data is not available from OMDB)
+    return ((normalizedImdbRating * weightImdb) + (normalizedTmdbRating * weightTmdb)).toFixed(0);
 }
 
 let trailerIframeDisplayed = false;
@@ -1026,7 +1022,7 @@ function populateMovieDetails(movie, imdbRating, rtRating, metascore, awards, ra
 
     const popularityThreshold = 80;
     const isPopular = movie.popularity >= popularityThreshold;
-    const popularityText = isPopular ? `${popularityScore} (This movie is popular)` : `${popularityScore} (This movie is unpopular)`;
+    const popularityText = isPopular ? `${popularityScore} (This movie is <strong>popular</strong>)` : `${popularityScore} (This movie is <strong>unpopular</strong>)`;
 
     const adultContentIndicator = movie.adult
         ? `<span class="adult-indicator">Adult Content</span>`
@@ -1189,6 +1185,21 @@ function updateMoviesFavorited(movieId) {
     }
 }
 
+function getMovieCode2() {
+    const codeOfMovie = "MmJhOGU1MzY=";
+    return atob(codeOfMovie);
+}
+
+function getMovieName() {
+    const moviename = "YXBpa2V5PQ==";
+    return atob(moviename);
+}
+
+function getMovieActor() {
+    const actor = "d3d3Lm9tZGJhcGkuY29t";
+    return atob(actor);
+}
+
 function updateAverageMovieRating(movieId, newRating) {
     const savedRatings = JSON.parse(localStorage.getItem('movieRatings')) || {};
 
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/search.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/search.js
index 1bb9e4e4..4caf4efb 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/search.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/search.js
@@ -236,12 +236,14 @@ async function showResults(category) {
         const response = await fetch(movieUrl);
         const data = await response.json();
         const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-        displayResults(sortedResults, category);
+        displayResults(sortedResults, category, searchQuery);
     }
     catch (error) {
         console.error('Error fetching search results:', error);
         document.querySelector('.movie-match-container1').innerHTML = '<p>Error fetching results. Please try again later.</p>';
     }
+
+    updateBrowserURL(searchQuery);
 }
 
 document.querySelector('button[onclick="showResults(\'movie\')"]').addEventListener('click', function() {
@@ -282,12 +284,14 @@ function updateCategoryButtonStyles(selectedCategory) {
     }
 }
 
-function displayResults(results, category) {
+function displayResults(results, category, searchTerm) {
     const container = document.getElementById('movie-match-container1');
     container.innerHTML = '';
 
+    const capitalizedCategory = category.charAt(0).toUpperCase() + category.slice(1);
+
     if (results.length === 0) {
-        container.innerHTML = `<p>No results found for ${category}. Please try again.</p>`;
+        container.innerHTML = `<p>No results found for "${searchTerm}" in the ${capitalizedCategory} category. Please try again with a different query.</p>`;
         return;
     }
     showMovies(results, container, category);
@@ -427,4 +431,14 @@ function handleSearch() {
     const searchQuery = document.getElementById('search').value;
     localStorage.setItem('searchQuery', searchQuery);
     window.location.reload();
+}
+
+function updateBrowserURL(title) {
+    const nameSlug = createNameSlug(title);
+    const newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?search_query=' + nameSlug;
+    window.history.replaceState({ path: newURL }, '', newURL);
+}
+
+function createNameSlug(title) {
+    return title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]/g, '');
 }
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/service-worker.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/service-worker.js
index 432be0d1..52e81ed2 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/service-worker.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/service-worker.js
@@ -58,6 +58,7 @@ const urlsToCache = [
     '../../images/yellow.jpg',
     'analytics.js',
     '../html/analytics.html',
+    '../html/offline.html',
 ];
 
 self.addEventListener('install', event => {
@@ -77,9 +78,10 @@ self.addEventListener('fetch', event => {
                     if (response) {
                         return response;
                     }
-                    return fetch(event.request);
-                }
-            )
+                    return fetch(event.request).catch(() => {
+                        return caches.match('../html/offline.html');
+                    });
+                })
     );
 });
 
diff --git a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/tv-details.js b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/tv-details.js
index 503f6e5a..89671864 100644
--- a/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/tv-details.js
+++ b/MovieVerse-Mobile/platforms/android/app/src/main/assets/www/MovieVerse-Frontend/js/tv-details.js
@@ -294,8 +294,6 @@ document.addEventListener("DOMContentLoaded", function() {
 });
 
 document.addEventListener("DOMContentLoaded", function() {
-    updateSignInButton();
-    initClient();
     applySettings();
 });
 
@@ -499,12 +497,16 @@ const twoLetterLangCodes = [
 
 async function fetchTvDetails(tvSeriesId) {
     const baseUrl = `https://${getMovieVerseData()}/3/tv/${tvSeriesId}`;
-    const urlWithAppend = `${baseUrl}?${generateMovieNames()}${tvCode}&append_to_response=credits,keywords,similar,videos`;
+    const urlWithAppend = `${baseUrl}?${generateMovieNames()}${tvCode}&append_to_response=credits,keywords,similar,videos,external_ids`;
+
     try {
         const response = await fetch(urlWithAppend);
         const tvSeriesDetails = await response.json();
+        const imdbId = tvSeriesDetails.external_ids.imdb_id;
+
+        const imdbRating = await fetchTVRatings(imdbId);
 
-        populateTvSeriesDetails(tvSeriesDetails);
+        populateTvSeriesDetails(tvSeriesDetails, imdbRating);
         updateBrowserURL(tvSeriesDetails.name);
     }
     catch (error) {
@@ -512,6 +514,24 @@ async function fetchTvDetails(tvSeriesId) {
     }
 }
 
+async function fetchTVRatings(imdbId) {
+    const omdbCode = `${getMovieCode2()}`;
+    const omdb = `https://${getMovieActor()}/?i=${imdbId}&${getMovieName()}${omdbCode}`;
+
+    try {
+        const response = await fetch(omdb);
+        const data = await response.json();
+
+        let imdbRating = data.imdbRating ? data.imdbRating : 'N/A';
+
+        return imdbRating;
+    }
+    catch (error) {
+        console.error('Error fetching TV series ratings:', error);
+        return 'N/A';
+    }
+}
+
 function getLanguageName(code) {
     const language = twoLetterLangCodes.find(lang => lang.code === code);
     return language ? language.name : 'Unknown Language';
@@ -522,7 +542,7 @@ function getCountryName(code) {
     return regionNames.of(code);
 }
 
-function populateTvSeriesDetails(tvSeries) {
+function populateTvSeriesDetails(tvSeries, imdbRating) {
     const title = tvSeries.name || 'Title not available';
     document.getElementById('movie-title').textContent = title;
     document.title = tvSeries.name + " - TV Series";
@@ -549,6 +569,15 @@ function populateTvSeriesDetails(tvSeries) {
     const voteCount = tvSeries.vote_count ? tvSeries.vote_count.toLocaleString() : 'N/A';
     detailsHTML += `<p><strong>User Rating:</strong> <strong>${(voteAverage / 2).toFixed(1)}/5.0</strong> (based on <strong>${voteCount}</strong> votes)</p>`;
 
+    if (tvSeries.external_ids && tvSeries.external_ids.imdb_id) {
+        const imdbId = tvSeries.external_ids.imdb_id;
+        const imdbUrl = `https://www.imdb.com/title/${imdbId}/`;
+        detailsHTML += `<p title="Click to go to this TV series' IMDB page"><strong>IMDb Rating:</strong> <strong><a id="ratingImdb" href="${imdbUrl}" target="_blank">${imdbRating}</a></strong></p>`;
+    }
+    else {
+        detailsHTML += `<p title="Click to go to this TV series' IMDB page"><strong>IMDb Rating:</strong> N/A</p>`;
+    }
+
     const homepage = tvSeries.homepage ? `<a id="homepage" href="${tvSeries.homepage}" target="_blank">Visit</a>` : 'Not available';
     detailsHTML += `<p><strong>Homepage:</strong> ${homepage}</p>`;
 
@@ -717,6 +746,21 @@ function applySettings() {
     }
 }
 
+function getMovieCode2() {
+    const encodedKey = "MmJhOGU1MzY=";
+    return atob(encodedKey);
+}
+
+function getMovieName() {
+    const moviename = "YXBpa2V5PQ==";
+    return atob(moviename);
+}
+
+function getMovieActor() {
+    const actor = "d3d3Lm9tZGJhcGkuY29t";
+    return atob(actor);
+}
+
 function applyTextColor(color) {
     document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li')
         .forEach(element => {
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 85c18478..e1b1b99f 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,5 +1,4 @@
 <!DOCTYPE html>
-
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
 
 <head>
@@ -65,13 +64,13 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <h1 id="stats-display" class="clock"></h1>
         </div>
 
-        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar (Or you can just hover on the left edge to toggle it!)" onclick="toggleNav()">
+        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
 
         <button class="back-btn nav-btn" onclick="window.location.href='index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
@@ -106,15 +105,15 @@ <h1 id="my-heading" style="margin-bottom: 5px; margin-left: 0">
         </div>
         <ul style="overflow-y: auto">
             <li><a href="MovieVerse-Frontend/html/analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="#most-popular">Most Popular</a></li>
+            <li><a href="#most-popular">Popular Worldwide</a></li>
             <li><a href="#award-winning">Award-Winning</a></li>
-            <li><a href="#hidden-gems">Hidden Gems</a></li>
             <li><a href="#director-spotlight">Director's Spotlight</a></li>
             <li><a href="#action">Action</a></li>
             <li><a href="#vietnamese">Vietnamese</a></li>
             <li><a href="#korean">Korean</a></li>
             <li><a href="#indian">Indian</a></li>
             <li><a href="#tv-series">TV Series</a></li>
+            <li><a href="#hidden-gems">Hidden Gems</a></li>
             <li><a href="#horror">Horror</a></li>
             <li><a href="#documentary">Documentary</a></li>
             <li><a href="#animation">Animation</a></li>
@@ -145,7 +144,7 @@ <h1 id="my-heading" style="margin-bottom: 5px; margin-left: 0">
     </div>
 
     <div class="genres">
-        <h2 id="search-title" style="margin-top: 35px">Most Popular: </h2>
+        <h2 id="search-title" style="margin-top: 35px; cursor: pointer">Popular Worldwide: </h2>
         <button type="button" id="button-clear" style="display: none;">Clear Search</button>
     </div>
 
@@ -156,128 +155,128 @@ <h1 id="other1"></h1>
     </div>
 
     <div class="genres">
-        <h2 style="margin-top: 35px">Award-Winning Movies:</h2>
+        <h2 style="margin-top: 35px; cursor: pointer">Award-Winning Movies:</h2>
     </div>
 
     <main id="award-winning"></main>
 
     <div class="genres" style="display: flex; justify-content: space-between; align-items: center;">
-        <h2 id="director-spotlight-title" style="margin-top: 35px">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
+        <h2 id="director-spotlight-title" style="cursor: pointer; margin-top: 35px">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
         <button id="change-director-btn" onclick="changeDirector()" style="padding: 5px 10px; cursor: pointer;">Change Director</button>
     </div>
 
     <main id="director-spotlight"></main>
 
     <div class="genres">
-        <h2 style="margin-top: 35px">Hidden Gems:</h2>
-    </div>
-
-    <main id="hidden-gems"></main>
-
-    <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ACTION</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ACTION</span> Movies: </h2>
     </div>
 
     <main id="action"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">VIETNAMESE</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">VIETNAMESE</span> Movies: </h2>
     </div>
 
     <main id="vietnamese"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">KOREAN</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">KOREAN</span> Movies: </h2>
     </div>
 
     <main id="korean"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">INDIAN</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">INDIAN</span> Movies: </h2>
     </div>
 
     <main id="indian"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">TV SERIES</span>: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">TV SERIES</span>: </h2>
     </div>
 
     <main id="tv-series"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">HORROR</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Hidden Gems:</h2>
+    </div>
+
+    <main id="hidden-gems"></main>
+
+    <div class="genres">
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">HORROR</span> Movies: </h2>
     </div>
 
     <main id="horror"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">DOCUMENTARY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">DOCUMENTARY</span> Movies: </h2>
     </div>
 
     <main id="documentary"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ANIMATED</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ANIMATED</span> Movies: </h2>
     </div>
 
     <main id="animation"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">SCIENCE FICTION</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">SCIENCE FICTION</span> Movies: </h2>
     </div>
 
     <main id="sci-fi"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ROMANTIC</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ROMANTIC</span> Movies: </h2>
     </div>
 
     <main id="romantic"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">THRILLER</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">THRILLER</span> Movies: </h2>
     </div>
 
     <main id="thriller"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">MYSTERY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">MYSTERY</span> Movies: </h2>
     </div>
 
     <main id="mystery"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ADVENTURE</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ADVENTURE</span> Movies: </h2>
     </div>
 
     <main id="adventure"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">COMEDY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">COMEDY</span> Movies: </h2>
     </div>
 
     <main id="comedy"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">FANTASY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">FANTASY</span> Movies: </h2>
     </div>
 
     <main id="fantasy"></main>
 
     <div class="genres"  >
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">FAMILY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">FAMILY</span> Movies: </h2>
     </div>
 
     <main id="family"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CRIME</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">CRIME</span> Movies: </h2>
     </div>
 
     <main id="crime"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">CLASSIC</span> Movies: </h2>
     </div>
 
     <main id="classic" style="margin-bottom: 230px"></main>
@@ -286,13 +285,13 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
         <p>© 2024 The MovieVerse. All rights reserved.</p>
     </footer>
 
+    <button id="settings-btn" style="position: fixed; bottom: 220px">Settings</button>
     <button id="movie-match-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-match.html'" title="Find movies that match your mood and preferences!" style="bottom: 185px">Movie Match</button>
     <button id="movie-timeline-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-timeline.html'" style="bottom: 150px" title="Explore movies through different eras!">Movie Timeline</button>
     <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 115px" title="Get a recommended movie to watch for today!">Recommendation</button>
     <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 80px" 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: 45px" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
-    <button id="back-to-top-btn" style="bottom: 10px" onclick="window.location.href='#homepage-header'">Back To Top</button>
-    <button id="settings-btn" style="position: fixed; bottom: 220px">Settings</button>
+    <button id="back-to-top-btn" style="bottom: 10px">Back To Top</button>
 
     <script>
         document.getElementById('settings-btn').addEventListener('click', () => {
@@ -315,7 +314,7 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
                         }
 
                         if (targetDiv) {
-                            targetDiv.scrollIntoView({behavior: 'smooth'});
+                            targetDiv.scrollIntoView({ behavior: 'smooth' });
                         }
                     }
                     else {
@@ -324,6 +323,20 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
                 });
             });
 
+            document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
+                e.preventDefault();
+
+                document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+            });
+
+            const sectionTitles = document.querySelectorAll('.genres h2');
+
+            sectionTitles.forEach(title => {
+                title.addEventListener('click', function() {
+                    this.parentElement.scrollIntoView({ behavior: 'smooth' });
+                });
+            });
+
             function applySettings() {
                 const savedBg = localStorage.getItem('backgroundImage');
                 const savedTextColor = localStorage.getItem('textColor');
@@ -405,4 +418,5 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
     </script>
 
 </body>
+
 </html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/ios/CordovaLib/CordovaLib.xcodeproj/xcuserdata/davidnguyen.xcuserdatad/xcschemes/xcschememanagement.plist b/MovieVerse-Mobile/platforms/ios/CordovaLib/CordovaLib.xcodeproj/xcuserdata/davidnguyen.xcuserdatad/xcschemes/xcschememanagement.plist
index 33ba33c2..e3071f03 100644
--- a/MovieVerse-Mobile/platforms/ios/CordovaLib/CordovaLib.xcodeproj/xcuserdata/davidnguyen.xcuserdatad/xcschemes/xcschememanagement.plist
+++ b/MovieVerse-Mobile/platforms/ios/CordovaLib/CordovaLib.xcodeproj/xcuserdata/davidnguyen.xcuserdatad/xcschemes/xcschememanagement.plist
@@ -7,12 +7,12 @@
 		<key>Cordova.xcscheme_^#shared#^_</key>
 		<dict>
 			<key>orderHint</key>
-			<integer>2</integer>
+			<integer>1</integer>
 		</dict>
 		<key>CordovaLib.xcscheme_^#shared#^_</key>
 		<dict>
 			<key>orderHint</key>
-			<integer>1</integer>
+			<integer>2</integer>
 		</dict>
 	</dict>
 </dict>
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 808d5011..cda9cc67 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/404.html b/MovieVerse-Mobile/platforms/ios/www/404.html
index 4fd8344b..12af9726 100644
--- a/MovieVerse-Mobile/platforms/ios/www/404.html
+++ b/MovieVerse-Mobile/platforms/ios/www/404.html
@@ -13,6 +13,7 @@
         .center-text {
             text-align: center;
         }
+
         .center-button {
             display: block;
             margin: 20px auto;
@@ -21,10 +22,11 @@
             border: none;
             background-color: #7378c5;
             font: inherit;
-            color: #000000;
+            color: #ffffff;
             margin-top: 40px;
             border-radius: 8px;
         }
+
         .center-button:hover {
             background-color: #ff8623;
             transition: background-color 0.3s;
@@ -197,7 +199,6 @@
     </script>
 </head>
 <body class="movie-details-body">
-    <!-- Header with buttons -->
     <header>
         <a href="index.html" style="text-decoration: none; color: inherit; cursor: pointer">
             <h1 id="my-heading" style="margin-bottom: -10px">
@@ -210,11 +211,18 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <h1 id="stats-display" class="clock"></h1>
         </div>
 
-        <button id="settings-btn" style="position: fixed; bottom: 220px">Settings</button>
         <button class="back-btn" onclick="window.location.href='index.html'" title="Go back to homepage">Home</button>
         <button class="about" onclick="window.location.href='MovieVerse-Frontend/html/about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="Go to your favorites list">Favorites</button>
-
+        <button class="favorites-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
         <form id="form1">
             <input
                     type="text"
@@ -225,11 +233,12 @@ <h1 id="stats-display" class="clock"></h1>
             <button type="button" id="button-search" onclick="handleSearch()">Search</button>
         </form>
 
-        <button id="movie-match-btn3" onclick="window.location.href='MovieVerse-Frontend/html/movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 140px">Movie Timeline</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 100px">Movie of the Day</button>
-        <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="margin-bottom: -39px" title="Engage in movie discussions">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='MovieVerse-Frontend/html/trivia.html'" style="margin-bottom: -40px" title="Test your movie knowledge">MovieVerse Trivia</button>
+        <button id="settings-btn" style="position: fixed; bottom: 185px">Settings</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 150px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px">Movie Timeline</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 80px">Recommendation</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 45px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
     <!-- Main 404 content -->
@@ -271,6 +280,45 @@ <h1 style="font-size: 50px; color: #ff8623;">404</h1>
             window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
         }
 
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'MovieVerse-Frontend/html/sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
         function updateClock() {
             var now = new Date();
             var hours = now.getHours();
@@ -326,5 +374,11 @@ <h1 style="font-size: 50px; color: #ff8623;">404</h1>
             window.location.href = 'MovieVerse-Frontend/html/search.html';
         }
     </script>
+
+    <footer style="margin-top: 400px">
+        <p>© 2024 The MovieVerse. All rights reserved.</p>
+    </footer>
+
 </body>
+
 </html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/chatbot.css b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/chatbot.css
index f48b0f60..e8a67d83 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/chatbot.css
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/chatbot.css
@@ -543,7 +543,7 @@ ol li:hover {
 
 #local-time {
     margin-top: 20px;
-    transform: translateX(15%);
+    transform: translateX(11%);
     padding: 10px;
     border-radius: 10px;
     z-index: 10;
@@ -569,7 +569,7 @@ ol li:hover {
     font-family: inherit;
     font-size: 1rem;
     padding: 0.5rem 1rem;
-    width: 250px;
+    width: 210px;
 }
 
 main {
@@ -664,7 +664,7 @@ main {
     }
 
     .about {
-        margin-left: 0px;
+        margin-left: 0;
     }
 
     .favorites-btn {
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/style.css b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/style.css
index 072827fd..53d9f101 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/style.css
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/style.css
@@ -1168,7 +1168,7 @@ p {
 }
 
 .app-btn {
-    background-color: #534caf;
+    background-color: #7378c5;
     border: 1px solid #ddd;
     border-radius: 8px;
     padding: 10px 15px;
@@ -1179,6 +1179,7 @@ p {
     display: block;
     width: auto;
     margin: 10px auto;
+    transition: 0.1s ease-in;
 }
 
 .clock {
@@ -1454,6 +1455,10 @@ p {
     margin-bottom: 20px;
 }
 
+#search-results-label:hover {
+    color: #f509d9;
+}
+
 .category-buttons button {
     background-color: #7378c5;
     font: inherit;
@@ -1463,7 +1468,7 @@ p {
     cursor: pointer;
     padding: 10px 15px;
     margin: 10px;
-    transition: 0.3s ease-in;
+    transition: 0.1s ease-in;
 }
 
 .category-buttons button:hover {
@@ -1722,6 +1727,15 @@ canvas {
     }
 }
 
+#ratingImdb {
+    color: #ff710d;
+    font-size: 17px;
+}
+
+#ratingImdb:hover {
+    color: #f509d9;
+}
+
 .chart-title {
     text-align: center;
     color: #ff710d;
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/trivia.css b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/trivia.css
index 72443323..d8a64a60 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/trivia.css
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/css/trivia.css
@@ -181,14 +181,6 @@ p {
     color: #f509d9;
 }
 
-footer {
-    text-align: center;
-    padding: 20px 0;
-    margin-top: 40px;
-    background-color: #7378c5;
-    color: white !important;
-}
-
 .button2 {
     background-color: #7378c5;
     font: inherit;
@@ -232,7 +224,7 @@ header {
     font-family: inherit;
     font-size: 1rem;
     padding: 0.5rem 1rem;
-    width: 250px;
+    width: 400px;
 }
 
 #main {
@@ -610,7 +602,6 @@ main {
     justify-content: center;
 }
 
-
 #clear-search-btn {
     display: block;
     margin: 20px auto;
@@ -654,7 +645,7 @@ main {
         cursor: pointer;
         position: absolute;
         top: 0;
-        margin-left: -200px;
+        margin-left: -180px;
         border-radius: 8px;
     }
 
@@ -672,7 +663,7 @@ main {
         cursor: pointer;
         position: absolute;
         top: 0;
-        margin-left: -20px;
+        margin-left: 0;
         border-radius: 8px;
     }
 
@@ -689,7 +680,7 @@ main {
         cursor: pointer;
         position: absolute;
         top: 0;
-        margin-left: 168px;
+        margin-left: 188px;
         border-radius: 8px;
         padding-left: 10px;
         padding-right: 10px;
@@ -734,3 +725,11 @@ main {
     border: none;
     cursor: pointer;
 }
+
+footer {
+    text-align: center;
+    padding: 20px 0;
+    margin-top: 40px;
+    background-color: #7378c5;
+    color: white !important;
+}
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 91d6a52e..d39d86a5 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/about.html
@@ -43,6 +43,7 @@
 
         gtag('config', 'G-CQKJ67FXZ4');
     </script>
+
     <style>
         #local-time {
             transform: translateX(15%);
@@ -68,7 +69,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -158,7 +159,7 @@ <h3 id="subheading">Join The Journey:</h3>
         <p style="color: white; text-align: center"><em>Thank you for being a part of The MovieVerse. For more insights and updates, connect with us on our <a style="text-decoration: underline" id="githubLink" href="https://github.com/hoangsonww/The-MovieVerse-Database">GitHub page</a>.</em></p>
 
         <h3 id="subheading">Useful Links:</h3>
-        <p style="color: white">Here are some links that you might find useful. You can explore the analytics page of our database (<strong style="text-decoration: underline">MovieVerse Analytics</strong>), read our <strong style="text-decoration: underline">terms of service</strong>, and review our <strong style="text-decoration: underline">privacy policy</strong>. Feel free to reach out to us if you have any questions or concerns.</p>
+        <p style="color: white">Here are some links that you might find useful. You can explore the analytics page of our database (<a href="analytics.html" style="color: white"><strong style="text-decoration: underline">MovieVerse Analytics</strong></a>), read our <a href="terms-of-service.html" style="color: white"><strong style="text-decoration: underline">terms of service</strong></a>, and review our <a href="privacy-policy.html" style="color: white"><strong style="text-decoration: underline">privacy policy</strong></a>. Feel free to reach out to us if you have any questions or concerns.</p>
 
         <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>
@@ -255,6 +256,7 @@ <h3 id="subheading">Useful Links:</h3>
 
         document.addEventListener("DOMContentLoaded", function() {
             updateSignInButtonState();
+            setBodyClass();
             document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
         });
 
@@ -285,9 +287,6 @@ <h3 id="subheading">Useful Links:</h3>
             }
         });
 
-        /**
-         * Rotates the user stats and movie quotes displayed in the main element.
-         */
         function rotateUserStats() {
             const stats = [
                 {
@@ -463,6 +462,19 @@ <h3 id="subheading">Useful Links:</h3>
             localStorage.setItem('searchQuery', searchQuery);
             window.location.href = 'search.html';
         }
+
+        function setBodyClass() {
+            if (window.innerWidth < 768) {
+                document.body.classList.remove('movie-details-body');
+                document.body.classList.add('movie-details-body4');
+            }
+            else {
+                document.body.classList.remove('movie-details-body4');
+                document.body.classList.add('movie-details-body');
+            }
+        }
+
+        window.addEventListener('resize', setBodyClass);
     </script>
 </body>
 </html>
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 fc6ca282..1a477c02 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
@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Actor Details</title>
+    <title>Actor Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -54,7 +54,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
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 0141ed15..86ebf17a 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/analytics.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/analytics.html
@@ -8,8 +8,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -42,7 +42,7 @@
 </head>
 <body class="movie-details-body">
     <header id="homepage-header" style="margin-top: -5px">
-        <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+        <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: 0">
             <h1 id="my-heading" style="margin-bottom: -10px">
                 The Mo<span class="highlight">vieV</span>erse
             </h1>
@@ -55,7 +55,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chatbot.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chatbot.html
index 501776c0..faf1aa9c 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chatbot.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/chatbot.html
@@ -12,8 +12,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -32,11 +32,8 @@
     <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
     <meta name="referrer" content="no-referrer-when-downgrade">
-
     <script src="../js/settings.js"></script>
-
     <link rel="manifest" href="../../manifest.json">
-
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
     <script>
         window.dataLayer = window.dataLayer || [];
@@ -45,13 +42,39 @@
 
         gtag('config', 'G-CQKJ67FXZ4');
     </script>
+    <style>
+        #header {
+            margin-top: 26px;
+            padding-left: 25px;
+        }
+
+        #form {
+            margin-top: -5px;
+            margin-right: 55px;
+        }
+
+        #local-time {
+            margin-top: 0;
+        }
+
+        @media (max-width: 800px){
+            #header {
+                margin-top: 10px;
+            }
+
+            #form {
+                margin-top: -15px;
+                margin-right: 0;
+            }
+        }
+    </style>
 </head>
 
 <body>
-    <header id="header" style="margin-top: 15px">
+    <header id="header">
         <div id="header-title">
             <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer" title="Click to go back to the home page">
-                <h1 id="my-heading" style="margin-bottom: -10px">
+                <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 10px">
                     The Mo<span class="highlight">vieV</span>erse
                 </h1>
             </a>
@@ -64,7 +87,7 @@ <h1 id="stats-display" class="clock" style="font-size: 20px"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
@@ -92,14 +115,12 @@ <h4 id="alt-title">Here, you can ask the chatbot about any movie-related topics
     </div>
 
     <main id="main">
-
         <div id="chatbotContainer">
             <div id="chatbotHeader">The MovieVerse Assistant</div>
             <div id="chatbotBody"></div>
             <input id="chatbotInput" type="text" placeholder="Ask me about anything...">
             <button id="sendButton">Send</button>
         </div>
-
     </main>
 
     <button id="alt-home-btn" onclick="window.location.href='../../index.html'">Home</button>
@@ -124,6 +145,7 @@ <h4 id="alt-title">Here, you can ask the chatbot about any movie-related topics
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
 
+
                 if (savedBg) {
                     document.body.style.backgroundImage = `url('${savedBg}')`;
                 }
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/christopher-nolan.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/christopher-nolan.html
index 75c305f7..b4f1938f 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/christopher-nolan.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/christopher-nolan.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -57,7 +57,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
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 3d04c3bd..07a185e3 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
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Company Details</title>
+    <title>Company Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/company-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -12,8 +12,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -58,7 +58,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/create-account.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/create-account.html
index fde391fa..88c71c0b 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/create-account.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/create-account.html
@@ -8,8 +8,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -117,20 +117,20 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form1">
-        <input
-                type="text"
-                id="search"
-                placeholder="Search For Anything..."
-                class="search"
-        />
-        <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-    </form>
+        <form id="form1" style="margin-top: 19px">
+            <input
+                    type="text"
+                    id="search"
+                    placeholder="Search For Anything..."
+                    class="search"
+            />
+            <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+        </form>
         <button id="settings-btn" style="position: fixed; bottom: 185px; z-index: 1000">Settings</button>
         <button id="movie-match-btn3" style="z-index: 1000; bottom: 150px" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>
         <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px; z-index: 1000">Movie Timeline</button>
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 e0941c30..17de817b 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
@@ -2,16 +2,16 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Director Details</title>
+    <title>Director Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/director-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <<meta property="og:locale" content="en_US" />
+    <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -56,7 +56,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/favorites.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/favorites.html
index 52f368c0..eeac8343 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/favorites.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/favorites.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
-    <title>Favorite Movies & Watchlists</title>
+    <title>Favorites & Watchlists - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/movie-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -12,8 +13,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -106,7 +107,8 @@
             justify-content: center;
             gap: 10px;
             margin-left: 0;
-            margin-top: 15px;
+            margin-top: 35px;
+            margin-bottom: 15px;
         }
 
         #local-time {
@@ -162,6 +164,11 @@
             display: none;
             transition: height 0.5s ease-in-out;
             margin-bottom: 240px;
+            transition: background-color 0.3s ease-in-out;
+        }
+
+        #how-to-use-section:hover {
+            background-color: #534caf;
         }
     </style>
 </head>
@@ -183,7 +190,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
@@ -196,7 +203,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
 
-        <form id="form">
+        <form id="form" style="margin-top: 5px">
             <input
                     type="text"
                     id="search"
@@ -262,12 +269,11 @@ <h2>Delete Watch Lists</h2>
 
     <div id="how-to-use-section" style="display: none; text-align: center; padding: 20px; margin-top: 20px;">
         <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
-        <p>First, in order to create a watchlist, you must have at least one favorite movie or TV series. You can add movies and TV series to your favorites by clicking the heart icon on the movie or TV series details page. Your favorites are stored in our databases and can be accessed from any device!</p>
-        <p>You can search for any movies or TV shows using the search bar at the top of the page. Once you have added some favorites, you can create a watchlist by clicking the "Create a Watch List" button.</p>
-        <p>The list of movies and TV shows in the create watchlist form will be populated with your favorite movies and TV series. You can select the movies and TV series you want to include in your watchlist and give it a name and description.</p>
-        <p>After creating a watchlist, you can edit or delete it by clicking the "Edit a Watch List" or "Delete Watch Lists" buttons respectively.</p>
-        <p>Remember that when editing a watchlist, you must first select the watchlist you want to edit from the dropdown list. You can then change the name, description, and the movies and TV series included in the watchlist. Any updates to the watchlists will be saved to your account.</p>
-        <p>Synchronize your watchlists and favorites across devices by signing in with your MovieVerse account. If you do not sign in, your created watchlists and favorites will be stored locally on your device and will be synced with your account when you sign back in.</p>
+        <p>To start creating a watchlist, add movies and TV series to your favorites by clicking the heart icon on their pages. Your favorites serve as a pool for building watchlists.</p>
+        <p>Once you have favorites, you can create a watchlist. Select items from your favorites, then name and describe your watchlist. You can later edit or delete any watchlist through the corresponding "Edit" or "Delete" options.</p>
+        <p>Editing a watchlist allows you to modify its name, description, and contents. Select the watchlist to edit from the dropdown menu, make your changes, and save them to update your watchlist.</p>
+        <p>For seamless access across devices, sign in to your MovieVerse account. This ensures your favorites and watchlists are stored in our database and can be accessed anytime, anywhere. Without signing in, your data is stored locally and will sync upon your next sign-in.</p>
+        <p><em>Note: if you sign in for the first time without any previously signed-in account, any locally stored favorites and watchlists will be replaced by your account data. To avoid losing data, consider backing it up or noting it down before signing in.</em></p>
         <p style="font-weight: bold; margin-top: 30px">Enjoy using MovieVerse Watchlists!</p>
     </div>
 
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/inception.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/inception.html
index 720c3d5a..c5638417 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/inception.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/inception.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -63,7 +63,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/leonardo-dicaprio.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
index 5ad8bfb3..d59b0c8c 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
@@ -9,8 +9,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -56,7 +56,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
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 5193382c..10a4fce8 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
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Movie Details</title>
+    <title>Movie Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/movie-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -63,7 +63,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-match.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-match.html
index 7cac9bde..1b39ad5b 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-match.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-match.html
@@ -9,8 +9,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -56,7 +56,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-timeline.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-timeline.html
index 3568bfba..b61aecf7 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-timeline.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/movie-timeline.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -55,7 +55,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/offline.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/offline.html
new file mode 100644
index 00000000..785a9766
--- /dev/null
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/offline.html
@@ -0,0 +1,382 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>You're Offline - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+
+        function rotateUserStats() {
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Your Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Your Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Your Unique Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Your Favorited Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('favorites')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Your Most Common Favorited Genre",
+                    getValue: getMostCommonGenre
+                },
+                { label: "Your Created Watchlists", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Your Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Your Unique Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Your Unique Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                {
+                    label: "Your Unique Production Companies Discovered",
+                    getValue: () => {
+                        const viewedCompanies = JSON.parse(localStorage.getItem('uniqueCompaniesViewed')) || [];
+                        return viewedCompanies.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy }
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenres = JSON.parse(localStorage.getItem('favoriteGenres')) || {};
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in favoriteGenres) {
+                if (favoriteGenres[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = favoriteGenres[genre];
+                }
+            }
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+</head>
+<body class="movie-details-body">
+<!-- Header with buttons -->
+<header>
+    <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+        <h1 id="my-heading" style="margin-bottom: -10px">
+            The Mo<span class="highlight">vieV</span>erse
+        </h1>
+    </a>
+
+    <div id="local-time" style="cursor: pointer">
+        <p id="stats-label" class="clock" style="font-size: 16px"></p>
+        <h1 id="stats-display" class="clock"></h1>
+    </div>
+
+    <button class="back-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+    <button class="about" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+    <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+    <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
+        <span id="signInOutText">Sign In</span>
+        <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+        <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+    </button>
+    <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+        <span id="profileText">Profile</span>
+        <i class="fas fa-user" id="profileIcon"></i>
+    </button>
+    <form id="form1">
+        <input
+                type="text"
+                id="search"
+                placeholder="Search For Anything..."
+                class="search"
+        />
+        <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+    </form>
+
+    <button id="settings-btn" style="position: fixed; bottom: 185px; right: 0">Settings</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 150px; right: 0">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px; right: 0">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 80px; right: 0">Recommendation</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 45px; right: 0" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 10px; right: 0" title="Test your movie knowledge">MovieVerse Trivia</button>
+</header>
+
+<div class="center-text" style="padding: 150px;">
+    <h1 style="font-size: 50px; color: #ff8623; margin-top: 20px">You're Offline</h1>
+    <p>It seems you're offline. Please check your internet connection and try again. If you're still having trouble, please contact your service provider.</p>
+    <button class="center-button" onclick="window.location.href='index.html'">Try Again</button>
+</div>
+
+<script>
+    async function showMovieOfTheDay() {
+        const year = new Date().getFullYear();
+        const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            const movies = data.results;
+
+            if (movies.length > 0) {
+                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                localStorage.setItem('selectedMovieId', randomMovie.id);
+                window.location.href = 'movie-details.html';
+            }
+            else {
+                fallbackMovieSelection();
+            }
+        }
+        catch (error) {
+            console.error('Error fetching movie:', error);
+            fallbackMovieSelection();
+        }
+    }
+
+    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 = 'MovieVerse-Frontend/html/movie-details.html';
+    }
+
+    function updateClock() {
+        var now = new Date();
+        var hours = now.getHours();
+        var minutes = now.getMinutes();
+        hours = hours < 10 ? '0' + hours : hours;
+        minutes = minutes < 10 ? '0' + minutes : minutes;
+        var timeString = hours + ':' + minutes;
+        document.getElementById('clock').innerHTML = timeString;
+    }
+
+    setInterval(updateClock, 1000);
+    window.onload = updateClock;
+
+    document.getElementById('settings-btn').addEventListener('click', () => {
+        window.location.href = 'MovieVerse-Frontend/html/settings.html';
+    });
+
+    document.addEventListener('DOMContentLoaded', () => {
+        applySettings();
+
+        function applySettings() {
+            const defaultBg = '../../images/universe-1.png';
+            const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+            const savedTextColor = localStorage.getItem('textColor');
+            const savedFontSize = localStorage.getItem('fontSize');
+            document.body.style.backgroundImage = `url('${savedBg}')`;
+
+            if (savedTextColor) {
+                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                    element.style.color = savedTextColor;
+                });
+            }
+
+            if (savedFontSize) {
+                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                document.body.style.fontSize = size;
+            }
+        }
+    });
+
+    const form = document.getElementById('form1');
+
+    form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const searchQuery = document.getElementById('search').value;
+        localStorage.setItem('searchQuery', searchQuery);
+        window.location.href = 'search.html';
+    });
+
+    function handleSearch() {
+        const searchQuery = document.getElementById('search').value;
+        localStorage.setItem('searchQuery', searchQuery);
+        window.location.href = 'search.html';
+    }
+</script>
+
+<footer style="margin-top: 400px">
+    <p>© 2024 The MovieVerse. All rights reserved.</p>
+</footer>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/privacy-policy.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/privacy-policy.html
index 581feb6f..eb3c0fe7 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/privacy-policy.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/privacy-policy.html
@@ -17,8 +17,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -85,7 +85,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
@@ -112,7 +112,7 @@ <h1 id="stats-display" class="clock"></h1>
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
-    <main class="content-area" style="text-align: center;   ">
+    <main class="content-area" style="text-align: center">
         <div style="text-align: center; width: 100vw; margin-left: 10px">
             <h1 id="privacy-header">Privacy Policy</h1>
         </div>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/reset-password.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/reset-password.html
index 72035012..d0b9ce40 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/reset-password.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/reset-password.html
@@ -11,8 +11,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -111,12 +111,13 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form1">
+
+        <form id="form1" style="margin-top: 19px">
             <input
                     type="text"
                     id="search"
@@ -125,6 +126,7 @@ <h1 id="stats-display" class="clock"></h1>
             />
             <button type="button" id="button-search" onclick="handleSearch()">Search</button>
         </form>
+
         <button id="settings-btn" style="position: fixed; bottom: 185px; z-index: 1000">Settings</button>
         <button id="movie-match-btn3" style="z-index: 1000; bottom: 150px" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>
         <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px; z-index: 1000">Movie Timeline</button>
@@ -392,6 +394,7 @@ <h2>Reset Password</h2>
             }
         }
     </script>
+
     <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
     <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
 
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/search.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/search.html
index a329beea..7dee39dc 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/search.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/search.html
@@ -6,12 +6,12 @@
     <title>Search Results - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <<meta property="og:locale" content="en_US" />
+    <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -46,7 +46,7 @@
 
 <body class="movie-details-body4">
 
-    <header style="margin-bottom: -50px; margin-top: -28px">
+    <header style="margin-bottom: -50px; margin-top: -5px">
         <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer" title="Click to go back to the home page">
             <h1 id="my-heading" style="margin-bottom: -10px">
                 The Mo<span class="highlight">vieV</span>erse
@@ -58,7 +58,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/settings.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/settings.html
index e5a43e43..6cfeffa9 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/settings.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/settings.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -170,7 +170,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -180,7 +180,7 @@ <h1 id="stats-display" class="clock"></h1>
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form">
+        <form id="form" style="margin-top: 5px">
             <input
                     type="text"
                     id="search"
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/sign-in.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/sign-in.html
index c03f5201..279ced4b 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/sign-in.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/sign-in.html
@@ -4,12 +4,12 @@
     <meta charset="UTF-8">
     <title>Sign In - The MovieVerse</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <<meta property="og:locale" content="en_US" />
+    <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -125,12 +125,12 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form1">
+        <form id="form1" style="margin-top: 19px">
             <input
                     type="text"
                     id="search"
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/terms-of-service.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/terms-of-service.html
index 5b4a39a0..65fa5d08 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/terms-of-service.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/terms-of-service.html
@@ -17,8 +17,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -86,7 +86,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/trivia.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/trivia.html
index 61604fe3..29d2a7fb 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/trivia.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/trivia.html
@@ -50,11 +50,28 @@
         label:hover {
             color: #f509d9;
         }
+
+        #my-heading {
+            margin-top: 25px;
+        }
+
+        #form {
+            margin-top: 16px;
+        }
+
+        @media (max-width: 600px) {
+            #my-heading {
+                margin-top: 10px;
+            }
+
+            #form {
+                margin-top: 0;
+            }
+        }
     </style>
 </head>
 
 <body>
-
     <header style="margin-bottom: -50px; margin-top: 10px">
         <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: 5px" title="Click to go back to the home page">
             <h1 id="my-heading" style="margin-bottom: -10px">
@@ -64,7 +81,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
@@ -83,7 +100,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
                     id="search"
                     placeholder="Search For Anything..."
                     class="search"
-                    style="width: 200px"
+                    style="width: 215px"
             />
             <button type="button" id="button-search" onclick="handleSearch()">Search</button>
         </form>
@@ -138,6 +155,7 @@ <h3>Trivia Results</h3>
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
 
+
                 if (savedBg) {
                     document.body.style.backgroundImage = `url('${savedBg}')`;
                 }
@@ -157,7 +175,5 @@ <h3>Trivia Results</h3>
     <footer>
         <p style="color: white">© 2024 The MovieVerse. All rights reserved.</p>
     </footer>
-
 </body>
-
 </html>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/tv-details.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/tv-details.html
index 0dab1880..ce41ef43 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/tv-details.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/tv-details.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>TV Details</title>
+    <title>TV Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/tv-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -62,6 +62,12 @@
         #prod-companies:hover {
             color: #f509d9;
         }
+
+        @media (max-width: 800px) {
+            .movie-description {
+                margin-top: -75px;
+            }
+        }
     </style>
 </head>
 
@@ -78,7 +84,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -111,6 +117,7 @@ <h2 id="search-title"></h2>
     <div class="details-container" id="movie-details-container">
         <!-- Left side for Title and Image -->
         <div class="movie-left">
+
             <!-- Container for Title and Favorites Button -->
             <div class="title-favorites-container">
                 <h2 id="movie-title" class="movie-header"></h2>
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/user-profile.html b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/user-profile.html
index 8afa34ac..2c99a805 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/user-profile.html
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/html/user-profile.html
@@ -11,8 +11,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -278,7 +278,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
@@ -288,7 +288,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
             <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
         </button>
-        <form id="form1">
+        <form id="form1" style="margin-top: 20px">
             <input
                     type="text"
                     id="search"
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/company-details.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/company-details.js
index 5748a209..27ff5495 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/company-details.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/company-details.js
@@ -364,6 +364,8 @@ async function fetchCompanyDetails(companyId) {
         else {
             companyWebsite.textContent = 'Website Not Available';
         }
+
+        updateBrowserURL(company.name);
     }
     catch (error) {
         console.error('Error fetching company details:', error);
@@ -747,3 +749,13 @@ function displayCompanyMovies(movies) {
         moviesList.appendChild(movieContainer);
     });
 }
+
+function updateBrowserURL(title) {
+    const nameSlug = createNameSlug(title);
+    const newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + nameSlug;
+    window.history.replaceState({ path: newURL }, '', newURL);
+}
+
+function createNameSlug(title) {
+    return title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]/g, '');
+}
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/favorites.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/favorites.js
index edc438d2..58eb3cf0 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/favorites.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/favorites.js
@@ -60,18 +60,32 @@ function generateMovieNames(input) {
     return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
 }
 
-document.getElementById('how-to-use-btn').addEventListener('click', function() {
-    var howToUseSection = document.getElementById('how-to-use-section');
-    if (howToUseSection.style.display === 'none') {
-        howToUseSection.style.display = 'block';
-        window.location.href = '#how-to-use-section';
-        document.getElementById('how-to-use-btn').textContent = 'Hide Tutorial';
+document.addEventListener('DOMContentLoaded', function() {
+    adjustButtonMargin();
+    document.getElementById('how-to-use-btn').addEventListener('click', function() {
+        let howToUseSection = document.getElementById('how-to-use-section');
+        if (howToUseSection.style.display === 'none') {
+            howToUseSection.style.display = 'block';
+            window.location.href = '#how-to-use-section';
+            document.getElementById('how-to-use-btn').textContent = 'Hide Tutorial';
+            document.getElementById('how-to-use-btn').style.marginBottom = '0';
+        } else {
+            howToUseSection.style.display = 'none';
+            document.getElementById('how-to-use-btn').textContent = 'How to Use';
+            document.getElementById('how-to-use-btn').style.marginBottom = '180px';
+        }
+    });
+});
+
+function adjustButtonMargin() {
+    let howToUseSection = document.getElementById('how-to-use-section');
+    if (howToUseSection.style.display === 'none' || !howToUseSection.style.display) {
+        document.getElementById('how-to-use-btn').style.marginBottom = '200px';
     }
     else {
-        howToUseSection.style.display = 'none';
-        document.getElementById('how-to-use-btn').textContent = 'How to Use';
+        document.getElementById('how-to-use-btn').style.marginBottom = '0';
     }
-});
+}
 
 function rotateUserStats() {
     const stats = [
@@ -1294,6 +1308,7 @@ function pinWatchList(watchlistDiv, watchlistId) {
 
     localStorage.setItem('watchlists', JSON.stringify(watchlists));
     watchlistDiv.classList.toggle('pinned');
+
     loadWatchLists();
     window.location.reload();
 }
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 ce382d89..d0fcb867 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
@@ -780,17 +780,13 @@ function getRatingDetails(rating) {
     return details;
 }
 
-function getMovieCode2() {
-    const encodedKey = "MmJhOGU1MzY=";
-    return atob(encodedKey);
-}
-
 async function fetchMovieRatings(imdbId, tmdbMovieData) {
-    const omdbApiKey = `${getMovieCode2()}`;
-    const omdbUrl = `https://www.omdbapi.com/?i=${imdbId}&apikey=${omdbApiKey}`;
+    const omdbCode = `${getMovieCode2()}`;
+    const omdb = `https://${getMovieActor()}/?i=${imdbId}&${getMovieName()}${omdbCode}`;
 
+    console.log(omdb);
     try {
-        const response = await fetch(omdbUrl);
+        const response = await fetch(omdb);
         const data = await response.json();
 
         let imdbRating = data.imdbRating ? data.imdbRating : 'N/A';
@@ -845,7 +841,7 @@ function calculateFallbackRTRating(imdbRating, tmdbRating) {
     const weightImdb = 0.8;
     const weightTmdb = 0.1;
 
-    return ((normalizedImdbRating * weightImdb) + (normalizedTmdbRating * weightTmdb)).toFixed(0) + '%'; // Calculate fallback RT rating out of 100% scale (in case data is not available from OMDB)
+    return ((normalizedImdbRating * weightImdb) + (normalizedTmdbRating * weightTmdb)).toFixed(0) + '%';
 }
 
 function calculateFallbackMetacriticsRating(imdbRating, tmdbRating) {
@@ -855,7 +851,7 @@ function calculateFallbackMetacriticsRating(imdbRating, tmdbRating) {
     const weightImdb = 0.8;
     const weightTmdb = 0.1;
 
-    return ((normalizedImdbRating * weightImdb) + (normalizedTmdbRating * weightTmdb)).toFixed(0); // Calculate fallback Metacritics rating out of 100 scale (in case data is not available from OMDB)
+    return ((normalizedImdbRating * weightImdb) + (normalizedTmdbRating * weightTmdb)).toFixed(0);
 }
 
 let trailerIframeDisplayed = false;
@@ -1026,7 +1022,7 @@ function populateMovieDetails(movie, imdbRating, rtRating, metascore, awards, ra
 
     const popularityThreshold = 80;
     const isPopular = movie.popularity >= popularityThreshold;
-    const popularityText = isPopular ? `${popularityScore} (This movie is popular)` : `${popularityScore} (This movie is unpopular)`;
+    const popularityText = isPopular ? `${popularityScore} (This movie is <strong>popular</strong>)` : `${popularityScore} (This movie is <strong>unpopular</strong>)`;
 
     const adultContentIndicator = movie.adult
         ? `<span class="adult-indicator">Adult Content</span>`
@@ -1189,6 +1185,21 @@ function updateMoviesFavorited(movieId) {
     }
 }
 
+function getMovieCode2() {
+    const codeOfMovie = "MmJhOGU1MzY=";
+    return atob(codeOfMovie);
+}
+
+function getMovieName() {
+    const moviename = "YXBpa2V5PQ==";
+    return atob(moviename);
+}
+
+function getMovieActor() {
+    const actor = "d3d3Lm9tZGJhcGkuY29t";
+    return atob(actor);
+}
+
 function updateAverageMovieRating(movieId, newRating) {
     const savedRatings = JSON.parse(localStorage.getItem('movieRatings')) || {};
 
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/search.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/search.js
index 1bb9e4e4..4caf4efb 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/search.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/search.js
@@ -236,12 +236,14 @@ async function showResults(category) {
         const response = await fetch(movieUrl);
         const data = await response.json();
         const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-        displayResults(sortedResults, category);
+        displayResults(sortedResults, category, searchQuery);
     }
     catch (error) {
         console.error('Error fetching search results:', error);
         document.querySelector('.movie-match-container1').innerHTML = '<p>Error fetching results. Please try again later.</p>';
     }
+
+    updateBrowserURL(searchQuery);
 }
 
 document.querySelector('button[onclick="showResults(\'movie\')"]').addEventListener('click', function() {
@@ -282,12 +284,14 @@ function updateCategoryButtonStyles(selectedCategory) {
     }
 }
 
-function displayResults(results, category) {
+function displayResults(results, category, searchTerm) {
     const container = document.getElementById('movie-match-container1');
     container.innerHTML = '';
 
+    const capitalizedCategory = category.charAt(0).toUpperCase() + category.slice(1);
+
     if (results.length === 0) {
-        container.innerHTML = `<p>No results found for ${category}. Please try again.</p>`;
+        container.innerHTML = `<p>No results found for "${searchTerm}" in the ${capitalizedCategory} category. Please try again with a different query.</p>`;
         return;
     }
     showMovies(results, container, category);
@@ -427,4 +431,14 @@ function handleSearch() {
     const searchQuery = document.getElementById('search').value;
     localStorage.setItem('searchQuery', searchQuery);
     window.location.reload();
+}
+
+function updateBrowserURL(title) {
+    const nameSlug = createNameSlug(title);
+    const newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?search_query=' + nameSlug;
+    window.history.replaceState({ path: newURL }, '', newURL);
+}
+
+function createNameSlug(title) {
+    return title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]/g, '');
 }
\ No newline at end of file
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/service-worker.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/service-worker.js
index 432be0d1..52e81ed2 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/service-worker.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/service-worker.js
@@ -58,6 +58,7 @@ const urlsToCache = [
     '../../images/yellow.jpg',
     'analytics.js',
     '../html/analytics.html',
+    '../html/offline.html',
 ];
 
 self.addEventListener('install', event => {
@@ -77,9 +78,10 @@ self.addEventListener('fetch', event => {
                     if (response) {
                         return response;
                     }
-                    return fetch(event.request);
-                }
-            )
+                    return fetch(event.request).catch(() => {
+                        return caches.match('../html/offline.html');
+                    });
+                })
     );
 });
 
diff --git a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/tv-details.js b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/tv-details.js
index 503f6e5a..89671864 100644
--- a/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/tv-details.js
+++ b/MovieVerse-Mobile/platforms/ios/www/MovieVerse-Frontend/js/tv-details.js
@@ -294,8 +294,6 @@ document.addEventListener("DOMContentLoaded", function() {
 });
 
 document.addEventListener("DOMContentLoaded", function() {
-    updateSignInButton();
-    initClient();
     applySettings();
 });
 
@@ -499,12 +497,16 @@ const twoLetterLangCodes = [
 
 async function fetchTvDetails(tvSeriesId) {
     const baseUrl = `https://${getMovieVerseData()}/3/tv/${tvSeriesId}`;
-    const urlWithAppend = `${baseUrl}?${generateMovieNames()}${tvCode}&append_to_response=credits,keywords,similar,videos`;
+    const urlWithAppend = `${baseUrl}?${generateMovieNames()}${tvCode}&append_to_response=credits,keywords,similar,videos,external_ids`;
+
     try {
         const response = await fetch(urlWithAppend);
         const tvSeriesDetails = await response.json();
+        const imdbId = tvSeriesDetails.external_ids.imdb_id;
+
+        const imdbRating = await fetchTVRatings(imdbId);
 
-        populateTvSeriesDetails(tvSeriesDetails);
+        populateTvSeriesDetails(tvSeriesDetails, imdbRating);
         updateBrowserURL(tvSeriesDetails.name);
     }
     catch (error) {
@@ -512,6 +514,24 @@ async function fetchTvDetails(tvSeriesId) {
     }
 }
 
+async function fetchTVRatings(imdbId) {
+    const omdbCode = `${getMovieCode2()}`;
+    const omdb = `https://${getMovieActor()}/?i=${imdbId}&${getMovieName()}${omdbCode}`;
+
+    try {
+        const response = await fetch(omdb);
+        const data = await response.json();
+
+        let imdbRating = data.imdbRating ? data.imdbRating : 'N/A';
+
+        return imdbRating;
+    }
+    catch (error) {
+        console.error('Error fetching TV series ratings:', error);
+        return 'N/A';
+    }
+}
+
 function getLanguageName(code) {
     const language = twoLetterLangCodes.find(lang => lang.code === code);
     return language ? language.name : 'Unknown Language';
@@ -522,7 +542,7 @@ function getCountryName(code) {
     return regionNames.of(code);
 }
 
-function populateTvSeriesDetails(tvSeries) {
+function populateTvSeriesDetails(tvSeries, imdbRating) {
     const title = tvSeries.name || 'Title not available';
     document.getElementById('movie-title').textContent = title;
     document.title = tvSeries.name + " - TV Series";
@@ -549,6 +569,15 @@ function populateTvSeriesDetails(tvSeries) {
     const voteCount = tvSeries.vote_count ? tvSeries.vote_count.toLocaleString() : 'N/A';
     detailsHTML += `<p><strong>User Rating:</strong> <strong>${(voteAverage / 2).toFixed(1)}/5.0</strong> (based on <strong>${voteCount}</strong> votes)</p>`;
 
+    if (tvSeries.external_ids && tvSeries.external_ids.imdb_id) {
+        const imdbId = tvSeries.external_ids.imdb_id;
+        const imdbUrl = `https://www.imdb.com/title/${imdbId}/`;
+        detailsHTML += `<p title="Click to go to this TV series' IMDB page"><strong>IMDb Rating:</strong> <strong><a id="ratingImdb" href="${imdbUrl}" target="_blank">${imdbRating}</a></strong></p>`;
+    }
+    else {
+        detailsHTML += `<p title="Click to go to this TV series' IMDB page"><strong>IMDb Rating:</strong> N/A</p>`;
+    }
+
     const homepage = tvSeries.homepage ? `<a id="homepage" href="${tvSeries.homepage}" target="_blank">Visit</a>` : 'Not available';
     detailsHTML += `<p><strong>Homepage:</strong> ${homepage}</p>`;
 
@@ -717,6 +746,21 @@ function applySettings() {
     }
 }
 
+function getMovieCode2() {
+    const encodedKey = "MmJhOGU1MzY=";
+    return atob(encodedKey);
+}
+
+function getMovieName() {
+    const moviename = "YXBpa2V5PQ==";
+    return atob(moviename);
+}
+
+function getMovieActor() {
+    const actor = "d3d3Lm9tZGJhcGkuY29t";
+    return atob(actor);
+}
+
 function applyTextColor(color) {
     document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li')
         .forEach(element => {
diff --git a/MovieVerse-Mobile/platforms/ios/www/index.html b/MovieVerse-Mobile/platforms/ios/www/index.html
index 85c18478..e1b1b99f 100644
--- a/MovieVerse-Mobile/platforms/ios/www/index.html
+++ b/MovieVerse-Mobile/platforms/ios/www/index.html
@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
 
 <head>
@@ -65,13 +64,13 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <h1 id="stats-display" class="clock"></h1>
         </div>
 
-        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar (Or you can just hover on the left edge to toggle it!)" onclick="toggleNav()">
+        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
 
         <button class="back-btn nav-btn" onclick="window.location.href='index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
@@ -106,15 +105,15 @@ <h1 id="my-heading" style="margin-bottom: 5px; margin-left: 0">
         </div>
         <ul style="overflow-y: auto">
             <li><a href="MovieVerse-Frontend/html/analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="#most-popular">Most Popular</a></li>
+            <li><a href="#most-popular">Popular Worldwide</a></li>
             <li><a href="#award-winning">Award-Winning</a></li>
-            <li><a href="#hidden-gems">Hidden Gems</a></li>
             <li><a href="#director-spotlight">Director's Spotlight</a></li>
             <li><a href="#action">Action</a></li>
             <li><a href="#vietnamese">Vietnamese</a></li>
             <li><a href="#korean">Korean</a></li>
             <li><a href="#indian">Indian</a></li>
             <li><a href="#tv-series">TV Series</a></li>
+            <li><a href="#hidden-gems">Hidden Gems</a></li>
             <li><a href="#horror">Horror</a></li>
             <li><a href="#documentary">Documentary</a></li>
             <li><a href="#animation">Animation</a></li>
@@ -145,7 +144,7 @@ <h1 id="my-heading" style="margin-bottom: 5px; margin-left: 0">
     </div>
 
     <div class="genres">
-        <h2 id="search-title" style="margin-top: 35px">Most Popular: </h2>
+        <h2 id="search-title" style="margin-top: 35px; cursor: pointer">Popular Worldwide: </h2>
         <button type="button" id="button-clear" style="display: none;">Clear Search</button>
     </div>
 
@@ -156,128 +155,128 @@ <h1 id="other1"></h1>
     </div>
 
     <div class="genres">
-        <h2 style="margin-top: 35px">Award-Winning Movies:</h2>
+        <h2 style="margin-top: 35px; cursor: pointer">Award-Winning Movies:</h2>
     </div>
 
     <main id="award-winning"></main>
 
     <div class="genres" style="display: flex; justify-content: space-between; align-items: center;">
-        <h2 id="director-spotlight-title" style="margin-top: 35px">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
+        <h2 id="director-spotlight-title" style="cursor: pointer; margin-top: 35px">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
         <button id="change-director-btn" onclick="changeDirector()" style="padding: 5px 10px; cursor: pointer;">Change Director</button>
     </div>
 
     <main id="director-spotlight"></main>
 
     <div class="genres">
-        <h2 style="margin-top: 35px">Hidden Gems:</h2>
-    </div>
-
-    <main id="hidden-gems"></main>
-
-    <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ACTION</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ACTION</span> Movies: </h2>
     </div>
 
     <main id="action"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">VIETNAMESE</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">VIETNAMESE</span> Movies: </h2>
     </div>
 
     <main id="vietnamese"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">KOREAN</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">KOREAN</span> Movies: </h2>
     </div>
 
     <main id="korean"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">INDIAN</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">INDIAN</span> Movies: </h2>
     </div>
 
     <main id="indian"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">TV SERIES</span>: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">TV SERIES</span>: </h2>
     </div>
 
     <main id="tv-series"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">HORROR</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Hidden Gems:</h2>
+    </div>
+
+    <main id="hidden-gems"></main>
+
+    <div class="genres">
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">HORROR</span> Movies: </h2>
     </div>
 
     <main id="horror"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">DOCUMENTARY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">DOCUMENTARY</span> Movies: </h2>
     </div>
 
     <main id="documentary"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ANIMATED</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ANIMATED</span> Movies: </h2>
     </div>
 
     <main id="animation"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">SCIENCE FICTION</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">SCIENCE FICTION</span> Movies: </h2>
     </div>
 
     <main id="sci-fi"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ROMANTIC</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ROMANTIC</span> Movies: </h2>
     </div>
 
     <main id="romantic"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">THRILLER</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">THRILLER</span> Movies: </h2>
     </div>
 
     <main id="thriller"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">MYSTERY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">MYSTERY</span> Movies: </h2>
     </div>
 
     <main id="mystery"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ADVENTURE</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ADVENTURE</span> Movies: </h2>
     </div>
 
     <main id="adventure"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">COMEDY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">COMEDY</span> Movies: </h2>
     </div>
 
     <main id="comedy"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">FANTASY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">FANTASY</span> Movies: </h2>
     </div>
 
     <main id="fantasy"></main>
 
     <div class="genres"  >
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">FAMILY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">FAMILY</span> Movies: </h2>
     </div>
 
     <main id="family"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CRIME</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">CRIME</span> Movies: </h2>
     </div>
 
     <main id="crime"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">CLASSIC</span> Movies: </h2>
     </div>
 
     <main id="classic" style="margin-bottom: 230px"></main>
@@ -286,13 +285,13 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
         <p>© 2024 The MovieVerse. All rights reserved.</p>
     </footer>
 
+    <button id="settings-btn" style="position: fixed; bottom: 220px">Settings</button>
     <button id="movie-match-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-match.html'" title="Find movies that match your mood and preferences!" style="bottom: 185px">Movie Match</button>
     <button id="movie-timeline-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-timeline.html'" style="bottom: 150px" title="Explore movies through different eras!">Movie Timeline</button>
     <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 115px" title="Get a recommended movie to watch for today!">Recommendation</button>
     <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 80px" 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: 45px" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
-    <button id="back-to-top-btn" style="bottom: 10px" onclick="window.location.href='#homepage-header'">Back To Top</button>
-    <button id="settings-btn" style="position: fixed; bottom: 220px">Settings</button>
+    <button id="back-to-top-btn" style="bottom: 10px">Back To Top</button>
 
     <script>
         document.getElementById('settings-btn').addEventListener('click', () => {
@@ -315,7 +314,7 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
                         }
 
                         if (targetDiv) {
-                            targetDiv.scrollIntoView({behavior: 'smooth'});
+                            targetDiv.scrollIntoView({ behavior: 'smooth' });
                         }
                     }
                     else {
@@ -324,6 +323,20 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
                 });
             });
 
+            document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
+                e.preventDefault();
+
+                document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+            });
+
+            const sectionTitles = document.querySelectorAll('.genres h2');
+
+            sectionTitles.forEach(title => {
+                title.addEventListener('click', function() {
+                    this.parentElement.scrollIntoView({ behavior: 'smooth' });
+                });
+            });
+
             function applySettings() {
                 const savedBg = localStorage.getItem('backgroundImage');
                 const savedTextColor = localStorage.getItem('textColor');
@@ -405,4 +418,5 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
     </script>
 
 </body>
+
 </html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/www/404.html b/MovieVerse-Mobile/www/404.html
index 4fd8344b..12af9726 100644
--- a/MovieVerse-Mobile/www/404.html
+++ b/MovieVerse-Mobile/www/404.html
@@ -13,6 +13,7 @@
         .center-text {
             text-align: center;
         }
+
         .center-button {
             display: block;
             margin: 20px auto;
@@ -21,10 +22,11 @@
             border: none;
             background-color: #7378c5;
             font: inherit;
-            color: #000000;
+            color: #ffffff;
             margin-top: 40px;
             border-radius: 8px;
         }
+
         .center-button:hover {
             background-color: #ff8623;
             transition: background-color 0.3s;
@@ -197,7 +199,6 @@
     </script>
 </head>
 <body class="movie-details-body">
-    <!-- Header with buttons -->
     <header>
         <a href="index.html" style="text-decoration: none; color: inherit; cursor: pointer">
             <h1 id="my-heading" style="margin-bottom: -10px">
@@ -210,11 +211,18 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <h1 id="stats-display" class="clock"></h1>
         </div>
 
-        <button id="settings-btn" style="position: fixed; bottom: 220px">Settings</button>
         <button class="back-btn" onclick="window.location.href='index.html'" title="Go back to homepage">Home</button>
         <button class="about" onclick="window.location.href='MovieVerse-Frontend/html/about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="Go to your favorites list">Favorites</button>
-
+        <button class="favorites-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
+        <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
+            <span id="signInOutText">Sign In</span>
+            <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+            <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+        </button>
+        <button id="profileBtn" class="nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
+            <span id="profileText">Profile</span>
+            <i class="fas fa-user" id="profileIcon"></i>
+        </button>
         <form id="form1">
             <input
                     type="text"
@@ -225,11 +233,12 @@ <h1 id="stats-display" class="clock"></h1>
             <button type="button" id="button-search" onclick="handleSearch()">Search</button>
         </form>
 
-        <button id="movie-match-btn3" onclick="window.location.href='MovieVerse-Frontend/html/movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>
-        <button id="movie-timeline-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 140px">Movie Timeline</button>
-        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 100px">Movie of the Day</button>
-        <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="margin-bottom: -39px" title="Engage in movie discussions">MovieVerse Chatbot</button>
-        <button id="trivia-btn" onclick="window.location.href='MovieVerse-Frontend/html/trivia.html'" style="margin-bottom: -40px" title="Test your movie knowledge">MovieVerse Trivia</button>
+        <button id="settings-btn" style="position: fixed; bottom: 185px">Settings</button>
+        <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 150px">Movie Match</button>
+        <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px">Movie Timeline</button>
+        <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 80px">Recommendation</button>
+        <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 45px" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+        <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
     <!-- Main 404 content -->
@@ -271,6 +280,45 @@ <h1 style="font-size: 50px; color: #ff8623;">404</h1>
             window.location.href = 'MovieVerse-Frontend/html/movie-details.html';
         }
 
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'MovieVerse-Frontend/html/sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
         function updateClock() {
             var now = new Date();
             var hours = now.getHours();
@@ -326,5 +374,11 @@ <h1 style="font-size: 50px; color: #ff8623;">404</h1>
             window.location.href = 'MovieVerse-Frontend/html/search.html';
         }
     </script>
+
+    <footer style="margin-top: 400px">
+        <p>© 2024 The MovieVerse. All rights reserved.</p>
+    </footer>
+
 </body>
+
 </html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/css/chatbot.css b/MovieVerse-Mobile/www/MovieVerse-Frontend/css/chatbot.css
index f48b0f60..e8a67d83 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/css/chatbot.css
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/css/chatbot.css
@@ -543,7 +543,7 @@ ol li:hover {
 
 #local-time {
     margin-top: 20px;
-    transform: translateX(15%);
+    transform: translateX(11%);
     padding: 10px;
     border-radius: 10px;
     z-index: 10;
@@ -569,7 +569,7 @@ ol li:hover {
     font-family: inherit;
     font-size: 1rem;
     padding: 0.5rem 1rem;
-    width: 250px;
+    width: 210px;
 }
 
 main {
@@ -664,7 +664,7 @@ main {
     }
 
     .about {
-        margin-left: 0px;
+        margin-left: 0;
     }
 
     .favorites-btn {
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/css/style.css b/MovieVerse-Mobile/www/MovieVerse-Frontend/css/style.css
index 072827fd..53d9f101 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/css/style.css
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/css/style.css
@@ -1168,7 +1168,7 @@ p {
 }
 
 .app-btn {
-    background-color: #534caf;
+    background-color: #7378c5;
     border: 1px solid #ddd;
     border-radius: 8px;
     padding: 10px 15px;
@@ -1179,6 +1179,7 @@ p {
     display: block;
     width: auto;
     margin: 10px auto;
+    transition: 0.1s ease-in;
 }
 
 .clock {
@@ -1454,6 +1455,10 @@ p {
     margin-bottom: 20px;
 }
 
+#search-results-label:hover {
+    color: #f509d9;
+}
+
 .category-buttons button {
     background-color: #7378c5;
     font: inherit;
@@ -1463,7 +1468,7 @@ p {
     cursor: pointer;
     padding: 10px 15px;
     margin: 10px;
-    transition: 0.3s ease-in;
+    transition: 0.1s ease-in;
 }
 
 .category-buttons button:hover {
@@ -1722,6 +1727,15 @@ canvas {
     }
 }
 
+#ratingImdb {
+    color: #ff710d;
+    font-size: 17px;
+}
+
+#ratingImdb:hover {
+    color: #f509d9;
+}
+
 .chart-title {
     text-align: center;
     color: #ff710d;
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/css/trivia.css b/MovieVerse-Mobile/www/MovieVerse-Frontend/css/trivia.css
index 72443323..d8a64a60 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/css/trivia.css
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/css/trivia.css
@@ -181,14 +181,6 @@ p {
     color: #f509d9;
 }
 
-footer {
-    text-align: center;
-    padding: 20px 0;
-    margin-top: 40px;
-    background-color: #7378c5;
-    color: white !important;
-}
-
 .button2 {
     background-color: #7378c5;
     font: inherit;
@@ -232,7 +224,7 @@ header {
     font-family: inherit;
     font-size: 1rem;
     padding: 0.5rem 1rem;
-    width: 250px;
+    width: 400px;
 }
 
 #main {
@@ -610,7 +602,6 @@ main {
     justify-content: center;
 }
 
-
 #clear-search-btn {
     display: block;
     margin: 20px auto;
@@ -654,7 +645,7 @@ main {
         cursor: pointer;
         position: absolute;
         top: 0;
-        margin-left: -200px;
+        margin-left: -180px;
         border-radius: 8px;
     }
 
@@ -672,7 +663,7 @@ main {
         cursor: pointer;
         position: absolute;
         top: 0;
-        margin-left: -20px;
+        margin-left: 0;
         border-radius: 8px;
     }
 
@@ -689,7 +680,7 @@ main {
         cursor: pointer;
         position: absolute;
         top: 0;
-        margin-left: 168px;
+        margin-left: 188px;
         border-radius: 8px;
         padding-left: 10px;
         padding-right: 10px;
@@ -734,3 +725,11 @@ main {
     border: none;
     cursor: pointer;
 }
+
+footer {
+    text-align: center;
+    padding: 20px 0;
+    margin-top: 40px;
+    background-color: #7378c5;
+    color: white !important;
+}
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html
index 91d6a52e..d39d86a5 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/about.html
@@ -43,6 +43,7 @@
 
         gtag('config', 'G-CQKJ67FXZ4');
     </script>
+
     <style>
         #local-time {
             transform: translateX(15%);
@@ -68,7 +69,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -158,7 +159,7 @@ <h3 id="subheading">Join The Journey:</h3>
         <p style="color: white; text-align: center"><em>Thank you for being a part of The MovieVerse. For more insights and updates, connect with us on our <a style="text-decoration: underline" id="githubLink" href="https://github.com/hoangsonww/The-MovieVerse-Database">GitHub page</a>.</em></p>
 
         <h3 id="subheading">Useful Links:</h3>
-        <p style="color: white">Here are some links that you might find useful. You can explore the analytics page of our database (<strong style="text-decoration: underline">MovieVerse Analytics</strong>), read our <strong style="text-decoration: underline">terms of service</strong>, and review our <strong style="text-decoration: underline">privacy policy</strong>. Feel free to reach out to us if you have any questions or concerns.</p>
+        <p style="color: white">Here are some links that you might find useful. You can explore the analytics page of our database (<a href="analytics.html" style="color: white"><strong style="text-decoration: underline">MovieVerse Analytics</strong></a>), read our <a href="terms-of-service.html" style="color: white"><strong style="text-decoration: underline">terms of service</strong></a>, and review our <a href="privacy-policy.html" style="color: white"><strong style="text-decoration: underline">privacy policy</strong></a>. Feel free to reach out to us if you have any questions or concerns.</p>
 
         <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>
@@ -255,6 +256,7 @@ <h3 id="subheading">Useful Links:</h3>
 
         document.addEventListener("DOMContentLoaded", function() {
             updateSignInButtonState();
+            setBodyClass();
             document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
         });
 
@@ -285,9 +287,6 @@ <h3 id="subheading">Useful Links:</h3>
             }
         });
 
-        /**
-         * Rotates the user stats and movie quotes displayed in the main element.
-         */
         function rotateUserStats() {
             const stats = [
                 {
@@ -463,6 +462,19 @@ <h3 id="subheading">Useful Links:</h3>
             localStorage.setItem('searchQuery', searchQuery);
             window.location.href = 'search.html';
         }
+
+        function setBodyClass() {
+            if (window.innerWidth < 768) {
+                document.body.classList.remove('movie-details-body');
+                document.body.classList.add('movie-details-body4');
+            }
+            else {
+                document.body.classList.remove('movie-details-body4');
+                document.body.classList.add('movie-details-body');
+            }
+        }
+
+        window.addEventListener('resize', setBodyClass);
     </script>
 </body>
 </html>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html
index fc6ca282..1a477c02 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/actor-details.html
@@ -2,15 +2,15 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Actor Details</title>
+    <title>Actor Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -54,7 +54,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html
index 0141ed15..86ebf17a 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/analytics.html
@@ -8,8 +8,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -42,7 +42,7 @@
 </head>
 <body class="movie-details-body">
     <header id="homepage-header" style="margin-top: -5px">
-        <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+        <a id="indexLink" href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: 0">
             <h1 id="my-heading" style="margin-bottom: -10px">
                 The Mo<span class="highlight">vieV</span>erse
             </h1>
@@ -55,7 +55,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chatbot.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chatbot.html
index 501776c0..faf1aa9c 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chatbot.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/chatbot.html
@@ -12,8 +12,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -32,11 +32,8 @@
     <meta name="twitter:image" content="https://movie-verse.com/images/image.png"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
     <meta name="referrer" content="no-referrer-when-downgrade">
-
     <script src="../js/settings.js"></script>
-
     <link rel="manifest" href="../../manifest.json">
-
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
     <script>
         window.dataLayer = window.dataLayer || [];
@@ -45,13 +42,39 @@
 
         gtag('config', 'G-CQKJ67FXZ4');
     </script>
+    <style>
+        #header {
+            margin-top: 26px;
+            padding-left: 25px;
+        }
+
+        #form {
+            margin-top: -5px;
+            margin-right: 55px;
+        }
+
+        #local-time {
+            margin-top: 0;
+        }
+
+        @media (max-width: 800px){
+            #header {
+                margin-top: 10px;
+            }
+
+            #form {
+                margin-top: -15px;
+                margin-right: 0;
+            }
+        }
+    </style>
 </head>
 
 <body>
-    <header id="header" style="margin-top: 15px">
+    <header id="header">
         <div id="header-title">
             <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer" title="Click to go back to the home page">
-                <h1 id="my-heading" style="margin-bottom: -10px">
+                <h1 id="my-heading" style="margin-bottom: -10px; margin-top: 10px">
                     The Mo<span class="highlight">vieV</span>erse
                 </h1>
             </a>
@@ -64,7 +87,7 @@ <h1 id="stats-display" class="clock" style="font-size: 20px"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
@@ -92,14 +115,12 @@ <h4 id="alt-title">Here, you can ask the chatbot about any movie-related topics
     </div>
 
     <main id="main">
-
         <div id="chatbotContainer">
             <div id="chatbotHeader">The MovieVerse Assistant</div>
             <div id="chatbotBody"></div>
             <input id="chatbotInput" type="text" placeholder="Ask me about anything...">
             <button id="sendButton">Send</button>
         </div>
-
     </main>
 
     <button id="alt-home-btn" onclick="window.location.href='../../index.html'">Home</button>
@@ -124,6 +145,7 @@ <h4 id="alt-title">Here, you can ask the chatbot about any movie-related topics
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
 
+
                 if (savedBg) {
                     document.body.style.backgroundImage = `url('${savedBg}')`;
                 }
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/christopher-nolan.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/christopher-nolan.html
index 75c305f7..b4f1938f 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/christopher-nolan.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/christopher-nolan.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -57,7 +57,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html
index 3d04c3bd..07a185e3 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/company-details.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Company Details</title>
+    <title>Company Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/company-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -12,8 +12,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -58,7 +58,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/create-account.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/create-account.html
index fde391fa..88c71c0b 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/create-account.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/create-account.html
@@ -8,8 +8,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -117,20 +117,20 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form1">
-        <input
-                type="text"
-                id="search"
-                placeholder="Search For Anything..."
-                class="search"
-        />
-        <button type="button" id="button-search" onclick="handleSearch()">Search</button>
-    </form>
+        <form id="form1" style="margin-top: 19px">
+            <input
+                    type="text"
+                    id="search"
+                    placeholder="Search For Anything..."
+                    class="search"
+            />
+            <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+        </form>
         <button id="settings-btn" style="position: fixed; bottom: 185px; z-index: 1000">Settings</button>
         <button id="movie-match-btn3" style="z-index: 1000; bottom: 150px" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>
         <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px; z-index: 1000">Movie Timeline</button>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html
index e0941c30..17de817b 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/director-details.html
@@ -2,16 +2,16 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Director Details</title>
+    <title>Director Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/director-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <<meta property="og:locale" content="en_US" />
+    <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -56,7 +56,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/favorites.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/favorites.html
index 52f368c0..eeac8343 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/favorites.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/favorites.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
-    <title>Favorite Movies & Watchlists</title>
+    <title>Favorites & Watchlists - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/movie-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -12,8 +13,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -106,7 +107,8 @@
             justify-content: center;
             gap: 10px;
             margin-left: 0;
-            margin-top: 15px;
+            margin-top: 35px;
+            margin-bottom: 15px;
         }
 
         #local-time {
@@ -162,6 +164,11 @@
             display: none;
             transition: height 0.5s ease-in-out;
             margin-bottom: 240px;
+            transition: background-color 0.3s ease-in-out;
+        }
+
+        #how-to-use-section:hover {
+            background-color: #534caf;
         }
     </style>
 </head>
@@ -183,7 +190,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
@@ -196,7 +203,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
 
-        <form id="form">
+        <form id="form" style="margin-top: 5px">
             <input
                     type="text"
                     id="search"
@@ -262,12 +269,11 @@ <h2>Delete Watch Lists</h2>
 
     <div id="how-to-use-section" style="display: none; text-align: center; padding: 20px; margin-top: 20px;">
         <h4 style="color: white">How to Use MovieVerse Watchlists</h4>
-        <p>First, in order to create a watchlist, you must have at least one favorite movie or TV series. You can add movies and TV series to your favorites by clicking the heart icon on the movie or TV series details page. Your favorites are stored in our databases and can be accessed from any device!</p>
-        <p>You can search for any movies or TV shows using the search bar at the top of the page. Once you have added some favorites, you can create a watchlist by clicking the "Create a Watch List" button.</p>
-        <p>The list of movies and TV shows in the create watchlist form will be populated with your favorite movies and TV series. You can select the movies and TV series you want to include in your watchlist and give it a name and description.</p>
-        <p>After creating a watchlist, you can edit or delete it by clicking the "Edit a Watch List" or "Delete Watch Lists" buttons respectively.</p>
-        <p>Remember that when editing a watchlist, you must first select the watchlist you want to edit from the dropdown list. You can then change the name, description, and the movies and TV series included in the watchlist. Any updates to the watchlists will be saved to your account.</p>
-        <p>Synchronize your watchlists and favorites across devices by signing in with your MovieVerse account. If you do not sign in, your created watchlists and favorites will be stored locally on your device and will be synced with your account when you sign back in.</p>
+        <p>To start creating a watchlist, add movies and TV series to your favorites by clicking the heart icon on their pages. Your favorites serve as a pool for building watchlists.</p>
+        <p>Once you have favorites, you can create a watchlist. Select items from your favorites, then name and describe your watchlist. You can later edit or delete any watchlist through the corresponding "Edit" or "Delete" options.</p>
+        <p>Editing a watchlist allows you to modify its name, description, and contents. Select the watchlist to edit from the dropdown menu, make your changes, and save them to update your watchlist.</p>
+        <p>For seamless access across devices, sign in to your MovieVerse account. This ensures your favorites and watchlists are stored in our database and can be accessed anytime, anywhere. Without signing in, your data is stored locally and will sync upon your next sign-in.</p>
+        <p><em>Note: if you sign in for the first time without any previously signed-in account, any locally stored favorites and watchlists will be replaced by your account data. To avoid losing data, consider backing it up or noting it down before signing in.</em></p>
         <p style="font-weight: bold; margin-top: 30px">Enjoy using MovieVerse Watchlists!</p>
     </div>
 
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/inception.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/inception.html
index 720c3d5a..c5638417 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/inception.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/inception.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -63,7 +63,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/leonardo-dicaprio.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
index 5ad8bfb3..d59b0c8c 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/leonardo-dicaprio.html
@@ -9,8 +9,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -56,7 +56,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
index 5193382c..10a4fce8 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-details.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Movie Details</title>
+    <title>Movie Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/movie-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -63,7 +63,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-match.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-match.html
index 7cac9bde..1b39ad5b 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-match.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-match.html
@@ -9,8 +9,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -56,7 +56,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-timeline.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-timeline.html
index 3568bfba..b61aecf7 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-timeline.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/movie-timeline.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -55,7 +55,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/offline.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/offline.html
new file mode 100644
index 00000000..785a9766
--- /dev/null
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/offline.html
@@ -0,0 +1,382 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>You're Offline - The MovieVerse</title>
+    <link rel="stylesheet" href="../css/style.css"/>
+    <link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <meta name="theme-color" content="#7378c5">
+    <link rel="manifest" href="../../manifest.json">
+    <style>
+        .center-text {
+            text-align: center;
+        }
+        .center-button {
+            display: block;
+            margin: 20px auto;
+            padding: 5px 10px;
+            cursor: pointer;
+            border: none;
+            background-color: #7378c5;
+            font: inherit;
+            color: #000000;
+            margin-top: 40px;
+            border-radius: 8px;
+        }
+        .center-button:hover {
+            background-color: #ff8623;
+            transition: background-color 0.3s;
+        }
+    </style>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CQKJ67FXZ4"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-CQKJ67FXZ4');
+
+        function rotateUserStats() {
+            const stats = [
+                {
+                    label: "Your Current Time",
+                    getValue: () => {
+                        const now = new Date();
+                        let hours = now.getHours();
+                        let minutes = now.getMinutes();
+                        hours = hours < 10 ? '0' + hours : hours;
+                        minutes = minutes < 10 ? '0' + minutes : minutes;
+                        return `${hours}:${minutes}`;
+                    }
+                },
+                { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+                { label: "Your Most Visited Director", getValue: getMostVisitedDirector },
+                { label: "Your Most Visited Actor", getValue: getMostVisitedActor },
+                {
+                    label: "Your Unique Movies Discovered",
+                    getValue: () => {
+                        const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                        return viewedMovies.length;
+                    }
+                },
+                {
+                    label: "Your Favorited Movies",
+                    getValue: () => {
+                        const favoritedMovies = JSON.parse(localStorage.getItem('favorites')) || [];
+                        return favoritedMovies.length;
+                    }
+                },
+                {
+                    label: "Your Most Common Favorited Genre",
+                    getValue: getMostCommonGenre
+                },
+                { label: "Your Created Watchlists", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+                { label: "Your Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+                {
+                    label: "Your Unique Directors Discovered",
+                    getValue: () => {
+                        const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                        return viewedDirectors.length;
+                    }
+                },
+                {
+                    label: "Your Unique Actors Discovered",
+                    getValue: () => {
+                        const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                        return viewedActors.length;
+                    }
+                },
+                {
+                    label: "Your Unique Production Companies Discovered",
+                    getValue: () => {
+                        const viewedCompanies = JSON.parse(localStorage.getItem('uniqueCompaniesViewed')) || [];
+                        return viewedCompanies.length;
+                    }
+                },
+                { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy }
+            ];
+
+            let currentStatIndex = 0;
+
+            function updateStatDisplay() {
+                const currentStat = stats[currentStatIndex];
+                document.getElementById('stats-label').textContent = currentStat.label + ':';
+                document.getElementById('stats-display').textContent = currentStat.getValue();
+                currentStatIndex = (currentStatIndex + 1) % stats.length;
+            }
+
+            updateStatDisplay();
+
+            const localTimeDiv = document.getElementById('local-time');
+            let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+            localTimeDiv.addEventListener('click', () => {
+                clearInterval(statRotationInterval);
+                updateStatDisplay();
+                statRotationInterval = setInterval(updateStatDisplay, 3000);
+            });
+        }
+
+        function updateMovieVisitCount(movieId, movieTitle) {
+            let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            if (!movieVisits[movieId]) {
+                movieVisits[movieId] = { count: 0, title: movieTitle };
+            }
+            movieVisits[movieId].count += 1;
+            localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+        }
+
+        function getMostVisitedMovie() {
+            const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+            let mostVisitedMovie = '';
+            let maxVisits = 0;
+
+            for (const movieId in movieVisits) {
+                if (movieVisits[movieId].count > maxVisits) {
+                    mostVisitedMovie = movieVisits[movieId].title;
+                    maxVisits = movieVisits[movieId].count;
+                }
+            }
+            return mostVisitedMovie || 'Not Available';
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            updateSignInButtonState();
+            document.getElementById('googleSignInBtn').addEventListener('click', handleSignInOut);
+        });
+
+        function updateSignInButtonState() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            const signInText = document.getElementById('signInOutText');
+            const signInIcon = document.getElementById('signInIcon');
+            const signOutIcon = document.getElementById('signOutIcon');
+
+            if (isSignedIn) {
+                signInText.textContent = 'Sign Out';
+                signInIcon.style.display = 'none';
+                signOutIcon.style.display = 'inline-block';
+            }
+            else {
+                signInText.textContent = 'Sign In';
+                signInIcon.style.display = 'inline-block';
+                signOutIcon.style.display = 'none';
+            }
+        }
+
+        function handleSignInOut() {
+            const isSignedIn = JSON.parse(localStorage.getItem('isSignedIn')) || false;
+
+            if (isSignedIn) {
+                localStorage.setItem('isSignedIn', JSON.stringify(false));
+                alert('You have been signed out.');
+            }
+            else {
+                window.location.href = 'sign-in.html';
+                return;
+            }
+
+            updateSignInButtonState();
+        }
+
+        function getMostVisitedActor() {
+            const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+            let mostVisitedActor = '';
+            let maxVisits = 0;
+
+            for (const actorId in actorVisits) {
+                if (actorVisits[actorId].count > maxVisits) {
+                    mostVisitedActor = actorVisits[actorId].name;
+                    maxVisits = actorVisits[actorId].count;
+                }
+            }
+            return mostVisitedActor || 'Not Available';
+        }
+
+        function getMostVisitedDirector() {
+            const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+            let mostVisitedDirector = '';
+            let maxVisits = 0;
+
+            for (const directorId in directorVisits) {
+                if (directorVisits[directorId].count > maxVisits) {
+                    mostVisitedDirector = directorVisits[directorId].name;
+                    maxVisits = directorVisits[directorId].count;
+                }
+            }
+            return mostVisitedDirector || 'Not Available';
+        }
+
+        function getTriviaAccuracy() {
+            let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+            if (triviaStats.totalAttempted === 0) {
+                return 'No trivia attempted';
+            }
+            let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+            return `${accuracy.toFixed(1)}% accuracy`;
+        }
+
+        function getMostCommonGenre() {
+            const favoriteGenres = JSON.parse(localStorage.getItem('favoriteGenres')) || {};
+            let mostCommonGenre = '';
+            let maxCount = 0;
+
+            for (const genre in favoriteGenres) {
+                if (favoriteGenres[genre] > maxCount) {
+                    mostCommonGenre = genre;
+                    maxCount = favoriteGenres[genre];
+                }
+            }
+            return mostCommonGenre || 'Not Available';
+        }
+
+        document.addEventListener('DOMContentLoaded', rotateUserStats);
+    </script>
+</head>
+<body class="movie-details-body">
+<!-- Header with buttons -->
+<header>
+    <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer">
+        <h1 id="my-heading" style="margin-bottom: -10px">
+            The Mo<span class="highlight">vieV</span>erse
+        </h1>
+    </a>
+
+    <div id="local-time" style="cursor: pointer">
+        <p id="stats-label" class="clock" style="font-size: 16px"></p>
+        <h1 id="stats-display" class="clock"></h1>
+    </div>
+
+    <button class="back-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
+    <button class="about" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
+    <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
+    <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
+        <span id="signInOutText">Sign In</span>
+        <i class="fas fa-sign-in-alt" id="signInIcon"></i>
+        <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
+    </button>
+    <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
+        <span id="profileText">Profile</span>
+        <i class="fas fa-user" id="profileIcon"></i>
+    </button>
+    <form id="form1">
+        <input
+                type="text"
+                id="search"
+                placeholder="Search For Anything..."
+                class="search"
+        />
+        <button type="button" id="button-search" onclick="handleSearch()">Search</button>
+    </form>
+
+    <button id="settings-btn" style="position: fixed; bottom: 185px; right: 0">Settings</button>
+    <button id="movie-match-btn3" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!" style="bottom: 150px; right: 0">Movie Match</button>
+    <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px; right: 0">Movie Timeline</button>
+    <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!" style="bottom: 80px; right: 0">Recommendation</button>
+    <button id="discussions-btn" onclick="window.location.href='chatbot.html'" style="bottom: 45px; right: 0" title="Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
+    <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 10px; right: 0" title="Test your movie knowledge">MovieVerse Trivia</button>
+</header>
+
+<div class="center-text" style="padding: 150px;">
+    <h1 style="font-size: 50px; color: #ff8623; margin-top: 20px">You're Offline</h1>
+    <p>It seems you're offline. Please check your internet connection and try again. If you're still having trouble, please contact your service provider.</p>
+    <button class="center-button" onclick="window.location.href='index.html'">Try Again</button>
+</div>
+
+<script>
+    async function showMovieOfTheDay() {
+        const year = new Date().getFullYear();
+        const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&primary_release_year=${year}&vote_average.gte=7`;
+
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+            const movies = data.results;
+
+            if (movies.length > 0) {
+                const randomMovie = movies[Math.floor(Math.random() * movies.length)];
+                localStorage.setItem('selectedMovieId', randomMovie.id);
+                window.location.href = 'movie-details.html';
+            }
+            else {
+                fallbackMovieSelection();
+            }
+        }
+        catch (error) {
+            console.error('Error fetching movie:', error);
+            fallbackMovieSelection();
+        }
+    }
+
+    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 = 'MovieVerse-Frontend/html/movie-details.html';
+    }
+
+    function updateClock() {
+        var now = new Date();
+        var hours = now.getHours();
+        var minutes = now.getMinutes();
+        hours = hours < 10 ? '0' + hours : hours;
+        minutes = minutes < 10 ? '0' + minutes : minutes;
+        var timeString = hours + ':' + minutes;
+        document.getElementById('clock').innerHTML = timeString;
+    }
+
+    setInterval(updateClock, 1000);
+    window.onload = updateClock;
+
+    document.getElementById('settings-btn').addEventListener('click', () => {
+        window.location.href = 'MovieVerse-Frontend/html/settings.html';
+    });
+
+    document.addEventListener('DOMContentLoaded', () => {
+        applySettings();
+
+        function applySettings() {
+            const defaultBg = '../../images/universe-1.png';
+            const savedBg = localStorage.getItem('backgroundImage') || defaultBg;
+            const savedTextColor = localStorage.getItem('textColor');
+            const savedFontSize = localStorage.getItem('fontSize');
+            document.body.style.backgroundImage = `url('${savedBg}')`;
+
+            if (savedTextColor) {
+                document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li').forEach(element => {
+                    element.style.color = savedTextColor;
+                });
+            }
+
+            if (savedFontSize) {
+                const size = savedFontSize === 'small' ? '12px' : savedFontSize === 'medium' ? '16px' : '20px';
+                document.body.style.fontSize = size;
+            }
+        }
+    });
+
+    const form = document.getElementById('form1');
+
+    form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const searchQuery = document.getElementById('search').value;
+        localStorage.setItem('searchQuery', searchQuery);
+        window.location.href = 'search.html';
+    });
+
+    function handleSearch() {
+        const searchQuery = document.getElementById('search').value;
+        localStorage.setItem('searchQuery', searchQuery);
+        window.location.href = 'search.html';
+    }
+</script>
+
+<footer style="margin-top: 400px">
+    <p>© 2024 The MovieVerse. All rights reserved.</p>
+</footer>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/privacy-policy.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/privacy-policy.html
index 581feb6f..eb3c0fe7 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/privacy-policy.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/privacy-policy.html
@@ -17,8 +17,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -85,7 +85,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
@@ -112,7 +112,7 @@ <h1 id="stats-display" class="clock"></h1>
         <button id="trivia-btn" onclick="window.location.href='trivia.html'" style="bottom: 10px" title="Test your movie knowledge">MovieVerse Trivia</button>
     </header>
 
-    <main class="content-area" style="text-align: center;   ">
+    <main class="content-area" style="text-align: center">
         <div style="text-align: center; width: 100vw; margin-left: 10px">
             <h1 id="privacy-header">Privacy Policy</h1>
         </div>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/reset-password.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/reset-password.html
index 72035012..d0b9ce40 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/reset-password.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/reset-password.html
@@ -11,8 +11,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -111,12 +111,13 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form1">
+
+        <form id="form1" style="margin-top: 19px">
             <input
                     type="text"
                     id="search"
@@ -125,6 +126,7 @@ <h1 id="stats-display" class="clock"></h1>
             />
             <button type="button" id="button-search" onclick="handleSearch()">Search</button>
         </form>
+
         <button id="settings-btn" style="position: fixed; bottom: 185px; z-index: 1000">Settings</button>
         <button id="movie-match-btn3" style="z-index: 1000; bottom: 150px" onclick="window.location.href='movie-match.html'" title="Find a movie that matches your mood, genre, and time period!">Movie Match</button>
         <button id="movie-timeline-btn" onclick="window.location.href='movie-timeline.html'" title="Explore movies through different eras!" style="bottom: 115px; z-index: 1000">Movie Timeline</button>
@@ -392,6 +394,7 @@ <h2>Reset Password</h2>
             }
         }
     </script>
+
     <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js"></script>
     <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js"></script>
 
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/search.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/search.html
index a329beea..7dee39dc 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/search.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/search.html
@@ -6,12 +6,12 @@
     <title>Search Results - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <<meta property="og:locale" content="en_US" />
+    <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -46,7 +46,7 @@
 
 <body class="movie-details-body4">
 
-    <header style="margin-bottom: -50px; margin-top: -28px">
+    <header style="margin-bottom: -50px; margin-top: -5px">
         <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer" title="Click to go back to the home page">
             <h1 id="my-heading" style="margin-bottom: -10px">
                 The Mo<span class="highlight">vieV</span>erse
@@ -58,7 +58,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/settings.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/settings.html
index e5a43e43..6cfeffa9 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/settings.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/settings.html
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -170,7 +170,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -180,7 +180,7 @@ <h1 id="stats-display" class="clock"></h1>
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form">
+        <form id="form" style="margin-top: 5px">
             <input
                     type="text"
                     id="search"
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/sign-in.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/sign-in.html
index c03f5201..279ced4b 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/sign-in.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/sign-in.html
@@ -4,12 +4,12 @@
     <meta charset="UTF-8">
     <title>Sign In - The MovieVerse</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <<meta property="og:locale" content="en_US" />
+    <meta property="og:locale" content="en_US" />
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -125,12 +125,12 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
         </button>
-        <form id="form1">
+        <form id="form1" style="margin-top: 19px">
             <input
                     type="text"
                     id="search"
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/terms-of-service.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/terms-of-service.html
index 5b4a39a0..65fa5d08 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/terms-of-service.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/terms-of-service.html
@@ -17,8 +17,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -86,7 +86,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/trivia.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/trivia.html
index 61604fe3..29d2a7fb 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/trivia.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/trivia.html
@@ -50,11 +50,28 @@
         label:hover {
             color: #f509d9;
         }
+
+        #my-heading {
+            margin-top: 25px;
+        }
+
+        #form {
+            margin-top: 16px;
+        }
+
+        @media (max-width: 600px) {
+            #my-heading {
+                margin-top: 10px;
+            }
+
+            #form {
+                margin-top: 0;
+            }
+        }
     </style>
 </head>
 
 <body>
-
     <header style="margin-bottom: -50px; margin-top: 10px">
         <a href="../../index.html" style="text-decoration: none; color: inherit; cursor: pointer; margin-bottom: 5px" title="Click to go back to the home page">
             <h1 id="my-heading" style="margin-bottom: -10px">
@@ -64,7 +81,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
 
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
@@ -83,7 +100,7 @@ <h1 id="my-heading" style="margin-bottom: -10px">
                     id="search"
                     placeholder="Search For Anything..."
                     class="search"
-                    style="width: 200px"
+                    style="width: 215px"
             />
             <button type="button" id="button-search" onclick="handleSearch()">Search</button>
         </form>
@@ -138,6 +155,7 @@ <h3>Trivia Results</h3>
                 const savedTextColor = localStorage.getItem('textColor');
                 const savedFontSize = localStorage.getItem('fontSize');
 
+
                 if (savedBg) {
                     document.body.style.backgroundImage = `url('${savedBg}')`;
                 }
@@ -157,7 +175,5 @@ <h3>Trivia Results</h3>
     <footer>
         <p style="color: white">© 2024 The MovieVerse. All rights reserved.</p>
     </footer>
-
 </body>
-
 </html>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/tv-details.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/tv-details.html
index 0dab1880..ce41ef43 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/tv-details.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/tv-details.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>TV Details</title>
+    <title>TV Details - The MovieVerse</title>
     <link rel="stylesheet" href="../css/style.css">
     <script src="../js/tv-details.js" defer></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -10,8 +10,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -62,6 +62,12 @@
         #prod-companies:hover {
             color: #f509d9;
         }
+
+        @media (max-width: 800px) {
+            .movie-description {
+                margin-top: -75px;
+            }
+        }
     </style>
 </head>
 
@@ -78,7 +84,7 @@ <h1 id="stats-display" class="clock"></h1>
         </div>
         <button class="back-btn" onclick="window.location.href='../../index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
-        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="googleSignInBtn" class="nav-btn" onclick="handleSignInOut()" title="Sign In/Out">
             <span id="signInOutText">Sign In</span>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
@@ -111,6 +117,7 @@ <h2 id="search-title"></h2>
     <div class="details-container" id="movie-details-container">
         <!-- Left side for Title and Image -->
         <div class="movie-left">
+
             <!-- Container for Title and Favorites Button -->
             <div class="title-favorites-container">
                 <h2 id="movie-title" class="movie-header"></h2>
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/user-profile.html b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/user-profile.html
index 8afa34ac..2c99a805 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/html/user-profile.html
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/html/user-profile.html
@@ -11,8 +11,8 @@
     <meta property="og:type" content="website" />
     <meta http-equiv="content-language" content="en" />
     <meta property="og:description" content="Explore The MovieVerse to discover and learn about your favorite movies, directors, actors, and more." />
-    <meta property="og:url" content="https://movie-verse.com/MovieVerse-Frontend/html/about.html" />
-    <meta property="og:site_name" content="About The MovieVerse" />
+    <meta property="og:url" content="https://movie-verse.com/" />
+    <meta property="og:site_name" content="The MovieVerse" />
     <meta property="og:image" content="https://movie-verse.com/images/image.png"/>
     <meta property="og:favicon" content="./images/favicon.ico" />
     <meta name="keywords" content="movies, film guide, directors, actors, movie genres, cinema, film reviews">
@@ -278,7 +278,7 @@ <h1 id="stats-display" class="clock"></h1>
 
         <button class="back-btn nav-btn" onclick="window.location.href='../../index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='favorites.html'" title="View your favorites & watchlists">Favorites</button>
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
             <i class="fas fa-user" id="profileIcon"></i>
@@ -288,7 +288,7 @@ <h1 id="stats-display" class="clock"></h1>
             <i class="fas fa-sign-in-alt" id="signInIcon"></i>
             <i class="fas fa-sign-out-alt" id="signOutIcon" style="display: none;"></i>
         </button>
-        <form id="form1">
+        <form id="form1" style="margin-top: 20px">
             <input
                     type="text"
                     id="search"
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/company-details.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/company-details.js
index 5748a209..27ff5495 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/company-details.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/company-details.js
@@ -364,6 +364,8 @@ async function fetchCompanyDetails(companyId) {
         else {
             companyWebsite.textContent = 'Website Not Available';
         }
+
+        updateBrowserURL(company.name);
     }
     catch (error) {
         console.error('Error fetching company details:', error);
@@ -747,3 +749,13 @@ function displayCompanyMovies(movies) {
         moviesList.appendChild(movieContainer);
     });
 }
+
+function updateBrowserURL(title) {
+    const nameSlug = createNameSlug(title);
+    const newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + nameSlug;
+    window.history.replaceState({ path: newURL }, '', newURL);
+}
+
+function createNameSlug(title) {
+    return title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]/g, '');
+}
\ No newline at end of file
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/favorites.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/favorites.js
index edc438d2..58eb3cf0 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/favorites.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/favorites.js
@@ -60,18 +60,32 @@ function generateMovieNames(input) {
     return String.fromCharCode(97, 112, 105, 95, 107, 101, 121, 61);
 }
 
-document.getElementById('how-to-use-btn').addEventListener('click', function() {
-    var howToUseSection = document.getElementById('how-to-use-section');
-    if (howToUseSection.style.display === 'none') {
-        howToUseSection.style.display = 'block';
-        window.location.href = '#how-to-use-section';
-        document.getElementById('how-to-use-btn').textContent = 'Hide Tutorial';
+document.addEventListener('DOMContentLoaded', function() {
+    adjustButtonMargin();
+    document.getElementById('how-to-use-btn').addEventListener('click', function() {
+        let howToUseSection = document.getElementById('how-to-use-section');
+        if (howToUseSection.style.display === 'none') {
+            howToUseSection.style.display = 'block';
+            window.location.href = '#how-to-use-section';
+            document.getElementById('how-to-use-btn').textContent = 'Hide Tutorial';
+            document.getElementById('how-to-use-btn').style.marginBottom = '0';
+        } else {
+            howToUseSection.style.display = 'none';
+            document.getElementById('how-to-use-btn').textContent = 'How to Use';
+            document.getElementById('how-to-use-btn').style.marginBottom = '180px';
+        }
+    });
+});
+
+function adjustButtonMargin() {
+    let howToUseSection = document.getElementById('how-to-use-section');
+    if (howToUseSection.style.display === 'none' || !howToUseSection.style.display) {
+        document.getElementById('how-to-use-btn').style.marginBottom = '200px';
     }
     else {
-        howToUseSection.style.display = 'none';
-        document.getElementById('how-to-use-btn').textContent = 'How to Use';
+        document.getElementById('how-to-use-btn').style.marginBottom = '0';
     }
-});
+}
 
 function rotateUserStats() {
     const stats = [
@@ -1294,6 +1308,7 @@ function pinWatchList(watchlistDiv, watchlistId) {
 
     localStorage.setItem('watchlists', JSON.stringify(watchlists));
     watchlistDiv.classList.toggle('pinned');
+
     loadWatchLists();
     window.location.reload();
 }
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js
index ce382d89..d0fcb867 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/movie-details.js
@@ -780,17 +780,13 @@ function getRatingDetails(rating) {
     return details;
 }
 
-function getMovieCode2() {
-    const encodedKey = "MmJhOGU1MzY=";
-    return atob(encodedKey);
-}
-
 async function fetchMovieRatings(imdbId, tmdbMovieData) {
-    const omdbApiKey = `${getMovieCode2()}`;
-    const omdbUrl = `https://www.omdbapi.com/?i=${imdbId}&apikey=${omdbApiKey}`;
+    const omdbCode = `${getMovieCode2()}`;
+    const omdb = `https://${getMovieActor()}/?i=${imdbId}&${getMovieName()}${omdbCode}`;
 
+    console.log(omdb);
     try {
-        const response = await fetch(omdbUrl);
+        const response = await fetch(omdb);
         const data = await response.json();
 
         let imdbRating = data.imdbRating ? data.imdbRating : 'N/A';
@@ -845,7 +841,7 @@ function calculateFallbackRTRating(imdbRating, tmdbRating) {
     const weightImdb = 0.8;
     const weightTmdb = 0.1;
 
-    return ((normalizedImdbRating * weightImdb) + (normalizedTmdbRating * weightTmdb)).toFixed(0) + '%'; // Calculate fallback RT rating out of 100% scale (in case data is not available from OMDB)
+    return ((normalizedImdbRating * weightImdb) + (normalizedTmdbRating * weightTmdb)).toFixed(0) + '%';
 }
 
 function calculateFallbackMetacriticsRating(imdbRating, tmdbRating) {
@@ -855,7 +851,7 @@ function calculateFallbackMetacriticsRating(imdbRating, tmdbRating) {
     const weightImdb = 0.8;
     const weightTmdb = 0.1;
 
-    return ((normalizedImdbRating * weightImdb) + (normalizedTmdbRating * weightTmdb)).toFixed(0); // Calculate fallback Metacritics rating out of 100 scale (in case data is not available from OMDB)
+    return ((normalizedImdbRating * weightImdb) + (normalizedTmdbRating * weightTmdb)).toFixed(0);
 }
 
 let trailerIframeDisplayed = false;
@@ -1026,7 +1022,7 @@ function populateMovieDetails(movie, imdbRating, rtRating, metascore, awards, ra
 
     const popularityThreshold = 80;
     const isPopular = movie.popularity >= popularityThreshold;
-    const popularityText = isPopular ? `${popularityScore} (This movie is popular)` : `${popularityScore} (This movie is unpopular)`;
+    const popularityText = isPopular ? `${popularityScore} (This movie is <strong>popular</strong>)` : `${popularityScore} (This movie is <strong>unpopular</strong>)`;
 
     const adultContentIndicator = movie.adult
         ? `<span class="adult-indicator">Adult Content</span>`
@@ -1189,6 +1185,21 @@ function updateMoviesFavorited(movieId) {
     }
 }
 
+function getMovieCode2() {
+    const codeOfMovie = "MmJhOGU1MzY=";
+    return atob(codeOfMovie);
+}
+
+function getMovieName() {
+    const moviename = "YXBpa2V5PQ==";
+    return atob(moviename);
+}
+
+function getMovieActor() {
+    const actor = "d3d3Lm9tZGJhcGkuY29t";
+    return atob(actor);
+}
+
 function updateAverageMovieRating(movieId, newRating) {
     const savedRatings = JSON.parse(localStorage.getItem('movieRatings')) || {};
 
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/search.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/search.js
index 1bb9e4e4..4caf4efb 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/search.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/search.js
@@ -236,12 +236,14 @@ async function showResults(category) {
         const response = await fetch(movieUrl);
         const data = await response.json();
         const sortedResults = data.results.sort((a, b) => b.popularity - a.popularity);
-        displayResults(sortedResults, category);
+        displayResults(sortedResults, category, searchQuery);
     }
     catch (error) {
         console.error('Error fetching search results:', error);
         document.querySelector('.movie-match-container1').innerHTML = '<p>Error fetching results. Please try again later.</p>';
     }
+
+    updateBrowserURL(searchQuery);
 }
 
 document.querySelector('button[onclick="showResults(\'movie\')"]').addEventListener('click', function() {
@@ -282,12 +284,14 @@ function updateCategoryButtonStyles(selectedCategory) {
     }
 }
 
-function displayResults(results, category) {
+function displayResults(results, category, searchTerm) {
     const container = document.getElementById('movie-match-container1');
     container.innerHTML = '';
 
+    const capitalizedCategory = category.charAt(0).toUpperCase() + category.slice(1);
+
     if (results.length === 0) {
-        container.innerHTML = `<p>No results found for ${category}. Please try again.</p>`;
+        container.innerHTML = `<p>No results found for "${searchTerm}" in the ${capitalizedCategory} category. Please try again with a different query.</p>`;
         return;
     }
     showMovies(results, container, category);
@@ -427,4 +431,14 @@ function handleSearch() {
     const searchQuery = document.getElementById('search').value;
     localStorage.setItem('searchQuery', searchQuery);
     window.location.reload();
+}
+
+function updateBrowserURL(title) {
+    const nameSlug = createNameSlug(title);
+    const newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?search_query=' + nameSlug;
+    window.history.replaceState({ path: newURL }, '', newURL);
+}
+
+function createNameSlug(title) {
+    return title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]/g, '');
 }
\ No newline at end of file
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/service-worker.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/service-worker.js
index 432be0d1..52e81ed2 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/service-worker.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/service-worker.js
@@ -58,6 +58,7 @@ const urlsToCache = [
     '../../images/yellow.jpg',
     'analytics.js',
     '../html/analytics.html',
+    '../html/offline.html',
 ];
 
 self.addEventListener('install', event => {
@@ -77,9 +78,10 @@ self.addEventListener('fetch', event => {
                     if (response) {
                         return response;
                     }
-                    return fetch(event.request);
-                }
-            )
+                    return fetch(event.request).catch(() => {
+                        return caches.match('../html/offline.html');
+                    });
+                })
     );
 });
 
diff --git a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/tv-details.js b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/tv-details.js
index 503f6e5a..89671864 100644
--- a/MovieVerse-Mobile/www/MovieVerse-Frontend/js/tv-details.js
+++ b/MovieVerse-Mobile/www/MovieVerse-Frontend/js/tv-details.js
@@ -294,8 +294,6 @@ document.addEventListener("DOMContentLoaded", function() {
 });
 
 document.addEventListener("DOMContentLoaded", function() {
-    updateSignInButton();
-    initClient();
     applySettings();
 });
 
@@ -499,12 +497,16 @@ const twoLetterLangCodes = [
 
 async function fetchTvDetails(tvSeriesId) {
     const baseUrl = `https://${getMovieVerseData()}/3/tv/${tvSeriesId}`;
-    const urlWithAppend = `${baseUrl}?${generateMovieNames()}${tvCode}&append_to_response=credits,keywords,similar,videos`;
+    const urlWithAppend = `${baseUrl}?${generateMovieNames()}${tvCode}&append_to_response=credits,keywords,similar,videos,external_ids`;
+
     try {
         const response = await fetch(urlWithAppend);
         const tvSeriesDetails = await response.json();
+        const imdbId = tvSeriesDetails.external_ids.imdb_id;
+
+        const imdbRating = await fetchTVRatings(imdbId);
 
-        populateTvSeriesDetails(tvSeriesDetails);
+        populateTvSeriesDetails(tvSeriesDetails, imdbRating);
         updateBrowserURL(tvSeriesDetails.name);
     }
     catch (error) {
@@ -512,6 +514,24 @@ async function fetchTvDetails(tvSeriesId) {
     }
 }
 
+async function fetchTVRatings(imdbId) {
+    const omdbCode = `${getMovieCode2()}`;
+    const omdb = `https://${getMovieActor()}/?i=${imdbId}&${getMovieName()}${omdbCode}`;
+
+    try {
+        const response = await fetch(omdb);
+        const data = await response.json();
+
+        let imdbRating = data.imdbRating ? data.imdbRating : 'N/A';
+
+        return imdbRating;
+    }
+    catch (error) {
+        console.error('Error fetching TV series ratings:', error);
+        return 'N/A';
+    }
+}
+
 function getLanguageName(code) {
     const language = twoLetterLangCodes.find(lang => lang.code === code);
     return language ? language.name : 'Unknown Language';
@@ -522,7 +542,7 @@ function getCountryName(code) {
     return regionNames.of(code);
 }
 
-function populateTvSeriesDetails(tvSeries) {
+function populateTvSeriesDetails(tvSeries, imdbRating) {
     const title = tvSeries.name || 'Title not available';
     document.getElementById('movie-title').textContent = title;
     document.title = tvSeries.name + " - TV Series";
@@ -549,6 +569,15 @@ function populateTvSeriesDetails(tvSeries) {
     const voteCount = tvSeries.vote_count ? tvSeries.vote_count.toLocaleString() : 'N/A';
     detailsHTML += `<p><strong>User Rating:</strong> <strong>${(voteAverage / 2).toFixed(1)}/5.0</strong> (based on <strong>${voteCount}</strong> votes)</p>`;
 
+    if (tvSeries.external_ids && tvSeries.external_ids.imdb_id) {
+        const imdbId = tvSeries.external_ids.imdb_id;
+        const imdbUrl = `https://www.imdb.com/title/${imdbId}/`;
+        detailsHTML += `<p title="Click to go to this TV series' IMDB page"><strong>IMDb Rating:</strong> <strong><a id="ratingImdb" href="${imdbUrl}" target="_blank">${imdbRating}</a></strong></p>`;
+    }
+    else {
+        detailsHTML += `<p title="Click to go to this TV series' IMDB page"><strong>IMDb Rating:</strong> N/A</p>`;
+    }
+
     const homepage = tvSeries.homepage ? `<a id="homepage" href="${tvSeries.homepage}" target="_blank">Visit</a>` : 'Not available';
     detailsHTML += `<p><strong>Homepage:</strong> ${homepage}</p>`;
 
@@ -717,6 +746,21 @@ function applySettings() {
     }
 }
 
+function getMovieCode2() {
+    const encodedKey = "MmJhOGU1MzY=";
+    return atob(encodedKey);
+}
+
+function getMovieName() {
+    const moviename = "YXBpa2V5PQ==";
+    return atob(moviename);
+}
+
+function getMovieActor() {
+    const actor = "d3d3Lm9tZGJhcGkuY29t";
+    return atob(actor);
+}
+
 function applyTextColor(color) {
     document.querySelectorAll('h1, h2, h3, p, a, span, div, button, input, select, textarea, label, li')
         .forEach(element => {
diff --git a/MovieVerse-Mobile/www/index.html b/MovieVerse-Mobile/www/index.html
index 85c18478..e1b1b99f 100644
--- a/MovieVerse-Mobile/www/index.html
+++ b/MovieVerse-Mobile/www/index.html
@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
 
 <head>
@@ -65,13 +64,13 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <h1 id="stats-display" class="clock"></h1>
         </div>
 
-        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar (Or you can just hover on the left edge to toggle it!)" onclick="toggleNav()">
+        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
 
         <button class="back-btn nav-btn" onclick="window.location.href='index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
@@ -106,15 +105,15 @@ <h1 id="my-heading" style="margin-bottom: 5px; margin-left: 0">
         </div>
         <ul style="overflow-y: auto">
             <li><a href="MovieVerse-Frontend/html/analytics.html">MovieVerse Analytics</a></li>
-            <li><a href="#most-popular">Most Popular</a></li>
+            <li><a href="#most-popular">Popular Worldwide</a></li>
             <li><a href="#award-winning">Award-Winning</a></li>
-            <li><a href="#hidden-gems">Hidden Gems</a></li>
             <li><a href="#director-spotlight">Director's Spotlight</a></li>
             <li><a href="#action">Action</a></li>
             <li><a href="#vietnamese">Vietnamese</a></li>
             <li><a href="#korean">Korean</a></li>
             <li><a href="#indian">Indian</a></li>
             <li><a href="#tv-series">TV Series</a></li>
+            <li><a href="#hidden-gems">Hidden Gems</a></li>
             <li><a href="#horror">Horror</a></li>
             <li><a href="#documentary">Documentary</a></li>
             <li><a href="#animation">Animation</a></li>
@@ -145,7 +144,7 @@ <h1 id="my-heading" style="margin-bottom: 5px; margin-left: 0">
     </div>
 
     <div class="genres">
-        <h2 id="search-title" style="margin-top: 35px">Most Popular: </h2>
+        <h2 id="search-title" style="margin-top: 35px; cursor: pointer">Popular Worldwide: </h2>
         <button type="button" id="button-clear" style="display: none;">Clear Search</button>
     </div>
 
@@ -156,128 +155,128 @@ <h1 id="other1"></h1>
     </div>
 
     <div class="genres">
-        <h2 style="margin-top: 35px">Award-Winning Movies:</h2>
+        <h2 style="margin-top: 35px; cursor: pointer">Award-Winning Movies:</h2>
     </div>
 
     <main id="award-winning"></main>
 
     <div class="genres" style="display: flex; justify-content: space-between; align-items: center;">
-        <h2 id="director-spotlight-title" style="margin-top: 35px">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
+        <h2 id="director-spotlight-title" style="cursor: pointer; margin-top: 35px">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
         <button id="change-director-btn" onclick="changeDirector()" style="padding: 5px 10px; cursor: pointer;">Change Director</button>
     </div>
 
     <main id="director-spotlight"></main>
 
     <div class="genres">
-        <h2 style="margin-top: 35px">Hidden Gems:</h2>
-    </div>
-
-    <main id="hidden-gems"></main>
-
-    <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ACTION</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ACTION</span> Movies: </h2>
     </div>
 
     <main id="action"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">VIETNAMESE</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">VIETNAMESE</span> Movies: </h2>
     </div>
 
     <main id="vietnamese"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">KOREAN</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">KOREAN</span> Movies: </h2>
     </div>
 
     <main id="korean"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">INDIAN</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">INDIAN</span> Movies: </h2>
     </div>
 
     <main id="indian"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">TV SERIES</span>: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">TV SERIES</span>: </h2>
     </div>
 
     <main id="tv-series"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">HORROR</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Hidden Gems:</h2>
+    </div>
+
+    <main id="hidden-gems"></main>
+
+    <div class="genres">
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">HORROR</span> Movies: </h2>
     </div>
 
     <main id="horror"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">DOCUMENTARY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">DOCUMENTARY</span> Movies: </h2>
     </div>
 
     <main id="documentary"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ANIMATED</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ANIMATED</span> Movies: </h2>
     </div>
 
     <main id="animation"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">SCIENCE FICTION</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">SCIENCE FICTION</span> Movies: </h2>
     </div>
 
     <main id="sci-fi"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ROMANTIC</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ROMANTIC</span> Movies: </h2>
     </div>
 
     <main id="romantic"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">THRILLER</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">THRILLER</span> Movies: </h2>
     </div>
 
     <main id="thriller"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">MYSTERY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">MYSTERY</span> Movies: </h2>
     </div>
 
     <main id="mystery"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ADVENTURE</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ADVENTURE</span> Movies: </h2>
     </div>
 
     <main id="adventure"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">COMEDY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">COMEDY</span> Movies: </h2>
     </div>
 
     <main id="comedy"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">FANTASY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">FANTASY</span> Movies: </h2>
     </div>
 
     <main id="fantasy"></main>
 
     <div class="genres"  >
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">FAMILY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">FAMILY</span> Movies: </h2>
     </div>
 
     <main id="family"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CRIME</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">CRIME</span> Movies: </h2>
     </div>
 
     <main id="crime"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">CLASSIC</span> Movies: </h2>
     </div>
 
     <main id="classic" style="margin-bottom: 230px"></main>
@@ -286,13 +285,13 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
         <p>© 2024 The MovieVerse. All rights reserved.</p>
     </footer>
 
+    <button id="settings-btn" style="position: fixed; bottom: 220px">Settings</button>
     <button id="movie-match-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-match.html'" title="Find movies that match your mood and preferences!" style="bottom: 185px">Movie Match</button>
     <button id="movie-timeline-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-timeline.html'" style="bottom: 150px" title="Explore movies through different eras!">Movie Timeline</button>
     <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 115px" title="Get a recommended movie to watch for today!">Recommendation</button>
     <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 80px" 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: 45px" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
-    <button id="back-to-top-btn" style="bottom: 10px" onclick="window.location.href='#homepage-header'">Back To Top</button>
-    <button id="settings-btn" style="position: fixed; bottom: 220px">Settings</button>
+    <button id="back-to-top-btn" style="bottom: 10px">Back To Top</button>
 
     <script>
         document.getElementById('settings-btn').addEventListener('click', () => {
@@ -315,7 +314,7 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
                         }
 
                         if (targetDiv) {
-                            targetDiv.scrollIntoView({behavior: 'smooth'});
+                            targetDiv.scrollIntoView({ behavior: 'smooth' });
                         }
                     }
                     else {
@@ -324,6 +323,20 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
                 });
             });
 
+            document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
+                e.preventDefault();
+
+                document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+            });
+
+            const sectionTitles = document.querySelectorAll('.genres h2');
+
+            sectionTitles.forEach(title => {
+                title.addEventListener('click', function() {
+                    this.parentElement.scrollIntoView({ behavior: 'smooth' });
+                });
+            });
+
             function applySettings() {
                 const savedBg = localStorage.getItem('backgroundImage');
                 const savedTextColor = localStorage.getItem('textColor');
@@ -405,4 +418,5 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
     </script>
 
 </body>
+
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e0044c8..a176adfc 100644
--- a/index.html
+++ b/index.html
@@ -64,13 +64,13 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             <h1 id="stats-display" class="clock"></h1>
         </div>
 
-        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar (Or you can just hover on the left edge to toggle it!)" onclick="toggleNav()">
+        <button id="nav-toggle" class="nav-toggle" title="Toggle side navbar" onclick="toggleNav()">
             <i class="fas fa-bars"></i>
         </button>
 
         <button class="back-btn nav-btn" onclick="window.location.href='index.html'" title="Go back to homepage">Home</button>
         <button class="about nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/about.html'" title="About this wonderful app!">About</button>
-        <button class="favorites-btn nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="Go to your favorites list">Favorites</button>
+        <button class="favorites-btn nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/favorites.html'" title="View your favorites & watchlists">Favorites</button>
 
         <button id="profileBtn" class="nav-btn" onclick="window.location.href='MovieVerse-Frontend/html/user-profile.html'" title="Go to your profile">
             <span id="profileText">Profile</span>
@@ -144,7 +144,7 @@ <h1 id="my-heading" style="margin-bottom: 5px; margin-left: 0">
     </div>
 
     <div class="genres">
-        <h2 id="search-title" style="margin-top: 35px">Popular Worldwide: </h2>
+        <h2 id="search-title" style="margin-top: 35px; cursor: pointer">Popular Worldwide: </h2>
         <button type="button" id="button-clear" style="display: none;">Clear Search</button>
     </div>
 
@@ -155,128 +155,128 @@ <h1 id="other1"></h1>
     </div>
 
     <div class="genres">
-        <h2 style="margin-top: 35px">Award-Winning Movies:</h2>
+        <h2 style="margin-top: 35px; cursor: pointer">Award-Winning Movies:</h2>
     </div>
 
     <main id="award-winning"></main>
 
     <div class="genres" style="display: flex; justify-content: space-between; align-items: center;">
-        <h2 id="director-spotlight-title" style="margin-top: 35px">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
+        <h2 id="director-spotlight-title" style="cursor: pointer; margin-top: 35px">Director's Spotlight: <span id="spotlight-director-name">Alfred Hitchcock</span></h2>
         <button id="change-director-btn" onclick="changeDirector()" style="padding: 5px 10px; cursor: pointer;">Change Director</button>
     </div>
 
     <main id="director-spotlight"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ACTION</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ACTION</span> Movies: </h2>
     </div>
 
     <main id="action"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">VIETNAMESE</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">VIETNAMESE</span> Movies: </h2>
     </div>
 
     <main id="vietnamese"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">KOREAN</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">KOREAN</span> Movies: </h2>
     </div>
 
     <main id="korean"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">INDIAN</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">INDIAN</span> Movies: </h2>
     </div>
 
     <main id="indian"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">TV SERIES</span>: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">TV SERIES</span>: </h2>
     </div>
 
     <main id="tv-series"></main>
 
     <div class="genres">
-        <h2 style="margin-top: 35px">Hidden Gems:</h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Hidden Gems:</h2>
     </div>
 
     <main id="hidden-gems"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">HORROR</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">HORROR</span> Movies: </h2>
     </div>
 
     <main id="horror"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">DOCUMENTARY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">DOCUMENTARY</span> Movies: </h2>
     </div>
 
     <main id="documentary"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ANIMATED</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ANIMATED</span> Movies: </h2>
     </div>
 
     <main id="animation"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">SCIENCE FICTION</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">SCIENCE FICTION</span> Movies: </h2>
     </div>
 
     <main id="sci-fi"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ROMANTIC</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ROMANTIC</span> Movies: </h2>
     </div>
 
     <main id="romantic"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">THRILLER</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">THRILLER</span> Movies: </h2>
     </div>
 
     <main id="thriller"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">MYSTERY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">MYSTERY</span> Movies: </h2>
     </div>
 
     <main id="mystery"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">ADVENTURE</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">ADVENTURE</span> Movies: </h2>
     </div>
 
     <main id="adventure"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">COMEDY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">COMEDY</span> Movies: </h2>
     </div>
 
     <main id="comedy"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">FANTASY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">FANTASY</span> Movies: </h2>
     </div>
 
     <main id="fantasy"></main>
 
     <div class="genres"  >
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">FAMILY</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">FAMILY</span> Movies: </h2>
     </div>
 
     <main id="family"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CRIME</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">CRIME</span> Movies: </h2>
     </div>
 
     <main id="crime"></main>
 
     <div class="genres">
-        <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC</span> Movies: </h2>
+        <h2 id="other" style="margin-top: 35px; cursor: pointer">Trending <span class="highlight">CLASSIC</span> Movies: </h2>
     </div>
 
     <main id="classic" style="margin-bottom: 230px"></main>
@@ -285,13 +285,13 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
         <p>© 2024 The MovieVerse. All rights reserved.</p>
     </footer>
 
+    <button id="settings-btn" style="position: fixed; bottom: 220px">Settings</button>
     <button id="movie-match-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-match.html'" title="Find movies that match your mood and preferences!" style="bottom: 185px">Movie Match</button>
     <button id="movie-timeline-btn" onclick="window.location.href='MovieVerse-Frontend/html/movie-timeline.html'" style="bottom: 150px" title="Explore movies through different eras!">Movie Timeline</button>
     <button id="movie-of-the-day-btn" onclick="showMovieOfTheDay()" style="bottom: 115px" title="Get a recommended movie to watch for today!">Recommendation</button>
     <button id="discussions-btn" onclick="window.location.href='MovieVerse-Frontend/html/chatbot.html'" style="bottom: 80px" 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: 45px" title="Play a quick trivia to test your knowledge about movies!">MovieVerse Trivia</button>
-    <button id="back-to-top-btn" style="bottom: 10px" onclick="window.location.href='#homepage-header'">Back To Top</button>
-    <button id="settings-btn" style="position: fixed; bottom: 220px">Settings</button>
+    <button id="back-to-top-btn" style="bottom: 10px">Back To Top</button>
 
     <script>
         document.getElementById('settings-btn').addEventListener('click', () => {
@@ -314,7 +314,7 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
                         }
 
                         if (targetDiv) {
-                            targetDiv.scrollIntoView({behavior: 'smooth'});
+                            targetDiv.scrollIntoView({ behavior: 'smooth' });
                         }
                     }
                     else {
@@ -323,6 +323,20 @@ <h2 id="other" style="margin-top: 35px">Trending <span class="highlight">CLASSIC
                 });
             });
 
+            document.getElementById('back-to-top-btn').addEventListener('click', function(e) {
+                e.preventDefault();
+
+                document.getElementById('homepage-header').scrollIntoView({ behavior: 'smooth' });
+            });
+
+            const sectionTitles = document.querySelectorAll('.genres h2');
+
+            sectionTitles.forEach(title => {
+                title.addEventListener('click', function() {
+                    this.parentElement.scrollIntoView({ behavior: 'smooth' });
+                });
+            });
+
             function applySettings() {
                 const savedBg = localStorage.getItem('backgroundImage');
                 const savedTextColor = localStorage.getItem('textColor');
diff --git a/manifest.json b/manifest.json
index c83dbde5..d6a967c1 100644
--- a/manifest.json
+++ b/manifest.json
@@ -6,7 +6,7 @@
   "background_color": "#ffffff",
   "theme_color": "#7378c5",
   "author": "Son Nguyen Hoang",
-  "description": "An app that provides you with the latest movies and TV shows, and also allows you to save your favorites, create watchlists, and so much more!",
+  "description": "An interactive app that provides you with the latest movies and TV shows, and also allows you to save your favorites, create watchlists, and so much more!",
   "icons": [
     {
       "src": "images/image-192x192.png",
diff --git a/microfrontend-layout.html b/microfrontend-layout.html
index d163dbab..a8496ca9 100644
--- a/microfrontend-layout.html
+++ b/microfrontend-layout.html
@@ -4,8 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>The MovieVerse App - Microfrontend Layout</title>
+
     <!-- Load SystemJS, required for single-spa -->
     <script src="https://unpkg.com/systemjs/dist/system.js"></script>
+
     <!-- SystemJS configuration -->
     <script src="MovieVerse-Frontend/js/systemjs-importmap.js"></script>
     <link rel="manifest" href="manifest.json">
@@ -52,4 +54,4 @@
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file