diff --git a/client/public/assets/images/orders/location.jpg b/client/public/assets/images/orders/location.jpg
new file mode 100644
index 0000000..914c12d
Binary files /dev/null and b/client/public/assets/images/orders/location.jpg differ
diff --git a/client/public/assets/images/orders/order-complete.jpg b/client/public/assets/images/orders/order-complete.jpg
new file mode 100644
index 0000000..21e968e
Binary files /dev/null and b/client/public/assets/images/orders/order-complete.jpg differ
diff --git a/client/public/assets/images/orders/order-loading.jpg b/client/public/assets/images/orders/order-loading.jpg
new file mode 100644
index 0000000..d39a463
Binary files /dev/null and b/client/public/assets/images/orders/order-loading.jpg differ
diff --git a/client/public/assets/images/orders/preview.jpg b/client/public/assets/images/orders/preview.jpg
new file mode 100644
index 0000000..43c182a
Binary files /dev/null and b/client/public/assets/images/orders/preview.jpg differ
diff --git a/client/public/assets/images/orders/product.jpg b/client/public/assets/images/orders/product.jpg
new file mode 100644
index 0000000..122ee77
Binary files /dev/null and b/client/public/assets/images/orders/product.jpg differ
diff --git a/client/src/sections/orders/order-card.jsx b/client/src/sections/orders/order-card.jsx
index 3317061..94fc221 100644
--- a/client/src/sections/orders/order-card.jsx
+++ b/client/src/sections/orders/order-card.jsx
@@ -140,13 +140,15 @@ export default function OrderCard({ order, onCancelOrder, onChangeOrderStatus })
               </Stack>
             </CardContent>
             <CardActions>
-              <Button size="small">Help</Button>
-              <Button size="small" onClick={handleOpenModal}>
+              <Button size="small" variant="outlined">
+                Help
+              </Button>
+              <Button size="small" onClick={handleOpenModal} variant="contained">
                 Details
               </Button>
-              {status !== 'Cancelled' && user === 'Patient' && (
+              {status !== 'Cancelled' && user === 'Patient' && status != 'Delivered' && (
                 <React.Fragment>
-                  <Button size="small" onClick={handleOpenCancelConfirmation}>
+                  <Button size="small" onClick={handleOpenCancelConfirmation} variant="outlined">
                     Cancel
                   </Button>
                   <Dialog open={isCancelConfirmationOpen} onClose={handleCloseCancelConfirmation}>
@@ -159,7 +161,7 @@ export default function OrderCard({ order, onCancelOrder, onChangeOrderStatus })
                 </React.Fragment>
               )}
               {status !== 'Cancelled' && user === 'Pharmacist' && (
-                <Button size="small" onClick={handleOpenChangeStatusModal}>
+                <Button size="small" onClick={handleOpenChangeStatusModal} variant="outlined">
                   Change Order State
                 </Button>
               )}
@@ -174,15 +176,47 @@ export default function OrderCard({ order, onCancelOrder, onChangeOrderStatus })
         aria-labelledby="order-details-modal"
         aria-describedby="order-details-description"
       >
-        <OrderDetails order={order} onCloseModal={handleCloseModal}></OrderDetails>
+        <OrderDetails order={order} onCLoseModal={handleCloseModal}></OrderDetails>
       </Modal>
       <Dialog open={isChangeStatusModalOpen} onClose={handleCloseChangeStatusModal}>
         <DialogTitle>Choose the new status</DialogTitle>
         <DialogActions>
-          <Button onClick={() => onChangeOrderStatus('Cancelled')}>Cancel</Button>
-          <Button onClick={() => onChangeOrderStatus('Processing')}>Processing</Button>
-          <Button onClick={() => onChangeOrderStatus('Shipped')}>Shipped</Button>
-          <Button onClick={() => onChangeOrderStatus('Delivered')}>Delivered</Button>
+          <Button
+            onClick={() => {
+              onChangeOrderStatus('Cancelled');
+              handleCloseChangeStatusModal(); // Close the modal after handling the status change
+            }}
+            variant="outlined"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              onChangeOrderStatus('Processing');
+              handleCloseChangeStatusModal();
+            }}
+            variant="outlined"
+          >
+            Processing
+          </Button>
+          <Button
+            onClick={() => {
+              onChangeOrderStatus('Shipped');
+              handleCloseChangeStatusModal();
+            }}
+            variant="outlined"
+          >
+            Shipped
+          </Button>
+          <Button
+            onClick={() => {
+              onChangeOrderStatus('Delivered');
+              handleCloseChangeStatusModal();
+            }}
+            variant="outlined"
+          >
+            Delivered
+          </Button>
         </DialogActions>
       </Dialog>
     </Box>
diff --git a/client/src/sections/report/general-report.jsx b/client/src/sections/report/general-report.jsx
index 29eefa0..8796d6f 100644
--- a/client/src/sections/report/general-report.jsx
+++ b/client/src/sections/report/general-report.jsx
@@ -1,7 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import { DataGrid } from '@mui/x-data-grid';
 import axios from 'axios';
-import { Typography, FormControl, InputLabel, Select, MenuItem, Stack, TextField, InputAdornment, IconButton, Alert } from '@mui/material';
+import {
+  Typography,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Stack,
+  TextField,
+  InputAdornment,
+  IconButton,
+  Alert
+} from '@mui/material';
 import TodayIcon from '@mui/icons-material/Today';
 import ClearIcon from '@mui/icons-material/Clear';
 
@@ -12,10 +23,32 @@ const columns = [
 ];
 
 const months = [
-  'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December'
 ];
 const monthMap = {
-  January: 1, February: 2, March: 3, April: 4, May: 5, June: 6, July: 7, August: 8, September: 9, October: 10, November: 11, December: 12
+  January: 1,
+  February: 2,
+  March: 3,
+  April: 4,
+  May: 5,
+  June: 6,
+  July: 7,
+  August: 8,
+  September: 9,
+  October: 10,
+  November: 11,
+  December: 12
 };
 
 export default function GeneralReport() {
@@ -23,6 +56,7 @@ export default function GeneralReport() {
   const [rows, setRows] = useState([]);
   const [selectedMonth, setSelectedMonth] = useState('');
   const [selectedDate, setSelectedDate] = useState(null);
+  const [loading, setLoading] = useState(false);
 
   const handleMonthChange = (event) => {
     setSelectedMonth(event.target.value);
@@ -45,6 +79,7 @@ export default function GeneralReport() {
   useEffect(() => {
     const fetchData = async () => {
       try {
+        setLoading(true);
         let report;
         if (selectedDate) {
           const month = selectedDate.getMonth() + 1;
@@ -72,6 +107,8 @@ export default function GeneralReport() {
         setRows(rowsArray);
       } catch (error) {
         setError(error);
+      } finally {
+        setLoading(false);
       }
     };
 
@@ -85,71 +122,73 @@ export default function GeneralReport() {
           An error occurred while fetching data.
         </Alert>
       )}
+      {loading && (
+        <Alert severity="error" sx={{ mb: 2 }}>
+          Loading..
+        </Alert>
+      )}
+      {!loading && (
+        <>
+          <Stack direction="row" spacing={2} alignItems="flex-end" mb={2}>
+            <FormControl fullWidth>
+              <InputLabel id="month-selector-label">Select Month</InputLabel>
+              <Select
+                labelId="month-selector-label"
+                id="month-selector"
+                value={selectedMonth}
+                onChange={handleMonthChange}
+                label="Select Month"
+              >
+                {months.map((month, index) => (
+                  <MenuItem key={index} value={month}>
+                    {month}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
 
-      <Stack direction="row" spacing={2} alignItems="flex-end" mb={2}>
-        <FormControl fullWidth>
-          <InputLabel id="month-selector-label">Select Month</InputLabel>
-          <Select
-            labelId="month-selector-label"
-            id="month-selector"
-            value={selectedMonth}
-            onChange={handleMonthChange}
-            label="Select Month"
-          >
-            {months.map((month, index) => (
-              <MenuItem key={index} value={month}>
-                {month}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-
-        <TextField
-          name="date"
-          onChange={handleChange}
-          placeholder="Search by date..."
-          type="datetime-local"
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <TodayIcon />
-              </InputAdornment>
-            ),
-            endAdornment: selectedDate && (
-              <InputAdornment position="end">
-                <IconButton onClick={clearDate}>
-                  <ClearIcon />
-                </IconButton>
-              </InputAdornment>
-            )
-          }}
-        />
-      </Stack>
+            <TextField
+              name="date"
+              onChange={handleChange}
+              placeholder="Search by date..."
+              type="datetime-local"
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <TodayIcon />
+                  </InputAdornment>
+                ),
+                endAdornment: selectedDate && (
+                  <InputAdornment position="end">
+                    <IconButton onClick={clearDate}>
+                      <ClearIcon />
+                    </IconButton>
+                  </InputAdornment>
+                )
+              }}
+            />
+          </Stack>
 
-      <div style={{ height: 400, width: '100%' }}>
-        <DataGrid
-          rows={rows}
-          columns={columns}
-          pageSize={5}
-          pageSizeOptions={[5, 10]}
-        />
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', padding: '16px' }}>
-        <Typography variant="h6" color="primary">
-          Total
-        </Typography>
-        <div style={{ display: 'flex', gap: '16px', marginTop: '8px' }}>
-          <div>
-            <Typography variant="body1">Total Sales:</Typography>
-            <Typography variant="h6">{`$${rows.reduce((total, row) => total + row.totalSales, 0)}`}</Typography>
+          <div style={{ height: 400, width: '100%' }}>
+            <DataGrid rows={rows} columns={columns} pageSize={5} pageSizeOptions={[5, 10]} />
           </div>
-          <div>
-            <Typography variant="body1">Total Items Saled:</Typography>
-            <Typography variant="h6">{rows.reduce((total, row) => total + row.totalItemsSaled, 0)}</Typography>
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', padding: '16px' }}>
+            <Typography variant="h6" color="primary">
+              Total
+            </Typography>
+            <div style={{ display: 'flex', gap: '16px', marginTop: '8px' }}>
+              <div>
+                <Typography variant="body1">Total Sales:</Typography>
+                <Typography variant="h6">{`$${rows.reduce((total, row) => total + row.totalSales, 0)}`}</Typography>
+              </div>
+              <div>
+                <Typography variant="body1">Total Items Saled:</Typography>
+                <Typography variant="h6">{rows.reduce((total, row) => total + row.totalItemsSaled, 0)}</Typography>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-
+        </>
+      )}
     </div>
   );
 }