diff --git a/package-lock.json b/package-lock.json
index 014ff1f6e..f3b588952 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "treetracker-admin-client",
-  "version": "1.42.1",
+  "version": "1.47.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "treetracker-admin-client",
-      "version": "1.42.1",
+      "version": "1.47.0",
       "dependencies": {
         "@date-io/date-fns": "^1.3.13",
         "@material-ui/core": "^4.9.10",
@@ -29,6 +29,7 @@
         "env-cmd": "^10.1.0",
         "generate-password": "^1.5.1",
         "geocoder": "*",
+        "geolib": "^3.3.3",
         "i": "*",
         "import": "*",
         "install": "*",
@@ -18145,6 +18146,11 @@
         "xml2js": "0.2.0"
       }
     },
+    "node_modules/geolib": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/geolib/-/geolib-3.3.3.tgz",
+      "integrity": "sha512-YO704pzdB/8QQekQuDmFD5uv5RAwAf4rOUPdcMhdEOz+HoPWD0sC7Qqdwb+LAvwIjXVRawx0QgZlocKYh8PFOQ=="
+    },
     "node_modules/get-assigned-identifiers": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/get-assigned-identifiers/-/get-assigned-identifiers-1.2.0.tgz",
@@ -27369,11 +27375,6 @@
         "safer-buffer": "^2.0.2",
         "tweetnacl": "~0.14.0"
       },
-      "bin": {
-        "sshpk-conv": "bin/sshpk-conv",
-        "sshpk-sign": "bin/sshpk-sign",
-        "sshpk-verify": "bin/sshpk-verify"
-      },
       "engines": {
         "node": ">=0.10.0"
       }
@@ -52121,6 +52122,11 @@
         "xml2js": "0.2.0"
       }
     },
+    "geolib": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/geolib/-/geolib-3.3.3.tgz",
+      "integrity": "sha512-YO704pzdB/8QQekQuDmFD5uv5RAwAf4rOUPdcMhdEOz+HoPWD0sC7Qqdwb+LAvwIjXVRawx0QgZlocKYh8PFOQ=="
+    },
     "get-assigned-identifiers": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/get-assigned-identifiers/-/get-assigned-identifiers-1.2.0.tgz",
diff --git a/package.json b/package.json
index 71b3f5470..799da58c7 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "env-cmd": "^10.1.0",
     "generate-password": "^1.5.1",
     "geocoder": "*",
+    "geolib": "^3.3.3",
     "i": "*",
     "import": "*",
     "install": "*",
diff --git a/src/components/CaptureMatching/CandidateImages.js b/src/components/CaptureMatching/CandidateImages.js
index b57651f14..e42188752 100644
--- a/src/components/CaptureMatching/CandidateImages.js
+++ b/src/components/CaptureMatching/CandidateImages.js
@@ -1,18 +1,29 @@
 import React, { useState, useEffect } from 'react';
 
-import { Typography, Box, Button, Grid, Paper } from '@material-ui/core';
+import {
+  Typography,
+  Box,
+  Button,
+  Grid,
+  Paper,
+  Tooltip,
+} from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import CheckIcon from '@material-ui/icons/Check';
 import ClearIcon from '@material-ui/icons/Clear';
+import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import LocationOnOutlinedIcon from '@material-ui/icons/LocationOnOutlined';
 import theme from '../common/theme';
+import { getDateStringLocale } from 'common/locale';
+import { getDistance } from 'geolib';
 
 const useStyles = makeStyles({
   containerBox: {
     marginTop: 0,
     marginBottom: theme.spacing(5),
-    paddingBottom: theme.spacing(2),
     background: '#fff',
     borderRadius: '4px',
+    overflow: 'hidden',
   },
 
   headerBox: {
@@ -21,26 +32,19 @@ const useStyles = makeStyles({
 
   imgContainer: {
     height: '100%',
-    padding: '5px',
     objectFit: 'cover',
-    paddingBottom: '10px',
-    overFlow: 'hidden',
   },
   gridList: {
-    padding: '10px',
+    padding: theme.spacing(0, 4),
     display: 'flex',
     flexDirection: 'row',
     overflowX: 'auto',
     overflowY: 'hidden',
-  },
-
-  imageScroll: {
-    // height: '76vh',
-    // overflow: 'scroll',
+    gap: theme.spacing(2),
   },
 
   candidateImgBtn: {
-    padding: theme.spacing(5, 4),
+    padding: theme.spacing(4),
     display: 'flex',
     gap: theme.spacing(2),
   },
@@ -48,28 +52,80 @@ const useStyles = makeStyles({
     fontSize: '16px',
   },
   box2: {
+    display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'baseline',
-    padding: '8px 16px',
+    padding: theme.spacing(2),
   },
   box3: {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
+    gap: theme.spacing(2),
   },
   box1: {
     width: '24px',
     height: '24px',
-    backgroundColor: '#75B926',
+    lineHeight: '24px',
+    color: theme.palette.primary.main,
+    border: `solid 1px ${theme.palette.primary.main}`,
+    borderRadius: '50%',
+    textAlign: 'center',
+  },
+  candidateCaptureContainer: {
+    height: '300px',
+    position: 'relative',
+  },
+  captureInfo: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
     display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: 'white',
+    flexDirection: 'row',
+    background: 'rgba(0,0,0,0.7)',
+    color: theme.palette.primary.main,
+  },
+  captureInfoDetail: {
+    display: 'flex',
+    flexDirection: 'row',
+    padding: theme.spacing(2),
+    gap: theme.spacing(1),
+  },
+  candidateTreeContent: {
+    transition: 'max-height 250ms ease-in-out',
   },
 });
 
-function CandidateImages({ candidateImgData, sameTreeHandler }) {
+function DistanceTo({ lat1, lon1, lat2, lon2 }) {
+  const [content, setContent] = useState('');
+  if (
+    lat1 === 'undefined' ||
+    lon1 === 'undefined' ||
+    lat2 === 'undefined' ||
+    lon2 === 'undefined'
+  ) {
+    setContent('');
+  }
+
+  useEffect(() => {
+    const distance = getDistance(
+      {
+        latitude: lat1,
+        longitude: lon1,
+      },
+      {
+        latitude: lat2,
+        longitude: lon2,
+      }
+    );
+    setContent(`${distance}m away`);
+  }, []);
+
+  return <span>{content}</span>;
+}
+
+function CandidateImages({ capture, candidateImgData, sameTreeHandler }) {
   const classes = useStyles();
 
   const [showBox, setShowBox] = useState([]);
@@ -106,73 +162,90 @@ function CandidateImages({ candidateImgData, sameTreeHandler }) {
                 >
                   <Box className={classes.box3}>
                     <Paper elevation={0} className={classes.box1}>
-                      {++i}
+                      {i + 1}
                     </Paper>
-                    <Typography variant="h5" style={{ padding: '10px' }}>
-                      Tree {tree.tree_id}
-                    </Typography>
+                    <Tooltip title={tree.id}>
+                      <Typography variant="h5">
+                        Tree {(tree.id + '').substring(0, 10) + '...'}
+                      </Typography>
+                    </Tooltip>
                   </Box>
                   <Box>{/* button */}</Box>
                 </Grid>
               </Box>
 
-              {showBox.includes(tree.id) ? (
-                <Box>
-                  {tree.captures.length ? (
-                    <Box className={classes.gridList} cols={3}>
-                      {tree.captures.map((capture) => {
-                        return (
-                          <Box
-                            style={{ height: '300px', color: 'blue' }}
-                            key={capture.id}
-                          >
-                            <img
-                              className={classes.imgContainer}
-                              src={capture.image_url}
-                              alt={`Candidate capture ${capture.id}`}
-                            />
+              <Box
+                className={classes.candidateTreeContent}
+                style={{
+                  maxHeight: showBox.includes(tree.id) ? '400px' : '0px',
+                }}
+              >
+                <Box className={classes.gridList} cols={3}>
+                  {(tree.captures.length ? tree.captures : [tree]).map(
+                    (candidateCapture) => {
+                      return (
+                        <Box
+                          key={`${tree.id}_${candidateCapture.id}`}
+                          className={classes.candidateCaptureContainer}
+                        >
+                          <img
+                            className={classes.imgContainer}
+                            src={candidateCapture.image_url}
+                            alt={`Candidate capture ${candidateCapture.id}`}
+                          />
+                          <Box className={classes.captureInfo}>
+                            <Box className={classes.captureInfoDetail}>
+                              <AccessTimeIcon />
+                              <Typography variant="body1">
+                                {getDateStringLocale(
+                                  candidateCapture.created_at
+                                )}
+                              </Typography>
+                            </Box>
+                            <Box className={classes.captureInfoDetail}>
+                              <LocationOnOutlinedIcon />
+                              <Typography variant="body1">
+                                {capture && (
+                                  <DistanceTo
+                                    lat1={capture.lat}
+                                    lon1={capture.lon}
+                                    lat2={candidateCapture.lat}
+                                    lon2={candidateCapture.lon}
+                                  />
+                                )}
+                              </Typography>
+                            </Box>
                           </Box>
-                        );
-                      })}
-                    </Box>
-                  ) : (
-                    <Box
-                      style={{ height: '300px', color: 'blue' }}
-                      key={tree.id}
-                    >
-                      <img
-                        className={classes.imgContainer}
-                        src={tree.image_url}
-                        alt={`Candidate capture ${tree.id}`}
-                      />
-                    </Box>
+                        </Box>
+                      );
+                    }
                   )}
+                </Box>
 
-                  <Box className={classes.candidateImgBtn}>
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      startIcon={<CheckIcon />}
-                      onClick={() => sameTreeHandler(tree.id)}
-                      style={{ color: 'white' }}
-                      className={classes.button}
-                    >
-                      Same Tree
-                    </Button>
-                    <Button
-                      id={tree.tree_id}
-                      variant="outlined"
-                      color="primary"
-                      startIcon={<ClearIcon />}
-                      onClick={() => hideImgBox(tree.id)}
-                      className={classes.button}
-                      value={i}
-                    >
-                      Different Tree
-                    </Button>
-                  </Box>
+                <Box className={classes.candidateImgBtn}>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    startIcon={<CheckIcon />}
+                    onClick={() => sameTreeHandler(tree.id)}
+                    style={{ color: 'white' }}
+                    className={classes.button}
+                  >
+                    Confirm Match
+                  </Button>
+                  <Button
+                    id={tree.tree_id}
+                    variant="outlined"
+                    color="primary"
+                    startIcon={<ClearIcon />}
+                    onClick={() => hideImgBox(tree.id)}
+                    className={classes.button}
+                    value={i}
+                  >
+                    Dismiss
+                  </Button>
                 </Box>
-              ) : null}
+              </Box>
             </Paper>
           );
         })}
diff --git a/src/components/CaptureMatching/CaptureHeader.js b/src/components/CaptureMatching/CaptureHeader.js
index 510bb1c47..e524de2d5 100644
--- a/src/components/CaptureMatching/CaptureHeader.js
+++ b/src/components/CaptureMatching/CaptureHeader.js
@@ -7,7 +7,6 @@ import PhotoCameraOutlinedIcon from '@material-ui/icons/PhotoCameraOutlined';
 import { makeStyles } from '@material-ui/core/styles';
 import Pagination from '@material-ui/lab/Pagination';
 import FilterListIcon from '@material-ui/icons/FilterList';
-import Chip from '@material-ui/core/Chip';
 
 const useStyles = makeStyles((t) => ({
   containerBox: {
@@ -40,7 +39,6 @@ const useStyles = makeStyles((t) => ({
 
 function CaptureHeader(props) {
   const classes = useStyles();
-
   const { currentPage, handleChange, imgCount, noOfPages } = props;
 
   const iconImgLogo = (
@@ -57,13 +55,6 @@ function CaptureHeader(props) {
             imgCount={imgCount}
           />
           <Box className={classes.box2}>
-            <Box className={classes.box3}>
-              <Chip
-                onDelete={() => console.warn('delete')}
-                label={'My Organization'}
-              />
-              <Chip onDelete={() => console.warn('delete')} label={'Mongo'} />
-            </Box>
             <FilterListIcon htmlColor="#6E6E6E" className={classes.class1} />
             <Pagination
               count={noOfPages}
diff --git a/src/components/CaptureMatching/CaptureImage.js b/src/components/CaptureMatching/CaptureImage.js
index 8841a5bd9..c41280dfb 100644
--- a/src/components/CaptureMatching/CaptureImage.js
+++ b/src/components/CaptureMatching/CaptureImage.js
@@ -58,13 +58,20 @@ const useStyles = makeStyles((theme) => ({
   },
 
   imgBox: {
-    // height: '52vh',
     flexGrow: 1,
     overflow: 'auto',
+    display: 'flex',
+    justifyContent: 'center',
+    padding: theme.spacing(2),
   },
 
   imgContainer: {
-    width: '100%',
+    objectFit: 'contain',
+  },
+  captureInfo: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2),
   },
   box1: {
     height: '100%',
@@ -83,8 +90,7 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   button: {
-    width: 71,
-    height: 31,
+    height: '100%',
   },
 }));
 
@@ -128,30 +134,30 @@ function CaptureImage(props) {
                       Capture {(capture.id + '').substring(0, 10) + '...'}
                     </Typography>
                   </Tooltip>
-                  <Box className={classes.box3}>
-                    <AccessTimeIcon />
-                    <Typography variant="body1">
-                      {getDateTimeStringLocale(capture.created_at)}
-                    </Typography>
-                  </Box>
-
-                  <Box className={classes.box3}>
-                    <LocationOnOutlinedIcon />
-                    <Typography variant="body1">
-                      <Country lat={capture.lat} lon={capture.lon} />
-                    </Typography>
+                  <Box className={classes.captureInfo}>
+                    <Box className={classes.box3}>
+                      <AccessTimeIcon />
+                      <Typography variant="body1">
+                        {getDateTimeStringLocale(capture.created_at)}
+                      </Typography>
+                    </Box>
+                    <Box className={classes.box3}>
+                      <LocationOnOutlinedIcon />
+                      <Typography variant="body1">
+                        <Country lat={capture.lat} lon={capture.lon} />
+                      </Typography>
+                    </Box>
                   </Box>
-                  {/* <UseLocation/> */}
                 </Box>
 
                 <Grower
-                  planter_photo_url={capture.planter_photo_url}
-                  planter_username={capture.planter_username}
-                  status={capture.status}
+                  grower_photo_url={capture.grower_photo_url}
+                  grower_username={capture.grower_username}
+                  planting_organization_id={capture.planting_organization_id}
                 />
 
                 <Button
-                  variant="outlined"
+                  variant="text"
                   color="primary"
                   onClick={handleSkip}
                   className={classes.button}
diff --git a/src/components/CaptureMatching/CaptureMatchingView.js b/src/components/CaptureMatching/CaptureMatchingView.js
index 0813a792f..92659ece3 100644
--- a/src/components/CaptureMatching/CaptureMatchingView.js
+++ b/src/components/CaptureMatching/CaptureMatchingView.js
@@ -168,6 +168,7 @@ function CaptureMatchingView() {
           </Box>
           <Box height={14} />
           <CandidateImages
+            capture={captureImages && captureImages[0]}
             candidateImgData={candidateImgData}
             sameTreeHandler={sameTreeHandler}
           />
diff --git a/src/components/CaptureMatching/Grower.js b/src/components/CaptureMatching/Grower.js
index c1d60ea58..29d10d475 100644
--- a/src/components/CaptureMatching/Grower.js
+++ b/src/components/CaptureMatching/Grower.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
 import { Avatar, Typography, Box } from '@material-ui/core';
@@ -13,22 +13,30 @@ const useStyles = makeStyles((theme) => ({
     gap: 12,
   },
   avatar: {
-    width: 72,
-    height: 72,
+    width: 48,
+    height: 48,
   },
   box2: {},
 }));
-function Grower({ planter_photo_url, planter_username, status }) {
+function Grower({
+  grower_photo_url,
+  grower_username,
+  planting_organization_id,
+}) {
   const classes = useStyles();
+  const [organizationName, setOrganizationName] = useState('');
+
+  useEffect(() => {
+    // To do: get organization name from app context when available
+    setOrganizationName('');
+  }, [planting_organization_id]);
+
   return (
     <Box className={classes.box1}>
-      <Avatar className={classes.avatar} src={planter_photo_url} />
+      <Avatar className={classes.avatar} src={grower_photo_url} />
       <Box className={classes.box2}>
-        <Typography variant="h5">{planter_username}</Typography>
-        <Typography variant="body1">{/*status*/ 'Other info'}</Typography>
-        <Typography variant="body1" style={{ display: 'none' }}>
-          {status}
-        </Typography>
+        <Typography variant="h5">{grower_username}</Typography>
+        <Typography variant="body1">{organizationName}</Typography>
       </Box>
     </Box>
   );
diff --git a/src/components/OptimizedImage.js b/src/components/OptimizedImage.js
index e620cd12a..8d93bb898 100644
--- a/src/components/OptimizedImage.js
+++ b/src/components/OptimizedImage.js
@@ -9,6 +9,7 @@ export default function OptimizedImage(props) {
     imageSizes = [400, 300, 250, 200],
     fixed,
     rotation,
+    objectFit = 'cover',
     ...rest
   } = props;
 
@@ -47,7 +48,7 @@ export default function OptimizedImage(props) {
         style={{
           position: 'absolute',
           inset: 0,
-          objectFit: 'cover',
+          objectFit,
           width: 'calc(100% + 2px)', // width for image rotation
           height: 'calc(100% + 2px)', // height for image rotation
           transform: `rotate(${rotation}deg)`,