diff --git a/libs/ui/common/src/lib/commandsR/orederingChoices.tsx b/libs/ui/common/src/lib/commandsR/orederingChoices.tsx
index da4d130..42bd5ee 100644
--- a/libs/ui/common/src/lib/commandsR/orederingChoices.tsx
+++ b/libs/ui/common/src/lib/commandsR/orederingChoices.tsx
@@ -1,25 +1,97 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Box, Button, Typography } from '@mui/material';
-import './orderingChoices.css'
+import './orderingChoices.css';
+import { useCurrentSelectedOrder } from './stores/currentSelectedOrder';
 
 export const OrderingChoices = ({ selectedTable }) => {
-    const { orders } = selectedTable;
+    const { orders, id: tableId } = selectedTable; 
+    const { setOrder } = useCurrentSelectedOrder(); 
+
+    const [selectedOrders, setSelectedOrders] = useState({});
+
+    const handleSelectOrder = (category, index) => {
+        setSelectedOrders(prev => {
+            const isSelected = prev[tableId]?.[category]?.[index];
+
+            if (isSelected) {
+                const { [index]: removed, ...rest } = prev[tableId][category];
+                return {
+                    ...prev,
+                    [tableId]: {
+                        ...prev[tableId],
+                        [category]: rest,
+                    },
+                };
+            } else {
+                return {
+                    ...prev,
+                    [tableId]: {
+                        ...prev[tableId],
+                        [category]: {
+                            ...prev[tableId]?.[category],
+                            [index]: { count: 0 } 
+                        }
+                    }
+                };
+            }
+        });
+    };
+
+    const handleIncrease = (category, index) => {
+        setSelectedOrders(prev => {
+            const currentCount = prev[tableId]?.[category]?.[index]?.count || 0;
+            const newCount = currentCount + 1;
+
+            setOrder(category, index, newCount);
+
+            return {
+                ...prev,
+                [tableId]: {
+                    ...prev[tableId],
+                    [category]: {
+                        ...prev[tableId]?.[category],
+                        [index]: { count: newCount }
+                    }
+                }
+            };
+        });
+    };
+
+    const handleDecrease = (category, index) => {
+        setSelectedOrders(prev => {
+            const currentCount = prev[tableId]?.[category]?.[index]?.count || 0;
+            const newCount = Math.max(0, currentCount - 1); 
+
+            setOrder(category, index, newCount);
+
+            return {
+                ...prev,
+                [tableId]: {
+                    ...prev[tableId],
+                    [category]: {
+                        ...prev[tableId]?.[category],
+                        [index]: { count: newCount }
+                    }
+                }
+            };
+        });
+    };
 
     return (
         <Box
             className="custom-scrollbar"
             sx={{
-                padding: '16px', 
+                padding: '16px',
                 marginTop: '90px',
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '14px',
-                height: '460px', 
-                overflowY: 'auto', 
-                border: '1px solid #ccc', 
-                width: 'calc(100% - 32px)', 
-                position: 'relative', 
-                left: '0', 
+                height: '460px',
+                overflowY: 'auto',
+                border: '1px solid #ccc',
+                width: 'calc(100% - 32px)',
+                position: 'relative',
+                left: '0',
             }}
         >
             {Object.keys(orders).map((category) => (
@@ -27,28 +99,42 @@ export const OrderingChoices = ({ selectedTable }) => {
                     <Typography variant="h6">{category}</Typography>
                     <Box sx={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                         {orders[category].length > 0 ? (
-                            orders[category].map((order, index) => (
-                                <Button
-                                    key={index}
-                                    variant="contained"
-                                    sx={{
-                                        width: '100px',
-                                        height: '100px',
-                                        borderRadius: '0px',
-                                        backgroundColor: '#ff6f61',
-                                        color: 'white',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        alignItems: 'center',
-                                        fontSize: '1.2rem',
-                                        '&:hover': {
-                                            backgroundColor: '#ff4d94',
-                                        },
-                                    }}
-                                >
-                                    {order}
-                                </Button>
-                            ))
+                            orders[category].map((order, index) => {
+                                const count = selectedOrders[tableId]?.[category]?.[index]?.count || 0;
+                                const isSelected = Boolean(selectedOrders[tableId]?.[category]?.[index]);
+
+                                return (
+                                    <Box key={index} sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                                        <Button
+                                            variant="contained"
+                                            onClick={() => handleSelectOrder(category, index)}
+                                            sx={{
+                                                width: '100px',
+                                                height: '100px',
+                                                borderRadius: '0px',
+                                                backgroundColor: isSelected ? 'green' : '#ff6f61',
+                                                color: 'white',
+                                                display: 'flex',
+                                                justifyContent: 'center',
+                                                alignItems: 'center',
+                                                fontSize: '1.2rem',
+                                                '&:hover': {
+                                                    backgroundColor: isSelected ? 'darkgreen' : '#ff4d94',
+                                                },
+                                            }}
+                                        >
+                                            {order}
+                                        </Button>
+                                        {isSelected && (
+                                            <Box sx={{ display: 'flex', justifyContent: 'center', marginTop: '8px' }}>
+                                                <Button onClick={() => handleDecrease(category, index)}>-</Button>
+                                                <Typography>{count}</Typography>
+                                                <Button onClick={() => handleIncrease(category, index)}>+</Button>
+                                            </Box>
+                                        )}
+                                    </Box>
+                                );
+                            })
                         ) : (
                             <Typography>No Choices</Typography>
                         )}
diff --git a/libs/ui/common/src/lib/commandsR/stores/currentSelectedOrder.tsx b/libs/ui/common/src/lib/commandsR/stores/currentSelectedOrder.tsx
new file mode 100644
index 0000000..f9a332e
--- /dev/null
+++ b/libs/ui/common/src/lib/commandsR/stores/currentSelectedOrder.tsx
@@ -0,0 +1,16 @@
+import { create } from "zustand";
+
+interface CurrentSelectedOrderState {
+  orders: { [category: string]: { [orderId: number]: number } };
+  setOrder: (category: string, orderId: number, count: number) => void;
+  resetOrders: () => void;
+}
+
+export const useCurrentSelectedOrder = create<CurrentSelectedOrderState>((set) => ({
+  orders: {},
+  setOrder: (category, orderId, count) => set((state) => {
+    const categoryOrders = { ...state.orders[category], [orderId]: count };
+    return { orders: { ...state.orders, [category]: categoryOrders } };
+  }),
+  resetOrders: () => set({ orders: {} }),
+}));
diff --git a/libs/ui/common/src/lib/orders/orders.tsx b/libs/ui/common/src/lib/orders/orders.tsx
index d957b9c..80f1ca4 100644
--- a/libs/ui/common/src/lib/orders/orders.tsx
+++ b/libs/ui/common/src/lib/orders/orders.tsx
@@ -4,32 +4,32 @@ import { useState } from 'react';
 import Section from './section';
 import BackButton from '../utils/backButton';
 
+const ordersData = {
+    drink: {
+        'Table 1': [
+            { order: 33, status: 'completed' },
+            { order: 32, status: 'pending' }
+        ],
+        'Table 2': [{ order: 41, status: 'completed' }]
+    },
+    starter: {
+        'Table 3': [
+            { order: 23, status: 'pending' },
+            { order: 22, status: 'completed' }
+        ],
+        'Table 1': [{ order: 15, status: 'completed' }]
+    },
+    mainCourse: {
+        'Table 2': [{ order: 39, status: 'pending' }],
+        'Table 3': [{ order: 24, status: 'completed' }]
+    }
+};
+
 export function Orders() {
     const [open, setOpen] = useState(false);
 
     const togglePopup = () => setOpen(prevOpen => !prevOpen);
 
-    const ordersData = {
-        drink: {
-            'Table 1': [
-                { order: 33, status: 'completed' },
-                { order: 32, status: 'pending' }
-            ],
-            'Table 2': [{ order: 41, status: 'completed' }]
-        },
-        starter: {
-            'Table 3': [
-                { order: 23, status: 'pending' },
-                { order: 22, status: 'completed' }
-            ],
-            'Table 1': [{ order: 15, status: 'completed' }]
-        },
-        mainCourse: {
-            'Table 2': [{ order: 39, status: 'pending' }],
-            'Table 3': [{ order: 24, status: 'completed' }]
-        }
-    };
-
     return (
         <Box margin={10} marginTop="20vw">
             <Box className="bottom-button">
diff --git a/libs/ui/common/src/lib/orders/section.css b/libs/ui/common/src/lib/orders/section.css
new file mode 100644
index 0000000..a124974
--- /dev/null
+++ b/libs/ui/common/src/lib/orders/section.css
@@ -0,0 +1,21 @@
+.custom-scrollbar-blue {
+    height: 460px; 
+    overflow-y: auto;
+}
+
+.custom-scrollbar-blue::-webkit-scrollbar {
+    width: 8px; 
+}
+
+.custom-scrollbar-blue::-webkit-scrollbar-thumb {
+    background-color: #003366; 
+    border-radius: 4px; 
+}
+
+.custom-scrollbar-blue::-webkit-scrollbar-thumb:hover {
+    background-color: #006699;
+}
+
+.custom-scrollbar-blue::-webkit-scrollbar-track {
+    background-color: #e0e0e0; 
+}
diff --git a/libs/ui/common/src/lib/orders/section.tsx b/libs/ui/common/src/lib/orders/section.tsx
index 5efd2e2..60a5367 100644
--- a/libs/ui/common/src/lib/orders/section.tsx
+++ b/libs/ui/common/src/lib/orders/section.tsx
@@ -2,6 +2,7 @@
 import { Button, Typography, Box } from "@mui/material";
 import { useState } from 'react';
 import CommandNumber from "./commandNumber";
+import "./section.css";
 
 const Section = ({ title, orders }) => (
     <Box sx={{ marginBottom: 3 }}>
diff --git a/libs/ui/common/src/lib/utils/navbar.tsx b/libs/ui/common/src/lib/utils/navbar.tsx
index 09a941f..1419e70 100644
--- a/libs/ui/common/src/lib/utils/navbar.tsx
+++ b/libs/ui/common/src/lib/utils/navbar.tsx
@@ -1,13 +1,6 @@
 import React, { useState } from 'react';
 import { Box, Button, Typography } from '@mui/material';
 
-const tables = [
-    { id: 1 },
-    { id: 2 },
-    { id: 3 },
-    { id: 4 },
-];
-
 export function NavBar({ tables, setSelectedTable }) {
     const [selectedTable, setSelectedTableLocal] = useState(tables[0]?.id || 1);