diff --git a/.github/workflows/checkout-test-build-deploy.yml b/.github/workflows/checkout-test-build-deploy.yml
index 7fac77e..53a6f1b 100644
--- a/.github/workflows/checkout-test-build-deploy.yml
+++ b/.github/workflows/checkout-test-build-deploy.yml
@@ -25,7 +25,7 @@ jobs:
     timeout-minutes: 5
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Prepare
         uses: ./.github/actions/checkout-install
diff --git a/src/components/banner/Cutdown.vue b/src/components/banner/Cutdown.vue
index 881a51a..9127d40 100644
--- a/src/components/banner/Cutdown.vue
+++ b/src/components/banner/Cutdown.vue
@@ -3,9 +3,9 @@
     <div class="banner--cutdown">
         <div class="cutdown_content">
             <picture>
-            <source media="(prefers-color-scheme: dark)" srcset="../../foundations/accessibility/foundations-accessibility-intro@dark.png 4x">
+            <source media="(prefers-color-scheme: dark)" srcset="/foundations/accessibility/foundations-accessibility-intro@dark.png 4x">
 
-            <img class="cutdown__thumbnail" decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="../../foundations/accessibility/foundations-accessibility-intro.png 4x" src="../../foundations/accessibility/foundations-accessibility-intro.png" width="100%" height="auto">
+            <img class="cutdown__thumbnail" decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="/foundations/accessibility/foundations-accessibility-intro.png 4x" src="/foundations/accessibility/foundations-accessibility-intro.png" width="100%" height="auto">
             </picture>
             <div class="left">
                 <div class="h-label"><slot name="eyebrow">{{ eyebrow }}</slot></div>
diff --git a/src/components/getstarted/HowToIntegrateResources.vue b/src/components/getstarted/HowToIntegrateResources.vue
index c2fdcda..e82d94e 100644
--- a/src/components/getstarted/HowToIntegrateResources.vue
+++ b/src/components/getstarted/HowToIntegrateResources.vue
@@ -7,17 +7,17 @@
       You can access and download the kit directly from our Figma account. Make sure you're signed in to Figma to download the file.
       </p>
       <picture>
-        <source media="(prefers-color-scheme: dark)" srcset="../../foundations/getstarted/foundations-getstarted-figma--download@dark.png 4x">
+        <source media="(prefers-color-scheme: dark)" srcset="/foundations/getstarted/foundations-getstarted-figma--download@dark.png 4x">
 
-        <img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="../../foundations/getstarted/foundations-getstarted-figma--download.png 4x" src="../../foundations/getstarted/foundations-getstarted-figma--download.png" width="100%" height="auto">
+        <img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="/foundations/getstarted/foundations-getstarted-figma--download.png 4x" src="/foundations/getstarted/foundations-getstarted-figma--download.png" width="100%" height="auto">
       </picture>
     </div>
       <div class="HowToIntegrateResources_subgrid">
         <div>
         <picture>
-          <source media="(prefers-color-scheme: dark)" srcset="../../foundations/getstarted/foundations-getstarted-figma--integrate@dark.png 2x">
+          <source media="(prefers-color-scheme: dark)" srcset="/foundations/getstarted/foundations-getstarted-figma--integrate@dark.png 2x">
 
-          <img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="../../foundations/getstarted/foundations-getstarted-figma--integrate.png 2x" src="../../foundations/getstarted/foundations-getstarted-figma--integrate.png" width="100%" height="auto">
+          <img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="/foundations/getstarted/foundations-getstarted-figma--integrate.png 2x" src="/foundations/getstarted/foundations-getstarted-figma--integrate.png" width="100%" height="auto">
         </picture>
         <p>
           <h3>Publish library to your workspace</h3> 
@@ -26,9 +26,9 @@
         </div>
         <div>
           <picture>
-            <source media="(prefers-color-scheme: dark)" srcset="../../foundations/getstarted/foundations-getstarted-figma--customize@dark.png 2x">
+            <source media="(prefers-color-scheme: dark)" srcset="/foundations/getstarted/foundations-getstarted-figma--customize@dark.png 2x">
 
-            <img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="../../foundations/getstarted/foundations-getstarted-figma--customize.png 2x" src="../../foundations/getstarted/foundations-getstarted-figma--customize.png" width="100%" height="auto">
+            <img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="/foundations/getstarted/foundations-getstarted-figma--customize.png 2x" src="/foundations/getstarted/foundations-getstarted-figma--customize.png" width="100%" height="auto">
           </picture>
           <p>
           <h3>Add library to your design files</h3> 
diff --git a/src/foundations/accessibility.md b/src/foundations/accessibility.md
index 1ee4446..99f48e1 100644
--- a/src/foundations/accessibility.md
+++ b/src/foundations/accessibility.md
@@ -19,9 +19,9 @@ import Cutdown from "../components/banner/Cutdown.vue";
 At Shopware, we are committed to creating inclusive and barrier-free shopping experiences for our valued merchants and their customers.
 
 <picture>
-<source media="(prefers-color-scheme: dark)" srcset="../foundations/accessibility/foundations-accessibility-intro@dark.png 4x">
+<source media="(prefers-color-scheme: dark)" srcset="/foundations/accessibility/foundations-accessibility-intro@dark.png 4x">
 
-<img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="../foundations/accessibility/foundations-accessibility-intro.png 4x" src="../foundations/accessibility/foundations-accessibility-intro.png" width="100%" height="auto">
+<img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="/foundations/accessibility/foundations-accessibility-intro.png 4x" src="/foundations/accessibility/foundations-accessibility-intro.png" width="100%" height="auto">
 </picture>
 
 ## Shopware is for everyone 
diff --git a/src/foundations/human-ai-interation.md b/src/foundations/human-ai-interation.md
index 34a4e8a..89672cd 100644
--- a/src/foundations/human-ai-interation.md
+++ b/src/foundations/human-ai-interation.md
@@ -36,9 +36,9 @@ The count is: {{ count }}
 Designing for Human-AI interaction requires a user-centric approach that prioritizes ease of use, clear communication, and continuous improvement. By following these guidelines, you can create an AI feature that seamlessly integrates with the merchants workflow and enhances their productivity and efficiency.
 
 <picture>
-<source media="(prefers-color-scheme: dark)" srcset="../foundations/principles/human-ai-interactions/foundations-human--ai--interactions-intro@dark.png 4x">
+<source media="(prefers-color-scheme: dark)" srcset="/foundations/principles/human-ai-interactions/foundations-human--ai--interactions-intro@dark.png 4x">
 
-<img decoding="async" loading="lazy" alt="A sketch of three circles overlaying each other. The image is tinted in shades of blue." srcset="../foundations/principles/human-ai-interactions/foundations-human--ai--interactions-intro.png 4x" src="../foundations/principles/human-ai-interactions/foundations-human--ai--interactions-intro.png" width="100%" height="auto">
+<img decoding="async" loading="lazy" alt="A sketch of three circles overlaying each other. The image is tinted in shades of blue." srcset="/foundations/principles/human-ai-interactions/foundations-human--ai--interactions-intro.png 4x" src="/foundations/principles/human-ai-interactions/foundations-human--ai--interactions-intro.png" width="100%" height="auto">
 </picture>
 
 ### Initially
@@ -74,6 +74,6 @@ Therefore, merchants must be able to review or preview AI-generated content befo
 
 ---
 
-[Learn more about UX Writing for Human-AI Interactions](/Product/Guides/Design/DesignSystem/HumanAIInteraction/UXWriting/)
+<!--[Learn more about UX Writing for Human-AI Interactions](/Product/Guides/Design/DesignSystem/HumanAIInteraction/UXWriting/)-->
 
 ---
diff --git a/src/foundations/index.md b/src/foundations/index.md
index 432ba08..ab48c16 100644
--- a/src/foundations/index.md
+++ b/src/foundations/index.md
@@ -24,9 +24,9 @@ import SwagTeam from "../components/team/SwagTeam.vue";
 Our Product Design Principles reflect how we think about design. They provide a way for us to look at the work we create and how we create it: **Building the right thing; building the thing right – distinctively Shopware.**
 
 <picture>
-<source media="(prefers-color-scheme: dark)" srcset="../foundations/principles/foundations-design--principles-intro@dark.png 4x">
+<source media="(prefers-color-scheme: dark)" srcset="/foundations/principles/foundations-design--principles-intro@dark.png 4x">
 
-<img decoding="async" loading="lazy" alt="A sketch of three circles overlaying each other. The image is tinted in shades of blue." srcset="../foundations/principles/foundations-design--principles-intro.png 4x" src="../foundations/principles/foundations-design--principles-intro.png" width="100%" height="auto">
+<img decoding="async" loading="lazy" alt="A sketch of three circles overlaying each other. The image is tinted in shades of blue." srcset="/foundations/principles/foundations-design--principles-intro.png 4x" src="/foundations/principles/foundations-design--principles-intro.png" width="100%" height="auto">
 </picture>
 
 >These Principles are the foundation of Shopware's products and services, they're important whether you work at Shopware or you're developing apps or other solutions for Shopware's eco-system. 
diff --git a/src/get-started/index.md b/src/get-started/index.md
index 341fdf6..f93d6d5 100644
--- a/src/get-started/index.md
+++ b/src/get-started/index.md
@@ -31,9 +31,9 @@ import NPM from "../components/interaction/NPM.vue";
   Meteor is Shopware’s open source design system – It is the basis of the Shopware Design Language, manifested in a unified system of components, styles, visuals and guidelines. It is therefore, the foundation for all of Shopware’s products. It helps us work together more efficiently and provides a unified process across teams to build empowering and delightful experiences for everyone.
   </p>
   <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="../foundations/getstarted/foundations-getstarted-intro@dark.png 4x">
+  <source media="(prefers-color-scheme: dark)" srcset="/foundations/getstarted/foundations-getstarted-intro@dark.png 4x">
 
-  <img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="../foundations/getstarted/foundations-getstarted-intro.png 4x" src="../foundations/getstarted/foundations-getstarted-intro.png" width="100%" height="auto">
+  <img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="/foundations/getstarted/foundations-getstarted-intro.png 4x" src="/foundations/getstarted/foundations-getstarted-intro.png" width="100%" height="auto">
   </picture>
 
 
diff --git a/src/index.md b/src/index.md
index b286be5..f7ea9aa 100644
--- a/src/index.md
+++ b/src/index.md
@@ -36,8 +36,8 @@ import NPM from "./components/interaction/NPM.vue";
     </template>
     <template #image>
     <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="./home/design-hero@dark.png 4x">
-    <img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="./home/design-hero.png 4x" src="./home/design-hero.png" width="100%" height="auto">
+    <source media="(prefers-color-scheme: dark)" srcset="/home/design-hero@dark.png 4x">
+    <img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="/home/design-hero.png 4x" src="/home/design-hero.png" width="100%" height="auto">
     </picture>
     </template>
 </SwagDesignHero>
diff --git a/src/public/foundations/getstarted/foundations-getstarted-figma--customize@dark.png b/src/public/foundations/getstarted/foundations-getstarted-figma--customize@dark.png
new file mode 100644
index 0000000..95a3834
Binary files /dev/null and b/src/public/foundations/getstarted/foundations-getstarted-figma--customize@dark.png differ
diff --git a/src/public/foundations/getstarted/foundations-getstarted-figma--integrate@dark.png b/src/public/foundations/getstarted/foundations-getstarted-figma--integrate@dark.png
new file mode 100644
index 0000000..9a77e55
Binary files /dev/null and b/src/public/foundations/getstarted/foundations-getstarted-figma--integrate@dark.png differ
diff --git a/src/team/index.md b/src/team/index.md
index 2cca04a..86617c3 100644
--- a/src/team/index.md
+++ b/src/team/index.md
@@ -24,8 +24,8 @@ import SwagTeamValuesMarquee from "../components/team/SwagTeamValuesMarquee.vue"
     <template #content><p>At Shopware, we're not just a design team – we're a crew of passionate individuals driven by innovation, rebellion, deep thinking, and creativity. We are united by a common passion for pushing boundaries and redefining the norm of commerce.</p></template>
     <template #image>
     <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="../home/design-hero@dark.png 4x">
-    <img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="../home/design-hero.png 4x" src="../home/design-hero.png" width="100%" height="auto">
+    <source media="(prefers-color-scheme: dark)" srcset="/home/design-hero@dark.png 4x">
+    <img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="/home/design-hero.png 4x" src="/home/design-hero.png" width="100%" height="auto">
     </picture>
     </template>
 </SwagTeamHero>