diff --git a/src/components/ProductDetails/index.tsx b/src/components/ProductDetails/index.tsx
index ac381436..4c73ba61 100644
--- a/src/components/ProductDetails/index.tsx
+++ b/src/components/ProductDetails/index.tsx
@@ -1,6 +1,7 @@
 import React, { createContext, useContext } from 'react';
-import { View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { Chip, Divider, Caption as PaperCaption, Title as PaperTitle, Text } from 'react-native-paper';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import { HYPHEN } from '../../constants';
 import Product from '../../data/product/Product';
@@ -10,6 +11,9 @@ export type ProductDetailsItem = {
   icon?: string;
   label: string;
   value: string | number | null;
+  secondaryValue?: string | null;
+  onPress?: () => void;
+  accessibilityLabel?: string;
 };
 
 type ProductContextType = {
@@ -85,20 +89,45 @@ function List({ items }: { items: ProductDetailsItem[] }) {
   return (
     <View>
       {items.map((item) => (
-        <Item key={item.label} icon={item.icon} label={item.label} value={item.value} />
+        <Item key={item.label} {...item} />
       ))}
     </View>
   );
 }
 
-function Item({ icon, label, value }: ProductDetailsItem) {
-  return (
-    <Chip icon={icon} style={[styles.chipDefault, styles.marginTopSmall]}>
-      <Text style={styles.chipText}>
-        {label}: <Text style={[styles.chipText, styles.fontBold]}>{value ?? HYPHEN}</Text>
-      </Text>
-    </Chip>
+function Item({ icon, label, value, secondaryValue, onPress, accessibilityLabel }: ProductDetailsItem) {
+  const content = (
+    <View>
+      <Chip
+        icon={icon}
+        style={[styles.chipDefault, styles.marginTopSmall]}
+        textStyle={onPress ? styles.pressableChipText : undefined}
+      >
+        <Text style={styles.chipText}>
+          {label}: <Text style={[styles.chipText, styles.fontBold]}>{value ?? HYPHEN}</Text>
+          {secondaryValue ? (
+            <Text style={[styles.chipText, styles.secondaryValue]}>{`, ${secondaryValue}`}</Text>
+          ) : null}
+        </Text>
+      </Chip>
+      {onPress ? <Icon name="chevron-right" size={20} style={styles.itemChevron} /> : null}
+    </View>
   );
+
+  if (onPress) {
+    return (
+      <TouchableOpacity
+        activeOpacity={0.7}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        onPress={onPress}
+      >
+        {content}
+      </TouchableOpacity>
+    );
+  }
+
+  return content;
 }
 
 function Separator() {
diff --git a/src/components/ProductDetails/styles.ts b/src/components/ProductDetails/styles.ts
index f6741d80..34e071f1 100644
--- a/src/components/ProductDetails/styles.ts
+++ b/src/components/ProductDetails/styles.ts
@@ -19,13 +19,25 @@ export default StyleSheet.create({
     borderRadius: 4,
     alignItems: 'center'
   },
+  pressableChipText: {
+    paddingRight: 24
+  },
   chipText: {
     fontSize: 12,
     color: Theme.colors.text
   },
+  itemChevron: {
+    position: 'absolute',
+    right: Theme.spacing.small,
+    top: 12,
+    color: Theme.colors.secondaryForeground
+  },
   fontBold: {
     fontWeight: 'bold'
   },
+  secondaryValue: {
+    color: Theme.colors.secondaryForeground
+  },
   title: {
     fontSize: 18,
     color: Theme.colors.text,
diff --git a/src/screens/Picking/CustomerDetails.tsx b/src/screens/Picking/CustomerDetails.tsx
new file mode 100644
index 00000000..2d654dbc
--- /dev/null
+++ b/src/screens/Picking/CustomerDetails.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { Modal, TouchableOpacity, View } from 'react-native';
+import { Divider, Text } from 'react-native-paper';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import { ProductDetails } from '../../components/ProductDetails';
+import { HYPHEN } from '../../constants';
+import { DestinationAddress } from '../../types/picking';
+import styles from './customerDetailsStyles';
+
+type CustomerDetailsProps = {
+  name?: string;
+  address?: DestinationAddress | null;
+};
+
+function compact(parts: Array<string | null | undefined>) {
+  return parts.filter(Boolean).join(', ');
+}
+
+function AddressDetails({ address }: { address?: DestinationAddress | null }) {
+  const addressLine1 = address?.address || HYPHEN;
+  const locality = compact([address?.city, address?.stateOrProvince, address?.postalCode]);
+  const hasAddress = Boolean(
+    address?.address || address?.address2 || locality || address?.country || address?.description
+  );
+
+  return (
+    <>
+      <Text style={styles.addressLine}>{addressLine1}</Text>
+      {address?.address2 ? <Text style={styles.addressLine}>{address.address2}</Text> : null}
+      {locality ? <Text style={styles.addressLine}>{locality}</Text> : null}
+      {address?.country ? <Text style={styles.addressLine}>{address.country}</Text> : null}
+      {address?.description ? <Text style={styles.description}>{address.description}</Text> : null}
+      {!hasAddress ? (
+        <Text style={styles.missingAddress}>No delivery address is available in customer master data.</Text>
+      ) : null}
+    </>
+  );
+}
+
+export function CustomerDetails({ name, address }: CustomerDetailsProps) {
+  const [visible, setVisible] = React.useState(false);
+
+  return (
+    <>
+      <ProductDetails.Item
+        icon="map-marker"
+        label="Customer"
+        value={name || HYPHEN}
+        secondaryValue={address?.address}
+        accessibilityLabel={`View delivery address for ${name || 'customer'}`}
+        onPress={() => setVisible(true)}
+      />
+
+      <Modal transparent visible={visible} animationType="fade" onRequestClose={() => setVisible(false)}>
+        <View style={styles.overlay}>
+          <View style={styles.dialog}>
+            <View style={styles.header}>
+              <View style={styles.headerText}>
+                <Text style={styles.eyebrow}>CUSTOMER</Text>
+                <Text style={styles.title}>{name || HYPHEN}</Text>
+              </View>
+              <TouchableOpacity
+                style={styles.closeButton}
+                accessibilityRole="button"
+                accessibilityLabel="Close customer details"
+                onPress={() => setVisible(false)}
+              >
+                <Icon name="close" size={20} style={styles.closeIcon} />
+              </TouchableOpacity>
+            </View>
+
+            <Divider />
+
+            <View style={styles.addressSection}>
+              <Icon name="map-marker-outline" size={22} style={styles.addressIcon} />
+              <View style={styles.addressText}>
+                <Text style={styles.eyebrow}>SHIP TO ADDRESS</Text>
+                <AddressDetails address={address} />
+              </View>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+}
diff --git a/src/screens/Picking/PickingPickLocationScreen.tsx b/src/screens/Picking/PickingPickLocationScreen.tsx
index b63169be..2e8e9a86 100644
--- a/src/screens/Picking/PickingPickLocationScreen.tsx
+++ b/src/screens/Picking/PickingPickLocationScreen.tsx
@@ -11,6 +11,7 @@ import { EMPTY_STRING, HYPHEN } from '../../constants';
 import { navigate } from '../../NavigationService';
 import { RootState } from '../../redux/reducers';
 import { parseFromISODateToLocaleString } from '../../utils/utils';
+import { CustomerDetails } from './CustomerDetails';
 import { usePickingContext } from './PickingContext';
 import { ReallocateModal } from './ReallocateModal';
 import styles from './styles';
@@ -89,12 +90,12 @@ export default function PickingPickLocationScreen() {
                 icon: 'identifier',
                 label: 'Order Number',
                 value: currentTask.requisitionNumber || HYPHEN
-              },
-              {
-                icon: 'map-marker',
-                label: currentTask.destinationLocationType || 'Destination',
-                value: currentTask.destination || HYPHEN
-              },
+              }
+            ]}
+          />
+          <CustomerDetails name={currentTask.destination} address={currentTask.destinationAddress} />
+          <ProductDetails.List
+            items={[
               {
                 icon: 'package',
                 label: 'Quantity Picked',
diff --git a/src/screens/Picking/PickingPickOutboundContainerScreen.tsx b/src/screens/Picking/PickingPickOutboundContainerScreen.tsx
index 97dc5653..d6187b02 100644
--- a/src/screens/Picking/PickingPickOutboundContainerScreen.tsx
+++ b/src/screens/Picking/PickingPickOutboundContainerScreen.tsx
@@ -11,6 +11,7 @@ import { EMPTY_STRING, HYPHEN } from '../../constants';
 import { navigate } from '../../NavigationService';
 import { ReasonCode } from '../../types/picking';
 import { parseFromISODateToLocaleString } from '../../utils/utils';
+import { CustomerDetails } from './CustomerDetails';
 import { revalidateTaskAndProceed } from './lib';
 import { usePickingContext } from './PickingContext';
 import styles from './styles';
@@ -121,12 +122,12 @@ export default function PickingPickOutboundContainerScreen() {
                 icon: 'identifier',
                 label: 'Order Number',
                 value: currentTask.requisitionNumber || HYPHEN
-              },
-              {
-                icon: 'map-marker',
-                label: currentTask.destinationLocationType || 'Destination',
-                value: currentTask.destination || HYPHEN
-              },
+              }
+            ]}
+          />
+          <CustomerDetails name={currentTask.destination} address={currentTask.destinationAddress} />
+          <ProductDetails.List
+            items={[
               {
                 icon: 'account',
                 label: 'Assignee',
diff --git a/src/screens/Picking/PickingPickProductScreen.tsx b/src/screens/Picking/PickingPickProductScreen.tsx
index b0a469b6..32a32c47 100644
--- a/src/screens/Picking/PickingPickProductScreen.tsx
+++ b/src/screens/Picking/PickingPickProductScreen.tsx
@@ -9,6 +9,7 @@ import { useSearchButton } from '../../components/SearchButton/useSearchButton';
 import { EMPTY_STRING, HYPHEN } from '../../constants';
 import { navigate } from '../../NavigationService';
 import { isProductBarcodeValid, parseFromISODateToLocaleString } from '../../utils/utils';
+import { CustomerDetails } from './CustomerDetails';
 import { usePickingContext } from './PickingContext';
 import styles from './styles';
 
@@ -61,12 +62,12 @@ export default function PickingPickProductScreen() {
                 icon: 'identifier',
                 label: 'Order Number',
                 value: currentTask.requisitionNumber || HYPHEN
-              },
-              {
-                icon: 'map-marker',
-                label: currentTask.destinationLocationType || 'Destination',
-                value: currentTask.destination || HYPHEN
-              },
+              }
+            ]}
+          />
+          <CustomerDetails name={currentTask.destination} address={currentTask.destinationAddress} />
+          <ProductDetails.List
+            items={[
               {
                 icon: 'account',
                 label: 'Assignee',
diff --git a/src/screens/Picking/PickingPickQuantityScreen.tsx b/src/screens/Picking/PickingPickQuantityScreen.tsx
index 59f82555..d9b9b08e 100644
--- a/src/screens/Picking/PickingPickQuantityScreen.tsx
+++ b/src/screens/Picking/PickingPickQuantityScreen.tsx
@@ -13,6 +13,7 @@ import { navigate } from '../../NavigationService';
 import { getReasonCodesAction } from '../../redux/actions/others';
 import { ReasonCode } from '../../types/picking';
 import { parseFromISODateToLocaleString } from '../../utils/utils';
+import { CustomerDetails } from './CustomerDetails';
 import { proceedToNextOrComplete } from './lib';
 import { usePickingContext } from './PickingContext';
 import styles from './styles';
@@ -138,12 +139,12 @@ export default function PickingPickQuantityScreen() {
                   icon: 'identifier',
                   label: 'Order Number',
                   value: currentTask.requisitionNumber || HYPHEN
-                },
-                {
-                  icon: 'map-marker',
-                  label: currentTask.destinationLocationType || 'Destination',
-                  value: currentTask.destination || HYPHEN
-                },
+                }
+              ]}
+            />
+            <CustomerDetails name={currentTask.destination} address={currentTask.destinationAddress} />
+            <ProductDetails.List
+              items={[
                 {
                   icon: 'account',
                   label: 'Assignee',
diff --git a/src/screens/Picking/PickingPickStagingLocationScreen.tsx b/src/screens/Picking/PickingPickStagingLocationScreen.tsx
index dc56893c..5ea77045 100644
--- a/src/screens/Picking/PickingPickStagingLocationScreen.tsx
+++ b/src/screens/Picking/PickingPickStagingLocationScreen.tsx
@@ -9,6 +9,7 @@ import { useSearchButton } from '../../components/SearchButton/useSearchButton';
 import { EMPTY_STRING, HYPHEN } from '../../constants';
 import { resetToRoutes } from '../../NavigationService';
 import { parseFromISODateToLocaleString } from '../../utils/utils';
+import { CustomerDetails } from './CustomerDetails';
 import { usePickingContext } from './PickingContext';
 import styles from './styles';
 
@@ -153,12 +154,12 @@ export default function PickingPickStagingLocationScreen() {
                 icon: 'identifier',
                 label: 'Order Number',
                 value: currentTask.requisitionNumber || HYPHEN
-              },
-              {
-                icon: 'map-marker',
-                label: currentTask.destinationLocationType || 'Destination',
-                value: currentTask.destination || HYPHEN
-              },
+              }
+            ]}
+          />
+          <CustomerDetails name={currentTask.destination} address={currentTask.destinationAddress} />
+          <ProductDetails.List
+            items={[
               {
                 icon: 'account',
                 label: 'Assignee',
diff --git a/src/screens/Picking/customerDetailsStyles.ts b/src/screens/Picking/customerDetailsStyles.ts
new file mode 100644
index 00000000..2fc8e1c1
--- /dev/null
+++ b/src/screens/Picking/customerDetailsStyles.ts
@@ -0,0 +1,84 @@
+import { StyleSheet } from 'react-native';
+
+import Theme from '../../utils/Theme';
+
+export default StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: Theme.spacing.large,
+    backgroundColor: 'rgba(20, 31, 52, 0.55)'
+  },
+  dialog: {
+    width: '100%',
+    maxWidth: 420,
+    overflow: 'hidden',
+    borderRadius: Theme.roundness * 3,
+    backgroundColor: Theme.colors.surface,
+    elevation: 8
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: Theme.spacing.large
+  },
+  headerText: {
+    flex: 1,
+    paddingRight: Theme.spacing.medium
+  },
+  eyebrow: {
+    fontSize: 11,
+    lineHeight: 16,
+    fontWeight: 'bold',
+    letterSpacing: 0.8,
+    color: Theme.colors.disabled
+  },
+  title: {
+    marginTop: 2,
+    fontSize: 18,
+    lineHeight: 24,
+    fontWeight: 'bold',
+    color: Theme.colors.text
+  },
+  closeButton: {
+    width: 36,
+    height: 36,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 18,
+    backgroundColor: Theme.colors.secondaryBackground
+  },
+  closeIcon: {
+    color: Theme.colors.secondaryForeground
+  },
+  addressSection: {
+    flexDirection: 'row',
+    padding: Theme.spacing.large
+  },
+  addressIcon: {
+    marginRight: Theme.spacing.medium,
+    color: Theme.colors.primary
+  },
+  addressText: {
+    flex: 1
+  },
+  addressLine: {
+    fontSize: 15,
+    lineHeight: 21,
+    color: Theme.colors.text
+  },
+  description: {
+    marginTop: Theme.spacing.small,
+    fontSize: 13,
+    lineHeight: 18,
+    color: Theme.colors.secondaryForeground
+  },
+  missingAddress: {
+    marginTop: Theme.spacing.small,
+    fontSize: 13,
+    lineHeight: 18,
+    fontStyle: 'italic',
+    color: Theme.colors.disabled
+  }
+});
diff --git a/src/types/picking.ts b/src/types/picking.ts
index c7b7fda2..66c95ace 100644
--- a/src/types/picking.ts
+++ b/src/types/picking.ts
@@ -26,6 +26,16 @@ export enum PickTaskStatus {
   STAGED = 'STAGED'
 }
 
+export type DestinationAddress = {
+  address: string;
+  address2?: string | null;
+  city?: string | null;
+  stateOrProvince?: string | null;
+  postalCode?: string | null;
+  country?: string | null;
+  description?: string | null;
+};
+
 export type PickTask = {
   id: string;
   identifier: string;
@@ -37,6 +47,7 @@ export type PickTask = {
   requisitionType?: string;
   destination?: string;
   destinationLocationType?: string;
+  destinationAddress?: DestinationAddress | null;
 
   deliveryTypeCode?: DeliveryTypeCode;