diff --git a/content/roadmaps/106-javascript/content/118-working-with-apis/100-xml-http-request.md b/content/roadmaps/106-javascript/content/118-working-with-apis/100-xml-http-request.md
index e9a5c3d98..d06d7ecc0 100644
--- a/content/roadmaps/106-javascript/content/118-working-with-apis/100-xml-http-request.md
+++ b/content/roadmaps/106-javascript/content/118-working-with-apis/100-xml-http-request.md
@@ -1 +1,7 @@
 # XMLHttpRequest
+
+`XMLHttpRequest` (XHR) is a built-in browser object that can be used to interact with server. XHR allows you to update data without having to reload a web page. Despite the word XML in its name, XHR not only used to retrieve data with XML format, we can use it with any type of data, like JSON, file(s), and much more.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest'>Using XMLHttpRequest</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://javascript.info/xmlhttprequest'>Network request - XMLHttpRequest</BadgeLink>
diff --git a/content/roadmaps/106-javascript/content/118-working-with-apis/101-fetch.md b/content/roadmaps/106-javascript/content/118-working-with-apis/101-fetch.md
index 8d5748e8a..19fab7b5e 100644
--- a/content/roadmaps/106-javascript/content/118-working-with-apis/101-fetch.md
+++ b/content/roadmaps/106-javascript/content/118-working-with-apis/101-fetch.md
@@ -1 +1,7 @@
 # Fetch
+
+Fetch or Fetch API is a modern alternative to XMLHttpRequest. Compared to XMLHttpRequest, fetch is cleaner, simpler and easier to understand. Fetch already uses Promise, so `fetch()` does not directly return response body but instead returns a promise that resolves with a `Response` object, which is a representation of the entire HTTP response.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch'>Using the Fetch API</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://javascript.info/fetch'>Network request - Fetch</BadgeLink>
diff --git a/content/roadmaps/106-javascript/content/118-working-with-apis/readme.md b/content/roadmaps/106-javascript/content/118-working-with-apis/readme.md
index d5696b867..edbb14ff3 100644
--- a/content/roadmaps/106-javascript/content/118-working-with-apis/readme.md
+++ b/content/roadmaps/106-javascript/content/118-working-with-apis/readme.md
@@ -1,3 +1,9 @@
 # Working with APIs
 
-Learn to use `XMLHTTPRequest` and `Fetch`.
+When working with remote APIs, you need a way to interact with those APIs. Modern JavaScript provides two native ways to send HTTP requests to remote servers, `XMLHttpRequest` and `Fetch`.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data'>Fetching data from the server</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest'>XMLHttpRequest</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'>Fetch API</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.openreplay.com/ajax-battle-xmlhttprequest-vs-the-fetch-api'>Ajax Battle: XMLHttpRequest vs the Fetch API</BadgeLink>