diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..d6d129b
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,4 @@
+## 2024-10-24 - Persisting Error State in Async Buttons
+
+**Learning:** Async buttons that handle errors often fail to reset their error state on subsequent attempts. This leads to a confusing UX where a successful retry still displays the error icon, making the user believe the action failed again.
+**Action:** Always ensure that error flags (e.g., `hasError`) are reset at the _start_ of the async operation, not just set in the `catch` block.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 42adb44..301e978 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/"
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
diff --git a/.jules/bolt.md b/.jules/bolt.md
new file mode 100644
index 0000000..400b475
--- /dev/null
+++ b/.jules/bolt.md
@@ -0,0 +1,6 @@
+# Bolt's Journal
+
+## 2024-05-22 - Async Race Conditions
+
+**Learning:** Asynchronous typeahead searches must implement a request ID mechanism. Without it, stale responses can overwrite newer ones, leading to correct search terms displaying incorrect results.
+**Action:** Always use a request ID or cancellation token pattern when implementing async search/filter operations.
diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..00f41cd
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-10-24 - Accessible Icon Props and Loading Button State
+**Learning:** Svelte wrapper components (like `Icon.svelte`) must spread `$$restProps` to allow passing accessibility attributes (e.g., `aria-label`) from parent components. Without this, icons remain inaccessible to screen readers. Also, persistent "Success" states on buttons can be confusing; auto-resetting them after a timeout improves clarity.
+**Action:** Always include `{...$$restProps}` in wrapper components and implement auto-reset logic for temporary success states in interactive elements.
diff --git a/src/components/DomainPayment.svelte b/src/components/DomainPayment.svelte
index ac131ee..aa60faf 100644
--- a/src/components/DomainPayment.svelte
+++ b/src/components/DomainPayment.svelte
@@ -51,7 +51,7 @@
 		years += amount;
 	}
 
-	async function handleApproveError(error: Error) {
+	async function handleApproveError(error: unknown) {
 		let message;
 		if (error instanceof InsufficientBalanceError)
 			message = {
@@ -102,7 +102,11 @@
 			<h4>{domainName}</h4>
 
 			<div class="years">
-				<IconButton on:click={() => addYears(-1)} disabled={years === 1 || feesApproved} aria-label="remove-year">
+				<IconButton
+					on:click={() => addYears(-1)}
+					disabled={years === 1 || feesApproved}
+					aria-label="remove-year"
+				>
 					<Icon icon="remove" />
 				</IconButton>
 				<span>{years} {yearsLabel}</span>
@@ -111,7 +115,7 @@
 				</IconButton>
 			</div>
 
-	 		<div class="coin">
+			<div class="coin">
 				<p class="title text-center">Payment token</p>
 				<div class="row centered">
 					<Select bind:value={$selectedCoin} label="Select Token" variant="outlined">
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
index 4b82d79..2e37669 100644
--- a/src/components/Icon.svelte
+++ b/src/components/Icon.svelte
@@ -19,7 +19,7 @@
 	export { key as icon, align, width, height, color };
 </script>
 
-<Icon class={alignClass} {icon} {height} {width} {color} />
+<Icon class={alignClass} {icon} {height} {width} {color} {...$$restProps} />
 
 <style>
 	:global(.align-icon-right) {
diff --git a/src/components/LoadingButton.svelte b/src/components/LoadingButton.svelte
index a96b95b..09e3b8a 100644
--- a/src/components/LoadingButton.svelte
+++ b/src/components/LoadingButton.svelte
@@ -4,11 +4,12 @@
 	import Button, { Label } from '@smui/button';
 	import Icon from 'src/components/Icon.svelte';
 	import CircularProgress from '@smui/circular-progress';
+	import { onDestroy } from 'svelte';
 
 	let className = '';
 	export { className as class };
 	export let onClick: () => Promise<void>;
-	export let onError: (error: any) => Promise<void> = async (error) => {
+	export let onError: (error: unknown) => Promise<void> = async (error) => {
 		let message;
 		if (error && error instanceof Error) message = error.message;
 		else message = 'Something went wrong';
@@ -24,11 +25,18 @@
 
 	let loading: boolean | undefined;
 	let hasError = false;
+	let resetTimeout: ReturnType<typeof setTimeout>;
+
+	onDestroy(() => {
+		clearTimeout(resetTimeout);
+	});
 
 	async function handleClick() {
 		if (loading) return;
 
+		hasError = false;
 		loading = true;
+		hasError = false;
 
 		try {
 			await onClick();
@@ -38,19 +46,32 @@
 		}
 
 		loading = false;
+
+		if (!hasError) {
+			clearTimeout(resetTimeout);
+			resetTimeout = setTimeout(() => {
+				loading = undefined;
+			}, 3000);
+		}
 	}
 </script>
 
-<Button class={className} disabled={isDisabled} on:click={handleClick} {variant}>
+<Button
+	class={className}
+	disabled={isDisabled}
+	on:click={handleClick}
+	{variant}
+	aria-busy={loading}
+>
 	<Label><slot /></Label>
 	{#if loading}
-		<div class="loading">
+		<div class="loading" role="status" aria-label="Loading">
 			<CircularProgress style="height: 20px; width: 20px;" indeterminate />
 		</div>
 	{:else if hasError}
-		<Icon icon="error" align="right" />
+		<Icon icon="error" align="right" aria-label="Error" />
 	{:else if loading === false}
-		<Icon icon="done" align="right"/>
+		<Icon icon="done" align="right" aria-label="Success" />
 	{/if}
 </Button>
 
diff --git a/src/components/Record.svelte b/src/components/Record.svelte
index 828f6f2..913b790 100644
--- a/src/components/Record.svelte
+++ b/src/components/Record.svelte
@@ -28,7 +28,7 @@
 	$: errors = invalid ? validator.getErrors() : [];
 	$: disabled = !edit;
 	$: validator = getValidator(klass);
-	$: maxLength = 'maxLength' in validator.rules ? validator.rules['maxLength'] as number : 64
+	$: maxLength = 'maxLength' in validator.rules ? (validator.rules['maxLength'] as number) : 64;
 
 	let edit = false;
 
@@ -99,10 +99,18 @@
 		</div>
 	{:else if editMode}
 		<div class="actions">
-			<IconButton on:click={() => toggleEdit()} disabled={!$walletConnected} aria-label="edit-record">
+			<IconButton
+				on:click={() => toggleEdit()}
+				disabled={!$walletConnected}
+				aria-label="edit-record"
+			>
 				<Icon icon="edit" />
 			</IconButton>
-			<IconButton on:click={() => (dialogOpen = true)} disabled={!$walletConnected} aria-label="delete-record">
+			<IconButton
+				on:click={() => (dialogOpen = true)}
+				disabled={!$walletConnected}
+				aria-label="delete-record"
+			>
 				<Icon icon="delete" />
 			</IconButton>
 		</div>
diff --git a/src/lib/sdk.ts b/src/lib/sdk.ts
index 5480675..3690a64 100644
--- a/src/lib/sdk.ts
+++ b/src/lib/sdk.ts
@@ -22,4 +22,4 @@ export const profileRecords = [
 	RecordClassEnum.Price
 ].map((v) => RecordClassEnum[v]);
 
-export const getValidator = (klass: string) => getRecordValidator(getRecordClassFrom(klass))
+export const getValidator = (klass: string) => getRecordValidator(getRecordClassFrom(klass));
diff --git a/src/lib/server/index.ts b/src/lib/server/index.ts
index d776b94..d87bace 100644
--- a/src/lib/server/index.ts
+++ b/src/lib/server/index.ts
@@ -57,5 +57,4 @@ export const getStats = async (): Promise<DomainStats> => {
 	};
 };
 
-
 export const apiError = (message: string, status = 400) => json({ error: message }, { status });
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 1d202e1..b57ab3e 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -42,8 +42,8 @@ export interface DomainPaymentParams {
 }
 
 export interface DomainFeesResponse {
-	feesLabel: number
-	fees: string
-	symbol: string
-	address: string
+	feesLabel: number;
+	fees: string;
+	symbol: string;
+	address: string;
 }
diff --git a/src/lib/url.ts b/src/lib/url.ts
index ede74eb..710d0a9 100644
--- a/src/lib/url.ts
+++ b/src/lib/url.ts
@@ -8,12 +8,11 @@ export const explorerAddressUrl = (address: string) => {
 	if (address.startsWith('00'))
 		// Account
 		url += `/accounts/${address}/assets`;
-	else
-		// Contract
-		url += `/contracts/${address}`;
+	// Contract
+	else url += `/contracts/${address}`;
 
-	return url
-}
+	return url;
+};
 
 export const bridgeUrl = `${config.browserUrl}/bridge`;
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e491643..a5e8638 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -201,5 +201,4 @@
 		align-items: center;
 		height: 100%;
 	}
-
 </style>
diff --git a/src/routes/DomainSearch.svelte b/src/routes/DomainSearch.svelte
index 2cde1b3..0d71589 100644
--- a/src/routes/DomainSearch.svelte
+++ b/src/routes/DomainSearch.svelte
@@ -15,7 +15,8 @@
 	let domainName: string = '';
 	let nameSearched: string = '';
 	let isLoading: boolean = false;
-	let debounceTimer: NodeJS.Timeout;
+	let debounceTimer: ReturnType<typeof setTimeout>;
+	let requestId = 0;
 
 	$: errors = invalid ? validator.getErrors() : [];
 	$: invalid = domainName !== '' && !validator.validate(domainName, { raiseError: false });
@@ -36,12 +37,16 @@
 			return goto(url);
 		}
 
+		const currentRequestId = ++requestId;
 		nameSearched = domainName.toLocaleLowerCase();
 		isLoading = true;
 
-		domain = await $metaNamesSdk.domainRepository.find(domainName);
+		const result = await $metaNamesSdk.domainRepository.find(domainName);
 
-		isLoading = false;
+		if (currentRequestId === requestId) {
+			domain = result;
+			isLoading = false;
+		}
 	}
 
 	async function submit() {
@@ -55,7 +60,7 @@
 			class="domain-input"
 			variant="outlined"
 			bind:value={domainName}
-			on:keyup={() => debounce()}
+			on:input={() => debounce()}
 			bind:invalid
 			label="Domain name"
 			withTrailingIcon
@@ -75,39 +80,45 @@
 			</svelte:fragment>
 		</Textfield>
 	</form>
-	{#if isLoading}
-		<Card class="domain-link">
-			<CardContent>
-				<div class="card-content">
-					<span>{nameSearchedLabel}</span>
-
-					<CircularProgress style="height: 32px; width: 32px;" indeterminate />
-				</div>
-			</CardContent>
-		</Card>
-	{:else if domain}
-		<a class="domain-link" href={`/domain/${domain.name}`}>
-			<Card>
-				<CardContent>
-					<div class="card-content">
-						<span>{nameSearchedLabel}</span>
-						<span class="chip registered">Registered</span>
-					</div>
-				</CardContent>
-			</Card>
-		</a>
-	{:else if domain === null}
-		<a class="domain-link" href={`/register/${nameSearched}`}>
-			<Card>
+	<div class="search-results" aria-live="polite">
+		{#if isLoading}
+			<Card class="domain-link">
 				<CardContent>
 					<div class="card-content">
 						<span>{nameSearchedLabel}</span>
-						<span class="chip available">Available</span>
+
+						<CircularProgress
+							style="height: 32px; width: 32px;"
+							indeterminate
+							aria-label="Loading domain search results"
+						/>
 					</div>
 				</CardContent>
 			</Card>
-		</a>
-	{/if}
+		{:else if domain}
+			<a class="domain-link" href={`/domain/${domain.name}`}>
+				<Card>
+					<CardContent>
+						<div class="card-content">
+							<span>{nameSearchedLabel}</span>
+							<span class="chip registered">Registered</span>
+						</div>
+					</CardContent>
+				</Card>
+			</a>
+		{:else if domain === null}
+			<a class="domain-link" href={`/register/${nameSearched}`}>
+				<Card>
+					<CardContent>
+						<div class="card-content">
+							<span>{nameSearchedLabel}</span>
+							<span class="chip available">Available</span>
+						</div>
+					</CardContent>
+				</Card>
+			</a>
+		{/if}
+	</div>
 </div>
 
 <style lang="scss">
diff --git a/src/routes/api/register/[name]/fees/[coin]/+server.ts b/src/routes/api/register/[name]/fees/[coin]/+server.ts
index 72763fd..af646a0 100644
--- a/src/routes/api/register/[name]/fees/[coin]/+server.ts
+++ b/src/routes/api/register/[name]/fees/[coin]/+server.ts
@@ -4,14 +4,17 @@ import { json } from '@sveltejs/kit';
 import type { DomainFeesResponse } from 'src/lib/types';
 
 export async function GET({ params: { name, coin } }) {
-  return handleError(async () => {
-    const validCoins = metaNamesSdk.config.byoc.map(byoc => byoc.symbol.toString())
-    if (!(validCoins.includes(coin))) return apiError('Invalid coin');
+	return handleError(async () => {
+		const validCoins = metaNamesSdk.config.byoc.map((byoc) => byoc.symbol.toString());
+		if (!validCoins.includes(coin)) return apiError('Invalid coin');
 
-    const normalizedDomain = metaNamesSdk.domainRepository.domainValidator.normalize(name)
-    const domainFees = await metaNamesSdk.domainRepository.calculateMintFees(normalizedDomain, coin as BYOCSymbol);
-    const fees = { ...domainFees, fees: domainFees.fees.toString() }
+		const normalizedDomain = metaNamesSdk.domainRepository.domainValidator.normalize(name);
+		const domainFees = await metaNamesSdk.domainRepository.calculateMintFees(
+			normalizedDomain,
+			coin as BYOCSymbol
+		);
+		const fees = { ...domainFees, fees: domainFees.fees.toString() };
 
-    return json(fees);
-  });
+		return json(fees);
+	});
 }
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
index 8b9fd1d..7f29073 100644
--- a/src/routes/profile/+page.svelte
+++ b/src/routes/profile/+page.svelte
@@ -74,7 +74,6 @@
 </div>
 
 <style lang="scss">
-
 	.domains {
 		margin-top: 1.5rem;
 		margin-bottom: 0;
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index c1497d9..7d94a8f 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -1,4 +1,4 @@
-@use "sass:string";
+@use 'sass:string';
 
 $amounts: (0, 1, 2, 3, 4);
 $types: (top, bottom, left, right);
diff --git a/src/theme/dark/_smui-theme.scss b/src/theme/dark/_smui-theme.scss
index 3331f5b..48d0627 100644
--- a/src/theme/dark/_smui-theme.scss
+++ b/src/theme/dark/_smui-theme.scss
@@ -5,7 +5,7 @@ $text-color: #d5ccff;
 @use '@material/theme/color-palette';
 @use '@material/theme/index' as theme with (
 	$primary: #6849fe,
-	$secondary: #D0C7FF,
+	$secondary: #d0c7ff,
 	$surface: color.adjust(color-palette.$grey-900, $blue: +4),
 	$background: #363535,
 	$error: color-palette.$red-700
diff --git a/yarn.lock b/yarn.lock
index 99f6703..20531a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2743,12 +2743,12 @@ available-typed-arrays@^1.0.7:
     possible-typed-array-names "^1.0.0"
 
 axios@^1.6.2:
-  version "1.13.4"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.13.4.tgz#15d109a4817fb82f73aea910d41a2c85606076bc"
-  integrity sha512-1wVkUaAO6WyaYtCkcYCOx12ZgpGf9Zif+qXa4n+oYzK558YryKqiL6UWwd5DqiH3VRW0GYhTZQ/vlgJrCoNQlg==
+  version "1.13.5"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.13.5.tgz#5e464688fa127e11a660a2c49441c009f6567a43"
+  integrity sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==
   dependencies:
-    follow-redirects "^1.15.6"
-    form-data "^4.0.4"
+    follow-redirects "^1.15.11"
+    form-data "^4.0.5"
     proxy-from-env "^1.1.0"
 
 axobject-query@^4.0.0:
@@ -3794,10 +3794,10 @@ focus-trap@^7.5.2:
   dependencies:
     tabbable "^6.2.0"
 
-follow-redirects@^1.15.6:
-  version "1.15.9"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
-  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
+follow-redirects@^1.15.11:
+  version "1.15.11"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.11.tgz#777d73d72a92f8ec4d2e410eb47352a56b8e8340"
+  integrity sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -3806,7 +3806,7 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
-form-data@^4.0.4:
+form-data@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.5.tgz#b49e48858045ff4cbf6b03e1805cebcad3679053"
   integrity sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==