diff --git a/eslint.config.mjs b/eslint.config.mjs
index 6baf290..091797c 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -47,6 +47,7 @@ export default tseslint.config(
           allow: ["HttpError"],
         },
       ],
+      "import/no-unresolved": [2, { ignore: ["^\\$app"] }],
     },
   },
   {
diff --git a/packages/docs/src/app.d.ts b/packages/docs/src/app.d.ts
new file mode 100644
index 0000000..520c421
--- /dev/null
+++ b/packages/docs/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {};
diff --git a/packages/docs/src/content/docs/05-heading-ids.mdoc b/packages/docs/src/content/docs/05-heading-ids.mdoc
index 322d4c6..a72fbbe 100644
--- a/packages/docs/src/content/docs/05-heading-ids.mdoc
+++ b/packages/docs/src/content/docs/05-heading-ids.mdoc
@@ -9,7 +9,7 @@ or have them generated automatically.
 Each heading element in the generated HTML has an `id` attribute to link to directly.
 
 Each page then also exports a `headings` property: a list of all headings with their text, level, and ID.
-Use the list to generate a [table of contents](#page-table-of-contents).
+Use the list to generate a [table of contents](./examples/toc).
 
 ## Custom ID creator (slugifier)
 
diff --git a/packages/docs/src/lib/components/CopyButton.svelte b/packages/docs/src/lib/components/CopyButton.svelte
index 8cd69bb..c78e7f9 100644
--- a/packages/docs/src/lib/components/CopyButton.svelte
+++ b/packages/docs/src/lib/components/CopyButton.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  // eslint-disable-next-line import/no-unresolved
   import { browser } from "$app/environment";
 
   let { textToCopy }: { textToCopy: string } = $props();
diff --git a/packages/docs/src/lib/components/NavLink.svelte b/packages/docs/src/lib/components/NavLink.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/packages/docs/src/lib/components/SiteNav.svelte b/packages/docs/src/lib/components/SiteNav.svelte
index 011941b..2c054a0 100644
--- a/packages/docs/src/lib/components/SiteNav.svelte
+++ b/packages/docs/src/lib/components/SiteNav.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { MediaQuery } from "svelte/reactivity";
 
+  import { resolve } from "$app/paths";
   import { navStyles } from "$lib/utils/classConst";
   import { getNavigationItems } from "$lib/utils/getNavigationItems";
   import { removeNumbersFromNavLinks } from "$lib/utils/handleNavNumbers";
@@ -29,8 +30,9 @@
                 <li>
                   <a
                     onclick={closeNav}
-                    href={`/docs/${removeNumbersFromNavLinks(childPath)}`}
-                    >{childData.title}</a
+                    href={resolve(
+                      `/docs/${removeNumbersFromNavLinks(childPath)}`
+                    )}>{childData.title}</a
                   >
                 </li>
               {/each}
@@ -40,7 +42,7 @@
           <li>
             <a
               onclick={closeNav}
-              href={`/docs/${removeNumbersFromNavLinks(itemPath)}`}
+              href={resolve(`/docs/${removeNumbersFromNavLinks(itemPath)}`)}
               >{itemData.title}</a
             >
           </li>
diff --git a/packages/docs/src/lib/components/TopNav.svelte b/packages/docs/src/lib/components/TopNav.svelte
index bdeb5eb..d367c7f 100644
--- a/packages/docs/src/lib/components/TopNav.svelte
+++ b/packages/docs/src/lib/components/TopNav.svelte
@@ -3,6 +3,8 @@
 
   import SiteNav from "./SiteNav.svelte";
 
+  import { resolve } from "$app/paths";
+
   const medium = new MediaQuery("min-width: 768px");
 
   let isOpen = $state(false);
@@ -11,7 +13,7 @@
 <nav
   class="px-6 lg:px-0 py-4 flex justify-between max-w-4xl mx-auto items-center border-b-2"
 >
-  <a class={!medium.current && "hidden"} href="/">Home </a>
+  <a class={!medium.current && "hidden"} href={resolve("/")}>Home </a>
   <button
     class={medium.current && "hidden"}
     onclick={() => {
@@ -26,7 +28,7 @@
     </svg>
   </button>
   <section class="*:pl-2">
-    <a href="/docs/get-started">Docs</a>
+    <a href={resolve("/docs/get-started")}>Docs</a>
     <a href="https://github.com/CollierCZ/markdoc-svelte">GitHub</a>
   </section>
 </nav>
diff --git a/packages/docs/src/routes/+page.svelte b/packages/docs/src/routes/+page.svelte
index 7b743a2..c978822 100644
--- a/packages/docs/src/routes/+page.svelte
+++ b/packages/docs/src/routes/+page.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-  import type { PageData } from './$types'
-  
-  let { data }: { data: PageData } = $props()
+  import type { PageData } from "./$types";
+
+  import { resolve } from "$app/paths";
+
+  let { data }: { data: PageData } = $props();
   const title = $derived(data.page.frontmatter?.title);
 </script>
 
@@ -9,7 +11,6 @@
   <title>{title}</title>
 </svelte:head>
 
-
 <div class="grid h-screen place-items-center pb-32">
   <div class="grid place-items-center px-4 md:px-0">
     <h1 class="font-extrabold text-4xl">{title}</h1>
@@ -18,7 +19,7 @@
     </div>
     <a
       class="rounded-lg bg-green-100 p-4 text-green-900"
-      href="/docs/get-started">Get started</a
+      href={resolve("/docs/get-started")}>Get started</a
     >
   </div>
 </div>
diff --git a/packages/docs/svelte.config.js b/packages/docs/svelte.config.js
index 513972a..e62719b 100644
--- a/packages/docs/svelte.config.js
+++ b/packages/docs/svelte.config.js
@@ -18,6 +18,9 @@ const config = {
     adapter: adapter({
       fallback: "404.html",
     }),
+    paths: {
+      base: "/markdoc-svelte",
+    },
   },
 };