diff --git a/web/src/client/get-products.ts b/web/src/client/get-products.ts
new file mode 100644
index 0000000..fe9ba4e
--- /dev/null
+++ b/web/src/client/get-products.ts
@@ -0,0 +1,6 @@
+import { Client } from './client'
+import { GetProductsResponse, GetProductsRequest } from 'shared'
+
+export async function getProducts (client: Client, params: GetProductsRequest): Promise<GetProductsResponse> {
+  return await client.get<GetProductsResponse>('/products', params)
+}
diff --git a/web/src/pages/InventoryPage.tsx b/web/src/pages/InventoryPage.tsx
index 3e0aa8e..30aff5a 100644
--- a/web/src/pages/InventoryPage.tsx
+++ b/web/src/pages/InventoryPage.tsx
@@ -1,21 +1,16 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Header } from '../components/Header'
+import { useLoad } from '../util/load'
 import { InventoryItem } from '../util/types'
 import { ItemModal } from '../components/ItemModal'
 import { Table } from '../components/Table'
-
-const inventoryData: InventoryItem[] = Array(10).fill({
-  productName: '10" Stainless Steel Fry Pan',
-  imageUrl: 'https://via.placeholder.com/300',
-  sku: '56002',
-  totalInventory: 111,
-  committed: 8,
-  available: 103
-})
+import { ClientContext } from '../context/client-context'
+import { getProducts } from '../client/get-products'
 
 export const InventoryPage: React.FC = () => {
   const [selectedItem, setSelectedItem] = React.useState<InventoryItem | null>(null)
   const [isModalOpen, setIsModalOpen] = React.useState(false)
+  const client = useContext(ClientContext)
 
   const handleRowClick = (item: InventoryItem): void => {
     setSelectedItem(item)
@@ -26,6 +21,24 @@ export const InventoryPage: React.FC = () => {
     setIsModalOpen(false)
     setSelectedItem(null)
   }
+  const productLoad = useLoad(async (abort) => {
+    if (client == null) {
+      return
+    }
+    const response = await getProducts(client, { pageSize: 15 })
+    return (response?.result ?? []).map((product) => ({
+      productName: product.title,
+      imageUrl: product.images?.nodes?.[0]?.url,
+      sku: product.id.split('/').pop(),
+      totalInventory: product.totalInventory,
+      committed: product.totalInventory,
+      available: product.totalInventory
+    }))
+  }, [])
+
+  if (productLoad.pending) {
+    return <div>Loading...</div>
+  }
 
   return (
     <div className='inventoryPage'>
@@ -37,7 +50,7 @@ export const InventoryPage: React.FC = () => {
         </h1>
 
         {/* Pass in items to table as array here */}
-        <Table items={inventoryData} onRowClick={handleRowClick} />
+        <Table items={productLoad?.value ?? []} onRowClick={handleRowClick} />
         <ItemModal
           item={selectedItem}
           isOpen={isModalOpen}
diff --git a/web/src/pages/main.tsx b/web/src/pages/main.tsx
index f470c3b..75ed2dd 100644
--- a/web/src/pages/main.tsx
+++ b/web/src/pages/main.tsx
@@ -1,71 +1,9 @@
-import { memo, useContext } from 'react'
-import { useLoad, useTriggerLoad } from '../util/load'
-
-import { ClientContext } from '../context/client-context'
-import { add } from '../client/add'
-import { AddResponse } from 'shared'
-import { getProduct } from '../client/get-product'
+import { memo } from 'react'
 import { InventoryPage } from './InventoryPage'
 
 export const Main = memo(() => {
-  const client = useContext(ClientContext)
-
-  const quoteLoad = useLoad(async (abort) => {
-    const response = await fetch('https://bible-api.com/john 3:16', { signal: abort }).then(async (res) => await res.json())
-    return response.text
-  }, [])
-
-  const [addLoadState, doAdd] = useTriggerLoad<AddResponse | undefined>(async (abort) => {
-    if (client == null) {
-      return
-    }
-    const response = await add(client, { a: 1, b: 2 })
-    return response
-  })
-
-  const [searchProductLoad, doSearchProduct] = useTriggerLoad<string | undefined>(async (abort) => {
-    if (client == null) {
-      return
-    }
-    const response = await getProduct(client, { id: '7507889750222' })
-    return response?.result?.title
-  })
-
-  if (quoteLoad.pending || quoteLoad.value == null) {
-    return <div>Loading...</div>
-  } else if (quoteLoad.error != null) {
-    return <div>Error: {quoteLoad.error.message}</div>
-  }
-
   return (
     <>
-      <div>
-        <blockquote>{quoteLoad.value}</blockquote>
-        {addLoadState.pending
-          ? (
-            <div>Adding...</div>
-            )
-          : (
-            <button onClick={() => { doAdd() }}>Add</button>
-            )}
-        {(addLoadState.value != null) && (
-          <div>Hey, this is the value! {addLoadState.value?.result ?? 'undefined'}</div>
-        )}
-      </div>
-      <div>
-        {searchProductLoad.pending
-          ? (
-            <div>Getting product title...</div>
-            )
-          : (
-            <button onClick={() => { doSearchProduct() }}>Get product title</button>
-            )}
-        {searchProductLoad.value != null && (
-          <div>The title of the product is {searchProductLoad.value ?? 'undefined'}</div>
-        )}
-      </div>
-      {/* Add line so we can see what is for testing and what's not */}
-      <hr />
       <InventoryPage />
     </>
   )