diff --git a/src/components/DevProfile.tsx b/src/components/DevProfile.tsx
new file mode 100644
index 0000000..124ac10
--- /dev/null
+++ b/src/components/DevProfile.tsx
@@ -0,0 +1,37 @@
+import React, {FC} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faCheck} from '@fortawesome/free-solid-svg-icons';
+
+interface IProps {
+  name: string;
+  description: string;
+  location: string;
+  skills: string[];
+}
+
+const DevProfile: FC<IProps> = ({name, description, location, skills}) => (
+  <div className="profile bg-light">
+    <img
+      src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200"
+      alt="Some guy"
+      className="round-img"
+    />
+    <div>
+      <h2>{name}</h2>
+      <p>{description}</p>
+      <p>{location}</p>
+      <a href="profile.html" className="btn btn-primary">
+        View Profile
+      </a>
+    </div>
+    <ul>
+      {skills.map((s, i) => (
+        <li className="text-primary">
+          <FontAwesomeIcon icon={faCheck} /> {s}
+        </li>
+      ))}
+    </ul>
+  </div>
+);
+
+export default DevProfile;
diff --git a/src/pages/Developers.tsx b/src/pages/Developers.tsx
index acfd829..3dbfcab 100644
--- a/src/pages/Developers.tsx
+++ b/src/pages/Developers.tsx
@@ -1,48 +1,42 @@
-import React from 'react';
+import React, {FC} from 'react';
 import Header from '../components/Header';
+import DevProfile from '../components/DevProfile';
 
-const Developers = () => (
-  <section className="container">
-    <Header
-      title="Developers"
-      lead="Browse and connect with developers"
-      icon="connectdevelop"
-    />
+// interface IProps {
+//     developers: []
+// }
 
-    <div className="profiles">
-      <div className="profile bg-light">
-        <img
-          src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200"
-          alt="Some guy"
-          className="round-img"
-        />
-        <div>
-          <h2>John Doe</h2>
-          <p>Developer at Microsoft</p>
-          <p>Seattle, WA</p>
-          <a href="profile.html" className="btn btn-primary">
-            View Profile
-          </a>
-        </div>
-        <ul>
-          <li className="text-primary">
-            <i className="fa fa-check">HTML</i>
-          </li>
+// const Developers: FC<IProps> = ({developers}) => (
+const Developers: FC = () => {
+  const developers = [
+    {
+      name: 'John Doe',
+      description: 'Developer at Microsoft',
+      location: 'Seattle, WA',
+      skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
+    },
+  ];
 
-          <li className="text-primary">
-            <i className="fa fa-check">CSS</i>
-          </li>
-          <li className="text-primary">
-            <i className="fa fa-check">JavaScript</i>
-          </li>
-
-          <li className="text-primary">
-            <i className="fa fa-check">Python</i>
-          </li>
-        </ul>
+  return (
+    <section className="container">
+      <Header
+        title="Developers"
+        lead="Browse and connect with developers"
+        icon="connectdevelop"
+      />
+      <div className="profiles">
+        {developers.map((dev, i) => (
+          <DevProfile
+            key={i}
+            name={dev.name}
+            description={dev.description}
+            location={dev.location}
+            skills={dev.skills}
+          />
+        ))}
       </div>
-    </div>
-  </section>
-);
+    </section>
+  );
+};
 
 export default Developers;