diff --git a/frontend/src/components/projects/index.js b/frontend/src/components/projects/index.js
new file mode 100644
index 00000000..376702ab
--- /dev/null
+++ b/frontend/src/components/projects/index.js
@@ -0,0 +1,68 @@
+const React = require('react');
+const ReactIntl = require('react-intl');
+// const ReactRouter = require('react-router');
+
+const Column = require('@ui/components/column');
+const Button = require('@ui/components/button');
+const Row = require('@ui/components/row');
+
+const {
+  FormattedMessage
+} = ReactIntl;
+
+// const {
+//   Link,
+//   Match,
+//   Miss,
+//   Redirect
+// } = ReactRouter;
+
+const Projects = ({
+  projects = []
+}) => {
+  console.log(projects);
+  const empty = projects.length ? null : (
+    <Row>
+      <Column xs={12}>
+        <p>
+          <FormattedMessage id='no-personal-projects' />
+        </p>
+      </Column>
+    </Row>
+  );
+
+  const _projects = projects.map((project) => (
+    <li key={project.id}>
+      <input type='checkbox' />
+      <span>{project.name} ({project.plan}) ⚙️</span>
+    </li>
+  ));
+
+  return (
+    <div>
+      {empty}
+      <Row>
+        <Column xs={12}>
+          <Button>
+            <FormattedMessage id='create-new' />
+          </Button>
+        </Column>
+      </Row>
+      <Row>
+        <ul>
+          {_projects}
+        </ul>
+      </Row>
+    </div>
+  );
+};
+
+Projects.propTypes = {
+  projects: React.PropTypes.arrayOf(React.PropTypes.shape({
+    id: React.PropTypes.string,
+    name: React.PropTypes.string,
+    plan: React.PropTypes.string
+  }))
+};
+
+module.exports = Projects;