diff --git a/packages/client/src/store/FilesSettingsStore.js b/packages/client/src/store/FilesSettingsStore.js
index c94e99d200..2490902092 100644
--- a/packages/client/src/store/FilesSettingsStore.js
+++ b/packages/client/src/store/FilesSettingsStore.js
@@ -216,8 +216,9 @@ class FilesSettingsStore {
   };
 
   setDisplayFileExtension = (data) => {
-    this.setFilesSetting("displayFileExtension", data ? true : false);
-    console.log("need backend");
+    api.files
+      .enableDisplayFileExtension(data)
+      .then((res) => this.setFilesSetting("displayFileExtension", res));
   };
 
   setOpenEditorInSameTab = (data) => {
diff --git a/packages/shared/api/files/index.ts b/packages/shared/api/files/index.ts
index 0b47a253ca..55b2c1b9ce 100644
--- a/packages/shared/api/files/index.ts
+++ b/packages/shared/api/files/index.ts
@@ -931,6 +931,17 @@ export async function changeKeepNewFileName(val: boolean) {
   return res;
 }
 
+export async function enableDisplayFileExtension(val: boolean) {
+  const data = { set: val };
+  const res = (await request({
+    method: "put",
+    url: "files/displayfileextension",
+    data,
+  })) as boolean;
+
+  return res;
+}
+
 export async function changeOpenEditorInSameTab(val: boolean) {
   const data = { set: val };
   const res = (await request({