diff --git a/components/IndexHero.vue b/components/IndexHero.vue
new file mode 100644
index 0000000..86668f2
--- /dev/null
+++ b/components/IndexHero.vue
@@ -0,0 +1,48 @@
+<template>
+  <!-- Hero card -->
+  <div class="relative">
+    <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+      <div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
+        <div class="absolute inset-0">
+          <img class="h-full w-full object-cover" src="/hero.jpg" alt="" />
+        </div>
+        <div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
+          <h1
+            class="text-center text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"
+          >
+            <span class="block text-white">Faetale</span>
+            <span class="block text-indigo-600">Once Upon a Time...</span>
+          </h1>
+          <p
+            class="mt-6 max-w-lg mx-auto text-center text-xl text-indigo-500 sm:max-w-3xl"
+          >
+            ...there was a queer tale of fantasy tabletop roleplaying games.
+            Join Gaiety on a journey through her favorite game systems,
+            adventures and who knows what else!
+          </p>
+          <div
+            class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center"
+          >
+            <div
+              class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5"
+            >
+              <a
+                href="#"
+                class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-indigo-50 sm:px-8"
+              >
+                Watch
+              </a>
+              <a
+                href="#"
+                class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"
+              >
+                Support
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/components/VideosList.vue b/components/VideosList.vue
index 9b3a781..352386b 100644
--- a/components/VideosList.vue
+++ b/components/VideosList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white">
+  <div class="bg-gray-200">
     <div
       class="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8"
     >
diff --git a/nuxt.config.js b/nuxt.config.js
index 62b84f8..8edbc68 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -39,6 +39,12 @@ export default {
     config: {
       plugins: [tailwindAspectRatio],
     },
+    // theme: {
+    //   colors: {
+    //     'brand-bright': '#ca4e8d',
+    //     'brand-dark': '#83398c',
+    //   },
+    // },
   },
 
   // Modules: https://go.nuxtjs.dev/config-modules
diff --git a/pages/index.vue b/pages/index.vue
index e28ff61..ff194a2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,6 +4,7 @@
       <PageNav />
     </header>
     <main>
+      <IndexHero />
       <VideosList />
     </main>
   </div>
diff --git a/static/hero.jpg b/static/hero.jpg
new file mode 100644
index 0000000..74e44c7
Binary files /dev/null and b/static/hero.jpg differ