diff --git a/content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md b/content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md
index 107291cf1..aad47afac 100644
--- a/content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md
+++ b/content/roadmaps/100-frontend/content/109-css-preprocessors/readme.md
@@ -1 +1,7 @@
-# Css preprocessors
\ No newline at end of file
+# Css Preprocessors
+
+CSS Preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/css-preprocessors/#:~:text=CSS%20Preprocessors%20compile%20the%20code,preprocessor%20were%20not%20in%20place.'>CSS Preprocessors Explained</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://sherocommerce.com/what-is-a-css-preprocessors-why-use-them/'>Why Use Preprocessors?</BadgeLink>