diff --git a/src/components/ProjectCard.vue b/src/components/ProjectCard.vue
index a2fa205..32a759b 100644
--- a/src/components/ProjectCard.vue
+++ b/src/components/ProjectCard.vue
@@ -1,6 +1,6 @@
 <template>
   <article class="w-full sm:w-1/2 md:w-1/3 px-4 mb-8">
-    <a href="#" class="group block">
+    <router-link :to="{ name: 'project', params: { id: 1 }}" class="group block">
       <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>
@@ -14,6 +14,6 @@
           <p>Europe (West 1)</p>
         </span>
       </span>
-    </a>
+    </router-link>
   </article>
 </template>
diff --git a/src/router.js b/src/router.js
index 2891289..225e7cd 100644
--- a/src/router.js
+++ b/src/router.js
@@ -15,7 +15,7 @@ export default new Router({
       component: Projects
     },
     {
-      path: '/project/{id}',
+      path: '/project/:id',
       name: 'project',
       component: Project
     }