diff --git a/docs/getting-started/quickstart.mdx b/docs/getting-started/quickstart.mdx
index 4687b41..af7e259 100644
--- a/docs/getting-started/quickstart.mdx
+++ b/docs/getting-started/quickstart.mdx
@@ -6,37 +6,29 @@ description: Learn the basics of the AI Agent SDK in a few minutes.
 
 <Steps>
     <Step title="Start with a template">
-        ```npx @covalenthq/create-zee-app```
+        <pre><code>npx @covalenthq/create-zee-app</code></pre>
     </Step>
     <Step title="Modify the agent">
-```tsx
-const agent1 = new Agent({
+        <pre><code>{`const agent1 = new Agent({
     name: "Agent1",
     model: {
         provider: "OPEN_AI",
         name: "gpt-4o-mini",
     },
     description: "A helpful AI assistant that can engage in conversation.",
-});
-```
+});`}</code></pre>
     </Step>
     <Step title="Modify the ZEE Workflow">
-```tsx
-const zee = new ZeeWorkflow({
+        <pre><code>{`const zee = new ZeeWorkflow({
     description: "A workflow of agents that do stuff together",
     output: "Just bunch of stuff",
     agents: { agent1, agent2 },
-});
-```
+});`}</code></pre>
     </Step>
     <Step title="Run the Zee Workflow">
-```tsx
-(async function main() {
+        <pre><code>{`(async function main() {
     const result = await zee.run();
     console.log(result);
-})();
-```
-
+})();`}</code></pre>
     </Step>
-
 </Steps>