diff --git a/angular.json b/angular.json
index 4deb648..e4b7f1e 100644
--- a/angular.json
+++ b/angular.json
@@ -123,6 +123,10 @@
           }
         }
       }
-    }},
-  "defaultProject": "ng-peti"
-}
+    }
+  },
+  "defaultProject": "ng-peti",
+  "cli": {
+    "analytics": false
+  }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 512f702..b5d3a6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -173,16 +173,29 @@
       }
     },
     "@angular-devkit/schematics": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-9.1.1.tgz",
-      "integrity": "sha512-6wx2HcvafHvEjEa1tjDzW2hXrOiSE8ALqJUArb3+NoO1BDM42aGcqyPo0ODzKtDk12CgSsFXdNKRpQ5AmpSPtw==",
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-9.1.9.tgz",
+      "integrity": "sha512-aKuMmS3wshOTl9+01jiB50ml09fRN1WfOOtoNqwvKTEi87DrT6Mn3l0eVQo8PJK/bIq/FBmPgsIl2nsETiBSxg==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "9.1.1",
+        "@angular-devkit/core": "9.1.9",
         "ora": "4.0.3",
         "rxjs": "6.5.4"
       },
       "dependencies": {
+        "@angular-devkit/core": {
+          "version": "9.1.9",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.9.tgz",
+          "integrity": "sha512-SWgBh4an/Vezjw2BZ5S+bKvuK5lH6gOtR8d5YjN9vxpJSZ0GimrGjfnLlWOkwWAsU8jfn4JzofECUHwX/7EW6Q==",
+          "dev": true,
+          "requires": {
+            "ajv": "6.12.0",
+            "fast-json-stable-stringify": "2.1.0",
+            "magic-string": "0.25.7",
+            "rxjs": "6.5.4",
+            "source-map": "0.7.3"
+          }
+        },
         "rxjs": {
           "version": "6.5.4",
           "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
@@ -200,16 +213,16 @@
       "integrity": "sha512-IvKv8sV0ymbzDEX2ZLW+F6nOTQqDYallHexuzRVT9txvNE8TNHyySvLcyC5dTmX9fj9LA72NZ6nFyhxq0LFvtQ=="
     },
     "@angular/cli": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.1.tgz",
-      "integrity": "sha512-sjRAV4UF8M5v+2gw+EwCYSgciBZDc05AbNxQt+uUdxdfR1QU9hifWq8WDxfOR6jdDP5YqMtQsNaFNwrUyjJJoQ==",
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.9.tgz",
+      "integrity": "sha512-k8C0OY3oHoixd3buCgF8+VFe8YZGSGiprnbVMEF2WJHUUw87lPCu/d7dbID3AtVwdKdAB275rAt6IZEIzXInbw==",
       "dev": true,
       "requires": {
-        "@angular-devkit/architect": "0.901.1",
-        "@angular-devkit/core": "9.1.1",
-        "@angular-devkit/schematics": "9.1.1",
-        "@schematics/angular": "9.1.1",
-        "@schematics/update": "0.901.1",
+        "@angular-devkit/architect": "0.901.9",
+        "@angular-devkit/core": "9.1.9",
+        "@angular-devkit/schematics": "9.1.9",
+        "@schematics/angular": "9.1.9",
+        "@schematics/update": "0.901.9",
         "@yarnpkg/lockfile": "1.1.0",
         "ansi-colors": "4.1.1",
         "debug": "4.1.1",
@@ -227,12 +240,44 @@
         "uuid": "7.0.2"
       },
       "dependencies": {
+        "@angular-devkit/architect": {
+          "version": "0.901.9",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.901.9.tgz",
+          "integrity": "sha512-Xokyh7bv4qICHpb5Xui1jPTi6ZZvzR5tbTIxT0DFWqw16TEkFgkNubQsW6mFSR3g3CXdySMfOwWExfa/rE1ggA==",
+          "dev": true,
+          "requires": {
+            "@angular-devkit/core": "9.1.9",
+            "rxjs": "6.5.4"
+          }
+        },
+        "@angular-devkit/core": {
+          "version": "9.1.9",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.9.tgz",
+          "integrity": "sha512-SWgBh4an/Vezjw2BZ5S+bKvuK5lH6gOtR8d5YjN9vxpJSZ0GimrGjfnLlWOkwWAsU8jfn4JzofECUHwX/7EW6Q==",
+          "dev": true,
+          "requires": {
+            "ajv": "6.12.0",
+            "fast-json-stable-stringify": "2.1.0",
+            "magic-string": "0.25.7",
+            "rxjs": "6.5.4",
+            "source-map": "0.7.3"
+          }
+        },
         "ansi-colors": {
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
           "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
           "dev": true
         },
+        "rxjs": {
+          "version": "6.5.4",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
+          "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.9.0"
+          }
+        },
         "uuid": {
           "version": "7.0.2",
           "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz",
@@ -242,9 +287,9 @@
       }
     },
     "@angular/common": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-9.1.1.tgz",
-      "integrity": "sha512-bS13veMs7//YqYjYJ+JI78ylaCyVcdFKZKikd5SZa6+r6fajcyvLnSKqrKypG3O1BeJ8vOG/Pq54P5gWhbR6eA=="
+      "version": "9.1.11",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-9.1.11.tgz",
+      "integrity": "sha512-Vh5lF7zWwDK9RedmYXUc8vUXyrecR3j1mAWlTlnmcHYxxFThPzN/dr0slQcPi6nyJn0EmyRKUGvAoZx4rIb7wg=="
     },
     "@angular/compiler": {
       "version": "9.1.1",
@@ -464,6 +509,14 @@
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.1.tgz",
       "integrity": "sha512-NX+LuK8JFisiq3uHCOK6YoN/yIb2R9Ye5mwiOPkuZA3lZLKCnUXqCHZbM8VHy/WdjIxxeUaFMJc38yV8RVoabg=="
     },
+    "@angular/http": {
+      "version": "7.2.16",
+      "resolved": "https://registry.npmjs.org/@angular/http/-/http-7.2.16.tgz",
+      "integrity": "sha512-yvjbNyzFSmmz4UTjCdy5M8mk0cZqf9TvSf8yN5UVIwtw4joyuUdlgJCuin0qSbQOKIf/JjHoofpO2JkPCGSNww==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "@angular/language-service": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-9.1.1.tgz",
@@ -1520,23 +1573,47 @@
       }
     },
     "@schematics/angular": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.1.tgz",
-      "integrity": "sha512-V0DcDNgHQ2YR+PGZI6+pf/mUNNxt5SusShkZ1PbwIMk/HUQpzEGkLjm3v1Jw9eIZKiuDx615GNU1xDzQ/KyNRQ==",
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.9.tgz",
+      "integrity": "sha512-c8YGZ6pDfr8IDD1qaOjlEBAkEz14KFSxDj0hCWs0xIM0py513tu5sW8+ziYxGG4bgqpsgVR/KAxuY78iBfUVag==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "9.1.1",
-        "@angular-devkit/schematics": "9.1.1"
+        "@angular-devkit/core": "9.1.9",
+        "@angular-devkit/schematics": "9.1.9"
+      },
+      "dependencies": {
+        "@angular-devkit/core": {
+          "version": "9.1.9",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.9.tgz",
+          "integrity": "sha512-SWgBh4an/Vezjw2BZ5S+bKvuK5lH6gOtR8d5YjN9vxpJSZ0GimrGjfnLlWOkwWAsU8jfn4JzofECUHwX/7EW6Q==",
+          "dev": true,
+          "requires": {
+            "ajv": "6.12.0",
+            "fast-json-stable-stringify": "2.1.0",
+            "magic-string": "0.25.7",
+            "rxjs": "6.5.4",
+            "source-map": "0.7.3"
+          }
+        },
+        "rxjs": {
+          "version": "6.5.4",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
+          "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.9.0"
+          }
+        }
       }
     },
     "@schematics/update": {
-      "version": "0.901.1",
-      "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.901.1.tgz",
-      "integrity": "sha512-g5B8hjXKCbUNLKCkWQxc5r2D9lOQXRTLZJNIqva+l/ck0AML5MpelxkqQId9ZGLfQqfFk/XjdSHRWgcmUs1WnA==",
+      "version": "0.901.9",
+      "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.901.9.tgz",
+      "integrity": "sha512-VChX0VO/oyfCF3y+HjMTU2qN3vGgJYxEI1V+Q9aAlwl95t3GAufuaFY1CNW3YV4XkYIjD88e3yWl8d5yO4qf4w==",
       "dev": true,
       "requires": {
-        "@angular-devkit/core": "9.1.1",
-        "@angular-devkit/schematics": "9.1.1",
+        "@angular-devkit/core": "9.1.9",
+        "@angular-devkit/schematics": "9.1.9",
         "@yarnpkg/lockfile": "1.1.0",
         "ini": "1.3.5",
         "npm-package-arg": "^8.0.0",
@@ -1546,6 +1623,19 @@
         "semver-intersect": "1.4.0"
       },
       "dependencies": {
+        "@angular-devkit/core": {
+          "version": "9.1.9",
+          "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.9.tgz",
+          "integrity": "sha512-SWgBh4an/Vezjw2BZ5S+bKvuK5lH6gOtR8d5YjN9vxpJSZ0GimrGjfnLlWOkwWAsU8jfn4JzofECUHwX/7EW6Q==",
+          "dev": true,
+          "requires": {
+            "ajv": "6.12.0",
+            "fast-json-stable-stringify": "2.1.0",
+            "magic-string": "0.25.7",
+            "rxjs": "6.5.4",
+            "source-map": "0.7.3"
+          }
+        },
         "rxjs": {
           "version": "6.5.4",
           "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
@@ -1934,6 +2024,11 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "angular": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/angular/-/angular-1.8.0.tgz",
+      "integrity": "sha512-VdaMx+Qk0Skla7B5gw77a8hzlcOakwF8mjlW13DpIWIDlfqwAbSSLfd8N/qZnzEmQF4jC4iofInd3gE7vL8ZZg=="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -2492,6 +2587,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
+      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2929,9 +3029,9 @@
       "dev": true
     },
     "cli-width": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
-      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
+      "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
       "dev": true
     },
     "cliui": {
@@ -6065,12 +6165,6 @@
         "isobject": "^3.0.1"
       }
     },
-    "is-promise": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
-      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
-      "dev": true
-    },
     "is-regex": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
@@ -7593,9 +7687,9 @@
       }
     },
     "npm-registry-fetch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz",
-      "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.4.tgz",
+      "integrity": "sha512-6jb34hX/iYNQebqWUHtU8YF6Cjb1H6ouTFPClYsyiW6lpFkljTpdeftm53rRojtja1rKAvKNIIiTS5Sjpw4wsA==",
       "dev": true,
       "requires": {
         "JSONStream": "^1.3.4",
@@ -7626,9 +7720,9 @@
           }
         },
         "safe-buffer": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz",
-          "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==",
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
           "dev": true
         },
         "semver": {
@@ -9865,13 +9959,10 @@
       }
     },
     "run-async": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.0.tgz",
-      "integrity": "sha512-xJTbh/d7Lm7SBhc1tNvTpeCHaEzoyxPrqNlvSdMfBTYwaY++UJFyXUOxAtsRUXjlqOfj8luNaR9vjCh4KeV+pg==",
-      "dev": true,
-      "requires": {
-        "is-promise": "^2.1.0"
-      }
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
+      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
+      "dev": true
     },
     "run-queue": {
       "version": "1.0.3",
@@ -10731,9 +10822,9 @@
       "dev": true
     },
     "spdx-correct": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
-      "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
       "dev": true,
       "requires": {
         "spdx-expression-parse": "^3.0.0",
@@ -10741,15 +10832,15 @@
       }
     },
     "spdx-exceptions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz",
-      "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
       "dev": true
     },
     "spdx-expression-parse": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
-      "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
       "dev": true,
       "requires": {
         "spdx-exceptions": "^2.1.0",
diff --git a/package.json b/package.json
index 4ef96ff..9ce98da 100644
--- a/package.json
+++ b/package.json
@@ -12,26 +12,28 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~9.1.1",
-    "@angular/common": "~9.1.1",
+    "@angular/common": "^9.1.11",
     "@angular/compiler": "~9.1.1",
     "@angular/core": "~9.1.1",
     "@angular/forms": "~9.1.1",
+    "@angular/http": "^7.2.16",
     "@angular/platform-browser": "~9.1.1",
     "@angular/platform-browser-dynamic": "~9.1.1",
     "@angular/router": "~9.1.1",
-    "@angular/http": "~9.1.1",
+    "angular": "^1.8.0",
+    "bootstrap": "^4.5.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.901.1",
-    "@angular/cli": "~9.1.1",
+    "@angular/cli": "^9.1.9",
     "@angular/compiler-cli": "~9.1.1",
     "@angular/language-service": "~9.1.1",
-    "@types/node": "^12.11.1",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
diff --git a/src/app/articles.service.ts b/src/app/articles.service.ts
index 060f616..0ff5e45 100644
--- a/src/app/articles.service.ts
+++ b/src/app/articles.service.ts
@@ -9,8 +9,10 @@ export class ArticlesService {
   readonly baseUrl = 'https://conduit.productionready.io/api/';
 
   constructor(private http: HttpClient) { }
-  getArticles() {
-    const url = this.baseUrl + 'articles';
+
+  getArticlesByTag(tag:string) {
+    const limit = 5;
+    const url = `${this.baseUrl}articles?tag=${tag}&limit=${limit}`;
     return this.http.get<any>(url);
   }
   getTags() {
diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html
index 404cd99..a7e30e4 100644
--- a/src/app/articles/articles.component.html
+++ b/src/app/articles/articles.component.html
@@ -1,9 +1,31 @@
+<h1 class="title">Articulos</h1>
 
-<div *ngFor="let article of articles">
-    <h1>{{article.title}} </h1>
-    <p>{{article.body}}</p>
-</div>
+<nav class="tag-group">
+    <span class="tag-group-title">Tags</span>
+    <a
+        *ngFor="let tag of tags" 
+        href="#" 
+        [class.selected-tag]="tag===this.selectedTag" 
+        (click)="loadArticlesByTag(tag)" 
+        class="my-button">
+            {{tag}}
+    </a>  
+</nav>
 
-<button (click)="loadArticles()">Cargar</button>
-{{tags | json}}
-<button (click)="loadTags()">Cargar Tags</button>
+<main class="main-content">
+    <article
+    class="article"
+    *ngFor="let article of articles">
+        <p class="article-item">Titulo: {{article.title}}</p>
+        <p class="article-item">Descripcion: {{article.description}}</p>
+        <p class="article-item">Cuerpo: {{article.body}}</p>
+        <p class="article-item">Fecha de creacion: {{article.createdAt.getDate()}}/
+            {{article.createdAt.getMonth()+1}}/{{article.createdAt.getFullYear()}}  - 
+            {{article.createdAt.getHours()}}:{{article.createdAt.getMinutes()}}
+        </p>
+        <p class="article-item">Etiquetas: </p>
+        <ul>
+            <li class="tag-list" *ngFor="let tag of article.tagList">{{tag}}</li>
+        </ul>
+    </article>
+</main>
\ No newline at end of file
diff --git a/src/app/articles/articles.component.scss b/src/app/articles/articles.component.scss
index e69de29..622fb74 100644
--- a/src/app/articles/articles.component.scss
+++ b/src/app/articles/articles.component.scss
@@ -0,0 +1,72 @@
+.title{
+    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+    font-size: 50px;
+    font-weight: bold;
+    color: white;
+    text-align: center;
+    display: block;
+    background-color: darkslategrey;
+    margin: -15px 0px 0px -15px;
+    padding: 25px;
+}
+
+.tag-group{
+    float: left;
+    width: 20%;
+    margin-left: -10px;
+    text-align: center;
+    background-color: rgb(105, 124, 233);
+}
+
+//.tag-nav{
+//    display: inline-block;
+//}
+
+.my-button{
+    display: block;
+    padding: 10px;
+    border-bottom: rgb(1, 1, 41) solid 2px;
+    color: black;
+    text-decoration: none;
+}
+
+.my-button:hover{
+    background-color: rgb(24, 31, 128);
+}
+
+.selected-tag{
+    background-color: rgb(62, 110, 212);
+}
+
+.article{
+    background-color: rgb(230, 230, 230);
+    padding: 10px;
+    margin-top: 5px;
+    border-radius: 30px;
+}
+
+.article-itemgh{
+    display: block;
+}
+
+.tag-list{
+    display: inline-flex;
+    padding: 5px 10px 5px 10px;
+    border-radius: 10px;
+    background-color: gray;
+    margin-left: 10px;
+    margin-bottom: 10px;
+}
+
+.main-content{
+    margin-left: 30%;
+    width: 75%;
+    display: inline-block;
+    margin-left: 20px;
+}
+
+.tag-group-title{
+    font-size: x-large;
+    font-weight: bold;
+    padding: 5px;
+}
\ No newline at end of file
diff --git a/src/app/articles/articles.component.ts b/src/app/articles/articles.component.ts
index 434bf47..cd05fef 100644
--- a/src/app/articles/articles.component.ts
+++ b/src/app/articles/articles.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Injectable } from '@angular/core';
 import { ArticlesService } from '../articles.service';
+import { Article } from '../entities/article';
 
 @Component({
   selector: 'app-articles',
@@ -10,13 +11,17 @@ export class ArticlesComponent implements OnInit {
 
   articles:any = []
   tags: any = [];
+  selectedTag = '';
+
   constructor(private service: ArticlesService) { }
 
   ngOnInit(): void {
-
+    this.loadTags();
   }
-  loadArticles() {
-    this.service.getArticles().subscribe(response => this.articles = response.articles);
+
+  loadArticlesByTag(tag:string) {
+    this.selectedTag = tag;
+    this.service.getArticlesByTag(tag).subscribe(response => this.articles = response.articles.map(art => Article.createArticle(art)));
   }
   loadTags() {
     this.service.getTags().subscribe(response => this.tags = response.tags);
diff --git a/src/app/entities/article.spec.ts b/src/app/entities/article.spec.ts
new file mode 100644
index 0000000..eea0b31
--- /dev/null
+++ b/src/app/entities/article.spec.ts
@@ -0,0 +1,7 @@
+import { Article } from './article';
+
+describe('Article', () => {
+  it('should create an instance', () => {
+    expect(new Article()).toBeTruthy();
+  });
+});
diff --git a/src/app/entities/article.ts b/src/app/entities/article.ts
new file mode 100644
index 0000000..94057f9
--- /dev/null
+++ b/src/app/entities/article.ts
@@ -0,0 +1,19 @@
+export class Article {
+    title:string;
+    slug:string;
+    body:string;
+    createdAt:Date;
+    updatedAt:Date;
+    tagList:string[]
+    description:string;
+    author:Object;
+    favorited:boolean;
+    favoritesCount:number;
+    
+    static createArticle(art){
+        let article = new Article();
+        Object.assign(article,art);
+        article.createdAt = new Date(art.createdAt);
+        return article;
+    }
+}