diff --git a/css/brands-extended.css b/css/brands-extended.css
index 88b1a54..c6d70ae 100644
--- a/css/brands-extended.css
+++ b/css/brands-extended.css
@@ -84,6 +84,16 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Devpost */
+.button.button-devpost {
+  color: #ffffff;
+  background-color: #003E54;
+}
+.button.button-devpost:hover,
+.button.button-devpost:focus {
+  filter: brightness(90%);
+}
+
 /* Micro.blog */
 .button.button-microblog {
   color: #FFFFFF;
diff --git a/images/icons-extended/devpost.svg b/images/icons-extended/devpost.svg
new file mode 100644
index 0000000..f31234f
--- /dev/null
+++ b/images/icons-extended/devpost.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.002 1.60999L0 12.004L6.002 22.39H17.998L24 12.004L17.998 1.60999H6.002ZM7.595 5.69398H11.542C15.147 5.69398 17.818 7.38899 17.818 12.004C17.818 16.44 14.608 18.306 11.362 18.306H7.595V5.69398ZM10.112 8.14298V15.857H11.353C13.999 15.857 15.215 14.307 15.215 11.996C15.224 9.42699 14.119 8.14298 11.448 8.14298H10.112Z" fill="white"/>
+</svg>
diff --git a/preview.html b/preview.html
index 9f32277..888c64a 100644
--- a/preview.html
+++ b/preview.html
@@ -63,7 +63,7 @@
         -->
 
         <!-- Your Image Here -->
-        <img src="images/avatar.png" class="avatar" srcset="images/avatar@2x.png 2x" alt="LittleLink Logo">
+        <img src="images/avatar.svg" class="avatar" alt="LittleLink Logo">
 
         <!-- Title -->
         <h1>LittleLink Extended</h1>
@@ -97,6 +97,11 @@
 
         -->
 
+        <!-- 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>
+
         <!-- 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>