diff --git a/packages/nc-gui/components/ProjectTreeView.vue b/packages/nc-gui/components/ProjectTreeView.vue
index fb42016f6b..118e339d3f 100644
--- a/packages/nc-gui/components/ProjectTreeView.vue
+++ b/packages/nc-gui/components/ProjectTreeView.vue
@@ -580,7 +580,7 @@
         <template v-if="_isUIAllowed('settings')">
           <v-divider />
 
-          <div class="py-3 pl-5 pr-3 d-flex align-center">
+          <div class="pt-3 pl-5 pr-3 d-flex align-center pb-2">
             <settings-modal>
               <template #default="{click}">
                 <div v-t="['project-settings']" class="caption pointer nc-team-settings" @click="click">
@@ -593,6 +593,17 @@
             </settings-modal>
           </div>
         </template>
+
+        <div
+          v-t="['api-docs']"
+          class="caption pointer nc-docs pb-3 pl-5 pr-3 pt-2 d-flex align-center"
+          @click="openLink('https://apis.nocodb.com')"
+        >
+          <v-icon small class="mr-2">
+            mdi-api
+          </v-icon>
+          API Docs
+        </div>
         <v-divider />
         <extras class="pl-1 " />
       </div>
@@ -610,7 +621,6 @@
       @create="mtdViewCreate($event)"
     />
 
-
     <textDlgSubmitCancel
       v-if="dialogRenameTable.dialogShow"
       :rules="[validateTableName, validateUniqueAlias]"
@@ -663,7 +673,7 @@
 <script>
 /* eslint-disable */
 
-import { mapMutations, mapGetters, mapActions } from 'vuex'
+import {mapMutations, mapGetters, mapActions} from 'vuex'
 
 import rightClickOptions from '../helpers/rightClickOptions'
 import rightClickOptionsSub from '../helpers/rightClickOptionsSub'
@@ -671,11 +681,11 @@ import icons from '../helpers/treeViewIcons'
 
 import textDlgSubmitCancel from './utils/dlgTextSubmitCancel'
 import dlgLabelSubmitCancel from './utils/dlgLabelSubmitCancel'
-import { copyTextToClipboard } from '../helpers/xutils'
+import {copyTextToClipboard} from '../helpers/xutils'
 import DlgTableCreate from '@/components/utils/dlgTableCreate'
 import DlgViewCreate from '@/components/utils/dlgViewCreate'
 import SponsorMini from '@/components/sponsorMini'
-import { validateTableName } from '~/helpers'
+import {validateTableName} from '~/helpers'
 import ExcelImport from '~/components/import/excelImport'
 
 import draggable from 'vuedraggable'
@@ -717,7 +727,7 @@ export default {
       viewer: 'mdi-eye-outline',
       commenter: 'mdi-comment-account-outline',
     },
-    rolesList: [{ title: 'editor' }, { title: 'commenter' }, { title: 'viewer' }],
+    rolesList: [{title: 'editor'}, {title: 'commenter'}, {title: 'viewer'}],
     showSqlClient: false,
     nestedMenu: {},
     overShieldIcon: false,
@@ -745,7 +755,7 @@ export default {
     x: 0,
     y: 0,
     menuItem: null,
-    menu: [{ title: 'Execute' }],
+    menu: [{title: 'Execute'}],
     icons,
     tree: [],
     active: [],
@@ -912,7 +922,7 @@ export default {
           name: 'App Store',
           key: `appStore`
         }
-        item._nodes = { env: '_noco' }
+        item._nodes = {env: '_noco'}
         item._nodes.type = 'appStore'
         this.$store.dispatch('tabs/ActAddTab', item)
       }
@@ -950,7 +960,7 @@ export default {
           name: `${this.$t('title.team&auth')} `,
           key: `roles`
         }
-        item._nodes = { env: '_noco' }
+        item._nodes = {env: '_noco'}
         item._nodes.type = 'roles'
         this.$store.dispatch('tabs/ActAddTab', item)
       }
@@ -964,7 +974,7 @@ export default {
           name: `${this.$t('title.metaMgmt')}`,
           key: `disableOrEnableModel`
         }
-        item._nodes = { env: '_noco' }
+        item._nodes = {env: '_noco'}
         item._nodes.type = 'disableOrEnableModel'
         this.$store.dispatch('tabs/ActAddTab', item)
       }
@@ -1101,7 +1111,7 @@ export default {
             }
             if (item._nodes.type === 'table') {
               let tableIndex = +item._nodes.key.split('.').pop()
-              if (!(await this.$store.dispatch('windows/ActCheckMaxTable', { tableIndex }))) {
+              if (!(await this.$store.dispatch('windows/ActCheckMaxTable', {tableIndex}))) {
                 return
               }
             }
@@ -1175,9 +1185,9 @@ export default {
         if (!this.isTreeView) {
           if (this.$route.query.type) {
             const node = this.listViewArr.find(n => n.type === `${this.$route.query.type}Dir`)
-            await this.addTab({ ...(node || this.listViewArr[0]) }, false, true)
+            await this.addTab({...(node || this.listViewArr[0])}, false, true)
           } else {
-            await this.addTab({ ...this.listViewArr[0] }, false, true)
+            await this.addTab({...this.listViewArr[0]}, false, true)
           }
         }
       } catch (error) {
@@ -1344,7 +1354,7 @@ export default {
             dbAlias: item._nodes.dbAlias,
           },
           func,
-          { tn: item.name },
+          {tn: item.name},
         ])
         if (result && result.data) {
           copyTextToClipboard(result.data, 'selection')
@@ -1352,7 +1362,7 @@ export default {
           copyTextToClipboard('Example String', 'selection')
         }
 
-        let sqlClientNode = { ...item._nodes }
+        let sqlClientNode = {...item._nodes}
         let newItem = {
           _nodes: sqlClientNode,
         }
@@ -1652,7 +1662,7 @@ export default {
               dbAlias: item._nodes.dbAlias,
             },
             'viewRead',
-            { view_name: item._nodes.view_name },
+            {view_name: item._nodes.view_name},
           ])
 
           await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
diff --git a/packages/nc-gui/components/project/spreadsheet/components/extras.vue b/packages/nc-gui/components/project/spreadsheet/components/extras.vue
index 6d47361485..4cb7cc0102 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/extras.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/extras.vue
@@ -19,6 +19,7 @@
         <v-list
           width="100%"
           class="
+          py-0
           flex-shrink-1
           text-left
           elevation-0
@@ -29,65 +30,86 @@
           :class="{ active: true }"
           dense
         >
-          <v-list-item dense href="https://discord.gg/5RgZmkW" target="_blank">
-            <!-- Join Discord -->
+          <v-list-item>
+            <div class="d-flex justify-space-between d-100 pr-2">
+              <v-icon v-t="['community:discord']" class="mr-1" size="22" :color="textColors[0]" @click="open('https://discord.gg/5RgZmkW')">
+                mdi-discord
+              </v-icon>
+              <v-icon v-t="['community:discourse']" class="mr-1 discourse" size="22" :color="textColors[0]" @click="open('https://community.nocodb.com/')">
+                mdi-discourse
+              </v-icon>
+              <v-icon v-t="['community:discord']" class="mr-1" size="22" color="#ff4600" @click="open('https://www.reddit.com/r/NocoDB/')">
+                mdi-reddit
+              </v-icon>
+              <v-icon v-t="['community:twitter']" class="mr-1" size="22" :color="textColors[1]" @click="open('https://twitter.com/NocoDB')">
+                mdi-twitter
+              </v-icon>
+              <v-icon v-t="['community:book-demo']" class="mr-1" size="22" :color="textColors[3]" @click="open('https://calendly.com/nocodb-meeting')">
+                mdi-calendar-month
+              </v-icon>
+            </div>
+          </v-list-item>
+
+          <!--          <v-list-item dense href="https://discord.gg/5RgZmkW" target="_blank">
+            &lt;!&ndash; Join Discord &ndash;&gt;
             <v-list-item-title>
               <v-icon class="mr-1" small :color="textColors[0]">
                 mdi-discord
               </v-icon>
-              <span class="caption" :title="$t('labels.community.joinDiscord')" v-t="['community:discord']">{{
+              <span v-t="['community:discord']" class="caption" :title="$t('labels.community.joinDiscord')">{{
                 $t('labels.community.joinDiscord')
               }}</span>
             </v-list-item-title>
           </v-list-item>
-          <!-- Join Community -->
+          &lt;!&ndash; Join Community &ndash;&gt;
           <v-list-item dense href="https://community.nocodb.com/" target="_blank">
             <v-list-item-title>
-                <v-icon class="mr-1 discourse" small :color="textColors[0]">
-                  mdi-discourse
-                </v-icon>
-                <span class="caption" :title="$t('labels.community.joinCommunity')" v-t="['community:discourse']">{{
-                  $t('labels.community.joinCommunity')
-                }}</span>
-              </v-list-item-title>
-            </v-list-item>
+              <v-icon class="mr-1 discourse" small :color="textColors[0]">
+                mdi-discourse
+              </v-icon>
+              <span v-t="['community:discourse']" class="caption" :title="$t('labels.community.joinCommunity')">{{
+                $t('labels.community.joinCommunity')
+              }}</span>
+            </v-list-item-title>
+          </v-list-item>
+          <v-divider />
           <v-list-item dense href="https://twitter.com/NocoDB" target="_blank">
-          <!-- Join Reddit -->
-          <v-list-item-title>
-            <v-icon class="mr-1" small color="#ff4600">
-              mdi-reddit
-            </v-icon>
-            <span class="caption" :title="$t('labels.community.joinReddit')" v-t="['community:reddit']">{{
-              $t('labels.community.joinReddit')
-            }}</span>
-          </v-list-item-title>
-        </v-list-item>
-        <v-list-item
-          dense
-          target="_blank"
-          href="https://calendly.com/nocodb-meeting"
-        >
-            <!-- Follow NocoDB -->
+            &lt;!&ndash; Join Reddit &ndash;&gt;
+            <v-list-item-title>
+              <v-icon class="mr-1" small color="#ff4600">
+                mdi-reddit
+              </v-icon>
+              <span class="caption" :title="$t('labels.community.joinReddit')" v-t="['community:reddit']">{{
+                  $t('labels.community.joinReddit')
+                }}</span>
+            </v-list-item-title>
+          </v-list-item>
+          <v-list-item
+            dense
+            target="_blank"
+            href="https://calendly.com/nocodb-meeting"
+          >
+            &lt;!&ndash; Follow NocoDB &ndash;&gt;
             <v-list-item-title>
               <v-icon class="mr-1" small :color="textColors[1]">
                 mdi-twitter
               </v-icon>
               <span class="caption" title="$t('labels.community.followNocodb')" v-t="['community:twitter']"> {{
-                $t('labels.community.followNocodb')
-              }}</span>
+                  $t('labels.community.followNocodb')
+                }}</span>
             </v-list-item-title>
-          </v-list-item>
-          <v-list-item dense href="https://www.reddit.com/r/NocoDB/" target="_blank">
-            <!-- Book a Free DEMO -->
+          </v-list-item>-->
+          <!--          <v-list-item dense href="https://www.reddit.com/r/NocoDB/" target="_blank">
+            &lt;!&ndash; Book a Free DEMO &ndash;&gt;
             <v-list-item-title>
               <v-icon class="mr-1" small :color="textColors[3]">
                 mdi-calendar-month
               </v-icon>
-              <span class="caption" :title="$t('labels.community.bookDemo')" v-t="['community:book-demo']">{{
+              <span v-t="['community:book-demo']" class="caption" :title="$t('labels.community.bookDemo')">{{
                 $t('labels.community.bookDemo')
               }}</span>
             </v-list-item-title>
-          </v-list-item>
+          </v-list-item>-->
         </v-list>
       </div>
     </template>
@@ -96,7 +118,6 @@
 
 <script>
 import ShareIcons from '../../../share-icons'
-import SponsorMini from '~/components/sponsorMini'
 import colors from '~/mixins/colors'
 
 export default {
@@ -106,8 +127,7 @@ export default {
   data: () => ({
     showCommunity: true
   }),
-  computed: {
-  },
+  computed: {},
   mounted() {
     setInterval(() => {
       this.showCommunity = !this.showCommunity
@@ -138,8 +158,8 @@ export default {
 }
 
 .v-icon.discourse {
-  height: 16px;
-  width: 16px;
+  height: 22px;
+  width: 22px;
   background-image: url('~/assets/img/discourse-icon.png');
   background-size: contain;
   background-repeat: no-repeat;
@@ -150,19 +170,4 @@ export default {
   content: "";
 }
 
-//
-//@keyframes anim {
-//  0%, 100% {
-//    opacity: .2;
-//    transform: scale(.5);
-//  }
-//  50% {
-//    opacity: 1;
-//    transform: scale(1);
-//  }
-//}
-//
-//.vue-icon {
-//  animation: anim 2s infinite;
-//}
 </style>
diff --git a/packages/nc-gui/mixins/device.js b/packages/nc-gui/mixins/device.js
index 9e40525e7e..d3bce45472 100644
--- a/packages/nc-gui/mixins/device.js
+++ b/packages/nc-gui/mixins/device.js
@@ -126,6 +126,9 @@ export default {
         msg = e.response.data.msg || 'Some internal error occurred'
       }
       return msg || 'Some error occurred'
+    },
+    open(url, target = '_blank') {
+      window.open(url, target)
     }
   }
 }
diff --git a/packages/nocodb/src/lib/noco/upgrader/NcUpgrader.ts b/packages/nocodb/src/lib/noco/upgrader/NcUpgrader.ts
index 09ab4ded7a..af2f1f7482 100644
--- a/packages/nocodb/src/lib/noco/upgrader/NcUpgrader.ts
+++ b/packages/nocodb/src/lib/noco/upgrader/NcUpgrader.ts
@@ -105,7 +105,7 @@ export default class NcUpgrader {
         evt_type: 'appMigration:failed',
         from: oldVersion,
         to: process.env.NC_VERSION,
-        msg: e.msg
+        msg: e.message
       });
     }
   }