diff --git a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
index a5d7078185..f7510323b6 100644
--- a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
@@ -3,19 +3,19 @@ import type { ColumnType, GridColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import type GridView from '../../nocodb/src/lib/models/GridView'
 import useMetas from '~/composables/useMetas'
+import useUIPermission from '~/composables/useUIPermission'
 
 // todo: update swagger
 export default (view: Ref<(GridView & { id?: string }) | undefined>) => {
   const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
+  const { isUIAllowed } = useUIPermission()
+  const { $api } = useNuxtApp()
+  const { metas } = useMetas()
 
   const gridViewCols = ref<Record<string, GridColumnType>>({})
   const resizingCol = ref('')
   const resizingColWidth = ref('200px')
 
-  const { $api } = useNuxtApp()
-
-  const { metas } = useMetas()
-
   const columns = computed<ColumnType[]>(() => metas?.value?.[(view?.value as any)?.fk_model_id as string]?.columns)
 
   watch(
@@ -51,7 +51,16 @@ export default (view: Ref<(GridView & { id?: string }) | undefined>) => {
   }
 
   const updateWidth = (id: string, width: string) => {
-    if (gridViewCols?.value?.[id]) gridViewCols.value[id].width = width
+    if (gridViewCols?.value?.[id]) {
+      gridViewCols.value[id].width = width
+    }
+
+    // sync with server if allowed
+    if (isUIAllowed('gridColUpdate') && gridViewCols.value[id]?.id) {
+      $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
+        width,
+      })
+    }
   }
 
   return { loadGridViewColumns, updateWidth, resizingCol, resizingColWidth, loadCss, unloadCss }
diff --git a/packages/nc-gui-v2/composables/useUIPermission/index.ts b/packages/nc-gui-v2/composables/useUIPermission/index.ts
index e8fa8e6b5b..8ac272f97a 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@@ -6,7 +6,7 @@ export default () => {
   const { $state } = useNuxtApp()
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
 
-  const isUIAllowed = (permission: keyof typeof rolePermissions[keyof typeof rolePermissions], _skipPreviewAs = false) => {
+  const isUIAllowed = (permission: string, _skipPreviewAs = false) => {
     const user = $state.user
     let userRoles = user?.value?.roles || {}
 
@@ -32,11 +32,7 @@ export default () => {
     // }
 
     return Object.entries(roles).some(([role, hasRole]) => {
-      return (
-        hasRole &&
-        (rolePermissions[role as keyof typeof rolePermissions] === '*' ||
-          rolePermissions[role as keyof typeof rolePermissions]?.[permission])
-      )
+      return hasRole && (rolePermissions[role] === '*' || (rolePermissions[role] as Record<string, boolean>)?.[permission])
     })
   }
 
diff --git a/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts b/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts
index cd717b3278..8fedbaddd0 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts
@@ -1,4 +1,4 @@
-export default {
+const permissions: Record<string, Record<string, boolean> | '*'> = {
   creator: '*',
   owner: '*',
   guest: {},
@@ -35,3 +35,5 @@ export default {
     projectSettings: true,
   },
 }
+
+export default permissions