diff --git a/radicale/web/internal_data/ShareCollectionScene.js b/radicale/web/internal_data/ShareCollectionScene.js
index 9f39f7d5..34f11c63 100644
--- a/radicale/web/internal_data/ShareCollectionScene.js
+++ b/radicale/web/internal_data/ShareCollectionScene.js
@@ -44,7 +44,13 @@ export class ShareCollectionScene {
 
     /** @type {HTMLElement} */ let cancel_btn = html_scene.querySelector("[data-name=cancel]");
     /** @type {HTMLElement} */ let share_by_token_btn = html_scene.querySelector(
-      "[data-name=sharebytoken]"
+      "button[data-name=sharebytoken]"
+    );
+    /** @type {HTMLElement} */ let share_by_token_div = html_scene.querySelector(
+      "div[data-name=sharebytoken]"
+    );
+    /** @type {HTMLElement} */ let share_by_map_div = html_scene.querySelector(
+      "div[data-name=sharebymap]"
     );
 
         /** @type {HTMLElement} */ let title = html_scene.querySelector("[data-name=title]");
@@ -70,12 +76,27 @@ export class ShareCollectionScene {
       scene_index = scene_stack.length - 1;
       html_scene.classList.remove("hidden");
       cancel_btn.onclick = oncancel;
-      if (server_features["sharing"]["PermittedCreateCollectionByToken"]) {
-        share_by_token_btn.classList.remove("hidden");
-        share_by_token_btn.onclick = onsharebytoken;
+      if (server_features.sharing && server_features.sharing.PermittedCreateCollectionByToken) {
+        if (share_by_token_btn) {
+          share_by_token_btn.classList.remove("hidden");
+          share_by_token_btn.onclick = onsharebytoken;
+        }
       } else {
-        share_by_token_btn.classList.add("hidden");
+        if (share_by_token_btn) share_by_token_btn.classList.add("hidden");
       }
+
+      if (server_features.sharing && server_features.sharing.FeatureEnabledCollectionByToken) {
+        if (share_by_token_div) share_by_token_div.classList.remove("hidden");
+      } else {
+        if (share_by_token_div) share_by_token_div.classList.add("hidden");
+      }
+
+      if (server_features.sharing && server_features.sharing.FeatureEnabledCollectionByMap) {
+        if (share_by_map_div) share_by_map_div.classList.remove("hidden");
+      } else {
+        if (share_by_map_div) share_by_map_div.classList.add("hidden");
+      }
+
       title.textContent = collection.displayname || collection.href;
       update_share_list(user, password, collection);
     };
@@ -186,11 +207,9 @@ function add_share_rows(user, password, collection, shares) {
 }
 
 export function maybe_enable_sharing_options() {
-  if (!server_features["sharing"]) return;
-  let map_is_enabled =
-    server_features["sharing"]["FeatureEnabledCollectionByMap"] || false;
-  let token_is_enabled =
-    server_features["sharing"]["FeatureEnabledCollectionByToken"] || false;
+  if (!server_features.sharing) return;
+  let map_is_enabled = server_features.sharing.FeatureEnabledCollectionByMap || false;
+  let token_is_enabled = server_features.sharing.FeatureEnabledCollectionByToken || false;
   if (map_is_enabled || token_is_enabled) {
     let share_options = document.querySelectorAll("[data-name=shareoption]");
     for (let i = 0; i < share_options.length; i++) {
diff --git a/radicale/web/internal_data/api.js b/radicale/web/internal_data/api.js
index 6ba48466..878ec396 100644
--- a/radicale/web/internal_data/api.js
+++ b/radicale/web/internal_data/api.js
@@ -21,7 +21,22 @@
 import { COLOR_RE, ROOT_PATH, SERVER } from "./constants.js";
 import { Collection, CollectionType } from "./models.js";
 import { escape_xml } from "./utils.js";
+/**
+ * @typedef {Object} SharingFeatures
+ * @property {number} [ApiVersion]
+ * @property {string} [Status]
+ * @property {boolean} [FeatureEnabledCollectionByMap]
+ * @property {boolean} [PermittedCreateCollectionByMap]
+ * @property {boolean} [FeatureEnabledCollectionByToken]
+ * @property {boolean} [PermittedCreateCollectionByToken]
+ */
 
+/**
+ * @typedef {Object} ServerFeatures
+ * @property {SharingFeatures} [sharing]
+ */
+
+/** @type {ServerFeatures} */
 export let server_features = {};
 
 /**
diff --git a/radicale/web/internal_data/index.html b/radicale/web/internal_data/index.html
index 96d93bd2..0d1c6c82 100644
--- a/radicale/web/internal_data/index.html
+++ b/radicale/web/internal_data/index.html
@@ -147,42 +147,45 @@
       <h1>Sharing</h1>
       <p>Manage sharing for collection <span class="title" data-name="title">title</span>
       </p>
-      <h2>By Token</h2>
-      <table>
-        <tbody>
-          <tr data-name="sharetokenrowtemplate" class="hidden">
-            <td>
-              <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg"
-                  class="small_icon" alt="Delete"></button>
-            </td>
-            <td><img src="css/icons/edit.svg" class="med_icon" alt="RW" data-name="rw" /><img src="css/icons/eye.svg"
-                class="med_icon" alt="RO" data-name="ro" /></td>
-            <td><input type="text" data-name="pathortoken" value="" readonly=""
-                onfocus="this.setSelectionRange(0, 99999);" class="inline"></td>
-          </tr>
-          <tr>
-            <td></td>
-            <td></td>
-            <td><button type="button" class="blue inline" data-name="sharebytoken"><img src="css/icons/new.svg"
-                  class="small_icon" alt="New Share by Token"></button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <h2>By Map</h2>
-      <table>
-        <tbody>
-          <tr data-name="sharemaprowtemplate" class="hidden">
-            <td>
-              <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg"
-                  class="small_icon" alt="Delete"></button>
-            </td>
-            <td><img src="css/icons/edit.svg" class="med_icon" alt="RW" data-name="rw" /><img src="css/icons/eye.svg"
-                class="med_icon" alt="RO" data-name="ro" /></td>
-            <td><input type="text" data-name="pathortoken" value="" readonly=""
-                onfocus="this.setSelectionRange(0, 99999);" class="inline"></td>
-          </tr>
-          <!--
+      <div data-name="sharebytoken">
+        <h2>By Token</h2>
+        <table>
+          <tbody>
+            <tr data-name="sharetokenrowtemplate" class="hidden">
+              <td>
+                <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg"
+                    class="small_icon" alt="Delete"></button>
+              </td>
+              <td><img src="css/icons/edit.svg" class="med_icon" alt="RW" data-name="rw" /><img src="css/icons/eye.svg"
+                  class="med_icon" alt="RO" data-name="ro" /></td>
+              <td><input type="text" data-name="pathortoken" value="" readonly=""
+                  onfocus="this.setSelectionRange(0, 99999);" class="inline"></td>
+            </tr>
+            <tr>
+              <td></td>
+              <td></td>
+              <td><button type="button" class="blue inline" data-name="sharebytoken"><img src="css/icons/new.svg"
+                    class="small_icon" alt="New Share by Token"></button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div data-name="sharebymap">
+        <h2>By Map</h2>
+        <table>
+          <tbody>
+            <tr data-name="sharemaprowtemplate" class="hidden">
+              <td>
+                <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg"
+                    class="small_icon" alt="Delete"></button>
+              </td>
+              <td><img src="css/icons/edit.svg" class="med_icon" alt="RW" data-name="rw" /><img src="css/icons/eye.svg"
+                  class="med_icon" alt="RO" data-name="ro" /></td>
+              <td><input type="text" data-name="pathortoken" value="" readonly=""
+                  onfocus="this.setSelectionRange(0, 99999);" class="inline"></td>
+            </tr>
+            <!--
           <tr>
             <td></td>
             <td></td>
@@ -192,8 +195,9 @@
             </td>
           </tr>
           -->
-        </tbody>
-      </table>
+          </tbody>
+        </table>
+      </div>
       <form>
         <button type="button" class="green" data-name="cancel">Close</button>
       </form>