diff --git a/content/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md b/content/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md
index ba04d1605..6c80398a9 100644
--- a/content/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md
+++ b/content/roadmaps/100-frontend/content/103-javascript/102-learn-fetch-api-ajax-xhr.md
@@ -1 +1,7 @@
-# Learn fetch api ajax xhr
\ No newline at end of file
+# Fetch API
+
+Ajax is the technique that lets us send and receive the data asynchronously from the servers e.g. updaing the user profile or asynchronously fetch the list of searched products without reloading the page.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'>Fetch API MDN Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=-ZI0ea5O2oA'>JavaScript Fetch API</BadgeLink>