diff --git a/src/assets/tails.jpg b/src/assets/tails.jpg
new file mode 100644
index 0000000..1ddb903
Binary files /dev/null and b/src/assets/tails.jpg differ
diff --git a/src/assets/tails_mobile.jpg b/src/assets/tails_mobile.jpg
new file mode 100644
index 0000000..7bea860
Binary files /dev/null and b/src/assets/tails_mobile.jpg differ
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 0a2bcd4..7bacd9d 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-    <header class="bg-gray-900 pattern border-b-4 border-blue-500">
+    <header class="pattern bg-gray-900 border-b-4 border-blue-500">
         <nav>
             <div class="container mx-auto px-6 py-4">
                 <div class="flex justify-between items-center">
diff --git a/src/components/Main.vue b/src/components/Main.vue
index 04396c4..8013d8c 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -13,6 +13,11 @@
             </div>
 
             <p class="mt-8 text-gray-700 dark:text-gray-300 text-center"> Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span><a href="https://gist.github.com/khatabwedaa/352573904a5b2d5ff3598bcd54ce9f04" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline"> configuration</a></p>
+
+            <a href="https://a.paddle.com/v2/click/37973/124351?link=3167" class="block max-w-5xl mx-auto mt-8 overflow-hidden rounded-md">
+                <img class="hidden md:block" src="../assets/tails.jpg" alt="devdojo tails">
+                <img class="md:hidden" src="../assets/tails_mobile.jpg" alt="devdojo tails">
+            </a>
         </div>
 
         <div class="w-full max-w-6xl mx-auto">