diff --git a/apps/admin-server/src/pages/projects/[project]/widgets/resourcedetail/[id]/display.tsx b/apps/admin-server/src/pages/projects/[project]/widgets/resourcedetail/[id]/display.tsx
index 06bfd7c73..767d96bdd 100644
--- a/apps/admin-server/src/pages/projects/[project]/widgets/resourcedetail/[id]/display.tsx
+++ b/apps/admin-server/src/pages/projects/[project]/widgets/resourcedetail/[id]/display.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@/components/ui/button';
 import {
-  Form, FormControl,
+  Form, FormControl, FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -34,6 +34,7 @@ const formSchema = z.object({
   displayDocuments: z.boolean(),
   documentsTitle: z.string().optional(),
   documentsDesc: z.string().optional(),
+  clickableImage: z.boolean(),
 });
 
 export default function WidgetResourceDetailDisplay(
@@ -66,6 +67,7 @@ export default function WidgetResourceDetailDisplay(
       displayStatus: undefinedToTrueOrProp(props?.displayStatus),
       displayLikes: undefinedToTrueOrProp(props?.displayLikes),
       displayDocuments: undefinedToTrueOrProp(props?.displayDocuments),
+      clickableImage: props?.clickableImage || false,
       documentsTitle: props?.documentsTitle || '',
       documentsDesc: props?.documentsDesc || '',
     },
@@ -228,6 +230,23 @@ export default function WidgetResourceDetailDisplay(
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="clickableImage"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  Moet de afbeelding in de dialog klikbaar zijn?
+                </FormLabel>
+                <FormDescription>
+                  Als je dit aanvinkt, wordt de afbeelding in de dialog klikbaar en wordt de afbeelding geopend in een nieuw tabblad.
+                </FormDescription>
+                {YesNoSelect(field, props)}
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           <FormField
             control={form.control}
             name="displayDocuments"
diff --git a/apps/admin-server/src/pages/projects/[project]/widgets/resourceoverview/[id]/display.tsx b/apps/admin-server/src/pages/projects/[project]/widgets/resourceoverview/[id]/display.tsx
index 6974951fb..676b119ea 100644
--- a/apps/admin-server/src/pages/projects/[project]/widgets/resourceoverview/[id]/display.tsx
+++ b/apps/admin-server/src/pages/projects/[project]/widgets/resourceoverview/[id]/display.tsx
@@ -2,6 +2,7 @@ import { Button } from '@/components/ui/button';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -44,6 +45,7 @@ const formSchema = z.object({
   applyText: z.string().optional(),
   resetText: z.string().optional(),
   displayLikeButton: z.boolean(),
+  clickableImage: z.boolean(),
   // displayRanking: z.boolean(),
   // displayLabel: z.boolean(),
   // displayShareButtons: z.boolean(),
@@ -84,6 +86,7 @@ export default function WidgetResourceOverviewDisplay(
       applyText: props?.applyText || 'Toepassen',
       resetText: props?.resetText || 'Reset',
       displayLikeButton: props?.displayLikeButton || false,
+      clickableImage: props?.clickableImage || false,
       // displayRanking: props?.displayRanking || false,
       // displayLabel: props?.displayLabel || false,
       // displayShareButtons: props?.displayShareButtons || false,
@@ -516,6 +519,23 @@ export default function WidgetResourceOverviewDisplay(
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="clickableImage"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  Moet de afbeelding in de dialog klikbaar zijn?
+                </FormLabel>
+                <FormDescription>
+                  Als je dit aanvinkt, wordt de afbeelding in de dialog klikbaar en wordt de afbeelding geopend in een nieuw tabblad.
+                </FormDescription>
+                {YesNoSelect(field, props)}
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           <Button className="w-fit col-span-full" type="submit">
             Opslaan
           </Button>
diff --git a/apps/admin-server/src/pages/projects/[project]/widgets/resourceoverview/[id]/general.tsx b/apps/admin-server/src/pages/projects/[project]/widgets/resourceoverview/[id]/general.tsx
index 158a2eaff..0083618e3 100644
--- a/apps/admin-server/src/pages/projects/[project]/widgets/resourceoverview/[id]/general.tsx
+++ b/apps/admin-server/src/pages/projects/[project]/widgets/resourceoverview/[id]/general.tsx
@@ -120,95 +120,99 @@ export default function WidgetResourceOverviewGeneral(
             )}
           />
 
-          <FormField
-            control={form.control}
-            name="itemLink"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>
-                  Link (relatief) naar de specifieke inzending
-                </FormLabel>
-                <FormControl>
-                  <Input
-                    placeholder="Bijv: /resources/[id]"
-                    type="text"
-                    {...field}
-                    onChange={(e) => {
-                      onFieldChange(field.name, e.target.value);
-                      field.onChange(e);
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+          { form.watch('displayType') === 'cardrow' && (
+            <FormField
+              control={form.control}
+              name="itemLink"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    Link (relatief) naar de specifieke inzending
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Bijv: /resources/[id]"
+                      type="text"
+                      {...field}
+                      onChange={(e) => {
+                        onFieldChange(field.name, e.target.value);
+                        field.onChange(e);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
 
-          <FormField
-            control={form.control}
-            name="rawInput"
-            render={({ field }) => (
-              <FormItem className="col-span-full">
-                <FormLabel>
-                  Template voor display: &quot; Creëer je eigen template.&quot;
-                </FormLabel>
-                <div className="text-xs pb-4">
-                  <h2>Te gebruiken variabelen:</h2>
-                  <ul className="list-disc">
-                    <li className="ml-4">{`{{projectId}}`}</li>
-                    <li className="ml-4">{`{{user}} -> Bijvoorbeeld {{user.name}}`}</li>
-                    <li className="ml-4">{`{{startDateHumanized}}`}</li>
-                    <li className="ml-4">{`{{status}}`}</li>
-                    <li className="ml-4">{`{{title}}`}</li>
-                    <li className="ml-4">{`{{summary}}`}</li>
-                    <li className="ml-4">{`{{description}}`}</li>
-                    <li className="ml-4">{`{{images}} -> Bijvoorbeeld {{images[nummer].src}}`}</li>
-                    <li className="ml-4">{`{{budget}}`}</li>
-                    <li className="ml-4">{`{{extraData}}`}</li>
-                    <li className="ml-4">{`{{location}}`}</li>
-                    <li className="ml-4">{`{{modBreak}}`}</li>
-                    <li className="ml-4">{`{{modBreakDateHumanized}}`}</li>
-                    <li className="ml-4">{`{{progress}}`}</li>
-                    <li className="ml-4">{`{{createDateHumanized}}`}</li>
-                    <li className="ml-4">{`{{publishDateHumanized}}`}</li>
-                    <li className="ml-4">{`{{resource}} -> Bevat alle data van de resource`}</li>
-                  </ul>
-                  <br/>
-                  <h2>Te gebruiken filters:</h2>
-                  <ul className="list-disc">
-                    <li className="ml-4">{`{{ variable | dump }}: Laat de inhoud van een object zien.`}</li>
-                    <li
-                      className="ml-4">{`{{ variable | cleanArray }}: Maakt van een lijst een tekst met de waardes gescheiden door komma's. Bijvoorbeeld: "['Optie 1', 'Optie 2']" wordt omgezet naar: Optie 1, Optie 2`}</li>
-                    <li
-                      className="ml-4">{`{{ variable | capitalize }}: Zet de eerste letter in hoofdletters.`}</li>
-                    <li
-                      className="ml-4">{`{{ variable | truncate(10) }}: Kort een tekst in tot de opgegeven lengte. Na deze lengte wordt er '...' toegevoegd.`}</li>
-                    <li className="ml-4">{`{{ variable | lowercase }}: Zet een tekst om naar kleine letters.`}</li>
-                    <li className="ml-4">{`{{ variable | uppercase }}: Zet een tekst om naar hoofdletters.`}</li>
-                    <li
-                      className="ml-4">{`{{ variable | replace('zoek', 'vervang') }}: Vervangt een deel van de tekst door iets anders.`}</li>
-                  </ul>
-                  <br/>
-                  <h2>Overige functies:</h2>
-                  <ul className="list-disc">
-                    <li className="ml-4">{`{{ resource | tags }}: Laat alle gekoppelde tags zien gescheiden met komma's`}</li>
-                    <li className="ml-4">{`{{ resource | status }}: Laat alle gekoppelde statussen zien gescheiden met komma's`}</li>
-                  </ul>
-                </div>
-                <FormControl>
-                  <Textarea
-                    rows={5}
-                    {...field}
-                    onChange={(e) => {
-                      field.onChange(e);
-                      onFieldChange(field.name, e.target.value);
-                    }}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+          { form.watch('displayType') === 'raw' && (
+            <FormField
+              control={form.control}
+              name="rawInput"
+              render={({ field }) => (
+                <FormItem className="col-span-full">
+                  <FormLabel>
+                    Template voor display: &quot; Creëer je eigen template.&quot;
+                  </FormLabel>
+                  <div className="text-xs pb-4">
+                    <h2>Te gebruiken variabelen:</h2>
+                    <ul className="list-disc">
+                      <li className="ml-4">{`{{projectId}}`}</li>
+                      <li className="ml-4">{`{{user}} -> Bijvoorbeeld {{user.name}}`}</li>
+                      <li className="ml-4">{`{{startDateHumanized}}`}</li>
+                      <li className="ml-4">{`{{status}}`}</li>
+                      <li className="ml-4">{`{{title}}`}</li>
+                      <li className="ml-4">{`{{summary}}`}</li>
+                      <li className="ml-4">{`{{description}}`}</li>
+                      <li className="ml-4">{`{{images}} -> Bijvoorbeeld {{images[nummer].src}}`}</li>
+                      <li className="ml-4">{`{{budget}}`}</li>
+                      <li className="ml-4">{`{{extraData}}`}</li>
+                      <li className="ml-4">{`{{location}}`}</li>
+                      <li className="ml-4">{`{{modBreak}}`}</li>
+                      <li className="ml-4">{`{{modBreakDateHumanized}}`}</li>
+                      <li className="ml-4">{`{{progress}}`}</li>
+                      <li className="ml-4">{`{{createDateHumanized}}`}</li>
+                      <li className="ml-4">{`{{publishDateHumanized}}`}</li>
+                      <li className="ml-4">{`{{resource}} -> Bevat alle data van de resource`}</li>
+                    </ul>
+                    <br/>
+                    <h2>Te gebruiken filters:</h2>
+                    <ul className="list-disc">
+                      <li className="ml-4">{`{{ variable | dump }}: Laat de inhoud van een object zien.`}</li>
+                      <li
+                        className="ml-4">{`{{ variable | cleanArray }}: Maakt van een lijst een tekst met de waardes gescheiden door komma's. Bijvoorbeeld: "['Optie 1', 'Optie 2']" wordt omgezet naar: Optie 1, Optie 2`}</li>
+                      <li
+                        className="ml-4">{`{{ variable | capitalize }}: Zet de eerste letter in hoofdletters.`}</li>
+                      <li
+                        className="ml-4">{`{{ variable | truncate(10) }}: Kort een tekst in tot de opgegeven lengte. Na deze lengte wordt er '...' toegevoegd.`}</li>
+                      <li className="ml-4">{`{{ variable | lowercase }}: Zet een tekst om naar kleine letters.`}</li>
+                      <li className="ml-4">{`{{ variable | uppercase }}: Zet een tekst om naar hoofdletters.`}</li>
+                      <li
+                        className="ml-4">{`{{ variable | replace('zoek', 'vervang') }}: Vervangt een deel van de tekst door iets anders.`}</li>
+                    </ul>
+                    <br/>
+                    <h2>Overige functies:</h2>
+                    <ul className="list-disc">
+                      <li className="ml-4">{`{{ resource | tags }}: Laat alle gekoppelde tags zien gescheiden met komma's`}</li>
+                      <li className="ml-4">{`{{ resource | status }}: Laat alle gekoppelde statussen zien gescheiden met komma's`}</li>
+                    </ul>
+                  </div>
+                  <FormControl>
+                    <Textarea
+                      rows={5}
+                      {...field}
+                      onChange={(e) => {
+                        field.onChange(e);
+                        onFieldChange(field.name, e.target.value);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
 
           <Button className="w-fit col-span-full" type="submit">
             Opslaan
diff --git a/packages/resource-detail/src/resource-detail.tsx b/packages/resource-detail/src/resource-detail.tsx
index 819eba9b6..957e5b9af 100644
--- a/packages/resource-detail/src/resource-detail.tsx
+++ b/packages/resource-detail/src/resource-detail.tsx
@@ -42,6 +42,7 @@ type booleanProps = {
   | 'displayTags'
   | 'displayStatus'
   | 'displayDocuments'
+  | 'clickableImage'
   | 'displaySocials']: boolean | undefined;
 };
 
@@ -96,6 +97,7 @@ function ResourceDetail({
   displayStatus = true,
   displaySocials = true,
   displayDocuments = true,
+  clickableImage = false,
   documentsTitle = '',
   documentsDesc = '',
   backUrlText = 'Terug naar het document',
@@ -205,6 +207,31 @@ function ResourceDetail({
 
   const statusClasses = `${colorClass} ${backgroundColorClass}`.trim();
 
+  const renderImage = (src: string, clickableImage: boolean) => {
+    const imageElement = (
+      <Image
+        src={src}
+        imageFooter={
+          <div>
+            <Paragraph className={`osc-resource-detail-content-item-status ${statusClasses}`}>
+              {resource.statuses
+                ?.map((s: { name: string }) => s.name)
+                ?.join(', ')}
+            </Paragraph>
+          </div>
+        }
+      />
+    );
+
+    return clickableImage ? (
+      <a href={src} target="_blank" rel="noreferrer">
+        {imageElement}
+      </a>
+    ) : (
+      imageElement
+    );
+  };
+
   return (
     <section>
       <div
@@ -221,18 +248,7 @@ function ResourceDetail({
                   items={resourceImages}
                   buttonText={{ next: 'Volgende afbeelding', previous: 'Vorige afbeelding' }}
                   itemRenderer={(i) => (
-                    <Image
-                      src={i.url}
-                      imageFooter={
-                        <div>
-                          <Paragraph className={`osc-resource-detail-content-item-status ${statusClasses}`}>
-                            {resource.statuses
-                              ?.map((s: { name: string }) => s.name)
-                              ?.join(', ')}
-                          </Paragraph>
-                        </div>
-                      }
-                    />
+                    renderImage(i.url, clickableImage)
                   )}
                 />
               )}
diff --git a/packages/resource-overview/src/gridder-resource-detail.tsx b/packages/resource-overview/src/gridder-resource-detail.tsx
index 3e6a09420..522771945 100644
--- a/packages/resource-overview/src/gridder-resource-detail.tsx
+++ b/packages/resource-overview/src/gridder-resource-detail.tsx
@@ -34,6 +34,7 @@ export type GridderResourceDetailProps =
   loginUrl?: string;
   displayDocuments?: boolean;
   displayLikeButton?: boolean;
+  clickableImage?: boolean;
   documentsTitle?: string;
   documentsDesc?: string;
   likeWidget?: Omit<
@@ -51,6 +52,7 @@ export const GridderResourceDetail = ({
   displayLikeButton = false,
   documentsTitle = '',
   documentsDesc = '',
+  clickableImage = false,
   ...props
 }: GridderResourceDetailProps) => {
   // When resource is correctly typed the we will not need :any
@@ -79,17 +81,28 @@ export const GridderResourceDetail = ({
   const resourceImages = (Array.isArray(resource.images) && resource.images.length > 0) ? resource.images?.at(0)?.url : defaultImage;
   const hasImages = !!resourceImages ? '' : 'resource-has-no-images';
 
+  const renderImage = (image: string, clickableImage: boolean) => {
+    const imageComponent = (
+      <Image
+        src={image}
+        className="--aspectRatio-16-9"
+      />
+    );
+
+    return clickableImage ? (
+      <a href={image} target="_blank" rel="noreferrer">
+        {imageComponent}
+      </a>
+    ) : (
+      imageComponent
+    )
+  }
+
   return (
     <>
       <div className="osc-gridder-resource-detail">
         <section className={`osc-gridder-resource-detail-photo ${hasImages}`}>
-          <Image
-            src={resource.images?.at(0)?.url || defaultImage}
-            className="--aspectRatio-16-9"
-          />
-          {/* <div>
-            <button className="osc-load-map-button"></button>
-          </div> */}
+          {renderImage(resource.images?.at(0)?.url || defaultImage, clickableImage)}
 
           <div className="osc-gridder-resource-detail-budget-theme-bar">
             <Heading4>Budget</Heading4>
diff --git a/packages/resource-overview/src/resource-overview.tsx b/packages/resource-overview/src/resource-overview.tsx
index 05c36face..a4b196aa0 100644
--- a/packages/resource-overview/src/resource-overview.tsx
+++ b/packages/resource-overview/src/resource-overview.tsx
@@ -91,6 +91,7 @@ export type ResourceOverviewWidgetProps = BaseProps &
     applyText?: string;
     onFilteredResourcesChange?: (filteredResources: any[]) => void;
     displayLikeButton?: boolean;
+    clickableImage?: boolean;
   };
 
 //Temp: Header can only be made when the map works so for now a banner
@@ -353,6 +354,7 @@ function ResourceOverview({
   displayDocuments = false,
   showActiveTags = false,
   displayLikeButton = false,
+  clickableImage = false,
   documentsTitle = '',
   documentsDesc = '',
   displayVariant = '',
@@ -536,6 +538,7 @@ function ResourceOverview({
                 documentsTitle={documentsTitle}
                 documentsDesc={documentsDesc}
                 displayLikeButton={displayLikeButton}
+                clickableImage={clickableImage}
                 onRemoveClick={(resource) => {
                   try {
                     resource