diff --git a/docs/GraFx-Studio/concepts/headless/code.png b/docs/GraFx-Studio/concepts/headless/code.png
new file mode 100644
index 00000000..e4272988
Binary files /dev/null and b/docs/GraFx-Studio/concepts/headless/code.png differ
diff --git a/docs/GraFx-Studio/concepts/headless/index.md b/docs/GraFx-Studio/concepts/headless/index.md
index 37de4c53..42aeaa97 100644
--- a/docs/GraFx-Studio/concepts/headless/index.md
+++ b/docs/GraFx-Studio/concepts/headless/index.md
@@ -8,4 +8,6 @@ This approach is ideal for scenarios where you want to automate the creation of
 - **Integrate Seamlessly**: Connect GraFx Studio with your existing systems, like DAMs, PIMs, or e-commerce platforms.
 - **Run Background Processes**: Initiate batch jobs and monitor output tasks programmatically.
 
-Headless automation empowers you to use the powerful capabilities of GraFx Studio while keeping everything behind the scenes, providing flexibility and efficiency for high-volume or fully automated workflows.
\ No newline at end of file
+Headless automation empowers you to use the powerful capabilities of GraFx Studio while keeping everything behind the scenes, providing flexibility and efficiency for high-volume or fully automated workflows.
+
+![screenshot-full](code.png)
\ No newline at end of file
diff --git a/docs/GraFx-Studio/guides/add-fonts/bottom-quicktools-ui.png b/docs/GraFx-Studio/guides/add-fonts/bottom-quicktools-ui.png
new file mode 100644
index 00000000..ebdf3be2
Binary files /dev/null and b/docs/GraFx-Studio/guides/add-fonts/bottom-quicktools-ui.png differ
diff --git a/docs/GraFx-Studio/guides/add-fonts/index.md b/docs/GraFx-Studio/guides/add-fonts/index.md
index f5532492..131b0cf2 100644
--- a/docs/GraFx-Studio/guides/add-fonts/index.md
+++ b/docs/GraFx-Studio/guides/add-fonts/index.md
@@ -2,24 +2,26 @@
 
 Open the Stylekit panel.
 
-![Button](fonts-1.png)
+![screenshotsmall](bottom-quicktools-ui.png)
+
+![screenshot](resources-panel.png)
 
 Select the fonts icon to check the already available fonts in your document.
 
-![Image](fonts-2.png)
+![screenshot](fonts-2.png)
 
 Click on the "+" sign to add a new font.
 
 The available fonts are shown ([GraFx Fonts](/GraFx-Fonts/) application).
 
-![Image](fonts-3.png)
+![screenshot](fonts-3.png)
 
 Select the font family you wish to add to your document.
 
 Remark: The full family will be added to your document.
 
-![Image](fonts-4.png)
+![screenshot](fonts-4.png)
 
 Your font family is now available to use in the document.
 
-![Image](fonts-5.png)
\ No newline at end of file
+![screenshot](fonts-5.png)
\ No newline at end of file
diff --git a/docs/GraFx-Studio/guides/add-fonts/resources-panel.png b/docs/GraFx-Studio/guides/add-fonts/resources-panel.png
new file mode 100644
index 00000000..307375c8
Binary files /dev/null and b/docs/GraFx-Studio/guides/add-fonts/resources-panel.png differ
diff --git a/docs/GraFx-Studio/guides/barcodes/add/barcodes1.gif b/docs/GraFx-Studio/guides/barcodes/add/barcodes1.gif
index eff74552..c18c3c7a 100644
Binary files a/docs/GraFx-Studio/guides/barcodes/add/barcodes1.gif and b/docs/GraFx-Studio/guides/barcodes/add/barcodes1.gif differ
diff --git a/docs/GraFx-Studio/guides/barcodes/add/index.md b/docs/GraFx-Studio/guides/barcodes/add/index.md
index 71ed4da8..afd73556 100644
--- a/docs/GraFx-Studio/guides/barcodes/add/index.md
+++ b/docs/GraFx-Studio/guides/barcodes/add/index.md
@@ -11,7 +11,7 @@ Some properties will not be visible, because the definition of this barcode don'
 
 Some properties can be found under the "..." (three dots) menu
 
-![ui](barcodes1.gif)
+![screenshot-full](barcodes1.gif)
 
 ## Values in barcodes
 
@@ -19,7 +19,7 @@ Some properties can be found under the "..." (three dots) menu
 
 By default, you can enter a static value in the barcode properties. (Set value)
 
-![ui](staticvalue.png)
+![screenshot-full](staticvalue.png)
 
 ### Variable value
 
@@ -27,8 +27,8 @@ To unleash the power of real Creative Automation, you can link a value to a vari
 
 Start by defining your variable. [See Variables](/GraFx-Studio/guides/template-variables/define/)
 
-![ui](variables.png)
+![screenshot-full](variables.png)
 
 Link the variable to your Bar- or QR code.
 
-![ui](variablevalue.png)
+![screenshot-full](variablevalue.png)
diff --git a/docs/GraFx-Studio/guides/image-frame/bottom-quicktools-ui.png b/docs/GraFx-Studio/guides/image-frame/bottom-quicktools-ui.png
new file mode 100644
index 00000000..b8331f8f
Binary files /dev/null and b/docs/GraFx-Studio/guides/image-frame/bottom-quicktools-ui.png differ
diff --git a/docs/GraFx-Studio/guides/image-frame/image-3.png b/docs/GraFx-Studio/guides/image-frame/image-3.png
index 1f16dd9c..f7e0b402 100644
Binary files a/docs/GraFx-Studio/guides/image-frame/image-3.png and b/docs/GraFx-Studio/guides/image-frame/image-3.png differ
diff --git a/docs/GraFx-Studio/guides/image-frame/index.md b/docs/GraFx-Studio/guides/image-frame/index.md
index 41798498..ed5bc84e 100644
--- a/docs/GraFx-Studio/guides/image-frame/index.md
+++ b/docs/GraFx-Studio/guides/image-frame/index.md
@@ -6,7 +6,7 @@ See concept [Image frames](/GraFx-Studio/concepts/frames/#image-frame)
 
 Select the image tool in the sidebar. You can also use the shortcut for the shape you wish to draw.
 
-![screenhot](image-1.png)
+![screenshotsmall](image-1.png)
 
 Drag a rectangle on the canvas. The frame will initially look like a crossed rectangle.
 
@@ -14,13 +14,15 @@ Drag a rectangle on the canvas. The frame will initially look like a crossed rec
 
 ## Choose media
 
-With the frame selected, open the media panel, and select an asset.
+With the frame selected, open the **resource panel** > **media panel**, and select an asset.
 
-![screen](image-3.png)
+![screenshotsmall](bottom-quicktools-ui.png)
 
-![screen](image-4.png)
+![screenshot](image-3.png)
 
-![screen](image-5.png)
+![screenshot](image-4.png)
+
+![screenshot](image-5.png)
 
 The initial fit of the asset in the frame is to fill the frame. (see Fill properties below)
 
@@ -30,28 +32,28 @@ Similar properties as with all frames. See [Basic properties](/GraFx-Studio/conc
 
 ### Fill properties
 
-![screen](fitfill.png)
+![screenshot-full](fitfill.png)
 
 
 #### Fit
 
 Choose the Fit property, to fit the full imge inside the frame. Whitespace is created if needed, to fit the full image.
 
-![screen](image-7.png)
+![screenshot](image-7.png)
 
 #### Fill
 
 Choose the Fill property, to fill the full frame with the image. No whitespace is left inside the frame. Part of the image is hidden.
 
-![screen](image-6.png)
+![screenshot](image-6.png)
 
 #### Aspect radio
 
 If the image and the frame have the exact aspect ratio, there will be no difference between fitt and fill.
 
-![screen](fit.png)
+![screenshot-full](fit.png)
 
-![screen](fill.png)
+![screenshot-full](fill.png)
 
 #### Crop
 
diff --git a/docs/GraFx-Studio/guides/image-frame/resources-panel.png b/docs/GraFx-Studio/guides/image-frame/resources-panel.png
new file mode 100644
index 00000000..307375c8
Binary files /dev/null and b/docs/GraFx-Studio/guides/image-frame/resources-panel.png differ
diff --git a/docs/GraFx-Studio/guides/paragraphstyles/bottom-quicktools-ui.png b/docs/GraFx-Studio/guides/paragraphstyles/bottom-quicktools-ui.png
new file mode 100644
index 00000000..b8331f8f
Binary files /dev/null and b/docs/GraFx-Studio/guides/paragraphstyles/bottom-quicktools-ui.png differ
diff --git a/docs/GraFx-Studio/guides/paragraphstyles/index.md b/docs/GraFx-Studio/guides/paragraphstyles/index.md
index 90e7e3a1..a52217fb 100644
--- a/docs/GraFx-Studio/guides/paragraphstyles/index.md
+++ b/docs/GraFx-Studio/guides/paragraphstyles/index.md
@@ -2,26 +2,28 @@
 
 ## Define a paragraph style
 
-Open the Stylekit panel.
+Open the **Resource Panel** > **Stylekit panel**.
 
-![Button](ps-1.png)
+![screenshotsmall](bottom-quicktools-ui.png)
+
+![screenshot](stylekit.png)
 
 Select the first tab to view paragraph- and character styles
 
-![Image](ps-2.png)
+![screenshot](ps-2.png)
 
 Click on the "+" sign to ad a new paragraph style.
 Each click on the "+" sign will add another (empty) paragraph style.
 
-![Image](ps-3.png)
+![screenshot](ps-3.png)
 
 Click on the "..." menu next to the newly created paragraph style and choose edit or click the pencil to edit the style.
 
-![Image](ps-4.png)
+![screenshot](ps-4.png)
 
 Set all properties you want for this paragraph. Saving happens automatically.
 
-![Image](ps-8.png)
+![screenshot-full](ps-8.png)
 
 ## Apply a paragraph style
 
@@ -30,4 +32,4 @@ A paragraph is defined between the start of a sentence, up to the end-of-line ch
 
 In the properties panel on the right, select the paragraph style from the dropdown list.
 
-![Image](ps-6.png)
\ No newline at end of file
+![screenshot](ps-6.png)
\ No newline at end of file
diff --git a/docs/GraFx-Studio/guides/paragraphstyles/stylekit.png b/docs/GraFx-Studio/guides/paragraphstyles/stylekit.png
new file mode 100644
index 00000000..40c8876d
Binary files /dev/null and b/docs/GraFx-Studio/guides/paragraphstyles/stylekit.png differ
diff --git a/docs/GraFx-Studio/guides/swatches/bottom-quicktools-ui.png b/docs/GraFx-Studio/guides/swatches/bottom-quicktools-ui.png
new file mode 100644
index 00000000..b8331f8f
Binary files /dev/null and b/docs/GraFx-Studio/guides/swatches/bottom-quicktools-ui.png differ
diff --git a/docs/GraFx-Studio/guides/swatches/index.md b/docs/GraFx-Studio/guides/swatches/index.md
index 3c2d5c13..cb0ed151 100644
--- a/docs/GraFx-Studio/guides/swatches/index.md
+++ b/docs/GraFx-Studio/guides/swatches/index.md
@@ -2,24 +2,26 @@
 
 ## Define a swatch
 
-Open the Stylekit panel.
+Open the **Resource Panel** > **Stylekit panel**.
 
-![Button](stylekit-panel.png)
+![screenshotsmall](bottom-quicktools-ui.png)
+
+![screenshot](stylekit.png)
 
 Select the second tab to view swatches
 
-![Image](swatch-1.png)
+![screenshot](swatch-1.png)
 
 Click on the "+" sign to add a new swatch.
 Each click on the "+" sign will add another (white) swatch.
 
-![Image](swatch-2.png)
+![screenshot](swatch-2.png)
 
 Click on the "..." menu next to the newly created swatch and choose edit or click the color to edit.
 
 You can rename by clicking "Rename" in the "..." menu.
 
-![Image](swatch-3.png)
+![screenshot](swatch-3.png)
 
 ### Color picker
 
@@ -71,6 +73,6 @@ You can define a SPOT color with a name. This color will appear in the PDF outpu
 
 Where you can choose a color (character style or paragraph style), you'll be able to click the color and choose the swatch.
 
-![Image](swatch-5.png)
+![screenshot-full](swatch-5.png)
 
 Select "custom" to define a color ad-hoc.
diff --git a/docs/GraFx-Studio/guides/swatches/stylekit.png b/docs/GraFx-Studio/guides/swatches/stylekit.png
new file mode 100644
index 00000000..40c8876d
Binary files /dev/null and b/docs/GraFx-Studio/guides/swatches/stylekit.png differ