diff --git a/extensions/share/manifest.json b/extensions/share/manifest.json
index 3c6a841..6052931 100644
--- a/extensions/share/manifest.json
+++ b/extensions/share/manifest.json
@@ -27,10 +27,21 @@
               "type": "string",
               "default": "rwl"
             },
+            "mode": {
+              "title": "The mode",
+              "type": "string",
+              "enumValues": [
+                {"const": "HTML", "title": "HTML"},
+                {"const": "HTTP", "title": "HTTP"},
+                {"const": "WebDAV", "title": "WebDAV"}
+              ],
+              "default": "HTML"
+            },
             "useWebDAV": {
               "title": "Use WebDAV",
               "type": "boolean",
-              "default": false
+              "default": false,
+              "deprecated": true
             }
           }
         }
diff --git a/extensions/share/share.js b/extensions/share/share.js
new file mode 100644
index 0000000..fcaad77
--- /dev/null
+++ b/extensions/share/share.js
@@ -0,0 +1,12 @@
+define(['./share.xml', 'engine/configuration/extensions/share/'], function(shareTemplate, shareConfig) {
+
+  var shareVue = new Vue({
+    template: shareTemplate,
+    data: {
+      shares: shareConfig.value.shares || []
+    }
+  });
+
+  addPageComponent(shareVue, 'share');
+
+});
diff --git a/extensions/share/share.lua b/extensions/share/share.lua
index 678f307..5fad782 100644
--- a/extensions/share/share.lua
+++ b/extensions/share/share.lua
@@ -2,10 +2,16 @@ local extension = ...
 
 local logger = extension:getLogger()
 local FileHttpHandler = require('jls.net.http.handler.FileHttpHandler')
+local HtmlFileHttpHandler = require('jls.net.http.handler.HtmlFileHttpHandler')
 local ProxyHttpHandler = require('jls.net.http.handler.ProxyHttpHandler')
 local WebDavHttpHandler = require('jls.net.http.handler.WebDavHttpHandler')
+
 local utils = require('lha.utils')
 
+local webBaseAddons = extension:require('web-base.addons', true)
+
+webBaseAddons.register(extension)
+
 local function isValidPath(name)
   if not name or name == '' or name == 'engine' or name == 'things' then
     logger:warn('Invalid share name "%s"', name)
@@ -25,9 +31,11 @@ extension:subscribeEvent('startup', function()
         logger:warn('Invalid share directory "%s"', dir)
       end
       if isValidPath(share.name) then
-        logger:info('Share directory "%s" on "%s"', dir, share.name)
+        logger:info('Share directory "%s" on "/%s"', dir, share.name)
         local path = '/'..share.name..'/(.*)'
-        if share.useWebDAV then
+        if share.mode == 'HTML' then
+          extension:addContext(path, HtmlFileHttpHandler:new(dir, share.permissions))
+        elseif share.mode == 'WebDAV' then
           extension:addContext(path, WebDavHttpHandler:new(dir, share.permissions))
         else
           extension:addContext(path, FileHttpHandler:new(dir, share.permissions))
diff --git a/extensions/share/share.xml b/extensions/share/share.xml
new file mode 100644
index 0000000..4250507
--- /dev/null
+++ b/extensions/share/share.xml
@@ -0,0 +1,16 @@
+<app-page id="share" title="Share">
+  <template slot="bar-right">
+    <button v-on:click="app.toPage('extension', 'share')" title="Configuration"><i class="fas fa-cog"></i></button>
+  </template>
+  <article>
+    <div class="tile-container">
+      <template v-for="share in shares">
+        <div class="tile">
+          <div class="bar">
+            <a :href="share.name + '/'">{{ share.name }}</span>
+          </div>
+        </div>
+      </template>
+    </div>
+  </article>
+</app-page>
\ No newline at end of file