diff --git a/docs/my-website/docs/tutorials/cost_tracking_coding.md b/docs/my-website/docs/tutorials/cost_tracking_coding.md
index 69b4de6c07b..29d36fd8d49 100644
--- a/docs/my-website/docs/tutorials/cost_tracking_coding.md
+++ b/docs/my-website/docs/tutorials/cost_tracking_coding.md
@@ -1,9 +1,19 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import Image from '@theme/IdealImage';
+
 # Track Usage for Coding Tools
 
 This tutorial shows how to track usage and costs for AI-powered coding tools like Claude Code, Roo Code, Gemini CLI, and OpenAI Codex through LiteLLM.
 
 Track requests, total costs, and user engagement metrics for each coding tool via User-Agent headers.
 
+<Image 
+  img={require('../../img/agent_1.png')}
+  style={{width: '100%', display: 'block', margin: '2rem auto'}}
+/>
+
+
 ## Who This Is For
 
 Central AI Platform teams providing developers access to coding tools through LiteLLM. Use this to monitor tool engagement and track individual user usage patterns.
@@ -31,6 +41,11 @@ Ensure your coding tool includes identifying User-Agent headers in API requests.
 
 Confirm that LiteLLM is properly tracking requests by checking logs for the expected User-Agent values.
 
+<Image 
+  img={require('../../img/agent_2.png')}
+  style={{width: '100%', display: 'block', margin: '2rem auto'}}
+/>
+
 ### 4. View Usage Dashboard
 
 Access the LiteLLM dashboard to view aggregated usage metrics and user engagement data.
diff --git a/docs/my-website/img/agent_1.png b/docs/my-website/img/agent_1.png
new file mode 100644
index 00000000000..42ef6ebdd98
Binary files /dev/null and b/docs/my-website/img/agent_1.png differ
diff --git a/docs/my-website/img/agent_2.png b/docs/my-website/img/agent_2.png
new file mode 100644
index 00000000000..13819a8c711
Binary files /dev/null and b/docs/my-website/img/agent_2.png differ