diff --git a/css/brands-extended.css b/css/brands-extended.css
index 21d9770..1b91aa5 100644
--- a/css/brands-extended.css
+++ b/css/brands-extended.css
@@ -89,8 +89,8 @@ button:hover,
   color: #1769ff;
   background-color: #ffff;
 }
-.button.button-devpost:hover,
-.button.button-devpost:focus {
+.button.button-behance:hover,
+.button.button-behance:focus {
   filter: brightness(90%);
 }
 
@@ -99,8 +99,8 @@ button:hover,
   color: #0000;
   background-color: #ffff;
 }
-.button.button-devpost:hover,
-.button.button-devpost:focus {
+.button.button-codepen:hover,
+.button.button-codepen:focus {
   filter: brightness(90%);
 }
 
@@ -124,6 +124,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Hackerrank */
+.button.button-hackerrank {
+  color: #0000;
+  background-color: #ffff;
+}
+.button.button-hackerrank:hover,
+.button.button-hackerrank:focus {
+  filter: brightness(90%);
+}
+
 /* Micro.blog */
 .button.button-microblog {
   color: #FFFFFF;
diff --git a/images/icons-extended/hackerrank.svg b/images/icons-extended/hackerrank.svg
new file mode 100644
index 0000000..990c8e7
--- /dev/null
+++ b/images/icons-extended/hackerrank.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path d="M256,0C221,0,49.9,98.1,32.6,128.1c-17.3,30-17.3,226,0,255.9C50,413.9,221.1,512,256,512c34.7,0,205.9-98.1,223.3-128
+		c17.5-30,17.5-226.2,0-256.1v0C461.7,98,290.6,0,256,0z M255.9,39.6c33.4,7,165.8,82.8,189,108.3c10.6,32.3,10.6,183.8,0,216.2
+		c-23,25.4-155.6,101.4-189,108.3C222.5,465.5,90,389.6,67,364.1c-10.5-32.5-10.5-183.8,0-216.2C90,122.4,222.5,46.5,255.9,39.6z
+		 M196.9,118.2l-39.4,39.4h19.7v196.9h39.4v-78.8h78.8v78.8h-19.7l39.4,39.4l39.4-39.4h-19.7V177.2h-39.4v59.1h-78.8v-78.8h19.7
+		L196.9,118.2z"/>
+</g>
+</svg>
diff --git a/preview.html b/preview.html
index bc5a215..8979eb1 100644
--- a/preview.html
+++ b/preview.html
@@ -104,7 +104,12 @@
 
         <!-- Codepen -->
         <a class="button button-behance" href="#" target="_blank" rel="noopener">
-            <img class="icon" src="images/icons-extended/codepen.svg" alt="Codepen Logo">Codepen</a>
+            <img class="icon" src="images/icons-extended/odepen.svg" alt="Codepen Logo">Codepen</a>
+        <br>
+
+        <!-- Devpost -->
+        <a class="button button-devpost" href="#" target="_blank" rel="noopener">
+            <img class="icon icon-invert" src="images/icons-extended/devpost.svg" alt="Devpost Logo">Devpost</a>
         <br>
 
         <!-- Distiller -->
@@ -112,6 +117,11 @@
             <img class="icon" src="images/icons/distiller.svg" alt="Distiller Logo">Distiller</a>
         <br>
 
+        <!-- Hackerrank -->
+        <a class="button button-hackerrank" href="#" target="_blank" rel="noopener">
+            <img class="icon" src="images/icons/hackerrank.svg" alt="HackerRank Logo">HackerRank</a>
+        <br>
+
         <!-- MicroBlog -->
         <a class="button button-microblog" href="#" target="_blank" rel="noopener">
             <img class="icon" src="images/icons-extended/microblog.svg" alt="MicroBlog Logo">MicroBlog</a>