diff --git a/src/components/Directions.vue b/src/components/Directions.vue
new file mode 100644
index 0000000..1e0e6f3
--- /dev/null
+++ b/src/components/Directions.vue
@@ -0,0 +1,15 @@
+<template>
+ <div>
+     <h1>Direcciones</h1>
+ </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/routes.js b/src/routes.js
index 158b1c9..dc21f17 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -2,11 +2,11 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import Home from './view/Home.vue'
-<<<<<<< HEAD
 import PersonalData from './view/PersonalData.vue'
-=======
 import Cart from './view/Cart.vue'
->>>>>>> origin
+import Pago from './view/Pago.vue'
+import Envio from './view/Envio.vue'
+import Direccion from './view/Direccion'
 
 const routes = [
     {
@@ -20,15 +20,29 @@ const routes = [
         name: 'home'
     },
     {
-<<<<<<< HEAD
         path: '/datosPersonales',
         component: PersonalData,
         name: 'personalData'
-=======
+    },
+    {
         path: '/cart',
         component: Cart,
         name: 'cart'
->>>>>>> origin
+    },
+    {
+        path: '/pago',
+        component: Pago,
+        name: 'pago'
+    },
+    {
+        path: '/envio',
+        component: Envio,
+        name: 'envio'
+    },
+    {
+        path: '/direcciones',
+        component: Direccion,
+        name: 'direcciones'
     }
 ]
 
diff --git a/src/view/Direccion.vue b/src/view/Direccion.vue
new file mode 100644
index 0000000..1293345
--- /dev/null
+++ b/src/view/Direccion.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+<Header></Header>
+  
+<div class="my-5">  
+  
+<div class="row">
+
+<section class="col-10 col-sm-7 col-md-7 col-lg-7 col-xl-7 offset-1">
+  <ShoppingNav currentStep=2></ShoppingNav>
+
+  <Directions></Directions>
+
+
+</section>
+
+<aside id="CompraStatus" class="col-10 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-1 ">
+  <!-- <h3 class="text-center">status</h3> -->
+   <ShoppingStatus></ShoppingStatus> 
+</aside>
+
+
+</div>
+
+</div>
+
+<Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Header from '../components/Header'
+import Footer from '../components/Footer'
+import ShoppingNav from '../components/ShoppingNav'
+import ShoppingStatus from '../components/ShoppingStatus'
+import Directions from '../components/Directions'
+
+export default {
+components: {
+        Header,
+        Footer,
+        ShoppingNav,
+        ShoppingStatus,
+        Directions
+    }
+}
+</script>
+
+<style scoped>
+#CompraStatus{
+ padding: 0;
+}
+
+@media screen and (max-width:760px )  {
+ #CompraStatus{
+   margin-top: 2rem;
+  
+ }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/view/Envio.vue b/src/view/Envio.vue
new file mode 100644
index 0000000..92edde6
--- /dev/null
+++ b/src/view/Envio.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+<Header></Header>
+  
+<div class="my-5">  
+  
+<div class="row">
+
+<section class="col-10 col-sm-7 col-md-7 col-lg-7 col-xl-7 offset-1">
+  <ShoppingNav currentStep=2></ShoppingNav>
+
+  <ShippingSection></ShippingSection>
+
+</section>
+
+<aside id="CompraStatus" class="col-10 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-1 ">
+  <!-- <h3 class="text-center">status</h3> -->
+   <ShoppingStatus></ShoppingStatus> 
+</aside>
+
+
+</div>
+
+</div>
+
+<Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Header from '../components/Header'
+import Footer from '../components/Footer'
+import ShoppingNav from '../components/ShoppingNav'
+import ShoppingStatus from '../components/ShoppingStatus'
+import ShippingSection from '../components/ShippingSection'
+
+export default {
+components: {
+        Header,
+        Footer,
+        ShoppingNav,
+        ShoppingStatus,
+        ShippingSection
+    }
+}
+</script>
+
+<style scoped>
+#CompraStatus{
+ padding: 0;
+}
+
+@media screen and (max-width:760px )  {
+ #CompraStatus{
+   margin-top: 2rem;
+  
+ }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/view/Pago.vue b/src/view/Pago.vue
new file mode 100644
index 0000000..dfb2e8e
--- /dev/null
+++ b/src/view/Pago.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+<Header></Header>
+  
+<div class="my-5">  
+  
+<div class="row">
+
+<section class="col-10 col-sm-7 col-md-7 col-lg-7 col-xl-7 offset-1">
+  <ShoppingNav currentStep=2></ShoppingNav>
+
+  <Payment></Payment>
+
+
+</section>
+
+<aside id="CompraStatus" class="col-10 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-1 ">
+  <!-- <h3 class="text-center">status</h3> -->
+   <ShoppingStatus></ShoppingStatus> 
+</aside>
+
+
+</div>
+
+</div>
+
+<Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Header from '../components/Header'
+import Footer from '../components/Footer'
+import ShoppingNav from '../components/ShoppingNav'
+import ShoppingStatus from '../components/ShoppingStatus'
+import Payment from '../components/Payment'
+
+export default {
+components: {
+        Header,
+        Footer,
+        ShoppingNav,
+        ShoppingStatus,
+        Payment
+    }
+}
+</script>
+
+<style scoped>
+#CompraStatus{
+ padding: 0;
+}
+
+@media screen and (max-width:760px )  {
+ #CompraStatus{
+   margin-top: 2rem;
+  
+ }
+}
+
+</style>
\ No newline at end of file