diff --git a/packages/nc-gui/components/templates/categories.vue b/packages/nc-gui/components/templates/categories.vue
new file mode 100644
index 0000000000..953df20e4d
--- /dev/null
+++ b/packages/nc-gui/components/templates/categories.vue
@@ -0,0 +1,47 @@
+<template>
+  <v-list dense height="20px">
+    <v-list-item dense>
+      <v-list-item-subtitle>
+        <span class="caption">Categories</span>
+      </v-list-item-subtitle>
+    </v-list-item>
+    <v-list-item-group v-model="category">
+      <v-list-item v-for="c in categories" :key="c.title" :value="c.title" dense>
+        <v-list-item-title>
+                <span
+                  :class="{'font-weight-black' : category === c.title } "
+                >
+                  {{
+                    c.title
+                  }}<span />
+                </span>
+        </v-list-item-title>
+      </v-list-item>
+    </v-list-item-group>
+  </v-list>
+</template>
+
+<script>
+import categories from './templates.categories'
+export default {
+  name: "categories",
+  props:{value:String},
+  data:()=>({
+    categories
+  }),
+  computed:{
+    category:{
+      get(){
+        return this.value;
+      },
+      set(v){
+        this.$emit('input', v)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/packages/nc-gui/components/templates/detailed.vue b/packages/nc-gui/components/templates/detailed.vue
new file mode 100644
index 0000000000..03e7b3c046
--- /dev/null
+++ b/packages/nc-gui/components/templates/detailed.vue
@@ -0,0 +1,59 @@
+<template>
+  <v-container class="py-0">
+    <div class="d-flex">
+      <v-navigation-drawer height="calc(100vh - 40px)">
+        <categories @input="v => $emit('load-category', v)"/>
+      </v-navigation-drawer>
+      <v-container v-if="templateData" fluid style="height: calc(100vh - 40px ); overflow: auto">
+        <v-img
+          :src="templateData.thumbnail"
+          height="200px"
+        />
+        <div class="d-flex align-center mt-10">
+          <h2 class="display-2 font-weight-bold my-0 flex-grow-1">
+            {{ templateData.title }}
+          </h2>
+          <v-btn class="primary" x-large @click="useTemplate">Use template</v-btn>
+        </div>
+        <p class="caption mt-10">
+          {{ templateData.description }}
+        </p>
+
+
+        <templat-editor view-mode :templateData="templateData"></templat-editor>
+
+      </v-container>
+    </div>
+  </v-container>
+</template>
+
+<script>
+import categories from '~/components/templates/templates.categories'
+import TemplatEditor from "~/components/templates/editor";
+import Categories from "~/components/templates/categories";
+
+export default {
+  name: 'ProjectTemplateDetailed',
+  components: {Categories, TemplatEditor},
+  props: {
+    modal: Boolean, id: [String, Number]
+  },
+  data: () => ({categories, templateData: null}),
+  async mounted() {
+    this.templateData = (await import(`./templates.${this.modal ? this.id : this.$route.params.id}`)).default
+  }, methods: {
+    useTemplate() {
+      if (this.modal) {
+        this.$emit('import', this.templateData)
+      }
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+/deep/ .v-list-item {
+  min-height: 30px;
+}
+</style>
diff --git a/packages/nc-gui/components/templates/editor.vue b/packages/nc-gui/components/templates/editor.vue
new file mode 100644
index 0000000000..cfb27a8671
--- /dev/null
+++ b/packages/nc-gui/components/templates/editor.vue
@@ -0,0 +1,1036 @@
+<template>
+  <div>
+    <v-toolbar v-if="!viewMode">
+      <v-text-field
+        v-model="url"
+        clearable
+        placeholder="Enter template url"
+        outlined
+        hide-details
+        dense
+        @keydown.enter="loadUrl"
+      />
+      <!--      <v-btn outlined class='ml-1' @click='loadUrl'> Load URL</v-btn>-->
+      <v-spacer />
+
+      <v-icon class="mr-3" @click="helpModal=true">
+        mdi-information-outline
+      </v-icon>
+
+      <v-icon class="mr-3" @click="openUrl">
+        mdi-web
+      </v-icon>
+      <v-tooltip bottom>
+        <template #activator="{on}">
+          <v-icon
+            class="mr-3"
+            v-on="on"
+            @click="url = '',project.tables= []"
+          >
+            mdi-close-circle-outline
+          </v-icon>
+        </template>
+        <span class="caption">Reset template</span>
+      </v-tooltip>
+
+      <v-icon
+        :color="$store.getters['github/isAuthorized'] ? '' : 'error'"
+        class="mr-3"
+        @click="githubConfigForm = !githubConfigForm"
+      >
+        mdi-github
+      </v-icon>
+
+      <v-icon class="mr-3" @click="createTablesDialog = true">
+        mdi-plus
+      </v-icon>
+      <!--      <v-btn outlined small class='mr-1' @click='submitTemplate'> Submit Template</v-btn>-->
+      <v-btn color="primary" outlined small class="mr-1" @click="projectTemplateCreate">
+        {{ updateFilename ? 'Update' : 'Create' }}
+        Template
+      </v-btn>
+    </v-toolbar>
+    <v-container class="text-center">
+      <v-form ref="form">
+        <v-row fluid class="justify-center">
+          <v-col cols="12">
+            <v-card>
+              <v-card-text>
+                <v-expansion-panels
+                  v-if="project.tables && project.tables.length"
+                  v-model="expansionPanel"
+                  :multiple="viewMode"
+                  accordion
+                >
+                  <v-expansion-panel
+                    v-for="(table, i) in project.tables"
+                    :key="i"
+                  >
+                    <v-expansion-panel-header
+                      :id="`tn_${table.tn}`"
+                    >
+                      <v-text-field
+                        v-if="editableTn[i]"
+                        v-model="table.tn"
+                        class="title"
+                        style="max-width: 300px"
+                        outlinedk
+                        autofocus
+                        dense
+                        hide-details
+                        @click="e => viewMode || e.stopPropagation()"
+                        @blur="$set(editableTn,i, false)"
+                        @keydown.enter=" $set(editableTn,i, false)"
+                      />
+                      <span
+                        v-else
+                        class="title"
+                        @click="e => viewMode || (e.stopPropagation() , $set(editableTn,i, true))"
+                      >
+                        <v-icon color="primary lighten-1">mdi-table</v-icon>
+                        {{ table.tn }}
+                      </span>
+
+                      <v-spacer />
+                      <v-icon v-if="!viewMode" class="flex-grow-0 mr-2" small color="grey" @click.stop="deleteTable(i)">
+                        mdi-delete
+                      </v-icon>
+                    </v-expansion-panel-header>
+                    <v-expansion-panel-content>
+                      <!--                <v-toolbar>
+                                        <v-spacer></v-spacer>
+                                        <v-btn outlined small @click='showColCreateDialog(table,i)'>New Column
+                                        </v-btn>
+                                      </v-toolbar>-->
+
+                      <template>
+                        <v-simple-table v-if="table.columns.length" dense class="my-4">
+                          <thead>
+                            <tr>
+                              <th class="caption text-left pa-3">
+                                Column Name
+                              </th>
+                              <th class="caption text-left pa-3" colspan="4">
+                                Column Type
+                              </th>
+                              <th />
+                            <!--                    <th class='text-center'>Related Table</th>-->
+                            <!--                    <th class='text-center'>Related Column</th>-->
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr v-for="(col,j) in table.columns" :key="j" :data-exp="i">
+                              <td class="pa-3 text-left" :style="{width:viewMode ? '33%' : ''}">
+                                <span v-if="viewMode" class="body-1 ">
+                                  {{ col.cn }}
+                                </span>
+
+                                <v-text-field
+                                  v-else
+                                  :ref="`cn_${table.tn}_${j}`"
+                                  v-model="col.cn"
+                                  outlined
+                                  dense
+                                  class="caption"
+                                  placeholder="Column name"
+                                  hide-details="auto"
+                                  :rules="[v => !!v || 'Column name required']"
+                                />
+                              </td>
+
+                              <template v-if="viewMode">
+                                <td
+                                  :style="{width:viewMode && isRelation(col) || isLookupOrRollup(col) ? '33%' : ''}"
+                                  :colspan="isRelation(col) || isLookupOrRollup(col) ? 3 : 5"
+                                  class="text-left"
+                                >
+                                  <v-icon small>
+                                    {{ getIcon(col.uidt) }}
+                                  </v-icon>
+                                  <span class="caption">{{ col.uidt }}</span>
+                                </td>
+                                <td v-if="isRelation(col) || isLookupOrRollup(col)" class="text-left">
+                                  <span
+                                    v-if="isRelation(col)"
+                                    class="caption pointer primary--text"
+                                    @click="navigateToTable(col.rtn)"
+                                  >
+                                    {{ col.rtn }}
+                                  </span>
+                                  <template
+                                    v-else-if="isLookup(col)"
+                                  >
+                                    <span
+                                      class="caption pointer primary--text"
+                                      @click="navigateToTable(col.rtn && col.rtn.tn)"
+                                    >
+                                      {{ col.rtn && col.rtn.tn }}
+                                    </span> <span class="caption">({{ col.rcn }})</span>
+                                  </template>
+
+                                  <template
+                                    v-else-if="isRollup(col)"
+                                  >
+                                    <span
+                                      class="caption pointer primary--text"
+                                      @click="navigateToTable(col.rtn && col.rtn.tn)"
+                                    >
+                                      {{ col.rtn && col.rtn.tn }}
+                                    </span> <span class="caption">({{ col.fn }})</span>
+                                  </template>
+                                </td>
+                              </template>
+
+                              <template v-else>
+                                <td
+                                  class="pa-3  text-left"
+                                  :colspan="isLookupOrRollup(col) || isRelation(col) || isSelect(col) ? (isRollup(col)?
+                                    1 :2) : 4"
+                                >
+                                  <v-autocomplete
+                                    :ref="`uidt_${table.tn}_${j}`"
+                                    v-model="col.uidt"
+                                    placeholder="Column Datatype"
+                                    outlined
+                                    dense
+                                    class="caption"
+                                    hide-details="auto"
+                                    :rules="[v => !!v || 'Column data type required']"
+                                    :items="uiTypes"
+                                    item-text="name"
+                                    item-value="name"
+                                    @change="onUidtChange(col)"
+                                  >
+                                    <template #item="{item:{name}}">
+                                      <v-chip v-if="colors[name]" :color="colors[name]" small>
+                                        {{ name }}
+                                      </v-chip>
+                                      <span v-else class="caption">{{ name }}</span>
+                                    </template>
+                                    <template #selection="{item:{name}}">
+                                      <v-chip v-if="colors[name]" :color="colors[name]" small>
+                                        {{ name }}
+                                      </v-chip>
+                                      <span v-else class="caption">{{ name }}</span>
+                                    </template>
+                                  </v-autocomplete>
+                                </td>
+
+                                <template
+                                  v-if="isRelation(col) || isLookupOrRollup(col)"
+                                >
+                                  <td class="pa-3 text-left">
+                                    <v-autocomplete
+                                      v-model="col.rtn"
+                                      placeholder="Related table"
+                                      outlined
+                                      class="caption"
+                                      dense
+                                      hide-details="auto"
+                                      :rules="[v => !!v || 'Related table name required']"
+                                      :items="isLookupOrRollup(col) ? getRelatedTables(table.tn, isRollup(col)) : project.tables"
+                                      :item-text="t => isLookupOrRollup(col) ? `${t.tn} (${t.type})` : t.tn"
+                                      :item-value="t => isLookupOrRollup(col) ? t : t.tn"
+                                      :value-comparator="compareRel"
+                                    />
+                                  </td>
+
+                                  <td v-if="isRelation(col)" class="pa-3">
+                                    <span
+                                      v-if="viewMode"
+                                      class="caption"
+                                    >
+                                    <!--                                    {{ col.type }}-->
+                                    </span>
+                                    <v-autocomplete
+                                      v-else
+                                      v-model="col.type"
+                                      placeholder="Relation Type"
+                                      outlined
+                                      class="caption"
+                                      dense
+                                      hide-details="auto"
+                                      :rules="[v => !!v || 'Relation type required']"
+                                      :items="[{text:'Many To Many', value:'mm'},{text:'Has Many', value:'hm'}]"
+                                    />
+                                  </td>
+                                  <td v-if="isLookupOrRollup(col)" class="pa-3">
+                                    <span
+                                      v-if="viewMode"
+                                      class="caption"
+                                    >
+                                      {{ col.rcn }}
+                                    </span>
+
+                                    <v-autocomplete
+                                      v-else
+                                      v-model="col.rcn"
+                                      placeholder="Related table column"
+                                      outlined
+                                      dense
+                                      class="caption"
+                                      hide-details="auto"
+                                      :rules="[v => !!v || 'Related column name required']"
+                                      :items="(project.tables.find(t => t.tn === (col.rtn && col.rtn.tn || col.rtn)) || {columns:[]}).columns.filter(v=> !isVirtual(v))"
+                                      item-text="cn"
+                                      item-value="cn"
+                                    />
+                                  </td>
+                                  <td v-if="isRollup(col)" class="pa-3">
+                                    <span
+                                      v-if="viewMode"
+                                      class="caption"
+                                    >
+                                      {{ col.fn }}
+                                    </span>
+
+                                    <v-autocomplete
+                                      v-else
+                                      v-model="col.fn"
+                                      placeholder="Rollup function"
+                                      outlined
+                                      dense
+                                      class="caption"
+                                      hide-details="auto"
+                                      :rules="[v => !!v || 'Rollup aggregate function name required']"
+                                      :items="rollupFnList"
+                                    />
+                                  </td>
+                                </template>
+                                <template
+                                  v-if="isSelect(col)"
+                                >
+                                  <td class="pa-3 text-left" colspan="2">
+                                    <span
+                                      v-if="viewMode"
+                                      class="caption"
+                                    >
+                                      {{ col.dtxp }}
+                                    </span>
+                                    <v-text-field
+                                      v-model="col.dtxp"
+                                      placeholder="Select options"
+                                      outlined
+                                      class="caption"
+                                      dense
+                                      hide-details
+                                    />
+                                  </td>
+                                </template>
+                                <td>
+                                  <v-icon
+                                    v-if="!viewMode"
+                                    class="flex-grow-0"
+                                    small
+                                    color="grey"
+                                    @click.stop="deleteTableColumn(i,j)"
+                                  >
+                                    mdi-delete
+                                  </v-icon>
+                                </td>
+                              </template>
+                            </tr>
+
+                          <!--                  <tr>-->
+                          <!--                    <td colspan='4' class='text-center pa-2'>-->
+                          <!--                    </td>-->
+                          <!--                  </tr>-->
+                          </tbody>
+                        </v-simple-table>
+
+                        <div v-if="!viewMode" class="text-center">
+                          <v-icon class="mx-2" small @click="addNewColumnRow(table, 'Number')">
+                            {{ getIcon('Number') }}
+                          </v-icon>
+                          <v-icon class="mx-2" small @click="addNewColumnRow(table, 'SingleLineText')">
+                            {{ getIcon('SingleLineText') }}
+                          </v-icon>
+                          <v-icon class="mx-2" small @click="addNewColumnRow(table, 'LongText')">
+                            {{
+                              getIcon('LongText')
+                            }}
+                          </v-icon>
+                          <v-icon class="mx-2" small @click="addNewColumnRow(table, 'LinkToAnotherRecord')">
+                            {{ getIcon('LinkToAnotherRecord') }}
+                          </v-icon>
+                          <v-icon class="mx-2" small @click="addNewColumnRow(table, 'Lookup')">
+                            {{ getIcon('Lookup') }}
+                          </v-icon>
+                          <v-icon class="mx-2" small @click="addNewColumnRow(table, 'Rollup')">
+                            {{ getIcon('Rollup') }}
+                          </v-icon>
+                          <v-btn class="mx-2" small @click="addNewColumnRow(table)">
+                            + column
+                          </v-btn>
+                        </div>
+                      </template>
+                    </v-expansion-panel-content>
+                  </v-expansion-panel>
+                </v-expansion-panels>
+
+                <!--            <v-btn small color='primary' class='mt-10' @click='createTablesDialog = true'>New Table</v-btn>-->
+                <div v-if="!viewMode" class="mx-auto" style="max-width:600px">
+                  <div class="mt-10">
+                    <v-text-field
+                      ref="project"
+                      v-model="project.name"
+                      class="caption"
+                      outlined
+                      dense
+                      label="Project Name"
+                      :rules="[v => !!v || 'Required'] "
+                    />
+                  </div>
+                  <v-row>
+                    <v-col>
+                      <v-text-field
+                        v-model="project.category"
+                        class="caption"
+                        outlined
+                        dense
+                        label="Project Category"
+                      />
+                    </v-col>
+                    <v-col>
+                      <v-text-field
+                        v-model="project.tags"
+                        class="caption"
+                        outlined
+                        dense
+                        label="Project Tags"
+                      />
+                    </v-col>
+                  </v-row>
+                  <div>
+                    <v-textarea
+                      v-model="project.description"
+                      class="caption"
+                      outlined
+                      dense
+                      label="Project Tags"
+                    />
+                  </div>
+                </div>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-form>
+
+      <github-config v-if="githubConfigForm" class="mx-auto mt-10 mb-4" />
+    </v-container>
+
+    <v-dialog v-model="createTablesDialog" max-width="500">
+      <v-card>
+        <v-card-title>Enter table name</v-card-title>
+        <v-card-text>
+          <v-text-field
+            v-model="tableNamesInput"
+            autofocus
+            hide-details
+            dense
+            outlined
+            label="Enter comma separated table names"
+            @keydown.enter="addTables"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn outlined small @click="createTablesDialog=false">
+            Cancel
+          </v-btn>
+          <v-btn outlined color="primary" small @click="addTables">
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-dialog v-model="createTableColumnsDialog" max-width="500">
+      <v-card>
+        <v-card-title>Enter column name</v-card-title>
+        <v-card-text>
+          <v-text-field
+            v-model="columnNamesInput"
+            autofocus
+            dense
+            outlined
+            hide-details
+            label="Enter comma separated column names"
+            @keydown.enter="addColumns"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn outlined small @click="createTableColumnsDialog=false">
+            Cancel
+          </v-btn>
+          <v-btn outlined color="primary" small @click="addColumns">
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <help v-model="helpModal" />
+
+    <v-tooltip v-if="!viewMode" left>
+      <template #activator="{on}">
+        <v-btn
+          fixed
+          fab
+          large
+          color="primary"
+          right="100"
+          style="top:45%"
+          @click="createTablesDialog = true"
+          v-on="on"
+        >
+          <v-icon>mdi-plus</v-icon>
+        </v-btn>
+      </template>
+      <span class="caption">Add new table</span>
+    </v-tooltip>
+  </div>
+</template>
+
+<script>
+
+import { uiTypes, getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes'
+
+const LinkToAnotherRecord = 'LinkToAnotherRecord'
+const Lookup = 'Lookup'
+const Rollup = 'Rollup'
+const defaultColProp = {}
+
+export default {
+  name: 'TemplateEditor',
+  components: {},
+  props: {
+    viewMode: Boolean,
+    templateData: Object
+  },
+  data: () => ({
+    valid: false,
+    url: '',
+    githubConfigForm: false,
+    helpModal: false,
+    editableTn: {},
+    expansionPanel: 0,
+    project: {
+      name: 'Project name',
+      tables: []
+    },
+    tableNamesInput: '',
+    columnNamesInput: '',
+    createTablesDialog: false,
+    createTableColumnsDialog: false,
+    selectedTable: null,
+    uiTypes,
+    rollupFnList: [
+      { text: 'count', value: 'count' },
+      { text: 'min', value: 'min' },
+      { text: 'max', value: 'max' },
+      { text: 'avg', value: 'avg' },
+      { text: 'min', value: 'min' },
+      { text: 'sum', value: 'sum' },
+      { text: 'countDistinct', value: 'countDistinct' },
+      { text: 'sumDistinct', value: 'sumDistinct' },
+      { text: 'avgDistinct', value: 'avgDistinct' }
+    ],
+    colors: {
+      LinkToAnotherRecord: 'blue lighten-5',
+      Rollup: 'pink lighten-5',
+      Lookup: 'green lighten-5'
+    }
+  }),
+  computed: {
+
+    updateFilename() {
+      return this.url && this.url.split('/').pop()
+    },
+    projectTemplate() {
+      return {
+        ...this.project,
+        tables: (this.project.tables || []).map((t) => {
+          const table = { tn: t.tn, columns: [], hasMany: [], manyToMany: [], v: [] }
+
+          for (const column of (t.columns || [])) {
+            if (this.isRelation(column)) {
+              if (column.type === 'hm') {
+                table.hasMany.push({
+                  tn: column.rtn,
+                  _cn: column.cn
+                })
+              } else if (column.type === 'mm') {
+                table.manyToMany.push({
+                  rtn: column.rtn,
+                  _cn: column.cn
+                })
+              }
+            } else if (this.isLookup(column)) {
+              if (column.rtn) {
+                table.v.push({
+                  _cn: column.cn,
+                  lk: {
+                    ltn: column.rtn.tn,
+                    type: column.rtn.type,
+                    lcn: column.rcn
+                  }
+                })
+              }
+            } else if (this.isRollup(column)) {
+              if (column.rtn) {
+                table.v.push({
+                  _cn: column.cn,
+                  rl: {
+                    rltn: column.rtn.tn,
+                    rlcn: column.rcn,
+                    type: column.rtn.type,
+                    fn: column.fn
+                  }
+                })
+              }
+            } else {
+              table.columns.push(column)
+            }
+          }
+          return table
+        })
+      }
+    }
+  },
+
+  created() {
+    document.addEventListener('keydown', this.handleKeyDown)
+  },
+  destroyed() {
+    document.removeEventListener('keydown', this.handleKeyDown)
+  },
+  mounted() {
+    if (this.templateData) {
+      this.parseTemplate(this.templateData)
+      this.expansionPanel = Array.from({ length: this.project.tables.length }, (_, i) => i)
+    }
+    const input = this.$refs.projec && this.$refs.project.$el.querySelector('input')
+    if (input) {
+      input.focus()
+      input.select()
+    }
+  },
+  methods: {
+    getIcon(type) {
+      return getUIDTIcon(type)
+    },
+    getRelatedTables(tableName, rollup = false) {
+      const tables = []
+      for (const t of this.projectTemplate.tables) {
+        if (tableName === t.tn) {
+          for (const hm of t.hasMany) {
+            const rTable = this.project.tables.find(t1 => t1.tn === hm.tn)
+            tables.push({
+              ...rTable,
+              type: 'hm'
+            })
+          }
+          for (const mm of t.manyToMany) {
+            const rTable = this.project.tables.find(t1 => t1.tn === mm.rtn)
+            tables.push({
+              ...rTable,
+              type: 'mm'
+            })
+          }
+        } else {
+          for (const hm of t.hasMany) {
+            if (hm.tn === tableName && !rollup) {
+              tables.push({
+                ...t,
+                type: 'bt'
+              })
+            }
+          }
+          for (const mm of t.manyToMany) {
+            if (mm.rtn === tableName) {
+              tables.push({
+                ...t,
+                type: 'mm'
+              })
+            }
+          }
+        }
+      }
+
+      return tables
+    },
+    validateAndFocus() {
+      if (!this.$refs.form.validate()) {
+        const input = this.$el.querySelector('.v-input.error--text')
+        this.expansionPanel = +input.parentElement.parentElement.dataset.exp
+        setTimeout(() => {
+          input.querySelector('input,select').focus()
+        }, 500)
+        return false
+      }
+      return true
+    },
+    deleteTable(i) {
+      const deleteTable = this.project.tables[i]
+      for (const table of this.project.tables) {
+        if (table === deleteTable) {
+          continue
+        }
+        table.columns = table.columns.filter(c => c.rtn !== deleteTable.tn)
+      }
+      this.project.tables.splice(i, 1)
+    },
+    deleteTableColumn(i, j) {
+      const deleteTable = this.project.tables[i]
+      const deleteColumn = deleteTable.columns[j]
+      for (const table of this.project.tables) {
+        if (table === deleteTable) {
+          continue
+        }
+        table.columns = table.columns.filter(c => c.rtn !== deleteTable.tn || c.rcn !== deleteColumn.cn)
+      }
+      deleteTable.columns.splice(j, 1)
+    },
+    addTables() {
+      if (!this.tableNamesInput) {
+        return
+      }
+      // todo: fix
+      const re = /(?<=^|,\s*)(\w+)(?:\(((\w+)(?:\s*,\s*\w+)?)?\)){0,1}(?=\s*,|\s*$)/g
+      let m
+      // eslint-disable-next-line no-cond-assign
+      while (m = re.exec(this.tableNamesInput)) {
+        if (this.project.tables.some(t => t.tn === m[1])) {
+          this.$toast.info(`Table '${m[1]}' is already exist`).goAway(1000)
+          continue
+        }
+
+        this.project.tables.push({
+          tn: m[1],
+          columns: (m[2] ? m[2].split(/\s*,\s*/) : []).map(col => ({
+            cn: col,
+            ...defaultColProp
+          })).filter((v, i, arr) => i === arr.findIndex(c => c.cn === v.cn))
+        })
+      }
+      this.tableNamesInput = ''
+      this.createTablesDialog = false
+    },
+    compareRel(a, b) {
+      return ((a && a.tn) || a) === ((b && b.tn) || b) && (a && a.type) === (b && b.type)
+    },
+    addColumns() {
+      if (!this.columnNamesInput) {
+        return
+      }
+      const table = this.project.tables[this.expansionPanel]
+      for (const col of this.columnNamesInput.split(/\s*,\s*/)) {
+        if (table.columns.some(c => c.cn === col)) {
+          this.$toast.info(`Column '${col}' is already exist`).goAway(1000)
+          continue
+        }
+
+        table.columns.push({
+          cn: col,
+          ...defaultColProp
+        })
+      }
+      this.columnNamesInput = ''
+      this.createTableColumnsDialog = false
+
+      this.$nextTick(() => {
+        const input = this.$refs[`uidt_${table.tn}_${table.columns.length - 1}`][0].$el.querySelector('input')
+        input.focus()
+        this.$nextTick(() => {
+          input.select()
+        })
+      })
+    },
+    showColCreateDialog(table) {
+      this.createTableColumnsDialog = true
+      this.selectedTable = table
+    },
+
+    isRelation(col) {
+      return col.uidt === 'LinkToAnotherRecord' ||
+        col.uidt === 'ForeignKey'
+    },
+    isLookup(col) {
+      return col.uidt === 'Lookup'
+    },
+    isRollup(col) {
+      return col.uidt === 'Rollup'
+    },
+    isVirtual(col) {
+      return col && uiTypes.some(ut => ut.name === col.uidt && ut.virtual)
+    },
+    isLookupOrRollup(col) {
+      return this.isLookup(col) ||
+        this.isRollup(col)
+    },
+    isSelect(col) {
+      return col.uidt === 'MultiSelect' ||
+        col.uidt === 'SingleSelect'
+    },
+    addNewColumnRow(table, uidt) {
+      table.columns.push({
+        cn: `title${table.columns.length + 1}`,
+        ...defaultColProp,
+        uidt,
+        ...(uidt === LinkToAnotherRecord
+          ? {
+              type: 'mm'
+            }
+          : {})
+      })
+      this.$nextTick(() => {
+        const input = this.$refs[`cn_${table.tn}_${table.columns.length - 1}`][0].$el.querySelector('input')
+        input.focus()
+        input.select()
+      })
+    },
+
+    async handleKeyDown({ metaKey, key, altKey, shiftKey, ctrlKey }) {
+      // eslint-disable-next-line no-console
+      console.log({ metaKey, key, altKey, shiftKey, ctrlKey })
+      if (!(metaKey && ctrlKey) && !(altKey && shiftKey)) {
+        return
+      }
+      switch (key && key.toLowerCase()) {
+        case 't':
+          this.createTablesDialog = true
+          break
+        case 'c':
+          this.createTableColumnsDialog = true
+          break
+        case 'a':
+          this.addNewColumnRow(this.project.tables[this.expansionPanel])
+          break
+        case 'j':
+          this.copyJSON()
+          break
+        case 's':
+          await this.submitTemplate()
+          break
+        case 'arrowup':
+          this.expansionPanel = this.expansionPanel ? --this.expansionPanel : this.project.tables.length - 1
+          break
+        case 'arrowdown':
+          this.expansionPanel = ++this.expansionPanel % this.project.tables.length
+          break
+
+        case '1':
+          this.addNewColumnRow(this.project.tables[this.expansionPanel], 'Number')
+          break
+        case '2':
+          this.addNewColumnRow(this.project.tables[this.expansionPanel], 'SingleLineText')
+          break
+        case '3':
+          this.addNewColumnRow(this.project.tables[this.expansionPanel], 'LongText')
+          break
+        case '4':
+          this.addNewColumnRow(this.project.tables[this.expansionPanel], 'LinkToAnotherRecord')
+          break
+        case '5':
+          this.addNewColumnRow(this.project.tables[this.expansionPanel], 'Lookup')
+          break
+        case '6':
+          this.addNewColumnRow(this.project.tables[this.expansionPanel], 'Rollup')
+          break
+      }
+    },
+    copyJSON() {
+      if (!this.validateAndFocus()) {
+        this.$toast.info('Please fill all the required column!').goAway(5000)
+        return
+      }
+
+      const el = document.createElement('textarea')
+      el.value = JSON.stringify(this.projectTemplate, null, 2)
+      el.setAttribute('readonly', '')
+      el.style = { position: 'absolute', left: '-9999px' }
+      document.body.appendChild(el)
+      el.select()
+      document.execCommand('copy')
+      document.body.removeChild(el)
+      this.$toast.success('Successfully copied JSON data to clipboard!').goAway(3000)
+    },
+    async submitTemplate() {
+      try {
+        this.copyJSON()
+
+        this.$toast.info('Initing Github for template').goAway(3000)
+        // const res = await axios.get('https://hookb.in/K3k2OOeN01fPMK88MMwb', el.value);
+        const res = await this.$axios.post('https://nocodb.com/api/v1/projectTemplateCreate', this.projectTemplate)
+        console.log(res)
+        this.$toast.success('Inited Github successfully').goAway(3000)
+        window.open(res.data.path, '_blank')
+      } catch (e) {
+        console.log(e)
+        this.$toast.error('Some error occurred').goAway(3000)
+      }
+    },
+    async template() {
+      //
+      // this.$axios({
+      //   method:'post',
+      //   url:'https://nocodb.com/api/api/v1/projectTemplateCreate',
+      //   data:{
+      //     name:'test_name'
+      //   }
+      // }).then(res => {
+      //   console.log(res.data)
+      // }).catch(e => console.log(e.message))
+
+    },
+    openUrl() {
+      window.open(this.url, '_blank')
+    },
+    async loadUrl() {
+      try {
+        let template = (await this.$axios.get(this.url)).data
+
+        if (typeof template === 'string') {
+          template = JSON.parse(template)
+        }
+
+        console.log(template)
+        this.parseTemplate(template)
+      } catch (e) {
+        this.$toast.error(e.message).goAway(5000)
+      }
+    },
+
+    parseTemplate({ tables = [], ...rest }) {
+      const parsedTemplate = {
+        ...rest,
+        tables: tables.map(({ manyToMany, hasMany, v, columns, ...rest }) => ({
+          ...rest,
+          columns: [
+            ...columns,
+            ...manyToMany.map(mm => ({
+              cn: mm._cn || `${rest.tn} <=> ${mm.rtn}`,
+              uidt: LinkToAnotherRecord,
+              type: 'mm',
+              ...mm
+            })),
+            ...hasMany.map(hm => ({
+              cn: hm._cn || `${rest.tn} => ${hm.tn}`,
+              uidt: LinkToAnotherRecord,
+              type: 'hm',
+              rtn: hm.tn,
+              ...hm
+            })),
+            ...v.map((v) => {
+              const res = {
+                cn: v._cn,
+                rtn: {
+                  ...v
+                }
+              }
+              if (v.lk) {
+                res.uidt = Lookup
+                res.rtn.tn = v.lk.ltn
+                res.rcn = v.lk.lcn
+                res.rtn.type = v.lk.type
+              } else if (v.rl) {
+                res.uidt = Rollup
+                res.rtn.tn = v.rl.rltn
+                res.rcn = v.rl.rlcn
+                res.rtn.type = v.rl.type
+                res.fn = v.rl.fn
+              }
+              return res
+            })
+          ]
+        }))
+      }
+
+      this.project = parsedTemplate
+    },
+
+    async projectTemplateCreate() {
+      if (!this.validateAndFocus()) {
+        this.$toast.info('Please fill all the required column!').goAway(5000)
+        return
+      }
+
+      try {
+        const githubConfig = this.$store.state.github
+
+        // const token = await models.store.where({ key: 'GITHUB_TOKEN' }).first()
+        // const branch = await models.store.where({ key: 'GITHUB_BRANCH' }).first()
+        // const filePath = await models.store.where({ key: 'GITHUB_FILE_PATH' }).first()
+        // const templateRepo = await models.store.where({ key: 'PROJECT_TEMPLATES_REPO' }).first()
+
+        if (!githubConfig.token || !githubConfig.repo) {
+          throw new Error('Missing token or template path')
+        }
+
+        const data = JSON.stringify(this.projectTemplate, 0, 2)
+        const filename = this.updateFilename || `${this.projectTemplate.name}_${Date.now()}.json`
+        const filePath = `${githubConfig.filePath ? githubConfig.filePath + '/' : ''}${filename}`
+        const apiPath = `https://api.github.com/repos/${githubConfig.repo}/contents/${filePath}`
+
+        let sha
+        if (this.updateFilename) {
+          const { data: { sha: _sha } } = await this.$axios({
+            url: `https://api.github.com/repos/${githubConfig.repo}/contents/${filePath}`,
+            method: 'get',
+            headers: {
+              Authorization: 'token ' + githubConfig.token
+            }
+          })
+          sha = _sha
+        }
+
+        await this.$axios({
+          url: apiPath,
+          method: 'put',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: 'token ' + githubConfig.token
+          },
+          data: {
+            message: `templates : init template ${filename}`,
+            content: Base64.encode(data),
+            sha,
+            branch: githubConfig.branch
+          }
+        })
+
+        this.url = `https://raw.githubusercontent.com/${githubConfig.repo}/${githubConfig.branch}/${filePath}`
+
+        this.$toast.success('Template generated and saved successfully!').goAway(4000)
+      } catch (e) {
+        this.$toast.error(e.message).goAway(5000)
+      }
+    },
+    onUidtChange(col) {
+      if (col.uidt === LinkToAnotherRecord) {
+        col.type = 'mm'
+      }
+    },
+    navigateToTable(tn) {
+      const index = this.projectTemplate.tables.findIndex(t => t.tn === tn)
+      if (Array.isArray(this.expansionPanel)) {
+        this.expansionPanel.push(index)
+      } else {
+        this.expansionPanel = index
+      }
+
+      this.$nextTick(() => {
+        const accord = this.$el.querySelector(`#tn_${tn}`)
+        accord.focus()
+        accord.scrollIntoView()
+      })
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/packages/nc-gui/components/templates/list.vue b/packages/nc-gui/components/templates/list.vue
new file mode 100644
index 0000000000..ce01c81867
--- /dev/null
+++ b/packages/nc-gui/components/templates/list.vue
@@ -0,0 +1,93 @@
+<template>
+  <v-container v-if="!modal || selectedId === null " class="py-0">
+    <div class="d-flex">
+      <v-navigation-drawer height="calc(100vh - 40px)">
+       <categories v-model="category"></categories>
+      </v-navigation-drawer>
+      <v-container fluid style="height: calc(100vh - 40px ); overflow: auto">
+        <v-row
+          v-if="templateList && templateList.length">
+          <v-col
+            v-for="(template,i) in templateList"
+            :key="i"
+            sm="8"
+            offset-sm="2"
+            offset-md="0"
+            md="6"
+            lg="4"
+            xl="3"
+            @click="openTemplate(template.id)"
+          >
+            <v-card
+              class="mx-auto"
+            >
+              <v-img
+                :src="template.thumbnail"
+                height="200px"
+              />
+
+              <v-card-title>
+                {{ template.title }}
+              </v-card-title>
+
+              <v-card-subtitle>
+                <span class="caption">
+                  {{ getShortDescription(template.description) }}
+                </span>
+              </v-card-subtitle>
+            </v-card>
+          </v-col>
+        </v-row>
+        <div v-else class="d-flex justify-center mt-10 ">
+        <v-alert  class="flex-shrink-1" type="info" outlined dense >
+          No templates found
+        </v-alert>
+        </div>
+      </v-container>
+    </div>
+  </v-container>
+  <project-template-detailed v-else @load-category="v =>{ category = v; selectedId = null }" :id="selectedId" :modal="modal" v-on="$listeners" />
+</template>
+
+<script>
+
+import templateList from './templates.list'
+import ProjectTemplateDetailed from '~/components/templates/detailed'
+import Categories from "~/components/templates/categories";
+
+export default {
+  name: 'ProjectTemplates',
+  components: {Categories, ProjectTemplateDetailed },
+  props: {
+    modal: Boolean
+  },
+  data: () => ({
+    category: null,
+    selectedId: null
+  }),
+  computed: {
+    templateList() {
+      return templateList.filter(t => !this.category || t.category === this.category)
+    }
+  },
+  methods: {
+    getShortDescription(str) {
+      if (str.length < 200) { return str }
+      return `${str.slice(0, 200)}...`
+    },
+    openTemplate(id) {
+      if (this.modal) {
+        this.selectedId = id
+      } else {
+        this.$router.push(`/project/templates/${id}`)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .v-list-item{
+  min-height: 30px;
+}
+</style>
diff --git a/packages/nc-gui/components/templates/templates.1.js b/packages/nc-gui/components/templates/templates.1.js
new file mode 100644
index 0000000000..6d3965bde8
--- /dev/null
+++ b/packages/nc-gui/components/templates/templates.1.js
@@ -0,0 +1,81 @@
+const templates = {
+  title: 'Art Gallery Management',
+  thumbnail: 'https://picsum.photos/200/300?1',
+  tables: [
+    {
+      tn: 'blog',
+      columns: [
+        {
+          cn: 'title',
+          uidt: 'SingleLineText'
+        },
+        {
+          cn: 'body',
+          uidt: 'LongText'
+        }
+      ],
+      hasMany: [
+        {
+          tn: 'comment',
+          _cn: 'title3'
+        }
+      ],
+      manyToMany: [
+        {
+          rtn: 'tag',
+          _cn: 'title4'
+        }
+      ],
+      v: [
+        {
+          _cn: 'comments_count',
+          rl: {
+            rltn: 'comment',
+            rlcn: 'body',
+            type: 'hm',
+            fn: 'count'
+          }
+        }
+      ]
+    },
+    {
+      tn: 'comment',
+      columns: [
+        {
+          cn: 'body',
+          uidt: 'LongText'
+        }
+      ],
+      hasMany: [],
+      manyToMany: [],
+      v: [
+        {
+          _cn: 'blog_title',
+          lk: {
+            ltn: 'blog',
+            type: 'bt',
+            lcn: 'title'
+          }
+        }
+      ]
+    },
+    {
+      tn: 'tag',
+      columns: [
+        {
+          cn: 'title',
+          uidt: 'SingleLineText'
+        }
+      ],
+      hasMany: [],
+      manyToMany: [],
+      v: []
+    }
+  ],
+  category: 'test',
+  tags: 'a,b,c',
+  description: 'I\'m a thing. But, like most politicians, he promised more than he could deliver. You won\'t have time for sleeping, soldier, not with all the bed making you\'ll be doing. Then we\'ll go with that data file! Hey, you add a one and two zeros to that or we walk!'
+
+}
+
+export default templates
diff --git a/packages/nc-gui/components/templates/templates.2.js b/packages/nc-gui/components/templates/templates.2.js
new file mode 100644
index 0000000000..b26f562edf
--- /dev/null
+++ b/packages/nc-gui/components/templates/templates.2.js
@@ -0,0 +1,62 @@
+const templates = {
+  title: 'Digital video production',
+  thumbnail: 'https://picsum.photos/200/300?2',
+  tables: [
+    {
+      tn: 'blog',
+      columns: [
+        {
+          cn: 'title',
+          uidt: 'SingleLineText'
+        },
+        {
+          cn: 'body',
+          uidt: 'LongText'
+        }
+      ],
+      hasMany: [
+        {
+          tn: 'comment',
+          _cn: 'title3'
+        }
+      ],
+      manyToMany: [
+        {
+          rtn: 'tag',
+          _cn: 'title4'
+        }
+      ],
+      v: []
+    },
+    {
+      tn: 'comment',
+      columns: [
+        {
+          cn: 'body',
+          uidt: 'LongText'
+        }
+      ],
+      hasMany: [],
+      manyToMany: [],
+      v: []
+    },
+    {
+      tn: 'tag',
+      columns: [
+        {
+          cn: 'title',
+          uidt: 'SingleLineText'
+        }
+      ],
+      hasMany: [],
+      manyToMany: [],
+      v: []
+    }
+  ],
+  category: 'test',
+  tags: 'a,b,c',
+  description: 'I\'m a thing. But, like most politicians, he promised more than he could deliver. You won\'t have time for sleeping, soldier, not with all the bed making you\'ll be doing. Then we\'ll go with that data file! Hey, you add a one and two zeros to that or we walk!'
+
+}
+
+export default templates
diff --git a/packages/nc-gui/components/templates/templates.3.js b/packages/nc-gui/components/templates/templates.3.js
new file mode 100644
index 0000000000..21e3b23396
--- /dev/null
+++ b/packages/nc-gui/components/templates/templates.3.js
@@ -0,0 +1,62 @@
+const templates = {
+  title: 'Content calendar',
+  thumbnail: 'https://picsum.photos/200/300?3',
+  tables: [
+    {
+      tn: 'blog',
+      columns: [
+        {
+          cn: 'title',
+          uidt: 'SingleLineText'
+        },
+        {
+          cn: 'body',
+          uidt: 'LongText'
+        }
+      ],
+      hasMany: [
+        {
+          tn: 'comment',
+          _cn: 'title3'
+        }
+      ],
+      manyToMany: [
+        {
+          rtn: 'tag',
+          _cn: 'title4'
+        }
+      ],
+      v: []
+    },
+    {
+      tn: 'comment',
+      columns: [
+        {
+          cn: 'body',
+          uidt: 'LongText'
+        }
+      ],
+      hasMany: [],
+      manyToMany: [],
+      v: []
+    },
+    {
+      tn: 'tag',
+      columns: [
+        {
+          cn: 'title',
+          uidt: 'SingleLineText'
+        }
+      ],
+      hasMany: [],
+      manyToMany: [],
+      v: []
+    }
+  ],
+  category: 'test',
+  tags: 'a,b,c',
+  description: 'I\'m a thing. But, like most politicians, he promised more than he could deliver. You won\'t have time for sleeping, soldier, not with all the bed making you\'ll be doing. Then we\'ll go with that data file! Hey, you add a one and two zeros to that or we walk!'
+
+}
+
+export default templates
diff --git a/packages/nc-gui/components/templates/templates.4.js b/packages/nc-gui/components/templates/templates.4.js
new file mode 100644
index 0000000000..9622b65c5e
--- /dev/null
+++ b/packages/nc-gui/components/templates/templates.4.js
@@ -0,0 +1,62 @@
+const templates = {
+  title: 'Event Marketing',
+  thumbnail: 'https://picsum.photos/200/300?3',
+  tables: [
+    {
+      tn: 'blog',
+      columns: [
+        {
+          cn: 'title',
+          uidt: 'SingleLineText'
+        },
+        {
+          cn: 'body',
+          uidt: 'LongText'
+        }
+      ],
+      hasMany: [
+        {
+          tn: 'comment',
+          _cn: 'title3'
+        }
+      ],
+      manyToMany: [
+        {
+          rtn: 'tag',
+          _cn: 'title4'
+        }
+      ],
+      v: []
+    },
+    {
+      tn: 'comment',
+      columns: [
+        {
+          cn: 'body',
+          uidt: 'LongText'
+        }
+      ],
+      hasMany: [],
+      manyToMany: [],
+      v: []
+    },
+    {
+      tn: 'tag',
+      columns: [
+        {
+          cn: 'title',
+          uidt: 'SingleLineText'
+        }
+      ],
+      hasMany: [],
+      manyToMany: [],
+      v: []
+    }
+  ],
+  category: 'test',
+  tags: 'a,b,c',
+  description: 'I\'m a thing. But, like most politicians, he promised more than he could deliver. You won\'t have time for sleeping, soldier, not with all the bed making you\'ll be doing. Then we\'ll go with that data file! Hey, you add a one and two zeros to that or we walk!'
+
+}
+
+export default templates
diff --git a/packages/nc-gui/components/templates/templates.5.js b/packages/nc-gui/components/templates/templates.5.js
new file mode 100644
index 0000000000..43c2d55f92
--- /dev/null
+++ b/packages/nc-gui/components/templates/templates.5.js
@@ -0,0 +1,62 @@
+const templates = {
+  title: 'Wedding Planning',
+  thumbnail: 'https://picsum.photos/200/300?5',
+  tables: [
+    {
+      tn: 'blog',
+      columns: [
+        {
+          cn: 'title',
+          uidt: 'SingleLineText'
+        },
+        {
+          cn: 'body',
+          uidt: 'LongText'
+        }
+      ],
+      hasMany: [
+        {
+          tn: 'comment',
+          _cn: 'title3'
+        }
+      ],
+      manyToMany: [
+        {
+          rtn: 'tag',
+          _cn: 'title4'
+        }
+      ],
+      v: []
+    },
+    {
+      tn: 'comment',
+      columns: [
+        {
+          cn: 'body',
+          uidt: 'LongText'
+        }
+      ],
+      hasMany: [],
+      manyToMany: [],
+      v: []
+    },
+    {
+      tn: 'tag',
+      columns: [
+        {
+          cn: 'title',
+          uidt: 'SingleLineText'
+        }
+      ],
+      hasMany: [],
+      manyToMany: [],
+      v: []
+    }
+  ],
+  category: 'test',
+  tags: 'a,b,c',
+  description: 'I\'m a thing. But, like most politicians, he promised more than he could deliver. You won\'t have time for sleeping, soldier, not with all the bed making you\'ll be doing. Then we\'ll go with that data file! Hey, you add a one and two zeros to that or we walk!'
+
+}
+
+export default templates
diff --git a/packages/nc-gui/components/templates/templates.categories.js b/packages/nc-gui/components/templates/templates.categories.js
new file mode 100644
index 0000000000..7fa50464ed
--- /dev/null
+++ b/packages/nc-gui/components/templates/templates.categories.js
@@ -0,0 +1,26 @@
+const categories = [
+  { title: 'Content production' },
+  { title: 'Featured' },
+  { title: 'Creative' },
+  { title: 'Event Planning' },
+  { title: 'Everyday Life' },
+  { title: 'Groups, Clubs & Hobbies' },
+  { title: 'HR & Recruiting' },
+  { title: 'Legal' },
+  { title: 'Local Business' },
+  { title: 'Marketing' },
+  { title: 'Nonprofit' },
+  { title: 'Personal' },
+  { title: 'PR & Communications' },
+  { title: 'Product, design, and UX' },
+  { title: 'Project Management' },
+  { title: 'Publishing' },
+  { title: 'Real Estate' },
+  { title: 'Remote work' },
+  { title: 'Sales & Customers' },
+  { title: 'Software Development' },
+  { title: 'Startup' },
+  { title: 'Venture Capital' }
+]
+
+export default categories
diff --git a/packages/nc-gui/components/templates/templates.js b/packages/nc-gui/components/templates/templates.js
new file mode 100644
index 0000000000..c9fbf93f18
--- /dev/null
+++ b/packages/nc-gui/components/templates/templates.js
@@ -0,0 +1,61 @@
+const templates = {
+  title: 'Project name',
+  tables: [
+    {
+      tn: 'blog',
+      columns: [
+        {
+          cn: 'title',
+          uidt: 'SingleLineText'
+        },
+        {
+          cn: 'body',
+          uidt: 'LongText'
+        }
+      ],
+      hasMany: [
+        {
+          tn: 'comment',
+          _cn: 'title3'
+        }
+      ],
+      manyToMany: [
+        {
+          rtn: 'tag',
+          _cn: 'title4'
+        }
+      ],
+      v: []
+    },
+    {
+      tn: 'comment',
+      columns: [
+        {
+          cn: 'body',
+          uidt: 'LongText'
+        }
+      ],
+      hasMany: [],
+      manyToMany: [],
+      v: []
+    },
+    {
+      tn: 'tag',
+      columns: [
+        {
+          cn: 'title',
+          uidt: 'SingleLineText'
+        }
+      ],
+      hasMany: [],
+      manyToMany: [],
+      v: []
+    }
+  ],
+  category: 'test',
+  tags: 'a,b,c',
+  description: 'I\'m a thing. But, like most politicians, he promised more than he could deliver. You won\'t have time for sleeping, soldier, not with all the bed making you\'ll be doing. Then we\'ll go with that data file! Hey, you add a one and two zeros to that or we walk!'
+
+}
+
+export default templates
diff --git a/packages/nc-gui/components/templates/templates.list.js b/packages/nc-gui/components/templates/templates.list.js
new file mode 100644
index 0000000000..d93a9b3e9f
--- /dev/null
+++ b/packages/nc-gui/components/templates/templates.list.js
@@ -0,0 +1,38 @@
+const templatesList = [{
+  id: 1,
+  title: 'Art Gallery Management',
+  category: 'Creative',
+  thumbnail: 'https://picsum.photos/200/300?1',
+  tags: 'a,b,c',
+  description: 'I\'m a thing. But, like most politicians, he promised more than he could deliver. You won\'t have time for sleeping, soldier, not with all the bed making you\'ll be doing. Then we\'ll go with that data file! Hey, you add a one and two zeros to that or we walk!'
+}, {
+  id: 2,
+  title: 'Digital video production',
+  category: 'Creative',
+  thumbnail: 'https://picsum.photos/200/300?2',
+  tags: 'a,b,c',
+  description: 'I\'m a thing. But, like most politicians, he promised more than he could deliver. You won\'t have time for sleeping, soldier, not with all the bed making you\'ll be doing. Then we\'ll go with that data file! Hey, you add a one and two zeros to that or we walk!'
+}, {
+  id: 3,
+  title: 'Content calendar',
+  category: 'Creative',
+  thumbnail: 'https://picsum.photos/200/300?3',
+  tags: 'a,b,c',
+  description: 'I\'m a thing. But, like most politicians, he promised more than he could deliver. You won\'t have time for sleeping, soldier, not with all the bed making you\'ll be doing. Then we\'ll go with that data file! Hey, you add a one and two zeros to that or we walk!'
+}, {
+  id: 4,
+  title: 'Event Marketing',
+  category: 'Event Planning',
+  thumbnail: 'https://picsum.photos/200/300?4',
+  tags: 'a,b,c',
+  description: 'I\'m a thing. But, like most politicians, he promised more than he could deliver. You won\'t have time for sleeping, soldier, not with all the bed making you\'ll be doing. Then we\'ll go with that data file! Hey, you add a one and two zeros to that or we walk!'
+}, {
+  id: 5,
+  title: 'Wedding Planning',
+  category: 'Event Planning',
+  thumbnail: 'https://picsum.photos/200/300?5',
+  tags: 'a,b,c',
+  description: 'I\'m a thing. But, like most politicians, he promised more than he could deliver. You won\'t have time for sleeping, soldier, not with all the bed making you\'ll be doing. Then we\'ll go with that data file! Hey, you add a one and two zeros to that or we walk!'
+}]
+
+export default templatesList
diff --git a/packages/nc-gui/components/templates/templatesModal.vue b/packages/nc-gui/components/templates/templatesModal.vue
new file mode 100644
index 0000000000..f87d272a30
--- /dev/null
+++ b/packages/nc-gui/components/templates/templatesModal.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <span class="caption font-weight-bold" @click="templatesModal = true">Templates</span>
+    <v-dialog v-model="templatesModal" v-if="templatesModal">
+      <v-card>
+        <project-templates modal @import="importTemplate" />
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import ProjectTemplates from '~/components/templates/list'
+export default {
+  name: 'TemplatesModal',
+  components: { ProjectTemplates },
+  data: () => ({
+    templatesModal: false
+  }),
+  methods: {
+    importTemplate(template) {
+      try {
+        this.$store.dispatch('sqlMgr/ActSqlOp', [{
+          // todo: extract based on active
+          dbAlias: 'db', // this.nodes.dbAlias,
+          env: '_noco'
+        }, 'xcModelsCreateFromTemplate', {
+          template
+        }])
+        this.$toast.success('Template imported successfully').goAway(3000);
+        this.templatesModal = false;
+      } catch (e) {
+        this.$toast.error(e.message).goAway(3000)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/packages/nc-gui/helpers/sqlUi/MysqlUi.js b/packages/nc-gui/helpers/sqlUi/MysqlUi.js
index 4cfaedc2a4..bdda224441 100644
--- a/packages/nc-gui/helpers/sqlUi/MysqlUi.js
+++ b/packages/nc-gui/helpers/sqlUi/MysqlUi.js
@@ -212,7 +212,7 @@ export class MysqlUi {
         return 255
 
       case 'varchar':
-        return 45
+        return 255
 
       case 'nchar':
         return 255
diff --git a/packages/nc-gui/layouts/default.vue b/packages/nc-gui/layouts/default.vue
index 1c04729f73..5027659fbd 100644
--- a/packages/nc-gui/layouts/default.vue
+++ b/packages/nc-gui/layouts/default.vue
@@ -43,7 +43,8 @@
         >
           {{ ghStarText }}
         </gh-btns-star>
-        <a class="caption font-weight-bold ml-1 mr-2 white--text" href="https://docs.nocodb.com" target="_blank">Docs</a>
+        <a class="align-self-center caption font-weight-bold ml-1 mr-2 white--text" href="https://docs.nocodb.com" target="_blank">Docs</a>
+        <templates-modal class="align-self-center" />
       </v-toolbar-items>
       <!-- <template v-if="!isThisMobile ">
 
@@ -574,9 +575,11 @@ import xTerm from '../components/xTerm'
 import { copyTextToClipboard } from '@/helpers/xutils'
 import Snackbar from '~/components/snackbar'
 import Language from '~/components/utils/language'
+import TemplatesModal from '~/components/templates/templatesModal'
 
 export default {
   components: {
+    TemplatesModal,
     ReleaseInfo,
     Language,
     ChangeEnv,
diff --git a/packages/nc-gui/pages/project/templates/_id.vue b/packages/nc-gui/pages/project/templates/_id.vue
new file mode 100644
index 0000000000..656cc01381
--- /dev/null
+++ b/packages/nc-gui/pages/project/templates/_id.vue
@@ -0,0 +1,15 @@
+<template>
+  <project-template />
+</template>
+
+<script>
+import ProjectTemplate from '~/components/templates/detailed'
+export default {
+  name: '_id.vue',
+  components: { ProjectTemplate }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/packages/nc-gui/pages/project/templates/index.vue b/packages/nc-gui/pages/project/templates/index.vue
new file mode 100644
index 0000000000..c7ce8a4bf0
--- /dev/null
+++ b/packages/nc-gui/pages/project/templates/index.vue
@@ -0,0 +1,16 @@
+<template>
+  <project-templates />
+</template>
+<script>
+
+import ProjectTemplates from '~/components/templates/list'
+export default {
+  components: {
+    ProjectTemplates
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts b/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts
index 2dd0df77dd..9031fa3f49 100644
--- a/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts
+++ b/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts
@@ -2271,7 +2271,7 @@ export default class NcMetaMgr {
   // NOTE: updated
   protected async xcModelSet(args): Promise<any> {
     const dbAlias = await this.getDbAlias(args);
-    this.cacheModelDel(args.project_id, dbAlias, 'table', args.args.tn);
+    this.cacheModelDel(this.getProjectId(args), dbAlias, 'table', args.args.tn);
     return this.xcMeta.metaUpdate(
       args.project_id,
       dbAlias,
@@ -4075,9 +4075,15 @@ export default class NcMetaMgr {
       d => d?.meta?.dbAlias === dbAlias
     );
 
+
+    const apiBuilder = this.app?.projectBuilders
+      ?.find(pb => pb.id === projectId)
+      ?.apiBuilders?.find(ab => ab.dbAlias === dbAlias);
+
     const parser = new NcTemplateParser({
       client: connectionConfig?.client,
-      template
+      template,
+      prefix: projectConfig?.prefix
     });
     parser.parse();
 
@@ -4111,7 +4117,7 @@ export default class NcMetaMgr {
     // create relations
 
     for (const relation of parser.relations) {
-      // if (args.args.type === 'real') {
+      if (relation.type === 'real') {
       const outrel = await this.projectMgr
         .getSqlMgr({ id: projectId })
         .handleRequest('relationCreate', {
@@ -4132,27 +4138,27 @@ export default class NcMetaMgr {
           }
         });
       }
-      // } else {
-      //   const outrel = await this.xcVirtualRelationCreate(
-      //     {...args, args: rel1Args},
-      //     req
-      //   );
-      //   if (this.listener) {
-      //     await this.listener({
-      //       req: {
-      //         ...args,
-      //         args: rel1Args,
-      //         api: 'xcVirtualRelationCreate'
-      //       },
-      //       res: outrel,
-      //       user: req.user,
-      //       ctx: {
-      //         req
-      //       }
-      //     });
-      //   }
+      } else {
+        const outrel = await this.xcVirtualRelationCreate(
+          {...args, args: relation},
+          req
+        );
+        if (this.listener) {
+          await this.listener({
+            req: {
+              ...args,
+              args: relation,
+              api: 'xcVirtualRelationCreate'
+            },
+            res: outrel,
+            user: req.user,
+            ctx: {
+              req
+            }
+          });
+        }
 
-      // }
+      }
     }
 
     //create m2m relations
@@ -4181,6 +4187,38 @@ export default class NcMetaMgr {
         });
       }
     }
+
+    // add virtual columns
+    for(const [tn, vColumns] of Object.entries(parser.virtualColumns)){
+      const meta = apiBuilder.getMeta(tn);
+      meta.v = meta.v || [];
+      meta.v.push(...vColumns)
+
+      const res = await this.xcModelSet({
+        ...args,
+        args: {
+          meta,
+          tn
+        }
+      })
+      await this.listener({
+        req: {
+          ...args,
+          args:{
+            meta,
+            tn
+          },
+          api: 'xcM2MRelationCreate'
+        },
+        res,
+        user: req.user,
+        ctx: {
+          req
+        }
+      });
+    }
+
+
   }
 
   protected async xcExportAsCsv(args, _req, res: express.Response) {
diff --git a/packages/nocodb/src/lib/sqlUi/MysqlUi.ts b/packages/nocodb/src/lib/sqlUi/MysqlUi.ts
index 81cbf54cb3..1c164acea3 100644
--- a/packages/nocodb/src/lib/sqlUi/MysqlUi.ts
+++ b/packages/nocodb/src/lib/sqlUi/MysqlUi.ts
@@ -212,7 +212,7 @@ export class MysqlUi {
         return 255;
 
       case 'varchar':
-        return 45;
+        return 255;
 
       case 'nchar':
         return 255;
diff --git a/packages/nocodb/src/lib/templateParser/NcTemplateParser.ts b/packages/nocodb/src/lib/templateParser/NcTemplateParser.ts
index c08ecee772..41c563bf3f 100644
--- a/packages/nocodb/src/lib/templateParser/NcTemplateParser.ts
+++ b/packages/nocodb/src/lib/templateParser/NcTemplateParser.ts
@@ -17,27 +17,39 @@ export default class NcTemplateParser {
     | typeof SqliteUi;
 
   private _tables: any[];
+  private client: string;
   private _relations: any[];
   private _m2mRelations: any[];
+  private _virtualColumns: { [tn: string]: any[] };
+  private prefix: string;
   private template: any;
 
-  constructor({ client, template }) {
-    this.sqlUi = SqlUiFactory.create({ client });
+  constructor({client, template, prefix = ''}) {
+    this.client = client;
+    this.sqlUi = SqlUiFactory.create({client});
     this.template = template;
+    this.prefix = prefix
   }
 
   public parse(template?: any): any {
     const tables = [];
     this.template = template || this.template;
-    for (const tableTemplate of this.template.tables) {
-      const table = this.extractTable(tableTemplate);
+    const tableTemplates = this.template.tables.map(tableTemplate => {
+      const t = {
+        ...tableTemplate,
+        tn: this.getTable(tableTemplate.tn),
+        _tn: tableTemplate._tn || tableTemplate.tn
+      }
+      const table = this.extractTable(t);
       tables.push(table);
-    }
+      return t
+    })
 
     this._tables = tables;
 
-    for (const tableTemplate of this.template.tables) {
+    for (const tableTemplate of tableTemplates) {
       this.extractRelations(tableTemplate);
+      this.extractVirtualColumns(tableTemplate);
     }
   }
 
@@ -57,9 +69,11 @@ export default class NcTemplateParser {
 
     return {
       tn: tableTemplate.tn,
+      _tn: tableTemplate._tn,
       columns: [
-        ...defaultColumns,
-        ...this.extractTableColumns(tableTemplate.columns)
+        defaultColumns[0],
+        ...this.extractTableColumns(tableTemplate.columns),
+        ...defaultColumns.slice(1),
       ]
     };
   }
@@ -81,12 +95,21 @@ export default class NcTemplateParser {
         //   // this.extractRelations(tableColumn, 'mm');
         //   break;
         default:
+          const colProp = this.sqlUi.getDataTypeForUiType(tableColumn);
           columns.push({
             ...this.sqlUi.getNewColumn(''),
+            rqd: false,
+            pk: false,
+            ai: false,
+            cdf: null,
+            un: false,
+            dtx: 'specificType',
+            dtxp: this.sqlUi.getDefaultLengthForDatatype(colProp.dt),
+            dtxs: this.sqlUi.getDefaultScaleForDatatype(colProp.dt),
             cn: tableColumn.cn,
             _cn: tableColumn.cn,
             uidt: tableColumn.uidt,
-            ...this.sqlUi.getDataTypeForUiType(tableColumn)
+            ...colProp
           });
           break;
       }
@@ -98,11 +121,11 @@ export default class NcTemplateParser {
     if (!this._relations) this._relations = [];
     if (!this._m2mRelations) this._m2mRelations = [];
     for (const hasMany of tableTemplate.hasMany || []) {
-      const childTable = this.tables.find(table => table.tn === hasMany.tn);
-      const partentTable = this.tables.find(
+      const childTable = this.tables.find(table => table.tn === this.getTable(hasMany.tn));
+      const parentTable = this.tables.find(
         table => table.tn === tableTemplate.tn
       );
-      const parentPrimaryColumn = partentTable.columns.find(
+      const parentPrimaryColumn = parentTable.columns.find(
         column => column.uidt === UITypes.ID
       );
 
@@ -126,18 +149,18 @@ export default class NcTemplateParser {
       // add relation create entry
       this._relations.push({
         childColumn: childColumnName,
-        childTable: hasMany.tn,
+        childTable: childTable.tn,
         onDelete: 'NO ACTION',
         onUpdate: 'NO ACTION',
         parentColumn: parentPrimaryColumn.cn,
         parentTable: tableTemplate.tn,
-        type: 'real',
+        type: this.client === 'sqlite3' ? 'virtual' : 'real',
         updateRelation: false
       });
     }
     for (const manyToMany of tableTemplate.manyToMany || []) {
       // @ts-ignore
-      const childTable = this.tables.find(table => table.tn === manyToMany.rtn);
+      const childTable = this.tables.find(table => table.tn === this.getTable(manyToMany.rtn));
       const parentTable = this.tables.find(
         table => table.tn === tableTemplate.tn
       );
@@ -157,12 +180,40 @@ export default class NcTemplateParser {
         onUpdate: 'NO ACTION',
         parentColumn: parentPrimaryColumn.cn,
         parentTable: parentTable.tn,
-        type: 'real',
+        type: this.client === 'sqlite3' ? 'virtual' : 'real',
         updateRelation: false
       });
     }
   }
 
+  private extractVirtualColumns(tableMeta) {
+    if (!this._virtualColumns) this._virtualColumns = {};
+    const virtualColumns = [];
+    for (const v of (tableMeta.v || [])) {
+      const v1 = {...v}
+      let type, prop;
+
+      switch (v.uidt) {
+        case UITypes.Rollup:
+          type = v.rl.type
+          prop = 'rl'
+          break;
+        case UITypes.Lookup:
+          type = v.lk.type
+          prop = 'lk'
+          break;
+      }
+
+      if (type && prop) {
+        // todo: extract relation data
+      } else {
+        virtualColumns.push(v1)
+      }
+
+    }
+    this.virtualColumns[tableMeta.tn] = virtualColumns;
+  }
+
   get tables(): any[] {
     return this._tables;
   }
@@ -170,7 +221,16 @@ export default class NcTemplateParser {
   get relations(): any[] {
     return this._relations;
   }
+
   get m2mRelations(): any[] {
     return this._m2mRelations;
   }
+
+  get virtualColumns(): { [tn: string]: any[] } {
+    return this._virtualColumns;
+  }
+
+  private getTable(tn) {
+    return `${this.prefix}${tn}`
+  }
 }