diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 361d8709..4695f6d4 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -53,7 +53,7 @@ export default async function TheBestDamnLandingPageEver() {
       {/* How it works section */}
       <section className='flex flex-col gap-8 mb-16'>
         <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
-          How It Works
+          LLM Tools that work everywhere
         </h2>
 
         <ExampleUsage
diff --git a/apps/web/src/components/code-block/highlight.tsx b/apps/web/src/components/code-block/highlight.ts
similarity index 92%
rename from apps/web/src/components/code-block/highlight.tsx
rename to apps/web/src/components/code-block/highlight.ts
index 1d0b4617..402441de 100644
--- a/apps/web/src/components/code-block/highlight.tsx
+++ b/apps/web/src/components/code-block/highlight.ts
@@ -18,7 +18,7 @@ export async function highlight({
 }): Promise<JSX.Element> {
   className = cn('w-full text-wrap p-4 text-sm rounded-sm', className)
 
-  const out = await codeToHast(code, {
+  const hast = await codeToHast(code, {
     lang,
     theme,
     // TODO: use a custom `pre` element down below instead of this
@@ -33,7 +33,7 @@ export async function highlight({
     ]
   })
 
-  return toJsxRuntime(out, {
+  return toJsxRuntime(hast, {
     Fragment,
     jsx,
     jsxs