diff --git a/App.tsx b/App.tsx
index 78be869e..5115bbfd 100644
--- a/App.tsx
+++ b/App.tsx
@@ -6,7 +6,7 @@ import rootRducer from './src/redux/reducers';
 import watchers from './src/redux/sagas';
 import Main from './src/Main';
 import { StatusBar } from 'react-native';
-import { colors } from './src/constants';
+import { colors } from './src/assets/styles';
 import * as Sentry from '@sentry/react-native';
 import { DSN_KEY } from '@env';
 
@@ -22,7 +22,7 @@ export class App extends Component {
     return (
       <Provider store={store}>
         <StatusBar
-          backgroundColor={colors.headerColor}
+          backgroundColor={colors.accent}
           hidden={false}
           barStyle="light-content"
         />
diff --git a/src/Main.tsx b/src/Main.tsx
index 91f83fee..6bcbb092 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -23,7 +23,8 @@ import Location from './data/location/Location';
 import { Session } from './data/auth/Session';
 import { getSessionAction } from './redux/actions/main';
 import showPopup from './components/Popup';
-import { colors, appHeaderHeight } from './constants';
+import { appHeaderHeight } from './constants';
+import { colors } from './assets/styles';
 import Scan from './screens/Scan';
 import PutawayList from './screens/PutawayList';
 import Settings from './screens/Settings';
@@ -31,7 +32,7 @@ import PutawayItemDetail from './screens/PutawayItemDetail';
 import InboundOrderList from './screens/InboundOrderList';
 import InboundDetails from './screens/InboundDetails';
 import CreateLpn from './screens/Lpn/Create';
-import LpnDetail from './screens/LpnDetail/Index';
+import LpnDetail from './screens/LpnDetail';
 import PutawayCandidates from './screens/PutawayCandidates';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import InternalLocationDetails from './screens/InternalLocationDetails';
@@ -100,8 +101,7 @@ class Main extends Component<Props, State> {
 
   shouldComponentUpdate(nextProps: Props) {
     return (
-      this.props.fullScreenLoadingIndicator.visible !==
-        nextProps.fullScreenLoadingIndicator.visible ||
+      this.props.fullScreenLoadingIndicator.visible !== nextProps.fullScreenLoadingIndicator.visible ||
       this.props.loggedIn !== nextProps.loggedIn ||
       this.props.currentLocation !== nextProps.currentLocation ||
       this.props.session !== nextProps.session
@@ -109,11 +109,7 @@ class Main extends Component<Props, State> {
   }
 
   componentDidUpdate() {
-    if (
-      this.props.loggedIn &&
-      this.props.currentLocation !== null &&
-      this.props.session === null
-    ) {
+    if (this.props.loggedIn && this.props.currentLocation !== null && this.props.session === null) {
       const actionCallback = (data: any) => {
         if (data?.error) {
           showPopup({
@@ -150,15 +146,13 @@ class Main extends Component<Props, State> {
             <Stack.Navigator
               initialRouteName={initialRouteName}
               screenOptions={({ route, navigation }) => ({
-                headerRight: () => (
-                  <OptionMenu route={route} navigation={navigation} />
-                ),
+                headerRight: () => <OptionMenu route={route} navigation={navigation} />,
                 headerTitleContainerStyle: {
                   width: '50%'
                 },
-                headerTintColor: '#ffffff',
+                headerTintColor: colors.white,
                 headerStyle: {
-                  backgroundColor: colors.headerColor,
+                  backgroundColor: colors.accent,
                   height: appHeaderHeight
                 }
               })}
@@ -176,52 +170,29 @@ class Main extends Component<Props, State> {
               <Stack.Screen name="ProductDetails" component={ProductDetails} />
               <Stack.Screen name="PickOrderItem" component={PickOrderItem} />
               <Stack.Screen name="Transfers" component={Transfers} />
-              <Stack.Screen
-                component={TransferDetails}
-                name="TransferDetails"
-              />
+              <Stack.Screen name="TransferDetails" component={TransferDetails} />
               <Stack.Screen name="Dashboard" component={Dashboard} />
               <Stack.Screen name="Scan" component={Scan} />
               <Stack.Screen name="Products" component={Products} />
               <Stack.Screen name="PutawayList" component={PutawayList} />
-              <Stack.Screen
-                name="PutawayCandidates"
-                component={PutawayCandidates}
-              />
+              <Stack.Screen name="PutawayCandidates" component={PutawayCandidates} />
               <Stack.Screen name="PutawayItem" component={PutawayItem} />
-              <Stack.Screen
-                name="PutawayItemDetail"
-                component={PutawayItemDetail}
-              />
+              <Stack.Screen name="PutawayItemDetail" component={PutawayItemDetail} />
               <Stack.Screen name="PutawayDetails" component={PutawayDetails} />
-              <Stack.Screen
-                name="InboundOrderList"
-                component={InboundOrderList}
-              />
+              <Stack.Screen name="InboundOrderList" component={InboundOrderList} />
               <Stack.Screen name="InboundDetails" component={InboundDetails} />
               <Stack.Screen name="Product Summary" component={ProductSummary} />
               <Stack.Screen name="CreateLpn" component={CreateLpn} />
               <Stack.Screen name="LpnDetail" component={LpnDetail} />
-              <Stack.Screen
-                name="InboundReceiveDetail"
-                component={InboundReceiveDetail}
-              />
+              <Stack.Screen name="InboundReceiveDetail" component={InboundReceiveDetail} />
               <Stack.Screen name="Settings" component={Settings} />
-              <Stack.Screen
-                name="OutboundStockList"
-                component={OutboundStockList}
-                options={{ title: 'Packing' }}
-              />
+              <Stack.Screen name="OutboundStockList" component={OutboundStockList} options={{ title: 'Packing' }} />
               <Stack.Screen
                 name="OutboundStockDetails"
                 component={OutboundStockDetails}
                 options={{ title: 'Packing' }}
               />
-              <Stack.Screen
-                name="OutboundLoadingList"
-                component={OutboundLoadingList}
-                options={{ title: 'Loading' }}
-              />
+              <Stack.Screen name="OutboundLoadingList" component={OutboundLoadingList} options={{ title: 'Loading' }} />
               <Stack.Screen
                 name="OutboundLoadingDetails"
                 component={OutboundLoadingDetails}
@@ -234,24 +205,10 @@ class Main extends Component<Props, State> {
               />
               <Stack.Screen name="AdjustStock" component={AdjustStock} />
               <Stack.Screen name="Transfer" component={Transfer} />
-              <Stack.Screen
-                name="ShipmentDetails"
-                component={ShipItemDetails}
-                options={{ title: 'Packing' }}
-              />
-              <Stack.Screen
-                name="InternalLocationDetail"
-                component={InternalLocationDetails}
-              />
-              <Stack.Screen
-                name="ViewAvailableItem"
-                component={ViewAvailableItem}
-              />
-              <Stack.Screen
-                name="Placeholder"
-                options={{ title: 'Work in progress' }}
-                component={Placeholder}
-              />
+              <Stack.Screen name="ShipmentDetails" component={ShipItemDetails} options={{ title: 'Packing' }} />
+              <Stack.Screen name="InternalLocationDetail" component={InternalLocationDetails} />
+              <Stack.Screen name="ViewAvailableItem" component={ViewAvailableItem} />
+              <Stack.Screen name="Placeholder" options={{ title: 'Work in progress' }} component={Placeholder} />
               <Stack.Screen
                 name="PackingLocationPage"
                 options={{ title: 'Packing Location' }}
diff --git a/src/assets/styles/LayoutStyle.ts b/src/assets/styles/LayoutStyle.ts
deleted file mode 100644
index a0269671..00000000
--- a/src/assets/styles/LayoutStyle.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  listItemContainer: {
-    margin: 8,
-    padding: 5,
-    justifyContent: 'center',
-    elevation: 8
-  }
-});
diff --git a/src/assets/styles/colors.ts b/src/assets/styles/colors.ts
new file mode 100644
index 00000000..f21483c0
--- /dev/null
+++ b/src/assets/styles/colors.ts
@@ -0,0 +1,10 @@
+const colors = {
+  accent: '#003369',
+  white: '#ffffff',
+  gray: '#5e5e5e',
+  lightGray: '#cccccc',
+  grayTint: '#e7edd8',
+  black: '#000000'
+};
+
+export default colors;
diff --git a/src/assets/styles/common.ts b/src/assets/styles/common.ts
new file mode 100644
index 00000000..a237fd91
--- /dev/null
+++ b/src/assets/styles/common.ts
@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  containerFlexColumn: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  containerFlexRow: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  containerCenter: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  listItemContainer: {
+    margin: 8,
+    padding: 5,
+    justifyContent: 'center',
+    elevation: 8
+  },
+  flex1: {
+    flex: 1
+  },
+  scanSearch: {
+    marginHorizontal: 8,
+    backgroundColor: 'white'
+  },
+  zIndexMinus1: {
+    zIndex: -1
+  }
+});
diff --git a/src/assets/styles/index.ts b/src/assets/styles/index.ts
index 53f81196..ccb76800 100644
--- a/src/assets/styles/index.ts
+++ b/src/assets/styles/index.ts
@@ -1,2 +1,6 @@
-import LayoutStyle from './LayoutStyle';
-export { LayoutStyle };
+import colors from './colors';
+import common from './common';
+import margin from './margin';
+import typography from './typography';
+
+export { colors, common, margin, typography };
diff --git a/src/assets/styles/margin.ts b/src/assets/styles/margin.ts
new file mode 100644
index 00000000..23d0ae95
--- /dev/null
+++ b/src/assets/styles/margin.ts
@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export const units = [0, 4, 8, 10, 16, 20, 24, 30];
+
+export default StyleSheet.create({
+  // Full
+  ...units.reduce((acc, unit, index) => ({ ...acc, [`M${index}`]: { margin: unit } }), {}),
+  // Margin left
+  ...units.reduce((acc, unit, index) => ({ ...acc, [`ML${index}`]: { marginLeft: unit } }), {}),
+  // Margin right
+  ...units.reduce((acc, unit, index) => ({ ...acc, [`MR${index}`]: { marginRight: unit } }), {}),
+  // Margin top
+  ...units.reduce((acc, unit, index) => ({ ...acc, [`MT${index}`]: { marginTop: unit } }), {}),
+  // Margin bottom
+  ...units.reduce((acc, unit, index) => ({ ...acc, [`MB${index}`]: { marginBottom: unit } }), {})
+});
diff --git a/src/assets/styles/typography.ts b/src/assets/styles/typography.ts
new file mode 100644
index 00000000..556a7489
--- /dev/null
+++ b/src/assets/styles/typography.ts
@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+import Theme from '../../utils/Theme';
+import colors from './colors';
+
+export default StyleSheet.create({
+  h1: {
+    fontSize: 30,
+    color: 'black',
+    fontWeight: '500'
+  },
+  h2: {
+    fontSize: 25,
+    color: 'black',
+    fontWeight: '500'
+  },
+  h3: {
+    fontSize: 20,
+    color: 'black',
+    fontWeight: '500'
+  },
+  h4: {
+    fontSize: 15,
+    color: 'black',
+    fontWeight: '500'
+  },
+  p1: {
+    fontSize: 11
+  },
+  p2: {
+    fontSize: 15
+  },
+  p3: {
+    fontSize: 20
+  },
+  p4: {
+    fontSize: 25
+  },
+  bold: {
+    fontWeight: 'bold'
+  },
+  colorPrimary: {
+    color: Theme.colors.text
+  },
+  colorSecondary: {
+    color: Theme.colors.placeholder
+  },
+  colorAccent: {
+    color: colors.accent
+  },
+  label: {
+    fontSize: 11,
+    color: Theme.colors.placeholder
+  },
+  value: {
+    fontSize: 12,
+    color: Theme.colors.text
+  }
+});
diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/index.tsx
similarity index 90%
rename from src/components/AutoComplete/AutoComplete.tsx
rename to src/components/AutoComplete/index.tsx
index bb39e888..0a51e92a 100644
--- a/src/components/AutoComplete/AutoComplete.tsx
+++ b/src/components/AutoComplete/index.tsx
@@ -3,7 +3,6 @@ import { Menu, TextInput } from 'react-native-paper';
 import React, { useState } from 'react';
 import { Props } from './types';
 import styles from './styles';
-import CLEAR from '../../assets/images/icon_clear.png';
 
 const AutoComplete = ({
   value,
@@ -23,14 +22,11 @@ const AutoComplete = ({
   left = () => {},
   placeholder
 }: Props) => {
-  // const [inputValue, setInputValue] = useState(value);
   const [menuVisible, setMenuVisible] = useState(false);
   const [filteredData, setFilteredData] = useState([]);
 
   const filterData = (text: string) => {
-    return data.filter(
-      (val: any) => val?.toLowerCase()?.indexOf(text?.toLowerCase()) > -1
-    );
+    return data.filter((val: any) => val?.toLowerCase()?.indexOf(text?.toLowerCase()) > -1);
   };
   return (
     <View style={[styles.container, containerStyle]}>
@@ -59,7 +55,6 @@ const AutoComplete = ({
             setFilteredData(data);
           }
           setMenuVisible(true);
-          // setInputValue(text);
         }}
         onEndEditing={(e) => {
           if (onEndEdit) {
diff --git a/src/components/AutoComplete/types.ts b/src/components/AutoComplete/types.ts
index c7c46cfb..711798bb 100644
--- a/src/components/AutoComplete/types.ts
+++ b/src/components/AutoComplete/types.ts
@@ -1,29 +1,27 @@
 import { ImageSourcePropType } from 'react-native';
 
 export interface OwnProps {
-    label:  String | null,
-    placeholder?:  String | null,
-    refs?: any
-    edit: boolean | any
-    value?: string | any
-    disabled?: boolean
-    keyboard?: any
-    onEndEdit?: (text: string) => void
-    data?: any
-    containerStyle?: any
-    onChange: (text: string) => void;
-    icon?: ImageSourcePropType;
-    onIconClick?: () => void;
-    inputStyle?: any
-    menuStyle?: any
-    right?: () => void
-    left?: () => void
+  label?: string;
+  placeholder?: string;
+  refs?: any;
+  edit: boolean | any;
+  value?: string | any;
+  disabled?: boolean;
+  keyboard?: any;
+  onEndEdit?: (text: string) => void;
+  data?: any;
+  containerStyle?: any;
+  onChange: (text: string) => void;
+  icon?: ImageSourcePropType;
+  onIconClick?: () => void;
+  inputStyle?: any;
+  menuStyle?: any;
+  right?: () => void;
+  left?: () => void;
 }
 
-export interface StateProps {
-}
+export interface StateProps {}
 
-export interface DispatchProps {
-}
+export interface DispatchProps {}
 
 export type Props = OwnProps & StateProps & DispatchProps;
diff --git a/src/components/BarcodeSearchHeader/BarcodeSearchHeader.tsx b/src/components/BarcodeSearchHeader/index.tsx
similarity index 100%
rename from src/components/BarcodeSearchHeader/BarcodeSearchHeader.tsx
rename to src/components/BarcodeSearchHeader/index.tsx
diff --git a/src/components/BarcodeSearchHeader/styles.ts b/src/components/BarcodeSearchHeader/styles.ts
index 37ed45d9..2c45b190 100644
--- a/src/components/BarcodeSearchHeader/styles.ts
+++ b/src/components/BarcodeSearchHeader/styles.ts
@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   searchBar: {
     height: 56,
-    elevation: 4,
+    elevation: 0,
     borderRadius: 0
   }
 });
diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
index 353c27c2..558981ec 100644
--- a/src/components/Button/styles.ts
+++ b/src/components/Button/styles.ts
@@ -1,23 +1,23 @@
 import { StyleSheet } from 'react-native';
-import { colors } from '../../constants';
+import { colors } from '../../assets/styles';
 
 export default StyleSheet.create({
   label: {
-    color: 'white',
+    color: colors.white,
     fontSize: 15,
     fontWeight: '600'
   },
   button: {
     height: 45,
     marginTop: 25,
-    backgroundColor: colors.headerColor,
+    backgroundColor: colors.accent,
     alignSelf: 'center',
     justifyContent: 'center',
     display: 'flex',
     flexDirection: 'column'
   },
   disabled: {
-    backgroundColor: colors.disabledBgColor
+    backgroundColor: colors.lightGray
   },
   size80: {
     width: '80%'
diff --git a/src/components/ContentLayout/ContentContainer/ContentContainer.tsx b/src/components/ContentLayout/ContentContainer/ContentContainer.tsx
index d06903b4..9d93f9e7 100644
--- a/src/components/ContentLayout/ContentContainer/ContentContainer.tsx
+++ b/src/components/ContentLayout/ContentContainer/ContentContainer.tsx
@@ -13,7 +13,7 @@ const ContentContainer: React.FC<Props> = (props) => {
   const body = _.find(arrayChildren, (child) => _.get(child, 'type.name') === ContentBody.name);
   const footer = _.find(arrayChildren, (child) => _.get(child, 'type.name') === ContentFooter.name);
   return (
-    <View {...otherProps} style={[style, styles.container]}>
+    <View {...otherProps} style={[styles.container, style]}>
       {header?.props?.fixed ? header : null}
           <ScrollView contentContainerStyle={styles.scrollContentContainer}>
             {header?.props?.fixed ? null : header}
diff --git a/src/components/DetailsTable/DetailsTable.tsx b/src/components/DetailsTable/DetailsTable.tsx
index 5a21c08d..6f7a8591 100644
--- a/src/components/DetailsTable/DetailsTable.tsx
+++ b/src/components/DetailsTable/DetailsTable.tsx
@@ -4,11 +4,11 @@ import { Props } from './types';
 import LabeledData from '../LabeledData';
 import styles, { columnStyle } from './styles';
 
-const DetailsTable: React.FC<Props> = ({ style, data, columns = 2 }) => {
+const DetailsTable: React.FC<Props> = ({ style, data, columns = 2, gap = 1 }) => {
   return (
     <View style={[style, styles.container]}>
-      {data.map((dataProps) => (
-        <LabeledData key={dataProps.label} style={columnStyle(columns).column} {...dataProps} />
+      {data.map(({ style: dataStyle, ...dataProps }) => (
+        <LabeledData {...dataProps} key={dataProps.label} style={[columnStyle(columns, gap).column, dataStyle]} />
       ))}
     </View>
   );
diff --git a/src/components/DetailsTable/styles.ts b/src/components/DetailsTable/styles.ts
index 58d2177f..b66b89d9 100644
--- a/src/components/DetailsTable/styles.ts
+++ b/src/components/DetailsTable/styles.ts
@@ -4,16 +4,17 @@ export default StyleSheet.create({
   container: {
     display: 'flex',
     flexDirection: 'row',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'space-between'
   }
 });
 
-const columnStyle = (columnNumber: number) => {
-  const width = 100 / columnNumber;
+const columnStyle = (columnNumber: number, gap: number) => {
+  const width = 100 / columnNumber - gap * columnNumber;
   return StyleSheet.create({
     column: {
       width: `${width}%`,
-      marginBottom: 10
+      marginBottom: 10,
     }
   });
 };
diff --git a/src/components/DetailsTable/types.ts b/src/components/DetailsTable/types.ts
index 8171e631..04a9460c 100644
--- a/src/components/DetailsTable/types.ts
+++ b/src/components/DetailsTable/types.ts
@@ -3,5 +3,7 @@ import { Props as LabeledDataProps } from '../LabeledData/types';
 export interface Props {
   data: LabeledDataProps[];
   columns?: number;
+  gap?: number;
   style?: any;
+  entryStyle?: any;
 }
diff --git a/src/components/FullScreenLoadingIndicator.tsx b/src/components/FullScreenLoadingIndicator.tsx
deleted file mode 100644
index 20a4c9d1..00000000
--- a/src/components/FullScreenLoadingIndicator.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import { View, Modal, StyleSheet, Text } from 'react-native';
-import { ActivityIndicator } from 'react-native-paper';
-
-export interface Props {
-  visible: boolean;
-  message?: string | null;
-}
-
-export default function FullScreenLoadingIndicator(props: Props) {
-  return (
-    <View style={styles.modalParent}>
-      <Modal transparent visible={props.visible}>
-        <View style={styles.modalChild}>
-          <View style={styles.progressContainer}>
-            <ActivityIndicator />
-            {props.message ? (
-              <Text style={styles.progressMessage}>{props.message}</Text>
-            ) : null}
-          </View>
-        </View>
-      </Modal>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  modalParent: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0
-  },
-  modalChild: {
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#00000099'
-  },
-  progressContainer: {
-    flex: 0,
-    backgroundColor: '#FFFFFF',
-    shadowColor: '#000000',
-    padding: 20,
-    borderRadius: 5,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  progressMessage: {
-    marginTop: 20,
-    fontSize: 16
-  }
-});
diff --git a/src/components/FullScreenLoadingIndicator/index.tsx b/src/components/FullScreenLoadingIndicator/index.tsx
new file mode 100644
index 00000000..7d84c7d3
--- /dev/null
+++ b/src/components/FullScreenLoadingIndicator/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { View, Modal, Text } from 'react-native';
+import { ActivityIndicator } from 'react-native-paper';
+import { Props } from './types';
+import styles from './styles';
+
+export default function FullScreenLoadingIndicator(props: Props) {
+  return (
+    <View style={styles.modalParent}>
+      <Modal transparent visible={props.visible}>
+        <View style={styles.modalChild}>
+          <View style={styles.progressContainer}>
+            <ActivityIndicator />
+            {props.message ? <Text style={styles.progressMessage}>{props.message}</Text> : null}
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+}
diff --git a/src/components/FullScreenLoadingIndicator/styles.ts b/src/components/FullScreenLoadingIndicator/styles.ts
new file mode 100644
index 00000000..374b5953
--- /dev/null
+++ b/src/components/FullScreenLoadingIndicator/styles.ts
@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import { colors } from '../../assets/styles';
+
+export default StyleSheet.create({
+  modalParent: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  modalChild: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: `${colors.black}99`
+  },
+  progressContainer: {
+    flex: 0,
+    backgroundColor: colors.white,
+    shadowColor: colors.black,
+    padding: 20,
+    borderRadius: 5,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  progressMessage: {
+    marginTop: 20,
+    fontSize: 16
+  }
+});
diff --git a/src/components/FullScreenLoadingIndicator/types.ts b/src/components/FullScreenLoadingIndicator/types.ts
new file mode 100644
index 00000000..2f182fd4
--- /dev/null
+++ b/src/components/FullScreenLoadingIndicator/types.ts
@@ -0,0 +1,4 @@
+export interface Props {
+  visible: boolean;
+  message?: string | null;
+}
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
deleted file mode 100644
index 4b7f5c8b..00000000
--- a/src/components/Icon.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import Entypo from 'react-native-vector-icons/Entypo';
-import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-
-export enum Name {
-  Boxes,
-  ShoppingCart,
-  User,
-  Cross,
-  Search,
-  Category
-}
-
-export interface Props {
-  name: Name;
-  size?: number;
-  onPress?: () => void;
-  color?: string;
-}
-
-export default function Icon(props: Props) {
-  let content;
-  switch (props.name) {
-    case Name.Boxes:
-      content = <FontAwesome5 name="boxes" size={props.size} color={props.color} />;
-      break;
-    case Name.ShoppingCart:
-      content = <FontAwesome5 name="shopping-cart" size={props.size} color={props.color} />;
-      break;
-    case Name.User:
-      content = <FontAwesome5 name="user-alt" size={props.size} color={props.color} />;
-      break;
-    case Name.Cross:
-      content = <Entypo name="cross" size={props.size} color={props.color} />;
-      break;
-    case Name.Search:
-      content = <MaterialCommunityIcons name="magnify" size={props.size} color={props.color} />;
-      break;
-    case Name.Category:
-      content = <MaterialIcons name="category" size={props.size} color={props.color} />;
-      break;
-  }
-  return <TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>;
-}
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
new file mode 100644
index 00000000..a1cbce02
--- /dev/null
+++ b/src/components/Icon/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import Entypo from 'react-native-vector-icons/Entypo';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { Props, Name } from './types';
+
+export default function Icon({ name, size, color, onPress }: Props) {
+  let content;
+  switch (name) {
+    case Name.Boxes:
+      content = <FontAwesome5 name="boxes" size={size} color={color} />;
+      break;
+    case Name.ShoppingCart:
+      content = <FontAwesome5 name="shopping-cart" size={size} color={color} />;
+      break;
+    case Name.User:
+      content = <FontAwesome5 name="user-alt" size={size} color={color} />;
+      break;
+    case Name.Cross:
+      content = <Entypo name="cross" size={size} color={color} />;
+      break;
+    case Name.Search:
+      content = <MaterialCommunityIcons name="magnify" size={size} color={color} />;
+      break;
+    case Name.Category:
+      content = <MaterialIcons name="category" size={size} color={color} />;
+      break;
+  }
+  return <TouchableOpacity onPress={onPress}>{content}</TouchableOpacity>;
+}
diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts
new file mode 100644
index 00000000..0bb99c8b
--- /dev/null
+++ b/src/components/Icon/types.ts
@@ -0,0 +1,15 @@
+export enum Name {
+  Boxes,
+  ShoppingCart,
+  User,
+  Cross,
+  Search,
+  Category
+}
+
+export interface Props {
+  name: Name;
+  size?: number;
+  onPress?: () => void;
+  color?: string;
+}
diff --git a/src/components/InputBox/index.tsx b/src/components/InputBox/index.tsx
index 6572a0d7..e0182651 100644
--- a/src/components/InputBox/index.tsx
+++ b/src/components/InputBox/index.tsx
@@ -3,7 +3,7 @@ import styles from './styles';
 import { Image, View } from 'react-native';
 import SelectDropdown from 'react-native-select-dropdown';
 import { Props } from './types';
-import AutoComplete from '../AutoComplete/AutoComplete';
+import AutoComplete from '../AutoComplete';
 
 const InputBox = ({
   refs,
diff --git a/src/components/InputSpinner.tsx b/src/components/InputSpinner.tsx
deleted file mode 100644
index 82cb7d42..00000000
--- a/src/components/InputSpinner.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import Spinner from 'react-native-input-spinner';
-import { StyleSheet, Text, View } from 'react-native';
-import { colors, device } from '../constants';
-
-const InputSpinner = ({ title, value, max, setValue }: any) => {
-  return (
-    <>
-      <View style={styles.container}>
-        <Spinner
-          selectTextOnFocus
-          showBorder
-          step={1}
-          color={colors.headerColor}
-          max={max}
-          skin={'square'}
-          min={0}
-          longStep={10}
-          speed={1}
-          width={device.windowWidth / 1.16}
-          value={value}
-          onChange={(num: any) => {
-            setValue(num);
-          }}
-        />
-      </View>
-    </>
-  );
-};
-export default InputSpinner;
-const styles = StyleSheet.create({
-  container: {
-    marginTop: 20
-  },
-  textView: {
-    marginTop: 10,
-    marginStart: 5
-  }
-});
diff --git a/src/components/InputSpinner/index.tsx b/src/components/InputSpinner/index.tsx
new file mode 100644
index 00000000..38de9621
--- /dev/null
+++ b/src/components/InputSpinner/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import Spinner from 'react-native-input-spinner';
+import { View } from 'react-native';
+import { device } from '../../constants';
+import { colors } from '../../assets/styles';
+import { Props } from './types';
+import styles from './styles';
+
+const InputSpinner = ({ value, max, setValue }: Props) => {
+  return (
+    <View style={styles.container}>
+      <Spinner
+        selectTextOnFocus
+        showBorder
+        step={1}
+        color={colors.accent}
+        max={max}
+        skin="square"
+        min={0}
+        longStep={10}
+        speed={1}
+        width={device.windowWidth / 1.16}
+        value={value}
+        onChange={setValue}
+      />
+    </View>
+  );
+};
+export default InputSpinner;
diff --git a/src/screens/ChooseCurrentLocation/styles.ts b/src/components/InputSpinner/styles.ts
similarity index 53%
rename from src/screens/ChooseCurrentLocation/styles.ts
rename to src/components/InputSpinner/styles.ts
index 3310b696..6511ecda 100644
--- a/src/screens/ChooseCurrentLocation/styles.ts
+++ b/src/components/InputSpinner/styles.ts
@@ -2,9 +2,6 @@ import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   container: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1
-  },
-  scrollView: {}
+    marginTop: 20
+  }
 });
diff --git a/src/components/InputSpinner/types.ts b/src/components/InputSpinner/types.ts
new file mode 100644
index 00000000..cc18dd20
--- /dev/null
+++ b/src/components/InputSpinner/types.ts
@@ -0,0 +1,6 @@
+export interface Props {
+  value: any;
+  max?: any;
+  setValue: any;
+  title: string;
+}
diff --git a/src/components/LabeledData/index.tsx b/src/components/LabeledData/index.tsx
index a6df1ea7..a457bbfe 100644
--- a/src/components/LabeledData/index.tsx
+++ b/src/components/LabeledData/index.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import { Props } from './types';
-import styles from './styles';
+import { typography } from '../../assets/styles';
 
-const LabeledData: React.FC<Props> = ({ style, label, value, defaultValue = '-' }) => {
+const LabeledData: React.FC<Props> = ({ style, labelStyle, valueStyle, label, value, defaultValue = '-' }) => {
   return (
     <View style={[style]}>
-      <Text style={styles.label}>{label}</Text>
-      <Text style={styles.data}>{value ?? defaultValue}</Text>
+      <Text style={[typography.label, labelStyle]}>{label}</Text>
+      <Text style={[typography.value, valueStyle]}>{value ?? defaultValue}</Text>
     </View>
   );
 };
diff --git a/src/components/LabeledData/styles.ts b/src/components/LabeledData/styles.ts
deleted file mode 100644
index 81ceb16f..00000000
--- a/src/components/LabeledData/styles.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
-
-export default StyleSheet.create({
-  label: {
-    fontSize: 11,
-    color: Theme.colors.placeholder
-  },
-  data: {
-    fontSize: 12,
-    color: Theme.colors.text,
-    width: '90%'
-  }
-});
diff --git a/src/components/LabeledData/types.ts b/src/components/LabeledData/types.ts
index f6d839b5..07baae14 100644
--- a/src/components/LabeledData/types.ts
+++ b/src/components/LabeledData/types.ts
@@ -2,9 +2,11 @@ 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;
+  valueStyle?: any;
 }
 
 export type Props = LabeledDataProps;
diff --git a/src/components/OptionMenu.tsx b/src/components/OptionMenu/index.tsx
similarity index 50%
rename from src/components/OptionMenu.tsx
rename to src/components/OptionMenu/index.tsx
index e93f8b7e..f09cc839 100644
--- a/src/components/OptionMenu.tsx
+++ b/src/components/OptionMenu/index.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import { Image, TouchableOpacity, View } from 'react-native';
 import { Menu, Provider } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
-import { logout } from '../redux/actions/auth';
+import { logout } from '../../redux/actions/auth';
+import styles from './styles';
 
 const OptionMenu = ({ route, navigation }: any) => {
   const dispatch = useDispatch();
@@ -12,53 +13,15 @@ const OptionMenu = ({ route, navigation }: any) => {
   const handleLogout = () => dispatch(logout());
   return (
     <Provider>
-      <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'flex-start',
-          alignContent: 'flex-start'
-        }}
-      >
-        <Image
-          source={require('../assets/images/logo.png')}
-          style={{
-            resizeMode: 'stretch',
-            width: 40,
-            height: 30,
-            marginTop: 10,
-            marginEnd:
-              route.name !== 'Login' && route.name !== 'Settings' ? 0 : 30
-          }}
-        />
-        {route.name !== 'Login' && route.name !== 'Settings' ? (
+      <View style={styles.menuContainer}>
+        <Image source={require('../../assets/images/logo.png')} style={styles.logo} />
+        {route.name !== 'Login' && route.name !== 'Settings' && (
           <Menu
-            style={{
-              width: 350,
-              position: 'absolute',
-              top: 50,
-              left: -50
-            }}
+            style={styles.menu}
             visible={visible}
             anchor={
-              <TouchableOpacity
-                style={{
-                  flex: 1,
-                  justifyContent: 'center',
-                  alignItems: 'center'
-                }}
-                onPress={openMenu}
-              >
-                <Image
-                  source={require('../assets/images/option.jpg')}
-                  style={{
-                    resizeMode: 'center',
-                    width: 40,
-                    height: 40,
-                    marginHorizontal: 5,
-                    marginTop: 20,
-                    zIndex: 123
-                  }}
-                />
+              <TouchableOpacity onPress={openMenu}>
+                <Image source={require('../../assets/images/option.jpg')} style={styles.dots} />
               </TouchableOpacity>
             }
             onDismiss={closeMenu}
@@ -78,9 +41,6 @@ const OptionMenu = ({ route, navigation }: any) => {
               }}
             />
             <Menu.Item
-              style={{
-                width: '70%'
-              }}
               title="Settings"
               onPress={() => {
                 navigation.navigate('Settings');
@@ -88,9 +48,6 @@ const OptionMenu = ({ route, navigation }: any) => {
               }}
             />
             <Menu.Item
-              style={{
-                width: '70%'
-              }}
               title="Change location"
               onPress={() => {
                 navigation.navigate('Drawer');
@@ -98,24 +55,15 @@ const OptionMenu = ({ route, navigation }: any) => {
               }}
             />
             <Menu.Item
-              style={{
-                width: '70%'
-              }}
               title="App info / version"
               onPress={() => {
                 navigation.navigate('AppInfo');
                 closeMenu();
               }}
             />
-            <Menu.Item
-              style={{
-                width: '70%'
-              }}
-              title="Logout"
-              onPress={handleLogout}
-            />
+            <Menu.Item title="Logout" onPress={handleLogout} />
           </Menu>
-        ) : null}
+        )}
       </View>
     </Provider>
   );
diff --git a/src/components/OptionMenu/styles.ts b/src/components/OptionMenu/styles.ts
new file mode 100644
index 00000000..4ba79191
--- /dev/null
+++ b/src/components/OptionMenu/styles.ts
@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  menuContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    marginTop: 10,
+    marginRight: 5
+  },
+  logo: {
+    resizeMode: 'contain',
+    height: 30,
+    width: 30,
+    marginHorizontal: 5
+  },
+  dots: {
+    resizeMode: 'contain',
+    height: 40,
+    width: 40,
+    marginHorizontal: 5,
+    zIndex: 123
+  },
+  menu: {
+    width: 160,
+    top: 50,
+    left: -90
+  }
+});
diff --git a/src/components/PickListItem/index.tsx b/src/components/PickListItem/index.tsx
index 171a1295..e8bd03ab 100644
--- a/src/components/PickListItem/index.tsx
+++ b/src/components/PickListItem/index.tsx
@@ -4,7 +4,7 @@ import { Text, View, TouchableOpacity } from 'react-native';
 import showPopup from '../../components/Popup';
 import Button from '../../components/Button';
 import InputBox from '../../components/InputBox';
-import { colors } from '../../constants';
+import { colors } from '../../assets/styles';
 import { PicklistItem } from '../../data/picklist/PicklistItem';
 import InputSpinner from '../../components/InputSpinner';
 import { Card } from 'react-native-paper';
@@ -82,6 +82,7 @@ const PickListItem: React.FC<Props> = ({ item, onPickItem }) => {
           <DetailsTable
             style={styles.dataTable}
             columns={3}
+            gap={0.5}
             data={[
               { label: 'Product Code', value: item?.productCode },
               { label: 'Product Name', value: item?.['product.name'] },
@@ -163,7 +164,7 @@ const PickListItem: React.FC<Props> = ({ item, onPickItem }) => {
                             <FontAwesome5
                               name="exclamation-triangle"
                               size={10}
-                              color={colors.headerColor}
+                              color={colors.accent}
                               style={styles.infoButton}
                             />
                             &nbsp;Shortage
diff --git a/src/components/Popup.ts b/src/components/Popup/index.tsx
similarity index 80%
rename from src/components/Popup.ts
rename to src/components/Popup/index.tsx
index 308be28e..077f1c02 100644
--- a/src/components/Popup.ts
+++ b/src/components/Popup/index.tsx
@@ -1,11 +1,5 @@
 import { Alert, AlertButton } from 'react-native';
-
-export interface PopupParams {
-  message: string;
-  title?: string | null;
-  positiveButton?: any;
-  negativeButtonText?: string;
-}
+import { PopupParams } from './types';
 
 export default function showPopup(params: PopupParams) {
   let buttons: AlertButton[] = [];
diff --git a/src/components/Popup/types.ts b/src/components/Popup/types.ts
new file mode 100644
index 00000000..d6ca596c
--- /dev/null
+++ b/src/components/Popup/types.ts
@@ -0,0 +1,6 @@
+export interface PopupParams {
+  message: string;
+  title?: string | null;
+  positiveButton?: any;
+  negativeButtonText?: string;
+}
diff --git a/src/components/PutAwayItem/styles.ts b/src/components/PutAwayItem/styles.ts
index d3afbba8..72c342c7 100644
--- a/src/components/PutAwayItem/styles.ts
+++ b/src/components/PutAwayItem/styles.ts
@@ -1,5 +1,4 @@
 import { StyleSheet } from 'react-native';
-import { colors, device, ratio } from '../../constants';
 import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({
diff --git a/src/components/Radio.tsx b/src/components/Radio.tsx
deleted file mode 100644
index 664cca6d..00000000
--- a/src/components/Radio.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { RadioButton } from 'react-native-paper';
-
-const Radio = ({ title, checked, setChecked, disabled }: any) => {
-  return (
-    <View style={styles.container}>
-      <View style={styles.radioButton}>
-        <RadioButton
-          color={'grey'}
-          value="false"
-          disabled={disabled}
-          status={checked ? 'checked' : 'unchecked'}
-          onPress={() => {
-            setChecked(!checked);
-          }}
-        />
-      </View>
-      <View style={styles.title}>
-        <Text style={styles.titleText(disabled)} onPress={() => (!disabled ? setChecked(!checked) : null)}>
-          {title}
-        </Text>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginTop: 15,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start'
-  },
-  title: {
-    flex: 9
-  },
-  radioButton: {
-    flex: 1
-  },
-  titleText: (disabled: any) => ({
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: disabled ? 'grey' : 'black'
-  })
-});
-export default Radio;
diff --git a/src/components/Radio/index.tsx b/src/components/Radio/index.tsx
new file mode 100644
index 00000000..96339d4a
--- /dev/null
+++ b/src/components/Radio/index.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { RadioButton } from 'react-native-paper';
+import styles from './styles';
+import { Props } from './types';
+
+const Radio: React.FC<Props> = ({ title, checked, setChecked, disabled }) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.radioButton}>
+        <RadioButton
+          color={'grey'}
+          value="false"
+          disabled={disabled}
+          status={checked ? 'checked' : 'unchecked'}
+          onPress={() => {
+            setChecked(!checked);
+          }}
+        />
+      </View>
+      <View style={styles.title}>
+        <Text
+          style={[styles.titleText, disabled ? styles.titleColorGrey : styles.titleColorBlack]}
+          onPress={() => (!disabled ? setChecked(!checked) : null)}
+        >
+          {title}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default Radio;
diff --git a/src/components/Radio/styles.ts b/src/components/Radio/styles.ts
new file mode 100644
index 00000000..6e71d283
--- /dev/null
+++ b/src/components/Radio/styles.ts
@@ -0,0 +1,27 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start'
+  },
+  title: {
+    flex: 9
+  },
+  radioButton: {
+    flex: 1
+  },
+  titleText: {
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+  titleColorBlack: {
+    color: 'black'
+  },
+  titleColorGrey: {
+    color: 'grey'
+  }
+});
diff --git a/src/components/Radio/types.ts b/src/components/Radio/types.ts
new file mode 100644
index 00000000..21ca3608
--- /dev/null
+++ b/src/components/Radio/types.ts
@@ -0,0 +1,6 @@
+export interface Props {
+  title: string;
+  checked: boolean;
+  setChecked: (state: boolean) => void;
+  disabled?: boolean;
+}
diff --git a/src/components/RenderData.tsx b/src/components/RenderData.tsx
deleted file mode 100644
index 6f6f2ebd..00000000
--- a/src/components/RenderData.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { StyleSheet, Text, View } from 'react-native';
-import React from 'react';
-import Theme from '../utils/Theme';
-
-const RenderData = ({ title, subText }: any): JSX.Element => {
-  return (
-    <View style={styles.columnItem}>
-      <Text style={styles.label}>{title}</Text>
-      <Text style={styles.value}>{subText}</Text>
-    </View>
-  );
-};
-
-export default RenderData;
-
-const styles = StyleSheet.create({
-  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%'
-  }
-});
diff --git a/src/constants.ts b/src/constants.ts
index 6ab684ca..24957cbf 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,10 +1,5 @@
 import { Dimensions, StatusBar } from 'react-native';
 
-export const colors = {
-  headerColor: '#003369',
-  disabledBgColor: '#cccccc'
-};
-
 export const device = {
   windowWidth: Dimensions.get('window').width,
   windowHeight: Dimensions.get('window').height,
diff --git a/src/screens/AdjustStock/index.tsx b/src/screens/AdjustStock/index.tsx
index a86f7f48..7fd27b18 100644
--- a/src/screens/AdjustStock/index.tsx
+++ b/src/screens/AdjustStock/index.tsx
@@ -1,17 +1,18 @@
-/* eslint-disable no-shadow */
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import styles from './styles';
-import { ScrollView, View, ToastAndroid } from 'react-native';
+import { common, margin } from '../../assets/styles';
+import { View, ToastAndroid } from 'react-native';
 import InputBox from '../../components/InputBox';
 import Button from '../../components/Button';
 import showPopup from '../../components/Popup';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import DropDown from 'react-native-paper-dropdown';
-import RenderData from '../../components/RenderData';
 import { RootState } from '../../redux/reducers';
 import { stockAdjustments } from '../../redux/actions/products';
 import InputSpinner from '../../components/InputSpinner';
+import DetailsTable from '../../components/DetailsTable';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import { ContentContainer, ContentFooter, ContentBody, ContentHeader } from '../../components/ContentLayout';
 
 const reasonCodes = [
   {
@@ -152,31 +153,24 @@ const AdjustStock = () => {
     dispatch(stockAdjustments(requestBody, callback));
   };
 
-  const RenderItem = (): JSX.Element => {
-    return (
-      <View style={styles.itemView}>
-        <View style={styles.rowItem}>
-          <RenderData title="Product Code" subText={item?.product.productCode} />
-          <RenderData title="Product Name" subText={item?.product.name} />
-        </View>
-        <View style={styles.rowItem}>
-          <RenderData title="Lot Number" subText={item?.inventoryItem.lotNumber ?? 'Default'} />
-          <RenderData title="Expiration Date" subText={item?.inventoryItem.expirationDate ?? 'Never'} />
-        </View>
-        <View style={styles.rowItem}>
-          <RenderData title="Bin Location" subText={item?.binLocation?.name ?? 'Default'} />
-          <RenderData title="Quantity Available" subText={item.quantityAvailableToPromise} />
-        </View>
-      </View>
-    );
-  };
+  const renderData: LabeledDataType[] = [
+    { label: 'Product Code', value: item?.product.productCode },
+    { label: 'Product Name', value: item?.product.name },
+    { label: 'Lot Number', value: item?.inventoryItem.lotNumber, defaultValue: 'Default' },
+    { label: 'Expiration Date', value: item?.inventoryItem.expirationDate, defaultValue: 'Never' },
+    { label: 'Bin Location', value: item?.binLocation?.name, defaultValue: 'Default' },
+    { label: 'Quantity Available', value: item.quantityAvailableToPromise }
+  ];
 
   return (
-    <ScrollView style={styles.container}>
-      <RenderItem />
-      <View style={styles.from}>
-        <InputSpinner title={'Quantity Adjusted'} value={quantityAdjusted} setValue={setQuantityAdjusted} />
-        <View style={styles.dropDownDivider} />
+    <ContentContainer>
+      <ContentHeader>
+        <DetailsTable data={renderData} />
+      </ContentHeader>
+      <ContentBody>
+        <View style={[common.containerCenter, margin.MB3]}>
+          <InputSpinner title={'Quantity Adjusted'} value={quantityAdjusted} setValue={setQuantityAdjusted} />
+        </View>
         <DropDown
           label="Reason Code"
           mode="outlined"
@@ -188,11 +182,11 @@ const AdjustStock = () => {
           onDismiss={() => setShowDropDown(false)}
         />
         <InputBox value={comments} disabled={false} editable={false} label="Comments" onChange={setComments} />
-      </View>
-      <View style={styles.bottom}>
+      </ContentBody>
+      <ContentFooter>
         <Button disabled={!comments || !reasonCode} title="Adjust Stock" onPress={onSave} />
-      </View>
-    </ScrollView>
+      </ContentFooter>
+    </ContentContainer>
   );
 };
 
diff --git a/src/screens/AdjustStock/styles.ts b/src/screens/AdjustStock/styles.ts
deleted file mode 100644
index c7025925..00000000
--- a/src/screens/AdjustStock/styles.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { ratio } from '../../constants';
-import Theme from '../../utils/Theme';
-
-export default StyleSheet.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 20
-  },
-  arrowDownIcon: {
-    height: 15,
-    width: 15
-  },
-  select: {
-    width: '100%',
-    borderWidth: 2,
-    height: 40,
-    alignSelf: 'center',
-    borderColor: 'grey',
-    backgroundColor: 'white',
-    borderRadius: 5,
-    marginTop: 10
-  },
-  from: {
-    flex: 1
-  },
-  bottom: {
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: ratio.height * 100
-  },
-  itemView: {
-    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,
-    marginTop: 10,
-    width: '90%'
-  },
-  dropDownDivider: {
-    marginBottom: 30
-  }
-});
diff --git a/src/screens/AppInfo/AppInfoScreen.tsx b/src/screens/AppInfo/AppInfoScreen.tsx
index 5ad165f1..1c79e223 100644
--- a/src/screens/AppInfo/AppInfoScreen.tsx
+++ b/src/screens/AppInfo/AppInfoScreen.tsx
@@ -1,17 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { View, Text, Image } from 'react-native';
-import Styles from './Styles';
+import styles from './styles';
+import { common, typography } from '../../assets/styles';
 import DeviceInfo from 'react-native-device-info';
 import { BUILD_NUMBER } from '@env';
 
-const AppInfoScreen: FC = () => {
+const AppInfoScreen: React.FC = () => {
   return (
-    <View style={Styles.mainContainer}>
-      <Text style={Styles.openboxTextStyle}>Openboxes</Text>
-      <Text style={Styles.versionNumberText}>Version Number: {DeviceInfo.getVersion()}</Text>
-      <Text style={Styles.versionNumberText}>Build Number: {BUILD_NUMBER || 'Development'}</Text>
-      <Image source={require('../../assets/images/logo.png')} resizeMode={'cover'} style={Styles.imageStyle} />
-      <Text style={Styles.certificateText}>2010-2022 Openboxes inc.</Text>
+    <View style={[common.containerCenter, common.flex1]}>
+      <Text style={typography.h1}>Openboxes</Text>
+      <Text style={[typography.p3, typography.colorPrimary]}>Version Number: {DeviceInfo.getVersion()}</Text>
+      <Text style={[typography.p3, typography.colorPrimary]}>Build Number: {BUILD_NUMBER || 'Development'}</Text>
+      <Image source={require('../../assets/images/logo.png')} resizeMode={'cover'} style={styles.imageStyle} />
+      <Text style={[typography.p2, typography.colorPrimary]}>2010-2022 Openboxes inc.</Text>
     </View>
   );
 };
diff --git a/src/screens/AppInfo/Styles.ts b/src/screens/AppInfo/Styles.ts
deleted file mode 100644
index 870a4f27..00000000
--- a/src/screens/AppInfo/Styles.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  openboxTextStyle: {
-    fontSize: 27,
-    color: 'black',
-    fontWeight: '500'
-  },
-  versionNumberText: {
-    marginTop: 2,
-    fontSize: 20,
-    color: 'black'
-  },
-  certificateText: {
-    fontSize: 15,
-    color: 'black'
-  },
-  imageStyle: {
-    width: 100,
-    height: 100,
-    marginVertical: 20
-  }
-});
diff --git a/src/screens/AppInfo/styles.ts b/src/screens/AppInfo/styles.ts
new file mode 100644
index 00000000..26543d04
--- /dev/null
+++ b/src/screens/AppInfo/styles.ts
@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  imageStyle: {
+    width: 100,
+    height: 100,
+    marginVertical: 20
+  }
+});
diff --git a/src/screens/ChooseCurrentLocation/index.tsx b/src/screens/ChooseCurrentLocation/index.tsx
index c0fd901a..89dd8003 100644
--- a/src/screens/ChooseCurrentLocation/index.tsx
+++ b/src/screens/ChooseCurrentLocation/index.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import styles from './styles';
 import Location from '../../data/location/Location';
 import _, { Dictionary } from 'lodash';
-import { ScrollView, View } from 'react-native';
+import { ScrollView } from 'react-native';
 import { List } from 'react-native-paper';
 import showPopup from '../../components/Popup';
 import { hideScreenLoading, showScreenLoading } from '../../redux/actions/main';
@@ -133,33 +132,30 @@ class ChooseCurrentLocation extends React.Component<Props, State> {
 
   render() {
     return (
-      <View style={styles.container}>
-        {/*<Header title="Choose Location" backButtonVisible={false} />*/}
-        <ScrollView style={styles.scrollView}>
-          <List.AccordionGroup>
-            {_.map(_.keys(this.state.orgNameAndLocationsDictionary), (orgName: string) => {
-              return (
-                <List.Accordion
-                  title={orgName}
-                  id={`orgName_${orgName}`}
-                  left={(props) => <List.Icon {...props} icon="office-building" />}
-                  key={`orgName_${orgName}`}
-                >
-                  {_.map(this.state.orgNameAndLocationsDictionary[orgName], (location) => {
-                    return (
-                      <List.Item
-                        title={location.name}
-                        key={`orgName_${orgName}_locationName_${location.name}`}
-                        onPress={() => this.setCurrentLocation(orgName, location)}
-                      />
-                    );
-                  })}
-                </List.Accordion>
-              );
-            })}
-          </List.AccordionGroup>
-        </ScrollView>
-      </View>
+      <ScrollView>
+        <List.AccordionGroup>
+          {_.map(_.keys(this.state.orgNameAndLocationsDictionary), (orgName: string) => {
+            return (
+              <List.Accordion
+                title={orgName}
+                id={`orgName_${orgName}`}
+                left={(props) => <List.Icon {...props} icon="office-building" />}
+                key={`orgName_${orgName}`}
+              >
+                {_.map(this.state.orgNameAndLocationsDictionary[orgName], (location) => {
+                  return (
+                    <List.Item
+                      title={location.name}
+                      key={`orgName_${orgName}_locationName_${location.name}`}
+                      onPress={() => this.setCurrentLocation(orgName, location)}
+                    />
+                  );
+                })}
+              </List.Accordion>
+            );
+          })}
+        </List.AccordionGroup>
+      </ScrollView>
     );
   }
 }
diff --git a/src/screens/Dashboard/Types.ts b/src/screens/Dashboard/Types.ts
deleted file mode 100644
index 9e0a92b3..00000000
--- a/src/screens/Dashboard/Types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export interface OwnProps {
-  navigation: any;
-}
-
-export interface StateProps {
-  //no-op
-}
-
-export interface DispatchProps {
-  //no-op
-}
-
-export type Props = OwnProps & StateProps & DispatchProps;
-
-export interface State {
-  // navigationState: NavigationState;
-}
diff --git a/src/screens/Dashboard/index.tsx b/src/screens/Dashboard/index.tsx
index e619ffe9..d00e1ac6 100644
--- a/src/screens/Dashboard/index.tsx
+++ b/src/screens/Dashboard/index.tsx
@@ -1,36 +1,25 @@
 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 { RootState } from '../../redux/reducers';
+import { Props } from './types';
 import { Card } from 'react-native-paper';
 import dashboardData from './dashboardData';
 import EmptyView from '../../components/EmptyView';
-class Dashboard extends React.Component<Props, State> {
-  renderItem = (item: any, index: any) => {
+class Dashboard extends React.Component<Props> {
+  renderItem = (item: ListRenderItemInfo<any>) => {
+    const cardItem = item.item;
+    const cardIndex = item.index;
     return (
       <TouchableOpacity
-        key={index}
+        key={cardIndex}
         style={styles.cardContainer}
         onPress={() => {
-          this.props.navigation.navigate(item.navigationScreenName);
+          this.props.navigation.navigate(cardItem.navigationScreenName);
         }}
       >
         <Card style={styles.card}>
-          <Image
-            style={styles.cardImage}
-            resizeMode="contain"
-            source={item.icon}
-          />
-          <Text style={styles.cardLabel}>{item.screenName}</Text>
+          <Image style={styles.cardImage} resizeMode="contain" source={cardItem.icon} />
+          <Text style={styles.cardLabel}>{cardItem.screenName}</Text>
         </Card>
       </TouchableOpacity>
     );
@@ -38,27 +27,15 @@ class Dashboard extends React.Component<Props, State> {
 
   render() {
     return (
-      <View style={styles.screenContainer}>
-        <FlatList
-          data={dashboardData}
-          horizontal={false}
-          numColumns={3}
-          ListEmptyComponent={<EmptyView />}
-          renderItem={(item: ListRenderItemInfo<any>) =>
-            this.renderItem(item.item, item.index)
-          }
-        />
-      </View>
+      <FlatList
+        data={dashboardData}
+        horizontal={false}
+        numColumns={3}
+        ListEmptyComponent={<EmptyView />}
+        renderItem={this.renderItem}
+      />
     );
   }
 }
 
-const mapStateToProps = (state: RootState) => ({
-  //no-op
-});
-
-const mapDispatchToProps: DispatchProps = {
-  //no-op
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);
+export default Dashboard;
diff --git a/src/screens/Dashboard/styles.ts b/src/screens/Dashboard/styles.ts
index d74cf3d2..a5e13f4f 100644
--- a/src/screens/Dashboard/styles.ts
+++ b/src/screens/Dashboard/styles.ts
@@ -1,17 +1,12 @@
 import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
+import { colors } from '../../assets/styles';
 
 export default StyleSheet.create({
-  screenContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1
-  },
   cardContainer: {
     height: 150,
     borderRadius: 5,
     flex: 1,
-    backgroundColor: 'white',
+    backgroundColor: colors.accent,
     margin: 5
   },
   cardLabel: {
@@ -32,7 +27,7 @@ export default StyleSheet.create({
   card: {
     height: '100%',
     padding: 5,
-    shadowColor: '#00000021',
+    shadowColor: `${colors.white}21`,
     shadowOffset: {
       width: 0,
       height: 6
@@ -40,6 +35,6 @@ export default StyleSheet.create({
     shadowOpacity: 0.5,
     shadowRadius: 8,
     elevation: 12,
-    backgroundColor: 'white'
+    backgroundColor: colors.white
   }
 });
diff --git a/src/screens/Dashboard/types.ts b/src/screens/Dashboard/types.ts
new file mode 100644
index 00000000..f92b4fe6
--- /dev/null
+++ b/src/screens/Dashboard/types.ts
@@ -0,0 +1,3 @@
+export interface Props {
+  navigation: any;
+}
diff --git a/src/screens/DrawerNavigator.tsx b/src/screens/DrawerNavigator.tsx
index 4d3c00db..b2c6ecd7 100644
--- a/src/screens/DrawerNavigator.tsx
+++ b/src/screens/DrawerNavigator.tsx
@@ -3,9 +3,9 @@ import React, { Component } from 'react';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import ChooseCurrentLocation from './ChooseCurrentLocation';
 import Dashboard from './Dashboard';
-import Settings from './Settings';
 import { Image } from 'react-native';
-import { colors, appHeaderHeight } from '../constants';
+import { appHeaderHeight } from '../constants';
+import { colors } from '../assets/styles';
 
 const Drawer = createDrawerNavigator();
 
@@ -15,21 +15,21 @@ class DrawerNavigator extends Component {
       <Drawer.Navigator
         screenOptions={{
           headerStyle: {
-            backgroundColor: colors.headerColor,
+            backgroundColor: colors.accent,
             height: appHeaderHeight
           },
           headerTitleStyle: {
-            color: 'white'
+            color: colors.white
           },
-          headerTintColor: '#ffffff',
+          headerTintColor: colors.white,
           headerRight: () => (
             <Image
               source={require('../assets/images/logo.png')}
               style={{
                 resizeMode: 'stretch',
-                width: 40,
+                width: 30,
                 height: 30,
-                marginRight: 30
+                marginRight: 20
               }}
             />
           )
@@ -37,7 +37,7 @@ class DrawerNavigator extends Component {
       >
         <Drawer.Screen name="Choose Location" component={ChooseCurrentLocation} />
         <Drawer.Screen name="Dashboard" component={Dashboard} />
-       </Drawer.Navigator>
+      </Drawer.Navigator>
     );
   }
 }
diff --git a/src/screens/InboundDetails/InboundOrderContainer.tsx b/src/screens/InboundDetails/InboundOrderContainer.tsx
index 7d59bcd1..40514fe6 100644
--- a/src/screens/InboundDetails/InboundOrderContainer.tsx
+++ b/src/screens/InboundDetails/InboundOrderContainer.tsx
@@ -1,23 +1,16 @@
 import React from 'react';
-import { SectionList, View, Text } from 'react-native';
+import { SectionList, Text } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import styles from './styles';
 import { Card } from 'react-native-paper';
 import InboundDetailProps from './types';
-import { LayoutStyle } from '../../assets/styles';
+import { common } from '../../assets/styles';
+import DetailsTable from '../../components/DetailsTable';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
 
-const InboundOrderContainer = ({ data, shipmentId, shipmentData }: InboundDetailProps) => {
+const InboundOrderContainer: React.FC<InboundDetailProps> = ({ data, shipmentId, shipmentData }) => {
   const navigation = useNavigation<any>();
 
-  const RenderData = ({ title, subText }: any): JSX.Element => {
-    return (
-      <View style={styles.columnItem}>
-        <Text style={styles.label}>{title}</Text>
-        <Text style={styles.value}>{subText}</Text>
-      </View>
-    );
-  };
-
   const navigateToInboundOrderDetails = (item: any) => {
     navigation.navigate('InboundReceiveDetail', {
       shipmentItem: item,
@@ -26,36 +19,6 @@ const InboundOrderContainer = ({ data, shipmentId, shipmentData }: InboundDetail
     });
   };
 
-  const renderShipmentItem = (): JSX.Element => {
-    return (
-      <Card style={LayoutStyle.listItemContainer}>
-        <Card.Content>
-          <View style={styles.rowItem}>
-            <RenderData title={'Shipment Number'} subText={shipmentData?.shipmentNumber} />
-            <RenderData title={'Status'} subText={shipmentData?.status} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderData title={'Origin'} subText={shipmentData?.origin.name} />
-            <RenderData title={'Destination'} subText={shipmentData?.destination.name} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderData title={'Description'} subText={shipmentData?.name} />
-            <View>
-              <Text style={styles.label}>Items Received</Text>
-              <Text style={styles.value}>
-                {shipmentData.receivedCount} / {shipmentData?.shipmentItems.length}
-              </Text>
-            </View>
-          </View>
-          <View style={styles.rowItem}>
-            <RenderData title={'Expected Shipping Date'} subText={shipmentData?.expectedShippingDate} />
-            <RenderData title={'Expected Delivery Date'} subText={shipmentData?.expectedDeliveryDate} />
-          </View>
-        </Card.Content>
-      </Card>
-    );
-  };
-
   const getStatus = (value: number) => {
     if (value > 0) {
       return 'Receiving';
@@ -66,25 +29,45 @@ const InboundOrderContainer = ({ data, shipmentId, shipmentData }: InboundDetail
     }
   };
 
-  const renderListItem = (item: any, index: any) => {
+  const renderShipmentItemData: LabeledDataType[] = [
+    { label: 'Shipment Number', value: shipmentData?.shipmentNumber },
+    { label: 'Status', value: shipmentData?.status },
+    { label: 'Origin', value: shipmentData?.origin.name },
+    { label: 'Destination', value: shipmentData?.destination.name },
+    { label: 'Description', value: shipmentData?.name },
+    { label: 'Items Received', value: `${shipmentData.receivedCount} / ${shipmentData?.shipmentItems.length}` },
+    { label: 'Expected Shipping Date', value: shipmentData?.expectedShippingDate },
+    { label: 'Expected Delivery Date', value: shipmentData?.expectedDeliveryDate }
+  ];
+
+  const renderShipmentItem: React.FC = () => {
+    return (
+      <Card style={common.listItemContainer}>
+        <Card.Content>
+          <DetailsTable data={renderShipmentItemData} />
+        </Card.Content>
+      </Card>
+    );
+  };
+
+  const renderListItem = (item: any) => {
+    const renderListItemData: LabeledDataType[] = [
+      { label: 'Product Code', value: item['product.productCode'] },
+      { label: 'Product Name', value: item['product.name'] },
+      { label: 'Quantity Shipped', value: item.quantityShipped },
+      { label: 'Quantity Received', value: item.quantityReceived },
+      { label: 'Quantity Remaining', value: item.quantityRemaining > 0 ? item.quantityRemaining : 0 },
+      { label: 'Status', value: getStatus(item.quantityRemaining) }
+    ];
+
     return (
-      <Card key={index} style={LayoutStyle.listItemContainer} onPress={() => navigateToInboundOrderDetails(item)}>
+      <Card
+        key={item['product.productCode']}
+        style={common.listItemContainer}
+        onPress={() => navigateToInboundOrderDetails(item)}
+      >
         <Card.Content>
-          <View style={styles.rowItem}>
-            <RenderData title={'Product Code'} subText={item['product.productCode']} />
-            <RenderData title={'Product Name'} subText={item['product.name']} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderData title={'Quantity Shipped'} subText={item.quantityShipped} />
-            <RenderData title={'Quantity Received'} subText={item.quantityReceived} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderData
-              title={'Quantity Remaining'}
-              subText={item.quantityRemaining > 0 ? item.quantityRemaining : 0}
-            />
-            <RenderData title={'Status'} subText={getStatus(item.quantityRemaining)} />
-          </View>
+          <DetailsTable data={renderListItemData} />
         </Card.Content>
       </Card>
     );
@@ -93,7 +76,7 @@ const InboundOrderContainer = ({ data, shipmentId, shipmentData }: InboundDetail
   return (
     <SectionList
       ListHeaderComponent={renderShipmentItem}
-      renderItem={({ item, index, section }) => renderListItem(item, index)}
+      renderItem={({ item }) => renderListItem(item)}
       renderSectionHeader={({ section: { title } }) => <Text style={styles.headerTitle}>{title}</Text>}
       sections={data}
       keyExtractor={(item, index) => item + index}
diff --git a/src/screens/InboundDetails/styles.ts b/src/screens/InboundDetails/styles.ts
index 210373b6..e50bf501 100644
--- a/src/screens/InboundDetails/styles.ts
+++ b/src/screens/InboundDetails/styles.ts
@@ -1,36 +1,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
-  },
-  value: {
-    fontSize: 12,
-    color: Theme.colors.text,
-    width: '90%'
-  },
   headerTitle: {
     fontWeight: 'bold',
     backgroundColor: 'white',
diff --git a/src/screens/InboundOrderList/index.tsx b/src/screens/InboundOrderList/index.tsx
index 8870a04e..24cd46a3 100644
--- a/src/screens/InboundOrderList/index.tsx
+++ b/src/screens/InboundOrderList/index.tsx
@@ -1,18 +1,19 @@
 /* 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';
 import showPopup from '../../components/Popup';
-import BarcodeSearchHeader from '../../components/BarcodeSearchHeader/BarcodeSearchHeader';
+import BarcodeSearchHeader from '../../components/BarcodeSearchHeader';
 import { RootState } from '../../redux/reducers';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import styles from './styles';
 import { Card } from 'react-native-paper';
 import EmptyView from '../../components/EmptyView';
-import { LayoutStyle } from '../../assets/styles';
+import { common, typography } 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 +68,24 @@ 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 renderListItemDats: LabeledDataType[] = [
+      { label: 'Identifier', value: item.shipmentNumber },
+      { label: 'Status', value: item.status },
+      { label: 'Origin', value: item.origin.name },
+      { label: 'Destination', value: item.destination.name },
+      { label: 'Description', value: item.name },
+      { label: 'Items Received', value: `${item.receivedCount} / ${item.shipmentItems.length}` }
+    ];
+
     return (
-      <Card style={LayoutStyle.listItemContainer} key={index} onPress={() => navigateToInboundDetails(item)}>
+      <Card style={common.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 +133,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
deleted file mode 100644
index 4124792c..00000000
--- a/src/screens/InboundOrderList/styles.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-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
-  },
-  value: {
-    fontSize: 12,
-    color: Theme.colors.text,
-    width: '90%'
-  }
-});
diff --git a/src/screens/InboundReceiveDetail/index.tsx b/src/screens/InboundReceiveDetail/index.tsx
index 2f9c199c..0d30a186 100644
--- a/src/screens/InboundReceiveDetail/index.tsx
+++ b/src/screens/InboundReceiveDetail/index.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styles from './styles';
-import { Image, ScrollView, TouchableOpacity, View } from 'react-native';
+import { common, margin } from '../../assets/styles';
+import { Image, TouchableOpacity, View } from 'react-native';
 import DatePicker from 'react-native-datepicker';
 import InputBox from '../../components/InputBox';
 import Button from '../../components/Button';
@@ -16,7 +17,8 @@ import Radio from '../../components/Radio';
 import CLEAR from '../../assets/images/icon_clear.png';
 import SelectDropdown from 'react-native-select-dropdown';
 import { Props as LabeledDataType } from '../../components/LabeledData/types';
-import DetailsTable from "../../components/DetailsTable";
+import DetailsTable from '../../components/DetailsTable';
+import { ContentContainer, ContentHeader, ContentBody, ContentFooter } from '../../components/ContentLayout';
 
 const renderIcon = () => {
   return <Image style={styles.arrowDownIcon} source={require('../../assets/images/arrow-down.png')} />;
@@ -248,86 +250,89 @@ const InboundReceiveDetail = () => {
   };
 
   return (
-    <ScrollView keyboardShouldPersistTaps="always" style={styles.container}>
-      <DetailsTable data={detailsData} />
-      <View style={styles.from}>
-        <AsyncModalSelect
-          placeholder="Receiving Location"
-          label="Receiving Location"
-          initValue={state.receiveLocation.label || ''}
-          initialData={state.internalLocation}
-          searchAction={searchInternalLocations}
-          searchActionParams={{ 'parentLocation.id': location.id }}
-          onSelect={(selectedItem: any) => {
-            if (selectedItem) {
-              state.receiveLocation = selectedItem;
-              setState({ ...state });
-            }
-          }}
-        />
-        <InputBox
-          value={state.lotNumber}
-          disabled={false}
-          editable={false}
-          label={'Lot Number'}
-          onChange={onChangeLotNumber}
-        />
-        <SelectDropdown
-          renderDropdownIcon={renderIcon}
-          data={['', 'APPROVED', 'RECALLED', 'ON_HOLD', 'QUARANTINED', 'EXPIRED', 'RESERVED', 'DAMAGED']}
-          dropdownStyle={{ justifyContent: 'flex-start' }}
-          defaultValue={lotStatusCode}
-          buttonTextStyle={styles.lotStatusSelectTextStyle}
-          buttonTextAfterSelection={(selectedItem) => selectedItem}
-          dropdownIconPosition={'right'}
-          defaultValueByIndex={0}
-          buttonStyle={styles.lotStatusSelectStyle}
-          rowTextForSelection={(item) => item}
-          onSelect={(selectedItem, index) => {
-            setLotStatusCode(index === 0 ? '' : selectedItem);
-          }}
-        />
-        <View style={styles.datePickerContainer}>
-          <DatePicker
-            style={styles.datePicker}
-            date={state.expirationDate}
-            mode="date"
-            placeholder="Expiration Date"
-            format="MM/DD/YYYY"
-            confirmBtnText="Confirm"
-            cancelBtnText="Cancel"
-            customStyles={styles.datePickerCustomStyle}
-            onDateChange={(date: any) => {
-              setState({ ...state, expirationDate: date });
+    <ContentContainer>
+      <ContentHeader>
+        <DetailsTable data={detailsData} />
+      </ContentHeader>
+      <ContentBody>
+        <View style={margin.MT3}>
+          <AsyncModalSelect
+            placeholder="Receiving Location"
+            label="Receiving Location"
+            initValue={state.receiveLocation.label || ''}
+            initialData={state.internalLocation}
+            searchAction={searchInternalLocations}
+            searchActionParams={{ 'parentLocation.id': location.id }}
+            onSelect={(selectedItem: any) => {
+              if (selectedItem) {
+                state.receiveLocation = selectedItem;
+                setState({ ...state });
+              }
             }}
           />
-          {state.expirationDate ? (
-            <TouchableOpacity onPress={clearSelection}>
-              <Image source={CLEAR} style={styles.imageIcon} />
-            </TouchableOpacity>
-          ) : null}
-        </View>
-        <View style={styles.inputSpinner}>
-          <InputSpinner title={'Quantity to Receive'} value={state.quantityToReceive} setValue={onChangeQuantity} />
+          <InputBox
+            value={state.lotNumber}
+            disabled={false}
+            editable={false}
+            label={'Lot Number'}
+            onChange={onChangeLotNumber}
+          />
+          <SelectDropdown
+            renderDropdownIcon={renderIcon}
+            data={['', 'APPROVED', 'RECALLED', 'ON_HOLD', 'QUARANTINED', 'EXPIRED', 'RESERVED', 'DAMAGED']}
+            defaultValue={lotStatusCode}
+            buttonTextStyle={styles.lotStatusSelectTextStyle}
+            buttonTextAfterSelection={(selectedItem) => selectedItem}
+            dropdownIconPosition={'right'}
+            defaultValueByIndex={0}
+            buttonStyle={styles.lotStatusSelectStyle}
+            rowTextForSelection={(item) => item}
+            onSelect={(selectedItem, index) => {
+              setLotStatusCode(index === 0 ? '' : selectedItem);
+            }}
+          />
+          <View style={styles.datePickerContainer}>
+            <DatePicker
+              style={styles.datePicker}
+              date={state.expirationDate}
+              mode="date"
+              placeholder="Expiration Date"
+              format="MM/DD/YYYY"
+              confirmBtnText="Confirm"
+              cancelBtnText="Cancel"
+              customStyles={styles.datePickerCustomStyle}
+              onDateChange={(date: any) => {
+                setState({ ...state, expirationDate: date });
+              }}
+            />
+            {state.expirationDate && (
+              <TouchableOpacity onPress={clearSelection}>
+                <Image source={CLEAR} style={styles.imageIcon} />
+              </TouchableOpacity>
+            )}
+          </View>
+          <View style={common.containerCenter}>
+            <InputSpinner title={'Quantity to Receive'} value={state.quantityToReceive} setValue={onChangeQuantity} />
+          </View>
+          <InputBox
+            value={state.comments}
+            disabled={false}
+            editable={false}
+            label={'Comments'}
+            onChange={onChangeComment}
+          />
         </View>
-        <InputBox
-          value={state.comments}
-          disabled={false}
-          editable={false}
-          label={'Comments'}
-          onChange={onChangeComment}
+        <Radio
+          title={'Cancel remaining quantity for this item'}
+          setChecked={setCancelRemaining}
+          checked={cancelRemaining}
+          disabled={Number(state.quantityToReceive) >= Number(shipmentItem.quantityRemaining)}
         />
-      </View>
-      <Radio
-        title={'Cancel remaining quantity for this item'}
-        setChecked={setCancelRemaining}
-        checked={cancelRemaining}
-        disabled={Number(state.quantityToReceive) >= Number(shipmentItem.quantityRemaining)}
-      />
-      <View style={styles.bottom}>
+      </ContentBody>
+      <ContentFooter>
         <Button title="Receive" disabled={false} onPress={onReceive} />
-      </View>
-    </ScrollView>
+      </ContentFooter>
+    </ContentContainer>
   );
 };
 
diff --git a/src/screens/InboundReceiveDetail/styles.ts b/src/screens/InboundReceiveDetail/styles.ts
index 2554d135..cd3a2a7a 100644
--- a/src/screens/InboundReceiveDetail/styles.ts
+++ b/src/screens/InboundReceiveDetail/styles.ts
@@ -1,71 +1,11 @@
 import { StyleSheet } from 'react-native';
-import { colors, ratio } from '../../constants';
 import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 20
-  },
   arrowDownIcon: {
     height: 15,
     width: 15
   },
-  select: {
-    width: '100%',
-    borderWidth: 2,
-    height: 40,
-    alignSelf: 'center',
-    borderColor: 'grey',
-    backgroundColor: 'white',
-    borderRadius: 5,
-    marginTop: 10
-  },
-  from: {
-    flex: 1,
-    marginTop: 10
-  },
-  bottom: {
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: ratio.height * 100,
-    marginBottom: 10
-  },
-  itemView: {
-    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
-  },
-  value: {
-    fontSize: 12,
-    color: Theme.colors.text,
-    width: '90%'
-  },
-  inputSpinner: {
-    flex: 1,
-    alignItems: 'center'
-  },
   datePickerContainer: {
     marginVertical: 5
   },
diff --git a/src/screens/InternalLocationDetails/index.tsx b/src/screens/InternalLocationDetails/index.tsx
index 6f15eee6..4bc3628e 100644
--- a/src/screens/InternalLocationDetails/index.tsx
+++ b/src/screens/InternalLocationDetails/index.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable complexity */
 import React, { useEffect, useState } from 'react';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { Text, TouchableOpacity } from 'react-native';
 import styles from './styles';
+import { margin } from '../../assets/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import showPopup from '../../components/Popup';
@@ -11,6 +12,9 @@ import { Card } from 'react-native-paper';
 import { RootState } from '../../redux/reducers';
 import Button from '../../components/Button';
 import PrintModal from '../../components/PrintModal';
+import DetailsTable from '../../components/DetailsTable';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import { ContentContainer, ContentFooter, ContentBody, ContentHeader } from '../../components/ContentLayout';
 
 const InternalLocationDetails = () => {
   const navigation = useNavigation();
@@ -71,14 +75,6 @@ const InternalLocationDetails = () => {
     dispatch(getInternalLocationDetails(id, location.id, actionLocationCallback));
   };
 
-  const RenderItem = ({ title, subTitle }: any) => {
-    return (
-      <View style={styles.columnItem}>
-        <Text style={styles.label}>{title}</Text>
-        <Text style={styles.value}>{subTitle}</Text>
-      </View>
-    );
-  };
   const navigateToDetails = (item: any) => {
     const stockItem = {
       product: {
@@ -138,51 +134,52 @@ const InternalLocationDetails = () => {
     setState({ ...state, visible: false });
   };
 
-  const renderListItem = (item: any, index: any) => (
-    <TouchableOpacity key={index} style={styles.itemView} onPress={() => navigateToDetails(item)}>
-      <Card>
-        <Card.Content>
-          <View style={styles.rowItem}>
-            <RenderItem title={'Product Code'} subTitle={item['product.productCode']} />
-            <RenderItem title={'Product Name'} subTitle={item['product.name']} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderItem title={'Lot Number'} subTitle={item['inventoryItem.lotNumber'] ?? 'Default'} />
-            <RenderItem title={'Lot Number'} subTitle={item['inventoryItem.expirationDate'] ?? 'Never'} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderItem title={'Bin Location'} subTitle={item['binLocation.name'] ?? 'Default'} />
-            <RenderItem title={'Quantity On Hand'} subTitle={item.quantityOnHand ?? 0} />
-          </View>
-        </Card.Content>
-      </Card>
-    </TouchableOpacity>
-  );
+  const renderListItem = (item: any, index: any) => {
+    const availableItemsData: LabeledDataType[] = [
+      { label: 'Product Code', value: item['product.productCode'] },
+      { label: 'Product Name', value: item['product.name'] },
+      { label: 'Lot Number', value: item['inventoryItem.lotNumber'], defaultValue: 'Default' },
+      { label: 'Lot Number', value: item['inventoryItem.expirationDate'], defaultValue: 'Never' },
+      { label: 'Bin Location', value: item['binLocation.name'], defaultValue: 'Default' },
+      { label: 'Quantity On Hand', value: item.quantityOnHand, defaultValue: '0' }
+    ];
+
+    return (
+      <TouchableOpacity key={index} style={[[margin.MT1, margin.M3]]} onPress={() => navigateToDetails(item)}>
+        <Card>
+          <Card.Content>
+            <DetailsTable data={availableItemsData} />
+          </Card.Content>
+        </Card>
+      </TouchableOpacity>
+    );
+  };
+
+  const renderData: LabeledDataType[] = [
+    { label: 'Bin Location Name', value: state.locationData?.name, defaultValue: '' },
+    { label: 'Location Type', value: state.locationData?.locationType.name, defaultValue: '' },
+    { label: 'Facility Name', value: state.locationData?.parentLocation?.name, defaultValue: '' },
+    { label: 'Zone Name', value: state.locationData?.zoneName, defaultValue: 'N/A' }
+  ];
+
   return (
-    <View style={styles.screenContainer}>
+    <>
       {state.locationData && (
-        <>
-          <View>
+        <ContentContainer>
+          <ContentHeader fixed>
             <Text style={styles.boxHeading}>Details</Text>
-            <View style={styles.rowItem}>
-              <RenderItem title={'Bin Location Name'} subTitle={state.locationData?.name ?? ''} />
-              <RenderItem title={'Location Type'} subTitle={state.locationData?.locationType.name ?? ''} />
-            </View>
-            <View style={styles.rowItem}>
-              <RenderItem title={'Facility Name'} subTitle={state.locationData?.parentLocation?.name ?? ''} />
-              <RenderItem title={'Zone Name'} subTitle={state.locationData?.zoneName ?? 'N/A'} />
-            </View>
+            <DetailsTable data={renderData} style={[margin.ML3, margin.MR3]} />
             <Text style={styles.boxHeading}>Available Items ({state.locationData.availableItems.length ?? '0'})</Text>
-          </View>
-          <ScrollView>
+          </ContentHeader>
+          <ContentBody>
             {state.locationData?.availableItems?.map((item: any, index: any) => {
               return renderListItem(item, index);
             })}
-            <View style={styles.bottom}>
-              <Button title={'Print Barcode Label'} onPress={handleClick} />
-            </View>
-          </ScrollView>
-        </>
+          </ContentBody>
+          <ContentFooter>
+            <Button title={'Print Barcode Label'} onPress={handleClick} />
+          </ContentFooter>
+        </ContentContainer>
       )}
       <PrintModal
         visible={state.visible}
@@ -191,7 +188,7 @@ const InternalLocationDetails = () => {
         product={state.locationDetails?.product}
         defaultBarcodeLabelUrl={state.locationDetails?.defaultBarcodeLabelUrl}
       />
-    </View>
+    </>
   );
 };
 
diff --git a/src/screens/InternalLocationDetails/styles.ts b/src/screens/InternalLocationDetails/styles.ts
index 593e62a8..84843526 100644
--- a/src/screens/InternalLocationDetails/styles.ts
+++ b/src/screens/InternalLocationDetails/styles.ts
@@ -1,65 +1,12 @@
 import { StyleSheet } from 'react-native';
 import Theme from '../../utils/Theme';
-import { ratio } from '../../constants';
 
 export default StyleSheet.create({
-  screenContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1
-  },
-  bottom: {
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: ratio.height * 100
-  },
   boxHeading: {
     fontSize: 15,
     color: Theme.colors.text,
     fontWeight: 'bold',
     marginTop: 8,
     marginStart: 10
-  },
-  countLabelAndIconContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    flex: 0,
-    alignItems: 'center'
-  },
-  countLabel: {
-    fontWeight: 'bold',
-    fontSize: 16,
-    marginStart: 4
-  },
-  itemView: {
-    marginStart: 10,
-    marginEnd: 10,
-    marginTop: 5,
-    marginBottom: 10
-  },
-  rowItem: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.background,
-    marginTop: 1,
-    padding: 2,
-    marginStart: 10,
-    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%'
   }
 });
diff --git a/src/screens/Login/index.tsx b/src/screens/Login/index.tsx
index 14a10b28..3c4913da 100644
--- a/src/screens/Login/index.tsx
+++ b/src/screens/Login/index.tsx
@@ -2,44 +2,23 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
 import styles from './styles';
+import { common, margin } from '../../assets/styles';
 import { useDispatch } from 'react-redux';
 import { login } from '../../redux/actions/auth';
 import showPopup from '../../components/Popup';
 import { TextInput } from 'react-native-paper';
 import Button from '../../components/Button';
 import * as NavigationService from '../../NavigationService';
+import { LoginState } from './types';
 
-import { StackNavigationProp } from '@react-navigation/stack';
-import { StackList } from '../../types/navigationTypes';
 // @ts-ignore
 import EYE_SHOW from '../../assets/images/eye_show.png';
 // @ts-ignore
 import EYE_HIDE from '../../assets/images/eye_hide.png';
 
-type ProfileScreenNavigationProp = StackNavigationProp<StackList, 'Login'>;
-
-interface OwnProps {
-  navigation: ProfileScreenNavigationProp;
-}
-
-interface StateProps {
-  //no-op
-}
-
-interface DispatchProps {
-  login: (data: any) => void;
-}
-
-type Props = OwnProps & StateProps & DispatchProps;
-
-interface State {
-  username: string;
-  password: string;
-}
-
 const Login = () => {
   const dispatch = useDispatch();
-  const [state, setState] = useState<any>({
+  const [state, setState] = useState<LoginState>({
     username: '',
     password: '',
     isSeePassword: true
@@ -97,7 +76,7 @@ const Login = () => {
   };
 
   return (
-    <View style={styles.screenContainer}>
+    <View style={[common.containerFlexColumn, common.flex1]}>
       <View style={styles.inputContainer}>
         <TextInput mode="outlined" label={'Username'} placeholder="Username" onChangeText={onUsernameChange} />
         <TextInput
@@ -106,23 +85,12 @@ const Login = () => {
           label={'Password'}
           secureTextEntry={state.isSeePassword}
           right={<TextInput.Icon name={state.isSeePassword ? EYE_SHOW : EYE_HIDE} onPress={onPasswordClick} />}
-          style={{
-            marginTop: 8
-          }}
+          style={margin.MT2}
           onChangeText={onPasswordChange}
         />
-        <Button
-          title="Login"
-          style={{
-            marginTop: 8
-          }}
-          onPress={onLoginPress}
-        />
+        <Button title="Login" onPress={onLoginPress} />
         <Button
           title="Settings"
-          style={{
-            marginTop: 8
-          }}
           onPress={() => {
             NavigationService.navigate('Settings');
           }}
diff --git a/src/screens/Login/styles.ts b/src/screens/Login/styles.ts
index 1cda82cd..8c8ace52 100644
--- a/src/screens/Login/styles.ts
+++ b/src/screens/Login/styles.ts
@@ -1,11 +1,6 @@
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-  screenContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1
-  },
   inputContainer: {
     display: 'flex',
     flex: 1,
diff --git a/src/screens/Login/types.ts b/src/screens/Login/types.ts
new file mode 100644
index 00000000..cc9cebf4
--- /dev/null
+++ b/src/screens/Login/types.ts
@@ -0,0 +1,5 @@
+export interface LoginState {
+  username: string;
+  password: string;
+  isSeePassword: boolean;
+}
diff --git a/src/screens/Lpn/Create.tsx b/src/screens/Lpn/Create.tsx
index bc5fd2b0..400298c9 100644
--- a/src/screens/Lpn/Create.tsx
+++ b/src/screens/Lpn/Create.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
 import showPopup from '../../components/Popup';
 import { saveAndUpdateLpn } from '../../redux/actions/lpn';
-import { DispatchProps, Props } from './Types';
+import { DispatchProps, Props } from './types';
 import { connect } from 'react-redux';
-import { ScrollView, Text, ToastAndroid, View } from 'react-native';
+import { Text, ToastAndroid } from 'react-native';
 import { Order } from '../../data/order/Order';
-import styles from './styles';
+import { margin, typography } from '../../assets/styles';
 import InputBox from '../../components/InputBox';
 import Button from '../../components/Button';
 import { getShipmentOrigin } from '../../redux/actions/packing';
 import { RootState } from '../../redux/reducers';
 import AutoInputInternalLocation from '../../components/AutoInputInternalLocation';
+import { ContentContainer, ContentFooter, ContentBody } from '../../components/ContentLayout';
 
 export interface State {
   stockMovements: Order[] | null;
@@ -117,9 +118,9 @@ class CreateLpn extends React.Component<Props, State> {
 
   render() {
     return (
-      <ScrollView style={styles.container}>
-        <View style={styles.from}>
-          <Text style={styles.label}>Shipment Number</Text>
+      <ContentContainer style={margin.M5}>
+        <ContentBody>
+          <Text style={typography.label}>Shipment Number</Text>
           <AutoInputInternalLocation
             label="AutoInputInternalLocation"
             data={this.state.stockMovementList}
@@ -138,11 +139,11 @@ class CreateLpn extends React.Component<Props, State> {
             label={'Container Number'}
             onChange={this.onChangeContainerNumber}
           />
-        </View>
-        <View style={styles.bottom}>
+        </ContentBody>
+        <ContentFooter>
           <Button title="Submit" onPress={this.saveLpn} disabled={false} />
-        </View>
-      </ScrollView>
+        </ContentFooter>
+      </ContentContainer>
     );
   }
 }
diff --git a/src/screens/Lpn/styles.ts b/src/screens/Lpn/styles.ts
deleted file mode 100644
index 38241d12..00000000
--- a/src/screens/Lpn/styles.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { colors, ratio } from '../../constants';
-import Theme from '../../utils/Theme';
-
-export default StyleSheet.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 20
-  },
-  select: {
-    width: '100%',
-    borderWidth: 2,
-    height: 40,
-    alignSelf: 'center',
-    borderColor: 'grey',
-    backgroundColor: 'white',
-    borderRadius: 5,
-    marginTop: 10
-  },
-  arrowDownIcon: {
-    height: 15,
-    width: 15
-  },
-  from: {
-    flex: 1
-  },
-  row: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    height: 40,
-    alignSelf: 'center',
-    alignItems: 'center',
-    marginTop: 20
-  },
-  input: {
-    flex: 1,
-    marginTop: 5,
-    height: 40,
-    marginRight: 10,
-    borderColor: 'grey'
-  },
-  bottom: {
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 20,
-    marginTop: 8,
-    height: ratio.height * 100
-  },
-  button: {
-    width: '80%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: colors.headerColor,
-    borderRadius: 5,
-    padding: 15,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 1,
-    shadowRadius: 5,
-    elevation: 10
-  },
-  label: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  }
-});
diff --git a/src/screens/Lpn/Types.ts b/src/screens/Lpn/types.ts
similarity index 100%
rename from src/screens/Lpn/Types.ts
rename to src/screens/Lpn/types.ts
diff --git a/src/screens/LpnDetail/Index.tsx b/src/screens/LpnDetail/index.tsx
similarity index 50%
rename from src/screens/LpnDetail/Index.tsx
rename to src/screens/LpnDetail/index.tsx
index 036d31a5..9f744b9e 100644
--- a/src/screens/LpnDetail/Index.tsx
+++ b/src/screens/LpnDetail/index.tsx
@@ -1,17 +1,21 @@
 import React from 'react';
-import { DispatchProps, Props } from './Types';
+import { DispatchProps, Props } from './types';
 import { Container } from '../../data/container/Container';
-import { FlatList, ListRenderItemInfo, ScrollView, Text, Image, TouchableOpacity, View } from 'react-native';
+import { FlatList, ListRenderItemInfo, Text, Image, TouchableOpacity, View } from 'react-native';
 import { ContainerShipmentItem } from '../../data/container/ContainerShipmentItem';
 import { fetchContainer, getContainer, updateContainerStatus } from '../../redux/actions/lpn';
 import { connect } from 'react-redux';
 import styles from './styles';
+import { margin, typography } from '../../assets/styles';
 import Button from '../../components/Button';
 import showPopup from '../../components/Popup';
 import PrintModal from '../../components/PrintModal';
 import EmptyView from '../../components/EmptyView';
 import SelectDropdown from 'react-native-select-dropdown';
 import { Card } from 'react-native-paper';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import DetailsTable from '../../components/DetailsTable';
+import { ContentContainer, ContentHeader, ContentFooter, ContentBody } from '../../components/ContentLayout';
 
 const containerStatuses = ['OPEN', 'PACKING', 'PACKED', 'LOADING', 'LOADED', 'MISSING'];
 
@@ -33,6 +37,7 @@ class LpnDetail extends React.Component<Props, State> {
       visible: false,
       containerDetails: null
     };
+    this.renderShipmentItems = this.renderShipmentItems.bind(this);
   }
   updateContainerStatus = (id: string, status: string) => {
     if (!id) {
@@ -123,93 +128,64 @@ class LpnDetail extends React.Component<Props, State> {
     this.props.navigation.navigate('ShipmentDetails', { item: listRenderItemInfo.item });
   };
 
+  renderShipmentItems(shipmentItem: ListRenderItemInfo<ContainerShipmentItem>) {
+    const shipmentItemsData: LabeledDataType[] = [
+      { label: 'Product Code', value: shipmentItem.item?.inventoryItem?.product?.productCode },
+      { label: 'Product', value: shipmentItem.item?.inventoryItem?.product?.name },
+      { label: 'Shipment Number', value: shipmentItem.item.shipment.shipmentNumber },
+      { label: 'Quantity', value: shipmentItem.item.quantity }
+    ];
+
+    return (
+      <TouchableOpacity style={styles.listItemContainer} onPress={() => this.onTapped(shipmentItem)}>
+        <Card>
+          <Card.Content>
+            <DetailsTable data={shipmentItemsData} />
+          </Card.Content>
+        </Card>
+      </TouchableOpacity>
+    );
+  }
+
   render() {
     return (
-      <ScrollView style={styles.contentContainer}>
-        <View>
-          <View style={styles.row}>
-            <View style={styles.col50}>
-              <Text style={styles.label}>Name</Text>
-              <Text style={styles.value}>{this.state.container?.name}</Text>
-            </View>
-            <View style={styles.col50}>
-              <Text style={styles.label}>Container Number</Text>
-              <Text style={styles.value}>{this.state.container?.containerNumber}</Text>
-            </View>
-          </View>
-          <View style={styles.row}>
-            <View style={styles.col50}>
-              <Text style={styles.label}>Container Type</Text>
-              <Text style={styles.value}>{this.state.container?.containerType?.name}</Text>
-            </View>
-            <View style={styles.col50}>
-              <Text style={styles.label}>Number of Items</Text>
-              <Text style={styles.value}>{this.state.container?.shipmentItems?.length}</Text>
-            </View>
-          </View>
-          <View style={styles.row} />
-            <View style={styles.col100}>
-              <Text style={styles.label}>{'Status'}</Text>
-              <SelectDropdown
-                data={containerStatuses}
-                defaultValue={this.state.container?.containerStatus?.id}
-                renderDropdownIcon={renderIcon}
-                buttonStyle={styles.select}
-                buttonTextAfterSelection={(selectedItem, index) => selectedItem}
-                rowTextForSelection={(item, index) => item}
-                onSelect={(selectedItem, index) => {
-                  const { id } = this.props.route.params;
-                  this.updateContainerStatus(id, selectedItem);
-                }}
-              />
-            </View>
-          </View>
-          <View style={styles.row}>
-            <View style={styles.col100}>
-              <Text style={styles.label}>{'Items'}</Text>
-            </View>
-          </View>
-          <View style={styles.row}>
-            <View style={styles.col100}>
-              <FlatList
-                data={this.state.container?.shipmentItems}
-                ListEmptyComponent={<EmptyView title="LPN Details" description="There are no items" isRefresh={false} />}
-                renderItem={(shipmentItem: ListRenderItemInfo<ContainerShipmentItem>) => (
-                  <TouchableOpacity style={styles.listItemContainer} onPress={() => this.onTapped(shipmentItem)}>
-                    <Card >
-                      <Card.Content>
-                        <View style={styles.row}>
-                          <View style={styles.col50}>
-                            <Text style={styles.label}>Product Code</Text>
-                            <Text style={styles.value}>{shipmentItem.item?.inventoryItem?.product?.productCode}</Text>
-                          </View>
-                          <View style={styles.col50}>
-                            <Text style={styles.label}>Product</Text>
-                            <Text style={styles.value}>{shipmentItem.item?.inventoryItem?.product?.name}</Text>
-                          </View>
-                        </View>
-                        <View style={styles.row}>
-                          <View style={styles.col50}>
-                            <Text style={styles.label}>Shipment Number</Text>
-                            <Text style={styles.value}>{shipmentItem.item.shipment.shipmentNumber}</Text>
-                          </View>
-                          <View style={styles.col50}>
-                            <Text style={styles.label}>Quantity</Text>
-                            <Text style={styles.value}>{shipmentItem.item.quantity}</Text>
-                          </View>
-                        </View>
-                      </Card.Content>
-                    </Card>
-                  </TouchableOpacity>
-                )}
-                keyExtractor={(item) => item.id}
-                style={styles.list}
-              />
-            </View>
-          </View>
-          <View style={styles.bottom}>
-            <Button title={'Print Barcode Label'} disabled={false} onPress={this.handleClick} />
+      <ContentContainer>
+        <ContentHeader style={margin.MB1}>
+          <DetailsTable
+            data={[
+              { label: 'Name', value: this.state.container?.name },
+              { label: 'Container Number', value: this.state.container?.containerNumber },
+              { label: 'Container Type', value: this.state.container?.containerType?.name },
+              { label: 'Number of Items', value: this.state.container?.shipmentItems?.length }
+            ]}
+          />
+          <View>
+            <Text style={typography.label}>{'Status'}</Text>
+            <SelectDropdown
+              data={containerStatuses}
+              defaultValue={this.state.container?.containerStatus?.id}
+              renderDropdownIcon={renderIcon}
+              buttonStyle={styles.select}
+              buttonTextAfterSelection={(selectedItem) => selectedItem}
+              rowTextForSelection={(item) => item}
+              onSelect={(selectedItem) => {
+                const { id } = this.props.route.params;
+                this.updateContainerStatus(id, selectedItem);
+              }}
+            />
           </View>
+        </ContentHeader>
+        <ContentBody>
+          <Text style={typography.label}>{'Items'}</Text>
+          <FlatList
+            data={this.state.container?.shipmentItems}
+            ListEmptyComponent={<EmptyView title="LPN Details" description="There are no items" isRefresh={false} />}
+            renderItem={this.renderShipmentItems}
+            keyExtractor={(item) => item.id}
+          />
+        </ContentBody>
+        <ContentFooter>
+          <Button title={'Print Barcode Label'} disabled={false} onPress={this.handleClick} />
           <PrintModal
             visible={this.state.visible}
             closeModal={this.closeModal}
@@ -217,7 +193,8 @@ class LpnDetail extends React.Component<Props, State> {
             product={this.state.containerDetails?.product}
             defaultBarcodeLabelUrl={this.state.containerDetails?.defaultBarcodeLabelUrl}
           />
-      </ScrollView>
+        </ContentFooter>
+      </ContentContainer>
     );
   }
 }
diff --git a/src/screens/LpnDetail/styles.ts b/src/screens/LpnDetail/styles.ts
index 7113d77b..33635619 100644
--- a/src/screens/LpnDetail/styles.ts
+++ b/src/screens/LpnDetail/styles.ts
@@ -1,23 +1,7 @@
 import { StyleSheet } from 'react-native';
 import Theme from '../../utils/Theme';
-import { ratio } from '../../constants';
 
 export default StyleSheet.create({
-  contentContainer: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    padding: 8
-  },
-  bottom: {
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: ratio.height * 100
-  },
-  list: {
-    width: '100%'
-  },
   listItemContainer: {
     display: 'flex',
     flexDirection: 'column',
@@ -25,68 +9,8 @@ export default StyleSheet.create({
     borderRadius: Theme.roundness,
     borderColor: Theme.colors.backdrop,
     borderWidth: 1,
-    margin: 0,
-    padding: 0,
-    marginTop: 5
-  },
-  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,
-    // borderBottomWidth: 1,
-    marginTop: 1,
-    padding: 2,
-    width: '100%'
-  },
-  col50: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '50%'
-  },
-  col100: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '95%'
-  },
-  label: {
-    fontSize: 12,
-    color: Theme.colors.placeholder
-  },
-  value: {
-    fontSize: 16,
-    color: Theme.colors.text
+    marginVertical: 5,
+    padding: 0
   },
   arrowDownIcon: {
     height: 15,
diff --git a/src/screens/LpnDetail/Types.ts b/src/screens/LpnDetail/types.ts
similarity index 54%
rename from src/screens/LpnDetail/Types.ts
rename to src/screens/LpnDetail/types.ts
index 85abf96f..a2d9c09c 100644
--- a/src/screens/LpnDetail/Types.ts
+++ b/src/screens/LpnDetail/types.ts
@@ -4,18 +4,10 @@ export interface OwnProps {
   navigation: any;
 }
 
-export interface StateProps {
-  //no-op
-}
-
 export interface DispatchProps {
   fetchContainer: (id: string, callback: (data: any) => void) => void;
   getContainer: (id: string, callback: (data: any) => void) => void;
-  updateContainerStatus: (
-    id: string,
-    requestBody: any,
-    callback: (data: any) => void
-  ) => void;
+  updateContainerStatus: (id: string, requestBody: any, callback: (data: any) => void) => void;
 }
 
-export type Props = OwnProps & StateProps & DispatchProps;
+export type Props = OwnProps & DispatchProps;
diff --git a/src/screens/OrderDetails/styles.ts b/src/screens/OrderDetails/styles.ts
deleted file mode 100644
index 4f16b8f6..00000000
--- 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 4d45a302..364a58b5 100644
--- a/src/screens/Orders/OrdersList.tsx
+++ b/src/screens/Orders/OrdersList.tsx
@@ -1,134 +1,41 @@
-/* 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 { common } from '../../assets/styles';
+import { OrderListProps as Props } from './types';
+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={common.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}
+      />
+    )
   );
 }
-
-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 7f85e68f..35277c2d 100644
--- a/src/screens/Orders/index.tsx
+++ b/src/screens/Orders/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable complexity */
 import React from 'react';
-import styles from './styles';
+import { typography, common, margin } from '../../assets/styles';
 import { connect } from 'react-redux';
 import { Text, View } from 'react-native';
 import showPopup from '../../components/Popup';
@@ -9,7 +9,7 @@ import OrdersList from './OrdersList';
 import { Order } from '../../data/order/Order';
 import { getOrdersAction } from '../../redux/actions/orders';
 import { hideScreenLoading, showScreenLoading } from '../../redux/actions/main';
-import BarcodeSearchHeader from '../../components/BarcodeSearchHeader/BarcodeSearchHeader';
+import BarcodeSearchHeader from '../../components/BarcodeSearchHeader';
 
 class Index extends React.Component<Props, State> {
   constructor(props: Props) {
@@ -80,7 +80,7 @@ class Index extends React.Component<Props, State> {
 
   render() {
     return (
-      <View style={styles.screenContainer}>
+      <View style={[common.containerFlexColumn, common.flex1]}>
         <BarcodeSearchHeader
           placeholder={'Search Orders by Name'}
           resetSearch={() => null}
@@ -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>
-        <View style={styles.content}>
-          <OrdersList
-            orders={this.state.allOrders}
-            onOrderTapped={this.goToOrderDetailsScreen}
-          />
+        <Text style={[typography.label, margin.M1, margin.ML3]}>{`Returned ${this.state.resultCount} results`}</Text>
+        <View style={[common.containerFlexColumn, common.flex1]}>
+          <OrdersList orders={this.state.allOrders} onOrderTapped={this.goToOrderDetailsScreen} />
         </View>
       </View>
     );
diff --git a/src/screens/Orders/styles.ts b/src/screens/Orders/styles.ts
deleted file mode 100644
index 78638ed9..00000000
--- a/src/screens/Orders/styles.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
-
-export default StyleSheet.create({
-  screenContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    zIndex: -1
-  },
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  label: {
-    fontSize: 12,
-    color: Theme.colors.placeholder,
-    marginHorizontal: 5,
-    marginVertical: 2
-  }
-});
diff --git a/src/screens/Orders/types.ts b/src/screens/Orders/types.ts
index 1b688dd7..817f8b07 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/OutboundLoadingContainer/index.tsx b/src/screens/OutboundLoadingContainer/index.tsx
index 9137e4fe..cc7e7d15 100644
--- a/src/screens/OutboundLoadingContainer/index.tsx
+++ b/src/screens/OutboundLoadingContainer/index.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
-import { Alert, ScrollView, ToastAndroid, View } from 'react-native';
+import { ToastAndroid, View } from 'react-native';
 import { useDispatch } from 'react-redux';
-import styles from '../OutboundStockDetails/styles';
 import { updateContainerStatus } from '../../redux/actions/lpn';
 import OrderDetailsSection from '../OutboundLoadingDetails/OrderDetailsSection';
 import InputBox from '../../components/InputBox';
@@ -11,6 +10,7 @@ import TICK from '../../assets/images/tick.png';
 import SCAN from '../../assets/images/scan.jpg';
 import CLEAR from '../../assets/images/icon_clear.png';
 import Button from '../../components/Button';
+import { ContentContainer, ContentHeader, ContentBody, ContentFooter } from '../../components/ContentLayout';
 
 // LPN loading
 const OutboundLoadingContainer = () => {
@@ -120,9 +120,11 @@ const OutboundLoadingContainer = () => {
   };
 
   return (
-    <ScrollView style={styles.screenContainer}>
-      <View style={styles.contentContainer}>
+    <ContentContainer>
+      <ContentHeader>
         <OrderDetailsSection shipment={shipment} />
+      </ContentHeader>
+      <ContentBody>
         <View>
           <InputBox
             value={scannedLPN}
@@ -171,9 +173,11 @@ const OutboundLoadingContainer = () => {
             })
           }}
         />
+      </ContentBody>
+      <ContentFooter>
         <Button title="Load Container" onPress={() => loadContainer()} disabled={false} />
-      </View>
-    </ScrollView>
+      </ContentFooter>
+    </ContentContainer>
   )
 }
 
diff --git a/src/screens/OutboundLoadingDetails/OrderDetailsSection.tsx b/src/screens/OutboundLoadingDetails/OrderDetailsSection.tsx
index 6f8c81fc..e4a3b860 100644
--- a/src/screens/OutboundLoadingDetails/OrderDetailsSection.tsx
+++ b/src/screens/OutboundLoadingDetails/OrderDetailsSection.tsx
@@ -1,45 +1,25 @@
 import React from 'react';
-import { Text, View } from 'react-native';
-import styles from '../OutboundStockDetails/styles';
 import { Shipment } from '../../data/container/Shipment';
+import DetailsTable from '../../components/DetailsTable';
 
 interface Props {
   shipment: Shipment | null;
 }
 
 const OrderDetailsSection = (props: Props) => (
-  <View>
-    <View style={styles.row}>
-      <View style={styles.col50}>
-        <Text style={styles.label}>Shipment Number</Text>
-        <Text style={styles.value}>{props?.shipment?.shipmentNumber}</Text>
-      </View>
-      <View style={styles.col50}>
-        <Text style={styles.label}>Status</Text>
-        <Text style={styles.value}>{props?.shipment?.displayStatus} ({props?.shipment?.loadingStatusDetails?.statusMessage} containers)</Text>
-      </View>
-    </View>
-    <View style={styles.row}>
-      <View style={styles.col50}>
-        <Text style={styles.label}>Destination</Text>
-        <Text style={styles.value}>{props?.shipment?.destination.name}</Text>
-      </View>
-      <View style={styles.col50}>
-        <Text style={styles.label}>Expected Shipping Date</Text>
-        <Text style={styles.value}>{props?.shipment?.expectedShippingDate}</Text>
-      </View>
-    </View>
-    <View style={styles.row}>
-      <View style={styles.col50}>
-        <Text style={styles.label}>Loading Location</Text>
-        <Text style={styles.value}>{props?.shipment?.loadingLocation}</Text>
-      </View>
-      <View style={styles.col50}>
-        <Text style={styles.label}>Expected Delivery Date</Text>
-        <Text style={styles.value}>{props?.shipment?.expectedDeliveryDate}</Text>
-      </View>
-    </View>
-  </View>
-)
+  <DetailsTable
+    data={[
+      { label: 'Shipment Number', value: props?.shipment?.shipmentNumber },
+      {
+        label: 'Status',
+        value: `${props?.shipment?.displayStatus} (${props?.shipment?.loadingStatusDetails?.statusMessage} containers)`
+      },
+      { label: 'Destination', value: props?.shipment?.destination.name },
+      { label: 'Expected Shipping Date', value: props?.shipment?.expectedShippingDate },
+      { label: 'Loading Location', value: props?.shipment?.loadingLocation },
+      { label: 'Expected Delivery Date', value: props?.shipment?.expectedDeliveryDate }
+    ]}
+  />
+);
 
 export default OrderDetailsSection;
diff --git a/src/screens/OutboundLoadingDetails/index.tsx b/src/screens/OutboundLoadingDetails/index.tsx
index df1eca5a..4b5d0f51 100644
--- a/src/screens/OutboundLoadingDetails/index.tsx
+++ b/src/screens/OutboundLoadingDetails/index.tsx
@@ -1,19 +1,21 @@
 import { DispatchProps, Props, State } from '../OutboundStockDetails/types';
 import React from 'react';
-import {Alert, FlatList, ListRenderItemInfo, Text, View} from 'react-native';
+import { Alert, FlatList, ListRenderItemInfo } from 'react-native';
 import { connect } from 'react-redux';
 import { hideScreenLoading, showScreenLoading } from '../../redux/actions/main';
 import { RootState } from '../../redux/reducers';
-import styles from '../OutboundStockDetails/styles';
 import { getShipment } from '../../redux/actions/packing';
-import OrderDetailsSection from "./OrderDetailsSection";
-import EmptyView from "../../components/EmptyView";
-import { Shipment, Container } from "../../data/container/Shipment";
-import {Card} from "react-native-paper";
-import {LayoutStyle} from "../../assets/styles";
-import _ from "lodash";
-import InputBox from "../../components/InputBox";
-import showPopup from "../../components/Popup";
+import OrderDetailsSection from './OrderDetailsSection';
+import EmptyView from '../../components/EmptyView';
+import { Shipment, Container } from '../../data/container/Shipment';
+import { Card } from 'react-native-paper';
+import { common } from '../../assets/styles';
+import _ from 'lodash';
+import InputBox from '../../components/InputBox';
+import showPopup from '../../components/Popup';
+import DetailsTable from '../../components/DetailsTable';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import { ContentContainer, ContentBody, ContentHeader } from '../../components/ContentLayout';
 
 // Shipment loading
 class OutboundLoadingDetails extends React.Component<Props, State> {
@@ -22,8 +24,9 @@ class OutboundLoadingDetails extends React.Component<Props, State> {
     this.state = {
       error: null,
       shipment: null,
-      scannedContainer: '',
+      scannedContainer: ''
     };
+    this.renderAvailableContainers = this.renderAvailableContainers.bind(this);
   }
 
   componentDidMount() {
@@ -45,17 +48,19 @@ class OutboundLoadingDetails extends React.Component<Props, State> {
           'All containers are loaded', // title
           'What do you want to do now?', // message
           [
-            { // button list
+            {
+              // button list
               text: 'See the details',
               onPress: () => null
             },
             {
               text: 'Go to the loading list',
               onPress: () => this.props.navigation.navigate('OutboundLoadingList')
-            }],
+            }
+          ],
           {
             cancelable: false
-          },
+          }
         );
       }
 
@@ -83,24 +88,29 @@ class OutboundLoadingDetails extends React.Component<Props, State> {
   };
 
   findMatchingContainer = (searchTerm: string) => {
-    return _.find(this.state.shipment?.availableContainers, (container: Container) => (
-      container?.name?.toLowerCase() === searchTerm?.toLowerCase() ||
-      container?.containerNumber?.toLowerCase() === searchTerm?.toLowerCase()
-    ));
-  }
+    return _.find(
+      this.state.shipment?.availableContainers,
+      (container: Container) =>
+        container?.name?.toLowerCase() === searchTerm?.toLowerCase() ||
+        container?.containerNumber?.toLowerCase() === searchTerm?.toLowerCase()
+    );
+  };
 
   onContainerScan = (value: string) => {
     this.setState({ scannedContainer: value }, () => {
       if (value) {
         const matchingContainer = this.findMatchingContainer(value);
         if (matchingContainer) {
-          this.setState({
-            scannedContainer: '' // reset scan value before redirecting
-          }, () => this.showLoadingLPNScreen(matchingContainer, this.state.shipment, true));
+          this.setState(
+            {
+              scannedContainer: '' // reset scan value before redirecting
+            },
+            () => this.showLoadingLPNScreen(matchingContainer, this.state.shipment, true)
+          );
         }
       }
     });
-  }
+  };
 
   onContainerScanEnd = (value: string) => {
     if (value) {
@@ -109,20 +119,42 @@ class OutboundLoadingDetails extends React.Component<Props, State> {
         this.showLoadingLPNScreen(matchingContainer, this.state.shipment, true);
       } else {
         showPopup({
-          message: `The LPN: ${value} is not for this order`,
+          message: `The LPN: ${value} is not for this order`
         });
         this.setState({ scannedContainer: '' });
       }
     }
+  };
+
+  renderAvailableContainers(container: ListRenderItemInfo<Container>) {
+    const renderData: LabeledDataType[] = [
+      { label: 'Container Name', value: container.item?.name },
+      { label: 'Container Number', value: container.item?.containerNumber },
+      { label: 'Container Type', value: container.item?.containerType?.name },
+      { label: 'Container Status', value: container.item?.status }
+    ];
+
+    return (
+      <Card
+        style={common.listItemContainer}
+        onPress={() => this.showLoadingLPNScreen(container.item, this.state.shipment)}
+      >
+        <Card.Content>
+          <DetailsTable data={renderData} />
+        </Card.Content>
+      </Card>
+    );
   }
 
   render() {
     return (
-      <View style={styles.screenContainer}>
-        <View style={styles.contentContainer}>
+      <ContentContainer>
+        <ContentHeader fixed>
           <OrderDetailsSection shipment={this.state.shipment} />
+        </ContentHeader>
+        <ContentBody>
           <InputBox
-            style={styles.scanSearch}
+            style={common.scanSearch}
             value={this.state.scannedContainer}
             disabled={false}
             editable={false}
@@ -135,40 +167,11 @@ class OutboundLoadingDetails extends React.Component<Props, State> {
             ListEmptyComponent={
               <EmptyView title="Loading" description="There are no containers available" isRefresh={false} />
             }
-            renderItem={(container: ListRenderItemInfo<Container>) => (
-              <Card
-                style={LayoutStyle.listItemContainer}
-                onPress={() => this.showLoadingLPNScreen(container.item, this.state.shipment)}
-              >
-                <Card.Content>
-                  <View style={styles.row}>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Container Name</Text>
-                      <Text style={styles.value}>{container.item?.name}</Text>
-                    </View>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Container Number</Text>
-                      <Text style={styles.value}>{container.item?.containerNumber}</Text>
-                    </View>
-                  </View>
-                  <View style={styles.row}>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Container Type</Text>
-                      <Text style={styles.value}>{container.item?.containerType?.name}</Text>
-                    </View>
-                    <View style={styles.col50}>
-                      <Text style={styles.label}>Container Status</Text>
-                      <Text style={styles.value}>{container.item?.status}</Text>
-                    </View>
-                  </View>
-                </Card.Content>
-              </Card>
-            )}
+            renderItem={this.renderAvailableContainers}
             keyExtractor={(item) => item.id}
-            style={styles.list}
           />
-        </View>
-      </View>
+        </ContentBody>
+      </ContentContainer>
     );
   }
 }
diff --git a/src/screens/OutboundLoadingList/OutboundLoadingList.tsx b/src/screens/OutboundLoadingList/OutboundLoadingList.tsx
index c08fa66d..0d5f1cc9 100644
--- a/src/screens/OutboundLoadingList/OutboundLoadingList.tsx
+++ b/src/screens/OutboundLoadingList/OutboundLoadingList.tsx
@@ -1,19 +1,20 @@
 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';
-import styles from '../OutboundStockList/styles';
+import { common } from '../../assets/styles';
 import { getShipmentsReadyToBePacked } from '../../redux/actions/packing';
 import { Shipment } from '../../data/container/Shipment';
 import showPopup from '../../components/Popup';
 import EmptyView from '../../components/EmptyView';
 import { Card } from 'react-native-paper';
-import { LayoutStyle } from '../../assets/styles';
-import BarcodeSearchHeader from '../../components/BarcodeSearchHeader/BarcodeSearchHeader';
+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 +25,7 @@ class OutboundLoadingList extends React.Component<Props, State> {
       shipments: [],
       filteredShipments: []
     };
+    this.renderDataItem = this.renderDataItem.bind(this);
   }
 
   componentDidMount() {
@@ -81,14 +83,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 +103,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,9 +136,31 @@ 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={common.listItemContainer} onPress={() => this.showLoadingDetailsScreen(shipment.item)}>
+        <Card.Content>
+          <DetailsTable data={renderData} />
+        </Card.Content>
+      </Card>
+    );
+  }
+
   render() {
     return (
-      <View style={styles.screenContainer}>
+      <View style={[common.containerFlexColumn, common.flex1]}>
         <BarcodeSearchHeader
           autoSearch
           placeholder={'Search or scan barcode'}
@@ -141,55 +168,14 @@ class OutboundLoadingList extends React.Component<Props, State> {
           searchBox={false}
           onSearchTermSubmit={this.filterShipments}
         />
-        <View style={styles.contentContainer}>
+        <View style={[common.containerFlexColumn, common.flex1]}>
           <FlatList
             data={this.state.filteredShipments.length > 0 ? this.state.filteredShipments : this.state.shipments}
             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}
           />
         </View>
       </View>
diff --git a/src/screens/OutboundStockDetails/ContainerDetails.tsx b/src/screens/OutboundStockDetails/ContainerDetails.tsx
index e5e85208..f23d3944 100644
--- a/src/screens/OutboundStockDetails/ContainerDetails.tsx
+++ b/src/screens/OutboundStockDetails/ContainerDetails.tsx
@@ -5,37 +5,29 @@ import { SectionList, Text, TouchableOpacity, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { Card } from 'react-native-paper';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
-import { colors } from '../../constants';
+import { colors } from '../../assets/styles';
+import DetailsTable from '../../components/DetailsTable';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
 
 const ContainerDetails = ({ item }: any) => {
   const navigation = useNavigation<any>();
 
-  const RenderData = ({ title, subText }: any): JSX.Element => {
-    return (
-      <View style={styles.columnItem}>
-        <Text style={styles.label}>{title}</Text>
-        <Text style={styles.value}>{subText}</Text>
-      </View>
-    );
-  };
-
   const navigateToOutboundOrderDetails = (item: any) => {
     navigation.navigate('ShipmentDetails', { item: item });
   };
 
   const renderListItem = (item: any, index: any) => {
+    const renderData: LabeledDataType[] = [
+      { label: 'Product Code', value: item.inventoryItem.product?.productCode },
+      { label: 'Product Name', value: item.inventoryItem.product?.name },
+      { label: 'Lot Number', value: item.inventoryItem.lotNumber, defaultValue: 'Default' },
+      { label: 'Quantity to Pack', value: item.quantity }
+    ];
     return (
       <TouchableOpacity key={index} style={styles.itemView} onPress={() => navigateToOutboundOrderDetails(item)}>
         <Card>
           <Card.Content>
-            <View style={styles.rowItem}>
-              <RenderData title={'Product Code'} subText={item.inventoryItem.product?.productCode} />
-              <RenderData title={'Product Name'} subText={item.inventoryItem.product?.name} />
-            </View>
-            <View style={styles.rowItem}>
-              <RenderData title={'Lot Number'} subText={item.inventoryItem.lotNumber ?? 'Default'} />
-              <RenderData title={'Quantity to Pack'} subText={item.quantity} />
-            </View>
+            <DetailsTable data={renderData} />
           </Card.Content>
         </Card>
       </TouchableOpacity>
@@ -48,21 +40,22 @@ const ContainerDetails = ({ item }: any) => {
       renderSectionHeader={({ section: { data, title } }) => (
         <View style={styles.headerContainer}>
           <Text style={styles.headerTitle}>{title}</Text>
-          {data[0].container?.id &&
-          <>
-            <Text>{data[0]?.container?.status ?? ''}</Text>
-            <TouchableOpacity style={styles.infoButton}
-              onPress={() => {
-                navigation.navigate('LpnDetail', {
-                  id: data[0]?.container?.id,
-                  shipmentNumber: data[0]?.shipment?.shipmentNumber
-                });
-              }}
-            >
-              <FontAwesome5 name="chevron-right" size={24} color={colors.headerColor} />
-            </TouchableOpacity>
-          </>
-          }
+          {data[0].container?.id && (
+            <>
+              <Text>{data[0]?.container?.status ?? ''}</Text>
+              <TouchableOpacity
+                style={styles.infoButton}
+                onPress={() => {
+                  navigation.navigate('LpnDetail', {
+                    id: data[0]?.container?.id,
+                    shipmentNumber: data[0]?.shipment?.shipmentNumber
+                  });
+                }}
+              >
+                <FontAwesome5 name="chevron-right" size={24} color={colors.accent} />
+              </TouchableOpacity>
+            </>
+          )}
         </View>
       )}
       sections={item}
diff --git a/src/screens/OutboundStockDetails/index.tsx b/src/screens/OutboundStockDetails/index.tsx
index 20cc6f8e..bc6b0065 100644
--- a/src/screens/OutboundStockDetails/index.tsx
+++ b/src/screens/OutboundStockDetails/index.tsx
@@ -1,6 +1,5 @@
 import { DispatchProps, Props, State } from './types';
 import React from 'react';
-import { ScrollView, Text, View } from 'react-native';
 import { connect } from 'react-redux';
 import { hideScreenLoading, showScreenLoading } from '../../redux/actions/main';
 import { RootState } from '../../redux/reducers';
@@ -13,6 +12,9 @@ import InputBox from '../../components/InputBox';
 import ShipmentItems from '../../data/inbound/ShipmentItems';
 import { Container } from '../../data/container/Shipment';
 import showPopup from '../../components/Popup';
+import DetailsTable from '../../components/DetailsTable';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import { ContentContainer, ContentHeader, ContentFooter, ContentBody } from '../../components/ContentLayout';
 
 // Shipment packing (Packing Order Details)
 class OutboundStockDetails extends React.Component<Props, State> {
@@ -128,45 +130,19 @@ class OutboundStockDetails extends React.Component<Props, State> {
   };
 
   render() {
+    const renderData: LabeledDataType[] = [
+      { label: 'Shipment Number', value: this.state.shipment?.shipmentNumber },
+      { label: 'Status', value: this.state.shipment?.displayStatus },
+      { label: 'Destination', value: this.state.shipment?.destination.name },
+      { label: 'Expected Shipping Date', value: this.state.shipment?.expectedShippingDate },
+      { label: 'Packing Location', value: this.state.shipment?.packingLocation, defaultValue: 'Unassigned' },
+      { label: 'Items Packed', value: this.state.shipment?.packingStatusDetails?.statusMessage }
+    ];
+
     return (
-      <>
-        <ScrollView style={styles.screenContainer}>
-          <View style={styles.contentContainer}>
-            <View style={styles.row}>
-              <View style={styles.col50}>
-                <Text style={styles.label}>Shipment Number</Text>
-                <Text style={styles.value}>{this.state.shipment?.shipmentNumber}</Text>
-              </View>
-              <View style={styles.col50}>
-                <Text style={styles.label}>Status</Text>
-                <Text style={styles.value}>{this.state.shipment?.displayStatus}</Text>
-              </View>
-            </View>
-            <View style={styles.row}>
-              <View style={styles.col50}>
-                <Text style={styles.label}>Destination</Text>
-                <Text style={styles.value}>{this.state.shipment?.destination.name}</Text>
-              </View>
-              <View style={styles.col50}>
-                <Text style={styles.label}>Expected Shipping Date</Text>
-                <Text style={styles.value}>{this.state.shipment?.expectedShippingDate}</Text>
-              </View>
-            </View>
-            <View style={styles.row}>
-              <View style={styles.col50}>
-                <Text style={styles.label}>Packing Location</Text>
-                <Text style={styles.value}>
-                  {this.state.shipment?.packingLocation ?? 'Unassigned'}
-                </Text>
-              </View>
-              <View style={styles.col50}>
-                <Text style={styles.label}>Items Packed</Text>
-                <Text style={styles.value}>
-                  {this.state.shipment?.packingStatusDetails?.statusMessage}
-                </Text>
-              </View>
-            </View>
-          </View>
+      <ContentContainer>
+        <ContentHeader>
+          <DetailsTable data={renderData} />
           <InputBox
             style={styles.scanSearch}
             value={this.state.scannedValue}
@@ -176,9 +152,11 @@ class OutboundStockDetails extends React.Component<Props, State> {
             onChange={this.onScan}
             onEndEdit={this.onScanEnd}
           />
+        </ContentHeader>
+        <ContentBody>
           <ContainerDetails item={this.state.shipmentData?.sectionData ?? []} />
-        </ScrollView>
-        <View style={styles.buttonBar}>
+        </ContentBody>
+        <ContentFooter fixed>
           <Button
             title={'Create LPN'}
             disabled={false}
@@ -189,8 +167,8 @@ class OutboundStockDetails extends React.Component<Props, State> {
               });
             }}
           />
-        </View>
-      </>
+        </ContentFooter>
+      </ContentContainer>
     );
   }
 }
diff --git a/src/screens/OutboundStockDetails/styles.ts b/src/screens/OutboundStockDetails/styles.ts
index 964bbe82..90c244a8 100644
--- a/src/screens/OutboundStockDetails/styles.ts
+++ b/src/screens/OutboundStockDetails/styles.ts
@@ -1,187 +1,11 @@
 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.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: 2,
-    width: '100%'
-  },
-  col50: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '50%'
-  },
   itemView: {
     marginStart: 5,
     marginEnd: 5,
     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: 12,
-    color: Theme.colors.text,
-    width: '90%'
-  },
-  buttonBar: {
-    padding: 1
-  },
   headerTitle: {
     fontWeight: 'normal',
     fontSize: 14,
@@ -203,5 +27,5 @@ export default StyleSheet.create({
   scanSearch: {
     marginHorizontal: 8,
     backgroundColor: 'white'
-  },
+  }
 });
diff --git a/src/screens/OutboundStockList/index.tsx b/src/screens/OutboundStockList/index.tsx
index d055ffcf..afd9dbb6 100644
--- a/src/screens/OutboundStockList/index.tsx
+++ b/src/screens/OutboundStockList/index.tsx
@@ -1,20 +1,21 @@
 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';
-import styles from './styles';
+import { common } from '../../assets/styles';
 import { getShipmentsReadyToBePacked } from '../../redux/actions/packing';
 import { Shipment } from '../../data/container/Shipment';
 import showPopup from '../../components/Popup';
 import EmptyView from '../../components/EmptyView';
 import { Card } from 'react-native-paper';
-import { LayoutStyle } from '../../assets/styles';
-import BarcodeSearchHeader from '../../components/BarcodeSearchHeader/BarcodeSearchHeader';
+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 +26,7 @@ class OutboundStockList extends React.Component<Props, State> {
       shipments: [],
       filteredShipments: []
     };
+    this.renderPackingList = this.renderPackingList.bind(this);
   }
 
   componentDidMount() {
@@ -96,8 +98,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 +109,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,9 +150,29 @@ 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={common.listItemContainer} onPress={() => this.showShipmentReadyToPackScreen(shipment.item)}>
+        <Card.Content>
+          <DetailsTable data={renderData} />
+        </Card.Content>
+      </Card>
+    );
+  }
+
+
   render() {
     return (
-      <View style={styles.screenContainer}>
+      <View style={[common.containerFlexColumn, common.flex1]}>
         <BarcodeSearchHeader
           autoSearch
           placeholder={'Search or scan barcode'}
@@ -150,53 +180,14 @@ class OutboundStockList extends React.Component<Props, State> {
           searchBox={false}
           onSearchTermSubmit={this.filterShipments}
         />
-        <View style={styles.contentContainer}>
+        <View style={[common.containerFlexColumn, common.flex1]}>
           <FlatList
             data={this.state.filteredShipments.length > 0 ? this.state.filteredShipments : this.state.shipments}
             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}
           />
         </View>
       </View>
diff --git a/src/screens/OutboundStockList/styles.ts b/src/screens/OutboundStockList/styles.ts
deleted file mode 100644
index adabe9a0..00000000
--- a/src/screens/OutboundStockList/styles.ts
+++ /dev/null
@@ -1,161 +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: 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/PackingLocationPage/index.tsx b/src/screens/PackingLocationPage/index.tsx
index 35c20407..0d1409b8 100644
--- a/src/screens/PackingLocationPage/index.tsx
+++ b/src/screens/PackingLocationPage/index.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import styles from './styles';
-import {ScrollView, Text, ToastAndroid, View} from 'react-native';
+import { Text, ToastAndroid } from 'react-native';
 import Button from '../../components/Button';
 import showPopup from '../../components/Popup';
 import { useNavigation, useRoute } from '@react-navigation/native';
@@ -9,10 +8,11 @@ import { submitPackingLocation } from '../../redux/actions/orders';
 import { searchInternalLocations } from '../../redux/actions/locations';
 import { RootState } from '../../redux/reducers';
 import AsyncModalSelect from '../../components/AsyncModalSelect';
-import InputBox from "../../components/InputBox";
-import TICK from "../../assets/images/tick.png";
-import SCAN from "../../assets/images/scan.jpg";
-import CLEAR from "../../assets/images/icon_clear.png";
+import InputBox from '../../components/InputBox';
+import TICK from '../../assets/images/tick.png';
+import SCAN from '../../assets/images/scan.jpg';
+import CLEAR from '../../assets/images/icon_clear.png';
+import { ContentContainer, ContentBody, ContentHeader, ContentFooter } from '../../components/ContentLayout';
 
 const PackingLocationPage = () => {
   const dispatch = useDispatch();
@@ -39,26 +39,26 @@ const PackingLocationPage = () => {
 
     if (!packingLocation && !scannedPackingLocation) {
       errorTitle = 'Missing packing location!';
-      errorMessage = `Please select proper packing location.`;
+      errorMessage = 'Please select proper packing location.';
     }
 
     if (errorTitle !== '') {
       showPopup({
         title: errorTitle,
-        message: errorMessage,
+        message: errorMessage
       });
       return Promise.resolve(null);
     }
 
     const payload = {
-      'packingLocation.id': packingLocation ? packingLocation.id : scannedPackingLocation.id,
+      'packingLocation.id': packingLocation ? packingLocation.id : scannedPackingLocation.id
     };
 
     const submitCallback = (data: any) => {
       if (data?.error) {
         showPopup({
           title: data.message ?? 'Request failed.',
-          message: data.errorMessage ?? `Failed to submit packing location`,
+          message: data.errorMessage ?? 'Failed to submit packing location',
           positiveButton: {
             text: 'Retry',
             callback: () => {
@@ -76,7 +76,6 @@ const PackingLocationPage = () => {
     dispatch(submitPackingLocation(orderId, payload, submitCallback));
   };
 
-
   const getInternalLocation = (id: string = '') => {
     const callback = (data: any) => {
       if (data?.error) {
@@ -122,7 +121,7 @@ const PackingLocationPage = () => {
           'parentLocation.id': location.id,
           max: 25,
           offset: 0,
-          activityCode: 'PACK_STOCK',
+          activityCode: 'PACK_STOCK'
         },
         callback
       )
@@ -139,66 +138,71 @@ const PackingLocationPage = () => {
     }
 
     return CLEAR;
-  }
+  };
 
   return (
-    <ScrollView keyboardShouldPersistTaps="always" style={styles.container}>
-      <View style={styles.from}>
-        {packingLocation && (
-          <View>
-            <Text>Packing location name: {packingLocation?.name}</Text>
-            <Text>Scan packing location number to validate:</Text>
-            <InputBox
-              value={scannedPackingLocation}
-              placeholder={packingLocation?.locationNumber || packingLocation?.id}
-              label={packingLocation?.locationNumber || 'Packing Location'}
-              disabled={false}
-              onEndEdit={(value: any) => setScannedPackingLocation(value)}
-              onChange={(value: any) => setScannedPackingLocation(value)}
-              editable
-              icon={getIcon(scannedPackingLocation)}
-              onIconClick={() => {
-                if (scannedPackingLocation && scannedPackingLocation !== packingLocation?.locationNumber) {
-                  setScannedPackingLocation('');
-                  return;
-                }
-                showPopup({
-                  message: `Scan packing location. Expected: ${packingLocation?.locationNumber}.\n\nTo validate packing location click on this field and scan packing location.`,
-                  positiveButton: {
-                    text: 'Ok',
-                  },
-                })
-              }}
-            />
-          </View>
-        )}
-        {!packingLocation && (
-          <View>
-            <Text>No packing location assigned. Select packing location:</Text>
-            <AsyncModalSelect
-              placeholder="Packing Location"
-              label="Packing Location"
-              initValue={packingLocation || ''}
-              initialData={internalLocations}
-              searchAction={searchInternalLocations}
-              searchActionParams={{
-                'parentLocation.id': location.id,
-                activityCode: 'PACK_STOCK',
-              }}
-              onSelect={(selectedItem: any) => {
-                if (selectedItem) {
-                  setScannedPackingLocation(selectedItem);
+    <ContentContainer>
+      {packingLocation && (
+        <ContentHeader>
+          <Text>Packing location name: {packingLocation?.name}</Text>
+          <Text>Scan packing location number to validate:</Text>
+        </ContentHeader>
+      )}
+      {!packingLocation && (
+        <ContentHeader>
+          <Text>No packing location assigned. Select packing location:</Text>
+        </ContentHeader>
+      )}
+      {packingLocation && (
+        <ContentBody>
+          <InputBox
+            editable
+            value={scannedPackingLocation}
+            placeholder={packingLocation?.locationNumber || packingLocation?.id}
+            label={packingLocation?.locationNumber || 'Packing Location'}
+            disabled={false}
+            icon={getIcon(scannedPackingLocation)}
+            onEndEdit={(value: any) => setScannedPackingLocation(value)}
+            onChange={(value: any) => setScannedPackingLocation(value)}
+            onIconClick={() => {
+              if (scannedPackingLocation && scannedPackingLocation !== packingLocation?.locationNumber) {
+                setScannedPackingLocation('');
+                return;
+              }
+              showPopup({
+                message: `Scan packing location. Expected: ${packingLocation?.locationNumber}.\n\nTo validate packing location click on this field and scan packing location.`,
+                positiveButton: {
+                  text: 'Ok'
                 }
-              }}
-            />
-          </View>
-        )}
-
-        <View style={styles.bottom}>
-          <Button title="Submit Packing Location" disabled={false} onPress={validateAndSubmitPackingLocation} />
-        </View>
-      </View>
-    </ScrollView>
+              });
+            }}
+          />
+        </ContentBody>
+      )}
+      {!packingLocation && (
+        <ContentBody>
+          <AsyncModalSelect
+            placeholder="Packing Location"
+            label="Packing Location"
+            initValue={packingLocation || ''}
+            initialData={internalLocations}
+            searchAction={searchInternalLocations}
+            searchActionParams={{
+              'parentLocation.id': location.id,
+              activityCode: 'PACK_STOCK'
+            }}
+            onSelect={(selectedItem: any) => {
+              if (selectedItem) {
+                setScannedPackingLocation(selectedItem);
+              }
+            }}
+          />
+        </ContentBody>
+      )}
+      <ContentFooter>
+        <Button title="Submit Packing Location" disabled={false} onPress={validateAndSubmitPackingLocation} />
+      </ContentFooter>
+    </ContentContainer>
   );
 };
 
diff --git a/src/screens/PackingLocationPage/styles.ts b/src/screens/PackingLocationPage/styles.ts
deleted file mode 100644
index f3161505..00000000
--- a/src/screens/PackingLocationPage/styles.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { ratio } from '../../constants';
-
-export default StyleSheet.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 20
-  },
-  from: {
-    flex: 1,
-    marginTop: 10
-  },
-  bottom: {
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: ratio.height * 100,
-    marginBottom: 10
-  },
-});
diff --git a/src/screens/PickList/index.tsx b/src/screens/PickList/index.tsx
index 01ea8b0d..1791eb02 100644
--- a/src/screens/PickList/index.tsx
+++ b/src/screens/PickList/index.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react';
-import styles from './styles';
+import { common } from '../../assets/styles';
 import { ListRenderItemInfo, View, ToastAndroid } from 'react-native';
 import { useDispatch } from 'react-redux';
 import showPopup from '../../components/Popup';
@@ -101,7 +101,7 @@ const PickOrderItem = ({ picklistItems, selectedPicklistItemIndex, successfulPic
   };
 
   return (
-    <View style={styles.screenContainer}>
+    <View style={[common.containerFlexColumn, common.flex1]}>
       <Carousel
         ref={carouselRef}
         scrollEnabled
diff --git a/src/screens/PickList/styles.ts b/src/screens/PickList/styles.ts
deleted file mode 100644
index 565f6b96..00000000
--- a/src/screens/PickList/styles.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  screenContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    flex: 1
-  }
-});
diff --git a/src/screens/Placeholder/index.tsx b/src/screens/Placeholder/index.tsx
index 12741697..04c92b7f 100644
--- a/src/screens/Placeholder/index.tsx
+++ b/src/screens/Placeholder/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Image, Text, View } from 'react-native';
-import styles from './styles';
+import { common, typography } from '../../assets/styles';
 
 const Placeholder = () => {
   return (
-    <View style={styles.container}>
+    <View style={[common.containerCenter, common.flex1]}>
       <Image source={require('../../assets/images/picking.png')} />
-      <Text style={styles.text}>Coming soon...</Text>
+      <Text style={[typography.h1, typography.bold, typography.colorSecondary]}>Coming soon...</Text>
     </View>
   );
 };
diff --git a/src/screens/Placeholder/styles.ts b/src/screens/Placeholder/styles.ts
deleted file mode 100644
index a015830f..00000000
--- a/src/screens/Placeholder/styles.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 50
-  },
-  text: {
-    fontWeight: 'bold',
-    fontSize: 30
-  }
-});
diff --git a/src/screens/ProductDetails/VMMapper.ts b/src/screens/ProductDetails/VMMapper.ts
index b6b5addb..a8f3deca 100644
--- a/src/screens/ProductDetails/VMMapper.ts
+++ b/src/screens/ProductDetails/VMMapper.ts
@@ -18,10 +18,7 @@ export function vmMapper(product: Product, state: State): VM {
     quantityOnHand: product.quantityOnHand ?? 0,
     quantityOnOrder: product.quantityOnOrder ?? 0,
     unitOfMeasure: product.unitOfMeasure ?? 'EA',
-    attributes: product.attributes ?? [
-      { code: '', value: '', name: '' },
-      { code: '', value: '', name: '' }
-    ],
+    attributes: product.attributes ?? [],
     productType: product?.productType ?? { name: '' },
     defaultImageUrl: product?.defaultImageUrl,
     image: product?.image,
diff --git a/src/screens/ProductDetails/index.tsx b/src/screens/ProductDetails/index.tsx
index ac0876ae..f05c120b 100644
--- a/src/screens/ProductDetails/index.tsx
+++ b/src/screens/ProductDetails/index.tsx
@@ -2,8 +2,9 @@
 /* eslint-disable prettier/prettier */
 /* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-import { Image, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { Image, Text, TouchableOpacity, View } from 'react-native';
 import styles from './styles';
+import { margin } from '../../assets/styles';
 import PrintModal from '../../components/PrintModal';
 import Refresh from '../../components/Refresh';
 import { DispatchProps, Props, State } from './types';
@@ -14,281 +15,199 @@ import { connect } from 'react-redux';
 import showPopup from '../../components/Popup';
 import { RootState } from '../../redux/reducers';
 import { Card } from 'react-native-paper';
-import RenderData from '../../components/RenderData';
 import Button from '../../components/Button';
+import DetailsTable from '../../components/DetailsTable';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import { ContentContainer, ContentFooter, ContentBody, ContentHeader } from '../../components/ContentLayout';
 
 class ProductDetails extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      visible: false,
-      productDetails: {}
-    };
-  }
-
-  getProduct = () => {
-    const { product } = this.props.route.params;
-    this.getProductDetails(product.id);
-  };
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            visible: false,
+            productDetails: {}
+        };
+    }
 
-  closeModal = () => {
-    this.setState({ visible: false });
-  };
+    getProduct = () => {
+        const { product } = this.props.route.params;
+        this.getProductDetails(product.id);
+    };
 
-  handleClick = () => {
-    const { product } = this.props.route.params;
-    this.props.getProductByIdAction(product.id, data => {
-      this.setState({ visible: true });
-    });
-  };
+    closeModal = () => {
+        this.setState({ visible: false });
+    };
 
-  componentDidMount() {
-    this.getProduct();
-  }
+    handleClick = () => {
+        const { product } = this.props.route.params;
+        this.props.getProductByIdAction(product.id, data => {
+            this.setState({ visible: true });
+        });
+    };
 
-  componentDidUpdate() {
-    if (this.props.route.params.refetchProduct) {
-      const { product } = this.props.route.params;
-      this.getProductDetails(product.id);
+    componentDidMount() {
+        this.getProduct();
     }
-  }
 
-  getProductDetails(id: string) {
-    this.props.navigation.setParams({ refetchProduct : false });
-    this.props.showScreenLoading('');
-    if (!id) {
-      showPopup({
-        message: 'Product id is empty',
-        positiveButton: { text: 'Ok' }
-      });
-      return;
+    componentDidUpdate() {
+        if (this.props.route.params.refetchProduct) {
+            const { product } = this.props.route.params;
+            this.getProductDetails(product.id);
+        }
     }
 
-    const actionCallback = (data: any) => {
-      if (data?.error) {
-        showPopup({
-          title: data.errorMessage
-            ? `Failed to load product details with value = "${id}"`
-            : null,
-          message:
-            data.errorMessage ??
-            `Failed to load product details with value = "${id}"`,
-          positiveButton: {
-            text: 'Retry',
-            callback: () => {
-              this.props.getProductByIdAction(id, actionCallback);
+    getProductDetails(id: string) {
+        this.props.navigation.setParams({ refetchProduct: false });
+        this.props.showScreenLoading('');
+        if (!id) {
+            showPopup({
+                message: 'Product id is empty',
+                positiveButton: { text: 'Ok' }
+            });
+            return;
+        }
+
+        const actionCallback = (data: any) => {
+            if (data?.error) {
+                showPopup({
+                    title: data.errorMessage
+                        ? `Failed to load product details with value = "${id}"`
+                        : null,
+                    message:
+                        data.errorMessage ??
+                        `Failed to load product details with value = "${id}"`,
+                    positiveButton: {
+                        text: 'Retry',
+                        callback: () => {
+                            this.props.getProductByIdAction(id, actionCallback);
+                        }
+                    },
+                    negativeButtonText: 'Cancel'
+                });
+            } else {
+                this.setState({ productDetails: data });
             }
-          },
-          negativeButtonText: 'Cancel'
+        };
+        this.props.hideScreenLoading();
+        this.props.getProductByIdAction(id, actionCallback);
+    }
+
+    navigateToDetails = (item: any) => {
+        this.props.navigation.navigate('ViewAvailableItem', {
+            item,
+            imageUrl: this.state.productDetails?.defaultImageUrl
         });
-      } else {
-        this.setState({ productDetails: data });
-      }
     };
-    this.props.hideScreenLoading();
-    this.props.getProductByIdAction(id, actionCallback);
-  }
-
-  navigateToDetails = (item: any) => {
-    this.props.navigation.navigate('ViewAvailableItem', {
-      item,
-      imageUrl: this.state.productDetails?.defaultImageUrl
-    });
-  };
 
-  renderListItem = (item: any, index: any) => (
-    <TouchableOpacity
-      key={index}
-      style={styles.itemView}
-      onPress={() => this.navigateToDetails(item)}>
-      <Card>
-        <Card.Content>
-          <View style={styles.rowItem}>
-            <RenderData
-              title={'Bin Location'}
-              subText={item?.binLocation?.name ?? 'Default'}
-            />
-            {item.quantityOnHand ? (
-              <RenderData
-                title={'Quantity OnHand'}
-                subText={item.quantityOnHand}
-              />
-            ) : null}
-          </View>
-          <View style={styles.rowItem}>
-            <RenderData
-              title={'Lot Number'}
-              subText={item?.inventoryItem?.lotNumber ?? 'Default'}
-            />
-            {item.quantityAvailable ? (
-              <RenderData
-                title={'Quantity Available'}
-                subText={item.quantityAvailable}
-              />
-            ) : null}
-          </View>
-        </Card.Content>
-      </Card>
-    </TouchableOpacity>
-  );
+    renderListItem = (item: any, index: any) => {
+        const renderData: LabeledDataType[] = [
+            { label: 'Bin Location', value: item?.binLocation?.name, defaultValue: 'Default' },
+            { label: 'Quantity OnHand', value: item.quantityOnHand },
+            { label: 'Lot Number', value: item?.inventoryItem?.lotNumber, defaultValue: 'Default' }
+        ];
+        if (item.quantityAvailable) {
+            renderData.push({ label: 'Quantity Available', value: item.quantityAvailable });
+        }
 
-  render() {
-    const vm = vmMapper(this.state.productDetails, this.state);
-    const product = this.props.selectedProduct;
-    const { visible } = this.state;
-    return (
-      <View
-        style={{
-          flexDirection: 'column',
-          flex: 1
-        }}>
-        <PrintModal
-          visible={visible}
-          closeModal={this.closeModal}
-          product={product}
-          type={'products'}
-          defaultBarcodeLabelUrl={product?.defaultBarcodeLabelUrl}
-        />
-        <View style={styles.contentContainer}>
-          <Refresh onRefresh={this.getProduct}>
-            <View style={styles.header}>
-              <View style={styles.rowItem}>
-                <View style={{ width: '75%' }}>
-                  <Text style={styles.name}>{vm.productCode}</Text>
-                  <Text style={styles.name}>{vm.name}</Text>
-                </View>
-                <View style={{ width: '25%', alignItems: 'flex-end', flex: 1 }}>
-                  <Image
-                    style={{ width: 50, height: 50, resizeMode: 'contain' }}
-                    source={{ uri: vm.defaultImageUrl }}
-                  />
-                </View>
-              </View>
-            </View>
-          </Refresh>
-          <ScrollView>
-            <Text style={styles.boxHeading}>Availability</Text>
+        return (<TouchableOpacity
+            key={index}
+            style={[margin.M3, margin.MT1]}
+            onPress={() => this.navigateToDetails(item)}>
             <Card>
-              <View style={styles.container}>
-                <View style={styles.row}>
-                  <View style={styles.label}>
-                    <Text>{'Status'}</Text>
-                  </View>
-                  <View style={styles.value}>
-                    <Text style={styles.textAlign}>{vm.status}</Text>
-                  </View>
-                </View>
-                <View style={styles.row}>
-                  <View style={styles.label}>
-                    <Text>{'Quantity On Hand'}</Text>
-                  </View>
-                  <View style={styles.value}>
-                    <Text style={styles.textAlign}>
-                      {vm.quantityOnHand} {vm.unitOfMeasure}
-                    </Text>
-                  </View>
-                </View>
-                <View style={styles.row}>
-                  <View style={styles.label}>
-                    <Text>{'Quantity Available'}</Text>
-                  </View>
-                  <View style={styles.value}>
-                    <Text style={styles.textAlign}>
-                      {vm.quantityAvailable} {vm.unitOfMeasure}
-                    </Text>
-                  </View>
-                </View>
-                <View style={styles.row}>
-                  <View style={styles.label}>
-                    <Text>{'Allocated to Order'}</Text>
-                  </View>
-                  <View style={styles.value}>
-                    <Text style={styles.textAlign}>
-                      {vm.quantityAllocated} {vm.unitOfMeasure}
-                    </Text>
-                  </View>
-                </View>
-                <View style={styles.row}>
-                  <View style={styles.label}>
-                    <Text>{'On Order'}</Text>
-                  </View>
-                  <View style={styles.value}>
-                    <Text style={styles.textAlign}>
-                      {vm.quantityOnOrder} {vm.unitOfMeasure}
-                    </Text>
-                  </View>
-                </View>
-              </View>
+                <Card.Content>
+                    <DetailsTable data={renderData} />
+                </Card.Content>
             </Card>
-            <Text style={styles.boxHeading}>Details</Text>
-            <Card>
-              <View style={styles.container}>
-                <View style={styles.row}>
-                  <View style={styles.label}>
-                    <Text>{'Product Code'}</Text>
-                  </View>
-                  <View style={styles.value}>
-                    <Text style={styles.textAlign}>{vm.productCode}</Text>
-                  </View>
-                </View>
-                <View style={styles.row}>
-                  <View style={styles.label}>
-                    <Text>{'Category'}</Text>
-                  </View>
-                  <View style={styles.value}>
-                    <Text style={styles.textAlign}>{vm.category.name}</Text>
-                  </View>
-                </View>
-                {vm?.attributes?.map((item, index) => {
-                  return (
-                    <View key={index} style={styles.row}>
-                      <Text style={styles.label}>{item.name}</Text>
-                      <Text style={styles.value}>{item.value}</Text>
-                    </View>
-                  );
-                })}
-                <View style={styles.row}>
-                  <View style={styles.label}>
-                    <Text>{'Product Type'}</Text>
-                  </View>
-                  <View style={styles.value}>
-                    <Text style={styles.textAlign}>{vm.productType.name}</Text>
-                  </View>
-                </View>
-                <View style={styles.row}>
-                  <View style={styles.label}>
-                    <Text>{'Price per unit'}</Text>
-                  </View>
-                  <View style={styles.value}>
-                    <Text style={styles.textAlign}>{vm.pricePerUnit}</Text>
-                  </View>
-                </View>
-              </View>
-            </Card>
-            <Text style={styles.boxHeading}>Available Items</Text>
-            <Card>
-              {vm?.availableItems?.map((item, index) => {
-                return this.renderListItem(item, index);
-              })}
-              <Button
-                title={'Print Barcode Label'}
-                onPress={this.handleClick}
-              />
-            </Card>
-          </ScrollView>
-        </View>
-      </View>
-    );
-  }
+        </TouchableOpacity>);
+    };
+
+
+    render() {
+        const vm = vmMapper(this.state.productDetails, this.state);
+        const product = this.props.selectedProduct;
+        const { visible } = this.state;
+
+        const entryStyles = { style: styles.entry, labelStyle: styles.entryText, valueStyle: styles.entryText  };
+
+        const availabilityData: LabeledDataType[] = [
+            { label: 'Status', value: vm.status, ...entryStyles },
+            { label: 'Quantity On Hand', value: `${vm.quantityOnHand} ${vm.unitOfMeasure}`, ...entryStyles },
+            { label: 'Quantity Available', value: `${vm.quantityAvailable} ${vm.unitOfMeasure}`, ...entryStyles },
+            { label: 'Allocated to Order', value: `${vm.quantityAllocated} ${vm.unitOfMeasure}`, ...entryStyles },
+            { label: 'On Order', value: `${vm.quantityOnOrder} ${vm.unitOfMeasure}`, ...entryStyles, style: [entryStyles.style, { marginBottom: 0 }] }
+        ];
+
+        const detailsData: LabeledDataType[] = [
+            { label: 'Product Code', value: vm.productCode, ...entryStyles },
+            { label: 'Category', value: vm.category.name, ...entryStyles },
+            ...vm?.attributes?.map(({ name, value }) => ({
+                label: name, value, ...entryStyles
+            })),
+            { label: 'Product Type', value: vm.productType.name, ...entryStyles },
+            { label: 'Price per unit', value: vm.pricePerUnit, ...entryStyles, style: [entryStyles.style, { marginBottom: 0 }] }
+        ];
+
+        return (
+            <>
+                <PrintModal
+                    visible={visible}
+                    closeModal={this.closeModal}
+                    product={product}
+                    type={'products'}
+                    defaultBarcodeLabelUrl={product?.defaultBarcodeLabelUrl}
+                />
+                <ContentContainer>
+                    <ContentHeader fixed>
+                        <Refresh onRefresh={this.getProduct}>
+                            <View style={styles.rowItem}>
+                                <View style={{ width: '75%' }}>
+                                    <Text style={styles.name}>{vm.productCode}</Text>
+                                    <Text style={styles.name}>{vm.name}</Text>
+                                </View>
+                                <View style={{ width: '25%', alignItems: 'flex-end', flex: 1 }}>
+                                    <Image
+                                        style={{ width: 50, height: 50, resizeMode: 'contain' }}
+                                        source={{ uri: vm.defaultImageUrl }}
+                                    />
+                                </View>
+                            </View>
+                        </Refresh>
+                    </ContentHeader>
+                    <ContentBody>
+                        <Text style={styles.boxHeading}>Availability</Text>
+                        <Card>
+                            <DetailsTable columns={1} data={availabilityData} />
+                        </Card>
+                        <Text style={styles.boxHeading}>Details</Text>
+                        <Card>
+                            <DetailsTable columns={1} data={detailsData} />
+                        </Card>
+                        <Text style={styles.boxHeading}>Available Items</Text>
+                        <Card>
+                            {vm?.availableItems?.map((item, index) => {
+                                return this.renderListItem(item, index);
+                            })}
+                        </Card>
+                    </ContentBody>
+                    <ContentFooter>
+                        <Button
+                            title={'Print Barcode Label'}
+                            onPress={this.handleClick}
+                        />
+                    </ContentFooter>
+                </ContentContainer>
+            </>
+        );
+    }
 }
 
 const mapStateToProps = (state: RootState) => ({
-  selectedProduct: state.productsReducer.selectedProduct
+    selectedProduct: state.productsReducer.selectedProduct
 });
 const mapDispatchToProps: DispatchProps = {
-  getProductByIdAction,
-  showScreenLoading,
-  hideScreenLoading
+    getProductByIdAction,
+    showScreenLoading,
+    hideScreenLoading
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ProductDetails);
diff --git a/src/screens/ProductDetails/styles.ts b/src/screens/ProductDetails/styles.ts
index 1b0881a0..c52b16ed 100644
--- a/src/screens/ProductDetails/styles.ts
+++ b/src/screens/ProductDetails/styles.ts
@@ -2,19 +2,6 @@ import { StyleSheet } from 'react-native';
 import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({
-  contentContainer: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    padding: 8
-  },
-  title: {},
-  itemView: {
-    marginStart: 10,
-    marginEnd: 10,
-    marginTop: 5,
-    marginBottom: 10
-  },
   rowItem: {
     flexDirection: 'row',
     borderColor: Theme.colors.background,
@@ -35,83 +22,17 @@ export default StyleSheet.create({
     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: {
+  entry: {
     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
-  },
-  row: {
     flexDirection: 'row',
     borderColor: Theme.colors.background,
     borderBottomWidth: 1,
     marginTop: 8,
     padding: 8,
-    width: '100%'
+    justifyContent: 'space-between'
   },
-  label: {
-    width: '50%' // is 50% of container width
-  },
-  value: {
-    width: '50%', // is 50% of container width
-    textAlign: 'right'
-  },
-  textAlign: {
-    textAlign: 'right'
-  },
-  logo: {
-    width: 66,
-    height: 58
+  entryText: {
+    fontSize: 15,
+    color: Theme.colors.placeholder
   }
 });
diff --git a/src/screens/ProductDetails/Types.ts b/src/screens/ProductDetails/types.ts
similarity index 100%
rename from src/screens/ProductDetails/Types.ts
rename to src/screens/ProductDetails/types.ts
diff --git a/src/screens/ProductSummary/index.tsx b/src/screens/ProductSummary/index.tsx
index 26896265..d65d0d41 100644
--- a/src/screens/ProductSummary/index.tsx
+++ b/src/screens/ProductSummary/index.tsx
@@ -1,17 +1,18 @@
 /* eslint-disable no-undef */
 import React, { useEffect, useState } from 'react';
-import { FlatList, Text, View } from 'react-native';
+import { FlatList, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import styles from './styles';
+import { common } from '../../assets/styles';
 import { Card } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
 import showPopup from '../../components/Popup';
 import { getLocationProductSummary } from '../../redux/actions/locations';
 import { RootState } from '../../redux/reducers';
-import BarcodeSearchHeader from '../../components/BarcodeSearchHeader/BarcodeSearchHeader';
+import BarcodeSearchHeader from '../../components/BarcodeSearchHeader';
 import _ from 'lodash';
 import EmptyView from '../../components/EmptyView';
-import { LayoutStyle } from '../../assets/styles';
+import DetailsTable from '../../components/DetailsTable';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
 
 const ProductSummary = () => {
   const navigation = useNavigation<any>();
@@ -66,15 +67,6 @@ const ProductSummary = () => {
     setState({ ...state });
   };
 
-  const RenderData = ({ title, subText }: any): JSX.Element => {
-    return (
-      <View style={styles.columnItem}>
-        <Text style={styles.label}>{title}</Text>
-        <Text style={styles.value}>{subText}</Text>
-      </View>
-    );
-  };
-
   const navigateToDetails = (item: any) => {
     const product = {
       id: item.productCode
@@ -83,23 +75,23 @@ const ProductSummary = () => {
   };
 
   const renderListItem = (item: any, index: any) => {
+    const renderListItemData: LabeledDataType[] = [
+      { label: 'Product Code', value: item.productCode },
+      { label: 'Quantity OnHand', value: item.quantityOnHand },
+      { label: 'Product Name', value: item.productName }
+    ];
+
     return (
-      <Card key={index} style={LayoutStyle.listItemContainer} onPress={() => navigateToDetails(item)}>
+      <Card key={index} style={common.listItemContainer} onPress={() => navigateToDetails(item)}>
         <Card.Content>
-          <View style={styles.rowItem}>
-            <RenderData title={'Product Code'} subText={item.productCode} />
-            <RenderData title={'Quantity OnHand'} subText={item.quantityOnHand} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderData title={'Product Name'} subText={item.productName} />
-          </View>
+          <DetailsTable data={renderListItemData} />
         </Card.Content>
       </Card>
     );
   };
 
   return (
-    <View style={styles.mainContainer}>
+    <View style={[common.containerFlexColumn, common.flex1]}>
       <BarcodeSearchHeader
         autoSearch
         autoFocus
diff --git a/src/screens/ProductSummary/styles.tsx b/src/screens/ProductSummary/styles.tsx
deleted file mode 100644
index 366b104c..00000000
--- a/src/screens/ProductSummary/styles.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-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/FloatingActionButtonMenu.tsx b/src/screens/Products/FloatingActionButtonMenu.tsx
index 4970a905..359045fd 100644
--- a/src/screens/Products/FloatingActionButtonMenu.tsx
+++ b/src/screens/Products/FloatingActionButtonMenu.tsx
@@ -1,6 +1,8 @@
 import { FAB } from 'react-native-paper';
 import React from 'react';
-import Icon, { Name } from '../../components/Icon';
+import Icon from '../../components/Icon';
+import { Name } from '../../components/Icon/types';
+
 import Theme from '../../utils/Theme';
 
 export interface Props {
diff --git a/src/screens/Products/ProductsList.tsx b/src/screens/Products/ProductsList.tsx
index 3f667593..1fb09877 100644
--- a/src/screens/Products/ProductsList.tsx
+++ b/src/screens/Products/ProductsList.tsx
@@ -1,95 +1,43 @@
 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';
+import { common } from '../../assets/styles';
 export interface Props {
   products: Product[] | null;
   onProductTapped: (product: Product) => void;
 }
+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={common.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/ProductsSearchCodeHeader.tsx b/src/screens/Products/ProductsSearchCodeHeader.tsx
index b1704c7e..a0a58672 100644
--- a/src/screens/Products/ProductsSearchCodeHeader.tsx
+++ b/src/screens/Products/ProductsSearchCodeHeader.tsx
@@ -4,7 +4,8 @@ import React, { ReactElement } from 'react';
 import { Searchbar } from 'react-native-paper';
 import { StyleSheet } from 'react-native';
 import { Platform, StatusBar } from 'react-native';
-import Icon, { Name } from '../../components/Icon';
+import Icon from '../../components/Icon';
+import { Name } from '../../components/Icon/types';
 import Theme from '../../utils/Theme';
 
 export interface Props {
diff --git a/src/screens/Products/ProductsSearchHeader.tsx b/src/screens/Products/ProductsSearchHeader.tsx
index 75ba1588..a4c8f923 100644
--- a/src/screens/Products/ProductsSearchHeader.tsx
+++ b/src/screens/Products/ProductsSearchHeader.tsx
@@ -4,7 +4,9 @@ import React, { ReactElement } from 'react';
 import { Searchbar } from 'react-native-paper';
 import { StyleSheet } from 'react-native';
 import { Platform, StatusBar } from 'react-native';
-import Icon, { Name } from '../../components/Icon';
+import Icon from '../../components/Icon';
+import { Name } from '../../components/Icon/types';
+
 import Theme from '../../utils/Theme';
 // import {setStatusBarBackgroundColor} from 'expo-status-bar';
 import Header from '../../components/Header';
@@ -70,7 +72,7 @@ export default class ProductsSearchHeader extends React.Component<Props, State>
   }
 
   getClearIcon(): ReactElement {
-    return <Icon name={Name.Cross} size={24} color={Theme.colors.surface} onPress={this.onClearIconPressed} />;
+    return <Icon name={Name.Boxes} size={24} color={Theme.colors.surface} onPress={this.onClearIconPressed} />;
   }
 
   onSearchQuerySubmitted() {
diff --git a/src/screens/Products/index.tsx b/src/screens/Products/index.tsx
index 27b55723..b0275fc7 100644
--- a/src/screens/Products/index.tsx
+++ b/src/screens/Products/index.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import { connect } from 'react-redux';
-import styles from './styles';
+import { common } from '../../assets/styles';
 import showPopup from '../../components/Popup';
 import ProductsSearchHeader from './ProductsSearchHeader';
 import ProductsList from './ProductsList';
@@ -12,7 +12,7 @@ import { ProductCategory } from '../../data/product/category/ProductCategory';
 import { DispatchProps, Props, State } from './types';
 import vmMapper from './VMMapper';
 import ProductsSearchCodeHeader from './ProductsSearchCodeHeader';
-import BarcodeSearchHeader from '../../components/BarcodeSearchHeader/BarcodeSearchHeader';
+import BarcodeSearchHeader from '../../components/BarcodeSearchHeader';
 import {
   getProductsAction,
   searchProductByCodeAction,
@@ -329,7 +329,7 @@ class Products extends React.Component<Props, State> {
   render() {
     const vm = vmMapper(this.state);
     return (
-      <View style={styles.screenContainer}>
+      <View style={[common.containerCenter, common.flex1]}>
         <ProductsSearchHeader
           subtitle={vm.subtitle}
           searchBoxVisible={vm.searchBoxVisible}
@@ -353,7 +353,7 @@ class Products extends React.Component<Props, State> {
           searchBox={false}
           onSearchTermSubmit={this.onSearchTermSubmit}
         />
-        <View style={styles.content}>
+        <View style={[common.containerCenter, common.flex1]}>
           <ProductsList
             products={vm.list}
             onProductTapped={(product) => {
diff --git a/src/screens/Products/styles.ts b/src/screens/Products/styles.ts
deleted file mode 100644
index c66d641e..00000000
--- a/src/screens/Products/styles.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  screenContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    zIndex: -1
-  },
-  content: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-});
diff --git a/src/screens/PutawayCandidates/index.tsx b/src/screens/PutawayCandidates/index.tsx
index 9757f0de..c8e9dfdf 100644
--- a/src/screens/PutawayCandidates/index.tsx
+++ b/src/screens/PutawayCandidates/index.tsx
@@ -8,8 +8,8 @@ import { connect } from 'react-redux';
 import { getCandidates } from '../../redux/actions/putaways';
 import EmptyView from '../../components/EmptyView';
 import { Card } from 'react-native-paper';
-import { LayoutStyle } from '../../assets/styles';
-import BarcodeSearchHeader from '../../components/BarcodeSearchHeader/BarcodeSearchHeader';
+import { common } from '../../assets/styles';
+import BarcodeSearchHeader from '../../components/BarcodeSearchHeader';
 import _ from 'lodash';
 
 class PutawayCandidates extends Component<Props, State> {
@@ -55,7 +55,7 @@ class PutawayCandidates extends Component<Props, State> {
   renderItem = (item: any) => {
     return (
       <Card
-        style={LayoutStyle.listItemContainer}
+        style={common.listItemContainer}
         onPress={() => {
           if (item.id) {
             Alert.alert('Item is already in a pending putaway');
diff --git a/src/screens/PutawayDetails/index.tsx b/src/screens/PutawayDetails/index.tsx
index 63ca2f7b..cbd636f1 100644
--- a/src/screens/PutawayDetails/index.tsx
+++ b/src/screens/PutawayDetails/index.tsx
@@ -1,12 +1,13 @@
 /* eslint-disable react-native/no-unused-styles */
-import { FlatList, ListRenderItemInfo, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { FlatList, ListRenderItemInfo, Text, TouchableOpacity, View } from 'react-native';
 import React from 'react';
-import Theme from '../../utils/Theme';
 import PutAway from '../../data/putaway/PutAway';
 import PutAwayItems from '../../data/putaway/PutAwayItems';
 import { connect } from 'react-redux';
 import PutAwayItem from '../../components/PutAwayItem';
 import EmptyView from '../../components/EmptyView';
+import styles from './styles';
+
 export interface Props {
   putAway: PutAway | null;
   exit: () => void;
@@ -84,78 +85,3 @@ class PutawayDetail extends React.Component<Props, State> {
 }
 
 export default connect(null, null)(PutawayDetail);
-
-const styles = StyleSheet.create({
-  contentContainer: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    padding: 8
-  },
-  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
-  },
-  row: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.background,
-    // borderBottomWidth: 1,
-    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
-  }
-});
diff --git a/src/screens/PutawayDetails/styles.ts b/src/screens/PutawayDetails/styles.ts
index aaac73a1..ef69a101 100644
--- a/src/screens/PutawayDetails/styles.ts
+++ b/src/screens/PutawayDetails/styles.ts
@@ -1,162 +1,77 @@
-// 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.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: 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
-//     }
-// })
+import { StyleSheet } from 'react-native';
+import Theme from '../../utils/Theme';
+
+export default StyleSheet.create({
+  contentContainer: {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    padding: 8
+  },
+  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
+  },
+  row: {
+    flexDirection: 'row',
+    borderColor: Theme.colors.background,
+    // borderBottomWidth: 1,
+    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
+  }
+});
diff --git a/src/screens/PutawayItem/index.tsx b/src/screens/PutawayItem/index.tsx
index 6ee51e91..79615a08 100644
--- a/src/screens/PutawayItem/index.tsx
+++ b/src/screens/PutawayItem/index.tsx
@@ -3,9 +3,9 @@
 import _ from 'lodash';
 import React, { Component } from 'react';
 import { DispatchProps, Props, State } from './types';
-import { View, Text, ToastAndroid, ScrollView } from 'react-native';
+import { View, Text, ToastAndroid } from 'react-native';
 import { RootState } from '../../redux/reducers';
-import styles from './styles';
+import { common, margin } from '../../assets/styles';
 import { hideScreenLoading, showScreenLoading } from '../../redux/actions/main';
 import { connect } from 'react-redux';
 import { searchInternalLocations } from '../../redux/actions/locations';
@@ -15,6 +15,7 @@ import InputBox from '../../components/InputBox';
 import Button from '../../components/Button';
 import showPopup from '../../components/Popup';
 import AsyncModalSelect from '../../components/AsyncModalSelect';
+import { ContentContainer, ContentBody, ContentFooter } from '../../components/ContentLayout';
 
 class PutawayItem extends Component<Props, State> {
   constructor(props: Props) {
@@ -141,51 +142,44 @@ class PutawayItem extends Component<Props, State> {
     const { quantity, internalLocations, selectedLocation } = this.state;
 
     return (
-      <ScrollView keyboardShouldPersistTaps style={{ width: '100%', height: '100%' }}>
-        <View style={styles.container}>
-          <View style={styles.childContainer}>
-            <InputBox disabled label="Product Code" value={item['product.productCode']} editable={false} />
-            <InputBox disabled label="Product Name" value={item['product.name']} editable={false} />
-            <InputBox
-              disabled
-              label="Lot Number"
-              value={item['inventoryItem.lotNumber'] ?? 'Default'}
-              editable={false}
-            />
-            <InputBox
-              disabled
-              label="Current Location"
-              value={item['currentLocation.name'] ?? 'Default'}
-              editable={false}
+      <ContentContainer>
+        <ContentBody>
+          <InputBox disabled label="Product Code" value={item['product.productCode']} editable={false} />
+          <InputBox disabled label="Product Name" value={item['product.name']} editable={false} />
+          <InputBox disabled label="Lot Number" value={item['inventoryItem.lotNumber'] ?? 'Default'} editable={false} />
+          <InputBox
+            disabled
+            label="Current Location"
+            value={item['currentLocation.name'] ?? 'Default'}
+            editable={false}
+          />
+          <InputBox disabled label="Received Quantity" value={item.quantity.toString() ?? '0'} editable={false} />
+          <View style={margin.MT3}>
+            <Text>Putaway Location</Text>
+            <AsyncModalSelect
+              placeholder="Default"
+              label="Default"
+              initValue={selectedLocation?.label || item['putawayLocation.name'] || ''}
+              initialData={internalLocations}
+              searchAction={searchInternalLocations}
+              searchActionParams={{
+                'parentLocation.id': this.props.currentLocation.id
+              }}
+              onSelect={(selectedLocation: any) => this.setState({ selectedLocation })}
             />
-            <InputBox disabled label="Received Quantity" value={item.quantity.toString() ?? '0'} editable={false} />
-
-            <View style={styles.divider} />
-            <View>
-              <Text>Putaway Location</Text>
-              <AsyncModalSelect
-                placeholder="Default"
-                label="Default"
-                initValue={selectedLocation?.label || item['putawayLocation.name'] || ''}
-                initialData={internalLocations}
-                searchAction={searchInternalLocations}
-                searchActionParams={{
-                  'parentLocation.id': this.props.currentLocation.id
-                }}
-                onSelect={(selectedLocation: any) => this.setState({ selectedLocation })}
-              />
-            </View>
-            <View style={styles.inputSpinner}>
-              <InputSpinner title="Quantity to Pick" value={quantity} setValue={this.changeQuantity} />
-            </View>
           </View>
+          <View style={common.containerCenter}>
+            <InputSpinner title="Quantity to Pick" value={quantity} setValue={this.changeQuantity} />
+          </View>
+        </ContentBody>
+        <ContentFooter>
           <Button
             disabled={quantity > item.quantity || Number(quantity) <= 0}
             title="Create Putaway"
             onPress={this.create}
           />
-        </View>
-      </ScrollView>
+        </ContentFooter>
+      </ContentContainer>
     );
   }
 }
diff --git a/src/screens/PutawayItem/styles.ts b/src/screens/PutawayItem/styles.ts
deleted file mode 100644
index 632f52a0..00000000
--- a/src/screens/PutawayItem/styles.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  container: {
-    paddingHorizontal: 10,
-    flex: 1,
-    paddingBottom: 10
-  },
-  childContainer: {
-    flex: 1
-  },
-  arrowDownIcon: {
-    height: 15,
-    width: 15
-  },
-  select: {
-    width: '100%',
-    borderWidth: 0,
-    height: 40
-  },
-  quantityBox: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  quantityInput: {
-    borderWidth: 1,
-    height: 30,
-    width: 60,
-    marginRight: 10,
-    paddingVertical: 2,
-    paddingHorizontal: 8
-  },
-  quantityText: {
-    fontSize: 23
-  },
-  inputSpinner: {
-    flex: 1,
-    alignItems: 'center'
-  },
-  divider: {
-    marginVertical: 8
-  },
-  submitButton: {
-    padding: 10
-  }
-});
diff --git a/src/screens/PutawayItemDetail/index.tsx b/src/screens/PutawayItemDetail/index.tsx
index 9ba0e9ee..ed05748b 100644
--- a/src/screens/PutawayItemDetail/index.tsx
+++ b/src/screens/PutawayItemDetail/index.tsx
@@ -1,6 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { View, ScrollView } from 'react-native';
-import styles from './styles';
 import showPopup from '../../components/Popup';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import InputBox from '../../components/InputBox';
@@ -9,6 +7,7 @@ import { submitPutawayItem } from '../../redux/actions/putaways';
 import Button from '../../components/Button';
 import DetailsTable from "../../components/DetailsTable";
 import {Props as LabeledDataType} from "../../components/LabeledData/types";
+import { ContentContainer, ContentBody, ContentFooter } from '../../components/ContentLayout';
 
 const PutawayItemDetail = () => {
   const route = useRoute();
@@ -125,26 +124,25 @@ const PutawayItemDetail = () => {
   ];
 
   return (
-    <ScrollView>
-      <DetailsTable style={{ margin: 10 }} data={detailsData} />
-      <View style={styles.contentContainer}>
-        <View style={styles.from}>
-          <InputBox
-            label={'Scan Putaway Location'}
-            value={state.scannedPutawayLocation}
-            onChange={onChangeScannedPutawayLocation}
-            editable={false}
+    <ContentContainer>
+      <ContentBody>
+        <DetailsTable style={{ margin: 10 }} data={detailsData} />
+        <InputBox
+          label={'Scan Putaway Location'}
+          value={state.scannedPutawayLocation}
+          onChange={onChangeScannedPutawayLocation}
+          editable={false}
+          disabled={false}
+        />
+      </ContentBody>
+        <ContentFooter>
+          <Button
+            title="Confirm Putaway"
+            onPress={formSubmit}
             disabled={false}
           />
-        </View>
-      </View>
-      <Button
-        title="Confirm Putaway"
-        style={styles.buttonContainer}
-        onPress={formSubmit}
-        disabled={false}
-      />
-    </ScrollView>
+        </ContentFooter>
+    </ContentContainer>
   );
 };
 
diff --git a/src/screens/PutawayItemDetail/styles.ts b/src/screens/PutawayItemDetail/styles.ts
deleted file mode 100644
index 6bbf290a..00000000
--- a/src/screens/PutawayItemDetail/styles.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
-
-export default StyleSheet.create({
-  contentContainer: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    padding: 8
-  },
-  from: {
-    flex: 1
-  },
-  name: {
-    fontSize: 17,
-    color: Theme.colors.text,
-    fontWeight: 'bold',
-    textAlign: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4
-  },
-  emptyRow: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.onBackground,
-    width: '100%',
-    height: 20
-  },
-  topRow: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.onBackground,
-    width: '100%',
-    borderLeftWidth: 0,
-    borderTopWidth: 0,
-    borderTopColor: 'black',
-    borderBottomWidth: 0,
-    borderBottomColor: 'black',
-    borderRightWidth: 0,
-    borderRightColor: 'black',
-    textAlign: 'center'
-  },
-  row: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.onBackground,
-    width: '100%',
-    borderLeftWidth: 0,
-    borderLeftColor: 'black',
-    borderBottomWidth: 0,
-    borderBottomColor: 'black',
-    borderRightWidth: 0,
-    borderRightColor: 'black'
-  },
-  col30: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '30%',
-    borderRightWidth: 0,
-    borderRightColor: 'black'
-  },
-  col40: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '40%',
-    borderRightWidth: 0,
-    borderRightColor: 'black',
-    justifyContent: 'center' //Centered horizontally
-  },
-  col50: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '50%',
-    borderRightWidth: 1,
-    borderRightColor: 'black'
-  },
-  col60: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '60%'
-  },
-  col70: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '70%'
-  },
-  col100: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    marginStart: 4,
-    width: '100%'
-  },
-  width100: {
-    width: '100%'
-  },
-  label: {
-    fontSize: 12,
-    color: Theme.colors.placeholder,
-    width: '50%'
-  },
-  title: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    fontWeight: 'bold'
-  },
-  value: {
-    fontSize: 16,
-    color: Theme.colors.text
-  },
-  info: {
-    fontSize: 12,
-    color: '#000000'
-  },
-  textInput: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    borderRadius: 5,
-    borderWidth: 2,
-    borderColor: '#e7edd8'
-  },
-  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%'
-  },
-  buttonContainer: {
-    marginTop: 4,
-    marginBottom: 8
-  }
-});
diff --git a/src/screens/PutawayList/index.tsx b/src/screens/PutawayList/index.tsx
index 1e575b92..333b8816 100644
--- a/src/screens/PutawayList/index.tsx
+++ b/src/screens/PutawayList/index.tsx
@@ -3,17 +3,19 @@ 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 } from 'react-native';
 import { connect } from 'react-redux';
 import { hideScreenLoading, showScreenLoading } from '../../redux/actions/main';
-import styles from './styles';
 import PutAwayItems from '../../data/putaway/PutAwayItems';
 import { fetchPutAwayFromOrderAction } from '../../redux/actions/putaways';
 import PutAway from '../../data/putaway/PutAway';
 import EmptyView from '../../components/EmptyView';
 import { Card } from 'react-native-paper';
 import InputBox from '../../components/InputBox';
-import { LayoutStyle } from '../../assets/styles';
+import { common } from '../../assets/styles';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import DetailsTable from '../../components/DetailsTable';
+import { ContentContainer, ContentBody, ContentHeader } from '../../components/ContentLayout';
 
 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,73 +102,56 @@ 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={common.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 ? (
-          <View style={styles.contentContainer}>
-            {putAwayList?.length ? (
-              <InputBox
-                style={styles.lpnFilter}
-                value={lpnFilter}
-                disabled={false}
-                editable={false}
-                label={'Scan Lot Number'}
-                onChange={this.onChangeLpnFilter}
-              />
-            ) : null}
+      <ContentContainer>
+        <ContentHeader fixed>
+          {putAwayList?.length && (
+            <InputBox
+              style={common.scanSearch}
+              value={lpnFilter}
+              disabled={false}
+              editable={false}
+              label={'Scan Lot Number'}
+              onChange={this.onChangeLpnFilter}
+            />
+          )}
+        </ContentHeader>
+        <ContentBody>
+          {showList && (
             <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>
+          )}
+        </ContentBody>
+      </ContentContainer>
     );
   }
 }
diff --git a/src/screens/PutawayList/styles.ts b/src/screens/PutawayList/styles.ts
deleted file mode 100644
index d741bd43..00000000
--- a/src/screens/PutawayList/styles.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
-
-export default StyleSheet.create({
-  screenContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    zIndex: -1
-  },
-  contentContainer: {
-    display: 'flex',
-    flex: 1,
-    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
-  }
-});
diff --git a/src/screens/PutawayList/types.ts b/src/screens/PutawayList/types.ts
index 3a81c491..9e51c809 100644
--- a/src/screens/PutawayList/types.ts
+++ b/src/screens/PutawayList/types.ts
@@ -25,10 +25,7 @@ export interface DispatchProps {
   showScreenLoading: (message?: string) => void;
   hideScreenLoading: () => void;
   getOrdersAction: (orderNumber: string, callback: (data: any) => void) => void;
-  fetchPutAwayFromOrderAction: (
-    q: string | null,
-    callback: (data: any) => void
-  ) => void;
+  fetchPutAwayFromOrderAction: (q: string | null, callback: (data: any) => void) => void;
 }
 
 export type Props = OwnProps & StateProps & DispatchProps;
diff --git a/src/screens/Scan/index.tsx b/src/screens/Scan/index.tsx
index c6fb84e0..7fa5227e 100644
--- a/src/screens/Scan/index.tsx
+++ b/src/screens/Scan/index.tsx
@@ -2,11 +2,12 @@
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
 import styles from './styles';
+import { common } from '../../assets/styles';
 import { useNavigation } from '@react-navigation/native';
 import Product from '../../data/product/Product';
 import onBarcodeScanned from '../../hooks/onBarcodeScanned';
 import EmptyView from '../../components/EmptyView';
-import BarcodeSearchHeader from '../../components/BarcodeSearchHeader/BarcodeSearchHeader';
+import BarcodeSearchHeader from '../../components/BarcodeSearchHeader';
 import { searchBarcode } from '../../redux/actions/products';
 import showPopup from '../../components/Popup';
 import { useDispatch } from 'react-redux';
@@ -98,7 +99,7 @@ const Scan = () => {
   };
 
   return (
-    <View style={styles.screenContainer}>
+    <View style={[common.containerFlexColumn, common.flex1]}>
       <BarcodeSearchHeader
         autoSearch
         autoFocus
diff --git a/src/screens/Scan/styles.ts b/src/screens/Scan/styles.ts
index 1654fa6b..7edd7815 100644
--- a/src/screens/Scan/styles.ts
+++ b/src/screens/Scan/styles.ts
@@ -1,46 +1,10 @@
 import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
 
 export default StyleSheet.create({
-  screenContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1
-  },
   countLabelAndIconContainer: {
     display: 'flex',
     flexDirection: 'row',
     flex: 0,
     alignItems: 'center'
-  },
-  countLabel: {
-    fontWeight: 'bold',
-    fontSize: 16,
-    marginStart: 4
-  },
-
-  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%'
   }
 });
diff --git a/src/screens/Settings/index.tsx b/src/screens/Settings/index.tsx
index 226fc229..4eb20cbc 100644
--- a/src/screens/Settings/index.tsx
+++ b/src/screens/Settings/index.tsx
@@ -1,11 +1,13 @@
 import React, { FC, useEffect, useState } from 'react';
-import { View, TextInput, Text } from 'react-native';
+import { View } from 'react-native';
+import { TextInput } from 'react-native-paper';
 import { Props } from './types';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { environment } from '../../utils/Environment';
 import * as NavigationService from '../../NavigationService';
 import ApiClient from '../../utils/ApiClient';
 import Button from '../../components/Button';
+import { common, margin } from '../../assets/styles';
 
 const Settings: FC<Props> = ({}) => {
   const [value, setValue] = useState('');
@@ -24,17 +26,8 @@ const Settings: FC<Props> = ({}) => {
   };
 
   return (
-    <View style={{ flex: 1, padding: 10 }}>
-      <View style={{ width: '100%', marginBottom: 50 }}>
-        <Text>URL</Text>
-        <TextInput
-          style={{ borderWidth: 1, paddingHorizontal: 10, marginTop: 5 }}
-          value={value}
-          onChangeText={(text) => {
-            setValue(text);
-          }}
-        />
-      </View>
+    <View style={[common.flex1, margin.M3]}>
+      <TextInput label="URL" placeholder="API URL" mode="outlined" value={value} onChangeText={setValue} />
       <Button disabled={false} title="Go" onPress={handlePress} />
     </View>
   );
diff --git a/src/screens/Settings/styles.ts b/src/screens/Settings/styles.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/screens/ShipItemDetails/index.tsx b/src/screens/ShipItemDetails/index.tsx
index ec6e2fa9..b37051ab 100644
--- a/src/screens/ShipItemDetails/index.tsx
+++ b/src/screens/ShipItemDetails/index.tsx
@@ -2,8 +2,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react/jsx-sort-props */
 import React, { useEffect, useState } from 'react';
-import { ScrollView, Text, View, ToastAndroid } from 'react-native';
-import styles from './styles';
+import { Text, View, ToastAndroid } from 'react-native';
+import { common, typography, margin } from '../../assets/styles';
 import Button from '../../components/Button';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { useDispatch } from 'react-redux';
@@ -11,6 +11,8 @@ import showPopup from '../../components/Popup';
 import { getShipment, submitShipmentDetails } from '../../redux/actions/packing';
 import AutoInputInternalLocation from '../../components/AutoInputInternalLocation';
 import InputSpinner from '../../components/InputSpinner';
+import { ContentFooter, ContentBody, ContentHeader, ContentContainer } from '../../components/ContentLayout';
+import DetailsTable from '../../components/DetailsTable';
 
 const ShipItemDetails = () => {
   const route = useRoute();
@@ -111,51 +113,35 @@ const ShipItemDetails = () => {
     });
   };
   return (
-    <ScrollView style={styles.contentContainer}>
-      <View style={styles.rowItem}>
-        <View style={styles.columnItem}>
-          <Text style={styles.label}>{'Container'}</Text>
-          <Text style={styles.value}>{item?.container?.name ?? 'Default'}</Text>
-        </View>
-        <View style={styles.columnItem}>
-          <Text style={styles.label}>{'Shipment Number'}</Text>
-          <Text style={styles.value}>{item.shipment.shipmentNumber}</Text>
-        </View>
-      </View>
-      <View style={styles.rowItem}>
-        <View style={styles.columnItem}>
-          <Text style={styles.label}>{'Product Code'}</Text>
-          <Text style={styles.value}>{item.inventoryItem.product.productCode}</Text>
-        </View>
-        <View style={styles.columnItem}>
-          <Text style={styles.label}>{'Product Name'}</Text>
-          <Text style={styles.value}>{item.inventoryItem.product.name}</Text>
-        </View>
-      </View>
-      <View style={styles.rowItem}>
-        <View style={styles.columnItem}>
-          <Text style={styles.label}>{'LOT Number'}</Text>
-          <Text style={styles.value}>{item.inventoryItem.lotNumber ?? 'Default'}</Text>
+    <ContentContainer>
+      <ContentHeader>
+        <DetailsTable
+          data={[
+            { label: 'Container', value: item?.container?.name, defaultValue: 'Default' },
+            { label: 'Shipment Number', value: item.shipment.shipmentNumber },
+            { label: 'Product Code', value: item.inventoryItem.product.productCode },
+            { label: 'Product Name', value: item.inventoryItem.product.name },
+            { label: 'LOT Number', value: item.inventoryItem.lotNumber, defaultValue: 'Default' },
+            { label: 'Quantity to pack', value: item.quantityRemaining }
+          ]}
+        />
+      </ContentHeader>
+      <ContentBody>
+        <View style={[common.containerFlexColumn, margin.M3]}>
+          <Text style={typography.label}>{'Container'}</Text>
+          <AutoInputInternalLocation
+            label="AutoInputInternalContainer"
+            data={state.containerList ?? []}
+            selectedContainerItem={selectedContainerItem}
+            initValue={item.container?.name || ''}
+            selectedData={setSelectedContainerItem}
+          />
         </View>
-        <View style={styles.columnItem}>
-          <Text style={styles.label}>{'Quantity to pack'}</Text>
-          <Text style={styles.value}>{item.quantityRemaining}</Text>
+        <View style={common.containerCenter}>
+          <InputSpinner title={'Quantity to Pick'} value={state.quantityPicked} setValue={quantityPickedChange} />
         </View>
-      </View>
-      <View style={styles.textContainer}>
-        <Text style={styles.label}>{'Container'}</Text>
-        <AutoInputInternalLocation
-          label="AutoInputInternalContainer"
-          data={state.containerList ?? []}
-          selectedContainerItem={selectedContainerItem}
-          initValue={item.container?.name || ''}
-          selectedData={(selectedItem: any, index: number) => setSelectedContainerItem(selectedItem)}
-        />
-      </View>
-      <View style={styles.alignCenterContent}>
-        <InputSpinner title={'Quantity to Pick'} value={state.quantityPicked} setValue={quantityPickedChange} />
-      </View>
-      <View style={styles.bottom}>
+      </ContentBody>
+      <ContentFooter>
         <Button
           disabled={!(state.quantityPicked && state.quantityPicked > 0)}
           title="PACK ITEM"
@@ -163,8 +149,8 @@ const ShipItemDetails = () => {
             submitShipmentDetail(item?.id);
           }}
         />
-      </View>
-    </ScrollView>
+      </ContentFooter>
+    </ContentContainer>
   );
 };
 export default ShipItemDetails;
diff --git a/src/screens/ShipItemDetails/styles.tsx b/src/screens/ShipItemDetails/styles.tsx
deleted file mode 100644
index c24314c3..00000000
--- a/src/screens/ShipItemDetails/styles.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
-import { ratio } from '../../constants';
-
-export default StyleSheet.create({
-  contentContainer: {
-    padding: 16,
-    flex: 0
-  },
-  label: {
-    fontSize: 12,
-    color: Theme.colors.placeholder,
-    alignSelf: 'flex-start'
-  },
-  value: {
-    fontSize: 16,
-    color: Theme.colors.text
-  },
-  textInput: {
-    fontSize: 16,
-    color: Theme.colors.text,
-    borderRadius: 5,
-    borderWidth: 2,
-    borderColor: '#e7edd8'
-  },
-  rowItem: {
-    flexDirection: 'row',
-    borderColor: Theme.colors.background,
-    marginTop: 1,
-    padding: 2,
-    width: '100%',
-    alignItems: 'center'
-  },
-  columnItem: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 0,
-    width: '50%'
-  },
-  arrowDownIcon: {
-    height: 15,
-    width: 15
-  },
-  select: {
-    width: '100%',
-    borderWidth: 2,
-    height: 40,
-    borderColor: 'grey',
-    backgroundColor: 'white',
-    borderRadius: 5,
-    paddingStart: 10,
-    marginTop: 10
-  },
-  containerField: {
-    padding: 10
-  },
-  bottom: {
-    alignSelf: 'center',
-    justifyContent: 'center',
-    height: ratio.height * 100,
-    marginBottom: 20
-  },
-  textContainer: {
-    flexDirection: 'column',
-    borderColor: Theme.colors.background,
-    marginTop: 1,
-    padding: 2,
-    width: '100%',
-    alignItems: 'center'
-  },
-  alignCenterContent: {
-    alignItems: 'center'
-  }
-});
diff --git a/src/screens/Transfer/index.tsx b/src/screens/Transfer/index.tsx
index 88a09d42..7a2b5b6f 100644
--- a/src/screens/Transfer/index.tsx
+++ b/src/screens/Transfer/index.tsx
@@ -2,8 +2,8 @@
 import _ from 'lodash';
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import styles from './styles';
-import { ScrollView, View, Text, ToastAndroid } from 'react-native';
+import { common, margin } from '../../assets/styles';
+import { View, Text, ToastAndroid } from 'react-native';
 import InputBox from '../../components/InputBox';
 import Button from '../../components/Button';
 import { RootState } from '../../redux/reducers';
@@ -13,6 +13,7 @@ import showPopup from '../../components/Popup';
 import AsyncModalSelect from '../../components/AsyncModalSelect';
 import { searchInternalLocations } from '../../redux/actions/locations';
 import InputSpinner from '../../components/InputSpinner';
+import { ContentContainer, ContentFooter, ContentBody } from '../../components/ContentLayout';
 
 const Transfer = () => {
   const route = useRoute();
@@ -135,61 +136,54 @@ const Transfer = () => {
   };
 
   return (
-    <ScrollView>
-      <View style={styles.container}>
-        <View style={styles.from}>
-          <InputBox disabled editable={false} label={'Product Code'} value={item?.product?.productCode} />
-          <InputBox
-            disabled
-            editable={false}
-            label={'Lot Number'}
-            value={item?.inventoryItem?.lotNumber ?? 'Default'}
-          />
-          <InputBox
-            disabled
-            editable={false}
-            label={'Expiration Date'}
-            value={item?.inventoryItem?.expirationDate ?? 'Never'}
-          />
-          <InputBox disabled value={item?.binLocation?.name ?? 'Default'} label={'From'} editable={false} />
-          <InputBox
-            disabled
-            label={'Quantity Available to Transfer'}
-            value={item?.quantityAvailableToPromise?.toString()}
-            editable={false}
-          />
-          <View style={styles.inputBin}>
-            <Text>Bin Location</Text>
-            <AsyncModalSelect
-              placeholder="Bin Location"
-              label="Bin Location"
-              initValue={binToLocationData?.label || ''}
-              initialData={internalLocations}
-              searchAction={searchInternalLocations}
-              searchActionParams={{ 'parentLocation.id': location.id }}
-              onSelect={(selectedItem: any) => {
-                if (selectedItem) {
-                  setBinToLocationData(selectedItem);
-                }
-              }}
-            />
-          </View>
-          <View style={styles.inputSpinner}>
-            <InputSpinner title="Quantity to Transfer" value={quantity} setValue={setQuantity} />
-          </View>
-        </View>
-        <View style={styles.bottom}>
-          <Button
-            title="TRANSFER"
-            style={{
-              marginTop: 8
+    <ContentContainer>
+      <ContentBody>
+        <InputBox disabled editable={false} label={'Product Code'} value={item?.product?.productCode} />
+        <InputBox disabled editable={false} label={'Lot Number'} value={item?.inventoryItem?.lotNumber ?? 'Default'} />
+        <InputBox
+          disabled
+          editable={false}
+          label={'Expiration Date'}
+          value={item?.inventoryItem?.expirationDate ?? 'Never'}
+        />
+        <InputBox disabled value={item?.binLocation?.name ?? 'Default'} label={'From'} editable={false} />
+        <InputBox
+          disabled
+          label={'Quantity Available to Transfer'}
+          value={item?.quantityAvailableToPromise?.toString()}
+          editable={false}
+        />
+        <View style={margin.MT3}>
+          <Text>Bin Location</Text>
+          <AsyncModalSelect
+            placeholder="Bin Location"
+            label="Bin Location"
+            initValue={binToLocationData?.label || ''}
+            initialData={internalLocations}
+            searchAction={searchInternalLocations}
+            searchActionParams={{ 'parentLocation.id': location.id }}
+            onSelect={(selectedItem: any) => {
+              if (selectedItem) {
+                setBinToLocationData(selectedItem);
+              }
             }}
-            disabled={binToLocationData && quantity <= 0}
-            onPress={onTransfer}
           />
         </View>
-      </View>
-    </ScrollView>
+        <View style={[common.containerCenter, margin.MT3]}>
+          <InputSpinner title="Quantity to Transfer" value={quantity} setValue={setQuantity} />
+        </View>
+      </ContentBody>
+      <ContentFooter>
+        <Button
+          title="TRANSFER"
+          style={{
+            marginTop: 8
+          }}
+          disabled={binToLocationData && quantity <= 0}
+          onPress={onTransfer}
+        />
+      </ContentFooter>
+    </ContentContainer>
   );
 };
 
diff --git a/src/screens/Transfer/styles.ts b/src/screens/Transfer/styles.ts
deleted file mode 100644
index 30062bac..00000000
--- a/src/screens/Transfer/styles.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { colors, ratio } from '../../constants';
-
-export default StyleSheet.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 20
-  },
-  from: {
-    flex: 1
-  },
-  bottom: {
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: ratio.height * 100
-  },
-  button: {
-    width: '80%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: colors.headerColor,
-    borderRadius: 5,
-    padding: 15,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 1,
-    shadowRadius: 5,
-    elevation: 10
-  },
-  inputSpinner: {
-    flex: 1,
-    alignItems: 'center'
-  },
-  inputBin: {
-    marginTop: 20,
-    flex: 1
-  }
-});
diff --git a/src/screens/Transfers/index.tsx b/src/screens/Transfers/index.tsx
index 6c0f16bf..73e7d29b 100644
--- a/src/screens/Transfers/index.tsx
+++ b/src/screens/Transfers/index.tsx
@@ -1,16 +1,18 @@
 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 } from 'react-native';
 import { connect } from 'react-redux';
 import { hideScreenLoading, showScreenLoading } from '../../redux/actions/main';
 import { RootState } from '../../redux/reducers';
-import styles from './styles';
 import EmptyView from '../../components/EmptyView';
 import { getStockTransfers } from '../../redux/actions/transfers';
 import showPopup from '../../components/Popup';
 import { Card } from 'react-native-paper';
-import { LayoutStyle } from '../../assets/styles';
+import { common } from '../../assets/styles';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import DetailsTable from '../../components/DetailsTable';
+import { ContentContainer, ContentBody } from '../../components/ContentLayout';
 
 class Transfers extends React.Component<Props, State> {
   constructor(props: Props) {
@@ -19,6 +21,7 @@ class Transfers extends React.Component<Props, State> {
       error: null,
       transfersList: null
     };
+    this.renderItems = this.renderItems.bind(this);
   }
   componentDidMount() {
     this._getTransfersList();
@@ -75,55 +78,37 @@ class Transfers extends React.Component<Props, State> {
     });
   };
 
+  renderItems(item: ListRenderItemInfo<any>) {
+    const renderItemData: LabeledDataType[] = [
+      { label: 'Identify', value: item.item?.orderNumber },
+      { label: 'Status', value: item.item?.status.name },
+      { label: 'Origin', value: item.item?.origin?.name },
+      { label: 'Destination', value: item.item?.destination?.name },
+      { label: 'Number of Items', value: item.item?.orderItems?.length }
+    ];
+
+    return (
+      <Card style={common.listItemContainer} onPress={() => this.onStockTransfersTapped(item.item)}>
+        <Card.Content>
+          <DetailsTable data={renderItemData} />
+        </Card.Content>
+      </Card>
+    );
+  }
+
   render() {
     const { transfersList } = this.state;
     return (
-      <View style={styles.screenContainer}>
-        {transfersList ? (
-          <View style={styles.contentContainer}>
-            <FlatList
-              data={transfersList}
-              ListEmptyComponent={<EmptyView title="Transfers" description="There are no items for Transfer" />}
-              renderItem={(item: ListRenderItemInfo<any>) => (
-                <Card style={LayoutStyle.listItemContainer} onPress={() => this.onStockTransfersTapped(item.item)}>
-                  <Card.Content>
-                    <View style={styles.row}>
-                      <View style={styles.col50}>
-                        <Text style={styles.label}>Identify</Text>
-                        <Text style={styles.value}>{item.item?.orderNumber}</Text>
-                      </View>
-                      <View style={styles.col50}>
-                        <Text style={styles.label}>Status</Text>
-                        <Text style={styles.value}>{item.item?.status.name}</Text>
-                      </View>
-                    </View>
-
-                    <View style={styles.row}>
-                      <View style={styles.col50}>
-                        <Text style={styles.label}>Origin</Text>
-                        <Text style={styles.value}>{item.item?.origin?.name}</Text>
-                      </View>
-                      <View style={styles.col50}>
-                        <Text style={styles.label}>Destination</Text>
-                        <Text style={styles.value}>{item.item?.destination?.name}</Text>
-                      </View>
-                    </View>
-
-                    <View style={styles.row}>
-                      <View style={styles.col50}>
-                        <Text style={styles.label}>Number of Items</Text>
-                        <Text style={styles.value}>{item.item?.orderItems?.length}</Text>
-                      </View>
-                    </View>
-                  </Card.Content>
-                </Card>
-              )}
-              keyExtractor={(item) => item.id}
-              style={styles.list}
-            />
-          </View>
-        ) : null}
-      </View>
+      <ContentContainer>
+        <ContentBody>
+          <FlatList
+            data={transfersList}
+            ListEmptyComponent={<EmptyView title="Transfers" description="There are no items for Transfer" />}
+            renderItem={this.renderItems}
+            keyExtractor={(item) => item.id}
+          />
+        </ContentBody>
+      </ContentContainer>
     );
   }
 }
diff --git a/src/screens/Transfers/styles.ts b/src/screens/Transfers/styles.ts
deleted file mode 100644
index 25d845af..00000000
--- a/src/screens/Transfers/styles.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
-
-export default StyleSheet.create({
-  screenContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    zIndex: -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'
-  },
-  list: {
-    width: '100%'
-  },
-  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: 14,
-    marginTop: 5,
-    color: Theme.colors.text
-  }
-});
diff --git a/src/screens/TransfersDetails/index.tsx b/src/screens/TransfersDetails/index.tsx
index 896a2142..d0f9738e 100644
--- a/src/screens/TransfersDetails/index.tsx
+++ b/src/screens/TransfersDetails/index.tsx
@@ -1,15 +1,16 @@
-/* eslint-disable no-undef */
 import React, { useEffect, useState } from 'react';
-import { FlatList, Text, View, ScrollView, ListRenderItemInfo, ToastAndroid } from 'react-native';
+import { FlatList, ListRenderItemInfo, ToastAndroid } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import styles from './styles';
 import { Card } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 import showPopup from '../../components/Popup';
 import { getStockTransfersSummary, completeStockTransfer } from '../../redux/actions/transfers';
 import EmptyView from '../../components/EmptyView';
 import Button from '../../components/Button';
-import { LayoutStyle } from '../../assets/styles';
+import { common } from '../../assets/styles';
+import DetailsTable from '../../components/DetailsTable';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import { ContentContainer, ContentFooter, ContentBody } from '../../components/ContentLayout';
 
 const TransferDetails = () => {
   const route = useRoute();
@@ -69,85 +70,63 @@ const TransferDetails = () => {
     dispatch(completeStockTransfer(stockTransfer?.id, callback));
   };
 
-  const RenderData = ({ title, subText }: any): JSX.Element => {
-    return (
-      <View style={styles.columnItem}>
-        <Text style={styles.label}>{title}</Text>
-        <Text style={styles.value}>{subText}</Text>
-      </View>
-    );
-  };
+  const RenderTransferItem: React.FC = () => {
+    const renderTransferItemData: LabeledDataType[] = [
+      { label: 'Order Number', value: transferDetail?.stockTransferNumber },
+      { label: 'Status', value: transferDetail?.status },
+      { label: 'Origin', value: transferDetail?.['origin.name'] },
+      { label: 'Destination', value: transferDetail?.['destination.name'] },
+      { label: 'Description', value: transferDetail?.description },
+      { label: 'Number of Items', value: transferDetail?.stockTransferItems?.length },
+      { label: 'Created Date', value: transferDetail?.dateCreated }
+    ];
 
-  const renderTransferItem = (): JSX.Element => {
     return (
-      <Card style={LayoutStyle.listItemContainer}>
+      <Card style={common.listItemContainer}>
         <Card.Content>
-          <View style={styles.rowItem}>
-            <RenderData title={'Order Number'} subText={transferDetail?.stockTransferNumber} />
-            <RenderData title={'Status'} subText={transferDetail?.status} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderData title={'Origin'} subText={transferDetail?.['origin.name']} />
-            <RenderData title={'Destination'} subText={transferDetail?.['destination.name']} />
-          </View>
-
-          <View style={styles.rowItem}>
-            <RenderData title={'Description'} subText={transferDetail?.description} />
-            <RenderData title={'Number of Items'} subText={transferDetail?.stockTransferItems?.length} />
-          </View>
-
-          <View style={styles.rowItem}>
-            <RenderData title={'Created Date'} subText={transferDetail?.dateCreated} />
-          </View>
+          <DetailsTable data={renderTransferItemData} />
         </Card.Content>
       </Card>
     );
   };
 
-  const renderListItem = (item: any, index: any) => {
+  const renderListItem = (item: any) => {
+    const renderListItemData: LabeledDataType[] = [
+      { label: 'Product Code', value: item?.['product.productCode'] },
+      { label: 'Product Name', value: item?.['product.name'] },
+      { label: 'Origin Bin Location', value: item?.['originBinLocation.name'] },
+      { label: 'Destination Bin Location', value: item?.['destinationBinLocation.name'] },
+      { label: 'Quantity', value: item.quantity },
+      { label: 'Quantity OnHand', value: item.quantityOnHand },
+      { label: 'Status', value: item.status }
+    ];
+
     return (
-      <Card key={index} style={LayoutStyle.listItemContainer}>
+      <Card key={item?.['product.productCode']} style={common.listItemContainer}>
         <Card.Content>
-          <View style={styles.rowItem}>
-            <RenderData title={'Product Code'} subText={item?.['product.productCode']} />
-            <RenderData title={'Product Name'} subText={item?.['product.name']} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderData title={'Origin Bin Location'} subText={item?.['originBinLocation.name']} />
-            <RenderData title={'Destination Bin Location'} subText={item?.['destinationBinLocation.name']} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderData title={'Quantity'} subText={item.quantity} />
-            <RenderData title={'Quantity OnHand'} subText={item.quantityOnHand} />
-          </View>
-
-          <View style={styles.rowItem}>
-            <RenderData title={'Status'} subText={item.status} />
-          </View>
+          <DetailsTable data={renderListItemData} />
         </Card.Content>
       </Card>
     );
   };
   return (
-    <View style={styles.mainContainer}>
-      <ScrollView contentContainerStyle={styles.mainContainer}>
-        {renderTransferItem()}
-
-        {transferDetail?.stockTransferItems?.length > 0 ? (
+    <ContentContainer>
+      <ContentBody>
+        <RenderTransferItem />
+        {transferDetail?.stockTransferItems?.length > 0 && (
           <FlatList
             data={transferDetail?.stockTransferItems}
             horizontal={false}
             numColumns={1}
             ListEmptyComponent={<EmptyView title="Transfers" description="There are no items for Transfer" />}
-            renderItem={(item: ListRenderItemInfo<any>) => renderListItem(item?.item, item.index)}
+            renderItem={(item: ListRenderItemInfo<any>) => renderListItem(item?.item)}
           />
-        ) : null}
-      </ScrollView>
-
-      <View style={styles.bottom}>
+        )}
+      </ContentBody>
+      <ContentFooter>
         <Button title="Complete Transfer" onPress={() => completeTransfers(transferDetail)} />
-      </View>
-    </View>
+      </ContentFooter>
+    </ContentContainer>
   );
 };
 export default TransferDetails;
diff --git a/src/screens/TransfersDetails/styles.tsx b/src/screens/TransfersDetails/styles.tsx
deleted file mode 100644
index 78dd08a9..00000000
--- a/src/screens/TransfersDetails/styles.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-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%'
-  },
-  bottom: {
-    alignSelf: 'center',
-    justifyContent: 'center',
-    height: 55,
-    bottom: 25,
-    marginTop: 20
-  }
-});
diff --git a/src/screens/ViewAvailableItem/index.tsx b/src/screens/ViewAvailableItem/index.tsx
index dbdd7b74..efdc1c18 100644
--- a/src/screens/ViewAvailableItem/index.tsx
+++ b/src/screens/ViewAvailableItem/index.tsx
@@ -1,14 +1,16 @@
-/* eslint-disable react-native/no-inline-styles */
 import { useNavigation, useRoute } from '@react-navigation/native';
 import React, { useState } from 'react';
 import { Image, View } from 'react-native';
+import { common } from '../../assets/styles';
 import styles from './styles';
 import { Card } from 'react-native-paper';
-import RenderData from '../../components/RenderData';
 import Button from '../../components/Button';
 import DefaultProductImage from '../../assets/images/default-product.png';
+import DetailsTable from '../../components/DetailsTable';
+import { Props as LabeledDataType } from '../../components/LabeledData/types';
+import { ContentContainer, ContentFooter, ContentBody } from '../../components/ContentLayout';
 
-const ViewAvailableItem = () => {
+const ViewAvailableItem: React.FC = () => {
   const route = useRoute();
   const navigation = useNavigation();
   const [availableItems, setavailableItems] = useState(route?.params?.item);
@@ -34,32 +36,33 @@ const ViewAvailableItem = () => {
   const navigateToTransfer = () => {
     navigation.navigate('Transfer', { item: availableItems });
   };
+
+  const renderData: LabeledDataType[] = [
+    { label: 'Product Code', value: availableItems?.product.productCode },
+    { label: 'Product Name', value: availableItems?.product.name },
+    { label: 'Lot Number', value: availableItems?.inventoryItem?.lotNumber, defaultValue: 'Default' },
+    { label: 'Expiration Date', value: availableItems?.inventoryItem?.expirationDate, defaultValue: 'Never' },
+    { label: 'Location Name', value: availableItems?.binLocation?.name, defaultValue: 'Default' },
+    { label: 'Location Type', value: availableItems?.binLocation?.locationType?.name, defaultValue: 'Never' }
+  ];
+
   return (
-    <View style={styles.container}>
-      <Card style={styles.from}>
-        <Card.Content>
-          <View style={{ width: '100%', alignItems: 'center', flex: 0 }}>
-            <Image style={{ width: 150, height: 150, resizeMode: 'contain' }} source={source} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderData title={'Product Code'} subText={availableItems?.product.productCode} />
-            <RenderData title={'Product Name'} subText={availableItems?.product.name} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderData title={'Lot Number'} subText={availableItems?.inventoryItem?.lotNumber ?? 'Default'} />
-            <RenderData title={'Expiration Date'} subText={availableItems?.inventoryItem?.expirationDate ?? 'Never'} />
-          </View>
-          <View style={styles.rowItem}>
-            <RenderData title={'Location Name'} subText={availableItems?.binLocation?.name ?? 'Default'} />
-            <RenderData title={'Location Type'} subText={availableItems?.binLocation?.locationType?.name ?? 'Never'} />
-          </View>
-        </Card.Content>
-      </Card>
-      <View style={styles.button}>
-        <Button title={'Adjust Stock'} onPress={navigateToAdjustStock} />
-        <Button title={'Transfer'} onPress={navigateToTransfer} />
-      </View>
-    </View>
+    <ContentContainer>
+      <ContentBody>
+        <Card style={common.flex1}>
+          <Card.Content>
+            <View style={common.containerCenter}>
+              <Image style={styles.itemImage} source={source} />
+            </View>
+            <DetailsTable data={renderData} />
+          </Card.Content>
+        </Card>
+      </ContentBody>
+      <ContentFooter gap={5}>
+        <Button title={'Adjust Stock'} size={'default'} onPress={navigateToAdjustStock} />
+        <Button title={'Transfer'} size={'default'} onPress={navigateToTransfer} />
+      </ContentFooter>
+    </ContentContainer>
   );
 };
 export default ViewAvailableItem;
diff --git a/src/screens/ViewAvailableItem/styles.ts b/src/screens/ViewAvailableItem/styles.ts
index 1317f5dc..dc62f850 100644
--- a/src/screens/ViewAvailableItem/styles.ts
+++ b/src/screens/ViewAvailableItem/styles.ts
@@ -1,34 +1,9 @@
 import { StyleSheet } from 'react-native';
-import Theme from '../../utils/Theme';
-import { ratio } from '../../constants';
 
 export default StyleSheet.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1
-  },
-  from: {
-    flex: 1
-  },
-  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%'
-  },
-  button: {
-    flexDirection: 'row',
-    width: '63%',
-    height: ratio.height * 100
+  itemImage: {
+    width: 150,
+    height: 150,
+    resizeMode: 'contain'
   }
 });