diff --git a/src/App.vue b/src/App.vue
index e92830a..ca166e6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -52,21 +52,7 @@
       <page-title>All Projects</page-title>
 
       <div class="flex flex-wrap mt-4 -mx-4 -mb-8">
-        <article class="w-full sm:w-1/2 md:w-1/3 px-4 mb-8 " v-for="n in 9">
-          <div class="bg-gray-100 shadow-lg rounded overflow-hidden">
-            <div class="p-6">
-              <h2 class="font-bold text-gray-800">Drupal Bristol</h2>
-
-              <p class="text-gray-600">accounts-partners</p>
-
-              <img src="/download.jpeg" alt="" class="shadow-2xl rounded mt-4">
-            </div>
-
-            <div class="bg-white py-5 px-8 -mt-24 relative">
-              Europe (West 1)
-            </div>
-          </div>
-        </article>
+        <project-card v-for="n in 9"></project-card>
       </div>
     </div>
 
@@ -74,4 +60,14 @@
   </div>
 </template>
 
+<script>
+import ProjectCard from '@/components/ProjectCard'
+
+export default {
+  components: {
+    ProjectCard
+  }
+}
+</script>
+
 <style src="./css/app.css"></style>
diff --git a/src/components/ProjectCard.vue b/src/components/ProjectCard.vue
new file mode 100644
index 0000000..f1c32f3
--- /dev/null
+++ b/src/components/ProjectCard.vue
@@ -0,0 +1,17 @@
+<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>
+
+        <p class="text-gray-600">accounts-partners</p>
+
+        <img src="/download.jpeg" alt="" class="shadow-2xl rounded mt-4">
+      </div>
+
+      <div class="bg-white py-5 px-8 -mt-24 relative">
+        <p>Europe (West 1)</p>
+      </div>
+    </div>
+  </article>
+</template>