diff --git a/apps/web/__tests__/support/failOnError.ts b/apps/web/__tests__/support/failOnError.ts
index c8230ec5d..f5e9a1413 100644
--- a/apps/web/__tests__/support/failOnError.ts
+++ b/apps/web/__tests__/support/failOnError.ts
@@ -10,7 +10,7 @@ Cypress.on("window:before:load", (win) => {
   })
 });
 
-Cypress.on('uncaught:exception', (err, runnable) => {
+Cypress.on('uncaught:exception', (err) => {
   if (ignoreErrors.some(ignore => err.message.includes(ignore) || err.stack?.includes(ignore))) {
     return false;
   }
diff --git a/apps/web/__tests__/support/pageObjects/CartPageObject.ts b/apps/web/__tests__/support/pageObjects/CartPageObject.ts
index ad13fe194..2c55b3c2a 100644
--- a/apps/web/__tests__/support/pageObjects/CartPageObject.ts
+++ b/apps/web/__tests__/support/pageObjects/CartPageObject.ts
@@ -46,7 +46,7 @@ export class CartPageObject extends PageObject {
   }
 
   checkCart() {
-    cy.getFixture('products').then((fixture) => {
+    cy.getFixture('products').then(() => {
       this.assertCartPreviewElements();
     });
   }
diff --git a/apps/web/__tests__/support/pageObjects/CategoryObject.ts b/apps/web/__tests__/support/pageObjects/CategoryObject.ts
index 2c060e955..023414981 100644
--- a/apps/web/__tests__/support/pageObjects/CategoryObject.ts
+++ b/apps/web/__tests__/support/pageObjects/CategoryObject.ts
@@ -1,10 +1,14 @@
 import { PageObject } from "./PageObject";
 
 export class CategoryPageObject extends PageObject {
-  get filterClickShouldReloadCategory() {
+  get categoryFilter() {
+    return cy.getByTestId('category-filter-0');
+  }
+
+  filterClickShouldReloadCategory = () => {
     cy.intercept('/plentysystems/getFacet').as('getFacet');
-    cy.getByTestId('category-filter-0').first().click();
+    
+    this.categoryFilter.first().click();
     cy.wait('@getFacet').its('response.statusCode').should('eq', 200)
-    return this;
   }
 }
diff --git a/apps/web/__tests__/support/pageObjects/CookieBarObject.ts b/apps/web/__tests__/support/pageObjects/CookieBarObject.ts
index 91ebd0428..cd259181c 100644
--- a/apps/web/__tests__/support/pageObjects/CookieBarObject.ts
+++ b/apps/web/__tests__/support/pageObjects/CookieBarObject.ts
@@ -21,7 +21,7 @@ export class CookieBarObject extends PageObject {
   }
 
   checkExternalScript() {
-    return cy.document().then((doc) => {
+    return cy.document().then(() => {
       document.head.innerHTML.includes('test-cookie-external-script.js')
     })
   }
diff --git a/apps/web/__tests__/support/pageObjects/LoginPageObject.ts b/apps/web/__tests__/support/pageObjects/LoginPageObject.ts
deleted file mode 100644
index ce31c00d7..000000000
--- a/apps/web/__tests__/support/pageObjects/LoginPageObject.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { PageObject } from "./PageObject";
-
-export class LoginPageObject extends PageObject {
-  clickForgotPasswordLink() {
-    cy.getByTestId('login-page-reset-button').click();
-    return this;
-  }
-
-  successLogin() {
-    cy.getFixture('account').then((fixture) => {
-      cy.get(`[type="email"]`).type(fixture.email, { delay: 0 });
-      cy.get(`[type="password"]`).type(fixture.password, { delay: 0 });
-    });
-    cy.getByTestId('checkbox').realHover().click();
-    cy.get(`[type="submit"]`).click();
-    cy.contains('Sneaker hot drops').should('exist');
-  }
-
-  clickSignUpLink() {
-    cy.getByTestId('login-page-signup-button').click();
-    return this;
-  }
-  clickLoginLink() {
-    cy.getByTestId('signup-page-login-button').click();
-    return this;
-  }
-
-  isURL(path: string) {
-    cy.url().should('contain', path);
-    return this;
-  }
-}
diff --git a/apps/web/__tests__/support/pageObjects/PasswordPageObject.ts b/apps/web/__tests__/support/pageObjects/PasswordPageObject.ts
deleted file mode 100644
index ba3f472bb..000000000
--- a/apps/web/__tests__/support/pageObjects/PasswordPageObject.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { PageObject } from "./PageObject";
-
-export class PasswordPageObject extends PageObject {
-  get accountForm() {
-    return cy.getByTestId('input-field').should('be.visible');
-  }
-
-
-  backToLogin() {
-    cy.contains('Reset password').should('be.visible');
-    cy.contains('Back to Login').click();
-
-    return this;
-  }
-
-  isURL(path: string) {
-    cy.url().should('contain', path);
-
-    return this;
-  }
-
-  fillEmail() {
-    cy.getFixture('account').then((fixture) => {
-      this.accountForm.type(fixture.email, { delay: 0 });
-    });
-
-    return this;
-  }
-
-  resetPassword() {
-    cy.get('[type="submit"]').realClick();
-    cy.contains('Reset password');
-    cy.getByTestId('reset-password-page-reset-button').realClick();
-
-
-    return this;
-  }
-
-  setNewPassword() {
-    cy.getFixture('account').then((fixture) => {
-      cy.get(`[name="password"]`).type(fixture.password, { delay: 0 });
-      cy.get(`[name="repeatedPassword"]`).type(fixture.password, { delay: 0 });
-    });
-    cy.get('[type="submit"]').realClick();
-
-    return this;
-  }
-
-}
diff --git a/apps/web/__tests__/support/pageObjects/SignupPageObject.ts b/apps/web/__tests__/support/pageObjects/SignupPageObject.ts
deleted file mode 100644
index 81af7bcfa..000000000
--- a/apps/web/__tests__/support/pageObjects/SignupPageObject.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { PageObject } from "./PageObject";
-
-export class SignupPageObject extends PageObject {
-  createAccount() {
-    cy.getFixture('account').then((fixture) => {
-      cy.get(`[name="firstName"]`).type(fixture.firstname, { delay: 0 });
-      cy.get(`[name="lastName"]`).type(fixture.lastname, { delay: 0 });
-      cy.get(`[name="email"]`).type(fixture.email, { delay: 0 });
-      cy.get(`[name="password"]`).type(fixture.password, { delay: 0 });
-    });
-    cy.get('#terms').realHover().click();
-    cy.get('#subscription').realHover().click();
-    cy.get(`[type="submit"]`).click();
-    cy.get('[data-testid="modal"]').should('exist');
-    cy.contains('Go Shopping').click();
-    cy.contains('Sneaker hot drops').should('exist');
-  }
-}
diff --git a/apps/web/__tests__/test/feature/languageSelect.cy.ts b/apps/web/__tests__/test/feature/languageSelect.cy.ts
index c69263ca5..340c1596e 100644
--- a/apps/web/__tests__/test/feature/languageSelect.cy.ts
+++ b/apps/web/__tests__/test/feature/languageSelect.cy.ts
@@ -66,16 +66,12 @@ describe('Feature: Language Selector', () => {
   });
 
   function setMobileState(
-      url: string = paths.home,
       width: number = 390,
       height: number = 844,
-      acceptCookie = true
   ) {
     cy.visitAndHydrate(paths.home);
     cy.viewport(width, height)
-
-    if (acceptCookie) {
-      cookieBar.acceptAll();
-    }
+    
+    cookieBar.acceptAll();
   }
 });
diff --git a/apps/web/__tests__/test/smoke/categoryPage.cy.ts b/apps/web/__tests__/test/smoke/categoryPage.cy.ts
index 26141f095..4b4064b55 100644
--- a/apps/web/__tests__/test/smoke/categoryPage.cy.ts
+++ b/apps/web/__tests__/test/smoke/categoryPage.cy.ts
@@ -14,7 +14,7 @@ describe('Smoke: Category Page', () => {
     // This way we are independet from the language and the url.
     cy.visitAndHydrate('/living-room');
 
-    category.filterClickShouldReloadCategory;
+    category.filterClickShouldReloadCategory();
   })
 
   it('[smoke] Category should load DE SSR on first visit where there are no browser cookies', () => {
diff --git a/apps/web/__tests__/test/smoke/loginPage.cy.ts b/apps/web/__tests__/test/smoke/loginPage.cy.ts
deleted file mode 100644
index 818a51362..000000000
--- a/apps/web/__tests__/test/smoke/loginPage.cy.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { paths } from '../../../utils/paths';
-import { LoginPageObject } from '../../support/pageObjects/LoginPageObject';
-
-const login = new LoginPageObject();
-describe('Login page check', () => {
-  // it('Checking if forgot password button has correct link', () => {
-  //   cy.visitAndHydrate(paths.authLogin);
-  //
-  //   login
-  //   .clickForgotPasswordLink()
-  //   .isURL(paths.authResetPassword);
-  // });
-  //
-  // it('Checking moving form login to signup and back', () => {
-  //   cy.visitAndHydrate(paths.authLogin);
-  //
-  //  login
-  // .clickSignUpLink()
-  // .isURL(paths.authSignup)
-  // .clickLoginLink()
-  // .isURL(paths.authLogin);
-  // });
-  //
-  // it('Checking success login', () => {
-  //   cy.visitAndHydrate(paths.authLogin);
-  //
-  //   login.successLogin();
-  // });
-});
diff --git a/apps/web/__tests__/test/smoke/passwordPage.cy.ts b/apps/web/__tests__/test/smoke/passwordPage.cy.ts
deleted file mode 100644
index c47e9bb84..000000000
--- a/apps/web/__tests__/test/smoke/passwordPage.cy.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { paths } from '../../../utils/paths';
-import { PasswordPageObject } from '../../support/pageObjects/PasswordPageObject';
-
-const password = new PasswordPageObject();
-
-describe('Smoke: Password', () => {
-  // it('Checking if back to login button works', () => {
-  //   cy.visitAndHydrate(paths.authResetPassword);
-  //
-  //   password
-  //   .backToLogin()
-  //   .isURL(paths.authLogin)
-  // });
-  //
-  // it('Reset password check', () => {
-  //   cy.visitAndHydrate(paths.authResetPassword);
-  //
-  //   password.fillEmail().resetPassword().isURL(paths.authResetPassword);
-  // });
-  //
-  // it('Checking set new password page', () => {
-  //   cy.visitAndHydrate(paths.authSetNewPassword);
-  //
-  //   password.isURL(paths.authSetNewPassword).setNewPassword();
-  // });
-});
diff --git a/apps/web/__tests__/test/smoke/signupPage.cy.ts b/apps/web/__tests__/test/smoke/signupPage.cy.ts
deleted file mode 100644
index be00a1ae5..000000000
--- a/apps/web/__tests__/test/smoke/signupPage.cy.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { paths } from '../../../utils/paths';
-import { SignupPageObject } from '../../support/pageObjects/SignupPageObject';
-
-const signup = new SignupPageObject();
-
-describe('signup testing', () => {
-  // it('create account and go shopping', () => {
-  //   cy.visitAndHydrate(paths.authSignup);
-  //
-  //   signup.createAccount();
-  // });
-});
diff --git a/apps/web/components/Editor/Editor.vue b/apps/web/components/Editor/Editor.vue
index 9d6f6446b..6cda66642 100644
--- a/apps/web/components/Editor/Editor.vue
+++ b/apps/web/components/Editor/Editor.vue
@@ -26,6 +26,7 @@
 
 <script setup lang="ts">
 import { SfIconCancel } from '@storefront-ui/vue';
+import { watchDebounced } from '@vueuse/core';
 
 const props = defineProps<{
   block: Block | null;
@@ -37,17 +38,19 @@ const { jsonText, errorMessage, lineCount, textarea, lineNumberContainer, syncSc
   JSON.stringify(props.block, null, 2),
 );
 
-watch(
-  () => props.block,
-  (updatedData) => {
-    jsonText.value = JSON.stringify(updatedData, null, 2);
-  },
-  { immediate: true, deep: true },
-);
-
 const closeEditor = () => {
   emit('update', props.index, JSON.parse(jsonText.value));
   const { isEditing } = useEditor();
   isEditing.value = false;
 };
+
+watchDebounced(
+  () => jsonText.value,
+  () => {
+    if (jsonText.value !== '') {
+      emit('update', props.index, JSON.parse(jsonText.value));
+    }
+  },
+  { debounce: 100 },
+);
 </script>
diff --git a/apps/web/components/ProductRecommendedProducts/ProductRecommendedProducts.vue b/apps/web/components/ProductRecommendedProducts/ProductRecommendedProducts.vue
index 8c415b492..99b55926e 100644
--- a/apps/web/components/ProductRecommendedProducts/ProductRecommendedProducts.vue
+++ b/apps/web/components/ProductRecommendedProducts/ProductRecommendedProducts.vue
@@ -9,8 +9,8 @@
   </h2>
   <div v-if="text?.subtitle" class="text-2xl pb-1">{{ text.subtitle }}</div>
   <div
-    class="typography-text-sm md:typography-text-lg font-normal"
     v-if="text?.htmlDescription"
+    class="typography-text-sm md:typography-text-lg font-normal"
     v-html="text.htmlDescription"
   ></div>
   <ProductSlider v-if="recommendedProducts?.length" :items="recommendedProducts" />
diff --git a/apps/web/components/TextContent/TextContent.vue b/apps/web/components/TextContent/TextContent.vue
new file mode 100644
index 000000000..8f7c26d38
--- /dev/null
+++ b/apps/web/components/TextContent/TextContent.vue
@@ -0,0 +1,38 @@
+<template>
+  <div :class="['w-full', 'space-y-4', textAlignmentClass]">
+    <div v-if="text?.pretitle" class="text-xl font-bold mb-2">{{ text.pretitle }}</div>
+    <h2 v-if="text?.title" class="text-2xl font-semibold mb-4">{{ text.title }}</h2>
+    <div v-if="text?.subtitle" class="text-lg font-semibold">{{ text.subtitle }}</div>
+    <div v-if="text?.htmlDescription" class="text-base" v-html="text.htmlDescription" />
+    <UiButton
+      v-if="button?.label && button?.link"
+      :tag="NuxtLink"
+      :to="localePath(button?.link ?? '')"
+      :variant="button?.variant ?? 'primary'"
+      class="mt-3 px-4 py-2"
+    >
+      {{ button?.label }}
+    </UiButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed } from 'vue';
+import type { TextContentProps } from '~/components/TextContent/types';
+
+const props = defineProps<TextContentProps>();
+
+const localePath = useLocalePath();
+const NuxtLink = resolveComponent('NuxtLink');
+
+const textAlignmentClass = computed(() => {
+  switch (props.text?.textAlignment) {
+    case 'center':
+      return 'text-center items-center';
+    case 'right':
+      return 'text-right items-end';
+    default:
+      return 'text-left items-start';
+  }
+});
+</script>
diff --git a/apps/web/components/TextContent/types.ts b/apps/web/components/TextContent/types.ts
new file mode 100644
index 000000000..640f4cb81
--- /dev/null
+++ b/apps/web/components/TextContent/types.ts
@@ -0,0 +1,14 @@
+export type TextContentProps = {
+  text?: {
+    pretitle?: string;
+    title?: string;
+    subtitle?: string;
+    htmlDescription?: string;
+    textAlignment?: 'left' | 'center' | 'right';
+  };
+  button?: {
+    label?: string;
+    link?: string;
+    variant?: 'primary' | 'secondary';
+  };
+};
diff --git a/apps/web/components/ui/AccordionItem/AccordionItem.vue b/apps/web/components/ui/AccordionItem/AccordionItem.vue
index da151f4be..3efd51b38 100644
--- a/apps/web/components/ui/AccordionItem/AccordionItem.vue
+++ b/apps/web/components/ui/AccordionItem/AccordionItem.vue
@@ -4,7 +4,7 @@
       <slot name="summary">
         <p>{{ summary }}</p>
       </slot>
-      <SfIconChevronLeft :class="['text-neutral-500', modelValue ? 'rotate-90' : '-rotate-90']" />
+      <SfIconChevronLeft :class="['text-neutral-500', internalModelValue ? 'rotate-90' : '-rotate-90']" />
     </template>
     <div class="py-2 px-4">
       <slot />
@@ -18,7 +18,7 @@ import { useVModel } from '@vueuse/core';
 import type { AccordionItemProps } from '~/components/ui/AccordionItem/types';
 
 const props = defineProps<AccordionItemProps>();
-const { modelValue = false, summary = '', summaryClass = '' } = props;
+const { summary = '', summaryClass = '' } = props;
 const emit = defineEmits(['update:modelValue']);
 
 const internalModelValue = useVModel(props, 'modelValue', emit, { passive: true });
diff --git a/apps/web/components/ui/ImageText/ImageText.vue b/apps/web/components/ui/ImageText/ImageText.vue
new file mode 100644
index 000000000..5988a781e
--- /dev/null
+++ b/apps/web/components/ui/ImageText/ImageText.vue
@@ -0,0 +1,52 @@
+<template>
+  <div :class="['flex flex-col md:flex-row items-center', positionClass]">
+    <div :class="['md:w-1/2']">
+      <NuxtImg
+        :src="getImageUrl()"
+        :alt="props.image?.alt"
+        class="mx-auto h-auto object-cover"
+        :width="getImageDimensions().width"
+        :height="getImageDimensions().height"
+      />
+    </div>
+    <TextContent :text="props.text" :button="props.button" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ImageTextProps, ImageDimensions } from '~/components/ui/ImageText/types';
+
+const viewport = useViewport();
+
+const props = defineProps<ImageTextProps>();
+
+const positionClass = computed(() => (props.image?.imageAlignment === 'right' ? 'md:flex-row-reverse' : 'md:flex-row'));
+
+const getImageUrl = () => {
+  switch (viewport.breakpoint.value) {
+    case 'lg': {
+      return props.image?.desktop;
+    }
+    case 'md': {
+      return props.image?.tablet;
+    }
+    default: {
+      return props.image?.mobile;
+    }
+  }
+};
+
+const getImageDimensions = (): ImageDimensions => {
+  switch (viewport.breakpoint.value) {
+    case 'lg': {
+      return { width: 1200, height: 800 };
+    }
+    case 'md': {
+      return { width: 800, height: 533 };
+    }
+    default: {
+      return { width: 400, height: 267 };
+    }
+  }
+};
+</script>
diff --git a/apps/web/components/ui/ImageText/types.ts b/apps/web/components/ui/ImageText/types.ts
new file mode 100644
index 000000000..9f2a9be8d
--- /dev/null
+++ b/apps/web/components/ui/ImageText/types.ts
@@ -0,0 +1,27 @@
+export type ImageTextProps = {
+  image?: {
+    desktop?: string;
+    tablet?: string;
+    mobile?: string;
+    alt: string;
+    imageAlignment: 'left' | 'right';
+  };
+
+  text?: {
+    pretitle?: string;
+    title?: string;
+    subtitle?: string;
+    htmlDescription?: string;
+    textAlignment?: 'left' | 'center' | 'right';
+  };
+  button?: {
+    label?: string;
+    link?: string;
+    variant?: 'primary' | 'secondary';
+  };
+};
+
+export interface ImageDimensions {
+  width: number;
+  height: number;
+}
diff --git a/apps/web/components/ui/MediaCard/MediaCard.vue b/apps/web/components/ui/MediaCard/MediaCard.vue
deleted file mode 100644
index fd97694c7..000000000
--- a/apps/web/components/ui/MediaCard/MediaCard.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div v-if="showComponent" :class="['flex flex-col md:flex-row items-center', positionClass]">
-    <div v-if="image && image.trim() !== ''" :class="['w-full', 'md:w-1/2', { 'mb-4': text }]">
-      <img :src="image" :alt="alt" width="728" height="485" class="w-full h-auto object-cover" />
-    </div>
-
-    <div v-if="text && text.trim() !== ''" :class="['w-full no-preflight', textWidthClass]" v-html="text" />
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  image: {
-    type: String,
-    default: null,
-  },
-  alt: {
-    type: String,
-    default: null,
-  },
-  text: {
-    type: String,
-    default: null,
-  },
-  alignment: {
-    type: String,
-    default: 'left',
-    validator: (value: string) => ['left', 'right'].includes(value),
-  },
-});
-
-const showComponent = computed(() => {
-  return (props.image && props.image.trim() !== '') || (props.text && props.text.trim() !== '');
-});
-
-const textWidthClass = computed(() => {
-  return !props.image || props.image.trim() === '' ? 'w-full' : 'md:w-1/2';
-});
-
-const positionClass = computed(() => (props.alignment === 'right' ? 'md:flex-row-reverse' : 'md:flex-row'));
-</script>
diff --git a/apps/web/components/ui/MediaCard/types.ts b/apps/web/components/ui/MediaCard/types.ts
deleted file mode 100644
index 3eaf5cd1a..000000000
--- a/apps/web/components/ui/MediaCard/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type MediaItemProps = {
-  text: string;
-  image: string;
-  alt: string;
-  alignment: string;
-};
diff --git a/apps/web/components/ui/TextCard/TextCard.vue b/apps/web/components/ui/TextCard/TextCard.vue
index 7ccf49699..842347197 100644
--- a/apps/web/components/ui/TextCard/TextCard.vue
+++ b/apps/web/components/ui/TextCard/TextCard.vue
@@ -1,18 +1,6 @@
 <template>
   <div :class="['w-full', 'flex', 'flex-col', 'items-start', 'p-5', 'space-y-4', textAlignmentClass]">
-    <div v-if="props.text?.pretitle" class="text-xl font-bold mb-2">{{ props.text.pretitle }}</div>
-    <h2 v-if="props.text?.title" class="text-2xl font-semibold mb-4">{{ props.text.title }}</h2>
-    <div v-if="props.text?.subtitle" class="text-lg font-semibold">{{ props.text.subtitle }}</div>
-    <div v-if="props.text?.htmlDescription" class="text-base" v-html="props.text.htmlDescription" />
-    <UiButton
-      v-if="props.button?.label && props.button?.link"
-      :tag="NuxtLink"
-      :to="localePath(props.button?.link ?? '')"
-      :variant="props.button?.variant ?? 'primary'"
-      class="mt-3 px-4 py-2"
-    >
-      {{ props.button?.label }}
-    </UiButton>
+    <TextContent :text="props.text" :button="props.button" />
   </div>
 </template>
 
@@ -20,20 +8,15 @@
 import type { TextCardProps } from '~/components/ui/TextCard/types';
 
 const props = defineProps<TextCardProps>();
-const localePath = useLocalePath();
 
-const NuxtLink = resolveComponent('NuxtLink');
 const textAlignmentClass = computed(() => {
   switch (props.text?.textAlignment) {
-    case 'center': {
+    case 'center':
       return 'text-center items-center';
-    }
-    case 'right': {
+    case 'right':
       return 'text-right items-end';
-    }
-    default: {
+    default:
       return 'text-left items-start';
-    }
   }
 });
 </script>
diff --git a/apps/web/components/ui/Toolbar/Toolbar.vue b/apps/web/components/ui/Toolbar/Toolbar.vue
index c0968914a..85844a389 100644
--- a/apps/web/components/ui/Toolbar/Toolbar.vue
+++ b/apps/web/components/ui/Toolbar/Toolbar.vue
@@ -9,7 +9,6 @@
       <div class="ml-auto flex space-x-2">
         <button
           class="self-start text-[#062633] px-2 py-1 rounded-md font-inter font-medium text-sm leading-5 flex items-center md:px-4 md:py-2 md:text-base md:leading-6"
-          :disabled="!isEditingEnabled"
           data-testid="edit-preview-button"
           @click="toggleEdit"
         >
@@ -27,7 +26,8 @@
           </template>
         </button>
         <button
-          class="cursor-pointer self-start bg-[#062633] text-white px-2 py-1 rounded-md font-inter font-medium text-sm leading-5 flex items-center md:px-4 md:py-2 md:text-base md:leading-6"
+          class="self-start bg-[#062633] text-white px-2 py-1 rounded-md font-inter font-medium text-sm leading-5 flex items-center md:px-4 md:py-2 md:text-base md:leading-6"
+          :class="{ 'opacity-40 cursor-not-allowed': !isEditingEnabled || !isLocalTemplate() }"
           :disabled="!isEditingEnabled || !isLocalTemplate()"
           data-testid="edit-save-button"
           @click="updatePageTemplate"
diff --git a/apps/web/composables/useBlockManager/useBlockManager.ts b/apps/web/composables/useBlockManager/useBlockManager.ts
index 3fa863a2a..1de9c32a2 100644
--- a/apps/web/composables/useBlockManager/useBlockManager.ts
+++ b/apps/web/composables/useBlockManager/useBlockManager.ts
@@ -1,4 +1,6 @@
 import { ref, computed, onMounted } from 'vue';
+import { deepEqual } from '~/utils/jsonHelper';
+
 const isEmptyBlock = (block: Block): boolean => {
   const options = block?.options;
   return !options || (typeof options === 'object' && Object.keys(options).length === 0);
@@ -6,7 +8,8 @@ const isEmptyBlock = (block: Block): boolean => {
 const blockHasData = (block: Block): boolean => !isEmptyBlock(block);
 
 export function useBlockManager() {
-  const { data } = useHomepage();
+  const { data, initialBlocks } = useHomepage();
+  const { isEditing, isEditingEnabled } = useEditor();
 
   const currentBlock = ref<Block | null>(null);
   const currentBlockIndex = ref<number | null>(null);
@@ -37,7 +40,6 @@ export function useBlockManager() {
     if (data.value.blocks && data.value.blocks.length > index) {
       currentBlockIndex.value = index;
       currentBlock.value = data.value.blocks[index];
-      const { isEditing } = useEditor();
       isEditing.value = true;
     }
   };
@@ -45,6 +47,7 @@ export function useBlockManager() {
   const deleteBlock = (index: number) => {
     if (data.value.blocks && index !== null && index < data.value.blocks.length) {
       data.value.blocks.splice(index, 1);
+      isEditingEnabled.value = !deepEqual(initialBlocks.value, data.value.blocks);
     }
   };
 
diff --git a/apps/web/composables/useHomepage/homepageTemplateDataDe.json b/apps/web/composables/useHomepage/homepageTemplateDataDe.json
index b17cf4f14..702d4c17a 100644
--- a/apps/web/composables/useHomepage/homepageTemplateDataDe.json
+++ b/apps/web/composables/useHomepage/homepageTemplateDataDe.json
@@ -59,12 +59,27 @@
       }
     },
     {
-      "name": "UiMediaCard",
+      "name": "UiImageText",
       "options": {
-        "text": "<div class='flex flex-col mt-5 sm:mt-20 mt-0 sm:p-0 p-5 text-center sm:text-left'><span class='text-xl font-bold mb-2'>Die Zukunft des Klangs</span><h2 class='text-2xl font-semibold mb-4'>Das neue Hörerlebnis</h2><p class='typography-text-sm md:typography-text-lg mb-6 padding-right-desktop'>Unsere Kopfhörer-Kollektion setzt neue Maßstäbe in Sachen Audio-Präzision. Mit tiefem Bass, klaren Höhen und einem eindrucksvollen Klangbild bieten diese Kopfhörer ein einzigartiges Hörerlebnis für jedes Musikgenre. Mit Ihrer Kombination aus modernem Design, höchstem Komfort und neuester Technologie sind sie die perfekte Wahl für alle, die keine Kompromisse bei der Klangqualität eingehen möchten.</p><ul class='list-disc list-inside typography-text-sm md:typography-text-lg '><li>Premium-Sound in Studioqualität</li><li>Elegant und formschön</li><li>Lange Akkulaufzeit</li><li>Kabellose Verbindung via Bluetooth</li></ul></div>",
-        "image": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-mediacard.avif",
-        "alt": "Headphones",
-        "alignment": "left"
+        "text": {
+          "htmlDescription": "Willkommen in unserem Shop, in dem Technikbegeisterte und Modeliebhaber gleichermaßen fündig werden! Von Premium-Kopfhörern und Hochleistungsdrohnen bis hin zu stylischer Kleidung bieten wir alles, was Ihr Leben smarter und Ihren Style einzigartig macht. Unsere Mission ist es, Ihnen eine sorgfältig zusammengestellte Auswahl an Produkten zu bieten, die Qualität, Innovation und Design vereinen. Egal, ob Sie einen neuen Lautsprecher für perfekten Sound oder einen lässigen Hoodie suchen, um Ihren Look zu vervollständigen – bei uns sind Sie an der richtigen Adresse.",
+          "title": "Entdecken Sie Technik und Stil",
+          "subtitle": "Innovative Technologie trifft moderne Mode",
+          "pretitle": "Willkommen in Ihrem neuen Lieblingsshop",
+          "textAlignment": "left"
+        },
+        "button": {
+          "label": "Get Started",
+          "link": "",
+          "variant": "primary"
+        },
+        "image": {
+          "desktop": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-mediacard.avif",
+          "tablet": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-mediacard.avif",
+          "mobile": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-mediacard.avif",
+          "alt": "Headphones",
+          "imageAlignment": "right"
+        }
       }
     },
     {
diff --git a/apps/web/composables/useHomepage/homepageTemplateDataEn.json b/apps/web/composables/useHomepage/homepageTemplateDataEn.json
index e4d868414..e953da5e3 100644
--- a/apps/web/composables/useHomepage/homepageTemplateDataEn.json
+++ b/apps/web/composables/useHomepage/homepageTemplateDataEn.json
@@ -58,12 +58,27 @@
       }
     },
     {
-      "name": "UiMediaCard",
+      "name": "UiImageText",
       "options": {
-        "text": "<div class='flex flex-col mt-5 sm:mt-20 mt-0 sm:p-0 p-5 text-center sm:text-left'><span class='text-xl font-bold mb-2'>Experience the Future of Sound</span><h2 class='text-2xl font-semibold mb-4'>Redefine Your Listening Experience</h2><p class='typography-text-sm md:typography-text-lg mb-6 padding-right-desktop'>Our latest collection of headphones is designed to deliver unparalleled audio precision, with deep bass, clear highs, and an immersive experience for every genre of music. Combining sleek design, comfort, and cutting-edge technology, these headphones are made for those who refuse to compromise on sound quality.</p><ul class='list-disc list-inside typography-text-sm md:typography-text-lg '><li>Premium, studio-quality sound</li><li>Comfortable fit for extended listening</li><li>Long-lasting battery life</li><li>Seamless wireless connectivity</li></ul></div>",
-        "image": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-mediacard.avif",
-        "alt": "Headphones",
-        "alignment": "right"
+        "text": {
+          "htmlDescription": "Welcome to our shop, where tech enthusiasts and fashion lovers alike will find exactly what they’re looking for! From premium headphones and high-performance drones to stylish clothing, we offer everything to make your life smarter and your style unique.Our mission is to provide you with a carefully curated selection of products that combine quality, innovation, and design. Whether you’re in search of a new speaker for perfect sound or a casual hoodie to complete your look – we’ve got you covered.",
+          "title": "Discover Tech & Style",
+          "subtitle": "Innovative technology meets modern fashion",
+          "pretitle": "Welcome to your new favorite shop",
+          "textAlignment": "left"
+        },
+        "button": {
+          "label": "Get Started",
+          "link": "",
+          "variant": "primary"
+        },
+        "image": {
+          "desktop": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-mediacard.avif",
+          "tablet": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-mediacard.avif",
+          "mobile": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-mediacard.avif",
+          "alt": "Headphones",
+          "imageAlignment": "right"
+        }
       }
     },
     {
diff --git a/apps/web/composables/useHomepage/types.ts b/apps/web/composables/useHomepage/types.ts
index f3b76df81..fbceb745e 100644
--- a/apps/web/composables/useHomepage/types.ts
+++ b/apps/web/composables/useHomepage/types.ts
@@ -67,6 +67,7 @@ export interface HomepageData {
 
 export interface UseHomepageDataState {
   data: HomepageData;
+  initialBlocks: Block[];
   dataIsEmpty: boolean;
   loading: boolean;
   showErrors: boolean;
@@ -74,6 +75,7 @@ export interface UseHomepageDataState {
 
 export interface UseHomepage {
   data: Readonly<Ref<UseHomepageDataState['data']>>;
+  initialBlocks: Ref<UseHomepageDataState['initialBlocks']>;
   dataIsEmpty: Readonly<Ref<UseHomepageDataState['dataIsEmpty']>>;
   loading: Ref<boolean>;
   showErrors: Readonly<Ref<boolean>>;
diff --git a/apps/web/composables/useHomepage/useHomepage.ts b/apps/web/composables/useHomepage/useHomepage.ts
index 683983517..83ae5737d 100644
--- a/apps/web/composables/useHomepage/useHomepage.ts
+++ b/apps/web/composables/useHomepage/useHomepage.ts
@@ -8,6 +8,7 @@ const useLocaleSpecificHomepageTemplate = (locale: string) =>
 export const useHomepage: UseHomepageDataReturn = () => {
   const state = useState<UseHomepageDataState>('useHomepageState', () => ({
     data: { blocks: [], meta: { isDefault: null } } as HomepageData,
+    initialBlocks: [],
     dataIsEmpty: false,
     loading: false,
     showErrors: false,
@@ -47,6 +48,8 @@ export const useHomepage: UseHomepageDataReturn = () => {
       state.value.data = useLocaleSpecificHomepageTemplate(currentLocale.value);
     }
 
+    state.value.initialBlocks = state.value.data.blocks.map((block) => toRaw(block));
+
     await fetchRecommendedProducts();
   };
 
diff --git a/apps/web/composables/useJsonEditor/useJsonEditor.ts b/apps/web/composables/useJsonEditor/useJsonEditor.ts
index af51d34b4..8f8f61b01 100644
--- a/apps/web/composables/useJsonEditor/useJsonEditor.ts
+++ b/apps/web/composables/useJsonEditor/useJsonEditor.ts
@@ -6,6 +6,7 @@ export const useJsonEditor = (initialJson: string) => {
   const lineNumberContainer = ref<HTMLElement | null>(null);
 
   const jsonText = useState<string>('jsonText', () => initialJson);
+  const originalJsonText = jsonText.value;
 
   const syncScroll = () => {
     if (lineNumberContainer.value && textarea.value) {
@@ -31,10 +32,17 @@ export const useJsonEditor = (initialJson: string) => {
     }
   };
 
+  const checkInputChange = () => {
+    if (jsonText.value === originalJsonText) {
+      isEditingEnabled.value = false;
+    }
+  };
+
   const handleInput = () => {
     try {
       validateJson();
       updateLineCount();
+      checkInputChange();
     } catch (error: any) {
       errorMessage.value = 'Invalid JSON: ' + error.message;
       isEditingEnabled.value = false;
diff --git a/apps/web/composables/useProductReviewAverage/useProductReviewAverage.ts b/apps/web/composables/useProductReviewAverage/useProductReviewAverage.ts
index e216320ea..bc4ad4ab8 100644
--- a/apps/web/composables/useProductReviewAverage/useProductReviewAverage.ts
+++ b/apps/web/composables/useProductReviewAverage/useProductReviewAverage.ts
@@ -10,8 +10,8 @@ import type { FetchProductReviewAverage, UseProductReviewAverage, UseProductRevi
  * const { data, loading, fetchProductReviewAverage } = useProductReviewAverage(itemId);
  * ```
  */
-export const useProductReviewAverage: UseProductReviewAverage = (itemId: number) => {
-  const state = useState<UseProductReviewAverageState>('useProductReviewAverage', () => ({
+export const useProductReviewAverage: UseProductReviewAverage = () => {
+  const state = useState<UseProductReviewAverageState>(`useProductReviewAverage`, () => ({
     data: {} as ReviewAverage,
     loading: false,
   }));
diff --git a/apps/web/composables/useProductReviews/useProductReviews.ts b/apps/web/composables/useProductReviews/useProductReviews.ts
index 48c055577..b7a94ce71 100644
--- a/apps/web/composables/useProductReviews/useProductReviews.ts
+++ b/apps/web/composables/useProductReviews/useProductReviews.ts
@@ -40,7 +40,7 @@ export const useProductReviews: UseProductReviews = (itemId: number, productVari
    * fetchProductReviews(1, 1);
    * ```
    */
-  const fetchProductReviews: FetchProductReviews = async (itemId: number, variationId?: number) => {
+  const fetchProductReviews: FetchProductReviews = async (itemId: number) => {
     state.value.loading = true;
     const route = useRoute();
     const config = useRuntimeConfig().public;
diff --git a/apps/web/composables/useProducts/useProducts.ts b/apps/web/composables/useProducts/useProducts.ts
index 97a54b496..2c9000dbc 100644
--- a/apps/web/composables/useProducts/useProducts.ts
+++ b/apps/web/composables/useProducts/useProducts.ts
@@ -36,8 +36,6 @@ export const useProducts: UseProductsReturn = (category = '') => {
    */
   const fetchProducts: FetchProducts = async (params: FacetSearchCriteria) => {
     state.value.loading = true;
-    const localePath = useLocalePath();
-    const { isAuthorized } = useCustomer();
 
     if (params.categoryUrlPath?.endsWith('.js')) return state.value.data;
 
diff --git a/apps/web/composables/useQuickCheckout/__tests__/useQuickCheckout.spec.ts b/apps/web/composables/useQuickCheckout/__tests__/useQuickCheckout.spec.ts
index d9e155ab7..cac0189d8 100644
--- a/apps/web/composables/useQuickCheckout/__tests__/useQuickCheckout.spec.ts
+++ b/apps/web/composables/useQuickCheckout/__tests__/useQuickCheckout.spec.ts
@@ -3,19 +3,19 @@ import { ProductMock } from '../../../__tests__/__mocks__/product.mock';
 
 describe('useQuickCheckout', () => {
   it('should check if open is true', () => {
-    const { openQuickCheckout, quantity, isOpen, product } = useQuickCheckout();
+    const { openQuickCheckout, isOpen } = useQuickCheckout();
     openQuickCheckout(ProductMock, 3);
     expect(isOpen.value).toBe(true);
   });
 
   it('should return product that was added', () => {
-    const { openQuickCheckout, quantity, isOpen, product } = useQuickCheckout();
+    const { openQuickCheckout, product } = useQuickCheckout();
     openQuickCheckout(ProductMock, 3);
     expect(product.value).toStrictEqual(ProductMock);
   });
 
   it('should check if quantity is being set', () => {
-    const { openQuickCheckout, quantity, isOpen } = useQuickCheckout();
+    const { openQuickCheckout, quantity } = useQuickCheckout();
     openQuickCheckout(ProductMock, 3);
     expect(quantity.value).toBe(3);
   });
diff --git a/apps/web/composables/useReturnOrder/useReturnOrder.ts b/apps/web/composables/useReturnOrder/useReturnOrder.ts
index f952d2c18..8f9069663 100644
--- a/apps/web/composables/useReturnOrder/useReturnOrder.ts
+++ b/apps/web/composables/useReturnOrder/useReturnOrder.ts
@@ -137,7 +137,7 @@ export const useReturnOrder: UseReturnOrderReturn = () => {
   const cleanReturnData: CleanReturnData = () => {
     const data = state.value.returnData['variationIds'];
 
-    const filteredObject = Object.fromEntries(Object.entries(data).filter(([key, value]) => value.quantity > 0));
+    const filteredObject = Object.fromEntries(Object.entries(data).filter(([_, value]) => value.quantity > 0));
 
     state.value.returnData['variationIds'] = filteredObject;
   };
diff --git a/apps/web/composables/useStructuredData/types.ts b/apps/web/composables/useStructuredData/types.ts
index b4366e68e..9505ca15d 100644
--- a/apps/web/composables/useStructuredData/types.ts
+++ b/apps/web/composables/useStructuredData/types.ts
@@ -6,12 +6,14 @@ export interface UseStructuredDataState {
 export type SetProductMetaData = (product: Product, categoryTree: CategoryTreeItem) => void;
 export type SetLogoMeta = () => void;
 export type SetProductRobotsMetaData = (product: Product) => void;
+export type SetProductCanonicalMetaData = (product: Product) => void;
 
 export interface UseStructuredData {
   loading: Readonly<Ref<boolean>>;
   setLogoMeta: SetLogoMeta;
   setProductMetaData: SetProductMetaData;
   setProductRobotsMetaData: SetProductRobotsMetaData;
+  setProductCanonicalMetaData: SetProductCanonicalMetaData;
 }
 
 export type useStructuredDataReturn = () => UseStructuredData;
diff --git a/apps/web/composables/useStructuredData/useStructuredData.ts b/apps/web/composables/useStructuredData/useStructuredData.ts
index 5a39c783c..13b4afce1 100644
--- a/apps/web/composables/useStructuredData/useStructuredData.ts
+++ b/apps/web/composables/useStructuredData/useStructuredData.ts
@@ -3,10 +3,11 @@ import type {
   SetLogoMeta,
   SetProductMetaData,
   SetProductRobotsMetaData,
+  SetProductCanonicalMetaData,
   UseStructuredDataState,
 } from './types';
 import { categoryTreeGetters, productGetters, reviewGetters, productSeoSettingsGetters } from '@plentymarkets/shop-api';
-import type { CategoryTreeItem, Product } from '@plentymarkets/shop-api';
+import type { CategoryTreeItem, Product, CanonicalAlternate } from '@plentymarkets/shop-api';
 import { useProductReviews } from '../useProductReviews';
 import { useProductReviewAverage } from '../useProductReviewAverage';
 
@@ -210,10 +211,37 @@ export const useStructuredData: useStructuredDataReturn = () => {
     state.value.loading = false;
   };
 
+  const setProductCanonicalMetaData: SetProductCanonicalMetaData = (product: Product) => {
+    state.value.loading = true;
+
+    const canonical = productSeoSettingsGetters.getCanonical(product);
+
+    if (canonical) {
+      useHead({
+        link: [{ rel: 'canonical', href: productSeoSettingsGetters.getCanonicalHref(canonical) }],
+      });
+
+      const canonicalAlternates = productSeoSettingsGetters.getCanonicalAlternate(canonical);
+      const alternateLocales = canonicalAlternates.map((item: CanonicalAlternate) => {
+        return {
+          rel: 'alternate',
+          hreflang: productSeoSettingsGetters.getCanonicalAlternateHreflang(item),
+          href: productSeoSettingsGetters.getCanonicalAlternateHref(item),
+        };
+      });
+
+      useHead({
+        link: alternateLocales,
+      });
+    }
+    state.value.loading = false;
+  };
+
   return {
     setLogoMeta,
     setProductMetaData,
     setProductRobotsMetaData,
+    setProductCanonicalMetaData,
     ...toRefs(state.value),
   };
 };
diff --git a/apps/web/composables/useUpdatePageTemplate/useUpdatePageTemplate.ts b/apps/web/composables/useUpdatePageTemplate/useUpdatePageTemplate.ts
index 620f2d70e..53a83cffa 100644
--- a/apps/web/composables/useUpdatePageTemplate/useUpdatePageTemplate.ts
+++ b/apps/web/composables/useUpdatePageTemplate/useUpdatePageTemplate.ts
@@ -8,6 +8,8 @@ const stripArrayBrackets = (jsonString: string): string => {
 
 const updatePageTemplate = async (): Promise<void> => {
   const { setCategoryTemplate } = useCategoryTemplate();
+  const { isEditingEnabled } = useEditor();
+  const { initialBlocks } = useHomepage();
   const runtimeConfig = useRuntimeConfig();
   const homepageCategoryId = runtimeConfig.public.homepageCategoryId;
   const { data, loading } = useHomepage();
@@ -17,6 +19,8 @@ const updatePageTemplate = async (): Promise<void> => {
     await setCategoryTemplate(homepageCategoryId, cleanedData);
   } finally {
     loading.value = false;
+    isEditingEnabled.value = false;
+    initialBlocks.value = data.value.blocks.map((block) => toRaw(block));
   }
 };
 
diff --git a/apps/web/cypress.config.ts b/apps/web/cypress.config.ts
index 8ef2a2d99..55739fab6 100644
--- a/apps/web/cypress.config.ts
+++ b/apps/web/cypress.config.ts
@@ -14,6 +14,7 @@ export default defineConfig({
     DEFAULT_FEEDBACK_ITEMS_PER_PAGE: 10,
   },
   e2e: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
diff --git a/apps/web/eslint.config.mjs b/apps/web/eslint.config.mjs
index a13d1c43d..e12460290 100644
--- a/apps/web/eslint.config.mjs
+++ b/apps/web/eslint.config.mjs
@@ -46,8 +46,7 @@ export default withNuxt(
       '@typescript-eslint/no-invalid-void-type': 'off',
       '@typescript-eslint/no-namespace': 'off',
       '@typescript-eslint/no-require-imports': 'off',
-      '@typescript-eslint/no-unused-expressions': 'off',
-      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-expressions': ['error', { allowTernary: true }],
       'vue/no-export-in-script-setup': 'off',
       'vue/no-multiple-template-root': 'off',
       'vue/no-v-html': 'off',
diff --git a/apps/web/package.json b/apps/web/package.json
index e36293d9f..ec732edea 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,8 +12,8 @@
     "docs:build": "yarn publish-typedoc && vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "publish-typedoc": "yarn typedoc && mkdir -p docs/reference && mv reference/composables/ docs/reference",
-    "lint": "nuxi prepare && eslint .",
-    "lint:fix": "nuxi prepare && eslint . --fix",
+    "lint": "nuxi prepare && eslint . --max-warnings 0",
+    "lint:fix": "nuxi prepare && eslint . --fix --max-warnings 0",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "test": "vitest run",
diff --git a/apps/web/pages/index.vue b/apps/web/pages/index.vue
index 43569ee53..4f7896b89 100644
--- a/apps/web/pages/index.vue
+++ b/apps/web/pages/index.vue
@@ -48,9 +48,10 @@ const {
   updateBlock,
 } = useBlockManager();
 
-const { data, fetchPageTemplate, dataIsEmpty } = useHomepage();
+const { data, initialBlocks, fetchPageTemplate, dataIsEmpty } = useHomepage();
 const { showNewsletter } = useNewsletter();
 const { $i18n } = useNuxtApp();
+const { isEditing, isEditingEnabled, disableActions } = useEditor();
 
 const defaultAddBlock = (lang: string) => {
   return lang === 'en' ? homepageTemplateDataEn.blocks[1] : homepageTemplateDataDe.blocks[1];
@@ -63,18 +64,22 @@ const addNewBlock = (index: number, position: number) => {
   updatedBlocks.splice(insertIndex, 0, defaultAddBlock($i18n.locale.value));
 
   data.value.blocks = updatedBlocks;
-};
 
-const { isEditing, disableActions } = useEditor();
+  isEditingEnabled.value = !deepEqual(initialBlocks.value, data.value.blocks);
+};
 
 const getComponent = (name: string) => {
   if (name === 'NewsletterSubscribe') return resolveComponent('NewsletterSubscribe');
   if (name === 'UiHeroCarousel') return resolveComponent('UiHeroCarousel');
-  if (name === 'UiMediaCard') return resolveComponent('UiMediaCard');
   if (name === 'UiTextCard') return resolveComponent('UiTextCard');
+  if (name === 'UiImageText') return resolveComponent('UiImageText');
   if (name === 'ProductRecommendedProducts') return resolveComponent('ProductRecommendedProducts');
   if (name === 'UiBlazeCarousel') return resolveComponent('UiBlazeCarousel');
 };
 
+onMounted(() => {
+  isEditingEnabled.value = false;
+});
+
 fetchPageTemplate();
 </script>
diff --git a/apps/web/pages/product/[slug].vue b/apps/web/pages/product/[slug].vue
index 2d6dfb9e3..295f7bbe0 100644
--- a/apps/web/pages/product/[slug].vue
+++ b/apps/web/pages/product/[slug].vue
@@ -54,7 +54,7 @@ definePageMeta({
 const { t } = useI18n();
 const route = useRoute();
 const { setCurrentProduct } = useProducts();
-const { setProductMetaData, setProductRobotsMetaData } = useStructuredData();
+const { setProductMetaData, setProductRobotsMetaData, setProductCanonicalMetaData } = useStructuredData();
 const { buildProductLanguagePath } = useLocalization();
 const { addModernImageExtensionForGallery } = useModernImage();
 const { productParams, productId } = createProductParams(route.params);
@@ -114,6 +114,7 @@ watch(
         setProductMetaData(product.value, categoryTree);
         setProductRobotsMetaData(product.value);
       }
+      setProductCanonicalMetaData(product.value);
     }
   },
   { immediate: true },
diff --git a/apps/web/utils/jsonHelper.ts b/apps/web/utils/jsonHelper.ts
new file mode 100644
index 000000000..02b8ed08d
--- /dev/null
+++ b/apps/web/utils/jsonHelper.ts
@@ -0,0 +1,30 @@
+export const deepEqual = (object1: any, object2: any): boolean => {
+  if (object1 === object2) return true;
+
+  if (typeof object1 !== typeof object2 || object1 === null || object2 === null) {
+    return false;
+  }
+
+  if (Array.isArray(object1) && Array.isArray(object2)) {
+    if (object1.length !== object2.length) return false;
+    return object1.every((item, index) => deepEqual(item, object2[index]));
+  }
+
+  // Check if both are objects and narrow the types
+  if (isObject(object1) && isObject(object2)) {
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+
+    if (keys1.length !== keys2.length) return false;
+
+    return keys1.every((key) => {
+      return deepEqual(object1[key], object2[key]);
+    });
+  }
+
+  return false;
+};
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
diff --git a/docs/changelog/changelog_en.md b/docs/changelog/changelog_en.md
index f0ecbd520..7e9e7dc9d 100644
--- a/docs/changelog/changelog_en.md
+++ b/docs/changelog/changelog_en.md
@@ -9,6 +9,8 @@
 - Added delivery days to checkout shipping providers.
 - Added robots for category page.
 - Subtitle, pretitle and title options where added to the Recommened Products component
+- Added canonical for item page.
+- Media Card is now Image Text
 
 ### 🩹 Fixed
 
@@ -25,7 +27,9 @@
 - Updated cookie handling for PayPal: PayPal functionality now relies on an essential cookie, removing the need for user consent to enable it.
 - The homepage now displays recommended products on initial load.
 - Fixed product gallery thumbnail image alternate.
+- Saving button is now disabled if there are no changes made to the JSON or if the JSON is invalid.
 - The homepage now has the new version of the carousel
+- Fixed product accordions arrow display.
 
 ## v1.8.0 (2024-12-13) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.7.0...v1.8.0" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
 
diff --git a/package.json b/package.json
index 3f1a5a4e2..a15261647 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "lhci:desktop": "lhci collect --config=lighthouserc.desktop.json && lhci assert"
   },
   "dependencies": {
-    "@plentymarkets/shop-api": "^0.85.0",
+    "@plentymarkets/shop-api": "^0.86.0",
     "@types/applepayjs": "^14.0.8",
     "@types/drift-zoom": "^1.5.2",
     "@types/googlepay": "^0.7.6",
diff --git a/yarn.lock b/yarn.lock
index 7b53c2576..4a2ac6a14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4997,7 +4997,7 @@ __metadata:
     "@nuxt/test-utils": "npm:^3.13.1"
     "@nuxtjs/turnstile": "npm:^0.8.0"
     "@paypal/paypal-js": "npm:8.1.0"
-    "@plentymarkets/shop-api": "npm:^0.85.0"
+    "@plentymarkets/shop-api": "npm:^0.86.0"
     "@types/applepayjs": "npm:^14.0.8"
     "@types/drift-zoom": "npm:^1.5.2"
     "@types/googlepay": "npm:^0.7.6"
@@ -5032,14 +5032,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@plentymarkets/shop-api@npm:^0.85.0":
-  version: 0.85.0
-  resolution: "@plentymarkets/shop-api@npm:0.85.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40plentymarkets%2Fshop-api%2F0.85.0%2F3d012b0bb8221fb93a6c9829995107fee2b3417e"
+"@plentymarkets/shop-api@npm:^0.86.0":
+  version: 0.86.0
+  resolution: "@plentymarkets/shop-api@npm:0.86.0::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40plentymarkets%2Fshop-api%2F0.86.0%2F5bd99dc104eb1b5744354d59ccc603dc573d4446"
   dependencies:
     "@vue-storefront/middleware": "npm:^5.3.2"
     axios: "npm:^1.7.7"
     consola: "npm:^3.2.3"
-  checksum: 10c0/6ca0041b3c6b70cf6db1009b09eb8fa5a8fc74a064d965aa43fe593dac118c8a3220b4b3f2827e2fb095e2d32208700b555a18fcdb9fec2010e8de799c107943
+  checksum: 10c0/1ddbc8aef54221e8793e16e84903c518a67b61b06140b2404c5cfa637356bd395ef0b4874b00190196725e9c897ba762fe6d126a33c4627994e17b10817c14dc
   languageName: node
   linkType: hard