diff --git a/pos-frontend/app/inventory/page.tsx b/pos-frontend/app/inventory/page.tsx
index 7cf6acd..1388bf9 100644
--- a/pos-frontend/app/inventory/page.tsx
+++ b/pos-frontend/app/inventory/page.tsx
@@ -1,5 +1,7 @@
+"use client"
+
 import React, { useState } from 'react'
-import { Container, Paper, Col, Table, Button, TextInput, useMantineTheme } from '@mantine/core'
+import { Container, Paper, Table, Button, TextInput, useMantineTheme, Flex, Image } from '@mantine/core'
 import Example from './query'
 
 interface InventoryItem {
@@ -48,8 +50,8 @@ export default function InventoryPage() {
 
   return (
     <>
-      <Container size="md" padding={theme.spacing.md}>
-        <Paper padding={theme.spacing.md}>
+      <Container size="md" >
+        <Paper >
           <Table>
             <thead>
               <tr>
@@ -72,7 +74,7 @@ export default function InventoryPage() {
           </Table>
         </Paper>
 
-        <Col style={{ marginTop: theme.spacing.md }}>
+        <Flex style={{ marginTop: theme.spacing.md }}>
           <TextInput
             label="Item name"
             placeholder="Enter item name"
@@ -92,7 +94,7 @@ export default function InventoryPage() {
             onChange={(event) => setQuantity(event.currentTarget.value)}
           />
           <Button onClick={addItem}>Add item</Button>
-        </Col>
+        </Flex>
       </Container>
       <Flex
         id="GRID OF ITEMS"
diff --git a/pos-frontend/app/layout.tsx b/pos-frontend/app/layout.tsx
index f7e0911..c7b50a8 100644
--- a/pos-frontend/app/layout.tsx
+++ b/pos-frontend/app/layout.tsx
@@ -1,4 +1,4 @@
-"use client"
+// "use client"
 
 import '@mantine/core/styles.css'
 import {
@@ -7,12 +7,13 @@ import {
   QueryClientProvider,
 } from '@tanstack/react-query'
 import { ColorSchemeScript, MantineProvider } from '@mantine/core'
-import { useState } from 'react'
+// import { useState } from 'react'
+import Providers from './query-provider'
 
-// export const metadata = {
-//   title: 'My Mantine app',
-//   description: 'I have followed setup instructions carefully',
-// }
+export const metadata = {
+  title: 'My Mantine app',
+  description: 'I have followed setup instructions carefully',
+}
 
 // const queryClient = new QueryClient()
 
@@ -21,7 +22,7 @@ export default function RootLayout({
 }: {
   children: React.ReactNode
 }) {
-  const [queryClient] = useState(() => new QueryClient())
+  // const [queryClient] = useState(() => new QueryClient())
 
   return (
     <html lang="en">
@@ -30,9 +31,11 @@ export default function RootLayout({
       </head>
       <body>
         {/* can add a theme */}
-        <QueryClientProvider client={queryClient}>
+        {/* <QueryClientProvider client={queryClient}> */}
+        <Providers>
           <MantineProvider>{children}</MantineProvider>
-          </QueryClientProvider>
+        </Providers>
+        {/* </QueryClientProvider> */}
       </body>
     </html>
   )
diff --git a/pos-frontend/app/query-provider.tsx b/pos-frontend/app/query-provider.tsx
new file mode 100644
index 0000000..2b08754
--- /dev/null
+++ b/pos-frontend/app/query-provider.tsx
@@ -0,0 +1,13 @@
+// app/providers.jsx
+'use client'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useState } from 'react'
+
+export default function Providers({ children }: any) {
+  const [queryClient] = useState(() => new QueryClient())
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
