diff --git a/using-pagination/src/pages/index.js b/using-pagination/src/pages/index.js
index 2a18183a..27cde70a 100644
--- a/using-pagination/src/pages/index.js
+++ b/using-pagination/src/pages/index.js
@@ -1,13 +1,39 @@
+import Link from 'next/link';
 import { gql } from 'graphql-request';
 
 import { graphcms } from '../../lib/_graphcms';
 
 const limit = 1;
 
+const singleProductStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '200px',
+  margin: '10px',
+};
+
+function SingleProduct({product, index}) {
+  return (
+    <div style={singleProductStyle}>
+      <Link href={`/products/${index+1}`}>
+        <a>{product.name}</a>
+      </Link>
+    </div>
+  )
+}
+
+const productListStyle = {
+  display: 'flex'
+};
+
 function IndexPage({ products }) {
-  return products.map(({ node: product }) => (
-    <pre>{JSON.stringify(product, 2, null)}</pre>
-  ));
+  return (
+    <div style={productListStyle}>
+      {products.map(({ node: product }, index) => {
+        return <SingleProduct key={product.id} product={product} index={index} />
+      })}
+    </div>
+  );
 }
 
 export async function getStaticProps() {
diff --git a/using-pagination/src/pages/products/[page].js b/using-pagination/src/pages/products/[page].js
index d02643e8..fe58a4f6 100644
--- a/using-pagination/src/pages/products/[page].js
+++ b/using-pagination/src/pages/products/[page].js
@@ -5,6 +5,31 @@ import { graphcms } from '../../../lib/_graphcms';
 
 const limit = 1;
 
+const singleProductStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '200px',
+  margin: '10px',
+  color: '#000',
+};
+
+function SingleProduct({product}) {
+  return (
+    <div style={singleProductStyle} key={product.id}>
+      <h3>{product.name}</h3>
+    </div>
+  )
+}
+
+const navStyle = {
+  display: 'inline-block',
+  backgroundColor: '#ccc',
+  color: '#111',
+  textDecoration: 'none',
+  padding: '2px 6px',
+  marginRight: '5px',
+}
+
 function ProductPage({
   currentPageNumber,
   hasNextPage,
@@ -13,15 +38,19 @@ function ProductPage({
 }) {
   return (
     <React.Fragment>
-      <pre>{JSON.stringify(products, 2, null)}</pre>
+      <Link href={'/'}>
+        <a>Home</a>
+      </Link>
+      <p>Page {currentPageNumber}</p>
+      <SingleProduct product={products[0].node} />
       {hasPreviousPage ? (
         <Link href={`/products/${currentPageNumber - 1}`}>
-          <a>Previous page</a>
+          <a style={navStyle}>Previous page</a>
         </Link>
       ) : null}
       {hasNextPage ? (
         <Link href={`/products/${currentPageNumber + 1}`}>
-          <a>Next page</a>
+          <a style={navStyle}>Next page</a>
         </Link>
       ) : null}
     </React.Fragment>