diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index e196d76..9a290b4 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,25 +1,44 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
 	const {
 		children,
-		type = 'button',
-		disabled,
+		disabled = false,
 		...rest
-	}: HTMLButtonAttributes & { children: Snippet } = $props();
+	}:
+		| ({
+				href: string;
+				disabled?: boolean;
+				children: Snippet;
+		  } & HTMLAnchorAttributes)
+		| ({ children: Snippet } & HTMLButtonAttributes) = $props();
 
 	const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'active:scale-95';
 </script>
 
-<button
-	{type}
-	{disabled}
-	{...rest}
-	class={`
-    ${disabledClasses}
-    rounded border border-zinc-800 px-4 py-2 shadow-lg transition-all
-  `}
->
-	{@render children()}
-</button>
+{#if 'href' in rest}
+	<a
+		{...rest}
+		class={`
+      ${disabledClasses}
+      ${rest.class}
+      inline-block rounded border border-zinc-800 px-4 py-2 text-center shadow-lg transition-all
+    `}
+	>
+		{@render children()}
+	</a>
+{:else}
+	<button
+		type={rest.type || 'button'}
+		{disabled}
+		{...rest}
+		class={`
+      ${disabledClasses}
+      ${rest.class}
+      inline-block rounded border border-zinc-800 px-4 py-2 text-center shadow-lg transition-all
+    `}
+	>
+		{@render children()}
+	</button>
+{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4f8b348..a6eb97e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -64,6 +64,7 @@
 		<Button onclick={changePallette}>Change color palette</Button>
 		<Button onclick={goFullscreen}>Go fullscreen</Button>
 	</div>
+	<Button href="/history">See history</Button>
 </form>
 
 <BokehPage {colorPalette} {decay} bind:showForm />