diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 92f21a0..400790f 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -21,6 +21,10 @@ const routes: Routes = [
         path: 'seleccion-articulos',
         loadChildren: () => import('./modules/seleccion-articulos/seleccion-articulos.module').then(m => m.SeleccionArticulosModule)
       },
+      {
+        path: 'carrito',
+        loadChildren: () => import('./modules/carrito/carrito.module').then(m => m.CarritoModule)
+      },
     ]
   },
   { path: '**', redirectTo: '', pathMatch: 'full' },
diff --git a/src/app/modules/carrito/carrito-routing.module.ts b/src/app/modules/carrito/carrito-routing.module.ts
new file mode 100644
index 0000000..c119a29
--- /dev/null
+++ b/src/app/modules/carrito/carrito-routing.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { CarritoComponent } from './carrito.component';
+
+const routes: Routes = [
+  { path: '', component: CarritoComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CarritoRoutingModule { }
diff --git a/src/app/modules/carrito/carrito.component.html b/src/app/modules/carrito/carrito.component.html
new file mode 100644
index 0000000..ebb8c5b
--- /dev/null
+++ b/src/app/modules/carrito/carrito.component.html
@@ -0,0 +1,9 @@
+<div class="h-92 bg-white fade-in-left">
+  <!-- PUBLICIDADES -->
+  <app-header-publicidad></app-header-publicidad>
+
+  <div class="row mx-0 h-90 align-items-center">
+
+  </div>
+
+</div>
diff --git a/src/app/modules/carrito/carrito.component.scss b/src/app/modules/carrito/carrito.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/carrito/carrito.component.spec.ts b/src/app/modules/carrito/carrito.component.spec.ts
new file mode 100644
index 0000000..0283ad1
--- /dev/null
+++ b/src/app/modules/carrito/carrito.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CarritoComponent } from './carrito.component';
+
+describe('CarritoComponent', () => {
+  let component: CarritoComponent;
+  let fixture: ComponentFixture<CarritoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CarritoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CarritoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/modules/carrito/carrito.component.ts b/src/app/modules/carrito/carrito.component.ts
new file mode 100644
index 0000000..f52f9d0
--- /dev/null
+++ b/src/app/modules/carrito/carrito.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-carrito',
+  templateUrl: './carrito.component.html',
+  styleUrls: ['./carrito.component.scss']
+})
+export class CarritoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/modules/carrito/carrito.module.ts b/src/app/modules/carrito/carrito.module.ts
new file mode 100644
index 0000000..fa609ba
--- /dev/null
+++ b/src/app/modules/carrito/carrito.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+import { CarritoRoutingModule } from "./carrito-routing.module";
+import { CarritoComponent } from "./carrito.component";
+import { SeleccionArticulosModule } from '../seleccion-articulos/seleccion-articulos.module';
+
+@NgModule({
+  declarations: [CarritoComponent],
+  imports: [CommonModule, CarritoRoutingModule, SeleccionArticulosModule]
+})
+export class CarritoModule { }
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
index 5695e49..115e2e1 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
@@ -131,7 +131,9 @@
         </div>
       </div>
       <div class="col-auto p-0 mt-2 ml-auto h-20">
-        <div class="btn-effect col-auto align-self-center px-0 bg-white">
+        <div
+          class="btn-effect col-auto align-self-center px-0 bg-white"
+          [routerLink]="['/carrito']">
           <div class="row mx-0 bg-light">
             <div class="col-auto align-self-center text-primary">VER CARRITO</div>
             <div class="col-auto p-0 bg-primary d-none d-sm-block">
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
index 7427f95..b43f34c 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
@@ -1,12 +1,13 @@
-import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
-import { SeleccionArticulosRoutingModule } from "./seleccion-articulos-routing.module";
-import { SeleccionArticulosComponent } from "./seleccion-articulos.component";
-import { HeaderPublicidadComponent } from "src/app/shared/header-publicidad/header-publicidad.component";
+import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module';
+import { SeleccionArticulosComponent } from './seleccion-articulos.component';
+import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component';
 
 @NgModule({
   declarations: [SeleccionArticulosComponent, HeaderPublicidadComponent],
-  imports: [CommonModule, SeleccionArticulosRoutingModule]
+  imports: [CommonModule, SeleccionArticulosRoutingModule],
+  exports: [HeaderPublicidadComponent]
 })
-export class SeleccionArticulosModule {}
+export class SeleccionArticulosModule { }
diff --git a/src/app/shared/footer/footer.component.html b/src/app/shared/footer/footer.component.html
new file mode 100644
index 0000000..d495f35
--- /dev/null
+++ b/src/app/shared/footer/footer.component.html
@@ -0,0 +1,20 @@
+<div class="row w-90 mx-auto h-100 justify-content-between bg-white">
+  <div class="col-auto align-self-center px-0 bg-white">
+    <div class="btn-effect row mx-0 bg-light">
+      <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div>
+      <div class="col-auto p-0 bg-primary d-none d-sm-block">
+        <img class="p-2 img-accesibilidad" src="assets/img/iconos-accesibilidad.svg">
+      </div>
+    </div>
+  </div>
+  <div
+    class="btn-effect col-auto align-self-center px-0 bg-white"
+    (click)="goBack()">
+    <div class="row mx-0 bg-light">
+      <div class="col-auto align-self-center text-primary">VOLVER</div>
+      <div class="col-auto p-0 bg-primary d-none d-sm-block">
+        <img class="p-2 img-volver" src="assets/img/icono-volver.svg">
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/shared/footer/footer.component.scss b/src/app/shared/footer/footer.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/footer/footer.component.spec.ts b/src/app/shared/footer/footer.component.spec.ts
new file mode 100644
index 0000000..2ca6c45
--- /dev/null
+++ b/src/app/shared/footer/footer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/footer/footer.component.ts b/src/app/shared/footer/footer.component.ts
new file mode 100644
index 0000000..19c0776
--- /dev/null
+++ b/src/app/shared/footer/footer.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from "@angular/core";
+import { Location } from "@angular/common";
+
+@Component({
+  selector: "app-footer",
+  templateUrl: "./footer.component.html",
+  styleUrls: ["./footer.component.scss"]
+})
+export class FooterComponent implements OnInit {
+  constructor(private location: Location) {}
+
+  ngOnInit() {}
+
+  goBack() {
+    this.location.back();
+  }
+}
diff --git a/src/app/shared/header-publicidad/header-publicidad.component.html b/src/app/shared/header-publicidad/header-publicidad.component.html
new file mode 100644
index 0000000..6fced1d
--- /dev/null
+++ b/src/app/shared/header-publicidad/header-publicidad.component.html
@@ -0,0 +1,5 @@
+<div class="row mx-0 h-10">
+  <div class="col-12 p-3 h-100">
+    <div class="bg-dark h-100"></div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/header-publicidad/header-publicidad.component.scss b/src/app/shared/header-publicidad/header-publicidad.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/header-publicidad/header-publicidad.component.spec.ts b/src/app/shared/header-publicidad/header-publicidad.component.spec.ts
new file mode 100644
index 0000000..fb6f71d
--- /dev/null
+++ b/src/app/shared/header-publicidad/header-publicidad.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderPublicidadComponent } from './header-publicidad.component';
+
+describe('HeaderPublicidadComponent', () => {
+  let component: HeaderPublicidadComponent;
+  let fixture: ComponentFixture<HeaderPublicidadComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderPublicidadComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderPublicidadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/header-publicidad/header-publicidad.component.ts b/src/app/shared/header-publicidad/header-publicidad.component.ts
new file mode 100644
index 0000000..78ae4cd
--- /dev/null
+++ b/src/app/shared/header-publicidad/header-publicidad.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header-publicidad',
+  templateUrl: './header-publicidad.component.html',
+  styleUrls: ['./header-publicidad.component.scss']
+})
+export class HeaderPublicidadComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}