diff --git a/src/components/CategoryEntry.js b/src/components/CategoryEntry.js
new file mode 100644
index 0000000..db5f7e7
--- /dev/null
+++ b/src/components/CategoryEntry.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const CategoryEntry = props => {
+  const {
+    strCategory,
+    strCategoryThumb,
+    strCategoryDescription
+  } = props.category;
+  const url = `/${strCategory}`;
+  return (
+    <Link to={url}>
+      <div className="row">
+        <li key={props.key}>
+          <img src={strCategoryThumb} alt={strCategory} />
+          <h3>{strCategory}</h3> {strCategoryDescription}
+        </li>
+      </div>
+    </Link>
+  );
+};
+
+export default CategoryEntry;
diff --git a/src/images/parallax1.jpg b/src/images/parallax1.jpg
new file mode 100644
index 0000000..bbc8bb2
Binary files /dev/null and b/src/images/parallax1.jpg differ
diff --git a/src/images/parallax2.jpg b/src/images/parallax2.jpg
new file mode 100644
index 0000000..071d649
Binary files /dev/null and b/src/images/parallax2.jpg differ
diff --git a/src/pages/CategoryList.js b/src/pages/CategoryList.js
new file mode 100644
index 0000000..2bc1650
--- /dev/null
+++ b/src/pages/CategoryList.js
@@ -0,0 +1,25 @@
+import React from "react";
+import CategoryEntry from "../components/CategoryEntry";
+
+const CategoryListPage = props => {
+  //   const { categories } = props;
+  const categories = props.categories.categories;
+  //   if (categories.length > 0) {
+
+  //   }
+  //   const { strCategory } = categories;
+  return (
+    <div className="section">
+      <div className="container">
+        <h1>The Chef's meal categories</h1>
+        <ul>
+          {categories.map((category, i) => (
+            <CategoryEntry key={i} category={category} />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default CategoryListPage;