diff --git a/client/src/components/Auth.vue b/client/src/components/Auth.vue
new file mode 100644
index 0000000..e4d1333
--- /dev/null
+++ b/client/src/components/Auth.vue
@@ -0,0 +1,33 @@
+<template>
+<div>
+<h1>Auth</h1>
+  <div id="firebaseui-auth-container"></div>
+
+</div>
+</template>
+
+<script>
+import firebase from "firebase";
+import firebaseui from "firebaseui";
+import { config } from "../helpers/firebaseConfig";
+
+export default {
+  name: "auth",
+  mounted() {
+    var uiConfig = {
+      signInSuccessUrl: "/success",
+      signInOptions: [
+        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+        firebase.auth.EmailAuthProvider.PROVIDER_ID
+        ]
+    };
+    var ui = new firebaseui.auth.AuthUI(firebase.auth());
+    ui.start("#firebaseui-auth-container", uiConfig);
+  },
+  
+};
+</script>
+
+<style>
+
+</style>
diff --git a/client/src/components/AuthSuccess.vue b/client/src/components/AuthSuccess.vue
new file mode 100644
index 0000000..bae7d0e
--- /dev/null
+++ b/client/src/components/AuthSuccess.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+      <h1>Success</h1>
+      <button @click='logOut'>Logout</button>
+     <!--  <img :src="photo" alt="photo"> -->
+      <p>{{name}}</p>
+  </div>
+</template>
+
+<script>
+import firebase from "firebase";
+
+export default {
+  data() {
+    return {
+      name: "",
+      photo: "",
+      user: {}
+    };
+  },
+  created() {
+    this.user = firebase.auth().currentUser;
+    if (this.user) {
+      this.name = this.user.displayName;
+      this.photo = this.user.photoURL;
+    }
+  },
+  methods: {
+    logOut() {
+      firebase.auth().signOut();
+    }
+  }
+};
+</script>
+
+<style>
+
+</style>
diff --git a/client/src/components/Home.vue b/client/src/components/Home.vue
new file mode 100644
index 0000000..f3a3e08
--- /dev/null
+++ b/client/src/components/Home.vue
@@ -0,0 +1,45 @@
+<template>
+<div class="contenedor">
+  <div class="elemento">
+  
+  <router-link tag="div" class="caps" v-bind:to="{name:'Ver',params: {slug: home.slug}}"
+    v-for="home in episodes" :key="home.title" >
+    <a :href="(`${home.imageCap}`)"><img class="episodeimage"  :src="(`${home.imageCap}`)"></a>
+    <h4>
+      {{ home.title | normalize | suspensivos }}
+    </h4>
+   </router-link> 
+  </div>
+</div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "home",
+  data() {
+    return {
+      episodes: [],
+      errors: []
+    };
+  },
+  async created() {
+    try {
+      const response = await axios
+        .get("http://localhost:9000/")
+        .then(response => {
+          console.log(response.data);
+          this.episodes = response.data;
+        });
+    } catch (e) {
+      this.errors.push(e);
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>
diff --git a/client/src/components/InfoSerie.vue b/client/src/components/InfoSerie.vue
new file mode 100644
index 0000000..3b0c7a7
--- /dev/null
+++ b/client/src/components/InfoSerie.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="anime">
+  <h3>Info Anime</h3>
+  <div><p><strong>Anime Name: </strong>{{  episodes.title }}</p></div> 
+  <h1>Episode</h1>
+  <ul>
+    <li  v-for="episode in episodes.episodes" :key="episode.episodes">
+      {{ episode.slug }}
+    </li>
+  </ul>
+    <h1>Genre</h1>
+  <ul>
+    <li  v-for="episode in episodes.tags" :key="episode.tags">
+      {{ episode }}
+    </li>
+  </ul>
+  <ul v-if="errors && errors.length">
+    <li v-for="error of errors" :key="error.errors">
+      {{error.message}}
+    </li>
+  </ul>
+  <button @click="volver">return</button>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "anime",
+  data() {
+    return {
+      episodes: [],
+      errors: []
+    };
+  },
+  methods:{
+    volver(){
+      this.$router.push({name: 'Series'});
+    }
+  },
+/* usarlo junto a child-route  
+ watch: {
+    async $route() {
+      let slug = this.$route.params.slug;
+      try {
+        const response = await axios
+          .get("http://localhost:9000/series/1/" + slug)
+          .then(response => {
+            console.log(response.data);
+            this.episodes = response.data;
+          });
+      } catch (e) {
+        this.errors.push(e);
+      }
+    }
+  }, */
+  async created() {
+    let slug = this.$route.params.slug;
+    try {
+      const response = await axios
+        .get("http://localhost:9000/series/1/" + slug)
+        .then(response => {
+          console.log(response.data);
+          this.episodes = response.data;
+        });
+    } catch (e) {
+      this.errors.push(e);
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/client/src/components/Series.vue b/client/src/components/Series.vue
new file mode 100644
index 0000000..1d39429
--- /dev/null
+++ b/client/src/components/Series.vue
@@ -0,0 +1,120 @@
+<template >
+<div class="contenedor">
+<template v-if="isloaded===false">
+      <p>Loading Data</p>
+</template>
+<div class="elemento">
+<router-link tag="div" class="sada1" v-bind:to="{name:'InfoSerie',params: {slug: serie.slug}}"
+      v-for="serie in paginate"  :key="serie.title" >
+      <a :href="(`${serie.slug}`)" class="card-link">  <img class="image" id="image-home" :src="(`${serie.cover}`)" alt="Card image cap"></a>
+      <h4 class="card-title">
+				{{ serie.title | normalize | suspensivos }}
+			</h4>
+    </router-link>
+</div>
+<div class="pagination">
+    <li v-for="pageNumber in totalPages" v-if="Math.abs(pageNumber - currentPage) < 3 || pageNumber == totalPages || pageNumber == 1" :key="pageNumber">
+    <a  ref="myBtn" id="myBtn" href="#" @click="setPage(pageNumber)" :class="{current: currentPage === pageNumber, last: (pageNumber == totalPages && Math.abs(pageNumber - currentPage) > 3), first:(pageNumber == 1 && Math.abs(pageNumber - currentPage) > 3)}">{{ pageNumber }}</a >
+    </li>
+</div>
+  <ul v-if="errors && errors.length">
+    <li v-for="error of errors" :key="error.errors">
+      {{error.message}}
+    </li>
+  </ul>
+ </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  created() {
+    this.getSeries();
+  },
+
+  data() {
+    return {
+      serieUrl: "http://localhost:9000/series/1",
+      series: [],
+      errors: [],
+      currentPage: 1,
+      itemsPerPage: 3,
+      resultCount: 0,
+      isloaded: false
+    };
+  },
+
+  computed: {
+    totalPages: function() {
+      return Math.ceil(this.resultCount / this.itemsPerPage);
+    },
+    paginate: function() {
+      if (this.isloaded === true) {
+        //middleware funciona igual sin el
+        if (!this.series || this.series.length != this.series.length) {
+          return;
+        }
+        this.resultCount = this.series.length;
+        if (this.currentPage >= this.totalPages) {
+          this.currentPage = this.totalPages;
+        }
+
+        const index = this.currentPage * this.itemsPerPage - this.itemsPerPage;
+        return this.series.slice(index, index + this.itemsPerPage);
+      }
+    }
+  },
+
+  watch: {
+    paginate: function(val) {
+      /* alert("yes, computed property changed"); */
+      console.log("changed");
+    }
+  },
+
+  methods: {
+    setPage: function(pageNumber) {
+      this.currentPage = pageNumber;
+    },
+
+    async getSeries() {
+      let self = this;
+      try {
+        const response = await axios
+          .get(this.serieUrl, { params: this.serieData })
+          .then(response => {
+            console.log(response.data);
+            this.series = response.data;
+            self.isloaded = true;
+          });
+      } catch (e) {
+        this.errors.push(e);
+      }
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.current {
+  color: red;
+}
+ul {
+  padding: 0;
+  list-style-type: none;
+}
+li {
+  display: inline;
+  margin: 5px 5px;
+}
+
+a.first::after {
+  content: "...";
+}
+
+a.last::before {
+  content: "...";
+}
+</style>