diff --git a/app/app.js b/app/app.js
index 93ab05c..4d07510 100644
--- a/app/app.js
+++ b/app/app.js
@@ -179,7 +179,8 @@ const start = async function () {
   };
 
   const hocuspocusServer = HocuspocusServer.configure({
-    port: 8081,
+    address: Config.crdt_backend_host,
+    port: Config.crdt_backend_port,
     debounce: 3000,
     onStoreDocument(data) {
       storeDocument(data);
diff --git a/app/controller/data/data.controller.js b/app/controller/data/data.controller.js
index be050ff..01221a6 100644
--- a/app/controller/data/data.controller.js
+++ b/app/controller/data/data.controller.js
@@ -8,7 +8,7 @@ const data = function (req, res) {
     title: 'MicroDraw::Data',
     loginMethods : req.appConfig.loginMethods || [],
     params: JSON.stringify(req.query),
-    user : req.user
+    loggedUser: JSON.stringify(req.user || null)
   });
 };
 
diff --git a/app/controller/project/project.controller.js b/app/controller/project/project.controller.js
index 0cc5db9..0387f55 100644
--- a/app/controller/project/project.controller.js
+++ b/app/controller/project/project.controller.js
@@ -32,6 +32,13 @@ const project = async function (req, res) {
 
         return;
       }
+      if (embedProject) {
+        const refererURL = new URL(req.headers.referer);
+        const disallowedDomains = req.user.authorizedHostsForEmbedding.split('\n') || [];
+        if (disallowedDomains.include(refererURL.host)) {
+          return res.status(403).send('Not authorized to embed this project');
+        }
+      }
       const context = {
         projectShortname: json.shortname,
         projectInfo: JSON.stringify(json),
diff --git a/app/controller/user/index.js b/app/controller/user/index.js
index 24b26a4..a4cfa09 100644
--- a/app/controller/user/index.js
+++ b/app/controller/user/index.js
@@ -8,6 +8,8 @@ router.get('/json/:userName', controller.validator, controller.api_user);
 router.get('/json/:userName/files', controller.validator, controller.api_userFiles);
 router.get('/json/:userName/atlas', controller.validator, controller.api_userAtlas);
 router.get('/json/:userName/projects', controller.validator, controller.api_userProjects);
+router.post('/delete', controller.deleteProfile);
+router.post('/savePreferences', controller.savePreferences);
 router.get('/:userName', controller.validator, controller.user);
 
 module.exports = router;
diff --git a/app/controller/user/user.controller.js b/app/controller/user/user.controller.js
index cdeb0db..8ad79f0 100644
--- a/app/controller/user/user.controller.js
+++ b/app/controller/user/user.controller.js
@@ -8,18 +8,21 @@ const { AccessControlService } = require('neuroweblab');
 
 const validator = function (req, res, next) {
   // UserName can be an ip address (for anonymous users)
+  const username = req.params.userName;
 
-  /*
-    req.checkParams('userName', 'incorrect user name').isAlphanumeric();
-    var errors = req.validationErrors();
-    console.log(errors);
-    if (errors) {
-        res.send(errors).status(403).end();
-    } else {
-        return next();
-    }
-    */
-  next();
+  req.appConfig.db.queryUser({username})
+    .then((result) => {
+      if (!result) {
+        res.status(404);
+      }
+      if (result.disabled) {
+        res.status(404);
+
+        return res.render('disabledUser');
+      }
+      next();
+
+    });
 };
 
 const user = function (req, res) {
@@ -187,6 +190,37 @@ const api_userProjects = function (req, res) {
   });
 };
 
+const deleteProfile = async function(req, res) {
+  const loggedUser = req.user;
+  if (!loggedUser) {
+    res.status(401);
+  }
+  try {
+    const userInfo = await req.appConfig.db.queryUser({username: loggedUser.username});
+    await req.appConfig.db.updateUser({ ...userInfo, disabled: true });
+    res.redirect('/logout');
+  } catch(err) {
+    console.log(err);
+    res.status(500);
+  }
+};
+
+const savePreferences = async function(req, res) {
+  const loggedUser = req.user;
+  if (!loggedUser) {
+    res.status(401);
+  }
+  try {
+    const userInfo = await req.appConfig.db.queryUser({username: loggedUser.username});
+    await req.appConfig.db.updateUser({ ...userInfo, authorizedHostsForEmbedding: req.body.authorizedHosts });
+    res.redirect(`/user/${req.user.username}`);
+  } catch(err) {
+    console.log(err);
+    res.status(500);
+  }
+
+};
+
 module.exports = {
   validator,
   api_user,
@@ -194,5 +228,7 @@ module.exports = {
   api_userFiles,
   api_userAtlas,
   api_userProjects,
+  deleteProfile,
+  savePreferences,
   user
 };
diff --git a/app/views/data.mustache b/app/views/data.mustache
index 988e34f..985232b 100755
--- a/app/views/data.mustache
+++ b/app/views/data.mustache
@@ -3,57 +3,20 @@
 
 <head>
     {{> partials/header }}
-    <link rel="stylesheet" href="css/data-style.css" type="text/css" />
+    <link rel="stylesheet" href="/css/ui.css" type="text/css" />
+    <link rel="stylesheet" href="/css/data-style.css" type="text/css" />
+    <link rel="stylesheet" href="/css/project-style.css" type="text/css" />
     <link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
 </head>
 
+<script>
+    const loggedUser={{{loggedUser}}};
+</script>
 <body>
 
-<!-- Header (fixed height) -->
-<div id="header">
-    {{> partials/menu }}
-
-    <!-- Small left-top logo -->
-    <div style="display:inline-block;margin:10px">
-        <a href='/' style="text-decoration:none">
-            <img style='height:28px;vertical-align:middle' src='/img/microdraw-white.svg'/>
-        </a><span id="fontLogo">
-            <a href='/' style="font-family: Roboto, sans-serif; font-size: 28px; font-weight:100; text-decoration:none;vertical-align:middle">MicroDraw</a>
-        </span>
-    </div>
-</div>
-
-<div id="content" style="width:100%;height:calc( 100% - 48px );background:white;position:relative"></div>
+<div id="app"></div>
 
-<script>
-function loadScript (path, testScriptPresent) {
-  return new Promise((resolve, reject) => {
-      if(testScriptPresent && testScriptPresent()) {
-          resolve();
-      }
-      const s = document.createElement("script");
-      s.src = path;
-      s.onload=resolve;
-      s.onerror=reject;
-      document.body.appendChild(s);
-  });
-}
-
-async function attach () {
-  const res = await fetch("/microdraw");
-  const txt = await res.text();
-  const parser = new DOMParser();
-  const elem = parser.parseFromString(txt, 'text/html').documentElement;
-  const shadow = document.querySelector("#content").attachShadow({mode: 'open'});
-  shadow.appendChild(elem);
-  loadScript("/js/microdraw.js")
-  .then(() => {
-      Microdraw.init(shadow);
-  });
-}
-attach();
-</script>
+<script src="/js/pages/data-page.js"></script>
 
 </body>
-
 </html>
diff --git a/app/views/disabledUser.mustache b/app/views/disabledUser.mustache
new file mode 100644
index 0000000..0b36982
--- /dev/null
+++ b/app/views/disabledUser.mustache
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    {{> partials/header }}
+    <link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
+</head>
+
+<body>
+
+<!-- Header (fixed height) -->
+<div id="header">
+    <!-- Small left-top logo -->
+    <div style="display:inline-block;margin:10px">
+        <a href='/' style="text-decoration:none">
+            <img style='height:28px;vertical-align:middle' src='/img/microdraw-white.svg'/>
+        </a><span id="fontLogo">
+            <a href='/' style="font-family: Roboto, sans-serif; font-size: 28px; font-weight:100; text-decoration:none;vertical-align:middle">MicroDraw</a>
+        </span>
+    </div>
+</div>
+
+This user has removed his account. <a href="/">Back to the homepage</a>
+
+
+</body>
+
+</html>
diff --git a/app/views/scripts/components/Data.vue b/app/views/scripts/components/Data.vue
new file mode 100644
index 0000000..a538af7
--- /dev/null
+++ b/app/views/scripts/components/Data.vue
@@ -0,0 +1,96 @@
+<template>
+    <Header v-if="!fullscreen">
+      <span class="title">MicroDraw</span>
+    </Header>
+    <main :class="{ fullscreen }">
+      <OntologySelector
+        :ontology="ontology"
+        :open="displayOntology"
+        @on-close="displayOntology = false"
+        @label-click="handleOntologyLabelClick"
+      />
+      <Editor :title="title" :class="{reduced: !displayChat && !displayScript}" toolsMinHeight="300px">
+        <template v-slot:tools>
+          <Tools />
+        </template>
+        <template v-slot:content>
+          <div id="microdraw" style="width: 100%; height: 100%"></div>
+        </template>
+      </Editor>
+    </main>
+  </template>
+    
+  <script setup>
+    import useVisualization from "../store/visualization";
+    import Tools from "./Tools.vue";
+    import {
+      Header,
+      Editor,
+      OntologySelector,
+    } from "nwl-components";
+    import * as Vue from "vue";
+  
+    const { baseURL } = Vue.inject('config');
+      
+    const {
+      title,
+      displayChat,
+      displayScript,
+      displayOntology,
+      currentLabel,
+      ontology,
+      currentSlice,
+      currentFile,
+      totalSlices,
+      fullscreen,
+      init: initVisualization,
+    } = useVisualization();
+    
+    const handleResize = () => {
+      Microdraw.resizeAnnotationOverlay();
+    };
+  
+    const toggleFullScreen = () => {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+      } else if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
+    }
+  
+    Vue.watch(fullscreen, toggleFullScreen);
+  
+    const _findSelectedRegion = () => {
+      const {currentImage, region} = Microdraw;
+      const {Regions: regions} = Microdraw.ImageInfo[currentImage];
+      return regions.findIndex(reg => reg.uid === region.uid);
+    };
+  
+    const handleOntologyLabelClick = (index) => {
+      Microdraw.currentLabelIndex = index;
+      displayOntology.value = false;
+      currentLabel.value = index;
+      const regionIndex = _findSelectedRegion();
+      if(regionIndex != null) {
+        const { region } = Microdraw;
+        if (region != null) {
+          Microdraw.changeRegionName(region, Microdraw.ontology.labels[index].name);
+        }
+      }
+    }
+    
+    Vue.onMounted(async () => {
+      await initVisualization();
+      window.addEventListener('resize', handleResize);
+    });
+</script>
+<style scoped>
+.area {
+height: calc(100vh - 82px);
+width: 100vw;
+}
+.fullscreen .area {
+    height: 100vh;
+}
+
+</style>
\ No newline at end of file
diff --git a/app/views/scripts/components/UserPage.vue b/app/views/scripts/components/UserPage.vue
index 3fc3734..e29a6fd 100644
--- a/app/views/scripts/components/UserPage.vue
+++ b/app/views/scripts/components/UserPage.vue
@@ -28,25 +28,25 @@
                   <td>{{project.files.list.length}}</td>
                   <td>{{project.collaborators.list.length}}</td>
                   <td>
-                    <a :href="`/user/${project.owner}`"> {{project.owner}} </a>
+                    <a :href="`/user/${project.owner}`"> {{project.owner}}</a>
                   </td>
                   <td>{{new Date(project.created).toLocaleDateString()}}</td>
                 </tr>
               </tbody>
             </Table>
           </Tab>
-          <Tab title="Settings">
-            <form class="embed-preferences">
+          <Tab title="Settings" v-if="displaySettings">
+            <form class="embed-preferences" action="/user/savePreferences" method="POST">
               <h3>Embed</h3>
               <p>Limit embedding of my contents to the following hosts (1 item by line):</p>
-              <textarea placeholder="google.com" name="allowedHosts"></textarea>
+              <textarea placeholder="example.com" name="authorizedHosts">{{ user.authorizedHostsForEmbedding ?? '' }}</textarea>
               <div class="action-buttons">
                 <button className="push-button" type="submit">Save</button>
             </div>
             </form>
             <h3>Account</h3>
             <dialog ref="removeAccountDialog" class="removeAccountDialog">
-              <form action="#" method="POST">
+              <form action="/user/delete" method="POST">
                 <p>
                   Are you sure you want to delete your account?
                 </p>
@@ -63,7 +63,7 @@
     </UserPage>
   </template>
   <script setup>
-  import { ref, onMounted } from "vue";
+  import { ref, onMounted, computed } from "vue";
   import { UserPage, Tabs, Tab, Table } from "nwl-components";
   const projects = ref([]);
   const removeAccountDialog = ref(null);
@@ -78,6 +78,8 @@
         projects.value.push(...res.list);
     }
   };
+
+  const displaySettings = computed(() => loggedUser && props.user.username === loggedUser.username);
  
   onMounted(() => {
     fetchProjects();
@@ -140,5 +142,7 @@
 .embed-preferences textarea {
   height: 100px;
   width: 100%;
+  margin-bottom: 10px;
+  color: black;
 }
 </style>
\ No newline at end of file
diff --git a/app/views/scripts/src/data-page.js b/app/views/scripts/src/data-page.js
new file mode 100644
index 0000000..4be9131
--- /dev/null
+++ b/app/views/scripts/src/data-page.js
@@ -0,0 +1,13 @@
+/* global loggedUser */
+
+import 'nwl-components/dist/style.css';
+import Data from '../components/Data.vue';
+import config from './nwl-components-config';
+import { createApp } from 'vue';
+
+
+const app = createApp(Data);
+app.provide('config', config);
+app.provide('user', loggedUser);
+
+app.mount('#app');
diff --git a/package-lock.json b/package-lock.json
index 1431aec..0062bd5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "multer": "^1.4.5-lts.1",
         "mustache-express": "latest",
         "neuroweblab": "github:neuroanatomy/neuroweblab",
-        "nwl-components": "1.3.0",
+        "nwl-components": "1.3.3",
         "passport": "^0.4.0",
         "passport-github": "latest",
         "request": "^2.88.0",
@@ -5620,9 +5620,9 @@
       }
     },
     "node_modules/nwl-components": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/nwl-components/-/nwl-components-1.3.0.tgz",
-      "integrity": "sha512-awH5MT3Cipe4LrLT9X4aPRgEnahj1SVoPNxId2jhzhFPsY8cqM+vFb60WVKATe7KLA3NriHznm9EIAEb01FevA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/nwl-components/-/nwl-components-1.3.3.tgz",
+      "integrity": "sha512-OOfUCda/TMjDTbWUSTGjLjedn5Ufh0VuKbX8HwYQtqq4r+ZtVy7CmVwTswbfSrmrJqfG9oAD1biJ8hFGn2wpNg==",
       "dependencies": {
         "dompurify": "^2.3.6",
         "jdenticon": "^3.1.1",
diff --git a/package.json b/package.json
index 27c417b..834b9ba 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "multer": "^1.4.5-lts.1",
     "mustache-express": "latest",
     "neuroweblab": "github:neuroanatomy/neuroweblab",
-    "nwl-components": "1.3.0",
+    "nwl-components": "1.3.3",
     "passport": "^0.4.0",
     "passport-github": "latest",
     "request": "^2.88.0",
diff --git a/webpack.pages.config.js b/webpack.pages.config.js
index ffe5b29..6bd9dad 100644
--- a/webpack.pages.config.js
+++ b/webpack.pages.config.js
@@ -10,7 +10,8 @@ module.exports = () => ({
     'project-settings-page':
       './app/views/scripts/src/project-settings-page.js',
     'user-page': './app/views/scripts/src/user-page.js',
-    'embed-page': './app/views/scripts/src/embed-page.js'
+    'embed-page': './app/views/scripts/src/embed-page.js',
+    'data-page': './app/views/scripts/src/data-page.js'
   },
   devtool: 'eval-source-map',
   plugins: [