Improve Documentation Readability and Simplify Onboarding Experience

api-playground/overview.mdx

@@ -1,11 +1,76 @@
 ---
-title: 'Playground'
-description: 'Enable users to interact with your API'
+title: 'API Playground'
+description: 'Try out API endpoints directly in the documentation'
 openapi: 'POST /project/update/{projectId}'
 hideApiMarker: true
 icon: 'play'
 ---
 
-The API playground is an interactive environment to make requests and preview an API endpoint.
+The API playground lets you test API endpoints right from the documentation without writing any code. Think of it as a built-in Postman that's always ready to go.
 
-This page is automatically generated from the OpenAPI specification.
+## How It Works
+
+<Steps>
+  <Step title="Find an API endpoint">
+    Browse through the documentation to find the API endpoint you want to test. Each endpoint will have an interactive playground section.
+  </Step>
+
+  <Step title="Fill in the parameters">
+    The playground automatically shows all the required fields you need to fill in:
+    - Path parameters (like IDs in the URL)
+    - Query parameters 
+    - Request body fields
+
+    <Note>
+      Required fields are marked with a red asterisk (*)
+    </Note>
+  </Step>
+
+  <Step title="Send the request">
+    Click the "Try It" button to make a real API call. You'll see:
+    - The complete request that was sent
+    - The response you got back
+    - Response status code
+    - Response headers
+  </Step>
+</Steps>
+
+## Example Usage
+
+Here's what you'll typically see in the playground:
+
+<Frame>
+  <img src="https://mintlify-assets.b-cdn.net/api-playground-example.png" alt="API Playground Example" />
+</Frame>
+
+<Tip>
+  You can switch between different authentication methods and add custom headers if needed.
+</Tip>
+
+## Features
+
+<CardGroup cols={2}>
+  <Card title="Authentication Ready" icon="key">
+    Your API key is automatically included when you're logged in.
+  </Card>
+
+  <Card title="Real-Time Testing" icon="bolt">
+    Get instant responses from the API to verify your parameters.
+  </Card>
+
+  <Card title="Code Generation" icon="code">
+    See example code snippets in multiple programming languages.
+  </Card>
+
+  <Card title="Error Handling" icon="bug">
+    Clear error messages help you troubleshoot failed requests.
+  </Card>
+</CardGroup>
+
+## Automatic Generation
+
+The playground is automatically generated from our OpenAPI specification, ensuring it's always up to date with the latest API changes.
+
+<Note>
+  Can't see the playground for an endpoint? Make sure the endpoint is properly defined in the OpenAPI specification.
+</Note>