diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue
index 1f3bb2d1..28619e6b 100644
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@@ -21,8 +21,13 @@
           <prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
         </div>
       </div>
-      <div class="demo__link">
-        <a :href="githubUrl" target="_blank">Edit on GitHub</a>
+      <div class="demo__meta">
+        <div class="demo__name">
+          {{ this.name }}
+        </div>
+        <a class="demo__link" :href="githubUrl" target="_blank">
+          Edit on GitHub →
+        </a>
       </div>
     </template>
     <div v-else class="demo__error">
diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 78fb02e6..4c8f8aba 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -49,8 +49,19 @@
     }
   }
 
-  &__link {
+  &__meta {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
     padding: 1rem 1.5rem;
+    border: 1px solid rgba($colorBlack, 0.1);
+    border-top-width: 0;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &__link {
+    text-align: right;
   }
 
   &__error {