diff --git a/src/components/ProjectCard.vue b/src/components/ProjectCard.vue
index f1c32f3..e51852f 100644
--- a/src/components/ProjectCard.vue
+++ b/src/components/ProjectCard.vue
@@ -1,17 +1,19 @@
 <template>
   <article class="w-full sm:w-1/2 md:w-1/3 px-4 mb-8">
-    <div class="bg-gray-100 shadow-lg rounded overflow-hidden">
-      <div class="p-6">
-        <h2 class="font-bold text-gray-800">Drupal Bristol</h2>
+    <a href="#" class="group">
+      <span class="block bg-gray-100 shadow-lg rounded overflow-hidden">
+        <span class="block p-6">
+          <h2 class="font-bold text-gray-800 group-hover:underline">Drupal Bristol</h2>
 
-        <p class="text-gray-600">accounts-partners</p>
+          <p class="text-gray-600">accounts-partners</p>
 
-        <img src="/download.jpeg" alt="" class="shadow-2xl rounded mt-4">
-      </div>
+          <img src="/download.jpeg" alt="" class="shadow-2xl rounded mt-4">
+        </span>
 
-      <div class="bg-white py-5 px-8 -mt-24 relative">
-        <p>Europe (West 1)</p>
-      </div>
-    </div>
+        <span class="block bg-white py-5 px-8 -mt-24 relative">
+          <p>Europe (West 1)</p>
+        </span>
+      </span>
+    </a>
   </article>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index ad3d345..77b6780 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
   },
   variants: {
     backgroundColor: [...defaultConfig.variants.backgroundColor, 'hocus', 'group-hocus'],
-    textDecoration: [...defaultConfig.variants.textDecoration, 'hocus', 'group-hocus']
+    textDecoration: [...defaultConfig.variants.textDecoration, 'group-hover', 'hocus', 'group-hocus']
   },
   plugins: [
     require('tailwindcss-interaction-variants')(),