diff --git a/packages/nc-gui/components/base/shareBase.vue b/packages/nc-gui/components/base/shareBase.vue
index b61612234e..07cccfa779 100644
--- a/packages/nc-gui/components/base/shareBase.vue
+++ b/packages/nc-gui/components/base/shareBase.vue
@@ -5,44 +5,10 @@
     </v-icon>
     <span class="grey--text caption">Shared base link</span>
     <div class="nc-container">
-      <v-menu>
-        <template #activator="{on}">
-          <div class="my-2" v-on="on">
-            <template v-if="base.enabled">
-              Anyone with following link can view base in a readonly mode
-            </template>
-            <template v-else>
-              Generate publicly shareable readonly base
-            </template>
-
-            <v-icon small>
-              mdi-menu-down-outline
-            </v-icon>
-          </div>
-        </template>
-        <v-list dense>
-          <v-list-item dense @click="createSharedBase">
-            <v-list-item-title>
-              <v-icon small class="mr-1">
-                mdi-link-variant
-              </v-icon>
-              <span class="caption">Readonly link</span>
-            </v-list-item-title>
-          </v-list-item>
-          <v-list-item dense @click="disableSharedBase">
-            <v-list-item-title>
-              <v-icon small class="mr-1">
-                mdi-link-variant-off
-              </v-icon>
-              <span class="caption">Disable shared base</span>
-            </v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-
-      <v-chip v-if="base.enabled" :color="colors[4]">
+      <v-chip v-if="base.enabled" :color="colors[4]" style="" class="rounded pl-1 pr-0 d-100 nc-url-chip pr-3">
         <div class="nc-url-wrapper d-flex mx-1 align-center d-100">
-          <span class="nc-url flex-grow-1">{{ url }}</span>
+          <span class="nc-url flex-grow-1 caption ">{{ url }}</span>
+          <v-spacer />
           <v-divider vertical />
           <x-icon tooltip="reload" @click="recreate">
             mdi-reload
@@ -58,6 +24,78 @@
           </x-icon>
         </div>
       </v-chip>
+
+      <div class="d-flex align-center px-2">
+        <div>
+          <v-menu offset-x>
+            <template #activator="{on}">
+              <div class="my-2" v-on="on">
+                <div class="font-weight-bold">
+                  <span v-if="base.enabled">Anyone with the link</span>
+                  <span v-else>Disabled shared base</span>
+                  <v-icon small>
+                    mdi-menu-down-outline
+                  </v-icon>
+                </div>
+              </div>
+            </template>
+            <v-list dense>
+              <v-list-item dense @click="createSharedBase('viewer')">
+                <v-list-item-title>
+                  <v-icon small class="mr-1">
+                    mdi-link-variant
+                  </v-icon>
+                  <span class="caption">Anyone with the link</span>
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item dense @click="disableSharedBase">
+                <v-list-item-title>
+                  <v-icon small class="mr-1">
+                    mdi-link-variant-off
+                  </v-icon>
+                  <span class="caption">Disable shared base</span>
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+          <div class=" caption">
+            <template v-if="base.enabled">
+              <span v-if="base.roles === 'editor'">Anyone on the internet with this link can edit</span>
+              <span v-else-if="base.roles === 'viewer'">Anyone on the internet with this link can view</span>
+            </template>
+            <template v-else>
+              Generate publicly shareable readonly base
+            </template>
+          </div>
+        </div>
+        <v-spacer />
+        <div class="d-flex justify-center" style="width:120px">
+          <v-menu v-if="base.enabled" offset-y>
+            <template #activator="{on}">
+              <div class="text-capitalize my-2   font-weight-bold backgroundColorDefault py-2 px-4 rounded" v-on="on">
+                {{ base.roles || 'Viewer' }}
+
+                <v-icon small>
+                  mdi-menu-down-outline
+                </v-icon>
+              </div>
+            </template>
+
+            <v-list dense>
+              <v-list-item @click="createSharedBase('editor')">
+                <v-list-item-title>
+                  Editor
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="createSharedBase('viewer')">
+                <v-list-item-title>
+                  Viewer
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -92,9 +130,9 @@ export default {
         console.log(e)
       }
     },
-    async createSharedBase() {
+    async createSharedBase(roles = 'viewer') {
       try {
-        const sharedBase = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ dbAlias: 'db' }, 'createSharedBaseLink'])
+        const sharedBase = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ dbAlias: 'db' }, 'createSharedBaseLink', { roles }])
         this.base = sharedBase || {}
       } catch (e) {
         this.$toast.error(e.message).goAway(3000)
@@ -157,4 +195,5 @@ style="background: transparent; border: 1px solid #ddd"></iframe>`)
   background: var(--v-backgroundColor-base);
   padding: 20px 20px;
 }
+/deep/ .nc-url-chip .v-chip__content{width: 100%}
 </style>
diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
index 6be60c7fd3..a7d83e55b2 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
@@ -871,6 +871,7 @@ export default {
         const { row: rowObj, rowMeta } = this.data[row]
         if (rowMeta.new) {
           try {
+            this.$set(this.data[row], 'saving', true)
             const pks = this.meta.columns.filter((col) => {
               return col.pk
             })
@@ -910,6 +911,8 @@ export default {
               this.$toast.error(`Failed to save row : ${e.message}`).goAway(3000)
             }
           }
+
+          this.$set(this.data[row], 'saving', false)
         }
       }
     },
@@ -943,6 +946,7 @@ export default {
           if (!id) {
             return this.$toast.info('Update not allowed for table which doesn\'t have primary Key').goAway(3000)
           }
+          this.$set(this.data[row], 'saving', true)
 
           const newData = await this.api.update(id, {
             [column._cn]: rowObj[column._cn]
@@ -961,6 +965,8 @@ export default {
             this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000)
           }
         }
+
+        this.$set(this.data[row], 'saving', false)
       }
     },
     async deleteRow() {
diff --git a/packages/nc-gui/layouts/shared.vue b/packages/nc-gui/layouts/shared.vue
index f35ac026ce..57629b0ee5 100644
--- a/packages/nc-gui/layouts/shared.vue
+++ b/packages/nc-gui/layouts/shared.vue
@@ -1,7 +1,6 @@
 <template>
   <v-app>
     <v-main>
-      <v-app-bar v-show="false" dark />
       <div>
         <nuxt />
       </div>
diff --git a/packages/nc-gui/pages/nc/base/_shared_base_id.vue b/packages/nc-gui/pages/nc/base/_shared_base_id.vue
index 0b0537013b..27def4a824 100644
--- a/packages/nc-gui/pages/nc/base/_shared_base_id.vue
+++ b/packages/nc-gui/pages/nc/base/_shared_base_id.vue
@@ -27,11 +27,12 @@
       </pane>
     </splitpanes>
     <div class="nc-embedded-options d-flex align-center px-3">
-      <a href="https://github.com/nocodb/nocodb" target="_blank" class="text-decoration-none d-inline-flex align-center  textColor--text">
-        <img src="favicon-32.png" height="15" class="mr-2">
-        <span class="body-1 font-weight-bold">NocoDB</span></a>
       <v-spacer />
-      <span v-if="embed" class="caption pointer" @click="showLargerVersion"><v-icon small>mdi-arrow-expand</v-icon> View larger version</span>
+      <a href="https://github.com/nocodb/nocodb" target="_blank" class=" d-inline-flex align-center caption">
+        <img src="favicon-32.png" height="15" class="mr-2">
+        <span>Built with </span> &nbsp;
+        <span class=""><span class="font-weight-bold"> NocoDB</span> </span></a>
+      <span v-if="embed" class="caption pointer ml-4" @click="showLargerVersion"><v-icon small>mdi-arrow-expand</v-icon> Expand</span>
     </div>
   </div>
 </template>
diff --git a/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts b/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts
index b181164a09..6f39d72606 100644
--- a/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts
+++ b/packages/nocodb/src/lib/noco/meta/NcMetaMgr.ts
@@ -3447,12 +3447,18 @@ export default class NcMetaMgr {
         }
       );
 
+      let roles = args?.args?.roles;
+      if (!roles || (roles !== 'editor' && roles !== 'viewer')) {
+        roles = 'viewer';
+      }
+
       if (!sharedBase) {
         const insertData = {
           project_id: args.project_id,
           db_alias: this.getDbAlias(args),
           shared_base_id: uuidv4(),
-          password: args?.args?.password
+          password: args?.args?.password,
+          roles
         };
 
         await this.xcMeta.metaInsert(
@@ -3466,8 +3472,19 @@ export default class NcMetaMgr {
           this.getDbAlias(args),
           'nc_shared_bases',
           {},
-          ['id', 'shared_base_id', 'enabled']
+          ['id', 'shared_base_id', 'enabled', 'roles']
+        );
+      } else {
+        await this.xcMeta.metaUpdate(
+          this.getProjectId(args),
+          this.getDbAlias(args),
+          'nc_shared_bases',
+          { roles },
+          {
+            project_id: this.getProjectId(args)
+          }
         );
+        sharedBase.roles = roles;
       }
 
       sharedBase.url = `${req.ncSiteUrl}${this.config.dashboardPath}#/nc/base/${sharedBase.shared_base_id}`;