diff --git a/src/components/orders-table/list-order-details.component.tsx b/src/components/orders-table/list-order-details.component.tsx
index ae68e74..e4fb6de 100644
--- a/src/components/orders-table/list-order-details.component.tsx
+++ b/src/components/orders-table/list-order-details.component.tsx
@@ -1,107 +1,63 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  Tag,
-  StructuredListWrapper,
-  StructuredListRow,
-  StructuredListCell,
-  StructuredListBody,
-  Button,
-} from '@carbon/react';
-import capitalize from 'lodash-es/capitalize';
+import { Button, Tile, Accordion, AccordionItem } from '@carbon/react';
+import { ExtensionSlot, launchWorkspace, showModal } from '@openmrs/esm-framework';
 import { ListOrdersDetailsProps } from '../../types';
 import styles from './list-order-details.scss';
-import { ExtensionSlot, useLayoutType } from '@openmrs/esm-framework';
-import { Edit } from '@carbon/react/icons';
+import { OrderDetail } from './order-detail.component';
+
 const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
   const { t } = useTranslation();
   const orders = props.groupedOrders?.orders;
-  const isTablet = useLayoutType() === 'tablet';
 
   return (
-    <div>
+    <div className={styles.ordersContainer}>
       {orders &&
         orders.map((row) => (
-          <div className={styles.orderDetailsContainer}>
-            <div className={styles.orderUrgency}></div>
-            <div className={styles.orderHeader}>
-              <span className={styles.orderNumber}>
-                {t('orderNumbers', 'Order number:')} {row.orderNumber}
-              </span>
-              <span className={styles.orderDate}>
-                {t('orderDate', 'Order Date:')} {row.dateActivated}
-              </span>
-            </div>
-            <div className={styles.orderStatus}>
-              {t('orderStatus', 'Status:')}
-              <Tag size="lg" type={row.fulfillerStatus ? 'green' : 'red'}>
-                {row.fulfillerStatus || t('orderNotPicked', 'Order not picked')}
-              </Tag>
-            </div>
+          <Tile className={styles.orderTile}>
             <div>
-              <div className={styles.orderUrgency}>
-                <span className={styles.urgencyStatus}>
-                  {t('urgencyStatus', 'Urgency: ')} {capitalize(row.urgency)}
-                </span>
-              </div>
-              <StructuredListWrapper>
-                <StructuredListBody>
-                  <StructuredListRow>
-                    <StructuredListCell>{t('testOrdered', 'Test ordered: ')}</StructuredListCell>
-                    <StructuredListCell>{capitalize(row?.display)}</StructuredListCell>
-                    <br />
-                    <StructuredListCell>
-                      <span className={styles.instructionLabel}>{t('orderInStruction', 'Instructions: ')}</span>
-                      <span className={styles.instructions}>
-                        {row.instructions ?? (
-                          <Tag size="lg" type="red">
-                            {t('NoInstructionLeft', 'No instructions are provided.')}
-                          </Tag>
-                        )}
-                      </span>
-                    </StructuredListCell>
-                  </StructuredListRow>
-                </StructuredListBody>
-              </StructuredListWrapper>
-              <div className={styles.buttonSection}>
-                <span className={styles.nameOrder}>
-                  {t('ordererName', 'Orderer Name: ')} {capitalize(row.orderer?.display)}
-                </span>
-                <div className={styles.actionButtons}>
-                  {row.fulfillerStatus === 'New' ||
-                  row.fulfillerStatus === 'RECEIVED' ||
-                  row.fulfillerStatus == null ? (
-                    <ExtensionSlot
-                      className={styles.menuLink}
-                      state={{ order: row }}
-                      name="tests-ordered-actions-slot"
-                    />
-                  ) : row.fulfillerStatus === 'COMPLETED' ? (
-                    <ExtensionSlot
-                      className={styles.menuLink}
-                      state={{ order: row }}
-                      name="completed-ordered-actions-slot"
-                    />
-                  ) : row.fulfillerStatus === 'IN_PROGRESS' ? (
-                    <ExtensionSlot
-                      className={styles.menuLink}
-                      state={{ order: row }}
-                      name="inprogress-tests-actions-slot"
-                    />
-                  ) : (
-                    <div></div>
-                  )}
-                </div>
-              </div>
-              {row.fulfillerStatus === 'COMPLETED' && (
+              <OrderDetail label={t('date', 'Date').toUpperCase()} value={row.dateActivated} />
+              <OrderDetail label={t('orderNumber', 'Order number').toUpperCase()} value={row.orderNumber} />
+              <OrderDetail label={t('procedure', 'Procedure').toUpperCase()} value={row.display} />
+              <OrderDetail label={t('status', 'Status').toUpperCase()} value={row.fulfillerStatus} />
+              <OrderDetail label={t('urgency', 'Urgency').toUpperCase()} value={row.urgency} />
+              <OrderDetail label={t('orderer', 'Orderer').toUpperCase()} value={row.orderer?.display} />
+              <OrderDetail label={t('instructions', 'Instructions').toUpperCase()} value={row.instructions ?? '--'} />
+            </div>
+
+            <div className={styles.actionButtons}>
+              {row.fulfillerStatus === 'New' || row.fulfillerStatus === 'RECEIVED' || row.fulfillerStatus == null ? (
+                <ExtensionSlot className={styles.menuLink} state={{ order: row }} name="tests-ordered-actions-slot" />
+              ) : row.fulfillerStatus === 'IN_PROGRESS' ? (
                 <ExtensionSlot
-                  className={styles.labResultSlot}
+                  className={styles.menuLink}
                   state={{ order: row }}
-                  name="completed-lab-order-results-slot"
+                  name="inprogress-tests-actions-slot"
                 />
+              ) : row.fulfillerStatus === 'COMPLETED' ? (
+                <ExtensionSlot
+                  className={styles.menuLink}
+                  state={{ order: row }}
+                  name="completed-ordered-actions-slot"
+                />
+              ) : (
+                <div></div>
+              )}
+              {row.fulfillerStatus === 'COMPLETED' && (
+                <div className={styles.accordionContainer}>
+                  <Accordion>
+                    <AccordionItem title={t('results', 'Results')}>
+                      <ExtensionSlot
+                        className={styles.labResultSlot}
+                        state={{ order: row }}
+                        name="completed-lab-order-results-slot"
+                      />
+                    </AccordionItem>
+                  </Accordion>
+                </div>
               )}
             </div>
-          </div>
+          </Tile>
         ))}
     </div>
   );
diff --git a/src/components/orders-table/list-order-details.scss b/src/components/orders-table/list-order-details.scss
index 3ca9c74..31a7079 100644
--- a/src/components/orders-table/list-order-details.scss
+++ b/src/components/orders-table/list-order-details.scss
@@ -1,77 +1,60 @@
 @use '@carbon/layout';
 @use '@carbon/colors';
 @use '@openmrs/esm-styleguide/src/vars' as *;
-@use '@carbon/type';
-.buttonSection {
+
+.orderTile {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  padding-top: layout.$spacing-03;
   width: 100%;
-}
+  margin: 2px 0 8px;
+  padding: 0 8px 0 8px;
+  background-color: colors.$white-0;
+  border-left: 4px solid var(--brand-03);
+  color: $text-02;
+  margin-bottom: 1rem !important;
 
-.nameOrder {
-  font-size: type.type-scale(2);
+  &:hover {
+    background-color: colors.$white-hover;
+  }
 }
 
-.actionButtons {
+.ordersContainer {
   display: flex;
-  gap: layout.$spacing-03;
-  align-items: center;
-}
+  flex-direction: column;
+  max-width: 100%;
+  margin-bottom: 1rem;
 
-.menuLink {
-  display: inline-flex;
+  &:global(.cds--tile) {
+    min-height: 3rem !important;
+    padding-left: 10px !important;
+  }
 }
 
-.orderDetailsContainer {
-  width: 80%;
-  display: flex;
-  flex-direction: column;
-  padding: layout.$spacing-05;
-  margin-left: layout.$spacing-13;
-  background-color: colors.$white-0;
-  margin: layout.$spacing-05 0;
+.ordersContainer > :global(.cds--tile) {
+  min-height: 3rem !important;
+  padding-left: 10px !important;
+  margin: auto;
 }
 
-.orderUrgency {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  padding: 0 layout.$spacing-03;
-  margin-bottom: layout.$spacing-03;
+.orderPropertyDisplay {
+  font-size: 15px !important;
 }
 
-.orderHeader {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0;
-  margin-bottom: layout.$spacing-03;
-}
-.orderNumber {
-  font-size: type.type-scale(2);
-}
-.orderStatus {
-  font-size: type.type-scale(2);
+.bodyLong01 {
+  font-size: 13px !important;
 }
 
-.orderDate {
-  text-align: right;
-  font-size: type.type-scale(2);
+.displayValue {
+  color: #525252;
+  font-weight: bold;
+  width: layout.$spacing-05;
+  height: layout.$spacing-05;
 }
 
-.instructions {
-  text-align: justify;
-  font-size: type.type-scale(1);
-}
-.urgencyStatus {
-  font-size: type.type-scale(2);
-}
-.instructionLabel {
-  font-weight: bold;
-  font-size: type.type-scale(2);
+.actionButtons {
+  margin-left: layout.$spacing-05;
+  margin-top: layout.$spacing-07;
 }
-.labResultSlot {
-  width: 100%;
+.accordionContainer {
+  margin-top: layout.$spacing-03;
 }
diff --git a/src/components/orders-table/order-detail.component.tsx b/src/components/orders-table/order-detail.component.tsx
index 58defd4..2ab98f8 100644
--- a/src/components/orders-table/order-detail.component.tsx
+++ b/src/components/orders-table/order-detail.component.tsx
@@ -1,14 +1,14 @@
-// import React from 'react';
-// import styles from './order-detail.scss';
+import React from 'react';
+import styles from './order-detail.scss';
 
-// export const OrderDetail: React.FC<{ label: string; value: string | any }> = ({ label, value }) => {
-//   return (
-//     <div>
-//       <p className={styles.bodyLong01}>
-//         <span className={styles.label01}>{label}</span>
-//         {': '}
-//         <span className={styles.displayValue}>{value}</span>
-//       </p>
-//     </div>
-//   );
-// };
+export const OrderDetail: React.FC<{ label: string; value: string | any }> = ({ label, value }) => {
+  return (
+    <div>
+      <p className={styles.bodyLong01}>
+        <span className={styles.label01}>{label}</span>
+        {': '}
+        <span className={styles.displayValue}>{value}</span>
+      </p>
+    </div>
+  );
+};
diff --git a/src/lab-tabs/actions/actions.scss b/src/lab-tabs/actions/actions.scss
index 2280a2c..d99e32b 100644
--- a/src/lab-tabs/actions/actions.scss
+++ b/src/lab-tabs/actions/actions.scss
@@ -1,15 +1,8 @@
-@use '@carbon/type';
+@use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/layout';
 @use '@carbon/colors';
 
 .actionButton {
-  --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
-  --cds-layout-size-height: var(--cds-layout-size-height-context);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 0 layout.$spacing-04;
-  font-size: type.type-scale(2);
+  margin-top: layout.$spacing-01;
 }