diff --git a/src/lib/@types/BuffTypes.d.ts b/src/lib/@types/BuffTypes.d.ts
index 61f6b70..cee1f3b 100644
--- a/src/lib/@types/BuffTypes.d.ts
+++ b/src/lib/@types/BuffTypes.d.ts
@@ -1053,9 +1053,18 @@ export namespace BuffTypes {
 			currency: string;
 			currency_symbol: string;
 			days: 7 | 30 | 180;
-			price_history: [number, number][];
+			lines: {
+				allow: boolean;
+				chart_type: 'price' | 'number';
+				color: string;
+				disabled_confirm: any | null;
+				key: string;
+				name: string;
+				points: [number, number][];
+				show: boolean;
+			}[];
 			price_type: 'Steam price' | 'BUFF price';
-			steam_price_currency: string;
+			steam_price_currency?: string;
 		}
 
 		export interface Response {
diff --git a/src/lib/components/DarkMode.svelte b/src/lib/components/DarkMode.svelte
index 82f61cf..7f335b8 100644
--- a/src/lib/components/DarkMode.svelte
+++ b/src/lib/components/DarkMode.svelte
@@ -1,29 +1,26 @@
 <script lang="ts">
 import { onMount } from 'svelte';
-import { cn } from '$lib/utils';
 import MoonIcon from '../icons/moon.svg';
 import SunIcon from '../icons/sun.svg';
 import { ExtensionStorage } from '../util/storage';
 import Badge from './ui/badge/badge.svelte';
 import Button from './ui/button/button.svelte';
 
-let darkMode = true;
-
-$: isOn = darkMode;
+let darkMode = $state(true);
 
 onMount(async () => {
 	darkMode = await ExtensionStorage.darkMode.getValue();
 });
 
 const toggle = async () => {
-	isOn = !isOn;
-	await ExtensionStorage.darkMode.setValue(isOn);
+	darkMode = !darkMode;
+	await ExtensionStorage.darkMode.setValue(darkMode);
 };
 </script>
 
 <div class="flex items-center gap-2">
-	<Button variant="ghost" class="flex items-center h-14 w-28 gap-2" on:click={toggle}>
-		<img src={isOn ? MoonIcon : SunIcon} class="h-12" alt="Dark Mode Icon" />
-		<Badge class={isOn ? "bg-[#00b6ff]" : "bg-[#ffbe00]"}>{isOn ? "ON" : "OFF"}</Badge>
+	<Button variant="ghost" class="flex items-center h-14 w-28 gap-2" onclick={toggle}>
+		<img src={darkMode ? MoonIcon : SunIcon} class="h-12" alt="Dark Mode Icon" />
+		<Badge class={darkMode ? "bg-[#00b6ff]" : "bg-[#ffbe00]"}>{darkMode ? "ON" : "OFF"}</Badge>
 	</Button>
 </div>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 817280d..62141c7 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -14,7 +14,7 @@ const version = `v. ${browser.runtime.getManifest().version}`;
 		<Badge variant="outline" class="border-muted text-muted-foreground">{version}</Badge>
 	</div>
 	<div class="flex gap-1">
-		<Button variant="ghost" size="icon" on:click={() => window.open(DISCORD_URL)} title={DISCORD_URL}>
+		<Button variant="ghost" size="icon" onclick={() => window.open(DISCORD_URL)} title={DISCORD_URL}>
 			<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 256 256" {...$$props}>
 				<g fill="none">
 					<rect width="256" height="256" fill="#5865f2" rx="60" />
@@ -32,7 +32,7 @@ const version = `v. ${browser.runtime.getManifest().version}`;
 				</g>
 			</svg>
 		</Button>
-		<Button variant="ghost" size="icon" on:click={() => window.open(GITHUB_URL)} title={GITHUB_URL}>
+		<Button variant="ghost" size="icon" onclick={() => window.open(GITHUB_URL)} title={GITHUB_URL}>
 			<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"
 				><path
 					fill="white"
diff --git a/src/lib/components/InfoTooltip.svelte b/src/lib/components/InfoTooltip.svelte
index d96bbbd..fc16022 100644
--- a/src/lib/components/InfoTooltip.svelte
+++ b/src/lib/components/InfoTooltip.svelte
@@ -1,23 +1,25 @@
 <script lang="ts">
 import Decimal from 'decimal.js';
+import type { Snippet } from 'svelte';
 import type { BuffTypes } from '../@types/BuffTypes';
 
-export let data: BuffTypes.PriceHistory.Data;
-let isHovered = false,
-	isClicked = false;
+let { data, children }: { data: BuffTypes.PriceHistory.Data; children: Snippet } = $props();
+let isHovered = $state(false),
+	isClicked = $state(false);
 
-const minPrice = data.price_history.reduce((a, b) => Math.min(a, b[1]), Infinity);
-const maxPrice = data.price_history.reduce((a, b) => Math.max(a, b[1]), -Infinity);
-const priceChange = new Decimal(data.price_history[data.price_history.length - 1][1]).minus(data.price_history[0][1]);
-const priceChangePercentage = priceChange.div(data.price_history[0][1]).times(100);
+let listingLine = $derived(data.lines.find((line) => line.key === 'sell_min_price_history')?.points);
+let minPrice = $derived(listingLine?.reduce((a, b) => Math.min(a, b[1]), Infinity));
+let maxPrice = $derived(listingLine?.reduce((a, b) => Math.max(a, b[1]), -Infinity));
+let priceChange = $derived(new Decimal(listingLine?.[listingLine.length - 1][1] ?? 0).minus(listingLine?.[0][1] ?? 0));
+let priceChangePercentage = $derived(priceChange.div(listingLine?.[0][1] ?? 0).times(100));
 
-const minElement = data.price_history.find((e) => e[1] === minPrice)!;
-const maxElement = data.price_history.find((e) => e[1] === maxPrice)!;
+let minElement = $derived(listingLine?.find((e) => e[1] === minPrice)!);
+let maxElement = $derived(listingLine?.find((e) => e[1] === maxPrice)!);
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<div on:mouseover={() => (isHovered = true)} on:mouseleave={() => (isHovered = false)} on:click={() => (isClicked = !isClicked)} role="none">
-	<slot />
+<div onmouseover={() => (isHovered = true)} onmouseleave={() => (isHovered = false)} onclick={() => (isClicked = !isClicked)} onfocus={() => (isHovered = true)} onblur={() => (isHovered = false)} role="none">
+	<!-- <slot /> -->
+	 {@render children()}
 </div>
 
 {#if isHovered || isClicked}
@@ -39,7 +41,7 @@ const maxElement = data.price_history.find((e) => e[1] === maxPrice)!;
 					{priceChange.isNegative() ? "-" : "+"}{data.currency_symbol}{priceChange.absoluteValue().toSD(3)}
 					<span class="font-medium text-base">({priceChangePercentage.isNaN() ? "0" : priceChangePercentage.toSD(3)}%)</span>
 				</div>
-				<div class="stat-desc">{new Date(data.price_history[0][0]).toLocaleDateString()} - {new Date(data.price_history[data.price_history.length - 1][0]).toLocaleDateString()}</div>
+				<div class="stat-desc">{new Date(listingLine?.[0][0] ?? Date.now()).toLocaleDateString()} - {new Date(listingLine?.[listingLine.length - 1][0] ?? 0).toLocaleDateString()}</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/lib/components/NavLink.svelte b/src/lib/components/NavLink.svelte
index d4d5e46..d91eb06 100644
--- a/src/lib/components/NavLink.svelte
+++ b/src/lib/components/NavLink.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
 import { openLink } from '../util/svelteUtil';
 
-export let src: string;
-export let link: string;
-export let imgStyle: string = '';
+let { src, link, imgStyle }: { src: string; link: string; imgStyle?: string } = $props();
 </script>
-<button class="btn-ghost rounded-full" on:click={() => openLink(link)}>
+<button class="btn-ghost rounded-full" onclick={() => openLink(link)}>
     <img {src} alt="Social Link" class={imgStyle} />
 </button>
\ No newline at end of file
diff --git a/src/lib/components/PatternPopup.svelte b/src/lib/components/PatternPopup.svelte
index 3a40c92..befaf55 100644
--- a/src/lib/components/PatternPopup.svelte
+++ b/src/lib/components/PatternPopup.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { Snippet } from 'svelte';
 import { fade, slide } from 'svelte/transition';
 import BetterBuffLogo from '../../public/icon/512.png';
 import type { BetterBuff } from '../@types/BetterBuff';
@@ -9,19 +10,20 @@ type Filter = {
 	value: number;
 };
 
-export let weapon: string;
-export let data: BetterBuff.CHPatterns['weapon'];
+let { weapon, data, children }: { weapon: string; data: BetterBuff.CHPatterns['weapon']; children?: Snippet } = $props();
+
 const patterns = [...Array(1000).keys()].map((i) => [i, `${data.playside[i]}/${data.backside[i]}`]);
-let isClicked = false,
-	searchTerm = '',
-	extended = false,
-	filters: Filter[] = [],
-	newFilterSite: Filter['site'] = 'playside',
-	newFilterRange: Filter['range'] = 'min',
-	newFilterValue = 0,
-	filteredPatterns = patterns;
 
-$: filterItems = filters.length;
+let isClicked = $state(false);
+let searchTerm = $state('');
+let extended = $state(false);
+let filters = $state<Filter[]>([]);
+let newFilterSite = $state<Filter['site']>('playside');
+let newFilterRange = $state<Filter['range']>('min');
+let newFilterValue = $state(0);
+let filteredPatterns = $state(patterns);
+
+let filterItems = $derived(filters.length);
 
 function filterPatterns() {
 	filteredPatterns = patterns.filter((pattern, index) => {
@@ -53,29 +55,27 @@ function addFilter() {
 	newFilterRange = 'min';
 	newFilterValue = 0;
 
-	filterItems += 1;
 	filterPatterns();
 }
 
 function removeFilter(index: number) {
 	filters.splice(index, 1);
-	filterItems -= 1;
 	filterPatterns();
 }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div on:click={() => (isClicked = !isClicked)}>
-	<slot />
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div onclick={() => (isClicked = !isClicked)} role="button" tabindex="0">
+	{@render children?.()}
 </div>
 
 {#if isClicked}
-	<div class="absolute rounded-lg bg-[#191e24] p-4 pt-2 mt-2 z-50" transition:fade={{ delay: 0, duration: 200 }}>
+	<div class="absolute rounded-lg bg-[#191e24] p-4 pt-2 mt-2 z-50 text-white" transition:fade={{ delay: 0, duration: 200 }}>
 		<div class="flex justify-between items-center gap-2 pb-1.5">
 			<img src={BetterBuffLogo} class="w-8 h-8" alt="BetterBuff Logo" />
 			<h2 class="text-xl font-bold">Pattern Explorer</h2>
-			<button class="btn btn-circle btn-ghost btn-sm text-black" on:click={() => (isClicked = !isClicked)}>
+			<button class="btn btn-circle btn-ghost btn-sm" onclick={() => (isClicked = !isClicked)} aria-label="Close">
 				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
 					><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg
 				>
@@ -86,43 +86,43 @@ function removeFilter(index: number) {
 				<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
 				<div class="relative">
 					<span class="absolute inset-y-0 left-0 flex items-center pl-1">
-						<button type="submit" class="btn btn-ghost h-8 min-h-8 p-1 focus:outline-none focus:shadow-outline">
+						<button type="submit" class="btn btn-ghost h-8 min-h-8 p-1 focus:outline-none focus:shadow-outline" aria-label="Search">
 							<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-5 h-5"
 								><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg
 							>
 						</button>
 					</span>
-					<input
-						type="search"
-						name="q"
-						class="input input-bordered h-8 bg-gray-800 py-1 text-sm text-white rounded-md pl-10 pr-2 focus:outline-none"
-						placeholder="Search patterns..."
-						bind:value={searchTerm}
-						on:input={filterPatterns}
-						autocomplete="off"
-					/>
-				</div>
-				<button class="btn btn-ghost btn-sm p-1 ml-2" on:click={() => (extended = !extended)}>
-					{#if extended}
-						<svg class="h-6 w-6" viewBox="0 0 24 24"><path fill="currentColor" d="m12 10.8l-4.6 4.6L6 14l6-6l6 6l-1.4 1.4z" /></svg>
-					{:else}
-						<svg class="h-6 w-6" viewBox="0 0 24 24"><path fill="currentColor" d="m12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8L18 9.4z" /></svg>
-					{/if}
-				</button>
+				<input
+					type="search"
+					name="q"
+					class="input input-bordered h-8 bg-gray-800 py-1 text-sm text-white rounded-md pl-10 pr-2 focus:outline-none"
+					placeholder="Search patterns..."
+					bind:value={searchTerm}
+					oninput={filterPatterns}
+					autocomplete="off"
+				/>
+			</div>
+			<button class="btn btn-ghost btn-sm p-1 ml-2" onclick={() => (extended = !extended)}>
+				{#if extended}
+					<svg class="h-6 w-6" viewBox="0 0 24 24"><path fill="currentColor" d="m12 10.8l-4.6 4.6L6 14l6-6l6 6l-1.4 1.4z" /></svg>
+				{:else}
+					<svg class="h-6 w-6" viewBox="0 0 24 24"><path fill="currentColor" d="m12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8L18 9.4z" /></svg>
+				{/if}
+			</button>
 			</div>
 			{#key filterItems}
 				{#if filterItems > 0}
 					<div class="flex items-center flex-wrap pt-2 max-w-64 gap-2">
-						{#each filters as { site, range, value }, index}
-							<div class="badge badge-info whitespace-nowrap pl-0 pr-1" transition:fade={{ delay: 100, duration: 200 }}>
-								<button class="btn btn-circle btn-ghost btn-xs" on:click={() => removeFilter(index)}>
-									<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current"
-										><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg
-									>
-								</button>
-								<span class="pr-0.5">{site === "playside" ? "front" : "back"}-{range}: {value}%</span>
-							</div>
-						{/each}
+					{#each filters as { site, range, value }, index}
+						<div class="badge badge-info whitespace-nowrap pl-0 pr-1" transition:fade={{ delay: 100, duration: 200 }}>
+							<button class="btn btn-circle btn-ghost btn-xs" onclick={() => removeFilter(index)} aria-label="Remove filter">
+								<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current"
+									><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg
+								>
+							</button>
+							<span class="pr-0.5">{site === "playside" ? "front" : "back"}-{range}: {value}%</span>
+						</div>
+					{/each}
 					</div>
 				{/if}
 			{/key}
@@ -136,10 +136,10 @@ function removeFilter(index: number) {
 						<option value="min">Min</option>
 						<option value="max">Max</option>
 					</select>
-					<input type="number" min="0" max="99" step="1" bind:value={newFilterValue} class="input input-sm w-10 pr-0 focus:outline-none" />
-					<button class="btn btn-square btn-outline btn-sm p-1 ml-2" on:click={addFilter}>
-						<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24"><path fill="#888888" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z" /></svg>
-					</button>
+				<input type="number" min="0" max="99" step="1" bind:value={newFilterValue} class="input input-sm w-10 pr-0 focus:outline-none" />
+				<button class="btn btn-square btn-outline btn-sm p-1 ml-2" onclick={addFilter} aria-label="Add filter">
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24"><path fill="#888888" d="M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z" /></svg>
+				</button>
 				</div>
 			{/if}
 		</form>
@@ -159,7 +159,7 @@ function removeFilter(index: number) {
 							<td class="py-1">{pattern[0]}</td>
 							<td class="py-1">{pattern[1]}</td>
 							<th class="py-1">
-								<a class="btn btn-square btn-ghost btn-xs" href="https://raw.githubusercontent.com/dnsmits/csbluegem_images/main/{weapon}/{weapon}_{pattern[0]}.png" target="_blank">
+								<a class="btn btn-square btn-ghost btn-xs" href="https://raw.githubusercontent.com/dnsmits/csbluegem_images/main/{weapon}/{weapon}_{pattern[0]}.png" target="_blank" aria-label="View pattern">
 									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
 										><path
 											fill="#888888"
diff --git a/src/lib/components/Popup.svelte b/src/lib/components/Popup.svelte
index b0114ab..c86fd09 100644
--- a/src/lib/components/Popup.svelte
+++ b/src/lib/components/Popup.svelte
@@ -13,7 +13,7 @@ import { DISCORD_URL } from '$lib/util/globals';
 import BBlogo from '/icon/512.png';
 import JoinDiscord from '/join_discord.png';
 import { ExtensionStorage } from '../util/storage';
-import BuyMeACoffee from './icons/BuyMeACoffee.svelte';
+import { BuyMeACoffee } from './icons';
 import ListingDifference from './SettingListingDifference.svelte';
 import SettingListingOptions from './SettingListingOptions.svelte';
 
@@ -43,7 +43,7 @@ const version = browser.runtime.getManifest().version;
 		<ScrollArea class="h-[488px] rounded-md">
 			<div class="w-full mx-4 border border-base-300 bg-card/90 rounded-lg p-5">
 				<p class="text-sm text-center">Currency conversion is already integrated into Buff itself. You can change your display currency in your Buff account settings:</p>
-				<Button variant="outline" class="w-full mt-2" on:click={() => window.open("https://buff.163.com/user-center/profile")} title="Open Buff Account Settings">
+				<Button variant="outline" class="w-full mt-2" onclick={() => window.open("https://buff.163.com/user-center/profile")} title="Open Buff Account Settings">
 					Open Buff Account Settings
 				</Button>
 			</div>
@@ -60,12 +60,12 @@ const version = browser.runtime.getManifest().version;
 				<div class="flex flex-col items-center justify-center gap-4 py-2">
 					<div class="flex items-center gap-2">
 						<p class="scroll-m-20 text-sm font-medium text-gray-600">based on</p>
-						<Button variant="ghost" class="py-1 px-2 h-7" on:click={() => window.open("https://github.com/PenguiniVogel/BuffUtility")}>
+						<Button variant="ghost" class="py-1 px-2 h-7" onclick={() => window.open("https://github.com/PenguiniVogel/BuffUtility")}>
 							<img class="h-6" src={BUlogo} alt="BuffUtility" />
 						</Button>
 					</div>
 					<Badge variant="secondary" class="border-muted text-base">BETA - Version {version}</Badge>
-					<Button variant="ghost" class="p-0 py-4" on:click={() => window.open(DISCORD_URL)}>
+					<Button variant="ghost" class="p-0 py-4" onclick={() => window.open(DISCORD_URL)}>
 						<img class="h-10" src={JoinDiscord} alt="Join us on Discord" />
 					</Button>
 				</div>
@@ -82,7 +82,7 @@ const version = browser.runtime.getManifest().version;
 					<p>
 						Built with 🖤 in Munich by
 						<!-- svelte-ignore a11y_click_events_have_key_events -->
-						<span class="cursor-pointer text-green-900" on:click={() => window.open("https://github.com/GODrums")} role="link" tabindex="-1">Rums</span>
+						<span class="cursor-pointer text-green-900" onclick={() => window.open("https://github.com/GODrums")} role="link" tabindex="-1">Rums</span>
 					</p>
 				</footer>
 			</div>
diff --git a/src/lib/components/PopupLayout.svelte b/src/lib/components/PopupLayout.svelte
index 6668dee..cd0f0ca 100644
--- a/src/lib/components/PopupLayout.svelte
+++ b/src/lib/components/PopupLayout.svelte
@@ -1,18 +1,21 @@
 <script lang="ts">
+import type { Snippet } from 'svelte';
 import Header from './Header.svelte';
 
-let m = { x: 0, y: 0 };
+let m = $state({ x: 0, y: 0 });
 
-function handleMousemove(event: any) {
+function handleMousemove(event: MouseEvent) {
 	m.x = event.clientX;
 	m.y = event.clientY;
 }
+
+let { children }: { children: Snippet } = $props();
 </script>
 
-<div class="dark flex flex-col bg-card text-card-foreground justify-between h-[600px] w-[350px] overflow-hidden heroBG" on:mousemove={handleMousemove} role="document">
+<div class="dark flex flex-col bg-card text-card-foreground justify-between h-[600px] w-[350px] overflow-hidden heroBG" onmousemove={handleMousemove} role="document">
 	<div class="absolute inset-0 pointer-events-none maskBG" style="mask-image: radial-gradient(100px at {m.x}px {m.y}px, black 0%, transparent 100%);"></div>
 	<Header />
-	<slot />
+	{@render children()}
 </div>
 
 <style>
diff --git a/src/lib/components/Power.svelte b/src/lib/components/Power.svelte
index df793a2..0752a09 100644
--- a/src/lib/components/Power.svelte
+++ b/src/lib/components/Power.svelte
@@ -6,23 +6,21 @@ import { ExtensionStorage } from '../util/storage';
 import Badge from './ui/badge/badge.svelte';
 import Button from './ui/button/button.svelte';
 
-let enabled = true;
-
-$: isOn = enabled;
+let enabled = $state(true);
 
 onMount(async () => {
 	enabled = await ExtensionStorage.enabled.getValue();
 });
 
 const toggle = async () => {
-	isOn = !isOn;
-	await ExtensionStorage.enabled.setValue(isOn);
+	enabled = !enabled;
+	await ExtensionStorage.enabled.setValue(enabled);
 };
 </script>
 
 <div class="flex items-center gap-2">
-    <Button variant="ghost" class="flex items-center h-14 w-28 gap-2" on:click={toggle}>
-        <img src={isOn ? PowerOn : PowerOff} class="h-12" alt="Power Icon" />
-        <Badge class={isOn ? 'bg-[#00b6ff]' : 'bg-[#ffbe00]'}>{isOn ? "ON" : "OFF"}</Badge>
+    <Button variant="ghost" class="flex items-center h-14 w-28 gap-2" onclick={toggle}>
+        <img src={enabled ? PowerOn : PowerOff} class="h-12" alt="Power Icon" />
+        <Badge class={enabled ? 'bg-[#00b6ff]' : 'bg-[#ffbe00]'}>{enabled ? "ON" : "OFF"}</Badge>
     </Button>
 </div>
\ No newline at end of file
diff --git a/src/lib/components/SettingCheckbox.svelte b/src/lib/components/SettingCheckbox.svelte
index a7e6cf2..d6c316b 100644
--- a/src/lib/components/SettingCheckbox.svelte
+++ b/src/lib/components/SettingCheckbox.svelte
@@ -1,25 +1,22 @@
 <script lang="ts">
-import { onMount } from 'svelte';
 import type { WxtStorageItem } from '#imports';
 import { MaterialSymbolsHelpRounded } from '$lib/components/icons';
 import Label from '$lib/components/ui/label/label.svelte';
 import * as Tooltip from '$lib/components/ui/tooltip';
 import Checkbox from './ui/checkbox/checkbox.svelte';
 
-export let text: string;
-export let storage: WxtStorageItem<boolean, {}>;
-export let dataTip: string;
+let { text, storage, dataTip }: { text: string; storage: WxtStorageItem<boolean, {}>; dataTip: string } = $props();
 
-$: checked = false;
+let checked = $state(false);
+
+$effect(() => {
+	storage.getValue().then((v) => (checked = v));
+});
 
 const storeValue = async () => {
 	checked = !checked;
 	await storage.setValue(checked);
 };
-
-onMount(async () => {
-	checked = await storage.getValue();
-});
 </script>
 
 <div class="w-full border border-base-300 bg-card/90 rounded-lg p-4 z-10">
diff --git a/src/lib/components/SettingListingDifference.svelte b/src/lib/components/SettingListingDifference.svelte
index 3076ce1..f2d7755 100644
--- a/src/lib/components/SettingListingDifference.svelte
+++ b/src/lib/components/SettingListingDifference.svelte
@@ -1,22 +1,20 @@
 <script lang="ts">
-import { onMount } from 'svelte';
 import * as Select from '$lib/components/ui/select';
 import * as Tooltip from '$lib/components/ui/tooltip';
 import { ExtensionStorage, type IStorage } from '../util/storage';
-import MaterialSymbolsHelpRounded from './icons/MaterialSymbolsHelpRounded.svelte';
+import { MaterialSymbolsHelpRounded } from './icons';
 import { Input } from './ui/input';
 import Label from './ui/label/label.svelte';
 
-let differenceStorage = ExtensionStorage.listingDifferenceStyle;
-let taxStorage = ExtensionStorage.platformTax;
-let denominatorStorage = ExtensionStorage.listingDenominator;
-let thresholdStorage = ExtensionStorage.profitThreshold;
+const differenceStorage = ExtensionStorage.listingDifferenceStyle;
+const taxStorage = ExtensionStorage.platformTax;
+const denominatorStorage = ExtensionStorage.listingDenominator;
+const thresholdStorage = ExtensionStorage.profitThreshold;
 
 const denominatorChoices = [
 	{ value: 0, label: 'Steam' },
 	{ value: 1, label: 'Buff Bid' },
 ];
-$: denominator = denominatorChoices[0];
 
 const differenceChoices = [
 	{ value: 0, label: 'None' },
@@ -25,16 +23,24 @@ const differenceChoices = [
 	{ value: 3, label: '% Difference' },
 	{ value: 4, label: 'Combined' },
 ];
-$: differenceValue = differenceChoices[1];
 
 const taxChoices = [
 	{ value: 0, label: 'Off' },
 	{ value: 1, label: 'On' },
 	{ value: 2, label: 'Inverted' },
 ];
-$: taxValue = taxChoices[0];
 
-$: threshold = 0;
+let denominator = $state(denominatorChoices[0]);
+let differenceValue = $state(differenceChoices[1]);
+let taxValue = $state(taxChoices[0]);
+let threshold = $state(0);
+
+$effect(() => {
+	differenceStorage.getValue().then((v) => (differenceValue = differenceChoices[v]));
+	taxStorage.getValue().then((v) => (taxValue = taxChoices[v]));
+	denominatorStorage.getValue().then((v) => (denominator = denominatorChoices[v]));
+	thresholdStorage.getValue().then((v) => (threshold = v));
+});
 
 const storeValue = async (selected: any) => {
 	differenceValue = selected;
@@ -54,13 +60,6 @@ const storeDenominator = async (selected: any) => {
 const storeThreshold = async () => {
 	await thresholdStorage.setValue(threshold as IStorage['profitThreshold']);
 };
-
-onMount(async () => {
-	differenceValue = differenceChoices[await differenceStorage.getValue()];
-	taxValue = taxChoices[await taxStorage.getValue()];
-	denominator = denominatorChoices[await denominatorStorage.getValue()];
-	threshold = await thresholdStorage.getValue();
-});
 </script>
 
 <div class="w-full mx-4 border border-base-300 bg-card/90 rounded-lg py-2 px-3">
diff --git a/src/lib/components/SettingListingOptions.svelte b/src/lib/components/SettingListingOptions.svelte
index 37f1393..d3ef8f4 100644
--- a/src/lib/components/SettingListingOptions.svelte
+++ b/src/lib/components/SettingListingOptions.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-import { onMount } from 'svelte';
 import * as Tooltip from '$lib/components/ui/tooltip';
 import { ExtensionStorage, type IStorage } from '../util/storage';
 import {
@@ -16,9 +15,9 @@ import {
 import Checkbox from './ui/checkbox/checkbox.svelte';
 import Label from './ui/label/label.svelte';
 
-export let dataTip: string;
+let { dataTip }: { dataTip: string } = $props();
 
-let choices: { [K in keyof IStorage['listingOptions']]: { label: string; icon: any } } = {
+const choices: { [K in keyof IStorage['listingOptions']]: { label: string; icon: any } } = {
 	'3dinspect': { label: '3D Inspect', icon: MageBox3d },
 	inspectIngame: { label: 'Inspect in game', icon: MaterialSymbolsFrameInspect },
 	inspectServer: { label: 'Inspect in Server', icon: PhGlobe },
@@ -29,11 +28,11 @@ let choices: { [K in keyof IStorage['listingOptions']]: { label: string; icon: a
 	detail: { label: 'Detail', icon: MaterialSymbolsDetails },
 };
 
-let storage = ExtensionStorage.listingOptions;
-let values: Partial<IStorage['listingOptions']> = {};
+const storage = ExtensionStorage.listingOptions;
+let values = $state<Partial<IStorage['listingOptions']>>({});
 
-onMount(async () => {
-	values = await storage.getValue();
+$effect(() => {
+	storage.getValue().then((v) => (values = v));
 });
 
 const storeValue = async (choice: keyof IStorage['listingOptions']) => {
@@ -60,9 +59,10 @@ const notypecheck = (x: string) => x as keyof IStorage['listingOptions'];
 
 	<ul class="mx-2 gap-2">
 		{#each Object.entries(choices) as [choice, choiceValue]}
+			{@const Icon = choiceValue.icon}
 			<div class="flex justify-between mx-2 my-2">
 				<div class="flex items-center gap-2">
-					<svelte:component this={choiceValue.icon} class="size-5 text-neutral-500" />
+					<Icon class="size-5 text-neutral-500" />
 					<Label for={choice} class="text-sm font-normal">{choiceValue.label}</Label>
 				</div>
 				<Checkbox id={choice} name={choiceValue.label} size="sm" value={choice} bind:checked={values[notypecheck(choice)]} on:click={() => storeValue(notypecheck(choice))} />
diff --git a/src/lib/components/SettingPaymentMethods.svelte b/src/lib/components/SettingPaymentMethods.svelte
index 685657a..aec5d1d 100644
--- a/src/lib/components/SettingPaymentMethods.svelte
+++ b/src/lib/components/SettingPaymentMethods.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-import { onMount } from 'svelte';
 import * as Dialog from '$lib/components/ui/dialog';
 import * as Tooltip from '$lib/components/ui/tooltip';
 import { cn } from '$lib/utils';
@@ -8,14 +7,11 @@ import bank from '../icons/payment-bank.png';
 import card from '../icons/payment-card.png';
 import wechat from '../icons/payment-wechat.png';
 import { ExtensionStorage, type IStorage } from '../util/storage';
-import { MaterialSymbolsHelpRounded } from './icons';
-import MaterialSymbolsPayments from './icons/MaterialSymbolsPayments.svelte';
+import { MaterialSymbolsHelpRounded, MaterialSymbolsPayments } from './icons';
 import Button from './ui/button/button.svelte';
 import Label from './ui/label/label.svelte';
 
-let text = 'Preferred Payment Methods';
-
-let choices: { [K in keyof IStorage['preferredPayments']]: { text: string; icon: string } } = {
+const choices: { [K in keyof IStorage['preferredPayments']]: { text: string; icon: string } } = {
 	balance: { text: 'BUFF balance-Alipay', icon: balance },
 	bank: { text: 'BUFF Balance-Bank Card', icon: bank },
 	card: { text: 'Alipay - Credit card', icon: card },
@@ -23,11 +19,11 @@ let choices: { [K in keyof IStorage['preferredPayments']]: { text: string; icon:
 	'wechat-split': { text: 'WeChat Split', icon: wechat },
 };
 
-let storage = ExtensionStorage.preferredPayments;
-let values: Partial<IStorage['preferredPayments']> = {};
+const storage = ExtensionStorage.preferredPayments;
+let values = $state<Partial<IStorage['preferredPayments']>>({});
 
-onMount(async () => {
-	values = await storage.getValue();
+$effect(() => {
+	storage.getValue().then((v) => (values = v));
 });
 
 const storeValue = async (choice: keyof IStorage['preferredPayments']) => {
@@ -35,14 +31,12 @@ const storeValue = async (choice: keyof IStorage['preferredPayments']) => {
 
 	await storage.setValue(values as IStorage['preferredPayments']);
 };
-
-const notypecheck = (x: string) => x as keyof IStorage['preferredPayments'];
 </script>
 
 <div class="w-full flex flex-col border border-base-300 bg-card/90 rounded-lg py-2 px-3 z-10">
     <div class="flex items-center gap-2 mt-1 mx-1">
 		<MaterialSymbolsPayments class="size-6 text-neutral-500" />
-        <Label class="text-sm font-medium">{text}</Label>
+        <Label class="text-sm font-medium">Preferred Payment Methods</Label>
         <Dialog.Root>
             <Dialog.Trigger class="flex items-center">
                 <Button variant="ghost" class="size-4 p-0 m-0" title="Click for a detailed explanation">
@@ -64,7 +58,7 @@ const notypecheck = (x: string) => x as keyof IStorage['preferredPayments'];
         {#each Object.entries(choices) as [choice, attr]}
             <Tooltip.Root>
                 <Tooltip.Trigger>
-                    <Button variant="ghost" size="icon" class={cn(values[notypecheck(choice)] && 'bg-[#00b3f0]/50 hover:bg-[#00b3f0]/70')} on:click={() => storeValue(notypecheck(choice))}>
+                    <Button variant="ghost" size="icon" class={cn(values[choice as keyof IStorage['preferredPayments']] && 'bg-[#00b3f0]/50 hover:bg-[#00b3f0]/70')} on:click={() => storeValue(choice as keyof IStorage['preferredPayments'])}>
                         <img src={attr.icon} alt={attr.text} class="w-6 h-6" />
                     </Button>
                 </Tooltip.Trigger>
diff --git a/src/lib/components/Tooltip.svelte b/src/lib/components/Tooltip.svelte
index e926042..c9db163 100644
--- a/src/lib/components/Tooltip.svelte
+++ b/src/lib/components/Tooltip.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-export let tooltipClass: string;
-export let svgClass: string;
-export let dataTip: string;
+let { tooltipClass, svgClass, dataTip }: { tooltipClass: string; svgClass: string; dataTip: string } = $props();
 </script>
 
 <div class="tooltip inline-flex {tooltipClass} z-100" data-tip={dataTip}>
-    <button data-popover-target="popover-description" data-popover-placement="bottom-end" type="button">
+    <button data-popover-target="popover-description" data-popover-placement="bottom-end" type="button" aria-label={dataTip}>
         <svg class="w-4 h-4 {svgClass}" aria-hidden="true" fill="currentColor" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"
             ><path
                 fill="currentColor"
diff --git a/src/lib/components/icons/index.ts b/src/lib/components/icons/index.ts
index 868b168..018bb8f 100644
--- a/src/lib/components/icons/index.ts
+++ b/src/lib/components/icons/index.ts
@@ -1,4 +1,5 @@
 export { default as ArcticonsPriceconverter } from './ArcticonsPriceconverter.svelte';
+export { default as BuyMeACoffee } from './BuyMeACoffee.svelte';
 export { default as MageBox3d } from './MageBox3d.svelte';
 export { default as MaterialSymbolsDetails } from './MaterialSymbolsDetails.svelte';
 export { default as MaterialSymbolsFrameInspect } from './MaterialSymbolsFrameInspect.svelte';
diff --git a/src/lib/pages/CHExplorer.svelte b/src/lib/pages/CHExplorer.svelte
index afe8a4f..2e8ba27 100644
--- a/src/lib/pages/CHExplorer.svelte
+++ b/src/lib/pages/CHExplorer.svelte
@@ -8,7 +8,7 @@ let patternPromise: Promise<BetterBuff.CHPatterns> = fetch(browser.runtime.getUR
 </script>
 
 {#await patternPromise}
-	<button class="btn btn-square btn-sm ml-4">
+	<button class="btn btn-square btn-sm ml-4" aria-label="Loading patterns...">
 		<span class="loading loading-spinner text-purple-700"></span>
 	</button>
 {:then patterns}
diff --git a/src/lib/pages/ListingOptions.svelte b/src/lib/pages/ListingOptions.svelte
index b4cc93d..3105d25 100644
--- a/src/lib/pages/ListingOptions.svelte
+++ b/src/lib/pages/ListingOptions.svelte
@@ -2,8 +2,8 @@
 import '../components/style.css';
 import floatLogo from '../icons/float-logo.png';
 
-let data = JSON.parse(document.querySelector('#betterbuff-listing-anchor')?.getAttribute('data-betterbuff') ?? '{}');
-const shareLink = data.share ?? location.href;
+let data = $state(JSON.parse(document.querySelector('#betterbuff-listing-anchor')?.getAttribute('data-betterbuff') ?? '{}'));
+let shareLink = $derived(data.share ?? location.href);
 
 function copyToClipboard(text: string) {
 	navigator?.clipboard?.writeText(text).then(() => {
@@ -15,7 +15,7 @@ function copyToClipboard(text: string) {
 
 <div class="flex items-center gap-3 pb-4">
 	<div class="tooltip tooltip-right" data-tip={data.gen}>
-		<button class="btn btn-ghost bg-[#2E3135]" on:click={() => copyToClipboard(data.gen)}>
+		<button class="btn btn-ghost bg-[#2E3135]" onclick={() => copyToClipboard(data.gen)}>
 			<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
 				><path fill="#888888" d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm-4 4q-.825 0-1.412-.587T3 20V6h2v14h11v2z" /></svg
 			>
@@ -27,7 +27,7 @@ function copyToClipboard(text: string) {
 		Match FloatDB
 	</a>
 	<div class="tooltip" data-tip={shareLink}>
-		<button class="btn btn-ghost bg-[#2E3135]" on:click={() => copyToClipboard(shareLink)}>
+		<button class="btn btn-ghost bg-[#2E3135]" onclick={() => copyToClipboard(shareLink)}>
 			<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
 				><path
 					fill="#888888"
diff --git a/src/lib/pages/PriceHistoryInfo.svelte b/src/lib/pages/PriceHistoryInfo.svelte
index 91c715a..739eb7c 100644
--- a/src/lib/pages/PriceHistoryInfo.svelte
+++ b/src/lib/pages/PriceHistoryInfo.svelte
@@ -3,11 +3,11 @@ import type { BuffTypes } from '../@types/BuffTypes';
 import InfoTooltip from '../components/InfoTooltip.svelte';
 import '../components/style.css';
 
-let data: BuffTypes.PriceHistory.Data = JSON.parse(document.querySelector('#betterbuff-pricetrend-info')?.getAttribute('data-betterbuff') ?? '{}');
+let data = $state<BuffTypes.PriceHistory.Data>(JSON.parse(document.querySelector('#betterbuff-pricetrend-info')?.getAttribute('data-betterbuff') ?? '{}'));
 </script>
 
-{#if data.price_history}
-    <InfoTooltip {data}>
+{#if data?.lines}
+    <InfoTooltip data={data}>
         <div class="text-[#4773C8] hover:text-[#2E3135]">
             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                 ><path
diff --git a/src/lib/util/Adjust_GoodsSellOrder.ts b/src/lib/util/Adjust_GoodsSellOrder.ts
index ab7deca..9354cb7 100644
--- a/src/lib/util/Adjust_GoodsSellOrder.ts
+++ b/src/lib/util/Adjust_GoodsSellOrder.ts
@@ -1,3 +1,4 @@
+import { mount, unmount } from 'svelte';
 import type { BuffTypes } from '../@types/BuffTypes';
 import ChExplorer from '../pages/CHExplorer.svelte';
 import { getListingDifference, isPaymentMethodAvailable } from './dataHelpers';
@@ -17,7 +18,7 @@ export async function adjustGoodsSellOrder(apiData: BuffTypes.SellOrder.Data | u
 
 	const weaponSchema = SchemaHelpers.getWeaponSchema(goods_info.market_hash_name, goods_info?.tags?.exterior?.internal_name === 'wearcategoryna');
 
-	console.log('API Data: ', apiData);
+	// console.log('API Data: ', apiData);
 
 	const showBigPreviews = await ExtensionStorage.showBigPreviews.getValue();
 	const listingOptions = await ExtensionStorage.listingOptions.getValue();
@@ -99,18 +100,12 @@ async function chPatternExplorer(container: Element) {
 			name: 'app-pattern-explorer',
 			css: '../components/style.css',
 			position: 'inline',
-			anchor: '#betterbuff-patternexplorer-ch',
-			onMount: (container) => {
-				// Create the Svelte app inside the UI container
-				const app = new ChExplorer({
+			anchor: patternExplorer,
+			onMount: (container) =>
+				mount(ChExplorer, {
 					target: container,
-				});
-				return app;
-			},
-			onRemove: (app) => {
-				// Destroy the app when the UI is removed
-				app?.$destroy();
-			},
+				}),
+			onRemove: (app) => unmount(app as Record<string, any>),
 		});
 		ui.mount();
 	}
diff --git a/src/lib/util/Adjust_Market.ts b/src/lib/util/Adjust_Market.ts
index 56335eb..52be6a2 100644
--- a/src/lib/util/Adjust_Market.ts
+++ b/src/lib/util/Adjust_Market.ts
@@ -1,4 +1,5 @@
 import Decimal from 'decimal.js';
+import { mount, unmount } from 'svelte';
 import type { BuffTypes } from '../@types/BuffTypes';
 import ListingOptions from '../pages/ListingOptions.svelte';
 import { getListingDifference, priceToHtml } from './dataHelpers';
@@ -72,20 +73,12 @@ export async function adjustItemDetails(apiData: BuffTypes.ItemDescDetail.Data)
 			css: '../components/style.css',
 			position: 'inline',
 			anchor: '#betterbuff-listing-anchor',
-			onMount: (container) => {
-				// Create the Svelte app inside the UI container
-				const app = new ListingOptions({
+			onMount: (container) =>
+				mount(ListingOptions, {
 					target: container,
-				});
-				return app;
-			},
-			onRemove: (app) => {
-				// Destroy the app when the UI is removed
-				app?.$destroy();
-			},
+				}),
+			onRemove: (app) => unmount(app as Record<string, any>),
 		});
-
-		// 4. Mount the UI
 		ui.mount();
 	}
 }
diff --git a/src/lib/util/Adjust_PriceTrend.ts b/src/lib/util/Adjust_PriceTrend.ts
index 73b97c3..8816012 100644
--- a/src/lib/util/Adjust_PriceTrend.ts
+++ b/src/lib/util/Adjust_PriceTrend.ts
@@ -1,3 +1,4 @@
+import { mount, unmount } from 'svelte';
 import type { BuffTypes } from '../@types/BuffTypes';
 import PriceHistoryInfo from '../pages/PriceHistoryInfo.svelte';
 import { BUFF_CRX } from './storage';
@@ -15,18 +16,12 @@ export async function adjustPriceTrend(apiData: BuffTypes.PriceHistory.Data) {
 			name: 'app-price-trend',
 			css: '../components/style.css',
 			position: 'inline',
-			anchor: '#betterbuff-pricetrend-info',
-			onMount: (container) => {
-				// Create the Svelte app inside the UI container
-				const app = new PriceHistoryInfo({
+			anchor: infoDiv,
+			onMount: (container) =>
+				mount(PriceHistoryInfo, {
 					target: container,
-				});
-				return app;
-			},
-			onRemove: (app) => {
-				// Destroy the app when the UI is removed
-				app?.$destroy();
-			},
+				}),
+			onRemove: (app) => unmount(app as Record<string, any>),
 		});
 		ui.mount();
 	}
diff --git a/wxt-env.d.ts b/wxt-env.d.ts
index 1a25456..0e72969 100644
--- a/wxt-env.d.ts
+++ b/wxt-env.d.ts
@@ -1 +1 @@
-/// <reference types="svelte" />
+/// <reference types="svelte" />
\ No newline at end of file