diff --git a/src/components/LabeledData/types.ts b/src/components/LabeledData/types.ts
index a340273..07baae1 100644
--- a/src/components/LabeledData/types.ts
+++ b/src/components/LabeledData/types.ts
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 
 interface LabeledDataProps {
   label: string;
-  value?: string | number | ReactElement | null;
+  value?: string | number | ReactElement | null | Date;
   defaultValue?: string | number;
   style?: any;
   labelStyle?: any;
diff --git a/src/screens/Dashboard/index.tsx b/src/screens/Dashboard/index.tsx
index e619ffe..b27b524 100644
--- a/src/screens/Dashboard/index.tsx
+++ b/src/screens/Dashboard/index.tsx
@@ -1,15 +1,8 @@
 import React from 'react';
-import {
-  FlatList,
-  Image,
-  ListRenderItemInfo,
-  Text,
-  TouchableOpacity,
-  View
-} from 'react-native';
+import { FlatList, Image, ListRenderItemInfo, Text, TouchableOpacity, View } from 'react-native';
 import styles from './styles';
 import { connect } from 'react-redux';
-import { DispatchProps, Props, State } from './Types';
+import { DispatchProps, Props, State } from './types';
 import { RootState } from '../../redux/reducers';
 import { Card } from 'react-native-paper';
 import dashboardData from './dashboardData';
@@ -25,11 +18,7 @@ class Dashboard extends React.Component<Props, State> {
         }}
       >
         <Card style={styles.card}>
-          <Image
-            style={styles.cardImage}
-            resizeMode="contain"
-            source={item.icon}
-          />
+          <Image style={styles.cardImage} resizeMode="contain" source={item.icon} />
           <Text style={styles.cardLabel}>{item.screenName}</Text>
         </Card>
       </TouchableOpacity>
@@ -44,9 +33,7 @@ class Dashboard extends React.Component<Props, State> {
           horizontal={false}
           numColumns={3}
           ListEmptyComponent={<EmptyView />}
-          renderItem={(item: ListRenderItemInfo<any>) =>
-            this.renderItem(item.item, item.index)
-          }
+          renderItem={(item: ListRenderItemInfo<any>) => this.renderItem(item.item, item.index)}
         />
       </View>
     );
diff --git a/src/screens/Dashboard/styles.ts b/src/screens/Dashboard/styles.ts
index d74cf3d..673b257 100644
--- a/src/screens/Dashboard/styles.ts
+++ b/src/screens/Dashboard/styles.ts
@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({
   screenContainer: {
diff --git a/src/screens/Dashboard/Types.ts b/src/screens/Dashboard/types.ts
similarity index 100%
rename from src/screens/Dashboard/Types.ts
rename to src/screens/Dashboard/types.ts
diff --git a/src/screens/InboundOrderList/index.tsx b/src/screens/InboundOrderList/index.tsx
index 0ac256a..5c68797 100644
--- a/src/screens/InboundOrderList/index.tsx
+++ b/src/screens/InboundOrderList/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-hooks/exhaustive-deps */
-import { FlatList, Text, View } from 'react-native';
+import { FlatList, View } from 'react-native';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { fetchInboundOrderList } from '../../redux/actions/inboundorder';
@@ -13,6 +13,8 @@ import { Card } from 'react-native-paper';
 import EmptyView from '../../components/EmptyView';
 import { LayoutStyle } from '../../assets/styles';
 import _ from 'lodash';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import DetailsTable from '../../components/DetailsTable';
 
 const InboundOrderList = () => {
   const dispatch = useDispatch();
@@ -67,38 +69,26 @@ const InboundOrderList = () => {
     dispatch(fetchInboundOrderList(callback, id));
   };
 
-  const RenderOrderData = ({ title, subText }: any): JSX.Element => {
-    return (
-      <View style={styles.columnItem}>
-        <Text style={styles.label}>{title}</Text>
-        <Text style={styles.value}>{subText}</Text>
-      </View>
-    );
-  };
-
   const navigateToInboundDetails = (item: any) => {
     navigation.navigate('InboundDetails', { shipmentDetails: item });
   };
 
-  const RenderListItem = ({ item, index }: any): JSX.Element => {
+  const renderListItem = ({ item, index }: any) => {
+    const itemStyles = { labelStyle: styles.label, valueStyle: styles.value };
+
+    const renderListItemDats: LabeledDataType[] = [
+      { label: 'Identifier', value: item.shipmentNumber, ...itemStyles },
+      { label: 'Status', value: item.status, ...itemStyles },
+      { label: 'Origin', value: item.origin.name, ...itemStyles },
+      { label: 'Destination', value: item.destination.name, ...itemStyles },
+      { label: 'Description', value: item.name, ...itemStyles },
+      { label: 'Items Received', value: `${item.receivedCount} / ${item.shipmentItems.length}`, ...itemStyles }
+    ];
+
     return (
       <Card style={LayoutStyle.listItemContainer} key={index} onPress={() => navigateToInboundDetails(item)}>
         <Card.Content>
-          <View style={styles.rowItem}>
-            <RenderOrderData title={'Identifier'} subText={item.shipmentNumber} />
-            <RenderOrderData title={'Status'} subText={item.status} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderOrderData title={'Origin'} subText={item.origin.name} />
-            <RenderOrderData title={'Destination'} subText={item.destination.name} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderOrderData title={'Description'} subText={item.name} />
-            <RenderOrderData
-              title={'Items Received'}
-              subText={item.receivedCount + ' / ' + item.shipmentItems.length}
-            />
-          </View>
+          <DetailsTable data={renderListItemDats} />
         </Card.Content>
       </Card>
     );
@@ -146,15 +136,14 @@ const InboundOrderList = () => {
         searchBox={false}
         onSearchTermSubmit={filterInboundOrders}
       />
-      {state.inboundOrders.length > 0 ? (
-        <FlatList
-          data={state.filteredInboundOrders.length > 0 ? state.filteredInboundOrders : state.inboundOrders}
-          keyExtractor={(inboundOrder) => inboundOrder.id}
-          renderItem={RenderListItem}
-        />
-      ) : (
-        <EmptyView title="Receiving" description="There are no items to receive" isRefresh={false} />
-      )}
+      <FlatList
+        data={state.filteredInboundOrders.length > 0 ? state.filteredInboundOrders : state.inboundOrders}
+        ListEmptyComponent={
+          <EmptyView title="Receiving" description="There are no items to receive" isRefresh={false} />
+        }
+        keyExtractor={(inboundOrder) => inboundOrder.id}
+        renderItem={renderListItem}
+      />
     </View>
   );
 };
diff --git a/src/screens/InboundOrderList/styles.ts b/src/screens/InboundOrderList/styles.ts
index 4124792..9da60e8 100644
--- a/src/screens/InboundOrderList/styles.ts
+++ b/src/screens/InboundOrderList/styles.ts
@@ -2,26 +2,6 @@ import { StyleSheet } from 'react-native';
 import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({
-  itemView: {
-    marginStart: 10,
-    marginEnd: 10,
-    marginTop: 5
-  },
-  rowItem: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.background,
-    marginTop: 1,
-    //padding: 2,
-    //marginStart: 4,
-    width: '100%',
-    alignItems: 'center'
-  },
-  columnItem: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    width: '50%'
-  },
   label: {
     fontSize: 11,
     color: Theme.colors.placeholder
@@ -29,6 +9,5 @@ export default StyleSheet.create({
   value: {
     fontSize: 12,
     color: Theme.colors.text,
-    width: '90%'
   }
 });
diff --git a/src/screens/OrderDetails/styles.ts b/src/screens/OrderDetails/styles.ts
deleted file mode 100644
index 4f16b8f..0000000
--- a/src/screens/OrderDetails/styles.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
-
-export default StyleSheet.create({
-  screenContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1
-  },
-  contentContainer: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    padding: 8
-  },
-  listItemContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    borderRadius: Theme.roundness,
-    borderColor: Theme.colors.backdrop,
-    borderWidth: 1,
-    margin: 4,
-    padding: 4,
-    justifyContent: 'center'
-  },
-  name: {
-    fontSize: 17,
-    color: Theme.colors.text,
-    fontWeight: 'bold'
-  },
-  boxHeading: {
-    fontSize: 15,
-    color: Theme.colors.text,
-    fontWeight: 'bold',
-    marginTop: 8
-  },
-  box: {
-    borderColor: Theme.colors.background,
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 8,
-    padding: 8
-  },
-  descriptionLabel: {
-    fontSize: 20,
-    color: Theme.colors.text,
-    fontWeight: 'bold',
-    marginTop: 8
-  },
-  descriptionText: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    borderColor: Theme.colors.background,
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 8,
-    padding: 8
-  },
-  detailsLabel: {
-    fontSize: 20,
-    color: Theme.colors.text,
-    fontWeight: 'bold',
-    marginTop: 8
-  },
-  detailsContainer: {
-    padding: 8,
-    borderColor: Theme.colors.background,
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 8
-  },
-  detailsItemContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    flex: 0
-  },
-  detailsItemName: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    fontWeight: 'bold'
-  },
-  detailsItemValue: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    marginStart: 8
-  },
-  container: {
-    flexWrap: 'wrap',
-    alignItems: 'flex-start', // if you want to fill rows left to right
-    borderColor: Theme.colors.background,
-    borderWidth: 1,
-    borderRadius: 8
-  },
-  textAlign: {
-    textAlign: 'right'
-  },
-  tinyLogo: {
-    width: '100%',
-    height: '20%'
-  },
-  logo: {
-    width: 66,
-    height: 58
-  },
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  list: {
-    width: '100%'
-  },
-  listItemNameContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '50%'
-  },
-  listItemCategoryContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    marginTop: 4
-  },
-  listItemCategoryLabel: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  listItemCategory: {
-    fontSize: 16,
-    color: Theme.colors.text
-  },
-  row: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.background,
-    marginTop: 1,
-    padding: 2,
-    border: 0,
-    width: '100%'
-  },
-  col50: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '50%'
-  },
-  label: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  value: {
-    fontSize: 14,
-    color: Theme.colors.text
-  },
-  bottomList: {
-    marginTop: 10,
-    flex: 1
-  },
-  statusMessage: {
-    fontSize: 10,
-  }
-});
diff --git a/src/screens/Orders/OrdersList.tsx b/src/screens/Orders/OrdersList.tsx
index 4d45a30..cee00b7 100644
--- a/src/screens/Orders/OrdersList.tsx
+++ b/src/screens/Orders/OrdersList.tsx
@@ -1,134 +1,43 @@
-/* eslint-disable react-native/no-unused-styles */
-import {
-  ListRenderItemInfo,
-  StyleSheet,
-  Text,
-  View,
-  FlatList
-} from 'react-native';
+import { ListRenderItemInfo, FlatList } from 'react-native';
 import React, { ReactElement } from 'react';
-import Theme from '../../utils/Theme';
 import { Order } from '../../data/order/Order';
 import EmptyView from '../../components/EmptyView';
 import { Card } from 'react-native-paper';
 import { LayoutStyle } from '../../assets/styles';
-export interface Props {
-  orders: Order[] | null;
-  onOrderTapped: (order: Order) => void;
-}
+import { OrderListProps as Props } from './types';
+import styles from './styles';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import DetailsTable from '../../components/DetailsTable';
 
 export default function OrdersList(props: Props) {
-  return props.orders ? (
-    <FlatList
-      data={props.orders}
-      renderItem={(item: ListRenderItemInfo<Order>) =>
-        renderOrder(item.item, () => props.onOrderTapped(item.item))
-      }
-      ListEmptyComponent={
-        <EmptyView title="Picking" description="There are no items to pick" />
-      }
-      keyExtractor={(order) => order.id}
-      style={styles.list}
-    />
-  ) : null;
-}
+  function renderOrder(item: ListRenderItemInfo<Order>): ReactElement {
+    const order = item.item;
+    const renderOrderDats: LabeledDataType[] = [
+      { label: 'Identifier', value: order.identifier },
+      { label: 'Status Code', value: order.statusCode },
+      { label: 'Destination', value: order.destination?.name },
+      { label: 'Expected Shipping Date', value: order.expectedShippingDate },
+      { label: 'Packing Location', value: order?.packingLocation?.name, defaultValue: 'Unassigned' },
+      { label: 'Loading Location', value: order?.loadingLocation?.name, defaultValue: 'Unassigned' }
+    ];
+    return (
+      <Card style={LayoutStyle.listItemContainer} onPress={() => props.onOrderTapped(order)}>
+        <Card.Content>
+          <DetailsTable data={renderOrderDats} />
+        </Card.Content>
+      </Card>
+    );
+  }
 
-function renderOrder(order: Order, onOrderTapped: () => void): ReactElement {
   return (
-    <Card
-      style={LayoutStyle.listItemContainer}
-      onPress={() => onOrderTapped()}
-    >
-      <Card.Content>
-        <View style={styles.row}>
-          <View style={styles.col50}>
-            <Text style={styles.label}>Identifier</Text>
-            <Text style={styles.value}>{order.identifier}</Text>
-          </View>
-          <View style={styles.col50}>
-            <Text style={styles.label}>Status Code</Text>
-            <Text style={styles.value}>{order.statusCode}</Text>
-          </View>
-        </View>
-        <View style={styles.row}>
-          <View style={styles.col50}>
-            <Text style={styles.label}>Destination</Text>
-            <Text style={styles.value}>{order.destination?.name}</Text>
-          </View>
-          <View style={styles.col50}>
-            <Text style={styles.label}>Expected Shipping Date</Text>
-            <Text style={styles.value}>{order.expectedShippingDate}</Text>
-          </View>
-        </View>
-        <View style={styles.row}>
-          <View style={styles.col50}>
-            <Text style={styles.label}>Packing Location</Text>
-            <Text style={styles.value}>{order?.packingLocation?.name ?? 'Unassigned'}</Text>
-          </View>
-          <View style={styles.col50}>
-            <Text style={styles.label}>Loading Location</Text>
-            <Text style={styles.value}>{order?.loadingLocation?.name ?? 'Unassigned'}</Text>
-          </View>
-        </View>
-        <View style={styles.row} />
-      </Card.Content>
-    </Card>
+    props.orders && (
+      <FlatList
+        data={props.orders}
+        renderItem={renderOrder}
+        ListEmptyComponent={<EmptyView title="Picking" description="There are no items to pick" />}
+        keyExtractor={(order) => order.id}
+        style={styles.list}
+      />
+    )
   );
 }
-
-const styles = StyleSheet.create({
-  list: {
-    width: '100%'
-  },
-  listItemNameContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4
-  },
-  listItemNameLabel: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  listItemName: {
-    fontSize: 16,
-    color: Theme.colors.text
-  },
-  listItemCategoryContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    marginTop: 4
-  },
-  listItemCategoryLabel: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  listItemCategory: {
-    fontSize: 16,
-    color: Theme.colors.text
-  },
-  row: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.background,
-    marginTop: 1,
-    //padding: 2,
-    width: '100%'
-  },
-  col50: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '50%'
-  },
-  label: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  value: {
-    fontSize: 14,
-    color: Theme.colors.text
-  }
-});
diff --git a/src/screens/Orders/index.tsx b/src/screens/Orders/index.tsx
index d34c806..53a48d6 100644
--- a/src/screens/Orders/index.tsx
+++ b/src/screens/Orders/index.tsx
@@ -88,14 +88,9 @@ class Index extends React.Component<Props, State> {
           searchBox={false}
           onSearchTermSubmit={this.searchOrders}
         />
-        <Text style={styles.label}>
-          Returned {this.state.resultCount} results
-        </Text>
+        <Text style={styles.label}>{`Returned ${this.state.resultCount} results`}</Text>
         <View style={styles.content}>
-          <OrdersList
-            orders={this.state.allOrders}
-            onOrderTapped={this.goToOrderDetailsScreen}
-          />
+          <OrdersList orders={this.state.allOrders} onOrderTapped={this.goToOrderDetailsScreen} />
         </View>
       </View>
     );
diff --git a/src/screens/Orders/styles.ts b/src/screens/Orders/styles.ts
index 78638ed..b319a66 100644
--- a/src/screens/Orders/styles.ts
+++ b/src/screens/Orders/styles.ts
@@ -20,5 +20,8 @@ export default StyleSheet.create({
     color: Theme.colors.placeholder,
     marginHorizontal: 5,
     marginVertical: 2
+  },
+  list: {
+    width: '100%'
   }
 });
diff --git a/src/screens/Orders/types.ts b/src/screens/Orders/types.ts
index 1b688dd..817f8b0 100644
--- a/src/screens/Orders/types.ts
+++ b/src/screens/Orders/types.ts
@@ -22,3 +22,8 @@ export interface State {
   allOrders: Order[] | null;
   resultCount: Number;
 }
+
+export interface OrderListProps {
+  orders: Order[] | null;
+  onOrderTapped: (order: Order) => void;
+}
diff --git a/src/screens/OutboundLoadingList/OutboundLoadingList.tsx b/src/screens/OutboundLoadingList/OutboundLoadingList.tsx
index ec251d4..37f5ba9 100644
--- a/src/screens/OutboundLoadingList/OutboundLoadingList.tsx
+++ b/src/screens/OutboundLoadingList/OutboundLoadingList.tsx
@@ -1,6 +1,6 @@
 import { DispatchProps, Props, State } from '../OutboundStockList/types';
 import React from 'react';
-import { View, FlatList, ListRenderItemInfo, Text } from 'react-native';
+import { View, FlatList, ListRenderItemInfo } from 'react-native';
 import { connect } from 'react-redux';
 import { showScreenLoading, hideScreenLoading } from '../../redux/actions/main';
 import { RootState } from '../../redux/reducers';
@@ -14,6 +14,8 @@ import { LayoutStyle } from '../../assets/styles';
 import BarcodeSearchHeader from '../../components/BarcodeSearchHeader';
 import _ from 'lodash';
 import { Container } from '../../data/container/Container';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import DetailsTable from '../../components/DetailsTable';
 
 // List of shipments ready for loading
 class OutboundLoadingList extends React.Component<Props, State> {
@@ -24,6 +26,7 @@ class OutboundLoadingList extends React.Component<Props, State> {
       shipments: [],
       filteredShipments: []
     };
+    this.renderDataItem = this.renderDataItem.bind(this);
   }
 
   componentDidMount() {
@@ -81,14 +84,15 @@ class OutboundLoadingList extends React.Component<Props, State> {
   filterShipments = (searchTerm: string) => {
     if (searchTerm) {
       // Find exact match by LPN
-      const exactShipmentByLPN = _.find(this.state.shipments, (shipment: Shipment) => _.find(
-        shipment?.availableContainers,
-        (container: Container) => container.containerNumber === searchTerm
-      ));
+      const exactShipmentByLPN = _.find(this.state.shipments, (shipment: Shipment) =>
+        _.find(shipment?.availableContainers, (container: Container) => container.containerNumber === searchTerm)
+      );
 
       if (exactShipmentByLPN) {
-        const exactContainer = _.find(exactShipmentByLPN?.availableContainers, (container: Container) =>
-          container.containerNumber === searchTerm);
+        const exactContainer = _.find(
+          exactShipmentByLPN?.availableContainers,
+          (container: Container) => container.containerNumber === searchTerm
+        );
 
         this.resetFiltering();
         this.showLoadingLPNScreen(exactShipmentByLPN, exactContainer);
@@ -100,7 +104,9 @@ class OutboundLoadingList extends React.Component<Props, State> {
         const matchingShipmentNumber = shipment?.shipmentNumber?.toLowerCase()?.includes(searchTerm.toLowerCase());
 
         const matchingLoadingLocation =
-          shipment?.loadingStatusDetails?.loadingLocation?.locationNumber?.toLowerCase()?.includes(searchTerm.toLowerCase()) ||
+          shipment?.loadingStatusDetails?.loadingLocation?.locationNumber
+            ?.toLowerCase()
+            ?.includes(searchTerm.toLowerCase()) ||
           shipment?.loadingStatusDetails?.loadingLocation?.name?.toLowerCase()?.includes(searchTerm.toLowerCase());
 
         return matchingShipmentNumber || matchingLoadingLocation;
@@ -131,6 +137,28 @@ class OutboundLoadingList extends React.Component<Props, State> {
     });
   };
 
+  renderDataItem(shipment: ListRenderItemInfo<Shipment>) {
+    const renderData: LabeledDataType[] = [
+      { label: 'Shipment Number', value: shipment.item.shipmentNumber },
+      {
+        label: 'Status',
+        value: `${shipment.item.displayStatus} (${shipment.item.loadingStatusDetails.statusMessage} containers)`
+      },
+      { label: 'Destination', value: shipment.item.destination.name },
+      { label: 'Expected Shipping Date', value: shipment.item.expectedShippingDate },
+      { label: 'Loading Location', value: shipment.item.loadingLocation },
+      { label: 'Expected Delivery Date', value: shipment.item.expectedDeliveryDate }
+    ];
+
+    return (
+      <Card style={LayoutStyle.listItemContainer} onPress={() => this.showLoadingDetailsScreen(shipment.item)}>
+        <Card.Content>
+          <DetailsTable data={renderData} />
+        </Card.Content>
+      </Card>
+    );
+  }
+
   render() {
     return (
       <View style={styles.screenContainer}>
@@ -147,47 +175,7 @@ class OutboundLoadingList extends React.Component<Props, State> {
             ListEmptyComponent={
               <EmptyView title="Loading" description=" There are no items to load" isRefresh={false} />
             }
-            renderItem={(shipment: ListRenderItemInfo<Shipment>) => (
-              <Card
-                style={LayoutStyle.listItemContainer}
-                onPress={() => this.showLoadingDetailsScreen(shipment.item)}
-              >
-                <Card.Content>
-                  <View style={styles.row}>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Shipment Number</Text>
-                      <Text style={styles.value}>{shipment.item.shipmentNumber}</Text>
-                    </View>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Status</Text>
-                      <Text style={styles.value}>
-                        {shipment.item.displayStatus} ({shipment.item.loadingStatusDetails.statusMessage} containers)
-                      </Text>
-                    </View>
-                  </View>
-                  <View style={styles.row}>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Destination</Text>
-                      <Text style={styles.value}>{shipment.item.destination.name}</Text>
-                    </View>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Expected Shipping Date</Text>
-                      <Text style={styles.value}>{shipment.item.expectedShippingDate}</Text>
-                    </View>
-                  </View>
-                  <View style={styles.row}>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Loading Location</Text>
-                      <Text style={styles.value}>{shipment.item.loadingLocation}</Text>
-                    </View>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Expected Delivery Date</Text>
-                      <Text style={styles.value}>{shipment.item.expectedDeliveryDate}</Text>
-                    </View>
-                  </View>
-                </Card.Content>
-              </Card>
-            )}
+            renderItem={this.renderDataItem}
             keyExtractor={(item) => item.id}
             style={styles.list}
           />
diff --git a/src/screens/OutboundStockList/index.tsx b/src/screens/OutboundStockList/index.tsx
index 26d00e1..3a1fa7f 100644
--- a/src/screens/OutboundStockList/index.tsx
+++ b/src/screens/OutboundStockList/index.tsx
@@ -1,6 +1,6 @@
 import { DispatchProps, Props, State } from './types';
 import React from 'react';
-import { View, FlatList, ListRenderItemInfo, Text } from 'react-native';
+import { View, FlatList, ListRenderItemInfo } from 'react-native';
 import { connect } from 'react-redux';
 import { showScreenLoading, hideScreenLoading } from '../../redux/actions/main';
 import { RootState } from '../../redux/reducers';
@@ -15,6 +15,8 @@ import BarcodeSearchHeader from '../../components/BarcodeSearchHeader';
 import _ from 'lodash';
 import ShipmentItems from '../../data/inbound/ShipmentItems';
 import { Container } from '../../data/container/Container';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import DetailsTable from '../../components/DetailsTable';
 
 // List of shipments ready for packing
 class OutboundStockList extends React.Component<Props, State> {
@@ -25,6 +27,7 @@ class OutboundStockList extends React.Component<Props, State> {
       shipments: [],
       filteredShipments: []
     };
+    this.renderPackingList = this.renderPackingList.bind(this);
   }
 
   componentDidMount() {
@@ -96,8 +99,9 @@ class OutboundStockList extends React.Component<Props, State> {
           );
 
           const matchingLotNumberOrProduct = _.find(shipment?.shipmentItems, (item: ShipmentItems) => {
-            const matchingLotNumber = item.lotNumber?.toLowerCase()?.includes(searchTerm.toLowerCase()) ||
-                item.inventoryItem?.lotNumber?.toLowerCase()?.includes(searchTerm.toLowerCase());
+            const matchingLotNumber =
+              item.lotNumber?.toLowerCase()?.includes(searchTerm.toLowerCase()) ||
+              item.inventoryItem?.lotNumber?.toLowerCase()?.includes(searchTerm.toLowerCase());
             const matchingCode = item.inventoryItem?.product?.productCode
               ?.toLowerCase()
               ?.includes(searchTerm.toLowerCase());
@@ -106,16 +110,23 @@ class OutboundStockList extends React.Component<Props, State> {
           });
 
           const matchingPackingLocation =
-            shipment?.packingStatusDetails?.packingLocation?.locationNumber?.toLowerCase()?.includes(searchTerm.toLowerCase()) ||
+            shipment?.packingStatusDetails?.packingLocation?.locationNumber
+              ?.toLowerCase()
+              ?.includes(searchTerm.toLowerCase()) ||
             shipment?.packingStatusDetails?.packingLocation?.name?.toLowerCase()?.includes(searchTerm.toLowerCase());
 
           // Return as bool
-          return !!(matchingShipmentNumber || matchingContainer || matchingLotNumberOrProduct || matchingPackingLocation);
+          return !!(
+            matchingShipmentNumber ||
+            matchingContainer ||
+            matchingLotNumberOrProduct ||
+            matchingPackingLocation
+          );
         });
 
         if (filteredShipments?.length === 0) {
           showPopup({
-            message: `No shipment associated with the given identifier: ${searchTerm}`,
+            message: `No shipment associated with the given identifier: ${searchTerm}`
           });
           this.resetFiltering();
           return;
@@ -140,6 +151,25 @@ class OutboundStockList extends React.Component<Props, State> {
     });
   };
 
+  renderPackingList(shipment: ListRenderItemInfo<Shipment>) {
+    const renderData: LabeledDataType[] = [
+      { label: 'Shipment Number', value: shipment.item.shipmentNumber },
+      { label: 'Status', value: shipment.item.displayStatus },
+      { label: 'Destination', value: shipment.item.destination.name },
+      { label: 'Expected Shipping Date', value: shipment.item.expectedShippingDate },
+      { label: 'Packing Location', value: shipment.item.packingLocation, defaultValue: 'Unassigned' },
+      { label: 'Items Packed', value: shipment.item.packingStatusDetails?.statusMessage, defaultValue: 'Not Available' }
+    ];
+
+    return (
+      <Card style={LayoutStyle.listItemContainer} onPress={() => this.showShipmentReadyToPackScreen(shipment.item)}>
+        <Card.Content>
+          <DetailsTable data={renderData} />
+        </Card.Content>
+      </Card>
+    );
+  }
+
   render() {
     return (
       <View style={styles.screenContainer}>
@@ -156,45 +186,7 @@ class OutboundStockList extends React.Component<Props, State> {
             ListEmptyComponent={
               <EmptyView title="Packing" description=" There are no items to pack" isRefresh={false} />
             }
-            renderItem={(shipment: ListRenderItemInfo<Shipment>) => (
-              <Card
-                style={LayoutStyle.listItemContainer}
-                onPress={() => this.showShipmentReadyToPackScreen(shipment.item)}
-              >
-                <Card.Content>
-                  <View style={styles.row}>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Shipment Number</Text>
-                      <Text style={styles.value}>{shipment.item.shipmentNumber}</Text>
-                    </View>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Status</Text>
-                      <Text style={styles.value}>{shipment.item.displayStatus}</Text>
-                    </View>
-                  </View>
-                  <View style={styles.row}>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Destination</Text>
-                      <Text style={styles.value}>{shipment.item.destination.name}</Text>
-                    </View>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Expected Shipping Date</Text>
-                      <Text style={styles.value}>{shipment.item.expectedShippingDate}</Text>
-                    </View>
-                  </View>
-                  <View style={styles.row}>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Packing Location</Text>
-                      <Text style={styles.value}>{shipment.item.packingLocation ?? 'Unassigned'}</Text>
-                    </View>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Items Packed</Text>
-                      <Text style={styles.value}>{shipment.item.packingStatusDetails?.statusMessage ?? 'Not Available'}</Text>
-                    </View>
-                  </View>
-                </Card.Content>
-              </Card>
-            )}
+            renderItem={this.renderPackingList}
             keyExtractor={(item) => item.id}
             style={styles.list}
           />
diff --git a/src/screens/OutboundStockList/styles.ts b/src/screens/OutboundStockList/styles.ts
index adabe9a..123c264 100644
--- a/src/screens/OutboundStockList/styles.ts
+++ b/src/screens/OutboundStockList/styles.ts
@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({
   screenContainer: {
@@ -13,149 +12,7 @@ export default StyleSheet.create({
     flexDirection: 'column',
     padding: 8
   },
-  listItemContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    borderRadius: Theme.roundness,
-    borderColor: Theme.colors.backdrop,
-    borderWidth: 1,
-    margin: 4,
-    padding: 4,
-    justifyContent: 'center'
-  },
-  name: {
-    fontSize: 12,
-    color: Theme.colors.text,
-    fontWeight: 'bold'
-  },
-  boxHeading: {
-    fontSize: 12,
-    color: Theme.colors.text,
-    fontWeight: 'bold',
-    marginTop: 8
-  },
-  box: {
-    borderColor: Theme.colors.onBackground,
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 8,
-    padding: 8
-  },
-  descriptionLabel: {
-    fontSize: 20,
-    color: Theme.colors.text,
-    fontWeight: 'bold',
-    marginTop: 8
-  },
-  descriptionText: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    borderColor: Theme.colors.onBackground,
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 8,
-    padding: 8
-  },
-  detailsLabel: {
-    fontSize: 20,
-    color: Theme.colors.text,
-    fontWeight: 'bold',
-    marginTop: 8
-  },
-  detailsContainer: {
-    padding: 8,
-    borderColor: Theme.colors.onBackground,
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 8
-  },
-  detailsItemContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    flex: 0
-  },
-  detailsItemName: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    fontWeight: 'bold'
-  },
-  detailsItemValue: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    marginStart: 8
-  },
-  container: {
-    flexWrap: 'wrap',
-    alignItems: 'flex-start', // if you want to fill rows left to right
-    borderColor: Theme.colors.onBackground,
-    borderWidth: 1,
-    borderRadius: 8
-  },
-  textAlign: {
-    textAlign: 'right'
-  },
-  tinyLogo: {
-    width: '100%',
-    height: '20%'
-  },
-  logo: {
-    width: 66,
-    height: 58
-  },
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
   list: {
     width: '100%'
-  },
-  listItemNameContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '50%'
-  },
-  listItemCategoryContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    marginTop: 4
-  },
-  listItemCategoryLabel: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  listItemCategory: {
-    fontSize: 16,
-    color: Theme.colors.text
-  },
-  row: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.onBackground,
-    // borderBottomWidth: 1,
-    marginTop: 1,
-    padding: 0,
-    width: '100%'
-  },
-  col50: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 0,
-    width: '50%'
-  },
-  label: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  value: {
-    fontSize: 12,
-    color: Theme.colors.text
   }
 });
diff --git a/src/screens/ProductSummary/styles.tsx b/src/screens/ProductSummary/styles.tsx
index 366b104..8d13437 100644
--- a/src/screens/ProductSummary/styles.tsx
+++ b/src/screens/ProductSummary/styles.tsx
@@ -1,45 +1,8 @@
 import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({
   mainContainer: {
     flex: 1,
     zIndex: -1
-  },
-  itemView: {
-    marginStart: 10,
-    marginEnd: 10,
-    marginTop: 5
-  },
-  rowItem: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.background,
-    marginTop: 1,
-    padding: 2,
-    marginStart: 4,
-    width: '100%',
-    alignItems: 'center'
-  },
-  columnItem: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    width: '50%'
-  },
-  label: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  value: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    width: '90%'
-  },
-  headerTitle: {
-    fontWeight: 'bold',
-    backgroundColor: 'white',
-    margin: 10,
-    padding: 5,
-    fontSize: 16
   }
 });
diff --git a/src/screens/Products/ProductsList.tsx b/src/screens/Products/ProductsList.tsx
index 3f66759..2e9f27a 100644
--- a/src/screens/Products/ProductsList.tsx
+++ b/src/screens/Products/ProductsList.tsx
@@ -1,7 +1,6 @@
 import Product from '../../data/product/Product';
-import { FlatList, ListRenderItemInfo, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { FlatList, ListRenderItemInfo, TouchableOpacity } from 'react-native';
 import React, { ReactElement } from 'react';
-import Theme from '../../utils/Theme';
 import EmptyView from '../../components/EmptyView';
 import { Card } from 'react-native-paper';
 import { LayoutStyle } from '../../assets/styles';
@@ -9,87 +8,38 @@ export interface Props {
   products: Product[] | null;
   onProductTapped: (product: Product) => void;
 }
+import styles from './styles';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import DetailsTable from '../../components/DetailsTable';
 
 export default function ProductsList(props: Props) {
-  return props.products ? (
+  function renderProduct(item: ListRenderItemInfo<Product>): ReactElement {
+    const product = item.item;
+
+    const renderProductData: LabeledDataType[] = [
+      { label: 'Product Code', value: product.productCode },
+      { label: 'Name', value: product.name },
+      { label: 'Category', value: product.category.name }
+    ];
+
+    return (
+      <TouchableOpacity onPress={() => props.onProductTapped(product)}>
+        <Card style={LayoutStyle.listItemContainer}>
+          <Card.Content>
+            <DetailsTable columns={1} data={renderProductData} />
+          </Card.Content>
+        </Card>
+      </TouchableOpacity>
+    );
+  }
+
+  return (
     <FlatList
       data={props.products}
-      renderItem={(item: ListRenderItemInfo<Product>) =>
-        renderProduct(item.item, () => props.onProductTapped(item.item))
-      }
+      renderItem={renderProduct}
+      ListEmptyComponent={<EmptyView title="Product List" description="There are no products on the list" />}
       keyExtractor={(product) => product.id}
       style={styles.list}
     />
-  ) : (
-    <EmptyView title="Product List" description="There are no products on the list" />
   );
 }
-
-function renderProduct(product: Product, onProductTapped: () => void): ReactElement {
-  return (
-    <TouchableOpacity onPress={() => onProductTapped()}>
-      <Card style={LayoutStyle.listItemContainer}>
-        <Card.Content>
-          <View style={styles.listItemNameContainer}>
-            <Text style={styles.listItemNameLabel}>Product Code</Text>
-            <Text style={styles.listItemName}>{product.productCode}</Text>
-          </View>
-          <View style={styles.listItemNameContainer}>
-            <Text style={styles.listItemNameLabel}>Name</Text>
-            <Text style={styles.listItemName}>{product.name}</Text>
-          </View>
-          <View style={styles.listItemCategoryContainer}>
-            <Text style={styles.listItemCategoryLabel}>Category</Text>
-            <Text style={styles.listItemCategory}>{product.category.name}</Text>
-          </View>
-        </Card.Content>
-      </Card>
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  list: {
-    width: '100%'
-  },
-  listItemContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    borderRadius: Theme.roundness,
-    borderColor: Theme.colors.backdrop,
-    borderWidth: 1,
-    margin: 4,
-    padding: 4,
-    justifyContent: 'center'
-  },
-  listItemNameContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4
-  },
-  listItemNameLabel: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  listItemName: {
-    fontSize: 16,
-    color: Theme.colors.text
-  },
-  listItemCategoryContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    marginTop: 4
-  },
-  listItemCategoryLabel: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  listItemCategory: {
-    fontSize: 16,
-    color: Theme.colors.text
-  }
-});
diff --git a/src/screens/Products/styles.ts b/src/screens/Products/styles.ts
index c66d641..4660cc5 100644
--- a/src/screens/Products/styles.ts
+++ b/src/screens/Products/styles.ts
@@ -13,5 +13,8 @@ export default StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center'
+  },
+  list: {
+    width: '100%'
   }
 });
diff --git a/src/screens/PutawayList/index.tsx b/src/screens/PutawayList/index.tsx
index 1e575b9..80dc56c 100644
--- a/src/screens/PutawayList/index.tsx
+++ b/src/screens/PutawayList/index.tsx
@@ -3,7 +3,7 @@ import _ from 'lodash';
 import { DispatchProps, Props, State } from './types';
 import React from 'react';
 import { getOrdersAction } from '../../redux/actions/orders';
-import { FlatList, ListRenderItemInfo, Text, View } from 'react-native';
+import { FlatList, ListRenderItemInfo, View } from 'react-native';
 import { connect } from 'react-redux';
 import { hideScreenLoading, showScreenLoading } from '../../redux/actions/main';
 import styles from './styles';
@@ -14,6 +14,8 @@ import EmptyView from '../../components/EmptyView';
 import { Card } from 'react-native-paper';
 import InputBox from '../../components/InputBox';
 import { LayoutStyle } from '../../assets/styles';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import DetailsTable from '../../components/DetailsTable';
 
 class PutawayList extends React.Component<Props, State> {
   constructor(props: Props) {
@@ -28,6 +30,7 @@ class PutawayList extends React.Component<Props, State> {
       showDetail: false,
       lpnFilter: ''
     };
+    this.renderItems = this.renderItems.bind(this);
   }
 
   componentDidMount() {
@@ -99,14 +102,35 @@ class PutawayList extends React.Component<Props, State> {
     });
   };
 
+  renderItems(listRenderItemInfo: ListRenderItemInfo<any>) {
+    const { putawayItem } = listRenderItemInfo.item;
+    const renderItemData: LabeledDataType[] = [
+      { label: 'Product Code', value: putawayItem?.['product.productCode'] },
+      { label: 'Lot Number', value: putawayItem?.['inventoryItem.lotNumber'], defaultValue: 'Default' },
+      { label: 'Current Location', value: putawayItem?.['currentLocation.name'], defaultValue: 'Default' },
+      { label: 'Putaway Location', value: putawayItem?.['putawayLocation.name'], defaultValue: 'Default' }
+    ];
+
+    return (
+      <Card
+        style={LayoutStyle.listItemContainer}
+        onPress={() => this.goToPutawayItemDetailScreen(listRenderItemInfo.item, listRenderItemInfo.item?.putawayItem)}
+      >
+        <Card.Content>
+          <DetailsTable data={renderItemData} />
+        </Card.Content>
+      </Card>
+    );
+  }
+
   render() {
     const { showList, putAwayList, putAwayListFiltered, lpnFilter } = this.state;
 
     return (
       <View style={styles.screenContainer}>
-        {showList ? (
+        {showList && (
           <View style={styles.contentContainer}>
-            {putAwayList?.length ? (
+            {putAwayList?.length && (
               <InputBox
                 style={styles.lpnFilter}
                 value={lpnFilter}
@@ -115,56 +139,18 @@ class PutawayList extends React.Component<Props, State> {
                 label={'Scan Lot Number'}
                 onChange={this.onChangeLpnFilter}
               />
-            ) : null}
+            )}
             <FlatList
               data={putAwayListFiltered?.length ? putAwayListFiltered : putAwayList}
               ListEmptyComponent={
                 <EmptyView title="Putaway" description="There are no items to putaway" isRefresh={false} />
               }
-              renderItem={(listRenderItemInfo: ListRenderItemInfo<any>) => (
-                <Card
-                  style={LayoutStyle.listItemContainer}
-                  onPress={() =>
-                    this.goToPutawayItemDetailScreen(listRenderItemInfo.item, listRenderItemInfo.item?.putawayItem)
-                  }
-                >
-                  <Card.Content>
-                    <View style={styles.row}>
-                      <View style={styles.col50}>
-                        <Text style={styles.label}>Product Code</Text>
-                        <Text style={styles.value}>
-                          {listRenderItemInfo.item?.putawayItem?.['product.productCode']}
-                        </Text>
-                      </View>
-                      <View style={styles.col50}>
-                        <Text style={styles.label}>Lot Number</Text>
-                        <Text style={styles.value}>
-                          {listRenderItemInfo.item?.putawayItem?.['inventoryItem.lotNumber'] || 'Default'}
-                        </Text>
-                      </View>
-                    </View>
-                    <View style={styles.row}>
-                      <View style={styles.col50}>
-                        <Text style={styles.label}>Current Location</Text>
-                        <Text style={styles.value}>
-                          {listRenderItemInfo.item?.putawayItem?.['currentLocation.name']??'Default'}
-                        </Text>
-                      </View>
-                      <View style={styles.col50}>
-                        <Text style={styles.label}>Putaway Location</Text>
-                        <Text style={styles.value}>
-                          {listRenderItemInfo.item?.putawayItem?.['putawayLocation.name']??'Default'}
-                        </Text>
-                      </View>
-                    </View>
-                  </Card.Content>
-                </Card>
-              )}
+              renderItem={this.renderItems}
               keyExtractor={(item) => item.id}
               style={styles.list}
             />
           </View>
-        ) : null}
+        )}
       </View>
     );
   }
diff --git a/src/screens/PutawayList/styles.ts b/src/screens/PutawayList/styles.ts
index d741bd4..ef94572 100644
--- a/src/screens/PutawayList/styles.ts
+++ b/src/screens/PutawayList/styles.ts
@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({
   screenContainer: {
@@ -14,148 +13,11 @@ export default StyleSheet.create({
     flexDirection: 'column',
     padding: 8
   },
-  listItemContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    margin: 4,
-    justifyContent: 'center'
-  },
   lpnFilter: {
     marginHorizontal: 4,
     backgroundColor: 'white'
   },
-  name: {
-    fontSize: 17,
-    color: Theme.colors.text,
-    fontWeight: 'bold'
-  },
-  boxHeading: {
-    fontSize: 15,
-    color: Theme.colors.text,
-    fontWeight: 'bold',
-    marginTop: 8
-  },
-  box: {
-    borderColor: Theme.colors.onBackground,
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 8,
-    padding: 8
-  },
-  descriptionLabel: {
-    fontSize: 20,
-    color: Theme.colors.text,
-    fontWeight: 'bold',
-    marginTop: 8
-  },
-  descriptionText: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    borderColor: Theme.colors.onBackground,
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 8,
-    padding: 8
-  },
-  detailsLabel: {
-    fontSize: 20,
-    color: Theme.colors.text,
-    fontWeight: 'bold',
-    marginTop: 8
-  },
-  detailsContainer: {
-    padding: 8,
-    borderColor: Theme.colors.onBackground,
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 8
-  },
-  detailsItemContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    flex: 0
-  },
-  detailsItemName: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    fontWeight: 'bold'
-  },
-  detailsItemValue: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    marginStart: 8
-  },
-  container: {
-    flexWrap: 'wrap',
-    alignItems: 'flex-start', // if you want to fill rows left to right
-    borderColor: Theme.colors.onBackground,
-    borderWidth: 1,
-    borderRadius: 8
-  },
-  textAlign: {
-    textAlign: 'right'
-  },
-  tinyLogo: {
-    width: '100%',
-    height: '20%'
-  },
-  logo: {
-    width: 66,
-    height: 58
-  },
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
   list: {
     width: '100%'
-  },
-  listItemNameContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '50%'
-  },
-  listItemCategoryContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    marginTop: 4
-  },
-  listItemCategoryLabel: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  listItemCategory: {
-    fontSize: 16,
-    color: Theme.colors.text
-  },
-  row: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.onBackground,
-    marginTop: 1
-    //padding: 2,
-    //width: '100%',
-  },
-  col50: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '50%'
-  },
-  label: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  value: {
-    fontSize: 16,
-    color: Theme.colors.text
   }
 });