diff --git a/client/app/components/Manager/OrderList/index.js b/client/app/components/Manager/OrderList/index.js
index 59a28a82..bdc4a103 100644
--- a/client/app/components/Manager/OrderList/index.js
+++ b/client/app/components/Manager/OrderList/index.js
@@ -1,70 +1,59 @@
-/**
- *
- * OrderList
- *
- */
-
 import React from 'react';
-
 import { Link } from 'react-router-dom';
-
 import { formatDate } from '../../../utils/date';
 
-const OrderList = props => {
+const OrderList = (props) => {
   const { orders } = props;
 
-  const renderFirstItem = order => {
+  const renderFirstItem = (order) => {
     if (order.products) {
       const product = order.products[0].product;
       return (
         <img
-          className='item-image'
+          className="item-image"
           src={`${
             product && product?.imageUrl
               ? product?.imageUrl
               : '/images/placeholder-image.png'
           }`}
+          alt="product" // It's good practice to always include an alt attribute for images
         />
       );
     } else {
-      return <img className='item-image' src='/images/placeholder-image.png' />;
+      return <img className="item-image" src="/images/placeholder-image.png" alt="placeholder" />;
     }
   };
 
   return (
-    <div className='order-list'>
+    <div className="order-list">
       {orders.map((order, index) => (
-        <div key={index} className='order-box'>
-          <Link to={`/order/${order._id}`} className='d-block box-link'>
-            <div className='d-flex flex-column flex-lg-row mb-3'>
-              <div className='order-first-item p-lg-3'>
+        <div key={index} className="order-box">
+          <Link to={`/order/${order._id}`} className="d-block box-link">
+            <div className="d-flex flex-column flex-lg-row mb-3">
+              <div className="order-first-item p-lg-3">
                 {renderFirstItem(order)}
               </div>
-              <div className='d-flex flex-column flex-xl-row justify-content-between flex-1 ml-lg-2 mr-xl-4 p-3'>
-                <div className='order-details'>
-                  <div className='mb-1'>
+              <div className="d-flex flex-column flex-xl-row justify-content-between flex-1 ml-lg-2 mr-xl-4 p-3">
+                <div className="order-details">
+                  <div className="mb-1">
                     <span>Status</span>
                     {order?.products ? (
-                      <span className='order-label order-status'>{` ${order?.products[0].status}`}</span>
+                      <span className="order-label order-status">{` ${order?.products[0].status}`}</span>
                     ) : (
-                      <span className='order-label order-status'>{` Unavailable`}</span>
+                      <span className="order-label order-status">Unavailable</span>
                     )}
                   </div>
-                  <div className='mb-1'>
+                  <div className="mb-1">
                     <span>Order #</span>
-                    <span className='order-label'>{` ${order._id}`}</span>
+                    <span className="order-label">{` ${order._id}`}</span>
                   </div>
-                  <div className='mb-1'>
+                  <div className="mb-1">
                     <span>Ordered on</span>
-                    <span className='order-label'>{` ${formatDate(
-                      order.created
-                    )}`}</span>
+                    <span className="order-label">{` ${formatDate(order.created)}`}</span>
                   </div>
-                  <div className='mb-1'>
+                  <div className="mb-1">
                     <span>Order Total</span>
-                    <span className='order-label'>{` $${
-                      order?.totalWithTax ? order?.totalWithTax : 0
-                    }`}</span>
+                    <span className="order-label">{` $${order?.totalWithTax ? order?.totalWithTax : 0}`}</span>
                   </div>
                 </div>
               </div>