diff --git a/src/components/frontendPageContent/DesignResources.js b/src/components/frontendPageContent/DesignResources.js
index 325f3b3..d48c82f 100644
--- a/src/components/frontendPageContent/DesignResources.js
+++ b/src/components/frontendPageContent/DesignResources.js
@@ -229,7 +229,9 @@ const DesignResources = () => {
           <ResourceCardTitle>Others</ResourceCardTitle>
           <ResourceCardLinks>
             <ResourceLink>
-              <a target="_blank" href=""></a>
+              <a target="_blank" href="https://fontello.com/">Fontello - icon fonts generator</a>
+              <ResourceBadge>Free</ResourceBadge>
+              <ResourceBadge>Tool</ResourceBadge>
             </ResourceLink>
           </ResourceCardLinks>
         </ResourceCard>
diff --git a/src/components/frontendPageContent/JsBasics.js b/src/components/frontendPageContent/JsBasics.js
index 3546f6a..7e91cb6 100644
--- a/src/components/frontendPageContent/JsBasics.js
+++ b/src/components/frontendPageContent/JsBasics.js
@@ -8,6 +8,7 @@ import { ResourceSection } from "../../styles/styled-components/ResourceSection.
 import { ResourceSectionBody } from "../../styles/styled-components/ResourceSectionBody.styled";
 import { ResourceSectionHeading } from "../../styles/styled-components/ResourceSectionHeading.styled";
 import { ResourceSectionLinks } from "../../styles/styled-components/ResourceSectionLinks.styled";
+import { ResourceBadge } from "../../styles/styled-components/ResourceBadge.styled";
 
 const JsBasics = () => {
   return (
@@ -172,8 +173,8 @@ const JsBasics = () => {
           </p>
           <ResourceCardLinks>
             <ResourceLink>
-              <a target="_blank" href="#"></a>
-              <span className="resource-link-badge"></span>
+              <a target="_blank" href="https://codepen.io/">Codepen - The best place to build, test, and discover front-end code.</a>
+              <ResourceBadge>Tool</ResourceBadge>
             </ResourceLink>
           </ResourceCardLinks>
         </ResourceCard>