diff --git a/gridsome.config.js b/gridsome.config.js
index 71a6c0fdc..59e049b5b 100644
--- a/gridsome.config.js
+++ b/gridsome.config.js
@@ -59,6 +59,24 @@ module.exports = {
           }
         }
       }
+    },
+
+    {
+      use: '@gridsome/source-filesystem',
+      options: {
+        typeName: 'Project',
+        path: './content/project/**/*.md',
+        templates: {
+          Project: '/project/:id'
+        },
+        refs: {
+          author: 'Person',
+          tags: {
+            typeName: 'Tag',
+            create: true
+          }
+        }
+      }
     }
   ],
   transformers: {
@@ -85,5 +103,9 @@ module.exports = {
       path: '/tags/:id',
       component: '~/templates/Tag.vue'
     }],
+    Project: [{
+      path: '/project/:id',
+      component: '~/templates/Project.vue'
+    }],
   }
 }
diff --git a/gridsome.server.js b/gridsome.server.js
index 5df953649..e1971538c 100644
--- a/gridsome.server.js
+++ b/gridsome.server.js
@@ -27,6 +27,15 @@ module.exports = function (api) {
         ...options
       };
     }
+
+    if (options.internal.typeName === 'Project') {
+      options.countries = (typeof options.tags === 'string') ? options.tags.split(',').map(string => string.trim()) : options.tags;
+      options.cities = (typeof options.tags === 'string') ? options.tags.split(',').map(string => string.trim()) : options.tags;
+      options.author = (typeof options.author === 'string') ? options.author.split(',').map(string => string.trim()) : options.author;
+      return {
+        ...options
+      };
+    }
   })
 
     api.createPages(async ({
@@ -68,4 +77,45 @@ module.exports = function (api) {
       });
 
     });
+
+    // api.createPages(async ({
+    //   graphql,
+    //   createPage
+    // }) => {
+    //   // Use the Pages API here: https://gridsome.org/docs/pages-api
+    //   const {
+    //     data
+    //   } = await graphql(`{
+    //   allProject {
+    //     edges {
+    //       previous {
+    //         id
+    //       }
+    //       next {
+    //         id
+    //       }
+    //       node {
+    //         id
+    //         path
+    //       }
+    //     }
+    //   }
+    // }
+    // `);
+
+    //   data.allProject.edges.forEach(function (element) {
+    //     console.log(element)
+    //     createPage({
+    //       path: element.node.path,
+    //       component: './src/templates/Project.vue',
+    //       context: {
+    //         previousElement: (element.previous) ? element.previous.id : '##empty##',
+    //         nextElement: (element.next) ? element.next.id : '##empty##',
+    //         id: element.node.id
+    //       }
+    //     });
+
+    //   });
+
+    // });
 }
\ No newline at end of file
diff --git a/src/components/ProjectListItem.vue b/src/components/ProjectListItem.vue
new file mode 100644
index 000000000..6249bdd96
--- /dev/null
+++ b/src/components/ProjectListItem.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="flex flex-post px-0 sm:px-4 pb-8 mb-8" v-bind:class="{'no-border': !border}">
+    <g-link :to="record.path" class="post-card-image-link">
+      <g-image :src="record.image" :alt="record.title" class="post-card-image"></g-image>
+    </g-link>
+    <div class="post-card-content">
+      <g-link :to="record.path">
+        <h2 class="post-card-title mt-3">{{ record.title }}</h2>
+        <p class="post-card-excerpt">{{ record.excerpt }}</p>
+      </g-link>
+      <div class="w-full post-card-meta pt-4">
+        <div class="avatars">
+          <div class="flex items-center">
+            <div class="flex justify-between items-center">
+              <ul class="list-none flex author-list">
+                <li v-for="author in record.author" :key="author.id" class="author-list-item">
+                  <g-link :to="author.path" v-tooltip="author.name">
+                    <g-image
+                      :src="author.image"
+                      :alt="author.name"
+                      class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"
+                    />
+                  </g-link>
+                </li>
+              </ul>
+            </div>
+            <div class="ml-3 pl-3 border-l flex flex-col text-xs leading-none uppercase">
+              <p>
+                <g-link :to="record.path">
+                  <time :datetime="record.datetime">{{ record.humanTime }}</time>
+                </g-link>
+              </p>
+              <p>
+                <g-link :to="record.path">
+                  <time :datetime="record.datetime">{{ record.startDate }}</time>
+                </g-link>
+                {{ record.status }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    record: {},
+    border: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+.post-card-excerpt {
+  font-family: "Roboto", sans-serif;
+  line-height: 1.2;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Projects.vue b/src/pages/Projects.vue
new file mode 100644
index 000000000..76704e716
--- /dev/null
+++ b/src/pages/Projects.vue
@@ -0,0 +1,55 @@
+<template>
+  <Layout>
+    <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
+      <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
+        <ProjectListItem v-for="edge in $page.entries.edges" :key="edge.node.id" :record="edge.node" />
+      </div>
+    </div>
+  </Layout>
+</template>
+
+<page-query>
+
+query($page:Int) {
+  entries: allProject(perPage: 9, page: $page) @paginate {
+    totalCount
+    pageInfo {
+      totalPages
+      currentPage
+    }
+    edges {
+      node {
+        title
+        members
+        rank
+        
+        excerpt
+        image(width:800)
+        path
+        timeToRead
+        author {
+          id
+          
+          image(width:64, height:64, fit:inside)
+          path
+        }
+      }
+    }
+  }
+}
+
+</page-query>
+
+<script>
+
+import ProjectListItem from '~/components/ProjectListItem.vue';
+
+export default {
+  metaInfo: {
+    title: "Hello, world!"
+  },
+  components: {
+    ProjectListItem
+  }
+};
+</script>
diff --git a/src/templates/Project.vue b/src/templates/Project.vue
new file mode 100644
index 000000000..b3023e521
--- /dev/null
+++ b/src/templates/Project.vue
@@ -0,0 +1,144 @@
+<template>
+  <Layout :hideHeader="true" :disableScroll="true">
+    <div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-24">
+      <div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0">
+        <div class="w-full md:w-1/6 mx-auto sm:mx-0">
+          <g-image
+            :src="$page.project.image"
+            class="rounded-full bg-gray-200 w-32 h-32 border-4 border-gray-400 mx-auto md:mx-0"
+          ></g-image>
+        </div>
+        <div class="w-full md:w-5/6 text-center md:text-left md:pl-8 lg:pl-0">
+          <h1 class="pb-0 mb-0 mt-0 text-4xl font-medium">{{ $page.project.title }}</h1>
+          <p class="text-gray-700 text-xl" v-if="$page.project.bio">{{ $page.project.bio }}</p>
+          <div class="author-social">
+            {{ $page.project.belongsTo.totalCount }} Projects
+            &nbsp;&middot;&nbsp;
+            <!-- <a
+              :href="$page.project.facebook"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-gray-400 hover:text-black"
+            >
+              <font-awesome :icon="['fab', 'facebook']" />
+            </a>
+            &nbsp;
+            <a
+              :href="$page.project.twitter"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-gray-400 hover:text-black"
+            >
+              <font-awesome :icon="['fab', 'twitter']" />
+            </a>
+            &nbsp; -->
+            <a
+              :href="$page.project.linkedin"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-gray-400 hover:text-black"
+            >
+              <font-awesome :icon="['fab', 'linkedin']" />
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="pt-8 border-b mx-4 sm:-mx-4"></div>
+
+        <section class="post-content container mx-auto relative font-serif text-gray-700">
+          <div class="post-content-text text-xl" v-html="$page.project.content"></div>
+        </section>
+
+
+      <div class="pt-8 border-b mx-4 sm:-mx-4"></div>
+
+      <div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
+        <PostListItem
+          v-for="edge in $page.project.belongsTo.edges"
+          :key="edge.node.id"
+          :record="edge.node"
+        />
+      </div>
+
+      <div class="pagination flex justify-center mb-8">
+        <Pagination
+          :baseUrl="$page.project.path"
+          :currentPage="$page.project.belongsTo.pageInfo.currentPage"
+          :totalPages="$page.project.belongsTo.pageInfo.totalPages"
+          :maxVisibleButtons="5"
+          v-if="$page.project.belongsTo.pageInfo.totalPages > 1"
+        />
+      </div>
+    </div>
+  </Layout>
+</template>
+
+<page-query>
+  query($id: ID!, $page:Int) {
+    project(id: $id) {
+      id
+      title
+      status
+      countries
+      image(width:150, height:150)
+      image_caption
+      logo
+      cities
+      timeToRead
+      path
+      timeToRead
+      tags {
+        id
+        title
+        path
+      }
+     
+    
+      members
+      websites
+      private
+      
+      rank
+      excerpt
+      content
+      belongsTo(perPage: 5, page: $page) @paginate {
+        totalCount
+        pageInfo {
+          totalPages
+          currentPage
+        }
+        edges {
+          node {
+            ... on Person {
+              name
+            }
+          }
+        }
+      }
+    }  
+  }
+</page-query>
+
+<script>
+import ProjectListItem from "~/components/ProjectListItem.vue";
+import Pagination from "~/components/Pagination.vue";
+
+export default {
+  components: {
+    Pagination,
+    ProjectListItem
+  },
+  computed: {
+    postLabel: function() {
+      var pluralize = require("pluralize");
+      return pluralize("post", this.$page.project.belongsTo.totalCount);
+    }
+  },
+  metaInfo() {
+    return {
+      title: this.$page.project.title
+    };
+  }
+};
+</script>