diff --git a/package-lock.json b/package-lock.json
index eb94c2d..06697dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "vue-3-crud",
+  "name": "launch-x",
   "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "vue-3-crud",
+      "name": "launch-x",
       "version": "0.1.0",
       "dependencies": {
         "axios": "^0.26.0",
diff --git a/src/App.vue b/src/App.vue
index 581a6ac..f7a17a3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,19 @@
 <template>
   <div id="app">
-    <nav class="navbar navbar-expand navbar-light bg-white">
-      <router-link to="/" class="navbar-brand">LaunchX</router-link>
+    <nav class="navbar navbar-expand bg-white banner0">
+      <router-link to="/" class="navbar-brand onTitle">LaunchX</router-link>
       <div class="navbar-nav mr-auto">
         <li class="nav-item">
           <router-link to="/explorers" class="nav-link">Explorers</router-link>
         </li>
         <li class="nav-item">
-          <router-link to="/add" class="nav-link">Agregar Explorer</router-link>
+          <router-link to="/commanders" class="nav-link">Commanders</router-link>
+        </li>
+        <li class="nav-item">
+          <router-link to="/addExplorer" class="nav-link">New Explorer</router-link>
+        </li>
+        <li class="nav-item">
+          <router-link to="/addCommander" class="nav-link">New Commander</router-link>
         </li>
       </div>
     </nav>
@@ -21,3 +27,11 @@ export default {
   name: "app"
 };
 </script>
+<style>
+.banner0{
+  background: linear-gradient(80deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 35%, rgb(0, 42, 90) 100%);
+}
+.onTitle{
+  color: white;
+}
+</style>
diff --git a/src/components/AddCommander.vue b/src/components/AddCommander.vue
new file mode 100644
index 0000000..8f717c3
--- /dev/null
+++ b/src/components/AddCommander.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="submit-form">
+    <div v-if="!submitted">
+    <h3>Nuevo Commander</h3>
+      <div class="form-group">
+        <label for="title">Nombre</label>
+        <input
+          type="text"
+          class="form-control"
+          id="title"
+          required
+          v-model="commanders.name"
+          name="title"
+        />
+      </div>
+      <div class="form-group">
+        <label for="title">Username</label>
+        <input
+          type="text"
+          class="form-control"
+          id="username"
+          required
+          v-model="commanders.username"
+          name="username"
+        />
+      </div>
+      <div class="form-group">
+        <label for="title">Main Stack</label>
+        <input
+          type="text"
+          class="form-control"
+          id="mainStack"
+          required
+          v-model="commanders.mainStack"
+          name="mainStack"
+        />
+      </div>
+      <div class="form-group checkAny">
+          <div>
+              <label for="title">Current Enrollment</label>
+                <input
+                  type="checkbox"
+                  class="check0"
+                  id="currentEnrollment"
+                  required
+                  v-model="commanders.currentEnrollment"
+                  name="currentEnrollment"
+                />
+          </div>
+          <div>
+              <label for="title">Azure Certification</label>
+                <input
+                  type="checkbox"
+                  class="check0"
+                  id="hasAzureCertification"
+                  required
+                  v-model="commanders.hasAzureCertification"
+                  name="hazAzureCertification"
+                />
+          </div>
+      </div>
+      <div class="form-group">
+        
+      </div>
+      <button @click="saveCommander" class="btn btn-success">Agregar</button>
+    </div>
+    <div v-else>
+      <h4> Commander creado exitosamente. </h4>
+      <button class="btn btn-success" @click="newCommander">Add</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import CommanderService from "../services/CommanderService";
+export default {
+  name: "add-commander",
+  data() {
+    return {
+      commanders: {
+        id: null,
+        name: "",
+        username: "",
+        mainStack: "",
+        currentEnrollment: false,
+        hasAzureCertification: false
+      },
+      submitted: false
+    };
+  },
+  methods: {
+    saveCommander() {
+      var data = {
+        name: this.commanders.name,
+        username: this.commanders.username,
+        mainStack: this.commanders.mainStack,
+        currentEnrollment: this.commanders.currentEnrollment,
+        hasAzureCertification: this.commanders.hasAzureCertification
+      };
+      CommanderService.create(data)
+        .then(response => {
+          this.commanders.id = response.data.id;
+          this.submitted = true;
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    newCommander() {
+      this.submitted = false;
+      this.commanders = {};
+    }
+  }
+};
+</script>
+<style>
+.check0{
+    width: 60px;
+    height: 20px;
+}
+.checkAny{
+    display: flex;
+    justify-content: space-between;
+    margin-left: 10px;
+    width: 40%;
+}
+</style>
diff --git a/src/components/Commander.vue b/src/components/Commander.vue
new file mode 100644
index 0000000..d7668b0
--- /dev/null
+++ b/src/components/Commander.vue
@@ -0,0 +1,111 @@
+<template>
+<h4>Commander</h4>
+  <div v-if="currentCommander" class="edit-form">
+    <form>
+      <div class="form-group">
+        <label for="title">Nombre</label>
+        <input type="text" disabled class="form-control" id="title"
+          v-model="currentCommander.name"
+        />
+      </div>
+      <div class="form-group">
+        <label for="title">Username</label>
+        <input type="text" disabled class="form-control" id="title"
+          v-model="currentCommander.username"
+        />
+      </div>
+      <div class="form-group">
+        <label for="title">Main Stack</label>
+        <input type="text" class="form-control" id="title"
+          v-model="currentCommander.mainStack"
+        />
+      </div>
+      <div class="form-group onerIn">
+        <label for="title">Current Enrollment</label>
+        <input type="checkbox" disabled class="form-control checkIn" id="title"
+          v-model="currentCommander.currentEnrollment"
+        />
+      </div>
+      <div class="form-group onerIn">
+        <label for="title">Azure Certification</label>
+        <input type="checkbox" disabled class="form-control checkIn" id="title"
+          v-model="currentCommander.hasAzureCertification"
+        />
+      </div>
+    </form>
+    <button class="btn btn-danger mr-2" @click="deleteCommander">
+      Eliminar Commander
+    </button>
+    <button type="submit" class="btn btn-info mr-2" @click="updateCommander">
+      Actualizar
+    </button>
+    <p>{{ message }}</p>
+  </div>
+  <div v-else>
+    <br />
+    <p> Selecciona un explorer. </p>
+  </div>
+</template>
+<script>
+import CommanderService from "../services/CommanderService";
+export default {
+  name: "commander",
+  data() {
+    return {
+      currentCommander: null,
+      message: ''
+    };
+  },
+  methods: {
+    getCommander(id) {
+      CommanderService.get(id)
+        .then(response => {
+          this.currentCommander = response.data;
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    deleteCommander() {
+      CommanderService.delete(this.currentCommander.id)
+      .then(response => {
+        console.log(response.data);
+        this.$router.push({ name: "commanders" });
+      })
+      .catch(e => {
+          console.log(e);
+      });
+    },
+    updateCommander() {
+      CommanderService.update(this.currentCommander.id, this.currentCommander)
+        .then(response => {
+          console.log(response.data);
+          this.message = 'Se actualizó correctamente';
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    }
+  },
+  mounted() {
+    this.message = '';
+    this.getCommander(this.$route.params.id);
+  }
+};
+</script>
+
+<style>
+.edit-form {
+  max-width: 300px;
+  margin: auto;
+}
+.checkIn{
+  background-color: aqua;
+  width: 20px;
+  height: 20px;
+}
+.onerIn{
+  display: flex;
+  justify-content: space-around;
+}
+</style>
diff --git a/src/components/CommandersList.vue b/src/components/CommandersList.vue
new file mode 100644
index 0000000..d76383d
--- /dev/null
+++ b/src/components/CommandersList.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="list row">
+    <div class="col-md-6">
+      <h4> Commander Inscritos </h4>
+      <ul class="list-group">
+        <li class="list-group-item"
+          :class="{ active: index == currentIndex }"
+          v-for="(commander, index) in commanders"
+          :key="index"
+          @click="setActiveCommander(commander, index)"
+        >
+          {{ commander.username }}
+        </li>
+
+      </ul>
+    </div>
+    <div class="col-md-6">
+      <div v-if="currentCommander">
+        <h4>Commander</h4>
+        <div>
+          <br><label><strong>Nombre:</strong></label> {{ currentCommander.name}}
+          <br><label><strong>Username:</strong></label> {{ currentCommander.username}}
+          <br><label><strong>Main Stack:</strong></label> {{ currentCommander.mainStack}}
+          <br><label><strong>Current Enrollment:</strong></label > {{ currentCommander.currentEnrollment}}
+          <br><label><strong>Azure Certification:</strong></label> {{ currentCommander.hasAzureCertification}}
+        </div>
+        <router-link :to="'/commander/' + currentCommander.id" class="btn btn-info"> Editar</router-link>
+      </div>
+      <div v-else>
+        <br />
+        <p> Selecciona un commander</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import CommanderService from "../services/CommanderService";
+
+export default {
+  name: "explorer-list",
+  data() {
+    return {
+      tutorials: [],
+      commanders: [],
+      currentTutorial: null,
+      currentCommander: null,
+      currentIndex: -1,
+      title: "",
+      commanderId: ""
+    };
+  },
+  methods: {
+    getAllCommanders(){
+      CommanderService.getAll()
+        .then(response => {
+          this.commanders = response.data;
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    setActiveCommander(commander, index) {
+      this.currentCommander = commander;
+      this.currentIndex = commander? index : -1;
+      
+    },
+    
+  },
+  mounted() {
+    this.getAllCommanders();
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/components/ExplorersList.vue b/src/components/ExplorersList.vue
index 33b48ea..f9bb893 100644
--- a/src/components/ExplorersList.vue
+++ b/src/components/ExplorersList.vue
@@ -26,7 +26,7 @@
       </div>
       <div v-else>
         <br />
-        <p> Selecciona un explorer.</p>
+        <p> Selecciona un explorer</p>
       </div>
     </div>
   </div>
@@ -59,7 +59,7 @@ export default {
         });
     },
     setActiveExplorer(explorer, index) {
-      this.currentExplorer= explorer;
+      this.currentExplorer = explorer;
       this.currentIndex = explorer? index : -1;
     }
   },
diff --git a/src/router.js b/src/router.js
index 9bdd544..951b338 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,5 +1,11 @@
 import { createWebHistory, createRouter } from "vue-router";
 const routes =  [
+  {
+    path: "/commanders",
+    alias: "/commanders",
+    name: "commanders",
+    component: () => import("./components/CommandersList")
+  },
   {
     path: "/",
     alias: "/explorers",
@@ -12,9 +18,19 @@ const routes =  [
     component: () => import("./components/Explorer")
   },
   {
-    path: "/add",
+    path: "/commander/:id",
+    name: "commander-details",
+    component: () => import("./components/Commander")
+  },
+  {
+    path: "/addExplorer",
     name: "add-explorer",
     component: () => import("./components/AddExplorer")
+  },
+  {
+    path: "/addCommander",
+    name: "add-commander",
+    component: () => import("./components/AddCommander")
   }
 ];
 const router = createRouter({
diff --git a/src/services/CommanderService.js b/src/services/CommanderService.js
new file mode 100644
index 0000000..f5877fb
--- /dev/null
+++ b/src/services/CommanderService.js
@@ -0,0 +1,21 @@
+import http from "../http-common";
+
+class CommanderService {
+  getAll() {
+    return http.get("/commanders");
+  }
+  get(id) {
+    return http.get(`/commanders/${id}`);
+  }
+  create(data) {
+    return http.post("/commanders", data);
+  }
+  update(id, data) {
+    return http.put(`/commanders/${id}`, data);
+  }
+  delete(id) {
+    return http.delete(`/commanders/${id}`);
+  }
+}
+
+export default new CommanderService();