diff --git a/packages/docs/src/routes/docs/integrations/astro/index.mdx b/packages/docs/src/routes/docs/integrations/astro/index.mdx
index 93455422ff3..c087e06119e 100644
--- a/packages/docs/src/routes/docs/integrations/astro/index.mdx
+++ b/packages/docs/src/routes/docs/integrations/astro/index.mdx
@@ -63,8 +63,8 @@ The integration needs the following in `tsconfig.json` for typescript to recogni
 
 ```ts
 "compilerOptions": {
-"jsx": "react-jsx",
-"jsxImportSource": "@builder.io/qwik"
+  "jsx": "react-jsx",
+  "jsxImportSource": "@builder.io/qwik"
 }
 ```
 
@@ -108,7 +108,7 @@ In other UI frameworks, a hydration directive would be needed for interactivity,
 
 When using Qwik inside a meta framework like Astro or Qwik City, components are loaded on the server, prefetched in a separate thread, and "resumed" on the client.
 
-For example here's how we create a counter component in Qwik.
+For example here's how we create a counter component in Qwik (e.g. at `src/components/counter.tsx`).
 
 ```tsx
 import { component$, useSignal } from "@builder.io/qwik";