diff --git a/src/app.html b/src/app.html
index 719a911..fc8927b 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,7 +1,6 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <title>FFXIV Journey</title>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/src/lib/components/ActionBar.svelte b/src/lib/components/ActionBar.svelte
index 80e5298..cc832cf 100644
--- a/src/lib/components/ActionBar.svelte
+++ b/src/lib/components/ActionBar.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
+  import { slide } from "svelte/transition";
   import {
     autoMode,
     toggleAutoMode,
-    showToggleTooltip,
-    enableToggleTooltip,
-    disableToggleTooltip,
     showScrollToTop,
   } from "$lib/stores/actionBarStore";
+  import Tooltip from "./Tooltip.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -23,21 +22,20 @@
     dispatch("scrollToLastQuest");
   }
 
+  let tooltipTarget: HTMLElement | null = null;
+
   export let lastCheckedQuestId: number | null = null;
 </script>
 
 <div
+  transition:slide
   id="action-bar"
   class="fixed md:absolute top-1 sm:top-2 mt-2 bg-white rounded-lg p-1 sm:p-2 shadow flex items-center justify-between z-50"
 >
   <!-- Toggle Button -->
-  <div class="flex items-center">
+  <div bind:this={tooltipTarget} class="flex items-center">
     <button
       on:click={toggleAutoMode}
-      on:mouseover={enableToggleTooltip}
-      on:mouseleave={disableToggleTooltip}
-      on:focus={enableToggleTooltip}
-      on:blur={disableToggleTooltip}
       class={`w-10 h-5 sm:w-12 sm:h-6 flex items-center rounded-full p-1 transition-colors duration-300 ${
         $autoMode ? "bg-gray-300" : "bg-blue-500"
       }`}
@@ -50,13 +48,12 @@
     </button>
 
     <!-- Tooltip for Auto/Manual Mode -->
-    {#if $showToggleTooltip}
-      <div
-        class="ml-2 bg-gray-800 text-white text-xs rounded py-1 px-2 shadow-lg"
-      >
-        {$autoMode ? "Autochecking Quests" : "Manual Quest Checking"}
-      </div>
-    {/if}
+    <Tooltip
+      targetElement={tooltipTarget}
+      text={$autoMode ? "Autochecking Quests" : "Manual Quest Checking"}
+      inlineMode={true}
+      offsetX={5}
+    ></Tooltip>
   </div>
 
   <!-- Share progress generate -->
diff --git a/src/lib/components/Progress.svelte b/src/lib/components/Progress.svelte
index 908a623..0307356 100644
--- a/src/lib/components/Progress.svelte
+++ b/src/lib/components/Progress.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+  import { fade } from "svelte/transition";
+
   import { progress } from "$lib/stores/progressStore";
   import type { ExpansionProgress } from "$lib/stores/questsStore";
-  import { onMount } from "svelte";
 
   let progressData: Record<string, ExpansionProgress> = {};
 
@@ -14,11 +16,12 @@
 </script>
 
 <div
+  transition:fade
   class="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4 bg-white rounded-lg p-4 shadow"
 >
   {#each Object.entries(progressData) as [name, { completed, total, percent }] (name)}
     <div class="flex flex-col items-center">
-      <!-- Expansion Name with Progress Stats -->
+      <!-- Expansion Name -->
       <p class="font-semibold text-gray-700">
         {name}
         <span class="inline sm:hidden ml-1">({completed}/{total})</span>
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index f4f4b87..71b9d9b 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher, onMount, onDestroy } from "svelte";
+  import { fade } from "svelte/transition";
 
   export let placeholder: string = "Search...";
   export let value: string = ""; // Bound to the parent component
@@ -40,7 +41,7 @@
   });
 </script>
 
-<div class="mb-6 flex relative">
+<div transition:fade class="mb-6 flex relative">
   <input
     type="text"
     bind:value={inputValue}
diff --git a/src/lib/components/Title.svelte b/src/lib/components/Title.svelte
index 0c6ef14..acfe0c7 100644
--- a/src/lib/components/Title.svelte
+++ b/src/lib/components/Title.svelte
@@ -1,56 +1,14 @@
 <script>
   import { slide } from "svelte/transition";
   import { loading } from "../stores/questsStore";
-  import {
-    showHideTooltip,
-    enableHideTooltip,
-    disableHideTooltip,
-  } from "$lib/stores/titleStore";
 </script>
 
 {#if $loading}
   <div
-    class="relative flex flex-col mb-8 justify-center items-center"
     transition:slide
+    class="relative flex flex-col mb-8 justify-center items-center"
   >
     <div class="bg-white rounded-lg p-2 shadow max-w-xl w-full relative">
-      <!-- Hide Button -->
-      <button
-        on:mouseover={enableHideTooltip}
-        on:focus={enableHideTooltip}
-        on:mouseleave={disableHideTooltip}
-        on:blur={disableHideTooltip}
-        class="absolute top-2 right-2 p-3 group"
-      >
-        <svg
-          fill="currentColor"
-          height="14px"
-          width="14px"
-          viewBox="0 0 330 330"
-          xml:space="preserve"
-          class="text-gray-300 group-hover:text-blue-500 transition-colors duration-200"
-        >
-          <path
-            d="M325.607,304.394l-63.479-63.479c38.57-29.035,63.522-64.92,65.247-67.437c3.501-5.11,3.501-11.846,0-16.956
-        c-2.925-4.269-72.659-104.544-162.371-104.544c-25.872,0-50.075,8.345-71.499,20.313L25.607,4.394
-        c-5.857-5.858-15.355-5.858-21.213,0c-5.858,5.858-5.858,15.355,0,21.213l63.478,63.478C29.299,118.12,4.35,154.006,2.625,156.523
-        c-3.5,5.109-3.5,11.845,0,16.955c2.925,4.268,72.65,104.546,162.378,104.546c25.868,0,50.069-8.345,71.493-20.314l67.897,67.898
-        C307.323,328.536,311.161,330,315,330c3.839,0,7.678-1.464,10.606-4.394C331.465,319.749,331.465,310.252,325.607,304.394z
-        M165.003,81.977c60.26,0,113.408,60.338,131.257,83.022c-9.673,12.294-29.705,35.629-55.609,54.439L115.673,94.461
-        C131.079,86.902,147.736,81.977,165.003,81.977z M165.003,248.023c-60.285,0-113.439-60.364-131.273-83.037
-        c9.651-12.303,29.652-35.658,55.574-54.47l124.99,124.99C198.884,243.084,182.236,248.023,165.003,248.023z"
-          />
-        </svg>
-        {#if showHideTooltip}
-          <!-- Tooltip for Hide Button -->
-          <div
-            class="absolute top-full mt-1 right-0 bg-gray-800 text-white text-xs rounded py-1 px-2 shadow-lg"
-          >
-            Hide!
-          </div>
-        {/if}
-      </button>
-
       <div class="text-center">
         <img src="logo.png" alt="FFXIV Journey" class="h-16 mx-auto" />
         <h1 class="text-3xl font-bold text-blue-600 mt-2">
@@ -66,7 +24,7 @@
     </div>
   </div>
 {:else}
-  <div class="flex justify-end my-2">
+  <div transition:slide class="flex justify-end my-2">
     <div
       class="group flex items-center p-3 bg-white rounded-lg shadow relative transition-all duration-300"
     >
diff --git a/src/lib/components/Tooltip.svelte b/src/lib/components/Tooltip.svelte
new file mode 100644
index 0000000..03f943d
--- /dev/null
+++ b/src/lib/components/Tooltip.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+  import { onDestroy } from "svelte";
+
+  export let text: string;
+  export let targetElement: HTMLElement | null = null;
+  export let offsetX: number = 0;
+  export let offsetY: number = 0;
+  export let orientation: "top" | "bottom" | "left" | "right" = "top";
+  export let inlineMode: boolean = false;
+
+  let tooltipElement: HTMLElement | null = null;
+  let showTooltip = false;
+  let style = "";
+
+  function handleMouseOver() {
+    showTooltip = true;
+  }
+
+  function handleMouseLeave() {
+    showTooltip = false;
+  }
+
+  // Attach and detach event listeners dynamically when `targetElement` changes
+  let currentTarget: HTMLElement | null = null;
+
+  $: {
+    // Detach event listeners from the previous target
+    if (currentTarget) {
+      console.log(
+        "Removing event listeners from currentTarget:",
+        currentTarget
+      );
+      currentTarget.removeEventListener("mouseover", handleMouseOver);
+      currentTarget.removeEventListener("mouseleave", handleMouseLeave);
+    }
+
+    // Attach event listeners to the new target
+    if (targetElement) {
+      console.log("Attaching event listeners to targetElement:", targetElement);
+      targetElement.addEventListener("mouseover", handleMouseOver);
+      targetElement.addEventListener("mouseleave", handleMouseLeave);
+      currentTarget = targetElement; // Track the current target for cleanup
+    }
+  }
+
+  onDestroy(() => {
+    if (currentTarget) {
+      currentTarget.removeEventListener("mouseover", handleMouseOver);
+      currentTarget.removeEventListener("mouseleave", handleMouseLeave);
+    }
+  });
+
+  // Dynamically calculate tooltip position
+  $: if (!inlineMode && targetElement && tooltipElement) {
+    const rect = targetElement.getBoundingClientRect();
+    const tooltipRect = tooltipElement.getBoundingClientRect();
+
+    switch (orientation) {
+      case "top":
+        style = `top: ${rect.top + window.scrollY - tooltipRect.height - offsetY}px; 
+                 left: ${rect.left + window.scrollX + rect.width / 2 - tooltipRect.width / 2 + offsetX}px;`;
+        break;
+      case "bottom":
+        style = `top: ${rect.bottom + window.scrollY + offsetY}px; 
+                 left: ${rect.left + window.scrollX + rect.width / 2 - tooltipRect.width / 2 + offsetX}px;`;
+        break;
+      case "left":
+        style = `top: ${rect.top + window.scrollY + rect.height / 2 - tooltipRect.height / 2 + offsetY}px; 
+                 left: ${rect.left + window.scrollX - tooltipRect.width - offsetX}px;`;
+        break;
+      case "right":
+        style = `top: ${rect.top + window.scrollY + rect.height / 2 - tooltipRect.height / 2 + offsetY}px; 
+                 left: ${rect.right + window.scrollX + offsetX}px;`;
+        break;
+    }
+  }
+</script>
+
+{#if showTooltip}
+  {#if inlineMode}
+    <span
+      transition:fade
+      class="bg-gray-800 text-white text-xs rounded px-2 py-1 shadow-lg z-50"
+      style="margin-top: {offsetY}px; margin-left: {offsetX}px;"
+    >
+      {text}
+    </span>
+  {:else}
+    <div
+      transition:fade
+      bind:this={tooltipElement}
+      class="bg-gray-800 text-white text-xs rounded px-2 py-1 shadow-lg z-50 fixed"
+      {style}
+    >
+      {text}
+    </div>
+  {/if}
+{/if}
diff --git a/src/lib/stores/actionBarStore.ts b/src/lib/stores/actionBarStore.ts
index f7d70d0..3de59d0 100644
--- a/src/lib/stores/actionBarStore.ts
+++ b/src/lib/stores/actionBarStore.ts
@@ -1,21 +1,12 @@
 import { writable } from "svelte/store";
 
 export const autoMode = writable(true);
-export const showToggleTooltip = writable(false);
 export const showScrollToTop = writable(false);
 
 export function toggleAutoMode() {
   autoMode.update((value) => !value);
 }
 
-export function enableToggleTooltip() {
-  showToggleTooltip.set(true);
-}
-
-export function disableToggleTooltip() {
-  showToggleTooltip.set(false);
-}
-
 export function enableScrollToTop() {
   showScrollToTop.set(true);
 }
diff --git a/src/lib/stores/titleStore.ts b/src/lib/stores/titleStore.ts
deleted file mode 100644
index e8ddc65..0000000
--- a/src/lib/stores/titleStore.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { writable } from "svelte/store";
-
-export const showHideTooltip = writable(false);
-export const showTitle = writable(true);
-
-export function toggleTitleVisibility() {
-  showTitle.update((value) => !value);
-}
-
-export function enableHideTooltip() {
-  showHideTooltip.set(true);
-}
-
-export function disableHideTooltip() {
-  showHideTooltip.set(false);
-}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index bd58786..4b57609 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
-  import { get } from "svelte/store";
+  // Dependencies imports
   import { onMount, onDestroy, tick } from "svelte";
-
+  import { fade } from "svelte/transition";
+  import { get } from "svelte/store";
   import { debounce } from "lodash";
   import {
     compressToEncodedURIComponent,
     decompressFromEncodedURIComponent,
   } from "lz-string";
 
+  // Application imports
   import "../app.css";
   import { base } from "$app/paths";
+  import type { QuestsState } from "./+page";
+
+  // Lib imports
   import {
     quests,
     loading,
@@ -21,43 +26,37 @@
     updateCurrentExpansion,
   } from "$lib/stores/questsStore";
   import { calculateAllProgress } from "$lib/stores/progressStore";
-  import { showTitle } from "$lib/stores/titleStore";
-  import Title from "$lib/components/Title.svelte";
-  import ActionBar from "$lib/components/ActionBar.svelte";
-  import Progress from "$lib/components/Progress.svelte";
-  import Footer from "$lib/components/Footer.svelte";
   import { getImageUrl, getOldImageUrl } from "$lib/services/xivapi";
   import {
     getGarlandToolsQuestURLByID,
     sanitizeFFXIVMarkUp,
     createMagicParticles,
   } from "$lib/utils";
-
-  import type { QuestsState } from "./+page";
   import type { Quest, ExpansionsQuests, Expansion } from "$lib/model";
+
+  // Component imports
+  import Title from "$lib/components/Title.svelte";
+  import ActionBar from "$lib/components/ActionBar.svelte";
+  import Progress from "$lib/components/Progress.svelte";
+  import Footer from "$lib/components/Footer.svelte";
   import Loading from "$lib/components/Loading.svelte";
   import Search from "$lib/components/Search.svelte";
+  import Tooltip from "$lib/components/Tooltip.svelte";
 
+  // Exports
   export let data: QuestsState;
 
+  // Properties
   let openExpansions: Record<string, boolean> = {};
   let openLocations: Record<string, Record<string, boolean>> = {};
-  let autoMode = true;
-  let showCurrentTooltip = false;
-  let searchInput: HTMLInputElement;
   let searchQuery = "";
+  let autoMode = true;
+  let showScrollToTop = false;
   let lastCheckedQuestId: number | null = null;
   let highlightedQuestId: number | null = null;
+  let tooltipTarget: HTMLElement | null = null;
+  let searchInput: HTMLInputElement;
 
-  function enableCurrentTooltip() {
-    showCurrentTooltip = true;
-  }
-
-  function disableCurrentTooltip() {
-    showCurrentTooltip = false;
-  }
-
-  // Reset the state of expansions and locations to be closed initially
   function resetOpenStates() {
     const $quests = get(quests);
     openExpansions = {};
@@ -73,7 +72,6 @@
     }
   }
 
-  // Filter quests based on search query
   function filterQuests(): void {
     const $quests = get(quests);
     resetOpenStates();
@@ -122,7 +120,6 @@
   }
   const debouncedFilterQuests = debounce(filterQuests, 250);
 
-  // Find the last checked quest based on the order of expansions in the quests store
   function findLastCheckedQuest(): void {
     const $completedQuests = get(completedQuests);
     const $quests = get(quests);
@@ -146,7 +143,6 @@
     lastCheckedQuestId = lastCheckedQuest ? lastCheckedQuest["#"] : null;
   }
 
-  // Update the background image based on the current expansion
   function updateBackground() {
     const bgImage = get(currentExpansion)
       ? `${base}/background_${get(currentExpansion).replace(/\s/g, "").toLowerCase()}.webp`
@@ -224,7 +220,6 @@
     });
   }
 
-  // Generate a compact shareable link
   function generateShareableLink() {
     const completed = get(completedQuests);
     const completedIds = Object.keys(completed).filter(
@@ -251,7 +246,6 @@
       .catch(() => alert("Failed to copy link. Please try again."));
   }
 
-  let showScrollToTop = false;
   function handleScroll() {
     const contentContainer =
       document.getElementsByClassName("content-container")[0];
@@ -259,7 +253,6 @@
 
     showScrollToTop = contentContainer.scrollTop > 140;
 
-    if (!showTitle) return;
     if (showScrollToTop) {
       detachActionBar();
     } else {
@@ -267,7 +260,6 @@
     }
   }
 
-  // Handle checkbox changes and update quest completion state
   function handleCheckboxChange(event: Event, quest: Quest) {
     const input = event.target as HTMLInputElement;
     createMagicParticles(input);
@@ -287,7 +279,6 @@
     debouncedFilterQuests(); // Trigger the debounced filter
   }
 
-  // Load shared progress from a compact link
   function loadSharedProgress() {
     const urlParams = new URLSearchParams(window.location.search);
     const compressedState = urlParams.get("progress");
@@ -312,23 +303,10 @@
     }
   }
 
-  let metaTitle = "FFXIV Journey Tracker";
-  let metaDescription =
-    "Track and share your Main Story Quest progress in FFXIV with ease!";
-  let metaImage = "/logo.png";
-  function setupDynamicMetaTags() {
-    const completed = Object.keys(get(completedQuests)).length;
-    const expansion = get(currentExpansion) || "All Expansions";
-    metaDescription = `Completed ${completed} quests in ${expansion}! Share your progress with friends!`;
-  }
-
   onMount(() => {
     // Load shared progress if available
     loadSharedProgress();
 
-    // setup meta tags
-    setupDynamicMetaTags();
-
     data.quests.then((loadedQuests: ExpansionsQuests) => {
       // Init quests
       quests.set(loadedQuests);
@@ -369,23 +347,23 @@
   $: updateBackground();
 </script>
 
-<!-- Dynamic head -->
 <svelte:head>
-  <title>{metaTitle}</title>
-  <meta property="og:title" content={metaTitle} />
-  <meta property="og:description" content={metaDescription} />
-  <meta property="og:image" content={metaImage} />
+  <!-- OG Tags -->
+  <title>FFXIV Journey</title>
   <meta property="og:type" content="website" />
   <meta property="og:image:alt" content="FFXIV MSQ Progress Tracker preview" />
+  <!-- Preload backgrounds -->
+  <link rel="prefetch" href="background_arealmreborn.webp" as="image" />
+  <link rel="prefetch" href="background_heavensward.webp" as="image" />
+  <link rel="prefetch" href="background_stormblood.webp" as="image" />
+  <link rel="prefetch" href="background_shadowbringers.webp" as="image" />
+  <link rel="prefetch" href="background_endwalker.webp" as="image" />
+  <link rel="prefetch" href="background_dawntrail.webp" as="image" />
 </svelte:head>
 
-<!-- Title -->
-{#if showTitle}
-  <Title />
-{/if}
+<Title />
 
 {#if !$loading}
-  <!-- Action Bar -->
   <ActionBar
     {lastCheckedQuestId}
     on:generateLink={generateShareableLink}
@@ -393,11 +371,9 @@
     on:scrollToTop={scrollToTop}
   />
 
-  <!--- Progress --->
   <Progress />
 {/if}
 
-<!-- Content -->
 {#if $loading}
   <Loading />
 {:else}
@@ -408,7 +384,7 @@
   />
 
   {#each $filteredQuests as expansion}
-    <details class="mb-8" open={openExpansions[expansion.name]}>
+    <details transition:fade class="mb-8" open={openExpansions[expansion.name]}>
       <summary
         class="text-2xl font-semibold text-gray-800 cursor-pointer mb-4 bg-white rounded-lg p-4 shadow"
       >
@@ -451,22 +427,16 @@
                     </p>
                     {#if quest["#"] === lastCheckedQuestId}
                       <img
+                        bind:this={tooltipTarget}
                         src="moogle_current_quest.png"
                         alt="Current Quest"
                         class="ml-2 h-8 w-8"
-                        on:mouseover={enableCurrentTooltip}
-                        on:mouseleave={disableCurrentTooltip}
-                        on:focus={enableCurrentTooltip}
-                        on:blur={disableCurrentTooltip}
                       />
-                      <!-- Tooltip for Current Quest Icon -->
-                      {#if showCurrentTooltip}
-                        <div
-                          class="ml-2 bg-gray-800 text-white text-xs rounded py-1 px-2 shadow-lg"
-                        >
-                          Current MSQ Quest!
-                        </div>
-                      {/if}
+                      <Tooltip
+                        text="Current MSQ Quest!"
+                        targetElement={tooltipTarget}
+                        orientation="right"
+                      />
                     {/if}
                   </div>
                   <p class="text-sm text-gray-500 mt-1 hidden sm:block">
