diff --git a/docs/GraFx-Studio/concepts/anchoring/anchor04.png b/docs/GraFx-Studio/concepts/anchoring/anchor04.png
index b40f6391..b82344d3 100644
Binary files a/docs/GraFx-Studio/concepts/anchoring/anchor04.png and b/docs/GraFx-Studio/concepts/anchoring/anchor04.png differ
diff --git a/docs/GraFx-Studio/concepts/anchoring/anchor05.png b/docs/GraFx-Studio/concepts/anchoring/anchor05.png
index e16c1640..21a43d5d 100644
Binary files a/docs/GraFx-Studio/concepts/anchoring/anchor05.png and b/docs/GraFx-Studio/concepts/anchoring/anchor05.png differ
diff --git a/docs/GraFx-Studio/concepts/anchoring/anchor06.png b/docs/GraFx-Studio/concepts/anchoring/anchor06.png
index adb8b882..d3e28fc4 100644
Binary files a/docs/GraFx-Studio/concepts/anchoring/anchor06.png and b/docs/GraFx-Studio/concepts/anchoring/anchor06.png differ
diff --git a/docs/GraFx-Studio/concepts/animation/show-timeline.png b/docs/GraFx-Studio/concepts/animation/show-timeline.png
index a2699f0c..9ffb0700 100644
Binary files a/docs/GraFx-Studio/concepts/animation/show-timeline.png and b/docs/GraFx-Studio/concepts/animation/show-timeline.png differ
diff --git a/docs/GraFx-Studio/concepts/barcodes/barcodes1.gif b/docs/GraFx-Studio/concepts/barcodes/barcodes1.gif
index eff74552..b9df029a 100644
Binary files a/docs/GraFx-Studio/concepts/barcodes/barcodes1.gif and b/docs/GraFx-Studio/concepts/barcodes/barcodes1.gif differ
diff --git a/docs/GraFx-Studio/concepts/barcodes/index.md b/docs/GraFx-Studio/concepts/barcodes/index.md
index a948dc39..ff052689 100644
--- a/docs/GraFx-Studio/concepts/barcodes/index.md
+++ b/docs/GraFx-Studio/concepts/barcodes/index.md
@@ -17,7 +17,7 @@ Barcodes are created and configured in GraFx Studio (different than in GraFx Pub
 - Click a barcode from the Barcode library
 - Configure using the properties panel
 
-![ui](barcodes1.gif)
+![screenshot-full](barcodes1.gif)
 
 ## Barcode-specific settings
 
@@ -38,13 +38,13 @@ The Bar height property is a decimal number in the unit of the layout
 
 Show the character that indicates the light margin
 
-![ui](barcodes2.gif)
+![screenshot-full](barcodes2.gif)
 
 ## Start and Stop characters
 
 Show the start and stop character
 
-![ui](barcodes3.gif)
+![screenshot-full](barcodes3.gif)
 
 
 ## Quiet zone
@@ -64,9 +64,9 @@ The appearance is the color for a specific part of the barcode.
 - Background represents the background color
 - Blend mode: apply [blend modes](/GraFx-Studio/concepts/blendmodes/), similar to image frames
 
-![ui](qr1.png)
+![screenshot-full](qr1.png)
 
-![ui](qr_blend.png)
+![screenshot-full](qr_blend.png)
 
 ## Magnification
 
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 9a413013..42aeaa97 100644
--- a/docs/GraFx-Studio/concepts/headless/index.md
+++ b/docs/GraFx-Studio/concepts/headless/index.md
@@ -1,3 +1,13 @@
 # Headless or automated
 
-Imagine a process that runs in the background, creating collateral in an automated way.
+In the context of CHILI GraFx, **"Headless"** or **"Automated"** refers to the ability to produce design variants by interacting directly with the API, without using the graphical interface of GraFx Studio.
+
+This approach is ideal for scenarios where you want to automate the creation of large batches of content, integrate with external systems, or streamline workflows that don't require manual input. By leveraging the API, you can:
+
+- **Generate Variants at Scale**: Automatically create hundreds or thousands of variations without manual intervention.
+- **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.
+
+![screenshot-full](code.png)
\ No newline at end of file
diff --git a/docs/GraFx-Studio/concepts/helper-functions/panel1.png b/docs/GraFx-Studio/concepts/helper-functions/panel1.png
index 1b32ab4b..4a036bfa 100644
Binary files a/docs/GraFx-Studio/concepts/helper-functions/panel1.png and b/docs/GraFx-Studio/concepts/helper-functions/panel1.png differ
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/characterstyles/bottom-quicktools-ui.png b/docs/GraFx-Studio/guides/characterstyles/bottom-quicktools-ui.png
new file mode 100644
index 00000000..b8331f8f
Binary files /dev/null and b/docs/GraFx-Studio/guides/characterstyles/bottom-quicktools-ui.png differ
diff --git a/docs/GraFx-Studio/guides/characterstyles/index.md b/docs/GraFx-Studio/guides/characterstyles/index.md
index 96c7ee44..bdd62f47 100644
--- a/docs/GraFx-Studio/guides/characterstyles/index.md
+++ b/docs/GraFx-Studio/guides/characterstyles/index.md
@@ -2,41 +2,43 @@
 
 ## Define a character style
 
-Open the Stylekit panel.
+Open the **Resource Panel** > **Stylekit panel**.
 
-![Button](cs-1.png)
+![screenshotsmall](bottom-quicktools-ui.png)
 
-Select the second tab to view paragraph- and character styles
+![screenshot](stylekit.png)
 
-![Image](cs-2.png)
+Select the first tab to view paragraph- and character styles
+
+![screenshot](cs-2.png)
 
 Click on the "+" sign to ad a new character style (bottom section is for character styles).
 Each click on the "+" sign will add another (empty) character style.
 
-![Image](cs-3.png)
+![screenshot](cs-3.png)
 
 Click on the "..." menu next to the newly created style and choose edit or click the pencil to edit the style.
 
 You can rename the style by clicking "Rename" in the "..." menu.
 
-![Image](cs-4.png)
+![screenshot](cs-4.png)
 
 Set all properties you want for this character. Saving happens automatically.
 
-![Image](cs-9.png)
+![screenshot](cs-9.png)
 
 ## Apply a character style
 
 Select the text you want to apply the character style to.
 
-![Image](cs-6.png)
+![screenshot](cs-6.png)
 
 DIfferent than with paragraph styles, with character styles you need to select the character or words you want to apply the style to.
 
 In the properties panel on the right, select the character style from the dropdown list.
 
-![Image](cs-7.png)
+![screenshot](cs-7.png)
 
 Your selected text now has the character style applied.
 
-![Image](cs-8.png)
\ No newline at end of file
+![screenshot](cs-8.png)
\ No newline at end of file
diff --git a/docs/GraFx-Studio/guides/characterstyles/stylekit.png b/docs/GraFx-Studio/guides/characterstyles/stylekit.png
new file mode 100644
index 00000000..40c8876d
Binary files /dev/null and b/docs/GraFx-Studio/guides/characterstyles/stylekit.png differ
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
diff --git a/docs/GraFx-Studio/overview/bottom-quicktools/bottom-quicktools-ui.png b/docs/GraFx-Studio/overview/bottom-quicktools/bottom-quicktools-ui.png
index fbb0ec84..ebdf3be2 100644
Binary files a/docs/GraFx-Studio/overview/bottom-quicktools/bottom-quicktools-ui.png and b/docs/GraFx-Studio/overview/bottom-quicktools/bottom-quicktools-ui.png differ
diff --git a/docs/GraFx-Studio/overview/bottom-quicktools/index.md b/docs/GraFx-Studio/overview/bottom-quicktools/index.md
index e4b581c1..0f46a2aa 100644
--- a/docs/GraFx-Studio/overview/bottom-quicktools/index.md
+++ b/docs/GraFx-Studio/overview/bottom-quicktools/index.md
@@ -2,13 +2,17 @@
 
 Set of tools at the bottom of the sidebar.
 
-- Alternate layout
+- Layouts
 - Layers & Animation
-- Media browser
-- Barcodes
-- Stylekit Panel
+- Resources
+    - Stylekit Panel
+    - Media
+    - Data Source
+    - Barcodes
 
-![appscreen](bottom-quicktools-ui.png)
+![screenshotsmall](bottom-quicktools-ui.png)
+
+![screenshot](resources-panel.png)
 
 E.g. When selecting the **Layers and Animation** tool, an extra properties panel will open.
 
diff --git a/docs/GraFx-Studio/overview/bottom-quicktools/resources-panel.png b/docs/GraFx-Studio/overview/bottom-quicktools/resources-panel.png
new file mode 100644
index 00000000..307375c8
Binary files /dev/null and b/docs/GraFx-Studio/overview/bottom-quicktools/resources-panel.png differ
diff --git a/docs/GraFx-Studio/overview/document-canvas/editor-labeled.png b/docs/GraFx-Studio/overview/document-canvas/editor-labeled.png
index fa0a6181..ee83237b 100644
Binary files a/docs/GraFx-Studio/overview/document-canvas/editor-labeled.png and b/docs/GraFx-Studio/overview/document-canvas/editor-labeled.png differ
diff --git a/docs/GraFx-Studio/overview/document/editor-doc.png b/docs/GraFx-Studio/overview/document/editor-doc.png
index ff3f17c8..69631765 100644
Binary files a/docs/GraFx-Studio/overview/document/editor-doc.png and b/docs/GraFx-Studio/overview/document/editor-doc.png differ
diff --git a/docs/GraFx-Studio/overview/hamburger-menu/edit.png b/docs/GraFx-Studio/overview/hamburger-menu/edit.png
index 5711afc3..a076ec95 100644
Binary files a/docs/GraFx-Studio/overview/hamburger-menu/edit.png and b/docs/GraFx-Studio/overview/hamburger-menu/edit.png differ
diff --git a/docs/GraFx-Studio/overview/hamburger-menu/file.png b/docs/GraFx-Studio/overview/hamburger-menu/file.png
index 2a0d0d74..d790990e 100644
Binary files a/docs/GraFx-Studio/overview/hamburger-menu/file.png and b/docs/GraFx-Studio/overview/hamburger-menu/file.png differ
diff --git a/docs/GraFx-Studio/overview/hamburger-menu/hamburger-menu.png b/docs/GraFx-Studio/overview/hamburger-menu/hamburger-menu.png
index 55f4215c..d4b3d855 100644
Binary files a/docs/GraFx-Studio/overview/hamburger-menu/hamburger-menu.png and b/docs/GraFx-Studio/overview/hamburger-menu/hamburger-menu.png differ
diff --git a/docs/GraFx-Studio/overview/hamburger-menu/hamburger1.png b/docs/GraFx-Studio/overview/hamburger-menu/hamburger1.png
index 0df189db..d4b3d855 100644
Binary files a/docs/GraFx-Studio/overview/hamburger-menu/hamburger1.png and b/docs/GraFx-Studio/overview/hamburger-menu/hamburger1.png differ
diff --git a/docs/GraFx-Studio/overview/hamburger-menu/view.png b/docs/GraFx-Studio/overview/hamburger-menu/view.png
index e93562b8..95c78dbe 100644
Binary files a/docs/GraFx-Studio/overview/hamburger-menu/view.png and b/docs/GraFx-Studio/overview/hamburger-menu/view.png differ
diff --git a/docs/GraFx-Studio/overview/stylekits/index.md b/docs/GraFx-Studio/overview/stylekits/index.md
index 89af7e72..cfec3a2b 100644
--- a/docs/GraFx-Studio/overview/stylekits/index.md
+++ b/docs/GraFx-Studio/overview/stylekits/index.md
@@ -1,31 +1,35 @@
 # Stylekit
 
-![appscreen](stylekit.png)
+![screenshotsmall](sk1.png)
+
+![screenshot](sk2.png)
+
+![screenshot](sk3.png)
 
 ## Text: Paragraph Styles
 
-![appscreen](paragraph-styles.png)
+![screenshot](paragraph-styles.png)
 
 The pencil button allows editting the properties.
 
 The fill color can be a custom color, or a predefined [swatch](/GraFx-Studio/concepts/stylekits/#swatch).
 
-![appscreen](select-color.png)
+![screenshot](select-color.png)
 
 
 ## Text: Character Styles
 
-![appscreen](character-styles.png)
+![screenshot](character-styles.png)
 
 ## Swatch
 
 A swatch is a color saved inside a Stylekit. You can reuse the swatch (predefined color) in paragraph- en character styles.
 
-![appscreen](swatch.png)
+![screenshot](swatch.png)
 
 Define a color, give it a name and save the named color to be used later in a style.
 
-![appscreen](swatch-2.png)
+![screenshot](swatch-2.png)
 
 ## Fonts
 
@@ -33,11 +37,11 @@ Define a color, give it a name and save the named color to be used later in a st
 
 Select the font-book to view your fonts, and add them to the stylekit.
 
-![appscreen](fonts.png)
+![screenshot](fonts.png)
 
 Select the font family you want to add to your document.
 
-![appscreen](font-browser.png)
+![screenshot](font-browser.png)
 
 
 [See GraFx Fonts](/GraFx-Fonts/)
\ No newline at end of file
diff --git a/docs/GraFx-Studio/overview/stylekits/sk1.png b/docs/GraFx-Studio/overview/stylekits/sk1.png
new file mode 100644
index 00000000..4c815aa8
Binary files /dev/null and b/docs/GraFx-Studio/overview/stylekits/sk1.png differ
diff --git a/docs/GraFx-Studio/overview/stylekits/sk2.png b/docs/GraFx-Studio/overview/stylekits/sk2.png
new file mode 100644
index 00000000..a4d92e54
Binary files /dev/null and b/docs/GraFx-Studio/overview/stylekits/sk2.png differ
diff --git a/docs/GraFx-Studio/overview/stylekits/sk3.png b/docs/GraFx-Studio/overview/stylekits/sk3.png
new file mode 100644
index 00000000..3876ecb5
Binary files /dev/null and b/docs/GraFx-Studio/overview/stylekits/sk3.png differ
diff --git a/docs/GraFx-Studio/overview/workspace-elements/editor-labeled.png b/docs/GraFx-Studio/overview/workspace-elements/editor-labeled.png
index 94a34d8f..69631765 100644
Binary files a/docs/GraFx-Studio/overview/workspace-elements/editor-labeled.png and b/docs/GraFx-Studio/overview/workspace-elements/editor-labeled.png differ
diff --git a/docs/GraFx-Studio/overview/workspace-elements/editor.png b/docs/GraFx-Studio/overview/workspace-elements/editor.png
index 08168970..69631765 100644
Binary files a/docs/GraFx-Studio/overview/workspace-elements/editor.png and b/docs/GraFx-Studio/overview/workspace-elements/editor.png differ
diff --git a/docs/GraFx-Studio/overview/workspace-elements/index.md b/docs/GraFx-Studio/overview/workspace-elements/index.md
index ee8308be..9a969594 100644
--- a/docs/GraFx-Studio/overview/workspace-elements/index.md
+++ b/docs/GraFx-Studio/overview/workspace-elements/index.md
@@ -2,8 +2,6 @@
 
 When opening the GraFx Studio editor, you will see the full workspace
 
-![appscreen](editor.png)
-
 ## Elements on screen
 
 ![appscreen](editor-labeled.png)