diff --git a/website/src/pages/examples/index.astro b/website/src/pages/examples/index.astro
index baee55c45..b1ceae114 100644
--- a/website/src/pages/examples/index.astro
+++ b/website/src/pages/examples/index.astro
@@ -10,7 +10,7 @@ import HeadCommon from '../../components/HeadCommon.astro';
   <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2 p-2 select-none">
     {
       Object.entries(tunes).map(([name, tune]) => (
-        <a class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative" href={`/#${btoa(tune)}`}>
+        <a class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative" href={`./#${btoa(tune)}`}>
           <div class="absolute w-full h-full flex justify-center items-center">
             <span class="bg-slate-800 p-2 rounded-md text-white">{name}</span>
           </div>
diff --git a/website/src/pages/swatch/index.astro b/website/src/pages/swatch/index.astro
index edf28f779..e10ebcb78 100644
--- a/website/src/pages/swatch/index.astro
+++ b/website/src/pages/swatch/index.astro
@@ -21,7 +21,10 @@ const myPatterns = await getMyPatterns();
   <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2 p-2 select-none">
     {
       Object.entries(myPatterns).map(([name, tune]) => (
-        <a class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative" href={`#${btoa(tune as string)}`}>
+        <a
+          class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative"
+          href={`./#${btoa(tune as string)}`}
+        >
           <div class="absolute w-full h-full flex justify-center items-center">
             <span class="bg-slate-800 p-2 rounded-md text-white">{name}</span>
           </div>