diff --git a/components/Hero.vue b/components/Hero.vue
index 71ac0ce..cdebb44 100644
--- a/components/Hero.vue
+++ b/components/Hero.vue
@@ -1,26 +1,30 @@
 <template>
-  <div class="rounded-3xl bg-white w-1/2 mx-auto p-6 shadow-xl text-center">
-    <Logo />
-    <h1 class="font-mono text-2xl">
-      wazo-lab.io
-    </h1>
-    <div class="mt-4">
-      <a
-        href="#projects"
-        target="_self"
-        rel="noopener noreferrer"
-        class="button--green"
-      >
-        Projects
-      </a>
-      <a
-        href="#contact-me"
-        target="_self"
-        rel="noopener noreferrer"
-        class="button--grey"
-      >
-        Contact Me
-      </a>
+  <div
+    class="h-screen rounded-b-3xl shadow-xl bg-gradient-to-r from-blue-300 to-blue-700 flex items-center"
+  >
+    <div class="rounded-3xl bg-white w-1/2 mx-auto p-6 shadow-xl text-center">
+      <Logo />
+      <h1 class="font-mono text-2xl">
+        wazo-lab.io
+      </h1>
+      <div class="mt-4">
+        <a
+          href="#projects"
+          target="_self"
+          rel="noopener noreferrer"
+          class="button--green"
+        >
+          Projects
+        </a>
+        <a
+          href="#contact-me"
+          target="_self"
+          rel="noopener noreferrer"
+          class="button--grey"
+        >
+          Contact Me
+        </a>
+      </div>
     </div>
   </div>
 </template>