diff --git a/src/components/WellShow/AssetPreviewWithOverlay.tsx b/src/components/WellShow/AssetPreviewWithOverlay.tsx
index 93be8c0f..42311964 100644
--- a/src/components/WellShow/AssetPreviewWithOverlay.tsx
+++ b/src/components/WellShow/AssetPreviewWithOverlay.tsx
@@ -24,14 +24,14 @@ const previewStyles = {
   slideshow: {
     image: {
       width: '100%',
+      height: '100%',
       maxWidth: '100%',
-      maxHeight: 400,
       objectFit: 'contain',
       display: 'block',
     },
     frame: {
       width: '100%',
-      height: 400,
+      height: '100%',
       border: 0,
       bgcolor: 'background.paper',
       pointerEvents: 'auto',
@@ -96,6 +96,8 @@ export const AssetPreviewWithOverlay = ({
   variant,
   refetchAssets,
   canManageAsset = false,
+  onViewMore,
+  slideshowCaption,
 }: {
   asset: IAsset
   variant: 'grid' | 'slideshow'
@@ -103,6 +105,8 @@ export const AssetPreviewWithOverlay = ({
     QueryObserverResult<GetListResponse<IAsset>, HttpError>
   >
   canManageAsset?: boolean
+  onViewMore?: () => void
+  slideshowCaption?: string
 }) => {
   const isSlideshow = variant === 'slideshow'
 
@@ -176,88 +180,225 @@ export const AssetPreviewWithOverlay = ({
         sx={{
           position: 'relative',
           width: '100%',
+          height: isSlideshow ? '100%' : undefined,
+          display: isSlideshow ? 'flex' : 'block',
+          flexDirection: isSlideshow ? 'column' : undefined,
           '&:hover .asset-overlay': {
             opacity: 1,
           },
         }}
       >
-        <AssetPreview asset={asset} variant={variant} />
-
         <Box
-          className="asset-overlay"
-          sx={{
-            position: 'absolute',
-            inset: 0,
-            opacity: isSlideshow ? 1 : 0,
-            transition: 'opacity 0.2s ease-in-out',
-            background: isSlideshow
-              ? undefined
-              : 'linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.05))',
-            pointerEvents: 'none',
-          }}
-        />
-
-        <Typography
-          className="asset-overlay"
-          variant="caption"
           sx={{
-            position: 'absolute',
-            left: 8,
-            bottom: 8,
-            opacity: isSlideshow ? 1 : 0,
-            transition: 'opacity 0.2s ease-in-out',
-            color: isSlideshow ? 'black' : 'white',
-            maxWidth: canManageAsset ? '52%' : '70%',
+            position: 'relative',
+            minHeight: 0,
+            flex: isSlideshow ? '1 1 auto' : undefined,
+            display: isSlideshow ? 'flex' : 'block',
+            alignItems: isSlideshow ? 'center' : undefined,
+            justifyContent: isSlideshow ? 'center' : undefined,
             overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
           }}
         >
-          {asset.name}
-        </Typography>
+          <AssetPreview asset={asset} variant={variant} />
 
-        <Box
-          className="asset-overlay"
-          onClick={(event) => event.stopPropagation()}
-          onMouseDown={(event) => event.stopPropagation()}
-          onPointerDown={(event) => event.stopPropagation()}
-          sx={{
-            position: 'absolute',
-            right: 8,
-            bottom: 8,
-            opacity: isSlideshow ? 1 : 0,
-            transition: 'opacity 0.2s ease-in-out',
-            pointerEvents: 'auto',
-            display: 'flex',
-            gap: 1,
-            alignItems: 'center',
-          }}
-        >
-          {asset.signed_url && (
-            <Button
-              variant="outlined"
-              size="small"
-              onClick={(event) => {
-                event.stopPropagation()
+          <Box
+            className="asset-overlay"
+            sx={{
+              position: 'absolute',
+              inset: 0,
+              opacity: isSlideshow ? 1 : 0,
+              transition: 'opacity 0.2s ease-in-out',
+              background: isSlideshow
+                ? undefined
+                : 'linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.05))',
+              pointerEvents: 'none',
+            }}
+          />
+        </Box>
 
-                if (!asset?.signed_url) return
-                void downloadAsset(asset, refetchAssets).catch(console.error)
+        {isSlideshow ? (
+          <Box
+            sx={{
+              borderTop: '1px solid',
+              borderColor: 'divider',
+              bgcolor: 'background.paper',
+              display: 'grid',
+              gridTemplateColumns: 'minmax(0, 1fr) auto minmax(0, 1fr)',
+              gridTemplateAreas: `
+                "name caption actions"
+                "label label label"
+              `,
+              gap: 1,
+              alignItems: 'center',
+              px: 1.5,
+              py: 1,
+            }}
+          >
+            <Typography
+              variant="body1"
+              title={asset.name}
+              sx={{
+                gridArea: 'name',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                fontWeight: 500,
               }}
+            >
+              {asset.name}
+            </Typography>
+
+            {slideshowCaption && (
+              <Typography
+                variant="caption"
+                sx={{
+                  gridArea: 'caption',
+                  justifySelf: 'center',
+                  bgcolor: 'rgba(0,0,0,0.5)',
+                  color: 'white',
+                  px: 1.5,
+                  py: 0.5,
+                  borderRadius: 1,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {slideshowCaption}
+              </Typography>
+            )}
+
+            <Box
               sx={{
-                bgcolor: 'background.paper',
-                '&:hover': {
-                  bgcolor: 'background.paper',
-                },
+                gridArea: 'actions',
+                display: 'flex',
+                gap: 1,
+                justifyContent: 'flex-end',
+                alignItems: 'center',
               }}
+              onClick={(event) => event.stopPropagation()}
+              onMouseDown={(event) => event.stopPropagation()}
+              onPointerDown={(event) => event.stopPropagation()}
             >
-              Download
-            </Button>
-          )}
+              {asset.signed_url && (
+                <Button
+                  variant="outlined"
+                  size="small"
+                  onClick={(event) => {
+                    event.stopPropagation()
 
-          {canManageAsset && (
-            <AssetActions asset={asset} refetchAssets={refetchAssets} />
-          )}
-        </Box>
+                    if (!asset.signed_url) return
+                    void downloadAsset(asset, refetchAssets).catch(
+                      console.error
+                    )
+                  }}
+                >
+                  Download
+                </Button>
+              )}
+
+              {canManageAsset && (
+                <AssetActions asset={asset} refetchAssets={refetchAssets} />
+              )}
+            </Box>
+
+            <Typography
+              variant="body2"
+              title={asset.label}
+              color="text.secondary"
+              sx={{
+                gridArea: 'label',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {asset.label}
+            </Typography>
+          </Box>
+        ) : (
+          <Box
+            sx={{
+              bgcolor: 'background.paper',
+              display: 'grid',
+              gridTemplateColumns: 'minmax(0, 1fr) auto',
+              gap: 1,
+              alignItems: 'center',
+              px: 1,
+              py: 0.75,
+            }}
+          >
+            <Typography
+              variant="caption"
+              title={asset?.name}
+              sx={{
+                minWidth: 0,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {asset?.name}
+            </Typography>
+
+            {onViewMore && (
+              <Button
+                size="small"
+                variant="text"
+                onClick={(event) => {
+                  event.stopPropagation()
+                  onViewMore()
+                }}
+                sx={{ minWidth: 'auto', px: 0.5, py: 0, fontSize: 12 }}
+              >
+                View more
+              </Button>
+            )}
+          </Box>
+        )}
+
+        {!isSlideshow && (
+          <Box
+            className="asset-overlay"
+            onClick={(event) => event.stopPropagation()}
+            onMouseDown={(event) => event.stopPropagation()}
+            onPointerDown={(event) => event.stopPropagation()}
+            sx={{
+              position: 'absolute',
+              right: 8,
+              top: 8,
+              opacity: isSlideshow ? 1 : 0,
+              transition: 'opacity 0.2s ease-in-out',
+              pointerEvents: 'auto',
+              display: 'flex',
+              gap: 1,
+              alignItems: 'center',
+            }}
+          >
+            {asset.signed_url && (
+              <Button
+                variant="outlined"
+                size="small"
+                onClick={(event) => {
+                  event.stopPropagation()
+
+                  if (!asset?.signed_url) return
+                  void downloadAsset(asset, refetchAssets).catch(console.error)
+                }}
+                sx={{
+                  bgcolor: 'background.paper',
+                  '&:hover': {
+                    bgcolor: 'background.paper',
+                  },
+                }}
+              >
+                Download
+              </Button>
+            )}
+
+            {canManageAsset && (
+              <AssetActions asset={asset} refetchAssets={refetchAssets} />
+            )}
+          </Box>
+        )}
       </Box>
     </>
   )
diff --git a/src/components/WellShow/Attachments.tsx b/src/components/WellShow/Attachments.tsx
index 2981391f..693675ed 100644
--- a/src/components/WellShow/Attachments.tsx
+++ b/src/components/WellShow/Attachments.tsx
@@ -191,6 +191,7 @@ export const AttachmentsCard = ({
                           variant="grid"
                           refetchAssets={refetchAssets}
                           canManageAsset={canManageAmp}
+                          onViewMore={() => openSlideshow(idx)}
                         />
                       </Box>
                     ))}
@@ -200,10 +201,12 @@ export const AttachmentsCard = ({
                     sx={{
                       position: 'relative',
                       borderRadius: 2,
-                      overflow: 'hidden',
+                      overflow: 'auto',
                       boxShadow: 2,
                       bgcolor: 'grey.100',
-                      minHeight: 300,
+                      minHeight: 360,
+                      height: 480,
+                      resize: 'vertical',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
@@ -215,6 +218,9 @@ export const AttachmentsCard = ({
                         variant="slideshow"
                         refetchAssets={refetchAssets}
                         canManageAsset={canManageAmp}
+                        slideshowCaption={`${slideshowIndex + 1} / ${
+                          previewAssets.length
+                        }`}
                       />
                     )}
                     {previewAssets.length > 1 && (
@@ -255,22 +261,6 @@ export const AttachmentsCard = ({
                         >
                           <ChevronRight />
                         </IconButton>
-                        <Typography
-                          variant="caption"
-                          sx={{
-                            position: 'absolute',
-                            bottom: 8,
-                            left: '50%',
-                            transform: 'translateX(-50%)',
-                            bgcolor: 'rgba(0,0,0,0.5)',
-                            color: 'white',
-                            px: 1.5,
-                            py: 0.5,
-                            borderRadius: 1,
-                          }}
-                        >
-                          {slideshowIndex + 1} / {previewAssets.length}
-                        </Typography>
                       </>
                     )}
                   </Box>
diff --git a/src/test/components/AssetPreviewWithOverlay.test.tsx b/src/test/components/AssetPreviewWithOverlay.test.tsx
index 9d6f7276..77936564 100644
--- a/src/test/components/AssetPreviewWithOverlay.test.tsx
+++ b/src/test/components/AssetPreviewWithOverlay.test.tsx
@@ -148,4 +148,53 @@ describe('AssetPreviewWithOverlay reassociation dialog', () => {
     ).toBe(false)
     expect(mockedMutateAsset).not.toHaveBeenCalled()
   })
+
+  it('shows the asset name in grid mode with a view more action', async () => {
+    const user = userEvent.setup()
+    const refetchAssets = vi.fn().mockResolvedValue({ data: { data: [asset] } })
+    const onViewMore = vi.fn()
+
+    render(
+      <AssetPreviewWithOverlay
+        asset={{ ...asset, label: 'Field inspection photo label' }}
+        variant="grid"
+        refetchAssets={refetchAssets}
+        onViewMore={onViewMore}
+      />
+    )
+
+    expect(screen.getByText('field-photo.jpg')).toBeTruthy()
+    await user.click(screen.getByRole('button', { name: 'View more' }))
+
+    expect(onViewMore).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows the asset label in slideshow mode', () => {
+    const refetchAssets = vi.fn().mockResolvedValue({ data: { data: [asset] } })
+
+    render(
+      <AssetPreviewWithOverlay
+        asset={{ ...asset, label: 'Expanded slideshow label' }}
+        variant="slideshow"
+        refetchAssets={refetchAssets}
+      />
+    )
+
+    expect(screen.getByText('Expanded slideshow label')).toBeTruthy()
+  })
+
+  it('shows the slideshow caption in the footer', () => {
+    const refetchAssets = vi.fn().mockResolvedValue({ data: { data: [asset] } })
+
+    render(
+      <AssetPreviewWithOverlay
+        asset={asset}
+        variant="slideshow"
+        refetchAssets={refetchAssets}
+        slideshowCaption="2 / 5"
+      />
+    )
+
+    expect(screen.getByText('2 / 5')).toBeTruthy()
+  })
 })