diff --git a/.eslintrc.js b/.eslintrc.js
index a7621aa..86df2c6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,8 +1,38 @@
 module.exports = {
-    "extends": "airbnb",
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        },
+        "sourceType": "module"
+    },
     "plugins": [
-        "react",
-        "jsx-a11y",
-        "import"
-    ]
-};
\ No newline at end of file
+        "react"
+    ],
+    "rules": {
+        "indent": [
+            "error",
+            2
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ],
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error",
+    }
+};
diff --git a/src/components/App.css b/src/components/App.css
index dc0b786..2bd75a9 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -1,16 +1,37 @@
 .App {
   text-align: center;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   width: 100%;
   height: 100%;
   margin-top: 15px;
 }
 .App-header {
-  background-color: rgba(34, 34, 34, 0.52);
-  height: 150px;
-  padding: 45px 16.7%;
-  color: white;
+  background-color: yellow;
+  height: 180px;
+  padding: 10px;
+  color: black;
   border-radius: 25px;
   font: 600 36px sans-serif;
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+}
+
+.Header {
+  display: flex;
+  flex-direction: row;
+}
+
+.heroimg {
+  height: 150px;
+  border-radius: 100%;
+  margin: 10px;
+}
+
+.Name {
+  text-align: center;
+  font-size: 72px;
+  margin: 50px;
 }
diff --git a/src/components/App.js b/src/components/App.js
index 8b9811f..c88d93f 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,14 +1,55 @@
-import React, { Component } from 'react';
-import './App.css';
+import React, { Component } from "react";
+import Header from "./Header.js";
+import ListOfPosts from "./ListOfPosts";
+// import PostPreview from "./PostPreview";
+import axios from "axios";
+import "./App.css";
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      results: [],
+      apiPicture: "",
+      apiPostTitle: "",
+      apiPostPreview: "",
+
+    };
+  }
+
+  componentWillMount() {
+    axios.get("https://api.github.com/users/juanmata0012/gists")
+      .then((response) => {
+        this.setState({apiPicture: response.data[0].owner.avatar_url});
+        this.setState({results: response.data});
+      })
+      .catch((error) => {
+        // eslint-disable-next-line
+        console.log(error);
+      });
+  }
+
+
   render() {
     return (
       <div className="App">
+
         <div className="App-header">
-          <h2>React Blog Starter</h2>
+          <img src={this.state.apiPicture} className="heroimg" alt="me" />
+          <div className="Name">
+            <Header/>
+          </div>
+        </div>
+
+        <div>
+          <div>
+            <ListOfPosts posts={this.state.results} />
+          </div>
         </div>
+
       </div>
+
+
     );
   }
 }
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..fba0ba1
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+// eslint-disable-next-line
+function Header(props) {
+  return (
+    <div>
+
+      <h1>Juan Mata Blog</h1>
+    </div>
+  );
+}
+
+export default Header
diff --git a/src/components/ListOfPosts.js b/src/components/ListOfPosts.js
new file mode 100644
index 0000000..827357d
--- /dev/null
+++ b/src/components/ListOfPosts.js
@@ -0,0 +1,18 @@
+import React from "react";
+import PostPreview from "./PostPreview";
+
+// eslint-disable-next-line
+function ListOfPosts(props) {
+  return (
+    <div>
+      {props.posts.map((post, i) =>
+        <PostPreview
+          key={i}
+          post={post}
+        />
+      )}
+    </div>
+  );
+}
+
+export default ListOfPosts;
diff --git a/src/components/PostPreview.js b/src/components/PostPreview.js
new file mode 100644
index 0000000..7e3c498
--- /dev/null
+++ b/src/components/PostPreview.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+// eslint-disable-next-line
+function PostPreview(props) {
+  return (
+    <div>
+      {props.post.description}
+    </div>
+  );
+}
+
+export default PostPreview;
diff --git a/yarn.lock b/yarn.lock
index 6afb980..290e61e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2047,6 +2047,16 @@ escope@^3.6.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
+eslint-config-airbnb-base@^11.2.0:
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-11.2.0.tgz#19a9dc4481a26f70904545ec040116876018f853"
+
+eslint-config-airbnb@^15.0.1:
+  version "15.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-15.0.1.tgz#7b5188e5b7c74b9b2ce639fd5e1daba8fd761aed"
+  dependencies:
+    eslint-config-airbnb-base "^11.2.0"
+
 eslint-config-react-app@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-1.0.4.tgz#c0178f535a922236c53daafea4f397203db7d9af"
@@ -2098,7 +2108,22 @@ eslint-plugin-import@2.2.0:
     minimatch "^3.0.3"
     pkg-up "^1.0.0"
 
-eslint-plugin-jsx-a11y@5.0.3:
+eslint-plugin-import@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.3.0.tgz#37c801e0ada0e296cbdf20c3f393acb5b52af36b"
+  dependencies:
+    builtin-modules "^1.1.1"
+    contains-path "^0.1.0"
+    debug "^2.2.0"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.2.0"
+    eslint-module-utils "^2.0.0"
+    has "^1.0.1"
+    lodash.cond "^4.3.0"
+    minimatch "^3.0.3"
+    read-pkg-up "^2.0.0"
+
+eslint-plugin-jsx-a11y@5.0.3, eslint-plugin-jsx-a11y@^5.0.3:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-5.0.3.tgz#4a939f76ec125010528823331bf948cc573380b6"
   dependencies:
@@ -2118,6 +2143,14 @@ eslint-plugin-react@7.0.1:
     has "^1.0.1"
     jsx-ast-utils "^1.3.4"
 
+eslint-plugin-react@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.1.0.tgz#27770acf39f5fd49cd0af4083ce58104eb390d4c"
+  dependencies:
+    doctrine "^2.0.0"
+    has "^1.0.1"
+    jsx-ast-utils "^1.4.1"
+
 eslint-scope@^3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
@@ -2489,7 +2522,7 @@ find-up@^1.0.0:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
-find-up@^2.1.0:
+find-up@^2.0.0, find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
   dependencies:
@@ -3641,7 +3674,7 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.3.6"
 
-jsx-ast-utils@^1.3.4, jsx-ast-utils@^1.4.0:
+jsx-ast-utils@^1.3.4, jsx-ast-utils@^1.4.0, jsx-ast-utils@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
 
@@ -3704,6 +3737,15 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
+load-json-file@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    strip-bom "^3.0.0"
+
 loader-fs-cache@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.1.tgz#56e0bf08bd9708b26a765b68509840c8dec9fdbc"
@@ -4346,6 +4388,12 @@ path-type@^1.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+path-type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  dependencies:
+    pify "^2.0.0"
+
 pbkdf2@^3.0.3:
   version "3.0.12"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.12.tgz#be36785c5067ea48d806ff923288c5f750b6b8a2"
@@ -4948,6 +4996,13 @@ read-pkg-up@^1.0.1:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
 
+read-pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.0.0"
+
 read-pkg@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
@@ -4956,6 +5011,14 @@ read-pkg@^1.0.0:
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
+read-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  dependencies:
+    load-json-file "^2.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^2.0.0"
+
 readable-stream@1.0:
   version "1.0.34"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"