diff --git a/.env-example b/.env-example
index 1f89362..aafb386 100644
--- a/.env-example
+++ b/.env-example
@@ -1,4 +1,8 @@
+#Backend WordPress Site URL.
 NEXT_PUBLIC_WORDPRESS_SITE_URL=https://example.com
 
+#Frontend Next.js Site URL
+NEXT_PUBLIC_SITE_URL=http://localhost:3000
+
 WC_CONSUMER_KEY=ck_xx
 WC_CONSUMER_SECRET=cs_xx
diff --git a/README.md b/README.md
index 3e2d5af..5a2c4ca 100644
--- a/README.md
+++ b/README.md
@@ -51,8 +51,9 @@ npm run dev
 
 ## Configuration :wrench:
 
-1. (Required) Create a `.env` file taking reference from `.env-example` and update your WordPressSite URL.
+1. (Required) Create a `.env` file taking reference from `.env-example` and update your WordPressSite URL and Frontend next.js URL.
 - `NEXT_PUBLIC_WORDPRESS_URL=https://example.com`
+- `NEXT_PUBLIC_SITE_URL=http://localhost.com` ( This will be your frontend Next.js URL)
 
 2. Add your `WC_CONSUMER_KEY` and `WC_CONSUMER_SECRET` to the `.env` by following [WooCommerce > Settings > Advanced > REST API](https://woocommerce.github.io/woocommerce-rest-api-docs/#authentication)
 
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000..60f5add
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,25 @@
+const path = require('path');
+const allowedImageWordPressDomain = new URL( process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL ).hostname;
+
+module.exports = {
+	trailingSlash: false,
+	webpackDevMiddleware: config => {
+		config.watchOptions = {
+			poll: 1000,
+			aggregateTimeout: 300
+		}
+		
+		return config
+	},
+	sassOptions: {
+		includePaths: [path.join(__dirname, 'styles')]
+	},
+	/**
+	 * We specify which domains are allowed to be optimized.
+	 * This is needed to ensure that external urls can't be abused.
+	 * @see https://nextjs.org/docs/basic-features/image-optimization#domains
+	 */
+	images: {
+		domains: [ allowedImageWordPressDomain, 'via.placeholder.com' ],
+	},
+}
diff --git a/nextjs.config.js b/nextjs.config.js
deleted file mode 100644
index 8078406..0000000
--- a/nextjs.config.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const path = require('path')
-module.exports = {
-	trailingSlash: false,
-	webpackDevMiddleware: config => {
-		config.watchOptions = {
-			poll: 1000,
-			aggregateTimeout: 300
-		}
-		
-		return config
-	},
-	sassOptions: {
-		includePaths: [path.join(__dirname, 'styles')]
-	}
-}
diff --git a/package-lock.json b/package-lock.json
index 6940767..cd5c742 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -403,6 +403,11 @@
             "supports-color": "^7.1.0"
           }
         },
+        "classnames": {
+          "version": "2.2.6",
+          "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+          "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+        },
         "color-convert": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1060,9 +1065,9 @@
       }
     },
     "classnames": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
     },
     "coa": {
       "version": "2.0.2",
@@ -4499,6 +4504,23 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "public-encrypt": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
diff --git a/package.json b/package.json
index 489fa9a..63b023c 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
     "start": "next start",
     "svg": "svgr -d src/components/icons src/components/icons/svgs"
@@ -12,9 +12,11 @@
     "@svgr/cli": "^5.5.0",
     "@woocommerce/woocommerce-rest-api": "^1.0.1",
     "axios": "^0.21.1",
+    "classnames": "^2.3.1",
     "dompurify": "^2.3.1",
     "lodash": "^4.17.21",
     "next": "11.1.0",
+    "prop-types": "^15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "sass": "^1.38.0"
diff --git a/pages/index.js b/pages/index.js
index 24b2d4d..ec797e0 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,24 +3,23 @@
  */
 import Header from '../src/components/layouts/header';
 import Footer from '../src/components/layouts/footer';
-import { HEADER_FOOTER_ENDPOINT } from '../src/utils/constants/endpoints';
+import Products from '../src/components/products';
+import { GET_PRODUCTS_ENDPOINT, HEADER_FOOTER_ENDPOINT } from '../src/utils/constants/endpoints';
 
 /**
  * External Dependencies.
  */
 import axios from 'axios';
 
-export default function Home({data}) {
-	const { header, footer } = data;
+export default function Home({ headerFooter, products }) {
+	
+	const { header, footer } = headerFooter || {};
 	
 	return (
 		<div >
 			<Header header={header}/>
-			<main >
-				<h1 >
-					Welcome to <a href="https://nextjs.org">Next.js!</a>
-				</h1>
-				<p className="text-green-500">Hello</p>
+			<main className="container mx-auto p-4">
+				<Products products={products}/>
 			</main>
 			
 			<Footer footer={footer}/>
@@ -29,10 +28,15 @@ export default function Home({data}) {
 }
 
 export async function getStaticProps() {
-	const { data } = await axios.get( HEADER_FOOTER_ENDPOINT );
+	
+	const { data: headerFooterData } = await axios.get( HEADER_FOOTER_ENDPOINT );
+	const { data: productsData } = await axios.get( GET_PRODUCTS_ENDPOINT );
 	
 	return {
-		props: data || {},
+		props: {
+			headerFooter: headerFooterData?.data ?? {},
+			products: productsData?.products ?? {}
+		},
 		
 		/**
 		 * Revalidate means that if a new request comes to server, then every 1 sec it will check
diff --git a/src/components/image/index.js b/src/components/image/index.js
new file mode 100644
index 0000000..75c904f
--- /dev/null
+++ b/src/components/image/index.js
@@ -0,0 +1,76 @@
+import Img from 'next/image';
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import {DEFAULT_IMG_URL} from '../../utils/constants/images';
+
+/**
+ * Image Component.
+ * We don't need to add srcSet, as Next js will generate that.
+ * @see https://nextjs.org/docs/api-reference/next/image#other-props
+ * @see https://nextjs.org/docs/basic-features/image-optimization#device-sizes
+ *
+ * @param {Object} props Component props.
+ *
+ * @return {jsx}
+ */
+const Image = ( props ) => {
+	const {altText, title, width, height, sourceUrl, className, layout, objectFit, containerClassNames, showDefault, ...rest} = props;
+	
+	if ( ! sourceUrl && ! showDefault ) {
+		return null;
+	}
+	
+	/**
+	 * If we use layout = fill then, width and height of the image cannot be used.
+	 * and the image fills on the entire width and the height of its parent container.
+	 * That's we need to wrap our image in a container and give it a height and width.
+	 * Notice that in this case, the given height and width is being used for container and not img.
+	 */
+	if ( 'fill' === layout ) {
+		const attributes = {
+			alt: altText || title,
+			src: sourceUrl || ( showDefault ? DEFAULT_IMG_URL : '' ),
+			layout: 'fill',
+			className: cx( 'object-cover', className ),
+			...rest
+		};
+		
+		return (
+			<div className={cx( 'relative', containerClassNames ) }>
+				<Img {...attributes}/>
+			</div>
+		);
+	} else {
+		const attributes = {
+			alt: altText || title,
+			src: sourceUrl || ( showDefault ? DEFAULT_IMG_URL : '' ),
+			width: width || 'auto',
+			height: height || 'auto',
+			className,
+			...rest
+		};
+		return <Img {...attributes} />;
+	}
+};
+
+Image.propTypes = {
+	altText: PropTypes.string,
+	title: PropTypes.string,
+	sourceUrl: PropTypes.string,
+	layout: PropTypes.string,
+	showDefault: PropTypes.bool,
+	containerClassName: PropTypes.string,
+	className: PropTypes.string
+};
+
+Image.defaultProps = {
+	altText: '',
+	title: '',
+	sourceUrl: '',
+	showDefault: true,
+	containerClassNames: '',
+	className: 'product__image',
+};
+
+export default Image;
diff --git a/src/components/products/index.js b/src/components/products/index.js
new file mode 100644
index 0000000..a9d7735
--- /dev/null
+++ b/src/components/products/index.js
@@ -0,0 +1,38 @@
+import { isArray, isEmpty } from 'lodash';
+import Link from 'next/link';
+import Image from '../image';
+
+const Products = ({ products }) => {
+	
+	if ( isEmpty( products ) || !isArray( products ) ) {
+		return null;
+	}
+	
+	return (
+		<div className="flex flex-wrap -mx-2 overflow-hidden">
+			
+			{ products.length ? products.map( product => {
+				const img = product?.images?.[0] ?? {};
+				return (
+					<div key={ product?.id } className="my-2 px-2 w-full overflow-hidden sm:w-1/2 md:w-1/3 xl:w-1/4">
+						<Link href={product?.permalink ?? '/'}>
+							<a>
+								<Image
+									sourceUrl={ img?.src ?? '' }
+									altText={ img?.alt ?? ''}
+									title={ product?.name ?? '' }
+									width="380"
+									height="380"
+								/>
+								<h3 className="font-bold uppercase">{ product?.name ?? '' }</h3>
+							</a>
+						</Link>
+					</div>
+				)
+			} ) : null }
+		
+		</div>
+	)
+}
+
+export default Products;
diff --git a/src/utils/constants/endpoints.js b/src/utils/constants/endpoints.js
index 6079203..eaf5abd 100644
--- a/src/utils/constants/endpoints.js
+++ b/src/utils/constants/endpoints.js
@@ -1 +1,2 @@
 export const HEADER_FOOTER_ENDPOINT = `${ process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL }/wp-json/rae/v1/header-footer?header_location_id=hcms-menu-header&footer_location_id=hcms-menu-footer`;
+export const GET_PRODUCTS_ENDPOINT = `${process.env.NEXT_PUBLIC_SITE_URL}/api/get-products`;
diff --git a/src/utils/constants/images.js b/src/utils/constants/images.js
new file mode 100644
index 0000000..07d8b2e
--- /dev/null
+++ b/src/utils/constants/images.js
@@ -0,0 +1 @@
+export const DEFAULT_IMG_URL = 'https://via.placeholder.com/380x380';