diff --git a/src-local/llo/new.js b/src-local/llo/new.js
index ffd5c7d..a546e43 100644
--- a/src-local/llo/new.js
+++ b/src-local/llo/new.js
@@ -111,8 +111,8 @@ app.get('/dockerservices', (req, res, next) => {
 				RES.filter    = req.query["filter"]
 				RES.type    	= req.query["type"]
 
-var showexec = `docker ps --format '{"ID":"{{ .ID }}", "Image": "{{ .Image }}", "Names":"{{ .Names }}", "Ports":"{{.Ports}}", "Networks":"{{.Networks}}", "Status":"{{.Status}}","RunningFor":"{{.RunningFor}}","CreatedAt":"{{.CreatedAt}}"}' | jq . -s `
-    exec(showexec, (err, stdout, stderr) => {
+  var showexec = `docker ps --format '{"ID":"{{ .ID }}", "Image": "{{ .Image }}", "Names":"{{ .Names }}", "Ports":"{{.Ports}}", "Networks":"{{.Networks}}", "Status":"{{.Status}}","RunningFor":"{{.RunningFor}}","CreatedAt":"{{.CreatedAt}}"}' | jq . -s `
+  exec(showexec, (err, stdout, stderr) => {
         if (err) {
               console.error(`exec error: ${err}`);
               return;
@@ -770,7 +770,7 @@ PersistentKeepalive = 30
             io.emit('message_out', n);
 
             var n = {}
-            n.data = 'sudo bash ./connect-server.sh'
+            n.data = 'bash ./connect-server.sh'
             io.emit('message_close', n);
     });
     socket.on('get-serverconfig', () => {
diff --git a/src/App.vue b/src/App.vue
index aadd536..ba24be2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -131,6 +131,7 @@
 
 					<b-collapse id="hybrid-hybrid" class="m-subm" accordion="m-sidebar" role="tabpanel">
 							<b-list-group-item variant="light"  name="Hybrid" class="ti-target m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('hybrid','hybrid_instances')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_instances') }" @click="hybrid('manage_service')"> Zone</b-list-group-item>
+							<b-list-group-item variant="light"  name="Deploy" class="ti-cloud-up m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('hybrid','hybrid_deploy')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_deploy') }" @click="hybrid('manage_deploy')"> Deploy</b-list-group-item>
 					</b-collapse>
 
 
@@ -190,6 +191,7 @@
 
 					<b-collapse id="hybrid-hybrid" class="m-subm" accordion="m-sidebar" role="tabpanel">
 							<b-list-group-item variant="light"  name="Hybrid" class="ti-target m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('hybrid','hybrid_instances')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_instances') }" @click="hybrid('manage_service')" title="Zones"> </b-list-group-item>
+							<b-list-group-item variant="light"  name="Deploy" class="ti-cloud-up m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('hybrid','hybrid_deploy')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_deploy') }" @click="hybrid('manage_deploy')"> </b-list-group-item>
 					</b-collapse>
 
 
@@ -272,6 +274,18 @@
 					<!-- ----------------------------------- -->
 					<!-- ------  hybrid private bootstrap       --------------- -->
 					<!-- ----------------------------------- -->
+
+					<!-- ----------------------------------- -->
+					<!-- ------  hybrid private deploy       --------------- -->
+					<!-- ----------------------------------- -->
+             <manage-deploy
+                  v-if="hybridmenou == 'manage_deploy'"
+                style="background-color: #f8f9fa"
+              >
+              </manage-deploy>
+					<!-- ----------------------------------- -->
+					<!-- ------  hybrid private deploy       --------------- -->
+					<!-- ----------------------------------- -->
 				</div>
 
     <!-- Page Content -->
@@ -298,6 +312,7 @@ import ConnectServer from "./components/myconnect-server.vue";
 import NetworkTable from "./components/mynetwork.vue";
 import ServicesTable from "./components/myservices.vue";
 import ManageServices from "./components/manageservices.vue";
+import ManageDeploy from "./components/managedeploy.vue";
 
 export default {
   name: 'app',
@@ -305,7 +320,8 @@ export default {
     NetworkTable,
     ServicesTable,
     ConnectServer,
-    ManageServices
+    ManageServices,
+    ManageDeploy
   },
   data() {
     return {
@@ -394,6 +410,7 @@ export default {
 		        this.$root.$emit('hybrid_refresh_availableservices')
           }else if(action == 'manage_service'){
 		        //this.$root.$emit('hybrid_manage_service')
+          }else if(action == 'manage_deploy'){
           }
     },
    isActive: function (menuItem) {
diff --git a/src/assets/img/hybrid-1.png b/src/assets/img/hybrid-1.png
new file mode 100644
index 0000000..3e90bd6
Binary files /dev/null and b/src/assets/img/hybrid-1.png differ
diff --git a/src/assets/img/hybrid.png b/src/assets/img/hybrid.png
new file mode 100644
index 0000000..78284fd
Binary files /dev/null and b/src/assets/img/hybrid.png differ
diff --git a/src/components/managedeploy.vue b/src/components/managedeploy.vue
new file mode 100644
index 0000000..340b28c
--- /dev/null
+++ b/src/components/managedeploy.vue
@@ -0,0 +1,55 @@
+<template>
+  <card class="card-user" style="max-height:100%">
+
+    <div class="row" >
+      <div class="col-6 order-first " >
+      <br>
+        <mydeploy-manage-bootstrap>
+
+        </mydeploy-manage-bootstrap>
+      </div>
+
+      <div class="col-6 order-last" >
+      <br>
+      
+        <mydeploy-manage-view>
+
+        </mydeploy-manage-view>
+        
+      </div>
+    </div>
+
+
+  </card>
+</template>
+<script>
+import {mapState, mapGetters, mapActions} from 'vuex'
+import card from '@/components/Card.vue'
+import MydeployManageBootstrap from "./manageservices/deploy-bootstrap.vue";
+import MydeployManageView from "./manageservices/view-service.vue";
+export default {
+   components: {
+     card,
+     MydeployManageBootstrap,
+     MydeployManageView
+   },
+   data () {
+      return {
+        loading: false,
+        consoleView: 'off',
+        productIndex: 1
+      }
+    },
+  mounted() {
+  },
+  beforeDestroy () {
+ },
+
+
+    created () {
+    }
+};
+</script>
+<style>
+</style>
+
diff --git a/src/components/manageservices.vue b/src/components/manageservices.vue
index c24a92a..3687863 100644
--- a/src/components/manageservices.vue
+++ b/src/components/manageservices.vue
@@ -11,9 +11,11 @@
 
       <div class="col-5 order-last" >
       <br>
+      <!--
         <adhoc-view>
 
         </adhoc-view>
+        -->
       </div>
     </div>
 
diff --git a/src/components/manageservices/deploy-bootstrap.vue b/src/components/manageservices/deploy-bootstrap.vue
new file mode 100644
index 0000000..4a987e9
--- /dev/null
+++ b/src/components/manageservices/deploy-bootstrap.vue
@@ -0,0 +1,710 @@
+<template>
+  <card class="card-user" style="max-height:100%">
+      <div class="author">
+        <img class="avatar border-white" src="@/assets/img/docker.png" alt="...">
+      </div>
+
+      <b-container fluid class="bv-example-row">
+        <b-row>
+          <b-col cols="8">
+					<ValidationProvider 
+            ref="hybrid_image"
+						name="Image"
+						rules="required|alpha_num_image"   
+            v-slot="{ errors, ariaMsg, ariaInput,   valid, invalid }"
+				  >
+              <div class="input-group input-group-sm sm-3">
+                <input type="text" 
+                  class="form-control" 
+                  v-bind:class="{'is-valid': isDeployValid.image == 1, 'is-invalid': isDeployValid.image == 2}"
+						      name="Image"
+                  aria-label="Small" 
+									aria-describedby="inputGroup-sizing-sm"
+                  placeholder="Image"
+                  v-model="deploy.image"
+									v-on:keyup="isValid('image')"
+                  >
+									<div class="input-group-append">
+										<button 
+											class="ti-info btn btn-outline-secondary" 
+											round
+											type="button"
+											@click="showInfo('image')"
+									 >
+											</button>
+									</div>
+              </div>
+					<span class="hybrid-field-error">{{ errors[0] }}</span>
+					</ValidationProvider>
+          </b-col>
+
+          <b-col cols="4">
+					<ValidationProvider
+            ref="hybrid_stackname"
+						name="StackName"
+						rules="required|alpha_num_name"   
+            v-slot="{ errors, ariaMsg, ariaInput,   valid, invalid }"
+				  >
+              <div class="input-group input-group-sm sm-3">
+                <input type="text" 
+						      name="StackName"
+                  class="form-control" 
+                  v-bind:class="{'is-valid': isDeployValid.stackname == 1, 'is-invalid': isDeployValid.stackname == 2}"
+                  aria-label="Small" 
+									aria-describedby="inputGroup-sizing-sm"
+                  placeholder="StackName"
+                  v-model="deploy.stackname"
+									v-on:keyup="isValid('stackname')"
+                  >
+									<div class="input-group-append">
+										<button 
+											class="ti-info btn btn-outline-secondary" 
+											round
+											type="button"
+											@click="showInfo('stackname')">
+											</button>
+									</div>
+              </div>
+					<span class="hybrid-field-error">{{ errors[0] }}</span>
+					</ValidationProvider>
+          </b-col>
+
+        </b-row>
+        <b-row>
+          <b-col cols="8">
+					<ValidationProvider 
+            ref="hybrid_name"
+						name="Name"
+						rules="required|alpha_num_name"   
+            v-slot="{ errors, ariaMsg, ariaInput,   valid, invalid }"
+				  >
+              <div class="input-group input-group-sm sm-3">
+                <input type=HybridError 
+						      name="Name"
+                  class="form-control" 
+                  v-bind:class="{'is-valid': isDeployValid.name == 1, 'is-invalid': isDeployValid.name == 2}"
+                  aria-label="Small" aria-describedby="inputGroup-sizing-sm"
+                  placeholder="Name"
+                  v-model="deploy.name"
+									v-on:keyup="isValid('name')"
+                  >
+									<div class="input-group-append">
+										<button 
+											class="ti-info btn btn-outline-secondary" 
+											round
+											type="button"
+											@click="showInfo('name')">
+											</button>
+									</div>
+              </div>
+					<span class="hybrid-field-error">{{ errors[0] }}</span>
+					</ValidationProvider>
+          </b-col>
+          <b-col cols="4">
+					<ValidationProvider 
+            ref="hybrid_network"
+						name="Network"
+						rules="required|alpha_num_name"   
+            v-slot="{ errors, ariaMsg, ariaInput,   valid, invalid }"
+				  >
+              <div class="input-group input-group-sm sm-3">
+                <input type="text" 
+									name="Network"
+                  class="form-control" 
+                  v-bind:class="{'is-valid': isDeployValid.network == 1, 'is-invalid': isDeployValid.network == 2}"
+                  aria-label="Small" aria-describedby="inputGroup-sizing-sm"
+                  placeholder="Network Name"
+                  v-model="deploy.network"
+									v-on:keyup="isValid('network')"
+                  >
+									<div class="input-group-append">
+										<button 
+											class="ti-info btn btn-outline-secondary" 
+											round
+											type="button"
+											@click="showInfo('network')">
+											</button>
+									</div>
+              </div>
+					<span class="hybrid-field-error">{{ errors[0] }}</span>
+					</ValidationProvider>
+          </b-col>
+        </b-row>
+
+        <b-row>
+          <b-col cols="4">
+					<ValidationProvider 
+						ref="hybrid_cpu"
+						name="Cpu"
+						rules="required|alpha_num_cpu"   
+            v-slot="{ errors, ariaMsg, ariaInput,   valid, invalid }"
+				  >
+              <div class="input-group input-group-sm sm-3">
+                <input type="text" 
+						      name="Cpu"
+                  class="form-control" 
+                  v-bind:class="{'is-valid': isDeployValid.cpu == 1, 'is-invalid': isDeployValid.cpu == 2}"
+                  aria-label="Small" aria-describedby="inputGroup-sizing-sm"
+                  placeholder="Limit CPU e.g. 0.50"
+                  v-model="deploy.cpu"
+									v-on:keyup="isValid('cpu')"
+                  >
+									<div class="input-group-append">
+										<button 
+											class="ti-info btn btn-outline-secondary" 
+											round
+											type="button"
+											@click="showInfo('cpu')"
+                   >
+											</button>
+									</div>
+              </div>
+					<span class="hybrid-field-error">{{ errors[0] }}</span>
+					</ValidationProvider>
+          </b-col>
+          <b-col cols="4">
+					<ValidationProvider 
+						ref="hybrid_memory"
+						name="Memory"
+						rules="required|alpha_num_memory"   
+            v-slot="{ errors, ariaMsg, ariaInput,   valid, invalid }"
+				  >
+              <div class="input-group input-group-sm sm-3">
+                <input type="text" 
+						      name="Memory"
+                  class="form-control" 
+                  v-bind:class="{'is-valid': isDeployValid.memory == 1, 'is-invalid': isDeployValid.memory == 2}"
+                  aria-label="Small" aria-describedby="inputGroup-sizing-sm"
+                  placeholder="Limit Memory e.g. 500"
+                  v-model="deploy.memory"
+									v-on:keyup="isValid('memory')"
+                  >
+									<div class="input-group-append">
+										<button 
+											class="ti-info btn btn-outline-secondary" 
+											round
+											type="button"
+											@click="showInfo('memory')">
+											</button>
+									</div>
+              </div>
+					<span class="hybrid-field-error">{{ errors[0] }}</span>
+					</ValidationProvider>
+          </b-col>
+          <b-col cols="4">
+					<ValidationProvider 
+						ref="hybrid_networkport"
+						name="Networkport"
+						rules="mybetween:1,65535"
+            v-slot="{ errors, ariaMsg, ariaInput,   valid, invalid }"
+				  >
+              <div class="input-group input-group-sm sm-3">
+                <input type="text" 
+						      name="Networkport"
+                  class="form-control" 
+                  v-bind:class="{'is-valid': isDeployValid.networkport == 1, 'is-invalid': isDeployValid.networkport == 2}"
+                  aria-label="Small" aria-describedby="inputGroup-sizing-sm"
+                  placeholder="Net Port (inside the container)"
+                  v-model="deploy.networkport"
+									v-on:keyup="isValid('networkport')"
+                  >
+									<div class="input-group-append">
+										<button 
+											class="ti-info btn btn-outline-secondary" 
+											round
+											type="button"
+											@click="showInfo('networkport')">
+											</button>
+									</div>
+              </div>
+					<span class="hybrid-field-error">{{ errors[0] }}</span>
+					</ValidationProvider>
+          </b-col>
+        </b-row>
+
+
+				<!-- --------------------------------------------------------- -->
+				<!-- -------- lab startdate ----------------------------------- -->
+				<!-- --------------------------------------------------------- -->
+        <b-row>
+          <b-col cols="6">
+							<div class="input-group input-group-sm mb-3">
+								<div class="input-group-prepend">
+									<button class="btn btn-outline-secondary"
+										type="button"
+										>Start date </button>
+								</div>
+										 <date-picker
+												type="date"
+												autocomplete="off"
+												v-model="deploy.startdate"
+												format="YYYY-MM-DD"
+												lang="en"
+											>
+											</date-picker>
+								</div>
+          </b-col>
+					<!-- --------------------------------------------------------- -->
+					<!-- -------- lab starttime ----------------------------------- -->
+					<!-- --------------------------------------------------------- -->
+          <b-col cols="6">
+							<div class="input-group input-group-sm mb-3">
+								<div class="input-group-prepend">
+									<button class="btn btn-outline-secondary"
+										type="button"
+										>Start time</button>
+								</div>
+										 <date-picker
+												type="time"
+												:format="'HH:mm'"
+												v-model="deploy.starttime"
+												show-hour
+												show-minute
+												:time-picker-options="timePickerOptions"
+												lang="en"
+											>
+											</date-picker>
+								</div>
+          </b-col>
+        </b-row>
+
+				<!-- --------------------------------------------------------- -->
+				<!-- -------- lab enddate ----------------------------------- -->
+				<!-- --------------------------------------------------------- -->
+        <b-row>
+          <b-col cols="6">
+							<div class="input-group input-group-sm mb-3">
+								<div class="input-group-prepend">
+									<button class="btn btn-outline-secondary"
+										type="button"
+										>End date </button>
+								</div>
+										 <date-picker
+												type="date"
+												autocomplete="off"
+												v-model="deploy.enddate"
+												format="YYYY-MM-DD"
+												lang="en"
+											>
+											</date-picker>
+								</div>
+          </b-col>
+					<!-- --------------------------------------------------------- -->
+					<!-- -------- lab endtime ----------------------------------- -->
+					<!-- --------------------------------------------------------- -->
+          <b-col cols="6">
+							<div class="input-group input-group-sm mb-3">
+								<div class="input-group-prepend">
+									<button class="btn btn-outline-secondary"
+										type="button"
+										>End time</button>
+								</div>
+										 <date-picker
+												type="time"
+												:format="'HH:mm'"
+												v-model="deploy.endtime"
+												show-hour
+												show-minute
+												:time-picker-options="timePickerOptions"
+												lang="en"
+											>
+											</date-picker>
+								</div>
+          </b-col>
+        </b-row>
+
+
+
+        <b-row>
+          <b-col cols="6">
+              <div class="input-group input-group-sm sm-3">
+                <div class="input-group-prepend">
+										<button
+												class="ti-cloud-up btn btn-outline-success"
+												round
+												type="button"
+												title="Deploy"
+  											@click="add_deploy()"
+											> Deploy
+											</button>
+                </div>
+              </div>
+          </b-col>
+
+          <b-col cols="2">
+          </b-col>
+
+          <b-col cols="4">
+								<div class="custom-control custom-switch">
+									<input type="checkbox" class="custom-control-input" id="customStack"
+												v-model="deploy.usersjoin"
+     										value="true"
+      									unchecked-value="false"
+									>
+									<label class="custom-control-label" for="customStack">Users can join the lab instance</label>
+								</div>
+          </b-col>
+        </b-row>
+      </b-container>
+  </card>
+</template>
+<script>
+import store from '@/store/index'
+import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
+import Vue from 'vue'
+import DatePicker from 'vue2-datepicker'
+import card from '@/components/Card.vue'
+import {ApiConfig} from "@/config/index";
+import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';
+import { required, alpha_num, between} from 'vee-validate/dist/rules';
+import 'vue2-datepicker/index.css';
+
+// No message specified.
+extend('alpha_num', alpha_num);
+
+extend('mybetween', between);
+extend('mybetween', {
+  message: 'The {_field_} field must be a number: 1-65535'
+});
+
+//extend('alpha_num_image', alpha_num);
+extend('alpha_num_image', value => {
+ var regex = new RegExp(/^[A-Za-z0-9\:\.\-\_\/]+$/, 'i'); 
+	if(regex.test(value)){
+    return true;
+	}
+  return 'The {_field_} field may contain alphabetic characters, numbers, colons, hyphens, slashes, dots and underscores'
+});
+
+extend('alpha_num_name', value => {
+ var regex = new RegExp(/^[A-Za-z0-9]+$/, 'i'); 
+	if(regex.test(value)){
+    return true;
+	}
+  return 'The {_field_} field may contain alphabetic characters and numbers'
+});
+
+extend('alpha_num_cpu', value => {
+ //var regex = new RegExp(/^(?:\d{1})?(?:\.\d{1})?$/); 
+ var regex = new RegExp(/^(?!0\d)\d+(?:\.\d{1})?$/); 
+	if(regex.test(value)){
+    return true;
+	}
+  return 'The {_field_} field may contain numbers and dots e.g 0.5'
+});
+
+
+extend('alpha_num_memory', value => {
+ var regex = new RegExp(/^[0-9]+$/, 'i'); 
+	if(regex.test(value)){
+    return true;
+	}
+  return 'The {_field_} field may contain numbers e.g 500'
+});
+
+// Override the default message.
+extend('required', {
+  ...required,
+  message: 'This field is required'
+});
+export default {
+  components: {
+    DatePicker,
+    ValidationProvider,
+    card
+	},
+  props: {
+  },
+  data() {
+   return{
+	  isHybridError: false,
+	  isHybridSuccess: false,
+    token: '',
+		timePickerOptions:{
+				start: '00:00',
+				step: '00:30',
+				end: '23:30'
+		},
+    deploy:{
+  		"usersjoin":true
+	    },
+    isDeployValid:{
+  		"image":3,
+  		"name":3,
+  		"stackname":3,
+  		"network":3,
+  		"networkport":3,
+  		"cpu":3,
+  		"memory":3
+	    },
+    isDeployError:{
+	    }
+		}
+  },
+	mounted() {
+	},
+	created() {
+    var url_string = window.location.href
+    var url = new URL(url_string);
+    this.token = url.searchParams.get("token");
+    console.log("token "+ this.token);
+
+	},
+    beforeDestroy () {
+ },
+  computed: {
+	},
+
+  methods: {
+/*
+ async isValidate (event) {
+      this.$nextTick(() => {
+         //await this.isValid(event)
+         console.log("keywords value: " + this.deploy.image);
+      });
+  },
+*/
+  	async add_deploy(){
+      
+			for (var key in this.deploy) {
+					if (this.deploy.hasOwnProperty(key)) {
+       			this.isValid(this.deploy.hasOwnProperty(key))
+					}
+			}
+
+       /* 
+					var log = await store.dispatch("pipelineLLO/adddeploy",{
+						token:this.token,
+						deploy:this.deploy
+					})
+		      this.$root.$emit('hybrid_refresh_bootstrap_view')
+			*/
+		},
+  	async showInfo(action){
+			if(action == 'image' ){
+          var info=`<h5>To start, we need to have a <b>docker image </b> <br>
+<br> We have built some. You can find it here: Menu "Images"</h5>
+<h6>More Info here: <a href="https://en.wikipedia.org/wiki/Docker_(software)" target="new">Wikipedia</a> , <a href="https://www.docker.com/resources/what-container" target="new">Docker</a> </h6>
+<br>
+<br>
+ The field may contain alphabetic characters, numbers, colons, hyphens, slashes, dots and underscores
+`
+		  }else if(action == 'stackname'){
+          var info=`<h5>To start, we need to have a <b>Stack Name </b> <br>
+<br> This will bring up all the services, volumes, networks and everything else <br> in an isolated environment.
+</h6>
+<br>
+<br>
+ The field may contain alphabetic characters and numbers
+`
+		  }else if(action == 'network'){
+          var info=`<h5>To start, we need to have a <b>Network </b> <br>
+<br> This will bring up all the services, volumes, networks and everything else <br> in an isolated network environment.
+<br>
+<br>
+Services running inside any of this networks containers have access (not limited by any firewall) to all other services.
+<br>
+</h5>
+<br>
+<br>
+ The field may contain alphabetic characters and numbers
+
+`
+		  }else if(action == 'networkport'){
+          var info=`<h5><b>Network Port </b></h5>
+<br> 
+<h5>
+By default, when you create a container, <b>it does not publish any of its ports to the outside world. </b>
+<br>
+To make a port available to Services which are not connected to the Stack network, we use this port. 
+</h5>
+<br>
+<h5>
+<u>
+To make a service available we have to know the port number used by these service inside the container.
+</u>
+<br>
+<b>Please insert that here.</b>
+</h5>
+<br>
+<br>
+(The port for outside connections is automatically generated and you dont have to worry about it!)
+<br>
+<br>
+ The field may contain numbers
+`
+		  }else if(action == 'cpu'){
+          var info=`<h5>To start, we need to have a <b>CPU </b> Limit <br>
+<br>  Limit the specific CPUs or cores a container can use
+</h6>
+<br>
+<br>
+The field may contain numbers and dots e.g 0.5
+`
+		  }else if(action == 'memory'){
+          var info=`<h5>To start, we need to have a <b>Memory </b> Limit 
+<br> <br>  Limit the specific Memoty a container can use <br> 
+e.g 200
+<br> 
+(MB)
+</h6>
+<br>
+<br>
+<h6>
+<i>
+It is important <b>not</b> to allow a running container to consume too much of the host machine’s memory.
+</i>
+</h6>
+<br>
+<br>
+ The field may contain numbers
+`
+		  }else if(action == 'name'){
+          var info=`<h5>To start, we need to have a <b>Name </b><br> 
+This name is only for your own use. The system completely disregards it!
+</h5>
+<br>
+<br>
+ The field may contain alphabetic characters and numbers
+`
+			}
+          this.$swal({
+            type: 'Info',
+            title: 'Info!',
+            icon:'info',
+            html: info,
+            showCloseButton: true,
+            showLoaderOnConfirm: false,
+            allowOutsideClick: false,
+            cancelButtonText: 'No, cancel!',
+            showCancelButton: false,
+            showLoaderOnConfirm: false,
+            reverseButtons: true,
+            focusCancel: true,
+            confirmButtonText: 'Ok!'
+          })
+		},
+  	async isValid(f){
+
+      // ------------
+      // validate
+      // ------------
+     if(f == 'image'){
+       	console.log(this.deploy.image)
+				var field    	= await this.$refs.hybrid_image.validate();
+        if(field.valid == true){
+        	this.isDeployValid.image = 1
+				}else{
+        	this.isDeployValid.image = 2
+				}
+       	//console.log(JSON.stringify(f_image))
+       	//console.log(this.isDeployValid.image)
+     }else if(f == 'stackname'){
+			  var field = await this.$refs.hybrid_stackname.validate();
+        if(field.valid == true){
+        	this.isDeployValid.stackname = 1
+				}else{
+        	this.isDeployValid.stackname = 2
+				}
+     }else if(f == 'network'){
+			  var field = await this.$refs.hybrid_network.validate();
+        if(field.valid == true){
+        	this.isDeployValid.network = 1
+				}else{
+        	this.isDeployValid.network = 2
+				}
+     }else if(f == 'networkport'){
+			  var field = await this.$refs.hybrid_networkport.validate();
+        if(field.valid == true){
+        	this.isDeployValid.networkport = 1
+				}else{
+        	this.isDeployValid.networkport = 2
+				}
+     }else if(f == 'cpu'){
+			  var field = await this.$refs.hybrid_cpu.validate();
+        if(field.valid == true){
+        	this.isDeployValid.cpu = 1
+				}else{
+        	this.isDeployValid.cpu = 2
+				}
+     }else if(f == 'memory'){
+			  var field = await this.$refs.hybrid_memory.validate();
+        if(field.valid == true){
+        	this.isDeployValid.memory = 1
+				}else{
+        	this.isDeployValid.memory = 2
+				}
+     }else if(f == 'name'){
+			  var field = await this.$refs.hybrid_name.validate();
+        if(field.valid == true){
+        	this.isDeployValid.name = 1
+				}else{
+        	this.isDeployValid.name = 2
+				}
+     }
+   }
+
+  },
+
+
+  actions: {
+
+
+	}
+
+};
+</script>
+<style>
+.flex-fixed-width-item {
+    flex: 0 0 100px;
+		}
+.modalinfo {
+  z-index: 10000000 !important;
+	position:fixed;
+}
+/* a container with flex-direction column */
+
+.vue-notifyjs.notifications{
+  .alert{
+   z-index: 100;
+  }
+  .list-move {
+    transition: transform 0.3s, opacity 0.4s;
+  }
+  .list-item {
+    display: inline-block;
+    margin-right: 10px;
+
+  }
+  .list-enter-active {
+    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
+  }
+  .list-leave-active {
+    transition: transform 1s ease-out, opacity 0.4s ease-out;
+  }
+
+  .list-enter {
+    opacity: 0;
+    transform: scale(1.1);
+
+  }
+  .list-leave-to {
+    opacity: 0;
+    transform: scale(1.2, 0.7);
+  }
+}
+
+pre {
+  //background-color: rgb(255, 247, 229);
+  background-color: #eff0f1;
+	  border: 1px solid blue;
+		  //white-space: pre-line;
+			}
+.hybrid-field-error {
+  color: red;
+}
+
+.hybrid-error {
+  color: red;
+}
+</style>
diff --git a/src/components/manageservices/manage-service.vue b/src/components/manageservices/manage-service.vue
index 008529f..def2d64 100644
--- a/src/components/manageservices/manage-service.vue
+++ b/src/components/manageservices/manage-service.vue
@@ -466,6 +466,12 @@ export default {
       alert("You clicked edit on"+ JSON.stringify(rowData));
 		},
     async onAction (action, data, index) {
+        var log1 = await store.dispatch("pipelineLLO/swarmlabhybridjoin",{
+                token:this.token,
+                action:'join'
+              })
+         console.log(JSON.stringify(log1))
+
 			if(action == 'edit' ){
         this.nodeadmin = true    
         this.nodeadminupdate = true    
diff --git a/src/components/manageservices/view-service.vue b/src/components/manageservices/view-service.vue
new file mode 100644
index 0000000..4a15457
--- /dev/null
+++ b/src/components/manageservices/view-service.vue
@@ -0,0 +1,600 @@
+<template>
+  <card class="card-user" style="max-height:100%">
+      <div class="author">
+        <img class="avatar border-white" src="@/assets/img/hybrid-1.png" alt="...">
+      </div>
+
+
+  <v-wait for="myRunInstancetutor">
+    <template slot="waiting">
+      <div>
+        <img src="@/assets/loading.gif" />
+        Enter Lab_room...
+      </div>
+    </template>
+  </v-wait>
+
+      <b-container fluid>
+
+        <div class="row" >
+          <div class="col-3 text-info" >
+              <div class="input-group-prepend">
+                <button
+                        class="btn btn-outline-danger"
+                        round
+                        type="button"
+                        @click="onActionHybrid('stack-stop')"
+                        v-if="hybridshowdata.bootstrapstackname"
+                >
+                  Remove Stack
+                </button>
+              </div>
+          </div>
+          <div class="col-3 text-info" >
+              <div class="input-group-prepend">
+                <button
+                        class="btn btn-outline-warning"
+                        round
+                        type="button"
+                        @click="onActionHybrid('stack-restart')"
+                        v-if="hybridshowdata.bootstrapstackname"
+                >
+                  Restart Stack
+                </button>
+              </div>
+          </div>
+          <div class="col-3 text-info" >
+              <div class="input-group-prepend">
+                <button
+                        class="btn btn-outline-danger"
+                        round
+                        type="button"
+                        @click="onActionHybrid('service-stop')"
+                        v-if="hybridshowdata.bootstrapnameid && hybridshowdata.status"
+                >
+                  Remove Service
+                </button>
+              </div>
+          </div>
+          <div class="col-3 text-info" >
+              <div class="input-group-prepend">
+                <button
+                        class="btn btn-outline-warning"
+                        round
+                        type="button"
+                        @click="onActionHybrid('service-restart')"
+                        v-if="hybridshowdata.bootstrapnameid && hybridshowdata.status"
+                >
+                  Restart Service
+                </button>
+              </div>
+          </div>
+        </div> <!-- row -->
+
+        <div class="row" 
+             v-if="hybridshowdata.bootstrapstackname"
+        >
+          <div class="col-2 text-info" 
+          >
+          Instances
+          </div>
+          <div class="col-3 text-secondary" >
+          {{ hybridshowdata.Replicas }}
+          </div>
+          <div class="col-2 text-info" >
+          Image          
+          </div>
+          <div class="col-4 text-secondary" >
+          {{ hybridshowdata.bootstrapimage }}
+          </div>
+        </div> <!-- row -->
+        <div class="row" 
+             v-if="hybridshowdata.bootstrapstackname"
+        >
+          <div class="col-2 text-info" >
+          Names
+          </div>
+          <div class="col-3 text-secondary" >
+          {{ hybridshowdata.bootstrapname }}
+          </div>
+          <div class="col-2 text-info" >
+          EndAt
+          </div>
+          <div class="col-4 text-secondary" >
+          {{ hybridshowdata.bootstrapdateend }}
+          </div>
+        </div> <!-- row -->
+        <div class="row" 
+             v-if="hybridshowdata.bootstrapstackname"
+        >
+          <div class="col-2 text-info" >
+          Networks
+          </div>
+          <div class="col-3 text-secondary" >
+          {{ hybridshowdata.bootstrapnetwork }}
+          </div>
+          <div class="col-2 text-info" >
+          BeginAt
+          </div>
+          <div class="col-4 text-secondary" >
+          {{ hybridshowdata.bootstrapdatebegin }}
+          </div>
+        </div> <!-- row -->
+        <div class="row" 
+             v-if="hybridshowdata.bootstrapstackname"
+        >
+          <div class="col-2 text-info" >
+          Status
+          </div>
+          <div class="col-3 text-secondary" 
+            v-if="hybridshowdata.status"
+          >
+          <span class="ti-check text-success"> </span>
+          </div>
+          <div class="col-3 text-secondary" 
+            v-else
+          >
+          <span> </span>
+          </div>
+          <div class="col-2 text-info" >
+          Ports
+          </div>
+          <div class="col-4 text-secondary" 
+            v-if="hybridshowdata.ports!=0"
+          >
+          {{ hybridshowdata.ports }}
+          </div>
+          <div class="col-4 text-secondary" 
+            v-else
+          >
+          
+          </div>
+        </div> <!-- row -->
+      </b-container>
+   <b-container fluid class="bv-example-row">
+
+		<div class="input-group input-group-sm sm-3">
+					
+			<input type="text" 
+				class="form-control" 
+				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
+				placeholder="Search By StackName"
+				v-model="searchFor"
+				@keyup.enter="setFilter"
+				>
+					
+			<div class="input-group-append">
+				<button 
+					class="btn btn-outline-primary" 
+					round
+					type="button"
+					@click="setFilter">
+					Go</button>
+			</div>
+					
+			<div class="input-group-append">
+				<button class="btn btn-outline-secondary" 
+					round
+					type="button"
+					@click="resetFilter">
+					Reset</button>
+			</div>
+    </div>
+		<div class="white h-100 flex-fixed-width-item"
+			<vuetable 
+				ref="vuetable"
+				:key="vuetablekey"
+				:api-url='apiurl'
+				:api-mode="true"
+				:http-options="httpOptions"
+				:fields="fields"
+				:item-actions="itemActions"
+				:sort-order="sortOrder"
+				:show-sort-icons="true"
+				:multi-sort="multiSort"
+				:per-page="perpage"
+				pagination-path="links.pagination"
+				:pagination-component="paginationComponent"
+				:append-params="moreParams"
+				wrapper-class="vuetable-wrapper"
+				loading-class="loading"
+				detail-row-id="id"
+				@vuetable:pagination-data="onPaginationData"
+				@vuetable:load-success="loadsuccess"
+				:css="css.table"
+				 >
+
+        <div slot="actions" slot-scope="props">
+            <button
+              v-if="actionrowindex == props.rowIndex"
+              class="ti-more-alt btn btn-secondary btn-sm"
+              round
+              @click="onAction('run-more', props.rowData, props.rowIndex)">
+            </button>
+            <button
+              v-else
+              class="ti-more btn btn-outline-secondary btn-sm"
+              round
+              @click="onAction('run-more', props.rowData, props.rowIndex)">
+            </button>
+				</div>
+			</vuetable>
+			<div class="vuetable-pagination ui basic segment grid">
+				<vuetable-pagination-info 
+					ref="paginationInfo"      
+					:css="css.paginationInfo"
+      		>
+				</vuetable-pagination-info>
+				<vuetable-pagination 
+					:css="css.pagination"
+					ref="pagination"
+        	@vuetable-pagination:change-page="onChangePage"
+      		>
+				</vuetable-pagination>
+			</div>
+    </div>
+   </b-container>
+  </card>
+</template>
+<script>
+import store from '@/store/index'
+import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
+import Vue from 'vue'
+import {Vuetable, VuetablePaginationDropdown} from 'vuetable-2'
+import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'
+import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
+import CssConfig from 'vuetable-2/src/components/VuetableCssConfig.js'
+import card from '@/components/Card.vue'
+import {ApiConfig} from "@/config/index";
+export default {
+  components: {
+      card,
+	    Vuetable,
+			VuetablePagination,
+			VuetablePaginationInfo,
+			VuetablePaginationDropdown
+	},
+  props: {
+  },
+  data() {
+   return{
+    actionrowindex:'',
+	  playbookInfo: {},
+    hybridshowdata:{},
+    token: '',
+	  playbook: {
+			'title':'',
+			'name':'',
+			'description':''
+		},
+			container:{
+				name:'',
+				view:0
+			},
+			pipeline:{},
+ 		selected: '',
+    options: [
+      { text: 'Packages', value: 'packages' },
+      { text: 'Images', value: 'images' },
+      { text: 'Scripts', value: 'scripts' }
+    ],
+		showModal: false,
+		visibility: [],
+	 	active:false,
+		vuetablekey:0,
+		fielddata:{},
+		fields: [ 
+          {
+        name: 'bootstrapname',
+        title: '<span class="orange"></span>Name',
+        sortField: 'bootstrapname',
+        visible:true,
+        dataClass: 'text-left text-wrap text-break break-word',
+        width: '15%'
+      },
+      {
+        name: 'bootstrapstackname',
+        title: '<span class="orange"></span>StackName',
+        sortField: 'bootstrapstackname',
+        visible:true,
+        dataClass: 'left aligned w-25',
+        width: '15%'
+
+      },
+      {
+        name: '_id',
+        title: '<span class="orange"></span>mongo',
+        visible:false
+      },
+      {
+        name: 'bootstrapdatebegin5',
+        title: '<span class="orange"></span>Begin',
+        sortField: 'bootstrapdatebegin5',
+        titleClass: 'center aligned',
+        visible:true,
+        width: '10%'
+      },
+      {
+        name: 'bootstrapusersjoin',
+        title: '<span class="orange"></span>Join',
+        sortField: 'bootstrapusersjoin',
+        titleClass: 'center aligned',
+        visible:true,
+        width: '5%',
+        callback: function(value) {
+          if (value == true) {
+              var v = '<span class="ti-check text-success"> </span>'
+              return v
+          }else{
+              var v = '<span> </span>'
+              return v
+          }
+        }
+      },
+      {
+        name: 'ID',
+        sortField: 'ID',
+        titleClass: 'center aligned',
+        dataClass: 'left aligned w-25',
+        visible:false,
+        width: '15%'
+      },
+      {
+          name: '__slot:actions',   // <----
+          title: 'Actions',
+          titleClass: 'center aligned',
+          dataClass: 'center aligned',
+          width: '5%'
+        }
+		],
+		apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridbootstrapservices",
+		//apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices",
+		css: CssConfig,
+    perpage: 5,
+    searchFor: '',
+		sortOrder: [{
+				field: 'pipelinename',
+				direction: 'asc'
+		}],
+    multiSort: true,
+    paginationComponent: 'vuetable-pagination',
+		itemActions: [
+				{ name: 'view-item', label: '', icon: 'glyphicon glyphicon-zoom-in', class: 'btn btn-info', extra: {'title': 'View', 'data-toggle':"tooltip", 'data-placement': "left"} },
+				{ name: 'edit-item', label: '', icon: 'glyphicon glyphicon-pencil', class: 'btn btn-warning', extra: {title: 'Edit', 'data-toggle':"tooltip", 'data-placement': "top"} },
+				{ name: 'delete-item', label: '', icon: 'glyphicon glyphicon-remove', class: 'btn btn-danger', extra: {title: 'Delete', 'data-toggle':"tooltip", 'data-placement': "right" } }
+		],
+		moreParams: { 
+				'filter':  '',
+				'type':  'scripts',
+				'tutor':  'yes'
+			},
+	 
+		}
+  },
+	mounted() {
+		this.$root.$on('hybrid_refresh_bootstrap_view', () => {
+        Vue.nextTick( () => this.$refs.vuetable.refresh())
+		})
+  /*
+    //refresh from socket mytable 
+		this.$root.$on('hybrid_refresh_table', (v) => {
+			  this.$nextTick(function () {
+            Vue.nextTick( () => this.$refs.vuetable.refresh())
+            this.viewhybridoptions = false
+			  })
+		})
+    */
+	},
+	created() {
+    var url_string = window.location.href
+    var url = new URL(url_string);
+    this.token = url.searchParams.get("token");
+    console.log("token "+ this.token);
+
+	},
+    beforeDestroy () {
+		this.$root.$off('hybrid_refresh_bootstrap_view')
+		//this.$root.$off('hybrid_refresh_table')
+ },
+  computed: {
+		httpOptions() {
+			var token = this.token
+			    var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions"
+			    return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions"
+	  },
+
+	},
+
+  methods: {
+   async onActionHybrid(action) {
+
+			if(action == 'stack-stop' ){
+          var info='<h5>This will remove the stack with the name<b> '+ this.hybridshowdata.bootstrapstackname +'</b> <br><br> Services, networks, and secrets associated with the stack will be removed. </h5>'
+          this.$swal({
+            type: 'Info',
+            title: 'Info!',
+            icon:'warning',
+            html: info,
+            showCloseButton: true,
+            showLoaderOnConfirm: false,
+            allowOutsideClick: false,
+            cancelButtonText: 'No, cancel!',
+            showCancelButton: true,
+            showLoaderOnConfirm: false,
+            reverseButtons: true,
+            focusCancel: true,
+            confirmButtonText: 'Ok!'
+          }).then((result)=> {
+            //console.log(JSON.stringify(result))
+            this.onActionHybrid_stackrm(result);
+          })
+
+      }else if(action == 'service-stop' ){
+				var log = await store.dispatch("pipelineLLO/hybrid_servicerm",{
+					token:this.token,
+					bootstrapstackid:this.hybridshowdata.bootstrapstackid,
+					bootstrapnameid:this.hybridshowdata.bootstrapnameid
+				})
+        Vue.nextTick( () => this.$refs.vuetable.refresh())
+      }
+
+   },
+   async onActionHybrid_stackrm(action) {
+            if(action.isConfirmed){
+              var log = await store.dispatch("pipelineLLO/stackrm",{
+                token:this.token,
+                bootstrapstackid:this.hybridshowdata.bootstrapstackid
+              })
+              Vue.nextTick( () => this.$refs.vuetable.refresh())
+            }
+   },
+   onError (type,description) {
+                    var winfo=description
+                    var info='<h5>Bootstrap '+type+'</h5>'
+                    this.$swal({
+                      type: type,
+                      html: info+winfo,
+                      showCloseButton: true,
+                      showLoaderOnConfirm: false,
+                      allowOutsideClick: false,
+                      cancelButtonText: 'No, cancel!',
+                      showCancelButton: false,
+                      showLoaderOnConfirm: false,
+                      reverseButtons: true,
+                      focusCancel: true,
+                      confirmButtonText: 'Ok!'
+                      })
+    },
+
+
+		setFilter () {
+				this.moreParams = {
+						'filter':  this.searchFor,
+						'type':    this.selected
+				}
+        Vue.nextTick( () => this.$refs.vuetable.refresh())
+		},
+		resetFilter () {
+				this.moreParams = {}
+				this.searchFor = ''
+        Vue.nextTick( () => this.$refs.vuetable.refresh())
+		},
+   onPaginationData (paginationData) {
+      this.$refs.pagination.setPaginationData(paginationData)
+			this.$refs.paginationInfo.setPaginationData(paginationData) 
+    },
+    onChangePage (page) {
+      this.$refs.vuetable.changePage(page)
+    },
+    editRow(rowData) {
+      alert("You clicked edit on"+ JSON.stringify(rowData));
+		},
+    async onAction (action, data, index) {
+      this.actionrowindex = index
+      //this.$root.$emit('hybrid_show_info',data)
+      console.log('index '+this.actionrowindex)
+			if(action == 'view-item' ){
+			}else if(action == 'run-more' ){
+        this.hybridshowdata = data
+        console.log('hybrid '+JSON.stringify(data))
+			}else if(action == 'delete-item' ){
+				this.$swal({
+					type: 'info',
+					html: info+winfo,
+					showCloseButton: true,
+					showLoaderOnConfirm: false,
+					allowOutsideClick: false,
+					 cancelButtonText: 'No, cancel!',
+					showCancelButton: true,
+					showLoaderOnConfirm: false,
+					reverseButtons: true,
+					focusCancel: true,
+					confirmButtonText: 'Yes, Delete it!'
+					})
+			}else if(action == 'run-item' ){
+			}
+    },
+    refreshVuetable() {
+			this.$nextTick(()=>{
+					this.vuetablekey += 1
+				})
+      },
+		playbookinfoShow(value) {
+				return this.visibility[value]=true
+		},
+		playbookinfo(value) {
+				return this.playbookInfo=value
+		},
+		rowClicked(row, event) {
+			return {
+				html: true,
+				title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) },
+				content: () => { return 'The date is:<br><em>' + new Date() + '</em>' }
+			}
+		},
+		loadsuccess(response) {
+				var data = response.data.data
+				this.fielddata=data
+				var n = data.length
+				n=n-1
+			},
+
+
+  },
+
+
+  actions: {
+
+
+	}
+
+};
+</script>
+<style>
+.flex-fixed-width-item {
+    flex: 0 0 100px;
+		}
+.modalinfo {
+  z-index: 10000000 !important;
+	position:fixed;
+}
+/* a container with flex-direction column */
+
+.vue-notifyjs.notifications{
+  .alert{
+   z-index: 100;
+  }
+  .list-move {
+    transition: transform 0.3s, opacity 0.4s;
+  }
+  .list-item {
+    display: inline-block;
+    margin-right: 10px;
+
+  }
+  .list-enter-active {
+    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
+  }
+  .list-leave-active {
+    transition: transform 1s ease-out, opacity 0.4s ease-out;
+  }
+
+  .list-enter {
+    opacity: 0;
+    transform: scale(1.1);
+
+  }
+  .list-leave-to {
+    opacity: 0;
+    transform: scale(1.2, 0.7);
+  }
+}
+
+pre {
+  //background-color: rgb(255, 247, 229);
+  background-color: #eff0f1;
+	  border: 1px solid blue;
+		  //white-space: pre-line;
+			}
+
+</style>
diff --git a/src/components/mynetwork/myconnect-server.vue b/src/components/mynetwork/myconnect-server.vue
index 04c0177..679bdea 100644
--- a/src/components/mynetwork/myconnect-server.vue
+++ b/src/components/mynetwork/myconnect-server.vue
@@ -46,7 +46,7 @@
             </div>
           </div>
           <div class="row">
-            <div class="col-6">
+            <div class="col-4">
                <div class="input-group input-group-sm sm-3">
                     <div class="input-group-prepend">
                             <button
@@ -66,6 +66,7 @@
                               > Load Settings
                               </button>
                     </div>
+                    <!--
                     <div class="input-group-prepend">
                             <button
                                     class="ti-widget btn btn-outline-info"
@@ -76,9 +77,10 @@
                               > Save Settings
                               </button>
                     </div>
+                    -->
                 </div>
             </div>
-            <div class="col-3">
+            <div class="col-5">
                <div class="input-group input-group-sm sm-3">
                     <div class="input-group-prepend"
                     >
@@ -249,6 +251,7 @@ export default {
           console.log('swarm  ' + JSON.stringify(log.data.data.workerkey))	
 
           console.log('start ' + JSON.stringify('load'))	
+          this.onAction('save')
         }else if(action == 'connect'){
           console.log('start ' + JSON.stringify('connect'))	
 					var log = await store.dispatch("pipelineLLO/get_config",{
diff --git a/src/store/modules/create_pipelineLLO.js b/src/store/modules/create_pipelineLLO.js
index 93266bc..b192513 100644
--- a/src/store/modules/create_pipelineLLO.js
+++ b/src/store/modules/create_pipelineLLO.js
@@ -336,6 +336,139 @@ export default {
         }
       }
     },
+    async hybrid_servicerm({commit,rootGetters}, value) {
+      try {
+          var token = value.token
+          var params = {
+              bootstrapstackid: value.bootstrapstackid,
+              bootstrapnameid: value.bootstrapnameid,
+              action: 'servicesrm'
+            }
+          var options = {
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var p = await axios.post('https://api.swarmlab.io/swarmlabhybridrmservice',params,options);
+        if(p.error == "invalid_token"){
+            console.log(p)
+        		console.log(JSON.stringify(p))
+        }else{
+        }
+        //console.log(value.token)
+        //console.log(value.swarmlabname)
+        console.log(JSON.stringify(p))
+			  return p
+      } catch (e) {
+        if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
+          //console.log('error '+JSON.stringify(e))
+          window.location.href = 'https://api-login.swarmlab.io:8089';
+        }else{
+          var R = {
+            ERROR_str: e,
+            ERROR: 'yes'
+          }
+          return R;
+        }
+      }
+    },
+    async stackrm({commit,rootGetters}, value) {
+      try {
+          var token = value.token
+          var params = {
+              bootstrapstackid: value.bootstrapstackid,
+              action: 'stackrm'
+            }
+          var options = {
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var p = await axios.post('https://api.swarmlab.io/swarmlabhybridrmstack',params,options);
+        if(p.error == "invalid_token"){
+            console.log(p)
+        		console.log(JSON.stringify(p))
+        }else{
+        }
+        //console.log(value.token)
+        //console.log(value.swarmlabname)
+        console.log(JSON.stringify(p))
+			  return p
+      } catch (e) {
+        if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
+          //console.log('error '+JSON.stringify(e))
+          window.location.href = 'https://api-login.swarmlab.io:8089';
+        }else{
+          var R = {
+            ERROR_str: e,
+            ERROR: 'yes'
+          }
+          return R;
+        }
+      }
+    },
+    async swarmlabhybridjoin({commit,rootGetters}, value) {
+      try {
+          var token = value.token
+          var params = {
+              swarmlabservice: 'ondemand_test_spitifgdfgdfkngkndfkngkdfngkdfk',
+              action: 'join'
+            }
+          var options = {
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var p = await axios.post('https://api.swarmlab.io/swarmlabhybridjoin',params,options);
+        if(p.error == "invalid_token"){
+            console.log(p)
+        		console.log(JSON.stringify(p))
+        }else{
+        }
+        //console.log(value.token)
+        //console.log(value.swarmlabname)
+        console.log(JSON.stringify(p))
+			  return p
+      } catch (e) {
+        if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
+          //console.log('error '+JSON.stringify(e))
+          window.location.href = 'https://api-login.swarmlab.io:8089';
+        }else{
+          var R = {
+            ERROR_str: e,
+            ERROR: 'yes'
+          }
+          return R;
+        }
+      }
+    },
+    async adddeploy({commit,rootGetters}, value) {
+      try {
+          var token = value.token
+          var params = {
+              deploy: value.deploy,
+              action: 'deploy'
+            }
+          var options = {
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var p = await axios.post('https://api.swarmlab.io/adddeployhybrid',params,options);
+        if(p.error == "invalid_token"){
+            console.log(p)
+        		console.log(JSON.stringify(p))
+        }else{
+        }
+        //console.log(value.token)
+        //console.log(value.swarmlabname)
+        console.log(JSON.stringify(p))
+			  return p
+      } catch (e) {
+        if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
+          //console.log('error '+JSON.stringify(e))
+          window.location.href = 'https://api-login.swarmlab.io:8089';
+        }else{
+          var R = {
+            ERROR_str: e,
+            ERROR: 'yes'
+          }
+          return R;
+        }
+      }
+    },
 
 
 
diff --git a/viwsession/session1 b/viwsession/session1
index 95a4f2e..022fc38 100644
--- a/viwsession/session1
+++ b/viwsession/session1
@@ -9,17 +9,20 @@ if expand('%') == '' && !&modified && line('$') <= 1 && getline(1) == ''
 endif
 set shortmess=aoO
 badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork/AdhocView.vue
-badd +8 /data/appl/ok/swarmlab-hybrid-agent/src-local/llo/new.js
+badd +1 /data/appl/ok/swarmlab-hybrid-agent/src-local/llo/new.js
 badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork/mytable.vue
 badd +50 /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork/dockerservices.vue
 badd +43 /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork/availableservices.vue
 badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork.vue
-badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/store/modules/create_pipelineLLO.js
+badd +20 /data/appl/ok/swarmlab-hybrid-agent/src/store/modules/create_pipelineLLO.js
 badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/components/myservices.vue
 badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/App.vue
 badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/components/myconnect-server.vue
-badd +0 /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork/myconnect-server.vue
-badd +0 /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/manage-service.vue
+badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork/myconnect-server.vue
+badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices.vue
+badd +58 /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/deploy-bootstrap.vue
+badd +30 /data/appl/ok/swarmlab-hybrid-agent/src/components/managedeploy.vue
+badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/view-service.vue
 argglobal
 silent! argdel *
 $argadd mynetwork.vue
@@ -42,14 +45,14 @@ set nosplitbelow
 set nosplitright
 wincmd t
 set winminheight=1 winheight=1 winminwidth=1 winwidth=1
-exe '1resize ' . ((&lines * 22 + 24) / 48)
-exe 'vert 1resize ' . ((&columns * 99 + 101) / 202)
-exe '2resize ' . ((&lines * 22 + 24) / 48)
-exe 'vert 2resize ' . ((&columns * 99 + 101) / 202)
-exe '3resize ' . ((&lines * 22 + 24) / 48)
-exe 'vert 3resize ' . ((&columns * 102 + 101) / 202)
-exe '4resize ' . ((&lines * 22 + 24) / 48)
-exe 'vert 4resize ' . ((&columns * 102 + 101) / 202)
+exe '1resize ' . ((&lines * 23 + 25) / 50)
+exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
+exe '2resize ' . ((&lines * 23 + 25) / 50)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
+exe '3resize ' . ((&lines * 23 + 25) / 50)
+exe 'vert 3resize ' . ((&columns * 102 + 102) / 205)
+exe '4resize ' . ((&lines * 23 + 25) / 50)
+exe 'vert 4resize ' . ((&columns * 102 + 102) / 205)
 argglobal
 setlocal fdm=manual
 setlocal fde=0
@@ -60,12 +63,12 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 395 - ((13 * winheight(0) + 11) / 22)
+let s:l = 393 - ((12 * winheight(0) + 11) / 23)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-395
-normal! 015|
+393
+normal! 010|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components
 wincmd w
 argglobal
@@ -79,12 +82,12 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 206 - ((14 * winheight(0) + 11) / 22)
+let s:l = 51 - ((4 * winheight(0) + 11) / 23)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-206
-normal! 06|
+51
+normal! 0
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components
 wincmd w
 argglobal
@@ -98,12 +101,12 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 34 - ((18 * winheight(0) + 11) / 22)
+let s:l = 21 - ((0 * winheight(0) + 11) / 23)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-34
-normal! 0
+21
+normal! 09|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components
 wincmd w
 argglobal
@@ -117,22 +120,22 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 3 - ((2 * winheight(0) + 11) / 22)
+let s:l = 35 - ((0 * winheight(0) + 11) / 23)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-3
-normal! 0
+35
+normal! 010|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components
 wincmd w
-exe '1resize ' . ((&lines * 22 + 24) / 48)
-exe 'vert 1resize ' . ((&columns * 99 + 101) / 202)
-exe '2resize ' . ((&lines * 22 + 24) / 48)
-exe 'vert 2resize ' . ((&columns * 99 + 101) / 202)
-exe '3resize ' . ((&lines * 22 + 24) / 48)
-exe 'vert 3resize ' . ((&columns * 102 + 101) / 202)
-exe '4resize ' . ((&lines * 22 + 24) / 48)
-exe 'vert 4resize ' . ((&columns * 102 + 101) / 202)
+exe '1resize ' . ((&lines * 23 + 25) / 50)
+exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
+exe '2resize ' . ((&lines * 23 + 25) / 50)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
+exe '3resize ' . ((&lines * 23 + 25) / 50)
+exe 'vert 3resize ' . ((&columns * 102 + 102) / 205)
+exe '4resize ' . ((&lines * 23 + 25) / 50)
+exe 'vert 4resize ' . ((&columns * 102 + 102) / 205)
 tabedit /data/appl/ok/swarmlab-hybrid-agent/src-local/llo/new.js
 set splitbelow splitright
 wincmd _ | wincmd |
@@ -147,11 +150,11 @@ set nosplitbelow
 set nosplitright
 wincmd t
 set winminheight=1 winheight=1 winminwidth=1 winwidth=1
-exe 'vert 1resize ' . ((&columns * 99 + 101) / 202)
-exe '2resize ' . ((&lines * 22 + 24) / 48)
-exe 'vert 2resize ' . ((&columns * 102 + 101) / 202)
-exe '3resize ' . ((&lines * 22 + 24) / 48)
-exe 'vert 3resize ' . ((&columns * 102 + 101) / 202)
+exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
+exe '2resize ' . ((&lines * 23 + 25) / 50)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
+exe '3resize ' . ((&lines * 23 + 25) / 50)
+exe 'vert 3resize ' . ((&columns * 102 + 102) / 205)
 argglobal
 setlocal fdm=manual
 setlocal fde=0
@@ -162,12 +165,12 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 386 - ((44 * winheight(0) + 22) / 45)
+let s:l = 115 - ((1 * winheight(0) + 23) / 47)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-386
-normal! 07|
+115
+normal! 03|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
 wincmd w
 argglobal
@@ -181,12 +184,12 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 191 - ((21 * winheight(0) + 11) / 22)
+let s:l = 148 - ((0 * winheight(0) + 11) / 23)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-191
-normal! 0
+148
+normal! 09|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components
 wincmd w
 argglobal
@@ -200,19 +203,19 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 310 - ((9 * winheight(0) + 11) / 22)
+let s:l = 312 - ((0 * winheight(0) + 11) / 23)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-310
+312
 normal! 013|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components
 wincmd w
-exe 'vert 1resize ' . ((&columns * 99 + 101) / 202)
-exe '2resize ' . ((&lines * 22 + 24) / 48)
-exe 'vert 2resize ' . ((&columns * 102 + 101) / 202)
-exe '3resize ' . ((&lines * 22 + 24) / 48)
-exe 'vert 3resize ' . ((&columns * 102 + 101) / 202)
+exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
+exe '2resize ' . ((&lines * 23 + 25) / 50)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
+exe '3resize ' . ((&lines * 23 + 25) / 50)
+exe 'vert 3resize ' . ((&columns * 102 + 102) / 205)
 tabedit /data/appl/ok/swarmlab-hybrid-agent/src/store/modules/create_pipelineLLO.js
 set splitbelow splitright
 wincmd _ | wincmd |
@@ -223,8 +226,8 @@ set nosplitbelow
 set nosplitright
 wincmd t
 set winminheight=1 winheight=1 winminwidth=1 winwidth=1
-exe 'vert 1resize ' . ((&columns * 101 + 101) / 202)
-exe 'vert 2resize ' . ((&columns * 100 + 101) / 202)
+exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
 argglobal
 setlocal fdm=manual
 setlocal fde=0
@@ -235,12 +238,12 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 20 - ((19 * winheight(0) + 22) / 45)
+let s:l = 344 - ((20 * winheight(0) + 23) / 47)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-20
-normal! 05|
+344
+normal! 015|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
 wincmd w
 argglobal
@@ -254,16 +257,16 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 106 - ((20 * winheight(0) + 22) / 45)
+let s:l = 406 - ((0 * winheight(0) + 23) / 47)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-106
-normal! 056|
+406
+normal! 019|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
 wincmd w
-exe 'vert 1resize ' . ((&columns * 101 + 101) / 202)
-exe 'vert 2resize ' . ((&columns * 100 + 101) / 202)
+exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
 tabedit /data/appl/ok/swarmlab-hybrid-agent/src/components/myconnect-server.vue
 set splitbelow splitright
 wincmd _ | wincmd |
@@ -274,8 +277,8 @@ set nosplitbelow
 set nosplitright
 wincmd t
 set winminheight=1 winheight=1 winminwidth=1 winwidth=1
-exe 'vert 1resize ' . ((&columns * 101 + 101) / 202)
-exe 'vert 2resize ' . ((&columns * 100 + 101) / 202)
+exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
 argglobal
 setlocal fdm=manual
 setlocal fde=0
@@ -286,11 +289,11 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 27 - ((26 * winheight(0) + 22) / 45)
+let s:l = 26 - ((25 * winheight(0) + 23) / 47)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-27
+26
 normal! 0
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
 wincmd w
@@ -305,17 +308,17 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 129 - ((30 * winheight(0) + 22) / 45)
+let s:l = 145 - ((6 * winheight(0) + 23) / 47)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-129
+145
 normal! 0
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
 wincmd w
-exe 'vert 1resize ' . ((&columns * 101 + 101) / 202)
-exe 'vert 2resize ' . ((&columns * 100 + 101) / 202)
-tabedit /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/manage-service.vue
+exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
+tabedit /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices.vue
 set splitbelow splitright
 wincmd _ | wincmd |
 vsplit
@@ -325,8 +328,21 @@ set nosplitbelow
 set nosplitright
 wincmd t
 set winminheight=1 winheight=1 winminwidth=1 winwidth=1
-exe 'vert 1resize ' . ((&columns * 101 + 101) / 202)
-exe 'vert 2resize ' . ((&columns * 100 + 101) / 202)
+exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
+argglobal
+enew
+file /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/manage-service.vue
+setlocal fdm=manual
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=0
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
+wincmd w
 argglobal
 setlocal fdm=manual
 setlocal fde=0
@@ -337,17 +353,36 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 1 - ((0 * winheight(0) + 22) / 45)
+let s:l = 18 - ((11 * winheight(0) + 23) / 47)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-1
-normal! 0
+18
+normal! 011|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
 wincmd w
+exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
+tabedit /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/deploy-bootstrap.vue
+set splitbelow splitright
+wincmd _ | wincmd |
+vsplit
+1wincmd h
+wincmd w
+wincmd _ | wincmd |
+split
+1wincmd k
+wincmd w
+set nosplitbelow
+set nosplitright
+wincmd t
+set winminheight=1 winheight=1 winminwidth=1 winwidth=1
+exe 'vert 1resize ' . ((&columns * 75 + 102) / 205)
+exe '2resize ' . ((&lines * 18 + 25) / 50)
+exe 'vert 2resize ' . ((&columns * 129 + 102) / 205)
+exe '3resize ' . ((&lines * 28 + 25) / 50)
+exe 'vert 3resize ' . ((&columns * 129 + 102) / 205)
 argglobal
-enew
-file /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices.vue
 setlocal fdm=manual
 setlocal fde=0
 setlocal fmr={{{,}}}
@@ -356,11 +391,60 @@ setlocal fdl=0
 setlocal fml=1
 setlocal fdn=20
 setlocal fen
+silent! normal! zE
+let s:l = 262 - ((44 * winheight(0) + 23) / 47)
+if s:l < 1 | let s:l = 1 | endif
+exe s:l
+normal! zt
+262
+normal! 010|
+lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
+wincmd w
+argglobal
+if bufexists('/data/appl/ok/swarmlab-hybrid-agent/src/components/managedeploy.vue') | buffer /data/appl/ok/swarmlab-hybrid-agent/src/components/managedeploy.vue | else | edit /data/appl/ok/swarmlab-hybrid-agent/src/components/managedeploy.vue | endif
+setlocal fdm=manual
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=0
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+silent! normal! zE
+let s:l = 12 - ((11 * winheight(0) + 9) / 18)
+if s:l < 1 | let s:l = 1 | endif
+exe s:l
+normal! zt
+12
+normal! 023|
+lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
+wincmd w
+argglobal
+if bufexists('/data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/view-service.vue') | buffer /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/view-service.vue | else | edit /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/view-service.vue | endif
+setlocal fdm=manual
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=0
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+silent! normal! zE
+let s:l = 292 - ((1 * winheight(0) + 14) / 28)
+if s:l < 1 | let s:l = 1 | endif
+exe s:l
+normal! zt
+292
+normal! 07|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
 wincmd w
-exe 'vert 1resize ' . ((&columns * 101 + 101) / 202)
-exe 'vert 2resize ' . ((&columns * 100 + 101) / 202)
-tabnext 5
+3wincmd w
+exe 'vert 1resize ' . ((&columns * 75 + 102) / 205)
+exe '2resize ' . ((&lines * 18 + 25) / 50)
+exe 'vert 2resize ' . ((&columns * 129 + 102) / 205)
+exe '3resize ' . ((&lines * 28 + 25) / 50)
+exe 'vert 3resize ' . ((&columns * 129 + 102) / 205)
+tabnext 6
 set stal=1
 if exists('s:wipebuf')
   silent exe 'bwipe ' . s:wipebuf