diff --git a/package.json b/package.json
index 3b42c35..64643a7 100644
--- a/package.json
+++ b/package.json
@@ -32,5 +32,8 @@
 		"typescript": "^5.4.5",
 		"vite": "^5.2.11"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"svelte-persisted-store": "^0.9.4"
+	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f6f979b..cdc0f6a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      svelte-persisted-store:
+        specifier: ^0.9.4
+        version: 0.9.4(svelte@4.2.15)
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^3.2.0
@@ -1257,6 +1261,12 @@ packages:
     peerDependencies:
       svelte: ^3.19.0 || ^4.0.0
 
+  svelte-persisted-store@0.9.4:
+    resolution: {integrity: sha512-Em3cDSsd3fAkQhvNc4+V7ZT86GnIkFrlcKK/oNSHFhF5fbNoavdxvtTZ0pCF2ueG/Oqg5kSbAFxn0rkeICpHUA==}
+    engines: {node: '>=0.14'}
+    peerDependencies:
+      svelte: ^3.48.0 || ^4.0.0 || ^5.0.0-next.0
+
   svelte-preprocess@5.1.4:
     resolution: {integrity: sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==}
     engines: {node: '>= 16.0.0'}
@@ -2543,6 +2553,10 @@ snapshots:
     dependencies:
       svelte: 4.2.15
 
+  svelte-persisted-store@0.9.4(svelte@4.2.15):
+    dependencies:
+      svelte: 4.2.15
+
   svelte-preprocess@5.1.4(postcss-load-config@4.0.2(postcss@8.4.38))(postcss@8.4.38)(svelte@4.2.15)(typescript@5.4.5):
     dependencies:
       '@types/pug': 2.0.10
diff --git a/src/components/Banner.svelte b/src/components/Banner.svelte
new file mode 100644
index 0000000..956f90b
--- /dev/null
+++ b/src/components/Banner.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { get } from "svelte/store";
+	import { bannerShownSessionStore, bannerHiddenCountStore } from "../data/bannerStore";
+	import { onMount } from "svelte";
+	let banner: HTMLDivElement;
+
+	onMount(() => {
+		let bannerHiddenCount: number = Number(get(bannerHiddenCountStore));
+
+		if (bannerHiddenCount > 3) {
+			bannerShownSessionStore.set("no");
+		}
+
+		if (get(bannerShownSessionStore) === "yes") {
+			banner.classList.remove("hidden");
+			banner.classList.add("flex");
+		}
+	});
+
+	function hideBanner() {
+		banner.classList.remove("flex");
+		banner.classList.add("hidden");
+		bannerShownSessionStore.set("no");
+
+		let bannerHiddenCount: number = Number(get(bannerHiddenCountStore));
+		bannerHiddenCount += 1;
+		$bannerHiddenCountStore = String(bannerHiddenCount);
+	}
+</script>
+
+<div
+	bind:this={banner}
+	class="flex-row items-center justify-between hidden px-8 py-4 mb-4 border gap-x-8 group"
+>
+	<div class="flex flex-col justify-start sm:items-center sm:flex-row gap-x-6 gap-y-4">
+		<p class="pl-2 mt-0">
+			<em>Nearest Color</em> is an upcoming paid desktop app with
+			<span class="font-medium">more accurate color matching</span> and
+			<span class="font-medium">more color input formats</span>.
+		</p>
+		<p class="flex-shrink-0 mt-0">
+			<a
+				href="https://nearest-color.com/why-nearest-color-better-than-find-nearest-tailwind-colour?banner"
+				class="px-2 py-2 font-medium no-underline transition-all duration-300 rounded-md outline-dashed outline-transparent hover:bg-cyan-700 hover:text-gray-50 group-hover:outline-gray-900"
+				>Find out why it's better</a
+			>
+		</p>
+	</div>
+	<button type="button" on:click={hideBanner}
+		><svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="transition-colors rounded-full size-8 outline outline-transparent hover:outline-cyan-500 outline-2"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+			/>
+		</svg>
+	</button>
+</div>
diff --git a/src/data/bannerStore.ts b/src/data/bannerStore.ts
new file mode 100644
index 0000000..e9e03e8
--- /dev/null
+++ b/src/data/bannerStore.ts
@@ -0,0 +1,9 @@
+import { persisted } from "svelte-persisted-store";
+
+// Save if the banner is hidden to sessionstorage
+export const bannerShownSessionStore = persisted("bannerShown", "yes", {
+	storage: "session"
+});
+
+// Save a count of how many times the banner has been hidden to local storage
+export const bannerHiddenCountStore = persisted("bannerHiddenCount", "0");
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4d96b55..f9c934c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,27 @@
 <script>
 	import "$/app.css";
+	import Banner from "$/components/Banner.svelte";
 </script>
 
+<div class="container pt-4 mx-auto">
+	<Banner />
+</div>
 <div class="container grid h-screen px-4 mx-auto max-w-prose grid-cols-1 grid-rows-[auto_1fr_auto]">
 	<slot />
 	<footer class="p-4 mt-8 -ml-4 -mr-4 sm:rounded text-cyan-50 bg-cyan-800 border-top-4">
-		<p class="mt-0">
+		<div class="flex flex-col justify-start sm:items-center sm:flex-row gap-x-6 gap-y-4">
+			<p class="mt-0">
+				<em>Nearest Color</em> is an upcoming paid desktop app with
+				<span class="font-medium">more accurate color matching</span> and
+				<span class="font-medium">more color input formats</span>.
+				<a
+					href="https://nearest-color.com/why-nearest-color-better-than-find-nearest-tailwind-colour?footer"
+					class="no-underline transition-colors border-b-2 hover:border-b-cyan-500"
+					>Find out why it's better</a
+				>
+			</p>
+		</div>
+		<p>
 			Made by
 			<a href="https://edjohnsonwilliams.co.uk"> Ed Johnson-Williams </a>
 		</p>