diff --git a/client/src/assets/css/app.css b/client/src/assets/css/app.css
new file mode 100644
index 0000000..ab8cdc5
--- /dev/null
+++ b/client/src/assets/css/app.css
@@ -0,0 +1,280 @@
+/*!
+STYLE GUIDE
+1. NAV-BAR
+2. Series
+3.
+*/
+
+#app {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-shadow: rgb(0, 0, 0) 0px 1px 1px;
+  text-align: center;
+  color: #ffffff;
+  font-size: 85%;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
+
+.caps {
+  margin-right: 20px;
+  margin-left: 20px;
+  margin-bottom: 25px;
+  
+}
+
+.episodeimage {
+  max-width: 200px;
+}
+body {
+  width: auto;
+  margin: auto;
+  padding: 0;
+}
+
+.image {
+  max-width: 220px;
+  max-height: 300px;
+}
+/* videoplayer */
+.container {
+  width: 880px;
+  margin-top: 15px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.elementoVideo {
+  color: rgb(255, 255, 255);
+  display: flex;
+  flex-flow: row wrap;
+  flex: 1 1 auto;
+}
+
+.elemento {
+  color: rgb(255, 255, 255);
+  margin: 10px;
+  width: auto;
+  text-align: center;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  flex: 1 1 auto;
+  align-items: baseline;
+  align-content: flex-start;
+}
+
+.elementoAnime {
+  color: rgb(255, 255, 255);
+  margin: 10px;
+  width: auto;
+  text-align: center;
+  display: flex;
+  /* height: auto; 
+  flex-basis: auto;*/
+  flex-flow: column wrap;
+  justify-content: flex-start;
+  /* que todos abarquen el 100% 
+  flex-grow:1;*/
+  /*  align-content: center; */
+  flex: 1 1 auto;
+}
+
+.elementoDash {
+  color: rgb(255, 255, 255);
+  margin: 10px;
+  width: auto;
+  text-align: center;
+  display: flex;
+  /* height: auto; 
+  flex-basis: auto;*/
+  flex-flow: column wrap;
+  justify-content: flex-start;
+  /* que todos abarquen el 100% 
+  flex-grow:1;*/
+  /*  align-content: center; */
+  flex: 1 1 auto;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.sada1 {
+  margin-right: 30px;
+  margin-left: 30px;
+}
+.contenedor {
+  background: #212121;
+  width: auto;
+  height: auto;
+  margin: auto;
+  /* Flexbox */
+  display: flex;
+  flex-flow: row wrap;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+header {
+  background: #263238;
+  width: 100%;
+  padding: 20px;
+  /* Flexbox */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+header .logo {
+  color: #ffffff;
+  font-size: 30px;
+}
+
+header .logo img {
+  width: 50px;
+  vertical-align: top;
+}
+
+header .logo a {
+  color: #ffffff;
+  text-decoration: none;
+  line-height: 50px;
+}
+
+header nav {
+  width: 50%;
+  /* Flexbox */
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+header nav a {
+  background: #455a64;
+  color: #ffffff;
+  text-align: center;
+  text-decoration: none;
+  padding: 10px;
+
+  /* Flexbox */
+  flex-grow: 1;
+}
+
+header nav a:hover {
+  background: #78909c;
+}
+
+footer {
+  background: #263238;
+  width: 100%;
+  padding: 20px;
+  /* Flexbox */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+footer .links {
+  background: #455a64;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+footer .links a {
+  flex-grow: 1;
+
+  color: #ffffff;
+  padding: 10px;
+  text-align: center;
+  text-decoration: none;
+}
+
+footer .links a:hover {
+  background: #78909c;
+}
+
+footer .social {
+  background: #455a64;
+}
+
+footer .social a {
+  color: #ffffff;
+  text-decoration: none;
+  padding: 10px;
+  display: inline-block;
+}
+
+@media screen and (max-width: 800px) {
+  .contenedor {
+    flex-direction: column;
+  }
+
+  header {
+    flex-direction: column;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  header .logo {
+    margin: 20px 0;
+  }
+
+  header nav {
+    width: 100%;
+  }
+}
+
+.pagination {
+  display: flex;
+  flex: 1 1 auto;
+  align-self: center;
+}
+.pagination a {
+  color: #ffffff;
+  padding: 8px 16px;
+  text-decoration: none;
+}
+
+.pagination a.active {
+  background-color: #455a64;
+  color: white;
+  border-radius: 5px;
+}
+
+.pagination a:hover:not(.active) {
+  background-color: #78909c;
+  border-radius: 5px;
+}
+
+@media screen and (max-width: 700px) {
+  .sada1 {
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  footer {
+    justify-content: space-around;
+  }
+}
+
+/* Series */
+
+#dash {
+  color: #ffffff;
+}