diff --git a/src/components/Dashboard/ManageItems.tsx b/src/components/Dashboard/ManageItems.tsx
index 1b6b967..5ffd0db 100644
--- a/src/components/Dashboard/ManageItems.tsx
+++ b/src/components/Dashboard/ManageItems.tsx
@@ -25,21 +25,36 @@ export default function ManageItems() {
         name: string;
         description: string;
         image_url: string;
+        quantity: number;
+        price: number;
     }
     const [items, setItems] = useState<Item[]>([]);
     const { isLoggedIn, authToken } = useLoginStore.getState();
     const apiUrl = import.meta.env.VITE_API_URL;
     const schema = yup.object().shape({
         name: yup.string().required('Store name is required'),
+        price: yup
+            .number()
+            .required('Price is required')
+            .positive('Price must be positive'),
     });
     const [formValues, setFormValues] = useState({
         name: '',
         description: '',
+        image_url: '',
+        quantity: 0,
+        price: 0,
     });
+
+    const [imageFile, setImageFile] = useState<File | null>(null);
     const [success, setSuccess] = useState<string | null>(null);
     const [error, setError] = useState<{ [key: string]: string | null }>({});
-    useEffect(() => {
-        const fetchItemsData = async () => {
+    const [open, setOpen] = useState(false);
+    const [isEditMode, setIsEditMode] = useState(false);
+    const [itemToEdit, setItemToEdit] = useState<Item | null>(null);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [itemToDelete, setItemToDelete] = useState<Item | null>(null);
+const fetchItemsData = async () => {
             try {
                 const response = await axios.get(`${apiUrl}/api/stores/items`, {
                     headers: {
@@ -53,36 +68,161 @@ export default function ManageItems() {
                 console.error('Error fetching store data', err);
             }
         };
+    useEffect(() => {
+        
         fetchItemsData();
     }, [apiUrl, authToken]);
-
-    const [open, setOpen] = useState(false);
     const openCreateItemDialog = () => {
-        setSuccess('');
-        setError({});
+        resetForm();
         setOpen(true);
     };
 
     const closeCreateItemDialog = () => {
+        resetForm();
         setOpen(false);
     };
-    const handleEdit = () => {}; // TODO: handleEdit
-    const handleDelete = () => {}; // TODO: handleDelete
+    const handleEdit = (item: Item) => {
+        setItemToEdit(item);
+        setFormValues({
+            name: item.name,
+            description: item.description,
+            image_url: item.image_url,
+            quantity: item.quantity,
+            price: item.price,
+        });
+        setIsEditMode(true);
+        setOpen(true);
+    };
+
+
+    const openDeleteDialog = (item: Item) => {
+        setItemToDelete(item);
+        setDeleteDialogOpen(true);
+    };
+
+    const closeDeleteDialog = () => {
+        setDeleteDialogOpen(false);
+        setItemToDelete(null);
+    };
+
+    const handleDelete = async () => {
+        if (itemToDelete) {
+            try {
+                await axios.delete(
+                    `${apiUrl}/api/stores/items/${itemToDelete.item_id}`,
+                    {
+                        headers: {
+                            Authorization: `Bearer ${authToken}`,
+                        },
+                    }
+                );
+                setItems((prevItems) =>
+                    prevItems.filter(
+                        (item) => item.item_id !== itemToDelete.item_id
+                    )
+                );
+                setSuccess('Item deleted successfully!');
+            } catch (err) {
+                console.error('Error deleting item', err);
+                setError({
+                    general: 'An error occurred while deleting the item.',
+                });
+            } finally {
+                closeDeleteDialog();
+            }
+        }
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+
+        setFormValues((prev) => ({
+            ...prev,
+            [name]:
+                (name === 'price' || name === 'quantity') && value === ''
+                    ? 0
+                    : value,
+        }));
+
+        setError((prev) => ({
+            ...prev,
+            [name]: null,
+        }));
+    };
 
     const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         try {
             await schema.validate(formValues, { abortEarly: false });
-            await axios.post(`${apiUrl}/api/stores/items`, formValues, {
-                headers: {
-                    Authorization: `Bearer ${authToken}`,
-                },
-            });
+            const formData = new FormData();
+            formData.append('name', formValues.name);
+            formData.append('description', formValues.description);
+            formData.append('quantity', formValues.quantity.toString());
+
+            if (imageFile) {
+                formData.append('file', imageFile);
+            }
+
+            const uploadResponse = imageFile
+                ? await axios.post(`${apiUrl}/api/files/upload`, formData, {
+                      headers: {
+                          Authorization: `Bearer ${authToken}`,
+                          'Content-Type': 'multipart/form-data',
+                      },
+                  })
+                : null;
+
+            const imageUrl = uploadResponse ? uploadResponse.data.url : null;
+
+            if (isEditMode && itemToEdit) {
+                // Update existing item
+                await axios.put(
+                    `${apiUrl}/api/stores/items/${itemToEdit.item_id}`,
+                    {
+                        name: formValues.name,
+                        description: formValues.description,
+                        image_url: imageUrl,
+                        price: formValues.price,
+                        quantity: formValues.quantity,
+                    },
+                    {
+                        headers: {
+                            Authorization: `Bearer ${authToken}`,
+                        },
+                    }
+                );
+
+                setItems((prevItems) =>
+                    prevItems.map((item) =>
+                        item.item_id === itemToEdit.item_id
+                            ? { ...item, ...formValues, image_url: imageUrl || item.image_url}
+                            : item
+                    )
+                );
+
+                setSuccess('Item updated successfully!');
+            } else {
+                // Create new item
+                await axios.post(
+                    `${apiUrl}/api/stores/items`,
+                    {
+                    ...formValues,
+                    image_url: imageUrl,
+                    },
+                    {
+                        headers: {
+                            Authorization: `Bearer ${authToken}`,
+                        },
+                    }
+                );
+                resetForm();
+                setSuccess('Item created successfully! Close the window');
+                fetchItemsData();
+            }
 
-            setSuccess('Item created successfully! Close the window');
             setError({});
         } catch (err) {
-            let messageError = 'An error occurred while creating an item.';
+            let messageError = 'An error occurred while saving the item.';
             if (axios.isAxiosError(err)) {
                 messageError =
                     err.response?.data?.message || 'An error occurred.';
@@ -95,31 +235,42 @@ export default function ManageItems() {
                 return;
             }
             setError({ general: messageError });
+        } finally {
+            closeCreateItemDialog();
+            setIsEditMode(false);
+            setItemToEdit(null);
         }
     };
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const { name, value } = e.target;
-        setFormValues((prev) => ({ ...prev, [name]: value }));
-        setError((prev) => ({ ...prev, [name]: null }));
+    const resetForm = () => {
+        setFormValues({
+            name: '',
+            description: '',
+            image_url: '',
+            quantity: 0,
+            price: 0,
+        });
+        setImageFile(null);
+        setSuccess(null);
+        setError({});
     };
 
     return (
         <Stack spacing={2}>
             <Typography
-                variant="h5"
-                component="h1"
-                textAlign="center"
+                variant='h5'
+                component='h1'
+                textAlign='center'
                 sx={{ textTransform: 'uppercase' }}
             >
                 Manage Items
             </Typography>
             {isLoggedIn ? (
                 <>
-                    <Box display="inline-block">
+                    <Box display='inline-block'>
                         <Button
-                            variant="contained"
-                            size="medium"
+                            variant='contained'
+                            size='medium'
+                            id='create'
                             onClick={openCreateItemDialog}
                         >
                             Create an item <AddBoxIcon sx={{ ml: 1 }} />
@@ -130,22 +281,22 @@ export default function ManageItems() {
                             <Grid2 container spacing={2}>
                                 {items.map((item) => (
                                     <Grid2 container spacing={2}>
-                                        <Card sx={{ maxWidth: 345 }}>
+                                        <Card sx={{ maxWidth: 400 }}>
                                             <CardMedia
-                                                sx={{ height: 140 }}
+                                                sx={{ height: 250 }}
                                                 image={item.image_url}
                                                 title={item.name}
                                             />
                                             <CardContent>
                                                 <Typography
                                                     gutterBottom
-                                                    variant="h5"
-                                                    component="div"
+                                                    variant='h5'
+                                                    component='div'
                                                 >
                                                     {item.name}
                                                 </Typography>
                                                 <Typography
-                                                    variant="body2"
+                                                    variant='body2'
                                                     sx={{
                                                         color: 'text.secondary',
                                                     }}
@@ -155,16 +306,23 @@ export default function ManageItems() {
                                             </CardContent>
                                             <CardActions>
                                                 <ButtonGroup
-                                                    size="small"
-                                                    aria-label="Small button group"
+                                                    size='small'
+                                                    aria-label='Small button group'
                                                 >
                                                     <Button
-                                                        onClick={handleEdit}
+                                                        id='edit'
+                                                        onClick={() =>
+                                                            handleEdit(item)
+                                                        }
                                                     >
                                                         Edit
                                                     </Button>
                                                     <Button
-                                                        onClick={handleDelete}
+                                                        onClick={() =>
+                                                            openDeleteDialog(
+                                                                item
+                                                            )
+                                                        }
                                                     >
                                                         Delete
                                                     </Button>
@@ -176,7 +334,7 @@ export default function ManageItems() {
                             </Grid2>
                         </Stack>
                     ) : (
-                        <Typography variant="body1">No items found.</Typography>
+                        <Typography variant='body1'>No items found.</Typography>
                     )}
                     <Dialog
                         open={open}
@@ -186,55 +344,124 @@ export default function ManageItems() {
                             onSubmit: handleSubmit,
                         }}
                     >
-                        <DialogTitle>Create an item</DialogTitle>
+                        <DialogTitle>
+                            {isEditMode ? 'Edit item' : 'Create an item'}
+                        </DialogTitle>
                         <DialogContent>
                             {error.general && (
-                                <Typography color="error">
+                                <Typography color='error'>
                                     {error.general}
                                 </Typography>
                             )}
                             {success && (
-                                <Typography color="success.main">
+                                <Typography color='success.main'>
                                     {success}
                                 </Typography>
                             )}
                             <TextField
                                 autoFocus
-                                margin="dense"
-                                label="Item Name"
-                                type="text"
-                                name="name"
+                                margin='dense'
+                                label='Item Name'
+                                type='text'
+                                name='name'
                                 value={formValues.name}
                                 onChange={handleChange}
                                 error={!!error.name}
                                 helperText={error.name || ''}
                                 fullWidth
-                                variant="outlined"
+                                variant='outlined'
                             />
                             <TextField
-                                margin="dense"
-                                label="Item Description"
-                                type="text"
-                                name="description"
+                                margin='dense'
+                                label='Item Description'
+                                type='text'
+                                name='description'
                                 value={formValues.description}
                                 onChange={handleChange}
                                 error={!!error.description}
                                 helperText={error.description || ''}
                                 fullWidth
-                                variant="outlined"
+                                variant='outlined'
                                 multiline
                                 rows={5}
                             />
+                            <Typography
+                                variant='body2'
+                                color='text.secondary'
+                                sx={{ mt: 2 }}
+                            >
+                                Item Image (JPG, GIF, PNG, max 10 MB)
+                            </Typography>
+
+                            <Box display='block' mt={1}>
+                                {imageFile && (
+                                    <Typography>{imageFile.name}</Typography>
+                                )}
+                                <Button variant='contained' component='label'>
+                                    Upload image
+                                    <input
+                                        type='file'
+                                        hidden
+                                        accept='.jpg,.gif,.png'
+                                        onChange={(e) => {
+                                            if (e.target.files) {
+                                                setImageFile(e.target.files[0]);
+                                            }
+                                        }}
+                                    />
+                                </Button>
+                            </Box>
+
+                            <Box display='block' mt={1}>
+                                <TextField
+                                    margin='dense'
+                                    label='Quantity in stock'
+                                    type='number'
+                                    name='quantity'
+                                    value={formValues.quantity}
+                                    onChange={handleChange}
+                                    error={!!error.quantity}
+                                    helperText={error.quantity || ''}
+                                    variant='outlined'
+                                />
+                            </Box>
+                            <Box display='block' mt={1}>
+                                <TextField
+                                    margin='dense'
+                                    label='Price'
+                                    type='number'
+                                    name='price'
+                                    value={formValues.price ?? 0}
+                                    onChange={handleChange}
+                                    error={!!error.price}
+                                    helperText={error.price || ''}
+                                    variant='outlined'
+                                />
+                            </Box>
                         </DialogContent>
                         <DialogActions>
                             <Button onClick={closeCreateItemDialog}>
                                 Close
                             </Button>
-                            <Button variant="contained" type="submit">
+                            <Button variant='contained' type='submit'>
                                 Save
                             </Button>
                         </DialogActions>
                     </Dialog>
+                    <Dialog open={deleteDialogOpen} onClose={closeDeleteDialog}>
+                        <DialogTitle>Delete Item</DialogTitle>
+                        <DialogContent>
+                            <Typography>
+                                Are you sure you want to delete this item?
+                            </Typography>
+                        </DialogContent>
+                        <DialogActions>
+                            <Button onClick={closeDeleteDialog}>Cancel</Button>
+                            <Button onClick={handleDelete} color='error'>
+                                Delete
+                            </Button>
+                        </DialogActions>
+                    </Dialog>
                 </>
             ) : (
                 'Please log in'