diff --git a/next.config.js b/next.config.js
index 7d33e3c..994a60b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -26,8 +26,7 @@ module.exports = withOffline(
             target: 'serverless',
             images: {
                   domains: [
-                        backend_hostname,
-                        'https://via.placeholder.com'
+                        backend_hostname
                     ],
             },
         })
diff --git a/pages/index.js b/pages/index.js
index bd0cd35..ba2ecbe 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,8 +3,9 @@ import Link from 'next/link';
 import client from '../src/apollo/ApolloClient';
 import AddToCartButton from '../src/components/cart/AddToCartButton';
 import Hero from '../src/components/home/Hero';
+import Categories from '../src/components/home/Categories';
 import Image from '../src/components/Image';
-import { PRODUCTS_QUERY } from '../src/queries';
+import { PRODUCTS_QUERY, CATEGORIES_QUERY } from '../src/queries';
 
 const NewProducts = ({ products }) => {
     return (
@@ -46,24 +47,30 @@ const NewProducts = ({ products }) => {
 };
 
 const Index = (props) => {
-    const { products } = props;
+    const { products, categories } = props;
 
     return (
         <Layout>
             <Hero />
-            {/*<Categories/>*/}
+            <Categories categories={categories}/>
             <NewProducts products={products} />
         </Layout>
     );
 };
 
 export async function getStaticProps() {
-    const { data } = await client.query({
+    const { data: products_data } = await client.query({
         query: PRODUCTS_QUERY
     });
+
+    const { data: categories_data } = await client.query({
+        query: CATEGORIES_QUERY
+    });
+
     return {
         props: {
-            products: data.products.nodes
+            products: products_data.products.nodes,
+            categories: categories_data.productCategories.nodes
         },
         revalidate: 1
     };
diff --git a/src/components/Image.js b/src/components/Image.js
index da5b1d7..6792cc2 100644
--- a/src/components/Image.js
+++ b/src/components/Image.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 const Image = (props) => {
 
     const [error, setError] = useState(false);
-    
+
     const {
         src,
         width,
@@ -28,7 +28,7 @@ const Image = (props) => {
 
     return (
         <Img 
-        src={error ? fallBackUrl : src}
+        src={ (error || !src) ? fallBackUrl : src }
         width={width}
         height={height} 
         onError={errorHandler}
diff --git a/src/components/home/Categories.js b/src/components/home/Categories.js
index c0eac34..e9ab973 100644
--- a/src/components/home/Categories.js
+++ b/src/components/home/Categories.js
@@ -1,60 +1,34 @@
 import Link from 'next/link';
-
-const Categories = () => {
+import Image from '../Image';
+const Categories = ({ categories }) => {
     return (
         <div className="container">
             <h2 className="text-center mb-4">Shop by Category</h2>
             <div className="woocommerce">
-                <ul className="products row mx-auto">
-                    <li className="product-category product first col-md-4">
-                        <Link as={`/`} href={`/`}>
-                            <a className="">
-                                <Image
-                                    src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories.jpg"
-                                    alt="Accessories"
-                                    width={324}
-                                    height={324}
-                                    sizes="(max-width: 324px) 100vw, 324px"
-                                />
-                                <h2 className="woocommerce-loop-category__title">
-                                    Accessories <mark className="count">(4)</mark>
-                                </h2>
-                            </a>
-                        </Link>
-                    </li>
-                    <li className="product-category product col-md-4">
-                        <Link as={`/`} href={`/`}>
-                            <a className="">
-                                <Image
-                                    src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies.jpg"
-                                    alt="Hoodies"
-                                    width={324}
-                                    height={324}
-                                    sizes="(max-width: 324px) 100vw, 324px"
-                                />
-                                <h2 className="woocommerce-loop-category__title">
-                                    Hoodies <mark className="count">(4)</mark>
-                                </h2>
-                            </a>
-                        </Link>
-                    </li>
-                    <li className="product-category product last col-md-4">
-                        <Link as={`/`} href={`/`}>
-                            <a className="">
-                                <Image
-                                    src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts.jpg"
-                                    alt="Tshirts"
-                                    width={324}
-                                    height={324}
-                                    sizes="(max-width: 324px) 100vw, 324px"
-                                />
-                                <h2 className="woocommerce-loop-category__title">
-                                    Tshirts <mark className="count">(4)</mark>
-                                </h2>
-                            </a>
-                        </Link>
-                    </li>
-                </ul>
+                <div className="row mx-auto">
+                    {
+                        categories.map(category => (
+                            category && category.count ? (
+                                <div className="category-container col-md-3 mb-5">
+                                    <Link as={`/`} href={`/`}>
+                                        <a className="category-link">
+                                            <Image
+                                                src={category?.image?.sourceUrl}
+                                                alt={category?.name}
+                                                width={324}
+                                                height={324}
+                                                sizes="(max-width: 324px) 100vw, 324px"
+                                            />
+                                            <h5 className="category-name">
+                                                {category.name} <mark className="count">({category.count})</mark>
+                                            </h5>
+                                        </a>
+                                    </Link>
+                                </div>
+                            ) : null
+                        ))
+                    }
+                </div>
             </div>
         </div>
     );
diff --git a/src/queries/fragments/category.js b/src/queries/fragments/category.js
new file mode 100644
index 0000000..b00459b
--- /dev/null
+++ b/src/queries/fragments/category.js
@@ -0,0 +1,14 @@
+import ImageFragment from './image';
+
+const CategoryFragment = `
+    fragment CategoryFragment on ProductCategory {
+        name
+        count
+        image {
+            ...ImageFragment
+        }
+        slug
+    }
+    ${ImageFragment}
+`;
+export default CategoryFragment;
\ No newline at end of file
diff --git a/src/queries/get-categories.js b/src/queries/get-categories.js
new file mode 100644
index 0000000..828171d
--- /dev/null
+++ b/src/queries/get-categories.js
@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client';
+import CategoryFragment from './fragments/category';
+
+export default gql`
+    query {
+        productCategories {
+            nodes {
+                ...CategoryFragment
+            }
+        }
+    }
+    ${CategoryFragment}
+`;
\ No newline at end of file
diff --git a/src/queries/index.js b/src/queries/index.js
index d8784bc..edb1723 100644
--- a/src/queries/index.js
+++ b/src/queries/index.js
@@ -2,4 +2,5 @@ export { default as PRODUCTS_QUERY } from './get-products';
 export { default as PRODUCT_QUERY } from './get-product';
 export { default as LOGIN_USER } from './auth/login';
 export { default as REGISTER_USER } from './auth/register';
-export { default as PRODUCT_SLUGS } from './get-product-slug';
\ No newline at end of file
+export { default as PRODUCT_SLUGS } from './get-product-slug';
+export { default as CATEGORIES_QUERY } from './get-categories';
\ No newline at end of file
diff --git a/src/styles/sass/categories.scss b/src/styles/sass/categories.scss
new file mode 100644
index 0000000..4930a23
--- /dev/null
+++ b/src/styles/sass/categories.scss
@@ -0,0 +1,31 @@
+.wd-content {
+	padding: 24px 10px 10px 14px;
+}
+
+.category-container {
+	text-align: center;
+}
+
+@media screen and ( max-width: 500px ) {
+	.category-container {
+		min-width: 400px;
+	}
+}
+
+@media screen and ( max-width: 400px ) {
+	.category-container {
+		min-width: 300px;
+	}
+}
+
+.category-link {
+	cursor: pointer;
+    color: #333333;
+}
+
+.category-image {
+	max-width: 240px;
+}
+.category-name {
+	margin: 16px;
+}
diff --git a/src/styles/sass/styles.scss b/src/styles/sass/styles.scss
index 283df9f..ff2e46d 100644
--- a/src/styles/sass/styles.scss
+++ b/src/styles/sass/styles.scss
@@ -6,6 +6,7 @@
 @import "navbar";
 @import "home";
 @import "products";
+@import "categories";
 @import "cart";
 @import "checkout";
 @import "layouts/my-account";