diff --git a/leshan-bsserver-demo/webapp/src/components/bsconfig/ServerInput.vue b/leshan-bsserver-demo/webapp/src/components/bsconfig/ServerInput.vue
index 255ad8a595..736abe1c9c 100644
--- a/leshan-bsserver-demo/webapp/src/components/bsconfig/ServerInput.vue
+++ b/leshan-bsserver-demo/webapp/src/components/bsconfig/ServerInput.vue
@@ -27,9 +27,9 @@
       class="examplePatch"
     ></v-text-field>
     <security-input
-      :mode.sync="server.mode"
+      :mode.sync="server.security.mode"
       @update:mode="$emit('input', server)"
-      :details.sync="server.details"
+      :details.sync="server.security.details"
       @update:details="$emit('input', server)"
       :defaultrpk="defaultrpk"
       :defaultx509="defaultx509"
@@ -46,13 +46,13 @@ export default {
     defaultNoSecValue: String,
     defaultSecureValue: String,
     defaultrpk: {
-      default: function() {
+      default: function () {
         return {};
       },
       type: Object,
     },
     defaultx509: {
-      default: function() {
+      default: function () {
         return {};
       },
       type: Object,
@@ -60,13 +60,13 @@ export default {
   },
   data() {
     return {
-      server: { mode: "no_sec" }, // internal server Config
+      server: { security: { mode: "no_sec" } }, // internal server Config
     };
   },
   watch: {
     value(v) {
       if (!v) {
-        this.server = { mode: "no_sec" };
+        this.server = { security: { mode: "no_sec" } };
       } else {
         this.server = v;
       }
diff --git a/leshan-bsserver-demo/webapp/src/components/wizard/BootstrapServerStep.vue b/leshan-bsserver-demo/webapp/src/components/wizard/BootstrapServerStep.vue
index 4a9a85076f..384dad99d1 100644
--- a/leshan-bsserver-demo/webapp/src/components/wizard/BootstrapServerStep.vue
+++ b/leshan-bsserver-demo/webapp/src/components/wizard/BootstrapServerStep.vue
@@ -15,12 +15,10 @@
     <v-card-text class="pb-0">
       <p>
         This information will be used to add a
-        <strong>LWM2M Bootstrap Server</strong> to your LWM2M Client during the bootstrap
-        Session by writing 1 instance for object <code>/0</code>.
-      </p>
-      <p>
-        By default no LWM2M Bootstrap server is added.
+        <strong>LWM2M Bootstrap Server</strong> to your LWM2M Client during the
+        bootstrap Session by writing 1 instance for object <code>/0</code>.
       </p>
+      <p>By default no LWM2M Bootstrap server is added.</p>
     </v-card-text>
     <v-form
       ref="form"
@@ -60,14 +58,14 @@ export default {
   data() {
     return {
       addServer: false,
-      internalServer: { mode: "no_sec" }, // internal Bootstrap server Config
+      internalServer: { security: { mode: "no_sec" } }, // internal Bootstrap server Config
     };
   },
   watch: {
     value(v) {
       if (!v) {
         this.addServer = false;
-        this.internalServer = { mode: "no_sec" };
+        this.internalServer = { security: { mode: "no_sec" } };
       } else {
         this.addServer = true;
         this.internalServer = v;
diff --git a/leshan-bsserver-demo/webapp/src/components/wizard/ClientConfigDialog.vue b/leshan-bsserver-demo/webapp/src/components/wizard/ClientConfigDialog.vue
index 807a345441..c924a95a51 100644
--- a/leshan-bsserver-demo/webapp/src/components/wizard/ClientConfigDialog.vue
+++ b/leshan-bsserver-demo/webapp/src/components/wizard/ClientConfigDialog.vue
@@ -115,9 +115,7 @@
         >
           Previous
         </v-btn>
-        <v-btn text @click="close">
-          Cancel
-        </v-btn>
+        <v-btn text @click="close"> Cancel </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -193,7 +191,7 @@ export default {
         this.config = {
           endpoint: null,
           security: null,
-          dm: { mode: "no_sec" },
+          dm: { security: { mode: "no_sec" } },
           bs: null,
           toDelete: ["/0", "/1"],
           autoIdForSecurityObject: false,
@@ -217,7 +215,7 @@ export default {
       if (res.dm) {
         if (!res.dm.url) {
           res.dm.url =
-            res.dm.mode == "no_sec"
+            res.dm.security.mode == "no_sec"
               ? this.defval.dm.url.nosec
               : this.defval.dm.url.sec;
         }
@@ -226,24 +224,24 @@ export default {
       if (res.bs) {
         if (!res.bs.url) {
           res.bs.url =
-            res.bs.mode == "no_sec"
+            res.bs.security.mode == "no_sec"
               ? this.defval.bs.url.nosec
               : this.defval.bs.url.sec;
         }
 
         // apply default rpk value for bs server
-        if (res.bs.mode == "rpk") {
+        if (res.bs.security.mode == "rpk") {
           for (const key in this.defaultrpk) {
-            if (!res.bs.details[key]) {
-              res.bs.details[key] = this.defaultrpk[key];
+            if (!res.bs.security.details[key]) {
+              res.bs.security.details[key] = this.defaultrpk[key];
             }
           }
         }
         // apply default x509 value for bs server
-        if (res.bs.mode == "x509") {
+        if (res.bs.security.mode == "x509") {
           for (const key in this.defaultx509) {
-            if (!res.bs.details[key]) {
-              res.bs.details[key] = this.defaultx509[key];
+            if (!res.bs.security.details[key]) {
+              res.bs.security.details[key] = this.defaultx509[key];
             }
           }
         }
diff --git a/leshan-bsserver-demo/webapp/src/components/wizard/ServerStep.vue b/leshan-bsserver-demo/webapp/src/components/wizard/ServerStep.vue
index b037aa220e..6b9f197f6a 100644
--- a/leshan-bsserver-demo/webapp/src/components/wizard/ServerStep.vue
+++ b/leshan-bsserver-demo/webapp/src/components/wizard/ServerStep.vue
@@ -58,14 +58,14 @@ export default {
   data() {
     return {
       addServer: true,
-      internalServer: { mode: "no_sec" }, // internal server Config
+      internalServer: { security: { mode: "no_sec" } }, // internal server Config
     };
   },
   watch: {
     value(v) {
       if (!v) {
         this.addServer = false;
-        this.internalServer = { mode: "no_sec" };
+        this.internalServer = { security: { mode: "no_sec" } };
       } else {
         this.addServer = true;
         this.internalServer = v;
diff --git a/leshan-bsserver-demo/webapp/src/views/Bootstrap.vue b/leshan-bsserver-demo/webapp/src/views/Bootstrap.vue
index 21c32e9c1f..f00745a165 100644
--- a/leshan-bsserver-demo/webapp/src/views/Bootstrap.vue
+++ b/leshan-bsserver-demo/webapp/src/views/Bootstrap.vue
@@ -186,23 +186,23 @@ export default {
 
     formatData(c) {
       let s = {};
-      s.securityMode = c.mode.toUpperCase();
+      s.securityMode = c.security.mode.toUpperCase();
       s.uri = c.url;
-      switch (c.mode) {
+      switch (c.security.mode) {
         case "psk":
-          s.publicKeyOrId = fromAscii(c.details.identity);
-          s.secretKey = fromHex(c.details.key);
+          s.publicKeyOrId = fromAscii(c.security.details.identity);
+          s.secretKey = fromHex(c.security.details.key);
           break;
         case "rpk":
-          s.publicKeyOrId = fromHex(c.details.client_pub_key);
-          s.secretKey = fromHex(c.details.client_pri_key);
-          s.serverPublicKey = fromHex(c.details.server_pub_key);
+          s.publicKeyOrId = fromHex(c.security.details.client_pub_key);
+          s.secretKey = fromHex(c.security.details.client_pri_key);
+          s.serverPublicKey = fromHex(c.security.details.server_pub_key);
           break;
         case "x509":
-          s.publicKeyOrId = fromHex(c.details.client_certificate);
-          s.secretKey = fromHex(c.details.client_pri_key);
-          s.serverPublicKey = fromHex(c.details.server_certificate);
-          s.certificateUsage = c.details.certificate_usage;
+          s.publicKeyOrId = fromHex(c.security.details.client_certificate);
+          s.secretKey = fromHex(c.security.details.client_pri_key);
+          s.serverPublicKey = fromHex(c.security.details.server_certificate);
+          s.certificateUsage = c.security.details.certificate_usage;
           break;
       }
       return s;