diff --git a/apps/backend-bff/.env.development b/apps/backend-bff/.env.development
index 2aa74a9..950d187 100644
--- a/apps/backend-bff/.env.development
+++ b/apps/backend-bff/.env.development
@@ -1,4 +1,5 @@
 KITCHEN_BASE_URL=https://kitchen-backend.spos.polytech.apoorva64.com
 MENU_BASE_URL=https://menu-backend.spos.polytech.apoorva64.com
 DINING_BASE_URL=https://dining-backend.spos.polytech.apoorva64.com
-ORDERING_BASE_URL=https://ordering.spos.dev.polytech.apoorva64.com
+ORDERING_BASE_URL=http://localhost:3003
+
diff --git a/apps/frontend-bff/.env.development b/apps/frontend-bff/.env.development
index e995a08..4d7ce21 100644
--- a/apps/frontend-bff/.env.development
+++ b/apps/frontend-bff/.env.development
@@ -1,6 +1,6 @@
 VITE_KITCHEN_BASE_URL=https://kitchen-backend.spos.polytech.apoorva64.com
 VITE_MENU_BASE_URL=https://menu-backend.spos.polytech.apoorva64.com
 VITE_DINING_BASE_URL=https://dining-backend.spos.polytech.apoorva64.com
-VITE_BFF_BASE_URL=https://backend-bff.spos.dev.polytech.apoorva64.com
-VITE_PAYMENT_SHARING_BASE_URL=https://payment-sharing.spos.dev.polytech.apoorva64.com
-VITE_ORDERING_BASE_URL=https://ordering.spos.dev.polytech.apoorva64.com
\ No newline at end of file
+VITE_BFF_BASE_URL=http://localhost:3000
+VITE_PAYMENT_SHARING_BASE_URL=http://localhost:3002
+VITE_ORDERING_BASE_URL=http://localhost:3003
\ No newline at end of file
diff --git a/apps/frontend-common-space/.env.development b/apps/frontend-common-space/.env.development
index f7a0e0d..4d7ce21 100644
--- a/apps/frontend-common-space/.env.development
+++ b/apps/frontend-common-space/.env.development
@@ -1,6 +1,6 @@
 VITE_KITCHEN_BASE_URL=https://kitchen-backend.spos.polytech.apoorva64.com
 VITE_MENU_BASE_URL=https://menu-backend.spos.polytech.apoorva64.com
 VITE_DINING_BASE_URL=https://dining-backend.spos.polytech.apoorva64.com
-VITE_BFF_BASE_URL=https://backend-bff.spos.polytech.apoorva64.com
-VITE_PAYMENT_SHARING_BASE_URL=https://payment-sharing.spos.polytech.apoorva64.com
-VITE_ORDERING_BASE_URL=https://ordering.spos.polytech.apoorva64.com
\ No newline at end of file
+VITE_BFF_BASE_URL=http://localhost:3000
+VITE_PAYMENT_SHARING_BASE_URL=http://localhost:3002
+VITE_ORDERING_BASE_URL=http://localhost:3003
\ No newline at end of file
diff --git a/apps/frontend-common-space/src/app/app.tsx b/apps/frontend-common-space/src/app/app.tsx
index aada2a2..847582b 100644
--- a/apps/frontend-common-space/src/app/app.tsx
+++ b/apps/frontend-common-space/src/app/app.tsx
@@ -12,7 +12,7 @@ export function App() {
     <div>
       <Routes>
         <Route
-          path="/payementAsignee"
+          path="/payementAsignee/:groupId/:tableNumber"
           element={
             <Box
               sx={{
@@ -36,11 +36,12 @@ export function App() {
           }
         />
         <Route path="/thanks" element={<Thanks />} />
-        <Route path="/diningRoomTables" element={<DiningRoomTables />} />
+        <Route path="/diningRoomTables/:groupId/:tableNumber" element={<DiningRoomTables />} />
         <Route
-          path={"/mealSelectionForPayment/:groupId/:tableNumber"}
+          path={"/mealSelectionForPayment/:tableNumber"}
           element={<MealSelectionForPayment />}
         />
+
       </Routes>
       {/* END: routes */}
     </div>
diff --git a/apps/frontend-personal-space/.env.development b/apps/frontend-personal-space/.env.development
index d906da5..7098116 100644
--- a/apps/frontend-personal-space/.env.development
+++ b/apps/frontend-personal-space/.env.development
@@ -1,5 +1,6 @@
 VITE_KITCHEN_BASE_URL=https://kitchen-backend.spos.polytech.apoorva64.com
 VITE_MENU_BASE_URL=https://menu-backend.spos.polytech.apoorva64.com
 VITE_DINING_BASE_URL=https://dining-backend.spos.polytech.apoorva64.com
-VITE_BFF_BASE_URL=https://backend-bff.spos.dev.polytech.apoorva64.com
-VITE_PAYMENT_SHARING_BASE_URL=https://payment-sharing.spos.dev.polytech.apoorva64.com
+VITE_BFF_BASE_URL=http://localhost:3000
+VITE_PAYMENT_SHARING_BASE_URL=http://localhost:3002
+VITE_ORDERING_BASE_URL=http://localhost:3003
diff --git a/apps/frontend-personal-space/src/app/app.tsx b/apps/frontend-personal-space/src/app/app.tsx
index e3a6e69..2e6efcc 100644
--- a/apps/frontend-personal-space/src/app/app.tsx
+++ b/apps/frontend-personal-space/src/app/app.tsx
@@ -9,7 +9,7 @@ export function App() {
     <div>
       <Routes>
         <Route path={"/:groupId/:tableNumber/:ownerId"} element={<PersonalOrdering/>} />
-        <Route path="/personalBilling/:groupId/:tableNumber/:ownerId" element={<PersonalBilling />} />
+        <Route path="/personalBilling/:tableNumber/:ownerId" element={<PersonalBilling />} />
         <Route path="/thanks" element={<Thanks />} />
       </Routes>
       {/* END: routes */}
diff --git a/apps/frontend-personal-space/src/app/pages/Personal-billing.tsx b/apps/frontend-personal-space/src/app/pages/Personal-billing.tsx
index 52bee02..4c93b6a 100644
--- a/apps/frontend-personal-space/src/app/pages/Personal-billing.tsx
+++ b/apps/frontend-personal-space/src/app/pages/Personal-billing.tsx
@@ -1,16 +1,21 @@
 import { useNavigate, useParams } from 'react-router-dom';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Typography } from '@mui/material';
 import { SSEProvider, useSSE } from 'react-hooks-sse';
-import { TableBillingShell, GroupClosedListener } from '@spos/ui/common';
-import { useMutation } from '@tanstack/react-query';
+import { GroupClosedListener, TableBillingShell } from '@spos/ui/common';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import {
   Configuration,
   ItemRequestDto,
-  PaymentsApi, PaymentsApiPaymentControllerMakePaymentRequest,
-  SelectedByCustomerDTO
+  PaymentsApi,
+  PaymentsApiPaymentControllerMakePaymentRequest,
+  SelectedByCustomerDTO,
 } from '@spos/clients-payment-sharing';
 import { TableItem } from '@spos/services/common';
 import React from 'react';
+import {
+  Configuration as ConfigurationGroup,
+  RemoteGroupApi,
+} from '@spos/clients-bff';
 
 interface TablesProps {
   groupId: string;
@@ -180,14 +185,29 @@ const PriceDisplay = () => {
 
 export function PersonalBilling() {
   const navigate = useNavigate();
-  const { groupId, tableNumber, ownerId } = useParams<{
-    groupId: string;
+  const { tableNumber, ownerId } = useParams<{
     tableNumber: string;
     ownerId: string;
   }>();
+  const { data: groupId } = useQuery({
+    queryKey: ['group', tableNumber],
+    queryFn: async () => {
+      const api = new RemoteGroupApi(
+        new ConfigurationGroup({ basePath: import.meta.env.VITE_BFF_BASE_URL })
+      );
+
+      return (
+        await api.remoteGroupControllerGetGroupFromTableNumber({
+          tableNumber: tableNumber || '',
+        })
+      ).data.id;
+    },
+  });
 
   const partialPaymentMutation = useMutation({
-    mutationFn: (paymentsApiPaymentControllerMakePaymentRequest: PaymentsApiPaymentControllerMakePaymentRequest) => {
+    mutationFn: (
+      paymentsApiPaymentControllerMakePaymentRequest: PaymentsApiPaymentControllerMakePaymentRequest
+    ) => {
       console.log(paymentsApiPaymentControllerMakePaymentRequest);
       return new PaymentsApi(
         new Configuration({
@@ -198,15 +218,21 @@ export function PersonalBilling() {
         })
       ).paymentControllerMakePayment({
         groupId: paymentsApiPaymentControllerMakePaymentRequest.groupId,
-        ownerId: paymentsApiPaymentControllerMakePaymentRequest.ownerId
+        ownerId: paymentsApiPaymentControllerMakePaymentRequest.ownerId,
       });
     },
     onSuccess: (data) => {
       if (data.data) {
         navigate('/thanks');
       }
-    }
+    },
   });
+  if (!tableNumber) {
+    throw new Error('Table number is required');
+  }
+  if (!groupId) {
+    return <CircularProgress />;
+  }
 
   return (
     <Box
@@ -228,7 +254,8 @@ export function PersonalBilling() {
       <SSEProvider
         endpoint={
           `${
-      import.meta.env.VITE_PAYMENT_SHARING_BASE_URL}/api/payments/sse/customer-items/` +
+            import.meta.env.VITE_PAYMENT_SHARING_BASE_URL
+          }/api/payments/sse/customer-items/` +
           groupId +
           '/' +
           ownerId
@@ -269,10 +296,12 @@ export function PersonalBilling() {
             >
               <PriceDisplay />
               <Button
-                onClick={() => partialPaymentMutation.mutate({
-                  groupId: groupId ?? "",
-                  ownerId: ownerId ?? ""
-                })}
+                onClick={() =>
+                  partialPaymentMutation.mutate({
+                    groupId: groupId ?? '',
+                    ownerId: ownerId ?? '',
+                  })
+                }
                 variant="contained"
                 color="inherit"
                 sx={{
diff --git a/apps/payment-sharing/src/app/payment/payment.service.ts b/apps/payment-sharing/src/app/payment/payment.service.ts
index 15b2709..e3c9354 100644
--- a/apps/payment-sharing/src/app/payment/payment.service.ts
+++ b/apps/payment-sharing/src/app/payment/payment.service.ts
@@ -330,7 +330,7 @@ export class PaymentService {
   }
 
   async makePayment(group_id: string, owner_id: string): Promise<boolean> {
-    return  await this.tracer.startActiveSpan('makePayment', async (span) => {
+    return await this.tracer.startActiveSpan('makePayment', async (span) => {
       try {
         this.logger.log(
           `Making payment for group_id: ${group_id}, owner_id: ${owner_id}`
@@ -354,13 +354,14 @@ export class PaymentService {
           });
         });
 
-        const isFinished =(
+        const isFinished = (
           await this.billingsApi.remoteBillingControllerPartialPayment({
             annotatedMonsieurAxelMenvoie2: {
               groupId: group_id,
               elementToBePaid: tableItems,
             },
-          })).data;
+          })
+        ).data;
 
         // remove all selected items
         const selectedItems = await this.repository
@@ -370,7 +371,9 @@ export class PaymentService {
           .and('owner_id')
           .equals(owner_id)
           .return.all();
-        await this.repository.remove(selectedItems.map((item) => item[EntityId]));
+        await this.repository.remove(
+          selectedItems.map((item) => item[EntityId])
+        );
 
         await this.publishWithContext('update-payment', {
           group_id,
@@ -378,7 +381,7 @@ export class PaymentService {
           action: 'pay',
           actionData: {
             isFinished,
-          }
+          },
         });
         return isFinished;
       } finally {
@@ -393,11 +396,14 @@ export class PaymentService {
         this.logger.log('Handling update payment');
         const subscription = this.redisClient.duplicate();
         await subscription.connect();
-        await subscription.subscribe('update-payment', async (message) => {
-          const data = JSON.parse(message);
-          this.logger.log(`Received update-payment event: ${message}`);
-          this.eventEmitter.emit('update-payment', data);
-        });
+        await subscription.subscribe(
+          ['update-payment', 'order'],
+          async (message) => {
+            const data = JSON.parse(message);
+            this.logger.log(`Received update-payment event: ${message}`);
+            this.eventEmitter.emit('update-payment', data);
+          }
+        );
       } finally {
         span.end();
       }
diff --git a/libs/services/common/src/lib/billing/billingServiceWorkflow.ts b/libs/services/common/src/lib/billing/billingServiceWorkflow.ts
index 6f7fe4b..2c3d27a 100644
--- a/libs/services/common/src/lib/billing/billingServiceWorkflow.ts
+++ b/libs/services/common/src/lib/billing/billingServiceWorkflow.ts
@@ -80,10 +80,12 @@ export class BillingServiceWorkflow implements BillingService {
           }
         }
       }
-
+      const itemList = Object.values(tableItems).filter(
+        (item) => item.remaining > 0
+      )
       tableSummary.push({
         number: table.number,
-        elements: Object.values(tableItems),
+        elements: itemList,
       });
     }
     return tableSummary;
diff --git a/libs/services/common/src/lib/logger.ts b/libs/services/common/src/lib/logger.ts
index 60b138e..255300e 100644
--- a/libs/services/common/src/lib/logger.ts
+++ b/libs/services/common/src/lib/logger.ts
@@ -6,6 +6,5 @@ export const logger = afterMethod((meta) => {
     `Method: ${meta.method.name}',
      'Class: ${meta.target.constructor.name}',
      'Arguments: ${meta.args}`,
-    meta.result
   );
 });
diff --git a/libs/ui/common/src/index.ts b/libs/ui/common/src/index.ts
index d186bb1..d722965 100644
--- a/libs/ui/common/src/index.ts
+++ b/libs/ui/common/src/index.ts
@@ -28,3 +28,4 @@ export * from './lib/commandsR/mealSelectionForPayment';
 export * from './lib/commandsR/stores/cart';
 export * from './lib/thanks/thanks';
 export * from './lib/utils/GroupClosedListener';
+export * from './lib/utils/uniqueSvgTable';
diff --git a/libs/ui/common/src/lib/billing/payementAsignee.tsx b/libs/ui/common/src/lib/billing/payementAsignee.tsx
index 4e1431f..3a9ef2d 100644
--- a/libs/ui/common/src/lib/billing/payementAsignee.tsx
+++ b/libs/ui/common/src/lib/billing/payementAsignee.tsx
@@ -4,40 +4,56 @@ import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
 import CancelIcon from '@mui/icons-material/Cancel';
 import { Configuration, PaymentsApi } from '@spos/clients-payment-sharing';
 import { useMutation } from '@tanstack/react-query';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
+import useCarts, { CartsState } from '../commandsR/stores/cart';
 
 const makePayment = async (data: {
-  userState: any;
-  tableId: string;
+  cart: CartsState['carts'];
   groupId: string;
   userId: string;
 }) => {
   const api = new PaymentsApi(
     new Configuration({
-      basePath: import.meta.env.VITE_PAYMENTS_API_BASE_PATH,
+      basePath: import.meta.env.VITE_PAYMENT_SHARING_BASE_URL,
     })
   );
-
-  // faire cette req pour chaque type d'item (foie gras, pizza, etc) en mettant la quantité
-  return (
-    await api.paymentControllerTakeItemFromCenterTable({
-      itemRequestDto: {} as any,
-    })
-  ).data;
+  const promises = [];
+  for (const [currentTable, items] of Object.entries(data.cart)) {
+    for (const item of items) {
+      promises.push(
+        api.paymentControllerTakeItemFromCenterTable({
+          itemRequestDto: {
+            amount: item.quantity,
+            group_id: data.groupId,
+            item_short_name: item.shortName,
+            owner_id: data.userId,
+            table_id: currentTable,
+          },
+        })
+      );
+    }
+  }
+  await Promise.all(promises);
 };
 
 export function PayementAsignee() {
-  const tableId = '1';
-  const groupId = '1';
-  const state = {};
+  const { tableNumber: tableId, groupId } = useParams<{
+    tableNumber: string;
+    groupId: string;
+  }>();
+  const cart = useCarts((state) => state.carts);
+  const navigate = useNavigate();
+  const resetCart = useCarts((state) => state.resetAllCarts);
 
   // mutation
   const { mutate } = useMutation({
     mutationFn: makePayment,
+    onSuccess: () => {
+      resetCart();
+      navigate(`/mealSelectionForPayment/${tableId}`);
+    },
   });
 
-  const navigate = useNavigate();
-
   return (
     <div
       style={{
@@ -58,9 +74,8 @@ export function PayementAsignee() {
         <IconButton
           onClick={() => {
             mutate({
-              userState: state,
-              tableId: tableId,
-              groupId: groupId,
+              cart,
+              groupId: groupId || '',
               userId: tableId + '1',
             });
           }}
@@ -91,9 +106,8 @@ export function PayementAsignee() {
         <IconButton
           onClick={() => {
             mutate({
-              userState: state,
-              tableId: tableId,
-              groupId: groupId,
+              cart,
+              groupId: groupId || '',
               userId: tableId + '2',
             });
           }}
@@ -124,7 +138,7 @@ export function PayementAsignee() {
       >
         <IconButton
           onClick={() => {
-            navigate(`/mealSelectionForPayment/${groupId}/${tableId}`);
+            navigate(`/mealSelectionForPayment/${tableId}`);
           }}
         >
           <CancelIcon
@@ -154,9 +168,8 @@ export function PayementAsignee() {
         <IconButton
           onClick={() => {
             mutate({
-              userState: state,
-              tableId: tableId,
-              groupId: groupId,
+              cart,
+              groupId: groupId || '',
               userId: tableId + '3',
             });
           }}
@@ -188,9 +201,8 @@ export function PayementAsignee() {
         <IconButton
           onClick={() => {
             mutate({
-              userState: state,
-              tableId: tableId,
-              groupId: groupId,
+              cart,
+              groupId: groupId || '',
               userId: tableId + '4',
             });
           }}
diff --git a/libs/ui/common/src/lib/commandsR/Item.tsx b/libs/ui/common/src/lib/commandsR/Item.tsx
index b4aa7c9..4459995 100644
--- a/libs/ui/common/src/lib/commandsR/Item.tsx
+++ b/libs/ui/common/src/lib/commandsR/Item.tsx
@@ -16,6 +16,7 @@ type ItemProps = {
   tableNumber: number;
   handleSelectItem: (itemId: string, shortName: string) => void;
   remaining?: number;
+  onTable?: number;
 };
 
 export function Item(props: Readonly<ItemProps>) {
@@ -29,7 +30,7 @@ export function Item(props: Readonly<ItemProps>) {
     )?.quantity ?? 0;
     
   return (
-    <Card sx={{ maxWidth: 250, minWidth: 150, maxHeight: 250 }}>
+    <Card sx={{ maxWidth: 250, minWidth: 150, maxHeight: 600 }}>
       <CardMedia
         sx={{ width: '100%', minWidth: 120, height: 100 }}
         image={props.item.image}
@@ -42,9 +43,14 @@ export function Item(props: Readonly<ItemProps>) {
         <Typography gutterBottom variant="h5" component="div">
           {props.item.shortName}
         </Typography>
-        <Typography variant="body2" color="text.secondary" sx={{ fontSize: '1.4rem' }}>
-          {props.remaining ? `Remaining: ${props.remaining}` : ''}
-        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ fontSize: '1.3rem' }}>
+          {props.remaining ? `Unpaid: ${props.remaining}` : ''}
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ fontSize: '1.2rem' }}>
+
+          {props.onTable ? `Selected: ${(props.remaining ?? 0) - props.onTable}` : ''}
+          </Typography>
+
       </CardContent>
 
       <CardActions
diff --git a/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx b/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx
index eee2b84..c6d61d6 100644
--- a/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx
+++ b/libs/ui/common/src/lib/commandsR/mealSelectionForPayment.tsx
@@ -1,15 +1,19 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Footer from '../utils/mealSelectionForPaymentFooter';
 import BackButton from '../utils/backButton';
 import { useSSE, SSEProvider } from 'react-hooks-sse';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Box, Typography, CircularProgress, Divider, Grid } from '@mui/material';
-import { PaymentResponseTableDTO } from '@spos/clients-payment-sharing';
+import { Configuration, PaymentResponseTableDTO } from "@spos/clients-payment-sharing";
 import { Item } from './Item';
 import { ContainerContext } from '../containerHook/containerContext';
 import { useQuery } from '@tanstack/react-query';
 import { CatalogueService, TYPES } from '@spos/services/common';
-import { useCarts } from './stores/cart';
+import { useTableStore } from '../dining/stores/tableSelectionStore';
+import OtherTable from './otherTables';
+import useCarts from './stores/cart';
+import { RemoteGroupApi } from "@spos/clients-bff";
+import {Configuration as ConfigurationGroup} from '@spos/clients-bff';
 
 interface MealSelectionContentProps {
   onClose: () => void;
@@ -32,21 +36,39 @@ interface TableItem {
 
 export function MealSelectionForPayment() {
   const navigate = useNavigate();
-  const { groupId, tableNumber } = useParams<{ 
-    groupId: string; 
+  const { tableNumber } = useParams<{
     tableNumber: string;
   }>();
-
+  const { data: groupId } = useQuery({
+    queryKey: ['group', tableNumber],
+    queryFn: async () => {
+      const api = new RemoteGroupApi(
+        new ConfigurationGroup({ basePath: import.meta.env.VITE_BFF_BASE_URL })
+      );
+
+      return (
+        await api.remoteGroupControllerGetGroupFromTableNumber({
+          tableNumber: tableNumber || '',
+        })
+      ).data.id;
+    },
+  });
+  console.log('Group ID:', groupId);
+  if (!tableNumber) {
+    throw new Error('Table number is required');
+  }
+  if (!groupId) {
+    return <CircularProgress />;
+  }
   function handleSelectWhoPays() {
     console.log('Select who pays button clicked');
-    //navigate(`/diningRoomTables/${tableNumber}`);
-    navigate(`/payementAsignee/`);
-
+    navigate(`/payementAsignee/${groupId}/${tableNumber}`);
   }
 
   function handleGroupClick() {
     console.log('Group button clicked');
-    navigate(`/diningRoomTables/`);
+    navigate(`/diningRoomTables/${groupId}/${tableNumber}`);
+    //navigate(`/diningRoomTables/`);
 
   }
 
@@ -75,10 +97,26 @@ function MealSelectionContent({
 }: MealSelectionContentProps) {
   const tableItems = useSSE<PaymentResponseTableDTO[]>('message', []);
   const container = React.useContext(ContainerContext);
+  const selectedTables = useTableStore((state) => state.selectedTables);
+  const currentTableCart = useCarts((state) => state.carts)[tableNumber] || [];
+  const updateItem = useCarts((state) => state.updateItem);
 
+  React.useEffect(() => {
+    console.log("Selected Tables:", selectedTables ? Array.from(selectedTables) : []);
+  }, [selectedTables]);
   const currentTable = tableItems.find((table) => table.number === tableNumber);
-  const itemIds = currentTable ? currentTable.elements.map((element) => element.item.id) : [];
-  const updateItem = useCarts((state) => state.updateItem);
+  const otherTables = tableItems.filter(
+    (table) => Array.from(selectedTables).includes(table.number) && table.number !== tableNumber
+  );
+
+
+  const itemIds = React.useMemo(() => {
+    const currentTableItems = currentTable ? currentTable.elements.map((element) => element.item.id) : [];
+    const otherTableItems = otherTables.flatMap((table) => table.elements.map((element) => element.item.id));
+    return Array.from(new Set([...currentTableItems, ...otherTableItems]));
+  }, [currentTable, otherTables]);
+
+
 
   const { data: catalog, isLoading: isLoadingCatalog } = useQuery({
     queryKey: ['catalogMealSelectionForPayments', itemIds],
@@ -90,6 +128,7 @@ function MealSelectionContent({
     refetchOnWindowFocus: 'always',
   });
 
+
   if (!tableItems || tableItems.length === 0) {
     return (
       <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
@@ -101,13 +140,20 @@ function MealSelectionContent({
   if (!currentTable) {
     return <Typography variant="h6" sx={{ textAlign: 'center', mt: 4 }}>No items available for this table.</Typography>;
   }
+  function handleSelectItem(itemId: string, shortName: string) {
+    if (currentTableCart.find((element) => element.shortName === shortName) !== undefined) {
+      updateItem(tableNumber, itemId, shortName, 0); // Remove item
+    } else {
+      updateItem(tableNumber, itemId, shortName, 1); // Add item
+    }
+  }
 
   function handleClose(tableItems: PaymentResponseTableDTO[], updateItem: (tableNumber: number, itemId: string, shortName: string, quantity: number) => void): void {
     console.log('Close button clicked');
     for (const key in tableItems) {
       const table = tableItems[key]
       tableNumber = table.number
-      const elements = table.elements 
+      const elements = table.elements
       for (const elemKey in elements){
         const element = elements[elemKey]
         updateItem(tableNumber, element.item.id, element.item.name, 0)
@@ -118,14 +164,14 @@ function MealSelectionContent({
   return (
     <Box sx={{ pb: 10 }}>
       <BackButton onClick={onBackButtonClick} />
-      <Box sx={{ mt: 15, px: 3, 
-                  maxHeight: '600px', 
+      <Box sx={{ mt: 15, px: 3,
+                  maxHeight: '1150px',
                   overflowY: 'auto', }}>
         <Typography variant="h3" color="primary" sx={{ mb: 2, textAlign: 'center' }}>
           My table (Nb {currentTable.number})
         </Typography>
         <Divider sx={{ mb: 2 }} />
-        
+
         {isLoadingCatalog ? (
           <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
             <CircularProgress />
@@ -147,7 +193,7 @@ function MealSelectionContent({
 
                 return (
                   <Grid item xs={12} sm={6} md={4} lg={3} key={index}>
-                  
+
                       <Item
                         item={{
                           _id: element.item.id,
@@ -158,8 +204,9 @@ function MealSelectionContent({
                           price: element.item.price,
                         }}
                         tableNumber={tableNumber}
-                        handleSelectItem={() => console.log('Item selected')}
+                        handleSelectItem={() =>handleSelectItem(element.item.id, element.item.name)}
                         remaining={element.remaining}
+                        onTable={element.onTable}
                         isSelected={isSelected}
                       />
                   </Grid>
@@ -168,6 +215,9 @@ function MealSelectionContent({
             </Grid>
           </Box>
         )}
+        {otherTables.map((table) => (
+          <OtherTable key={table.number} table={table} catalog={catalog} handleSelectItem={handleSelectItem}/>
+        ))}
       </Box>
       <Footer onClose={() => handleClose(tableItems, updateItem)}  onSelectWhoPays={onSelectWhoPays} onGroupClick={onGroupClick} />
     </Box>
diff --git a/libs/ui/common/src/lib/commandsR/otherTables.tsx b/libs/ui/common/src/lib/commandsR/otherTables.tsx
new file mode 100644
index 0000000..28630a8
--- /dev/null
+++ b/libs/ui/common/src/lib/commandsR/otherTables.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { Grid, Box, Typography, Divider } from '@mui/material';
+import { Item } from './Item';
+import CloseButton from '../utils/closeButton';
+
+interface OtherTableProps {
+  table: {
+    number: number;
+    elements: {
+      item: { id: string; name: string; price: number };
+      remaining: number;
+    }[];
+  };
+  catalog: any[];
+  handleSelectItem: (itemId: string, shortName: string) => void;
+}
+
+const OtherTable: React.FC<OtherTableProps> = ({ table, catalog, handleSelectItem }) => {
+  const handleCloseButton = () => {
+    console.log('Close button clicked');
+  };
+  return (
+    <>
+      <Box sx={{ position: 'relative' }}>
+        <Typography variant="h3" sx={{ color: 'green', mb: 2, textAlign: 'center' }}>
+          Table Nb {table.number}
+        </Typography>
+        <CloseButton
+          onClick={handleCloseButton}
+          width="60px"
+          height="60px"
+          iconSize="40px"
+        
+        />
+      </Box>
+      <Box
+        sx={{
+          backgroundColor: 'rgba(76, 175, 80, 0.1)', 
+          borderRadius: 2,
+          p: 3,
+          boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.2)',
+          mb: 3,
+        }}
+      >
+        <Divider sx={{ mb: 2 }} />
+        <Grid container spacing={2}>
+          {table.elements.map((element, index) => {
+            const catalogItem = catalog?.find((item) => item._id === element.item.id);
+            /*catalog?.forEach((cartItem) => {
+              console.log('Cart Item:', cartItem); 
+            });*/
+            const isSelected = Boolean(
+              catalog?.find((cartItem) => {
+                return cartItem._id === element.item.id; 
+              })
+            );
+            
+            console.log(isSelected)
+            console.log(catalog)
+            console.log(catalogItem);
+            return (
+              <Grid item xs={12} sm={6} md={4} lg={3} key={index}>
+                {catalogItem && (
+                  <Item
+                    item={{
+                      _id: element.item.id,
+                      fullName: element.item.name,
+                      shortName: element.item.name,
+                      category: catalogItem?.category || 'default',
+                      image: catalogItem?.image || '',
+                      price: element.item.price,
+                    }}
+                    tableNumber={table.number}
+                    remaining={element.remaining}
+                    isSelected={isSelected}
+                    handleSelectItem={() => handleSelectItem(element.item.id, element.item.name)}
+                  />
+                )}
+              </Grid>
+            );
+          })}
+        </Grid>
+      </Box>
+    </>
+  );
+};
+
+export default OtherTable;
diff --git a/libs/ui/common/src/lib/commandsR/stores/cart.tsx b/libs/ui/common/src/lib/commandsR/stores/cart.tsx
index 100dedc..eb0edd2 100644
--- a/libs/ui/common/src/lib/commandsR/stores/cart.tsx
+++ b/libs/ui/common/src/lib/commandsR/stores/cart.tsx
@@ -16,6 +16,7 @@ export interface CartsState {
     quantity: number
   ) => void;
   resetCart: (tableNumber: number) => void;
+  resetAllCarts: () => void;
 }
 
 export const createStore = () =>
@@ -23,6 +24,8 @@ export const createStore = () =>
     carts: {},
     updateItem: (tableNumber, itemId, shortName, quantity) =>
       set((state) => {
+        console.log(`Updating item: ${shortName} (ID: ${itemId}) in table ${tableNumber} with quantity: ${quantity}`);
+
         const currentCart = state.carts[tableNumber] || [];
 
         const itemIndex = currentCart.findIndex(
@@ -56,6 +59,10 @@ export const createStore = () =>
           [tableNumber]: [],
         },
       })),
+    resetAllCarts: () =>
+      set({
+        carts: {},
+      }),
   }));
 
 const StoreContext = createContext(null);
diff --git a/libs/ui/common/src/lib/dining/diningRoomSvg.tsx b/libs/ui/common/src/lib/dining/diningRoomSvg.tsx
index 6255979..0fedcd1 100644
--- a/libs/ui/common/src/lib/dining/diningRoomSvg.tsx
+++ b/libs/ui/common/src/lib/dining/diningRoomSvg.tsx
@@ -1,66 +1,84 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { TablePaths } from '../utils/SvgTablePath';
+//import { TablePaths } from '../utils/SvgTablePath';
+import { useTableStore } from './stores/tableSelectionStore';
+import { TablesSvgGrid } from '../utils/SvgTablePath';
+import { useNavigate, useParams } from 'react-router-dom';
+import { ContainerContext } from '../containerHook/containerContext';
+import { useQuery } from '@tanstack/react-query';
+import { GroupService, Table, TYPES } from '@spos/services/common';
+import { Typography } from '@mui/material';
 
 interface DiningRoomSVGProps {
   onSelectionChange: (hasSelection: boolean) => void;
 }
 
 const DiningRoomSVG = ({ onSelectionChange }: DiningRoomSVGProps) => {
+  const navigate = useNavigate();
+  const { groupId, tableNumber } = useParams<{ 
+    groupId: string; 
+    tableNumber: string;
+  }>();
+  const stringTableNumber = tableNumber;
+  const userTable = tableNumber ? parseInt(tableNumber, 10) : undefined;
+  const [tablesInGroup, setTablesInGroup] = useState<number[]>([]); 
+  const addTable = useTableStore((state) => state.addTable);
+  const removeTable = useTableStore((state) => state.removeTable);
+  const selectedTables = useTableStore((state) => state.selectedTables);
+
+
   
-  
-  const [userTable] = useState(5);
-  const [selectedTables, setSelectedTables] = useState(new Set<number>());
+  const container = React.useContext(ContainerContext);
+  const isValidTableNumber = (tableNumber: string | undefined): boolean => {
+    const isString = typeof tableNumber === 'string';
+    console.log('Type de stringTableNumber:', typeof tableNumber); 
+    return isString && tableNumber.trim() !== '';
+  };
+  const {
+    data: group,
+    isLoading,
+    isError,
+    error,
+  } = useQuery({
+    queryKey: ['groupWithTable', groupId],
+    queryFn: async () => {
+      const groupService: GroupService = container.get<GroupService>(TYPES.GroupService);
+      if (isValidTableNumber(groupId)) {
+        return groupService.getGroup(groupId);
+      }
+      throw new Error('groupId is undefined');
+    },
+    refetchOnWindowFocus: 'always',
+    enabled: !!groupId && groupId !== '',
+  });
+  useEffect(() => {
+    if (group) {
+      setTablesInGroup(group.tables.map((table) => table.number)); 
+    }
+  }, [group]);
 
   useEffect(() => {
     onSelectionChange(selectedTables.size > 0);
   }, [selectedTables, onSelectionChange]);
 
-  
-  const groups = {
-    1: [0,1,2,3,4,5,6,7,8],
-    2: [],
-    3: [],
-  };
+  if (isLoading) {
+    return <Typography variant="h6" component="h2" fontWeight="bold">Loading...</Typography>;
+  }
+
+  if (!group || isError) {
+    console.error(error);
+    return <Typography variant="h6" component="h2" fontWeight="bold">Error</Typography>;
+  }
 
-  const getTableGroup = (tableIndex: number) => {
-    //console.log("____________")
-    //console.log(tableIndex)
-    return Object.entries(groups).find(([_, tables]) =>
-      tables.includes(tableIndex)
-    )?.[0];
-  };
 
   const isInUserGroup = (tableIndex: number) => {
-    const userGroup = getTableGroup(userTable);
-    const tableGroup = getTableGroup(tableIndex);
-    return userGroup === tableGroup;
+    return tablesInGroup.includes(tableIndex)
   };
 
   const handleTableClick = (index: number) => {
-    console.log(index)
     if (isInUserGroup(index) && index !== userTable) {
-      console.log("user table : ")
-      console.log(userTable)
-      console.log("-------------")
-      console.log(index)
-
-      setSelectedTables((prev) => {
-        const newSet = new Set(prev);
-        if (newSet.has(index)) {
-          newSet.delete(index);
-        } else {
-          newSet.add(index);
-        }
-        console.log(`Selected tables: ${Array.from(newSet)}`); // Log des tables sélectionnées
-
-        setSelectedTables(newSet);
-        
-
-        //onSelectionChange(newSet.size > 0);
-
-        return newSet;
-      });
+      selectedTables.has(index) ? removeTable(index) : addTable(index);
     }
+
   };
 
   const getTableColor = (index: number) => {
@@ -71,32 +89,12 @@ const DiningRoomSVG = ({ onSelectionChange }: DiningRoomSVGProps) => {
   };
 
   return (
-    <svg
-      version="1.0"
-      xmlns="http://www.w3.org/2000/svg"
-      width="300.000000pt"
-      height="309.000000pt"
-      viewBox="0 0 300.000000 309.000000"
-      preserveAspectRatio="xMidYMid meet"
-    >
-      <metadata>
-        Created by potrace 1.10, written by Peter Selinger 2001-2011
-      </metadata>
-      <g
-        transform="translate(0.000000,309.000000) scale(0.100000,-0.100000)"
-        fill="#000000"
-        stroke="none"
-      >
-        <TablePaths
-          handleTableClick={handleTableClick}
-          getTableColor={getTableColor}
-          >        
-          </TablePaths>
-       
-      </g>
-     
-    </svg>
+    <TablesSvgGrid
+      handleTableClick={handleTableClick}
+      getTableColor={getTableColor}
+      userTableIndex={userTable ?? -1}
+    />
   );
 };
-
 export default DiningRoomSVG;
+
diff --git a/libs/ui/common/src/lib/dining/diningRoomTables.tsx b/libs/ui/common/src/lib/dining/diningRoomTables.tsx
index f0e2495..54ebeb0 100644
--- a/libs/ui/common/src/lib/dining/diningRoomTables.tsx
+++ b/libs/ui/common/src/lib/dining/diningRoomTables.tsx
@@ -2,16 +2,26 @@ import React, { useState } from 'react';
 import './diningRoomTables.css';
 import DiningRoomSVG from './diningRoomSvg';
 import DiningHeader from './diningHeader';
+import { useNavigate, useParams } from 'react-router-dom';
 
 export function DiningRoomTables() {
+  const navigate = useNavigate();
+  const { groupId, tableNumber } = useParams<{ 
+    groupId: string; 
+    tableNumber: string;
+  }>();
+
   const [hasSelection, setHasSelection] = useState(false);
 
   const handleBackClick = () => {
     console.log('Back button clicked');
+    navigate(`/mealSelectionForPayment/${tableNumber}`);
+
   };
 
   const handleContinueClick = () => {
     console.log('Continue button clicked');
+    navigate(`/mealSelectionForPayment/${tableNumber}`);
   };
 
   return (
diff --git a/libs/ui/common/src/lib/dining/stores/tableSelectionStore.tsx b/libs/ui/common/src/lib/dining/stores/tableSelectionStore.tsx
new file mode 100644
index 0000000..2b138f2
--- /dev/null
+++ b/libs/ui/common/src/lib/dining/stores/tableSelectionStore.tsx
@@ -0,0 +1,34 @@
+import { create } from 'zustand';
+
+interface TableStore {
+  selectedTables: Set<number>;
+  addTable: (tableId: number) => void;
+  removeTable: (tableId: number) => void;
+  clearTables: () => void;
+}
+
+export const useTableStore = create<TableStore>((set) => ({
+  selectedTables: new Set(),
+
+  addTable: (tableId) =>
+    set((state) => {
+      const newSet = new Set(state.selectedTables);
+      newSet.add(tableId);
+      console.log(`Table ${tableId} added. Current selected tables:`, Array.from(newSet));
+      return { selectedTables: newSet };
+    }),
+
+  removeTable: (tableId) =>
+    set((state) => {
+      const newSet = new Set(state.selectedTables);
+      newSet.delete(tableId);
+      console.log(`Table ${tableId} removed. Current selected tables:`, Array.from(newSet));
+      return { selectedTables: newSet };
+    }),
+
+  clearTables: () =>
+    set(() => {
+      console.log('All tables cleared.');
+      return { selectedTables: new Set() };
+    }),
+}));
diff --git a/libs/ui/common/src/lib/utils/SvgTablePath.tsx b/libs/ui/common/src/lib/utils/SvgTablePath.tsx
index 806068a..db8c97b 100644
--- a/libs/ui/common/src/lib/utils/SvgTablePath.tsx
+++ b/libs/ui/common/src/lib/utils/SvgTablePath.tsx
@@ -9,6 +9,7 @@ interface TablePath {
 interface TablePathsProps {
     handleTableClick: (index: number) => void;
     getTableColor: (index: number) => string;
+    userTableIndex: number;
 }
   
 
@@ -236,7 +237,7 @@ const tablePaths: TablePath[] = [
     text: 'YOU',
   },
 ];
-
+/*
 export const TablePaths: React.FC<TablePathsProps> = ({ handleTableClick, getTableColor }) => {
   return (
     <>
@@ -249,4 +250,61 @@ export const TablePaths: React.FC<TablePathsProps> = ({ handleTableClick, getTab
       ))}
     </>
   );
-};
\ No newline at end of file
+};*/
+
+import TableSvg from './uniqueSvgTable';
+import { Typography } from '@mui/material';
+
+export const TablesSvgGrid: React.FC<TablePathsProps> = ({ handleTableClick, getTableColor,userTableIndex }) => {
+  
+  const userTableIndex2 = 2; 
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        aspectRatio: '1/1',
+        gap: '0.2rem',
+      }}
+    >
+      {Array.from({ length: 9 }, (_, index) => {
+        const isCurrentTable = index + 1 === userTableIndex; 
+        return (
+          <div
+            key={index}
+            style={{
+              aspectRatio: '1/1',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transform: 'scale(1.2)',
+            }}
+          >
+            {isCurrentTable ? (
+              <>
+                <TableSvg 
+                  index={index + 1}
+                  handleTableClick={handleTableClick} 
+                  getTableColor={getTableColor} 
+                  isCurrentTable={true}
+                />
+                <Typography variant="body1" style={{fontSize: '45px', position: 'absolute', textAlign: 'center', color: '#87CEFA' }}>
+                  YOU
+                </Typography>
+              </>
+            ) : (
+              <TableSvg 
+                index={index + 1}
+                handleTableClick={handleTableClick} 
+                getTableColor={getTableColor} 
+                isCurrentTable={false}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
diff --git a/libs/ui/common/src/lib/utils/mealSelectionForPaymentFooter.tsx b/libs/ui/common/src/lib/utils/mealSelectionForPaymentFooter.tsx
index 857d4ea..9ebb3ad 100644
--- a/libs/ui/common/src/lib/utils/mealSelectionForPaymentFooter.tsx
+++ b/libs/ui/common/src/lib/utils/mealSelectionForPaymentFooter.tsx
@@ -26,6 +26,7 @@ const Footer: React.FC<FooterProps> = ({ onClose, onSelectWhoPays, onGroupClick
     const handleIconTouchEnd = (e: React.TouchEvent<HTMLButtonElement>) => {
         e.currentTarget.style.color = '#0A1E3F'; 
         e.currentTarget.style.transform = 'scale(2.5)'; 
+        //Navigate group id et table id
     };
 
     return (
diff --git a/libs/ui/common/src/lib/utils/oneTable.svg b/libs/ui/common/src/lib/utils/oneTable.svg
new file mode 100644
index 0000000..f468d62
--- /dev/null
+++ b/libs/ui/common/src/lib/utils/oneTable.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" version="1.0">
+ <metadata>Created by potrace 1.10, written by Peter Selinger 2001-2011</metadata>
+ <g class="layer">
+  <title>Layer 1</title>
+  <g fill="#000000" id="svg_1" transform="matrix(0.227058 0 0 -0.224504 -26.7069 -37.3636)">
+   <path d="m251.83,-207.94c-45,-32 -113,-111 -113,-131c0,-6 22,-32 49,-56c48,-43 49,-46 49,-102c0,-53 -3,-60 -41,-99c-23,-24 -47,-43 -54,-43c-39,0 18,-91 92,-148c42,-32 75,-41 75,-22c0,6 19,31 41,55c40,43 44,45 99,45c57,0 59,-1 105,-52l46,-52l36,20c41,21 136,130 130,148c-2,6 -14,16 -26,22c-12,6 -35,24 -52,40c-25,24 -29,35 -29,84c0,53 2,58 43,98c23,23 48,42 55,42c7,0 12,11 12,25c0,35 -120,155 -155,155c-14,0 -25,-6 -25,-13c0,-7 -18,-31 -40,-52c-37,-37 -44,-39 -100,-40c-54,-1 -63,2 -89,30c-16,16 -34,40 -40,53c-15,28 -20,28 -68,-7zm416,-20c34,-26 91,-96 91,-113c0,-5 -34,26 -75,67c-94,96 -98,108 -16,46zm-439,-51c-40,-39 -74,-69 -76,-67c-9,8 58,88 98,117c22,17 43,28 45,26c2,-2 -28,-36 -67,-76zm439,-1c34,-33 61,-64 61,-68c0,-4 -15,-22 -34,-40c-33,-32 -56,-35 -56,-7c0,15 -77,90 -101,98c-10,4 -5,15 20,42c19,20 38,36 42,36c4,0 35,-27 68,-61zm-325,22c28,-29 28,-51 2,-51c-14,0 -70,-59 -93,-96c-11,-18 -13,-18 -43,13l-33,31l21,30c24,33 98,102 110,102c5,0 21,-13 36,-29zm218,-77c187,-131 43,-425 -173,-354c-49,17 -114,85 -130,138c-52,175 154,321 303,216zm-219,-347l38,-20l-37,-38c-21,-22 -41,-39 -44,-39c-6,1 -66,56 -104,98l-30,32l38,39l39,39l31,-46c17,-25 48,-54 69,-65zm351,74c22,-23 26,-33 18,-48c-13,-23 -108,-113 -120,-113c-4,0 -23,15 -41,34c-32,33 -32,34 -12,41c31,9 79,53 97,86c18,36 24,36 58,0zm21,-97c-41,-50 -111,-101 -123,-90c-4,4 2,12 13,18c11,6 47,39 80,73c67,70 88,70 30,-1zm-542,33c16,-25 78,-86 112,-111c11,-8 17,-17 13,-21c-17,-17 -158,117 -158,149c0,14 19,4 33,-17z" id="svg_2"/>
+  </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/libs/ui/common/src/lib/utils/test.svg b/libs/ui/common/src/lib/utils/test.svg
new file mode 100644
index 0000000..e0d32b1
--- /dev/null
+++ b/libs/ui/common/src/lib/utils/test.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="300.000000pt" height="309.000000pt" viewBox="0 0 300.000000 309.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.10, written by Peter Selinger 2001-2011
+</metadata>
+<g transform="translate(0.000000,309.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M183 2921 c-45 -32 -113 -111 -113 -131 0 -6 22 -32 49 -56 48 -43
+49 -46 49 -102 0 -53 -3 -60 -41 -99 -23 -24 -47 -43 -54 -43 -39 0 18 -91 92
+-148 42 -32 75 -41 75 -22 0 6 19 31 41 55 40 43 44 45 99 45 57 0 59 -1 105
+-52 l46 -52 36 20 c41 21 136 130 130 148 -2 6 -14 16 -26 22 -12 6 -35 24
+-52 40 -25 24 -29 35 -29 84 0 53 2 58 43 98 23 23 48 42 55 42 7 0 12 11 12
+25 0 35 -120 155 -155 155 -14 0 -25 -6 -25 -13 0 -7 -18 -31 -40 -52 -37 -37
+-44 -39 -100 -40 -54 -1 -63 2 -89 30 -16 16 -34 40 -40 53 -15 28 -20 28 -68
+-7z m416 -20 c34 -26 91 -96 91 -113 0 -5 -34 26 -75 67 -94 96 -98 108 -16
+46z m-439 -51 c-40 -39 -74 -69 -76 -67 -9 8 58 88 98 117 22 17 43 28 45 26
+2 -2 -28 -36 -67 -76z m439 -1 c34 -33 61 -64 61 -68 0 -4 -15 -22 -34 -40
+-33 -32 -56 -35 -56 -7 0 15 -77 90 -101 98 -10 4 -5 15 20 42 19 20 38 36 42
+36 4 0 35 -27 68 -61z m-325 22 c28 -29 28 -51 2 -51 -14 0 -70 -59 -93 -96
+-11 -18 -13 -18 -43 13 l-33 31 21 30 c24 33 98 102 110 102 5 0 21 -13 36
+-29z m218 -77 c187 -131 43 -425 -173 -354 -49 17 -114 85 -130 138 -52 175
+154 321 303 216z m-219 -347 l38 -20 -37 -38 c-21 -22 -41 -39 -44 -39 -6 1
+-66 56 -104 98 l-30 32 38 39 39 39 31 -46 c17 -25 48 -54 69 -65z m351 74
+c22 -23 26 -33 18 -48 -13 -23 -108 -113 -120 -113 -4 0 -23 15 -41 34 -32 33
+-32 34 -12 41 31 9 79 53 97 86 18 36 24 36 58 0z m21 -97 c-41 -50 -111 -101
+-123 -90 -4 4 2 12 13 18 11 6 47 39 80 73 67 70 88 70 30 -1z m-542 33 c16
+-25 78 -86 112 -111 11 -8 17 -17 13 -21 -17 -17 -158 117 -158 149 0 14 19 4
+33 -17z"/>
+</g>
+</svg>
diff --git a/libs/ui/common/src/lib/utils/uniqueSvgTable.tsx b/libs/ui/common/src/lib/utils/uniqueSvgTable.tsx
new file mode 100644
index 0000000..d53614e
--- /dev/null
+++ b/libs/ui/common/src/lib/utils/uniqueSvgTable.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface TableSvgProps {
+    index: number;
+    handleTableClick: (index: number) => void;
+    getTableColor: (index: number) => string;
+    isCurrentTable: boolean;
+}
+
+const TableSvg: React.FC<TableSvgProps> = ({ 
+    index, 
+    handleTableClick, 
+    getTableColor, 
+    isCurrentTable 
+}) => {
+    return (
+        <svg width="60vh" height="60vh" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+        <g key={index} 
+        onClick={() => handleTableClick(index)} 
+        pointerEvents="bounding-box" 
+        fill={getTableColor(index)}
+        transform="matrix(0.447055 0 0 -0.447055 -20.0258 -47.6671)">
+        <path  aria-label={`Table ${index}`} d="m183,-169c-45,-32 -113,-111 -113,-131c0,-6 22,-32 49,-56c48,-43 49,-46 49,-102c0,-53 -3,-60 -41,-99c-23,-24 -47,-43 -54,-43c-39,0 18,-91 92,-148c42,-32 75,-41 75,-22c0,6 19,31 41,55c40,43 44,45 99,45c57,0 59,-1 105,-52l46,-52l36,20c41,21 136,130 130,148c-2,6 -14,16 -26,22c-12,6 -35,24 -52,40c-25,24 -29,35 -29,84c0,53 2,58 43,98c23,23 48,42 55,42c7,0 12,11 12,25c0,35 -120,155 -155,155c-14,0 -25,-6 -25,-13c0,-7 -18,-31 -40,-52c-37,-37 -44,-39 -100,-40c-54,-1 -63,2 -89,30c-16,16 -34,40 -40,53c-15,28 -20,28 -68,-7zm416,-20c34,-26 91,-96 91,-113c0,-5 -34,26 -75,67c-94,96 -98,108 -16,46zm-439,-51c-40,-39 -74,-69 -76,-67c-9,8 58,88 98,117c22,17 43,28 45,26c2,-2 -28,-36 -67,-76zm439,-1c34,-33 61,-64 61,-68c0,-4 -15,-22 -34,-40c-33,-32 -56,-35 -56,-7c0,15 -77,90 -101,98c-10,4 -5,15 20,42c19,20 38,36 42,36c4,0 35,-27 68,-61zm-325,22c28,-29 28,-51 2,-51c-14,0 -70,-59 -93,-96c-11,-18 -13,-18 -43,13l-33,31l21,30c24,33 98,102 110,102c5,0 21,-13 36,-29zm218,-77c187,-131 43,-425 -173,-354c-49,17 -114,85 -130,138c-52,175 154,321 303,216zm-219,-347l38,-20l-37,-38c-21,-22 -41,-39 -44,-39c-6,1 -66,56 -104,98l-30,32l38,39l39,39l31,-46c17,-25 48,-54 69,-65zm351,74c22,-23 26,-33 18,-48c-13,-23 -108,-113 -120,-113c-4,0 -23,15 -41,34c-32,33 -32,34 -12,41c31,9 79,53 97,86c18,36 24,36 58,0zm21,-97c-41,-50 -111,-101 -123,-90c-4,4 2,12 13,18c11,6 47,39 80,73c67,70 88,70 30,-1zm-542,33c16,-25 78,-86 112,-111c11,-8 17,-17 13,-21c-17,-17 -158,117 -158,149c0,14 19,4 33,-17z" id="svg_2"
+        />
+        </g>
+        </svg>
+    );
+}
+export default TableSvg;
\ No newline at end of file