diff --git a/packages/app/src/components/workspace-setting/general/General.tsx b/packages/app/src/components/workspace-setting/general/General.tsx
index 241c97f060..d73c3c87df 100644
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@@ -33,7 +33,6 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
     currentWorkspace &&
       (await updateWorkspace({ avatarBlob: blob }, currentWorkspace));
   };
-
   if (!workspace) {
     return null;
   }
@@ -42,22 +41,30 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
     <>
       <StyledRow>
         <StyledSettingKey>{t('Workspace Avatar')}</StyledSettingKey>
-        <StyledAvatar>
-          <Upload
-            accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
-            fileChange={fileChange}
-          >
-            <>
-              <div className="camera-icon">
-                <CameraIcon></CameraIcon>
-              </div>
+        <StyledAvatar disabled={!isOwner}>
+         {isOwner ? (
+              <Upload
+                accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
+                fileChange={fileChange}
+              >
+                <>
+                  <div className="camera-icon">
+                    <CameraIcon></CameraIcon>
+                  </div>
+                  <WorkspaceUnitAvatar
+                    size={72}
+                    name={workspace.name}
+                    workspaceUnit={workspace}
+                  />
+                </>
+              </Upload>
+            ) : (
               <WorkspaceUnitAvatar
                 size={72}
                 name={workspace.name}
                 workspaceUnit={workspace}
               />
-            </>
-          </Upload>
+            )}
         </StyledAvatar>
       </StyledRow>
 
diff --git a/packages/app/src/components/workspace-setting/general/style.ts b/packages/app/src/components/workspace-setting/general/style.ts
index 58538707f2..4707843c6e 100644
--- a/packages/app/src/components/workspace-setting/general/style.ts
+++ b/packages/app/src/components/workspace-setting/general/style.ts
@@ -19,26 +19,29 @@ export const StyledProviderInfo = styled('p')(({ theme }) => {
   };
 });
 
-export const StyledAvatar = styled('div')(() => {
-  return {
-    position: 'relative',
-    cursor: 'pointer',
-    ':hover': {
-      '.camera-icon': {
-        display: 'block',
+export const StyledAvatar = styled('div')(
+  ({ disabled }: { disabled: boolean }) => {
+    return {
+      position: 'relative',
+      marginRight: '20px',
+      cursor: disabled ? 'default' : 'pointer',
+      ':hover': {
+        '.camera-icon': {
+          display: 'block',
+        },
       },
-    },
-    '.camera-icon': {
-      position: 'absolute',
-      display: 'none',
-      width: '100%',
-      height: '100%',
-      borderRadius: '50%',
-      backgroundColor: 'rgba(60, 61, 63, 0.5)',
-      top: 0,
-      left: 0,
-      textAlign: 'center',
-      lineHeight: '72px',
-    },
-  };
-});
+      '.camera-icon': {
+        position: 'absolute',
+        display: 'none',
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        backgroundColor: 'rgba(60, 61, 63, 0.5)',
+        top: 0,
+        left: 0,
+        textAlign: 'center',
+        lineHeight: '72px',
+      },
+    };
+  }
+);