diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d425c6f..ee42ad5 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,7 +1,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { CargarProductosComponent } from './cargar-productos/cargar-productos.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'home', component: HomeComponent },
+  { path: 'cargar-productos', component: CargarProductosComponent },
+  { path: '**', redirectTo: '/home', pathMatch: 'full' },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 20ca503..90c6b64 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,8 +1 @@
-<div class="container-fluid h-100">
-  <div class="row h-100">
-    <div class="col p-0">
-      <app-home class="w-100 h-100 d-flex align-items-start flex-column"></app-home>
-    </div>
-  </div>
-</div>
 <router-outlet></router-outlet>
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index afd5fce..7d59170 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -7,6 +7,7 @@ import { HeaderComponent } from './header/header.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
 import { CarouselComponent } from './carousel/carousel.component';
 import { HomeComponent } from './home/home.component';
+import { CargarProductosComponent } from './cargar-productos/cargar-productos.component';
 
 @NgModule({
   declarations: [
@@ -14,7 +15,8 @@ import { HomeComponent } from './home/home.component';
     HeaderComponent,
     SidebarComponent,
     CarouselComponent,
-    HomeComponent
+    HomeComponent,
+    CargarProductosComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 2e92326..192f3ed 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,38 +1,47 @@
-<!-- HEADER -->
-<div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
-  <p class="text-white text-center">HEADER</p>
-</div>
+<div class="container-fluid h-100">
+  <div class="row h-100">
+    <div class="col p-0">
+      <div class="w-100 h-100 d-flex align-items-start flex-column disable-user-select">
+        
+        <!-- HEADER -->
+        <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
+          <p class="text-white text-center">HEADER</p>
+        </div>
 
-<div class="h-100 w-100 position-relative">
-  <div class="background-image blur"></div>
-  <div class="row position-absolute w-100 h-100">
-    <div class="col-5 my-auto">
-      <!-- CAROUSEL -->
-      <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
-        <div class="carousel-inner">
-          <div class="carousel-item active">
-            <img class="m-auto img-fluid d-block w-75"
-              src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
-              alt="">
-          </div>
-          <div class="carousel-item">
-            <img class="m-auto img-fluid d-block w-75"
-              src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
-              alt="">
+        <div class="h-100 w-100 position-relative">
+          <div class="background-image blur"></div>
+          <div class="row position-absolute w-100 h-100">
+            <div class="col-5 my-auto">
+              <!-- CAROUSEL -->
+              <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
+                <div class="carousel-inner">
+                  <div class="carousel-item active">
+                    <img class="m-auto img-fluid d-block w-75"
+                      src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
+                      alt="">
+                  </div>
+                  <div class="carousel-item">
+                    <img class="m-auto img-fluid d-block w-75"
+                      src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
+                      alt="">
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-7 my-auto">
+              <div class="text-center text-white">
+                <h1 class="display-2 font-weight-bold">¡BIENVENIDO!</h1>
+                <h1 class="display-3 font-weight-bold">Toque la pantalla<br>para comenzar.</h1>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-    </div>
-    <div class="col-7 my-auto">
-      <div class="text-center text-white">
-        <h1 class="display-2 font-weight-bold">¡BIENVENIDO!</h1>
-        <h1 class="display-3 font-weight-bold">Toque la pantalla<br>para comenzar.</h1>
+
+        <!-- FOOTER -->
+        <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
+          <p class="text-white text-center">FOOTER</p>
+        </div>
       </div>
     </div>
   </div>
-</div>
-
-<!-- FOOTER -->
-<div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
-  <p class="text-white text-center">FOOTER</p>
 </div>
\ No newline at end of file
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index f56c8c1..987b90f 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-home',
@@ -7,9 +8,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit() {
   }
 
+  @HostListener('document:click', ['$event'])
+  documentClick(event: MouseEvent) {
+    this.router.navigate(['/cargar-productos']);
+  }
+
 }
diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html
index 2ecb1fb..0a946bc 100644
--- a/src/app/sidebar/sidebar.component.html
+++ b/src/app/sidebar/sidebar.component.html
@@ -1,4 +1,4 @@
-< <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
+<div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
 
   <h4 class="border-bottom border-white"> Mi compra </h4>
 
@@ -39,4 +39,4 @@
       </div>
     </div>
   </div>
-  </div>
\ No newline at end of file
+</div>
\ No newline at end of file