diff --git a/site/pages/getting-started/overview.md b/site/pages/getting-started/overview.mdx
similarity index 97%
rename from site/pages/getting-started/overview.md
rename to site/pages/getting-started/overview.mdx
index 038ba79d9a..c7182a2e62 100644
--- a/site/pages/getting-started/overview.md
+++ b/site/pages/getting-started/overview.mdx
@@ -30,7 +30,13 @@ Account Kit provides all the tools you need to build invisible web3 accounts. It
 - **Gas Manager API:** A programmable API to sponsor gas for UserOps that meet your criteria.
 - **Bundler API:** The most reliable ERC-4337 Bundler. Land your UserOps on-chain, batch operations, and sponsor gas at a massive scale.
 
-<img src="/images/account-kit-overview.jpg" width="400" height="auto" alt="Account Kit Overview" style="display: block; margin: auto;">
+<img
+  src="/images/account-kit-overview.jpg"
+  width="400"
+  height="auto"
+  alt="Account Kit Overview"
+  style={{ display: "block", margin: "auto" }}
+/>
 
 Let's dive into each component.
 
diff --git a/site/pages/index.mdx b/site/pages/index.mdx
index 179ab12d8b..869967e07e 100644
--- a/site/pages/index.mdx
+++ b/site/pages/index.mdx
@@ -58,6 +58,8 @@ description: Account Kit is a vertically integrated stack for building apps that
               </div>
             </div>
 
+<div class="vp-doc max-lg:hidden">
+
 ```ts [gettingStarted.ts]
 import { createModularAccountAlchemyClient } from "@alchemy/aa-alchemy";
 import { sepolia } from "@alchemy/aa-core";
@@ -69,6 +71,8 @@ export const smartAccountClient = await createModularAccountAlchemyClient({
 });
 ```
 
+</div>
+
           </div>
         </div>
         <div className="flex max-lg:flex-wrap justify-center gap-[32px]">