diff --git a/pos-frontend/public/aussietigerprawns.jpg b/pos-frontend/app/images/aussietigerprawns.jpg
similarity index 100%
rename from pos-frontend/public/aussietigerprawns.jpg
rename to pos-frontend/app/images/aussietigerprawns.jpg
diff --git a/pos-frontend/public/cake.jpg b/pos-frontend/app/images/cake.jpg
similarity index 100%
rename from pos-frontend/public/cake.jpg
rename to pos-frontend/app/images/cake.jpg
diff --git a/pos-frontend/public/curlyparsley.jpg b/pos-frontend/app/images/curlyparsley.jpg
similarity index 100%
rename from pos-frontend/public/curlyparsley.jpg
rename to pos-frontend/app/images/curlyparsley.jpg
diff --git a/pos-frontend/public/greenbasil.avif b/pos-frontend/app/images/greenbasil.avif
similarity index 100%
rename from pos-frontend/public/greenbasil.avif
rename to pos-frontend/app/images/greenbasil.avif
diff --git a/pos-frontend/public/pumpkinsoup.jpg b/pos-frontend/app/images/pumpkinsoup.jpg
similarity index 100%
rename from pos-frontend/public/pumpkinsoup.jpg
rename to pos-frontend/app/images/pumpkinsoup.jpg
diff --git a/pos-frontend/public/turkey.jpg b/pos-frontend/app/images/turkey.jpg
similarity index 100%
rename from pos-frontend/public/turkey.jpg
rename to pos-frontend/app/images/turkey.jpg
diff --git a/pos-frontend/app/inventory/page.tsx b/pos-frontend/app/inventory/page.tsx
index f720283..254ef9f 100644
--- a/pos-frontend/app/inventory/page.tsx
+++ b/pos-frontend/app/inventory/page.tsx
@@ -3,6 +3,11 @@
 import React, { useState } from 'react'
 import { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image } from '@mantine/core'
 import Example from './query'
+// import { Image as NextImage } from 'next/image'
+import NextImage from 'next/image';
+
+import Prawn from "../images/aussietigerprawns.jpg"
+// import Prawn from "/aussietigerprawns.jpg"
 
 interface InventoryItem {
   id: number
@@ -103,12 +108,29 @@ export default function InventoryPage() {
         gap="md"
         justify="flex-start"
         align="flex-start"
-        direction="row"
+        direction="column"
         wrap="wrap"
       >
         {/* would fetch the source from axios */}
-        <Image src="x.png" alt="ITEM" />
-        <Example />
+        <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" />
+        <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" /> */}
+
+        {/* from public import everything .jpg */}
+
+        {/* create an Image for each */}
+
+        {/* <NextImage src="cake.jpg" alt="public/cake" /> */}
       </Flex>
     </Box>
   )