diff --git a/pos-frontend/app/global.css b/pos-frontend/app/global.css
new file mode 100644
index 0000000..fc78bed
--- /dev/null
+++ b/pos-frontend/app/global.css
@@ -0,0 +1,5 @@
+html,
+body {
+  max-width: 100%;
+  overflow-x: hidden;
+}
\ No newline at end of file
diff --git a/pos-frontend/app/inventory/page.tsx b/pos-frontend/app/inventory/page.tsx
index 3bab1dc..8b857d5 100644
--- a/pos-frontend/app/inventory/page.tsx
+++ b/pos-frontend/app/inventory/page.tsx
@@ -1,13 +1,9 @@
 "use client"
 
 import React, { useState } from 'react'
-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 { Box, Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image, Grid, Space, Divider } from '@mantine/core'
 import NextImage from 'next/image'
-
 import Prawn from "../images/aussietigerprawns.jpg"
-// import Prawn from "/aussietigerprawns.jpg"
 
 interface InventoryItem {
   id: number
@@ -18,9 +14,6 @@ interface InventoryItem {
 
 async function fetchBlob(url: string) {
   const response = await fetch(url)
-
-  // Here is the significant part 
-  // reading the stream as a blob instead of json
   return response.blob()
 }
 
@@ -56,7 +49,7 @@ export default function InventoryPage() {
   return (
     <Box>
       <Container size="md" >
-        <Paper >
+        {/* <Paper >
           <Table>
             <thead>
               <tr>
@@ -77,9 +70,11 @@ export default function InventoryPage() {
               ))}
             </tbody>
           </Table>
-        </Paper>
+        </Paper> */}
 
-        <Flex style={{ marginTop: theme.spacing.md }}>
+        {/* use a grid */}
+
+        <Flex gap="md" style={{ marginTop: theme.spacing.md }}>
           <TextInput
             label="Item name"
             placeholder="Enter item name"
@@ -102,80 +97,29 @@ export default function InventoryPage() {
         </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 }}>
+      <Grid gutter={{ base: 5, xs: 'md', md: 'xl', xl: 'xl' }}>
+        <Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
           <NextImage width={150} src={Prawn} alt="ITEM" />
         </Grid.Col>
-        <Grid.Col span={{ base: 16, md: 2, lg: 1 }}>
+        <Grid.Col span={{ base: 6, 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 span={{ base: 6, md: 2, lg: 1 }}>
+          <NextImage width={150} src={Prawn} alt="ITEM" />
+        </Grid.Col>
+        <Grid.Col span={{ base: 6, md: 2, lg: 1 }}>
+          <NextImage width={150} src={Prawn} alt="ITEM" />
         </Grid.Col>
       </Grid>
 
-      <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>
+      </Grid> */}
 
-      <Flex
-        id="GRID OF ITEMS"
-        mih={50}
-        bg="rgba(0, 0, 0, .3)"
-        gap="md"
-        justify="flex-start"
-        align="flex-start"
-        direction="column"
-        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" />
-        <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>
+      {/* why is there a scroll area on the grid */}
     </Box>
   )
 }
diff --git a/pos-frontend/app/layout.tsx b/pos-frontend/app/layout.tsx
index 47aabff..e0a0a25 100644
--- a/pos-frontend/app/layout.tsx
+++ b/pos-frontend/app/layout.tsx
@@ -1,5 +1,3 @@
-// "use client"
-
 import '@mantine/core/styles.css'
 import {
   hydrate,
@@ -7,7 +5,6 @@ import {
   QueryClientProvider,
 } from '@tanstack/react-query'
 import { ColorSchemeScript, MantineProvider } from '@mantine/core'
-// import { useState } from 'react'
 import Providers from './query-provider'
 import Search from './search'
 
@@ -16,30 +13,23 @@ export const metadata = {
   description: 'I have followed setup instructions carefully',
 }
 
-// const queryClient = new QueryClient()
+import "./global.css"
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
-  // const [queryClient] = useState(() => new QueryClient())
 
   return (
     <html lang="en">
       <head>
         <ColorSchemeScript />
       </head>
-      {/* <header> */}
-        {/* <Search /> */}
-      {/* </header> */}
       <body>
-        {/* can add a theme */}
-        {/* <QueryClientProvider client={queryClient}> */}
         <Providers>
           <MantineProvider>{children}</MantineProvider>
         </Providers>
-        {/* </QueryClientProvider> */}
       </body>
     </html>
   )