diff --git a/Classes/Preview/PersonnelPreviewRenderer.php b/Classes/Preview/PersonnelPreviewRenderer.php
index 64566ed..3d44c5a 100644
--- a/Classes/Preview/PersonnelPreviewRenderer.php
+++ b/Classes/Preview/PersonnelPreviewRenderer.php
@@ -17,62 +17,164 @@
 
 namespace Brightside\Personnel\Preview;
 
+use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Backend\Preview\StandardContentPreviewRenderer;
 use TYPO3\CMS\Backend\Utility\BackendUtility;
 use TYPO3\CMS\Backend\View\BackendLayout\Grid\GridColumnItem;
-use TYPO3\CMS\Backend\Preview\PreviewRendererInterface;
+use TYPO3\CMS\Fluid\View\StandaloneView;
+use TYPO3\CMS\Core\Domain\Repository\PageRepository;
+use TYPO3\CMS\Core\Database\ConnectionPool;
+use TYPO3\CMS\Core\Utility\MathUtility;
 
-/**
- * Contains a preview rendering for the page module of CType="textmedia"
- * @internal this is a concrete TYPO3 hook implementation and solely used for EXT:frontend and not part of TYPO3's Core API.
- */
 class PersonnelPreviewRenderer extends StandardContentPreviewRenderer
 {
     public function renderPageModulePreviewContent(GridColumnItem $item): string
     {
-        $content = '';
-        $row = $item->getRecord();
-        if ($row['CType'] === 'personnel_frompages' || $row['CType'] === 'personnel_selected') {
-            if ($row['CType'] === 'personnel_frompages') {
-                $content = $this->linkEditContent('<span style="display: block; margin-top: 0.3em;">Persons from page: '. $row['pages'] .'</span>', $row);
-            }
-            if ($row['CType'] === 'personnel_selected') {
-                $content = $this->linkEditContent('<span style="display: block; margin-top: 0.3em;">Selected persons: '. $row['tx_personnel'] .'</span>', $row);
-            }
-            $content .= '<ul style="margin: 0; padding: 0.2em 1.4em;">';
-            if ($row['tx_personnel_template']) {
-                $content .= '<li>Template: ' . $this->linkEditContent($this->renderText($row['tx_personnel_template']), $row) . '</li>';
-            }
-            if ($row['tx_personnel_titlewrap']) {
-                $content .= '<li>Title tag: ' . $this->linkEditContent($this->renderText($row['tx_personnel_titlewrap']), $row) . '</li>';
+        $view = GeneralUtility::makeInstance(StandaloneView::class);
+        $view->setTemplatePathAndFilename(
+            'EXT:personnel/Resources/Private/Templates/Backend/Preview.html',
+        );
+
+        $record = $item->getRecord();
+        $view->assign('personnelitem', $record);
+
+        // Initialize an array to store personnel records
+        $personnelRecords = [];
+
+        $CType = $record['CType'];
+        $pids = $record['pages'];
+        $orderBy = !empty($record['tx_personnel_orderby']) ? $record['tx_personnel_orderby'] : null;
+        $maxResults = !empty($record['tx_personnel_limit']) ? intval($record['tx_personnel_limit']) : null;
+        $firstResult = !empty($record['tx_personnel_startfrom']) ? intval($record['tx_personnel_startfrom']) : null;
+        $selectedCategories = $record['selected_categories'];
+        $selectedRecords = $record['tx_personnel'];
+
+        // Query for selected personnel records
+        if ($CType == 'personnel_selected') {
+            $queryBuilder = GeneralUtility::makeInstance(ConnectionPool::class)->getQueryBuilderForTable('tx_personnel_domain_model_person');
+            $query = $queryBuilder
+                ->select('*')
+                ->from('tx_personnel_domain_model_person')
+                ->where(
+                    $queryBuilder->expr()->in('uid', $selectedRecords)
+                );
+        }
+
+        // Query for personnel records from selected pages/sysfolders
+
+        if ($CType == 'personnel_frompages') {
+            // Get titles of selected startingpoints
+            if($record['CType'] == 'personnel_frompages') {
+                if ($record['pages']) {
+                    $pageIds = explode(',', $record['pages']);
+                    $pageIds = array_map('intval', $pageIds);
+                    $pageRepository = GeneralUtility::makeInstance(PageRepository::class);
+                    $pageTitles = [];
+                    foreach ($pageIds as $pageUid) {
+                        $pageData = $pageRepository->getPage($pageUid);
+                        if ($pageData && isset($pageData['title'])) {
+                            $pageTitles[] = $pageData['title'];
+                        }
+                    }
+                    $view->assign('pageTitles', $pageTitles);
+                }
             }
-            if ($row['tx_personnel_orderby']) {
-                $content .= '<li>Order by: ' . $this->linkEditContent($this->renderText($row['tx_personnel_orderby']), $row) . '</li>';
+
+            // Get selected catefories
+            if ($selectedCategories) {
+                $queryBuilder = GeneralUtility::makeInstance(ConnectionPool::class)->getQueryBuilderForTable('tx_personnel_domain_model_person');
+                $query = $queryBuilder
+                    ->select('title')
+                    ->from('sys_category')
+                    ->where(
+                        $queryBuilder->expr()->in('uid', $selectedCategories)
+                    );
+                $queryResult = $query->executeQuery();
+                $cetegoryTitles = $queryResult->fetchAllAssociative();
+                $view->assign('catTitles', $cetegoryTitles);
             }
-            if ($row['tx_personnel_images'] == 1) {
-                $content .= '<li>' . $this->linkEditContent('Images: disabled', $row) . '</li>';
+
+            // Fetch personnel records with the given page UID
+            $queryBuilder = GeneralUtility::makeInstance(ConnectionPool::class)->getQueryBuilderForTable('tx_personnel_domain_model_person');
+            $query = $queryBuilder
+                ->select('tx_personnel_domain_model_person.*')
+                ->from('tx_personnel_domain_model_person')
+                ->leftJoin(
+                    'tx_personnel_domain_model_person',
+                    'sys_category_record_mm',
+                    'category_mm',
+                    $queryBuilder->expr()->eq('tx_personnel_domain_model_person.uid', 'category_mm.uid_foreign')
+                );
+            // Select only from certain categories
+            if ($selectedCategories) {
+                $query->where(
+                    $queryBuilder->expr()->and(
+                        $queryBuilder->expr()->in('tx_personnel_domain_model_person.pid', $pids),
+                        $queryBuilder->expr()->in('category_mm.uid_local', $selectedCategories)
+                    )
+                );
+            } else {
+                $query->where(
+                    $queryBuilder->expr()->in('tx_personnel_domain_model_person.pid', $pids)
+                );
             }
-            if ($row['tx_personnel_vcard'] == 1) {
-                $content .= '<li>' . $this->linkEditContent('vCard: disabled', $row) . '</li>';
+
+            $query->groupBy('tx_personnel_domain_model_person.uid');
+
+            if($orderBy) {
+                [$column, $direction] = explode(' ', $orderBy, 2);
+                $query->orderBy($column,$direction);
             }
-            if ($row['tx_personnel_information'] == 1) {
-                $content .= '<li>' . $this->linkEditContent('Information: disabled', $row) . '</li>';
+
+            if($maxResults) {
+                $query->setMaxResults($maxResults);
             }
-            if ($row['tx_paginatedprocessors_paginationenabled'] == 1) {
-                $content .= '<li>' . $this->linkEditContent('Pagination: enabled', $row) . '</li>';
+
+            if($firstResult) {
+                $query->setFirstResult($firstResult);
             }
-            if ($row['tx_paginatedprocessors_itemsperpage'] && $row['tx_paginatedprocessors_paginationenabled'] == 1) {
-                $content .= '<li>' . $this->linkEditContent($this->renderText('Items per page: ' . $row['tx_paginatedprocessors_itemsperpage']), $row) . '</li>';
+        }
+
+        // Query execution
+        $query->executeQuery();
+        $queryResult = $query->executeQuery();
+        $personnelRecords = $queryResult->fetchAllAssociative();
+
+
+        // Reorder array to sort by selected records order
+        if (
+            $CType == 'personnel_selected' &&
+            $selectedRecords
+        ) {
+            $personnelRecordsReindex = [];
+            foreach ($personnelRecords as $item) {
+                $personnelRecordsReindex[$item['uid']] = $item;
             }
-            if ($row['tx_paginatedprocessors_pagelinksshown'] && $row['tx_paginatedprocessors_paginationenabled'] == 1) {
-                $content .= '<li>' . $this->linkEditContent($this->renderText('Links shown: ' . $row['tx_paginatedprocessors_pagelinksshown']), $row) . '</li>';
+            $defaultSorting = array_flip(GeneralUtility::intExplode(",", $selectedRecords));
+            $personnelRecordsSortedCleaned = array_filter(array_replace($defaultSorting, $personnelRecordsReindex), function($item) {
+                return !is_int($item);
+            });
+            if(count($personnelRecordsSortedCleaned)){
+                $personnelRecords = $personnelRecordsSortedCleaned;
+                unset($personnelRecordsReindex,$personnelRecordsSortedCleaned);
             }
-            if ($row['tx_paginatedprocessors_urlsegment'] && $row['tx_paginatedprocessors_paginationenabled'] == 1) {
-                $content .= '<li>' . $this->linkEditContent($this->renderText('URL segment: ' . $row['tx_paginatedprocessors_urlsegment']), $row) . '</li>';
+        }
+
+        // Get images for persons
+        foreach ($personnelRecords as &$personnelRecord) {
+            if (!empty($personnelRecord['images'])) {
+                $fileReferences = BackendUtility::resolveFileReferences('tx_personnel_domain_model_person', 'images', $personnelRecord);
+                // Limit to the first image only
+                if (!empty($fileReferences)) {
+                    $firstImageReference = reset($fileReferences); // Get the first element of the array
+                    $personnelRecord['resolvedImages'] = [$firstImageReference]; // Store in a new array
+                }
             }
-            $content .= '</ul>';
         }
 
-        return $content;
+        // Assign to template
+        $view->assign('personnelRecords', $personnelRecords);
+        $out = $view->render();
+        return $this->linkEditContent($out, $record);
     }
 }
diff --git a/Resources/Private/Templates/Backend/Preview.html b/Resources/Private/Templates/Backend/Preview.html
new file mode 100644
index 0000000..aa7026c
--- /dev/null
+++ b/Resources/Private/Templates/Backend/Preview.html
@@ -0,0 +1,35 @@
+
+<html xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers" data-namespace-typo3-fluid="true">
+    <f:if condition="!{personnelitem.tx_personnel_images}">
+        <div class="preview-thumbnails" style="--preview-thumbnails-size: 64px">
+            <f:for each="{personnelRecords}" as="person" iteration="iterator">
+                <div class="preview-thumbnails-element">
+                    <f:if condition="!{person.resolvedImages.0.properties.hidden} && {person.resolvedImages.0}">
+                        <f:then>
+                            <f:image image="{person.resolvedImages.0}" width="64" cropVariant="{personnelitem.tx_personnel_cropratio}" alt="{person.firstname} {person.lastname}" />
+                        </f:then>
+                        <f:else>
+                            <div style="width: 64px; height: 100%; background: #ccc;"></div>
+                        </f:else>
+                    </f:if>
+                    {person.firstname}
+                </div>
+            </f:for>
+        </div>
+    </f:if>
+
+    <ul style="margin: 0; margin-top: 0.5em; padding: 0.2em 1.4em;">
+        <f:if condition="{pageTitles}"><li>Records from: <f:for each="{pageTitles}" as="title" iteration="iterator">{title}{f:if(condition: iterator.isLast, then: '', else: ', ')}</f:for></li></f:if>
+        <f:if condition="{catTitles}"><li>Category filter (OR): <f:for each="{catTitles}" as="category" iteration="iterator">{category.title}{f:if(condition: iterator.isLast, then: '', else: ', ')}</f:for></li></f:if>
+        <f:if condition="{personnelitem.tx_personnel_orderby}"><li>Order by: {personnelitem.tx_personnel_orderby}</li></f:if>
+        <f:if condition="{personnelitem.tx_personnel_startfrom}"><li>Start from record: {personnelitem.tx_personnel_startfrom}</li></f:if>
+        <f:if condition="{personnelitem.tx_personnel_limit}"><li>Show that many: {personnelitem.tx_personnel_limit}</li></f:if>
+        <f:if condition="{personnelitem.tx_personnel_template}"><li>Layout: {personnelitem.tx_personnel_template}</li></f:if>
+        <f:if condition="{personnelitem.tx_personnel_titlewrap}"><li>Name wrap: {personnelitem.tx_personnel_titlewrap}</li></f:if>
+        <f:if condition="{personnelitem.tx_personnel_images}"><li>Images: disabled</li></f:if>
+        <f:if condition="!{personnelitem.tx_personnel_images} && {personnelitem.tx_personnel_cropratio}"><li>Image crop: {personnelitem.tx_personnel_cropratio}</li></f:if>
+        <f:if condition="!{personnelitem.tx_personnel_information}"><li>Information: enabled</li></f:if>
+        <f:if condition="!{personnelitem.tx_personnel_vcard}"><li>vCard: enabled</li></f:if>
+        <f:if condition="{personnelitem.tx_paginatedprocessors_paginationenabled}"><li>Pagination: enabled</li></f:if>
+    </ul>
+</html>