diff --git a/content/roadmaps/113-qa/content/103-qa-automated-testing/100-frontend-automation/100-basic-introduction/browser-devtools.md b/content/roadmaps/113-qa/content/103-qa-automated-testing/100-frontend-automation/100-basic-introduction/browser-devtools.md
index 58b0f7e7b..11f598a16 100644
--- a/content/roadmaps/113-qa/content/103-qa-automated-testing/100-frontend-automation/100-basic-introduction/browser-devtools.md
+++ b/content/roadmaps/113-qa/content/103-qa-automated-testing/100-frontend-automation/100-basic-introduction/browser-devtools.md
@@ -1 +1,7 @@
-# Browser devtools
\ No newline at end of file
+# Browser devtools
+
+Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. This article explains how to use the basic functions of your browser's devtools.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools'>What are browser developer tools?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/browser-developer-tools/'>Browser Developer Tools</BadgeLink>