diff --git a/src/client/web/src/client/files.ts b/src/client/web/src/client/files.ts
index 8f5019d..1054b90 100644
--- a/src/client/web/src/client/files.ts
+++ b/src/client/web/src/client/files.ts
@@ -6,6 +6,7 @@ import {
   ListResp,
   ListUploadingsResp,
   ListSharingsResp,
+  ListSharingIDsResp,
 } from "./";
 
 const filePathQuery = "fp";
@@ -200,6 +201,13 @@ export class FilesClient extends BaseClient {
     });
   };
 
+  listSharingIDs = (): Promise<Response<ListSharingIDsResp>> => {
+    return this.do({
+      method: "get",
+      url: `${this.url}/v1/fs/sharings/ids`,
+    });
+  };
+
   generateHash = (filePath: string): Promise<Response> => {
     return this.do({
       method: "post",
diff --git a/src/client/web/src/client/files_mock.ts b/src/client/web/src/client/files_mock.ts
index 90a95f4..b6630da 100644
--- a/src/client/web/src/client/files_mock.ts
+++ b/src/client/web/src/client/files_mock.ts
@@ -4,6 +4,7 @@ import {
   ListResp,
   ListUploadingsResp,
   ListSharingsResp,
+  ListSharingIDsResp,
 } from "./";
 
 export interface FilesClientResps {
@@ -24,11 +25,16 @@ export interface FilesClientResps {
   addSharingMockResp?: Response;
   deleteSharingMockResp?: Response;
   listSharingsMockResp?: Response<ListSharingsResp>;
+  listSharingIDsMockResp?: Response<ListSharingIDsResp>;
   isSharingMockResp?: Response;
   generateHashMockResp?: Response;
   downloadMockResp: Response;
 }
 
+const sharingIDs = new Map<string, string>();
+sharingIDs.set("/admin/f1", "e123456");
+sharingIDs.set("/admin/f1", "f123456");
+
 export const resps = {
   createMockResp: { status: 200, statusText: "", data: {} },
   deleteMockResp: { status: 200, statusText: "", data: {} },
@@ -131,6 +137,13 @@ export const resps = {
       sharingDirs: ["mock_sharingfolder1", "mock_sharingfolder2"],
     },
   },
+  listSharingIDsMockResp: {
+    status: 200,
+    statusText: "",
+    data: {
+      IDs: sharingIDs,
+    },
+  },
   isSharingMockResp: { status: 200, statusText: "", data: {} },
   generateHashMockResp: { status: 200, statusText: "", data: {} },
   downloadMockResp: {
@@ -218,6 +231,9 @@ export class MockFilesClient {
   listSharings = (): Promise<Response<ListSharingsResp>> => {
     return this.wrapPromise(this.resps.listSharingsMockResp);
   };
+  listSharingIDs = (): Promise<Response<ListSharingIDsResp>> => {
+    return this.wrapPromise(this.resps.listSharingIDsMockResp);
+  };
 
   isSharing = (dirPath: string): Promise<Response> => {
     return this.wrapPromise(this.resps.isSharingMockResp);
diff --git a/src/client/web/src/client/index.ts b/src/client/web/src/client/index.ts
index 4724827..66b70f9 100644
--- a/src/client/web/src/client/index.ts
+++ b/src/client/web/src/client/index.ts
@@ -80,6 +80,10 @@ export interface ListSharingsResp {
   sharingDirs: string[];
 }
 
+export interface ListSharingIDsResp {
+  IDs: Map<string, string>;
+}
+
 export interface ClientConfigMsg {
   clientCfg: ClientConfig;
 }
@@ -137,6 +141,7 @@ export interface IFilesClient {
   deleteSharing: (dirPath: string) => Promise<Response>;
   isSharing: (dirPath: string) => Promise<Response>;
   listSharings: () => Promise<Response<ListSharingsResp>>;
+  listSharingIDs: () => Promise<Response<ListSharingIDsResp>>;
   generateHash: (filePath: string) => Promise<Response>;
   download: (url: string) => Promise<Response>;
 }
diff --git a/src/client/web/src/components/__test__/pane_login.test.tsx b/src/client/web/src/components/__test__/pane_login.test.tsx
index de8ea02..7a15d26 100644
--- a/src/client/web/src/components/__test__/pane_login.test.tsx
+++ b/src/client/web/src/components/__test__/pane_login.test.tsx
@@ -47,7 +47,7 @@ describe("Login", () => {
     expect(coreState.filesInfo.dirPath.join("/")).toEqual("mock_home/files");
     expect(coreState.filesInfo.isSharing).toEqual(true);
     expect(coreState.sharingsInfo.sharings).toEqual(
-      List(filesResps.listSharingsMockResp.data.sharingDirs)
+      Map(filesResps.listSharingIDsMockResp.data.IDs.entries())
     );
     expect(coreState.uploadingsInfo.uploadings).toEqual(
       List<UploadEntry>(
diff --git a/src/client/web/src/components/__test__/panel_files.test.tsx b/src/client/web/src/components/__test__/panel_files.test.tsx
index 1db2793..58d5911 100644
--- a/src/client/web/src/components/__test__/panel_files.test.tsx
+++ b/src/client/web/src/components/__test__/panel_files.test.tsx
@@ -1,4 +1,5 @@
 import { List } from "immutable";
+import * as immutable from "immutable";
 
 import { initMockWorker } from "../../test/helpers";
 import { FilesPanel } from "../panel_files";
@@ -53,25 +54,27 @@ describe("FilesPanel", () => {
     const { filesPanel, usersCl, filesCl } = initFilesPanel();
 
     const newSharingPath = List(["newPos", "subFolder"]);
-    const sharingDirs = [newSharingPath.join("/")];
+    const sharingDir = newSharingPath.join("/");
+    const newSharings = immutable.Map<string, string>({
+      [sharingDir]: "f123456",
+    });
+    const newSharingsResp = new Map<string, string>();
+    newSharingsResp.set(sharingDir, "f123456");
 
     filesCl.setMock({
       ...filesResps,
-      listSharingsMockResp: {
+      listSharingIDsMockResp: {
         status: 200,
         statusText: "",
         data: {
-          sharingDirs: sharingDirs,
+          IDs: newSharingsResp,
         },
       },
     });
 
     await filesPanel.addSharing(newSharingPath);
 
-
     expect(updater().props.filesInfo.isSharing).toEqual(true);
-    expect(updater().props.sharingsInfo.sharings).toEqual(
-      List(sharingDirs)
-    );
+    expect(updater().props.sharingsInfo.sharings).toEqual(newSharings);
   });
 });
diff --git a/src/client/web/src/components/__test__/panel_sharings.test.tsx b/src/client/web/src/components/__test__/panel_sharings.test.tsx
index b147a5c..a384372 100644
--- a/src/client/web/src/components/__test__/panel_sharings.test.tsx
+++ b/src/client/web/src/components/__test__/panel_sharings.test.tsx
@@ -1,5 +1,5 @@
 import { mock, instance, verify, when, anything } from "ts-mockito";
-import { List } from "immutable";
+import { List, Map } from "immutable";
 
 import { SharingsPanel } from "../panel_sharings";
 import { initUploadMgr } from "../../worker/upload_mgr";
@@ -42,15 +42,19 @@ describe("SharingsPanel", () => {
   test("delete sharing", async () => {
     const { sharingsPanel, usersCl, filesCl } = initSharingsPanel();
 
-    const newSharings = ["mock_sharingfolder1", "mock_sharingfolder2"];
+    const newSharings = Map<string, string>({
+      "mock_sharingfolder1": "f123456",
+      "mock_sharingfolder2": "f123456",
+    })
 
     filesCl.setMock({
       ...filesResps,
-      listSharingsMockResp: {
+      listSharingIDsMockResp: {
         status: 200,
         statusText: "",
         data: {
-          sharingDirs: newSharings,
+          // it seems immutable map will be converted into built-in map automatically
+          IDs: newSharings, 
         },
       },
     });
@@ -59,6 +63,6 @@ describe("SharingsPanel", () => {
 
     // TODO: check delSharing's input
     expect(updater().props.filesInfo.isSharing).toEqual(false);
-    expect(updater().props.sharingsInfo.sharings).toEqual(List(newSharings));
+    expect(updater().props.sharingsInfo.sharings).toEqual(newSharings);
   });
 });
diff --git a/src/client/web/src/components/__test__/state_mgr.test.tsx b/src/client/web/src/components/__test__/state_mgr.test.tsx
index 23ed066..bc2d65e 100644
--- a/src/client/web/src/components/__test__/state_mgr.test.tsx
+++ b/src/client/web/src/components/__test__/state_mgr.test.tsx
@@ -44,7 +44,7 @@ describe("State Manager", () => {
     expect(coreState.filesInfo.dirPath.join("/")).toEqual("mock_home/files");
     expect(coreState.filesInfo.isSharing).toEqual(true);
     expect(coreState.sharingsInfo.sharings).toEqual(
-      List(filesResps.listSharingsMockResp.data.sharingDirs)
+      Map(filesResps.listSharingIDsMockResp.data.IDs.entries())
     );
     expect(coreState.uploadingsInfo.uploadings).toEqual(
       List<UploadEntry>(
@@ -180,7 +180,7 @@ describe("State Manager", () => {
     expect(coreState.filesInfo.items).toEqual(
       List(filesResps.listHomeMockResp.data.metadatas)
     );
-    expect(coreState.sharingsInfo.sharings).toEqual(List([]));
+    expect(coreState.sharingsInfo.sharings).toEqual(Map<string, string>());
     expect(coreState.uploadingsInfo.uploadings).toEqual(List<UploadEntry>([]));
 
     // login
diff --git a/src/client/web/src/components/__test__/topbar.test.tsx b/src/client/web/src/components/__test__/topbar.test.tsx
index bf427e1..3ba5754 100644
--- a/src/client/web/src/components/__test__/topbar.test.tsx
+++ b/src/client/web/src/components/__test__/topbar.test.tsx
@@ -93,7 +93,7 @@ describe("TopBar", () => {
     );
     expect(coreState.filesInfo.isSharing).toEqual(false);
     expect(coreState.filesInfo.items).toEqual(List());
-    expect(coreState.sharingsInfo.sharings).toEqual(List());
+    expect(coreState.sharingsInfo.sharings).toEqual(Map<string, string>());
     expect(coreState.uploadingsInfo.uploadings).toEqual(List<UploadEntry>());
 
     // login
diff --git a/src/client/web/src/components/core_state.ts b/src/client/web/src/components/core_state.ts
index 251e6c4..8e907e8 100644
--- a/src/client/web/src/components/core_state.ts
+++ b/src/client/web/src/components/core_state.ts
@@ -64,7 +64,7 @@ export function initState(): ICoreState {
       uploadFiles: List<File>([]),
     },
     sharingsInfo: {
-      sharings: List<string>([]),
+      sharings: Map<string, string>(),
     },
     admin: {
       users: Map<string, User>(),
diff --git a/src/client/web/src/components/panel_sharings.tsx b/src/client/web/src/components/panel_sharings.tsx
index c83e229..38679ec 100644
--- a/src/client/web/src/components/panel_sharings.tsx
+++ b/src/client/web/src/components/panel_sharings.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { List } from "immutable";
+import { List, Map } from "immutable";
 import QRCode from "react-qr-code";
 
 import { RiShareBoxLine } from "@react-icons/all-files/ri/RiShareBoxLine";
@@ -17,7 +17,7 @@ import { Container } from "./layout/container";
 import { Rows, Row } from "./layout/rows";
 
 export interface SharingsProps {
-  sharings: List<string>;
+  sharings: Map<string, string>;
 }
 
 export interface Props {
@@ -59,11 +59,12 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
     this.props.update(updater().updateSharingsInfo);
   };
 
-  makeRows = (sharings: List<string>): List<Row> => {
-    const sharingRows = sharings.map((dirPath: string) => {
+  makeRows = (sharings: Map<string, string>): List<Row> => {
+    const sharingRows = sharings.keySeq().map((dirPath: string) => {
+      const shareID = sharings.get(dirPath);
       const sharingURL = `${
         document.location.href.split("?")[0]
-      }?dir=${encodeURIComponent(dirPath)}`;
+      }?sh=${shareID}`;
 
       const row1 = (
         <div>
@@ -109,11 +110,16 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
       };
     });
 
-    return sharingRows;
+    return sharingRows.toList();
   };
 
   updateSharings = (sharings: List<Object>) => {
-    const newSharings = sharings as List<string>;
+    const newSharingDirs = sharings as List<string>;
+    let newSharings = Map<string, string>();
+    newSharingDirs.forEach((dirPath) => {
+      const shareID = this.props.sharingsInfo.sharings.get(dirPath);
+      newSharings = newSharings.set(dirPath, shareID);
+    });
     updater().updateSharings(newSharings);
     this.props.update(updater().updateSharingsInfo);
   };
diff --git a/src/client/web/src/components/state_updater.ts b/src/client/web/src/components/state_updater.ts
index b9511a1..9f946d3 100644
--- a/src/client/web/src/components/state_updater.ts
+++ b/src/client/web/src/components/state_updater.ts
@@ -123,12 +123,18 @@ export class Updater {
   };
 
   listSharings = async (): Promise<string> => {
-    const resp = await this.filesClient.listSharings();
-    this.props.sharingsInfo.sharings =
-      resp.status === 200
-        ? List<string>(resp.data.sharingDirs)
-        : this.props.sharingsInfo.sharings;
-    return resp.status === 200 ? "" : errServer;
+    const resp = await this.filesClient.listSharingIDs();
+    if (resp.status !== 200) {
+      return errServer;
+    }
+
+    // transform from built-in map to immutable map
+    let sharings = Map<string, string>();
+    resp.data.IDs.forEach((shareID: string, dirPath: string) => {
+      sharings = sharings.set(dirPath, shareID);
+    });
+    this.props.sharingsInfo.sharings = sharings;
+    return "";
   };
 
   // this function gets information from server and merge them with local information
@@ -271,7 +277,7 @@ export class Updater {
     this.props.uploadingsInfo.uploadings = uploadings;
   };
 
-  updateSharings = (sharings: List<string>) => {
+  updateSharings = (sharings: Map<string, string>) => {
     this.props.sharingsInfo.sharings = sharings;
   };