diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md
index 93c295619..d30f375dc 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md
@@ -1 +1,7 @@
-# React query
\ No newline at end of file
+# React Query
+
+Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/TanStack/query'>TanStack Query</BadgeLink>
+<BadgeLink colorScheme='red' badgeText='Watch' href='https://www.youtube.com/watch?v=novnyCaa7To'>React Query in 100 Seconds</BadgeLink>
diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md
index 46ef6918f..50049e6df 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md
@@ -1 +1,9 @@
-# Use http
\ No newline at end of file
+# use-http
+
+React hook for making isomorphic http requests.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://use-http.com/#/'>Official Website: use-http</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/ava/use-http'>ava / use-http</BadgeLink>
+
+
diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md
index 845aec91d..7d1fa06ba 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md
@@ -1 +1,9 @@
-# Apollo
\ No newline at end of file
+# Apollo
+
+Apollo is a platform for building a unified graph, a communication layer that helps you manage the flow of data between your application clients (such as web and native apps) and your back-end services.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.apollographql.com'>Apollo Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.apollographql.com/docs/'>Official Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Watch' href='https://www.youtube.com/c/ApolloGraphQL/'>Official YouTube Channel</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=YyUWW04HwKY'>GraphQL With React Tutorial - Apollo Client</BadgeLink>
diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md
index b821c1bb5..55722ec2e 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md
@@ -1 +1,7 @@
-# Relay modern
\ No newline at end of file
+# Relay Modern
+
+Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://relay.dev/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://relay.dev/docs/'>Introduction to Relay modern</BadgeLink>
diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md
index fd41e81cf..11df9df19 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md
@@ -1 +1,9 @@
-# Axios
\ No newline at end of file
+# Axios
+
+The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests.
+
+Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://axios-http.com/docs/intro'>Axios Getting Started</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/#why'>How to make HTTP requests with Axios</BadgeLink>
diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md
index 417376dc6..0279e6a10 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md
@@ -1 +1,6 @@
-# Unfetch
\ No newline at end of file
+# Unfetch
+
+Unfetch is the bare minimum 500b [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) polyfill.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/developit/unfetch'>Official GitHub Repository</BadgeLink>
diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md
index 4e52ae96e..32c3e7b2b 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md
@@ -1 +1,7 @@
-# Superagent
\ No newline at end of file
+# Superagent
+
+Small progressive client-side HTTP request library, and Node.js module with the same API, supporting many high-level HTTP client features
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://visionmedia.github.io/superagent/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/visionmedia/superagent'>GitHub Repository</BadgeLink>
diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md
index 98983b8af..d9a8dbec7 100644
--- a/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md
+++ b/content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md
@@ -1 +1,8 @@
-# Api calls
\ No newline at end of file
+# API Calls
+
+There are several options available to make API calls from your React.js applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/faq-ajax.html'>AJAX and APIs</BadgeLink>
+
+