diff --git a/components/labor-allocations-table/labor-allocations-table.component.jsx b/components/labor-allocations-table/labor-allocations-table.component.jsx
index e1096f3..df2790b 100644
--- a/components/labor-allocations-table/labor-allocations-table.component.jsx
+++ b/components/labor-allocations-table/labor-allocations-table.component.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
 import _ from "lodash";
-import { Card, DataTable } from "react-native-paper";
+import { Card, DataTable, Divider } from "react-native-paper";
 import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs.queries";
 import ErrorDisplay from "../error-display/error-display.component";
 import { useQuery } from "@apollo/client";
@@ -104,21 +104,15 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician }) {
       {typeof data !== "undefined" ? (
         <View style={{ flexGrow: 1 }}>
           <DataTable>
-            <DataTable.Header>
-              <DataTable.Title style={{ flex: 2 }}>Cost Center</DataTable.Title>
-              <DataTable.Title numeric style={{ flex: 2 }}>
-                Hours Total
-              </DataTable.Title>
-              <DataTable.Title numeric style={{ flex: 2 }}>
-                Hours Claimed
-              </DataTable.Title>
-              <DataTable.Title numeric style={{ flex: 2 }}>
-                Adjustments
-              </DataTable.Title>
-              <DataTable.Title numeric style={{ flex: 2 }}>
-                Difference
-              </DataTable.Title>
-            </DataTable.Header>
+            <View style={localStyles.headerArea}>
+              <Text style={localStyles.headertext}>Cost Center</Text>
+              <Text style={localStyles.headertext}>Hours Total</Text>
+              <Text style={localStyles.headertext}>Hours Claimed</Text>
+              {/* <Text numberOfLines={2} style={{ flex: 1, flexWrap:'wrap' }}>Hours Claimed</Text> */}
+              <Text style={localStyles.headertextAdjusts}>Adjustments</Text>
+              <Text style={localStyles.headertext}>Difference</Text>
+            </View>
+            <Divider orientation="vertical" />
           </DataTable>
           <DataTable>
           <FlatList
@@ -127,22 +121,23 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician }) {
               <RefreshControl refreshing={loading} onRefresh={onRefresh} />
             }
             keyExtractor={(item) => item.cost_center}
+            ItemSeparatorComponent={<Divider orientation="vertical" />}
             renderItem={(object) => (
                 
               <DataTable.Row>
-                <DataTable.Cell style={{ flex: 2 }}>
+                <View style={{ flex: 1, alignItems:'flex-start' }}>
                   <Text>
-                    {object.item.cost_center}
-                    {object.item.mod_lbr_ty}
+                    {object.item.cost_center} {" ("}
+                    {object.item.mod_lbr_ty}{")"}
                   </Text>
-                </DataTable.Cell>
-                <DataTable.Cell style={{ flex: 2 }}>
+                </View>
+                <View style={{ flex: 1, alignItems:'center'}} >
                   <Text>{object.item.total && object.item.total.toFixed(1)}</Text>
-                </DataTable.Cell>
-                <DataTable.Cell style={{ flex: 2 }}>
+                </View>
+                <View style={{ flex: 1, alignItems:'center' }}>
                   <Text>{object.item.claimed && object.item.claimed.toFixed(1)}</Text>
-                </DataTable.Cell>
-                <DataTable.Cell style={{ flex: 2 }}>
+                </View>
+                <View style={{ flex: 1, alignItems:'center' }}>
                   <Text>
                     {object.item.adjustments && object.item.adjustments.toFixed(1)}
                     {/* {!technician && (
@@ -156,10 +151,10 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician }) {
                     </LaborAllocationsAdjustmentEdit>
                   )} */}
                   </Text>
-                </DataTable.Cell>
-                <DataTable.Cell style={{ flex: 2 }}>
+                </View>
+                <View style={{flex: 1, alignItems:'center'}}>
                   <Text style={{
-                        color: object.item.difference >= 0 ? "green" : "red",
+                        color: object.item.difference >= 0 ? "green" : "red", 
                       }}>
                     {/* <strong
                       style={{
@@ -170,10 +165,18 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician }) {
                     </strong> */}
                     {_.round(object.item.difference, 1)}
                   </Text>
-                </DataTable.Cell>
+                </View>
               </DataTable.Row>
             )}
           />
+           {summary && (<View style={localStyles.headerArea}>
+              <Text style={localStyles.footertext}>Totals</Text>
+              <Text style={localStyles.footertext}>{summary.hrs_total.toFixed(1)}</Text>
+              <Text style={localStyles.footertext}>{summary.hrs_claimed.toFixed(1)}</Text>
+              <Text style={localStyles.footertext}>{summary.adjustments.toFixed(1)}</Text>
+              <Text style={localStyles.footertext}>{summary.difference.toFixed(1)}</Text>
+            </View>)
+            }
           </DataTable>
         </View>
       ) : null}
@@ -232,5 +235,23 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician }) {
   );
 }
 
-const localStyles = StyleSheet.create({});
+const localStyles = StyleSheet.create({
+headerArea:{
+    flexDirection:"row",
+    justifyContent:"center",
+    alignItems:"center",
+    margin:1
+},
+footertext:{
+    flex:1, textAlign:'center', textAlignVertical:'center',margin:1
+},
+headertext:{
+    flex:1, textAlign:'center', textAlignVertical:'center',backgroundColor:'blue',margin:1
+},
+headertextAdjusts:{
+    flex:1, textAlign:'center', textAlignVertical:'center',backgroundColor:'green',margin:1
+},
+
+
+});
 export default connect(mapStateToProps, null)(LaborAllocationsTable);
diff --git a/util/labor-allocations-table.utility.js b/util/labor-allocations-table.utility.js
index 368e2cd..30deccd 100644
--- a/util/labor-allocations-table.utility.js
+++ b/util/labor-allocations-table.utility.js
@@ -9,7 +9,7 @@ export const CalculateAllocationsTotals = (
 ) => {
 //   console.log("🚀  ~ file:  adjustments", adjustments);
 //   console.log("🚀  ~ file:  bodyshop", bodyshop);
-   console.log("🚀  ~ file:  joblines", joblines);
+//    console.log("🚀  ~ file:  joblines", joblines);
 //   console.log("🚀  ~ file:  timetickets", timetickets);
   const responsibilitycenters = bodyshop.md_responsibility_centers;
   const jobCodes = joblines.map((item) => item.mod_lbr_ty);