diff --git a/pos-frontend/app/inventory/page.tsx b/pos-frontend/app/inventory/page.tsx
index 254ef9f..3bab1dc 100644
--- a/pos-frontend/app/inventory/page.tsx
+++ b/pos-frontend/app/inventory/page.tsx
@@ -1,10 +1,10 @@
 "use client"
 
 import React, { useState } from 'react'
-import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image } from '@mantine/core'
+import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image, Grid } from '@mantine/core'
 import Example from './query'
 // import { Image as NextImage } from 'next/image'
-import NextImage from 'next/image';
+import NextImage from 'next/image'
 
 import Prawn from "../images/aussietigerprawns.jpg"
 // import Prawn from "/aussietigerprawns.jpg"
@@ -101,6 +101,50 @@ export default function InventoryPage() {
           <Button onClick={addItem}>Add item</Button>
         </Flex>
       </Container>
+
+      {/* <Grid>
+        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
+          <NextImage width={4} src={Prawn} alt="ITEM" />
+        </Grid.Col>
+        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
+          <NextImage width={4} src={Prawn} alt="ITEM" />
+        </Grid.Col>
+        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
+          <NextImage width={4} src={Prawn} alt="ITEM" />
+        </Grid.Col>
+        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
+          <NextImage width={4} src={Prawn} alt="ITEM" />
+        </Grid.Col>
+      </Grid> */}
+
+      {/* maybe instead, do 4 items on small. And double each time To 8 or 16 */}
+
+      <Grid>
+        <Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
+          <NextImage width={150} sizes="(max-width: 768px) 100vw, 33vw" src={Prawn} alt="ITEM" />
+          {/* <NextImage width={500} src={Prawn} alt="ITEM" />
+          <NextImage width={500} src={Prawn} alt="ITEM" />
+          <NextImage width={500} src={Prawn} alt="ITEM" /> */}
+        </Grid.Col>
+        <Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
+          <NextImage width={150} src={Prawn} alt="ITEM" />
+        </Grid.Col>
+        <Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
+          <NextImage width={150} src={Prawn} alt="ITEM" />
+        </Grid.Col>
+        <Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
+          {/* <NextImage width={500} src={Prawn} alt="ITEM" /> */}
+          {/* <img src="../images/aussietigerprawns.jpg" alt="hi"/> */}
+        </Grid.Col>
+      </Grid>
+
+      <Grid>
+        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>1</Grid.Col>
+        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>2</Grid.Col>
+        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>3</Grid.Col>
+        <Grid.Col span={{ base: 12, md: 6, lg: 3 }}>4</Grid.Col>
+      </Grid>
+
       <Flex
         id="GRID OF ITEMS"
         mih={50}
@@ -112,6 +156,7 @@ export default function InventoryPage() {
         wrap="wrap"
       >
         {/* would fetch the source from axios */}
+        {/* <NextImage src={Prawn} alt="ITEM" />
         <NextImage src={Prawn} alt="ITEM" />
         <NextImage src={Prawn} alt="ITEM" />
         <NextImage src={Prawn} alt="ITEM" />
@@ -120,8 +165,7 @@ export default function InventoryPage() {
         <NextImage src={Prawn} alt="ITEM" />
         <NextImage src={Prawn} alt="ITEM" />
         <NextImage src={Prawn} alt="ITEM" />
-        <NextImage src={Prawn} alt="ITEM" />
-        <NextImage src={Prawn} alt="ITEM" />
+        <NextImage src={Prawn} alt="ITEM" /> */}
         {/* <Example /> */}
 
         {/* <Image component={NextImage} src={Prawn} alt="TIGER PRAWNS" /> */}