diff --git a/src/components/CardEntry.js b/src/components/CardEntry.js
new file mode 100644
index 0000000..3fc18c0
--- /dev/null
+++ b/src/components/CardEntry.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const CardEntry = props => {
+  const { idMeal, strMeal, strMealThumb } = props.item;
+  return (
+    <Link to={`${idMeal}`}>
+      <li>
+        <div className="row">
+          <div className="col s12 m6">
+            <div className="card ">
+              <div className="card-image">
+                <img src={strMealThumb} alt={strMeal} />
+              </div>
+              <div class="card-content">
+                <h4>{strMeal}</h4>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </Link>
+  );
+};
+export default CardEntry;
diff --git a/src/components/CategoryEntry.js b/src/components/CategoryEntry.js
index 8003c97..128e14c 100644
--- a/src/components/CategoryEntry.js
+++ b/src/components/CategoryEntry.js
@@ -11,6 +11,7 @@ const CategoryEntry = props => {
   const { url } = useRouteMatch();
 
   return (
+    // <CardEntry item={meal} />
     <Link to={`${url}/${strCategory}`}>
       <li>
         <div className="row">
diff --git a/src/components/SearchResult.js b/src/components/SearchResult.js
index dab6b5b..2b98eb7 100644
--- a/src/components/SearchResult.js
+++ b/src/components/SearchResult.js
@@ -1,34 +1,9 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import CardEntry from "./CardEntry";
 
 const SearchResult = props => {
   const { meal } = props;
-  const { idMeal, strMeal, strMealThumb } = meal;
-
-  return (
-    <Link to={`${idMeal}`}>
-      <li>
-        <div className="row">
-          <div className="col s12 m6">
-            <div className="card ">
-              <div className="card-image">
-                <img src={strMealThumb} alt={strMeal} />
-                {/* <span className="card-title ">{strMeal}</span> */}
-              </div>
-              <div class="card-content">
-                <h4>{strMeal}</h4>
-              </div>
-              {/* <div className="card-stacked">
-              <div className="card-content black-text">
-                <p>{strCategoryDescription}</p>
-              </div>
-            </div> */}
-            </div>
-          </div>
-        </div>
-      </li>
-    </Link>
-  );
+  return <CardEntry item={meal} />;
 };
 
 export default SearchResult;
diff --git a/src/pages/Category.js b/src/pages/Category.js
index 0283750..8f31f3f 100644
--- a/src/pages/Category.js
+++ b/src/pages/Category.js
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useParams, Link, useRouteMatch } from "react-router-dom";
+import CardEntry from "../components/CardEntry";
 
 const CategoryPage = props => {
   const [meals, setMeals] = useState({ meals: [] });
@@ -15,28 +16,21 @@ const CategoryPage = props => {
   }, []);
 
   const { url } = useRouteMatch();
-  //   const {
-  //     strCategory,
-  //     strCategoryThumb,
-  //     strCategoryDescription
-  //   } = props.category;
 
   return (
     <div className="container">
       <h1>Chef's {strCategory} Recipes</h1>
-      {/* <img src={strCategoryThumb} alt={strCategory} />
-  <p>{strCategoryDescription}</p> */}
 
       <ul>
         {meals.meals.map((meal, i) => (
           <li key={i}>
+            {/* <CardEntry item={meal} /> */}
             <Link to={`/${meal.idMeal}`}>
               <div className="row">
                 <div className="col s12 m6">
                   <div className="card ">
                     <div className="card-image">
                       <img src={meal.strMealThumb} alt={meal.strMeal} />
-                      {/* <span className="card-title">{meal.strMeal}</span> */}
                     </div>
                     <div class="card-content">
                       <h4>{meal.strMeal}</h4>