diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b0f672..190467d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { SettingsService } from './services/service.index';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,8 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'app';
+
+  constructor(public _ajustesSetting: SettingsService) {
+
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3cd8e66..06a97ab 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,10 +9,15 @@ import { PagesModule } from './pages/pages.module';
 //Rutas
 import { APP_ROUTES } from './app.routes';
 
+// Servicios
+//import { SettingsService } from './services/settings/settings.service';
+import { ServiceModule } from './services/service.module';
+
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './login/register.component';
 
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -23,7 +28,8 @@ import { RegisterComponent } from './login/register.component';
     BrowserModule,
     APP_ROUTES,
     PagesModule,
-    FormsModule
+    FormsModule,
+    ServiceModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 8181757..29d29df 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -4,7 +4,7 @@
 <section id="wrapper" class="login-register login-sidebar" style="background-image:url(../assets/images/background/login-register.jpg);">
   <div class="login-box card">
       <div class="card-body">
-          <form class="form-horizontal form-material" id="loginform" action="index.html">
+          <form class="form-horizontal form-material" id="loginform" action="index.html" (ngSubmit)="ingresar()">
               <a href="javascript:void(0)" class="text-center db"><img src="../assets/images/logo-icon.png" alt="Home" /><br/><img src="../assets/images/logo-text.png" alt="Home" /></a>
               <div class="form-group m-t-40">
                   <div class="col-xs-12">
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 5701fa2..1517996 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+declare function init_plugins_jquery();
 
 @Component({
   selector: 'app-login',
@@ -7,9 +10,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+  constructor(public router: Router) { }
 
   ngOnInit() {
+    init_plugins_jquery();
+  }
+
+  ingresar() {
+    console.log('aqiu');
+    this.router.navigate(['/dashboard']);
   }
 
 }
diff --git a/src/app/pages/account-settings/account-settings.component.html b/src/app/pages/account-settings/account-settings.component.html
new file mode 100644
index 0000000..76d8c0f
--- /dev/null
+++ b/src/app/pages/account-settings/account-settings.component.html
@@ -0,0 +1,30 @@
+<div class="row">
+  <div class="col-6">
+    <div class="card">
+      <div class="card-body">
+        <h4 clas="card-title">Temas</h4>
+        <hr>
+        <div class="r-panel-body">
+          <ul id="themecolors" class="m-t-20">
+              <li><b>Con el sidebar claro</b></li>
+              <li><a #link1 (click)="cambiarColor('green', link1)" class="selector green-theme">2</a></li>
+              <li><a #link2 (click)="cambiarColor('default', link2)" class="selector default-theme">1</a></li>
+              <li><a #link3 (click)="cambiarColor('red', link3)" class="selector red-theme">3</a></li>
+              <li><a #link4 (click)="cambiarColor('blue', link4)" class="selector blue-theme">4</a></li>
+              <li><a #link5 (click)="cambiarColor('purple', link5)" class="selector purple-theme">5</a></li>
+              <li><a #link6 (click)="cambiarColor('megna', link6)" class="selector megna-theme">6</a></li>
+
+              <li class="d-block m-t-30"><b>Con el sidebar oscuro</b></li>
+              <li><a #link7 (click)="cambiarColor('default-dark', link7)" class="selector default-dark-theme">7</a></li>
+              <li><a #link8 (click)="cambiarColor('green-dark', link8)" class="selector green-dark-theme">8</a></li>
+              <li><a #link9 (click)="cambiarColor('red-dark', link9)" class="selector red-dark-theme">9</a></li>
+              <li><a #link10 (click)="cambiarColor('blue-dark', link10)" class="selector blue-dark-theme">10</a></li>
+              <li><a #link11 (click)="cambiarColor('purple-dark', link11)" class="selector purple-dark-theme">11</a></li>
+              <li><a #link12 (click)="cambiarColor('megna-dark', link12)" class="selector megna-dark-theme">12</a></li>
+          </ul>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/pages/account-settings/account-settings.component.ts b/src/app/pages/account-settings/account-settings.component.ts
new file mode 100644
index 0000000..a29b706
--- /dev/null
+++ b/src/app/pages/account-settings/account-settings.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { SettingsService } from '../../services/service.index';
+
+@Component({
+  selector: 'app-account-settings',
+  templateUrl: './account-settings.component.html',
+  styles: []
+})
+export class AccountSettingsComponent implements OnInit {
+  estilos: string = 'selector ';
+
+  constructor(public _ajustesService: SettingsService) {}
+
+  ngOnInit() {
+    this.colocarCheckAlInicio();
+  }
+
+  cambiarColor(tema, link) {
+    this._ajustesService.aplicarTema(tema);
+    this.aplicarCheck(link);
+  }
+
+  aplicarCheck(link) {
+    link.classList.add('working');
+    const links: Array<HTMLElement> = Array.from(document.getElementsByClassName('selector'));
+    links.forEach((el) => el.classList.remove('working'));
+  }
+
+  colocarCheckAlInicio() {
+    const link = document.getElementsByClassName(`${this._ajustesService.ajustes.tema}-theme`)[0];
+    link.classList.add('working');
+  }
+
+}
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index 5333869..d7c327f 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
+
+declare function init_plugins_jquery();
 @Component({
   selector: 'app-pages',
   templateUrl: './pages.component.html',
@@ -10,6 +12,7 @@ export class PagesComponent implements OnInit {
   constructor() { }
 
   ngOnInit() {
+    init_plugins_jquery();
   }
 
 }
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index 5a2e383..6f2b329 100644
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@@ -20,6 +20,7 @@ import { FormsModule } from '@angular/forms';
 
 // ng2-charts
 import { ChartsModule } from 'ng2-charts';
+import { AccountSettingsComponent } from './account-settings/account-settings.component';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { ChartsModule } from 'ng2-charts';
     ProgressComponent,
     IncrementadorComponent,
     GraficoDonaComponent,
+    AccountSettingsComponent,
   ],
   exports: [
     PagesComponent,
diff --git a/src/app/pages/pages.routes.ts b/src/app/pages/pages.routes.ts
index 66106a7..0859318 100644
--- a/src/app/pages/pages.routes.ts
+++ b/src/app/pages/pages.routes.ts
@@ -4,6 +4,7 @@ import { PagesComponent } from "./pages.component";
 import { DashboardComponent } from "./dashboard/dashboard.component";
 import { ProgressComponent } from "./progress/progress.component";
 import { Graficas1Component } from "./graficas1/graficas1.component";
+import { AccountSettingsComponent } from './account-settings/account-settings.component';
 
 const pagesRoutes: Routes = [
   {
@@ -13,6 +14,7 @@ const pagesRoutes: Routes = [
       {path: 'dashboard', component: DashboardComponent},
       {path: 'progress', component: ProgressComponent},
       {path: 'graficas1', component: Graficas1Component},
+      {path: 'account-settings', component: AccountSettingsComponent},
       {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
     ]
   },
diff --git a/src/app/services/service.index.ts b/src/app/services/service.index.ts
new file mode 100644
index 0000000..e402aa4
--- /dev/null
+++ b/src/app/services/service.index.ts
@@ -0,0 +1,3 @@
+export { SettingsService } from './settings/settings.service';
+export { SharedService } from './shared/shared.service';
+export { SidebarService } from './shared/sidebar.service';
diff --git a/src/app/services/service.module.ts b/src/app/services/service.module.ts
new file mode 100644
index 0000000..3c492e8
--- /dev/null
+++ b/src/app/services/service.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  SharedService,
+  SidebarService,
+  SettingsService
+} from './service.index';
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [],
+  providers: [
+    SharedService,
+    SidebarService,
+    SettingsService
+  ]
+})
+
+export class ServiceModule { }
diff --git a/src/app/services/settings/settings.service.ts b/src/app/services/settings/settings.service.ts
new file mode 100644
index 0000000..c735d48
--- /dev/null
+++ b/src/app/services/settings/settings.service.ts
@@ -0,0 +1,38 @@
+import { Injectable, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
+
+@Injectable()
+export class SettingsService {
+
+  ajustes: Ajustes = {
+    temaUrl: 'assets/css/color/default.css',
+    tema: 'default'
+  };
+
+  constructor(@Inject(DOCUMENT) private _document) {
+    this.cargarAjustes();
+  }
+
+  guardarAjustes() {
+    localStorage.setItem('ajustes', JSON.stringify(this.ajustes));
+  }
+
+  cargarAjustes() {
+    this.ajustes = JSON.parse(localStorage.getItem('ajustes')) || this.ajustes;
+    this.aplicarTema(this.ajustes.tema);
+  }
+
+  aplicarTema(tema) {
+    const url = `assets/css/colors/${tema}.css`;
+    this._document.getElementById('tema').setAttribute('href', url);
+
+    this.ajustes.tema = tema;
+    this.ajustes.temaUrl = url;
+    this.guardarAjustes();
+  }
+}
+
+interface Ajustes {
+  temaUrl: string;
+  tema: string;
+}
diff --git a/src/app/services/shared.service.ts b/src/app/services/shared/shared.service.ts
similarity index 100%
rename from src/app/services/shared.service.ts
rename to src/app/services/shared/shared.service.ts
diff --git a/src/app/services/shared/sidebar.service.ts b/src/app/services/shared/sidebar.service.ts
new file mode 100644
index 0000000..f728bec
--- /dev/null
+++ b/src/app/services/shared/sidebar.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class SidebarService {
+  menu: Array<Object> = [
+    {
+      titulo: 'Principal',
+      icono: 'mdi mdi-guage',
+      submenu: [
+        { titulo: 'Dashboard', url: '/dashboard' },
+        { titulo: 'ProgressBar', url: '/progress' },
+        { titulo: 'Gráficas', url: '/graficas1' },
+      ]
+    }];
+
+  constructor() { }
+
+}
diff --git a/src/app/services/sidebar.service.ts b/src/app/services/sidebar.service.ts
deleted file mode 100644
index 4f3e684..0000000
--- a/src/app/services/sidebar.service.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class SidebarService {
-
-  constructor() { }
-
-}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 62ed970..bbb0f36 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,10 +1,16 @@
 import { NgModule } from "@angular/core";
+import { RouterModule } from '@angular/router';
+import { CommonModule } from "@angular/common";
+
 import { NopagefoundComponent } from "./nopagefound/nopagefound.component";
 import { HeaderComponent } from "./header/header.component";
 import { SidebarComponent } from "./sidebar/sidebar.component";
 import { BreadcrumbsComponent } from "./breadcrumbs/breadcrumbs.component";
 
 @NgModule({
+  imports: [
+    RouterModule,
+    CommonModule],
   declarations: [
     NopagefoundComponent,
     HeaderComponent,
diff --git a/src/app/shared/sidebar/sidebar.component.html b/src/app/shared/sidebar/sidebar.component.html
index af385ef..9c9d191 100644
--- a/src/app/shared/sidebar/sidebar.component.html
+++ b/src/app/shared/sidebar/sidebar.component.html
@@ -13,18 +13,19 @@
                         <li><a href="javascript:void()">My Profile </a></li>
                         <li><a href="javascript:void()">My Balance</a></li>
                         <li><a href="javascript:void()">Inbox</a></li>
-                        <li><a href="javascript:void()">Account Setting</a></li>
-                        <li><a href="javascript:void()">Logout</a></li>
+                        <li><a routerLinkActive routerLink="/account-settings">Account Setting</a></li>
+                        <li><a routerLink="/login">Logout</a></li>
                     </ul>
                 </li>
                 <li class="nav-devider"></li>
                 <li class="nav-small-cap">PERSONAL</li>
-                <li> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-gauge"></i><span class="hide-menu">Dashboard <span class="label label-rouded label-themecolor pull-right">4</span></span></a>
+
+                <li *ngFor="let menu of _sidebar.menu">
+                  <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i [class]="menu.icono"></i><span class="hide-menu">{{menu.titulo}} <span class="label label-rouded label-themecolor pull-right">{{menu.submenu.length}}</span></span></a>
                     <ul aria-expanded="false" class="collapse">
-                        <li><a href="index.html">Minimal </a></li>
-                        <li><a href="index2.html">Analytical</a></li>
-                        <li><a href="index3.html">Demographical</a></li>
-                        <li><a href="index4.html">Modern</a></li>
+                        <li *ngFor="let submenu of menu.submenu">
+                          <a routerLinkActive="active" [routerLink]="[submenu.url]">{{submenu.titulo}} </a>
+                        </li>
                     </ul>
                 </li>
             </ul>
diff --git a/src/app/shared/sidebar/sidebar.component.ts b/src/app/shared/sidebar/sidebar.component.ts
index 1e7e527..2c2b139 100644
--- a/src/app/shared/sidebar/sidebar.component.ts
+++ b/src/app/shared/sidebar/sidebar.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { SidebarService } from '../../services/service.index';
 
 @Component({
   selector: 'app-sidebar',
@@ -7,7 +8,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SidebarComponent implements OnInit {
 
-  constructor() { }
+  constructor( public _sidebar: SidebarService) { }
 
   ngOnInit() {
   }
diff --git a/src/assets/js/custom.js b/src/assets/js/custom.js
index ac3a3f7..5a992f5 100644
--- a/src/assets/js/custom.js
+++ b/src/assets/js/custom.js
@@ -4,154 +4,156 @@ Author: Wrappixel
 Email: niravjoshi87@gmail.com
 File: js
 */
-$(function() {
+function init_plugins_jquery() {
+  $(function () {
     "use strict";
-    $(function() {
-        $(".preloader").fadeOut();
+    $(function () {
+      $(".preloader").fadeOut();
     });
-    jQuery(document).on('click', '.mega-dropdown', function(e) {
-        e.stopPropagation()
+    jQuery(document).on('click', '.mega-dropdown', function (e) {
+      e.stopPropagation()
     });
-    // ============================================================== 
+    // ==============================================================
     // This is for the top header part and sidebar part
-    // ==============================================================  
-    var set = function() {
-        var width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width;
-        var topOffset = 0;
-        if (width < 1170) {
-            $("body").addClass("mini-sidebar");
-            $('.navbar-brand span').hide();
-            $(".sidebartoggler i").addClass("ti-menu");
-        } else {
-            $("body").removeClass("mini-sidebar");
-            $('.navbar-brand span').show();
-        }
+    // ==============================================================
+    var set = function () {
+      var width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width;
+      var topOffset = 0;
+      if (width < 1170) {
+        $("body").addClass("mini-sidebar");
+        $('.navbar-brand span').hide();
+        $(".sidebartoggler i").addClass("ti-menu");
+      } else {
+        $("body").removeClass("mini-sidebar");
+        $('.navbar-brand span').show();
+      }
 
-        var height = ((window.innerHeight > 0) ? window.innerHeight : this.screen.height) - 1;
-        height = height - topOffset;
-        if (height < 1) height = 1;
-        if (height > topOffset) {
-            $(".page-wrapper").css("min-height", (height) + "px");
-        }
+      var height = ((window.innerHeight > 0) ? window.innerHeight : this.screen.height) - 1;
+      height = height - topOffset;
+      if (height < 1) height = 1;
+      if (height > topOffset) {
+        $(".page-wrapper").css("min-height", (height) + "px");
+      }
 
     };
     $(window).ready(set);
     $(window).on("resize", set);
 
-    // ============================================================== 
+    // ==============================================================
     // Theme options
-    // ==============================================================     
-    $(".sidebartoggler").on('click', function() {
-        if ($("body").hasClass("mini-sidebar")) {
-            $("body").trigger("resize");
-            $("body").removeClass("mini-sidebar");
-            $('.navbar-brand span').show();
-            
-        } else {
-            $("body").trigger("resize");
-            $("body").addClass("mini-sidebar");
-            $('.navbar-brand span').hide();
-            
-        }
+    // ==============================================================
+    $(".sidebartoggler").on('click', function () {
+      if ($("body").hasClass("mini-sidebar")) {
+        $("body").trigger("resize");
+        $("body").removeClass("mini-sidebar");
+        $('.navbar-brand span').show();
+
+      } else {
+        $("body").trigger("resize");
+        $("body").addClass("mini-sidebar");
+        $('.navbar-brand span').hide();
+
+      }
     });
 
     // this is for close icon when navigation open in mobile view
-    $(".nav-toggler").click(function() {
-        $("body").toggleClass("show-sidebar");
-        $(".nav-toggler i").toggleClass("ti-menu");
-        $(".nav-toggler i").addClass("ti-close");
+    $(".nav-toggler").click(function () {
+      $("body").toggleClass("show-sidebar");
+      $(".nav-toggler i").toggleClass("ti-menu");
+      $(".nav-toggler i").addClass("ti-close");
     });
 
-    $(".search-box a, .search-box .app-search .srh-btn").on('click', function() {
-        $(".app-search").toggle(200);
+    $(".search-box a, .search-box .app-search .srh-btn").on('click', function () {
+      $(".app-search").toggle(200);
     });
-    // ============================================================== 
+    // ==============================================================
     // Right sidebar options
-    // ============================================================== 
-    $(".right-side-toggle").click(function() {
-        $(".right-sidebar").slideDown(50);
-        $(".right-sidebar").toggleClass("shw-rside");
+    // ==============================================================
+    $(".right-side-toggle").click(function () {
+      $(".right-sidebar").slideDown(50);
+      $(".right-sidebar").toggleClass("shw-rside");
     });
-    // ============================================================== 
+    // ==============================================================
     // This is for the floating labels
-    // ============================================================== 
-    $('.floating-labels .form-control').on('focus blur', function(e) {
-        $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
+    // ==============================================================
+    $('.floating-labels .form-control').on('focus blur', function (e) {
+      $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
     }).trigger('blur');
 
-    // ============================================================== 
+    // ==============================================================
     // Auto select left navbar
-    // ============================================================== 
-    $(function() {
-        var url = window.location;
-        var element = $('ul#sidebarnav a').filter(function() {
-            return this.href == url;
-        }).addClass('active').parent().addClass('active');
-        while (true) {
-            if (element.is('li')) {
-                element = element.parent().addClass('in').parent().addClass('active');
-            } else {
-                break;
-            }
+    // ==============================================================
+    $(function () {
+      var url = window.location;
+      var element = $('ul#sidebarnav a').filter(function () {
+        return this.href == url;
+      }).addClass('active').parent().addClass('active');
+      while (true) {
+        if (element.is('li')) {
+          element = element.parent().addClass('in').parent().addClass('active');
+        } else {
+          break;
         }
+      }
 
     });
-    // ============================================================== 
+    // ==============================================================
     //tooltip
-    // ============================================================== 
-    $(function() {
-        $('[data-toggle="tooltip"]').tooltip()
+    // ==============================================================
+    $(function () {
+      $('[data-toggle="tooltip"]').tooltip()
     })
-    // ============================================================== 
+    // ==============================================================
     //Popover
-    // ============================================================== 
-    $(function() {
-        $('[data-toggle="popover"]').popover()
+    // ==============================================================
+    $(function () {
+      $('[data-toggle="popover"]').popover()
     })
-    // ============================================================== 
+    // ==============================================================
     // Sidebarmenu
-    // ============================================================== 
-    $(function() {
-        $('#sidebarnav').AdminMenu();
+    // ==============================================================
+    $(function () {
+      $('#sidebarnav').AdminMenu();
     });
 
-    // ============================================================== 
+    // ==============================================================
     // Perfact scrollbar
-    // ============================================================== 
+    // ==============================================================
     $('.scroll-sidebar, .right-side-panel, .message-center, .right-sidebar').perfectScrollbar();
-    
-    // ============================================================== 
+
+    // ==============================================================
     // Resize all elements
-    // ============================================================== 
+    // ==============================================================
     $("body").trigger("resize");
-    // ============================================================== 
+    // ==============================================================
     // To do list
-    // ============================================================== 
-    $(".list-task li label").click(function() {
-        $(this).toggleClass("task-done");
+    // ==============================================================
+    $(".list-task li label").click(function () {
+      $(this).toggleClass("task-done");
     });
 
-    
 
-    // ============================================================== 
+
+    // ==============================================================
     // Collapsable cards
     // ==============================================================
-    $('a[data-action="collapse"]').on('click', function(e) {
-        e.preventDefault();
-        $(this).closest('.card').find('[data-action="collapse"] i').toggleClass('ti-minus ti-plus');
-        $(this).closest('.card').children('.card-body').collapse('toggle');
+    $('a[data-action="collapse"]').on('click', function (e) {
+      e.preventDefault();
+      $(this).closest('.card').find('[data-action="collapse"] i').toggleClass('ti-minus ti-plus');
+      $(this).closest('.card').children('.card-body').collapse('toggle');
 
     });
     // Toggle fullscreen
-    $('a[data-action="expand"]').on('click', function(e) {
-        e.preventDefault();
-        $(this).closest('.card').find('[data-action="expand"] i').toggleClass('mdi-arrow-expand mdi-arrow-compress');
-        $(this).closest('.card').toggleClass('card-fullscreen');
+    $('a[data-action="expand"]').on('click', function (e) {
+      e.preventDefault();
+      $(this).closest('.card').find('[data-action="expand"] i').toggleClass('mdi-arrow-expand mdi-arrow-compress');
+      $(this).closest('.card').toggleClass('card-fullscreen');
     });
 
     // Close Card
-    $('a[data-action="close"]').on('click', function() {
-        $(this).closest('.card').removeClass().slideUp('fast');
+    $('a[data-action="close"]').on('click', function () {
+      $(this).closest('.card').removeClass().slideUp('fast');
     });
 
-});
\ No newline at end of file
+  });
+}
diff --git a/src/index.html b/src/index.html
index 366a977..bde7943 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,7 +13,7 @@
   <!-- Custom CSS -->
   <link href="assets/css/style.css" rel="stylesheet">
   <!-- You can change the theme colors from here -->
-  <link href="assets/css/colors/default-dark.css" id="theme" rel="stylesheet">
+  <link id="tema" href="assets/css/colors/purple-dark.css" id="theme" rel="stylesheet">
 </head>
 <body class="fix-header card-no-border fix-sidebar">
   <!-- ============================================================== -->
@@ -43,7 +43,7 @@
     <script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
     <script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
     <!--Custom JavaScript -->
-    <script src="assets/js/custom.min.js"></script>
+    <script src="assets/js/custom.js"></script>
     <!-- ============================================================== -->
     <!-- Style switcher -->
     <!-- ============================================================== -->
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..5d7791a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+#themecolors a {
+  cursor: pointer;
+}