diff --git a/frontend/src/components/ResultGrid.tsx b/frontend/src/components/ResultGrid.tsx
index 9ede4e4..36e4a7b 100644
--- a/frontend/src/components/ResultGrid.tsx
+++ b/frontend/src/components/ResultGrid.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
+import { DataGridPremium, GridColDef, GridRenderCellParams } from '@mui/x-data-grid-premium';
 import IconButton from '@mui/material/IconButton';
 import InfoIcon from '@mui/icons-material/Info';
 import { OpenAPI, SamplesService } from '../../openapi';
@@ -250,8 +250,45 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
                 return null;
             },
         },
+        {
+            field: 'images',
+            headerName: 'Images',
+            width: 300,
+            renderCell: (params) => {
+                const imageList: ImageInfo[] = params.row.images;
+
+                if (!imageList || imageList.length === 0) {
+                    return null;
+                }
+
+                return (
+                    <div style={{ display: 'flex', gap: '10px' }}>
+                        {imageList.map((img) => {
+                            const url = `${basePath}${img.filepath}`;
+                            return (
+                                <div key={img.id} style={{ position: 'relative' }}>
+                                    <img
+                                        src={url}
+                                        alt={img.comment || 'sample'}
+                                        className="zoom-image"
+                                        style={{
+                                            width: 40,
+                                            height: 40,
+                                            borderRadius: 4,
+                                            cursor: 'pointer',
+                                        }}
+                                    />
+                                </div>
+                            );
+                        })}
+                    </div>
+                );
+            },
+        },
     ];
 
+
+
     return (
         <div style={{ height: 600, width: '100%' }}>
             <DataGridPremium
@@ -261,7 +298,17 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
                 getTreeDataPath={(row: TreeRow) => row.hierarchy}
                 defaultGroupingExpansionDepth={-1}
                 getRowId={(row) => row.id}
+                sx={{
+                    '& .MuiDataGrid-cell': {
+                        overflow: 'visible',
+                    },
+                    '& .MuiDataGrid-rendererContainer': {
+                        overflow: 'visible',
+                        position: 'relative',
+                    },
+                }}
             />
+
         </div>
     );
 };
diff --git a/frontend/src/components/SampleImage.css b/frontend/src/components/SampleImage.css
index bd6f9b9..ba545b9 100644
--- a/frontend/src/components/SampleImage.css
+++ b/frontend/src/components/SampleImage.css
@@ -1,13 +1,16 @@
 .zoom-image {
-    transition: transform 0.3s ease;
+    transition: transform 0.3s ease, z-index 0.3s ease;
+    position: relative;
+    z-index: 1;
     cursor: pointer;
 }
 
 .zoom-image:hover {
-    transform: scale(10); /* Adjust the scale value as needed */
-    z-index: 10; /* Bring it to front if overlapping */
+    transform: scale(10); /* Enlarges the image */
+    z-index: 10; /* Brings the hovered image above other elements */
+    border: 2px solid #ccc; /* Optional: Adds a border for emphasis */
 }
 
-.tooltip:hover .tooltip-content {
-    display: block !important;
-}
+.image-container {
+    overflow: visible; /* Ensures zoomed images are not cropped by the parent */
+}
\ No newline at end of file