diff --git a/packages/shared/styles/components/organisms/SfCollectedProduct.scss b/packages/shared/styles/components/organisms/SfCollectedProduct.scss
index 6732a29b3b..038e9be772 100644
--- a/packages/shared/styles/components/organisms/SfCollectedProduct.scss
+++ b/packages/shared/styles/components/organisms/SfCollectedProduct.scss
@@ -1,8 +1,15 @@
 @import "../../helpers";
 .sf-collected-product {
+  --collected-product-main-flex-direction: row;
+
   position: relative;
   box-sizing: border-box;
-  display: flex;
+  display: grid;
+  grid-template-columns: 8.75rem 1fr;
+  grid-template-areas:
+    "aside main"
+    "configuration configuration"
+    "actions actions";
   max-width: var(--collected-product-width);
   padding: var(--collected-product-padding, var(--spacer-xs));
   background: var(--collected-product-background);
@@ -37,9 +44,8 @@
     right: var(--collected-product-remove-right, var(--spacer-xs));
   }
   &__aside {
-    order: -1;
+    grid-area: aside;
     position: relative;
-    flex: 0 0 8.75rem;
     line-height: 0;
   }
   &__image {
@@ -59,15 +65,29 @@
     --quantity-selector-height: 2.5rem;
   }
   &__main {
-    flex: 1;
+    grid-area: main;
+    display: flex;
+    flex-direction: column;
     margin: var(--collected-product-main-margin, 0 0 0 var(--spacer-base));
+  }
+  &__main-top {
+    display: flex;
+    flex-direction: var(--collected-product-main-flex-direction, row);
+    justify-content: space-between;
+  }
+  &__configuration {
+    grid-area: configuration;
+    margin: var(--collected-product-configuration-margin, 0 0 0 var(--spacer-base));
+  }
+  &__details {
     display: flex;
-    flex-direction: var(--collected-product-main-flex-direction, column);
+    flex-direction: column;
   }
-  &__details,
   &__actions {
+    grid-area: actions;
     display: flex;
     flex-direction: column;
+    margin: var(--collected-product-actions-margin, 0 0 0 var(--spacer-base));
   }
   &__title {
     display: inline-block;
@@ -91,6 +111,11 @@
     --collected-product-remove-transition: opacity 150ms ease-in-out;
     --collected-product-remove-circle-icon-display: flex;
     --collected-product-remove-text-display: none;
+    grid-template-columns: 8.75rem 1fr;
+    grid-template-areas:
+      "aside main"
+      "aside configuration"
+      "aside actions";
     &::after {
       --collected-product-transition: box-shadow 150ms ease-in-out;
     }
@@ -111,9 +136,6 @@
         );
       }
     }
-    &__aside {
-      flex: 0 0 8.75rem;
-    }
     &__image {
       mix-blend-mode: darken;
     }
@@ -126,7 +148,6 @@
         flex-end
       );
       align-items: var(--collected-product-actions-align-items, flex-start);
-      flex: 2;
     }
     &--detailed {
       --collected-product-width: 100%;
@@ -136,7 +157,6 @@
       --collected-product-remove-right: var(--spacer-xs);
       --collected-product-remove-text-display: inline;
       --collected-product-actions-justify-content: flex-start;
-      --collected-product-main-flex-direction: row;
       --collected-product-actions-align-items: flex-start;
       &:hover {
         --collected-product-box-shadow: none;
diff --git a/packages/vue/src/components/organisms/SfCollectedProduct/SfCollectedProduct.vue b/packages/vue/src/components/organisms/SfCollectedProduct/SfCollectedProduct.vue
index 7a46e6777c..88b7a83be1 100644
--- a/packages/vue/src/components/organisms/SfCollectedProduct/SfCollectedProduct.vue
+++ b/packages/vue/src/components/organisms/SfCollectedProduct/SfCollectedProduct.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="sf-collected-product">
     <div class="sf-collected-product__main">
-      <div class="sf-collected-product__details">
-        <slot name="title" v-bind="{ title }">
-          <div class="sf-collected-product__title-wraper">
+      <div class="sf-collected-product__main-top">
+        <div class="sf-collected-product__details">
+          <slot name="title" v-bind="{ title }">
+            <div class="sf-collected-product__title-wraper">
             <SfLink
               :link="link"
               class="sf-collected-product__title"
               v-if="link"
             >
-              {{ title }}
-            </SfLink>
+                {{ title }}
+              </SfLink>
 
             <label
               class="sf-collected-product__title"
@@ -18,21 +19,41 @@
              >
               {{ title }}
             </label>
-          </div>
-        </slot>
-        <slot name="price" v-bind="{ specialPrice, regularPrice }">
-          <SfPrice
-            v-if="regularPrice"
-            :regular="regularPrice"
-            :special="specialPrice"
+            </div>
+          </slot>
+
+          <slot name="price" v-bind="{ specialPrice, regularPrice }">
+            <SfPrice
+              v-if="regularPrice"
+              :regular="regularPrice"
+              :special="specialPrice"
+            />
+          </slot>
+        </div>
+
+        <slot name="remove" v-bind="{ removeHandler }">
+          <SfCircleIcon
+            icon="cross"
+            aria-label="Remove"
+            class="sf-circle-icon--small sf-collected-product__remove sf-collected-product__remove--circle-icon"
           />
+          <SfButton
+            class="sf-button--text sf-collected-product__remove sf-collected-product__remove--text"
+            @click="removeHandler"
+            >Remove</SfButton
+          >
         </slot>
-        <slot name="configuration" />
-      </div>
-      <div class="sf-collected-product__actions">
-        <slot name="actions" />
       </div>
     </div>
+
+    <div class="sf-collected-product__configuration">
+      <slot name="configuration" />
+    </div>
+
+    <div class="sf-collected-product__actions">
+      <slot name="actions" />
+    </div>
+
     <div class="sf-collected-product__aside">
       <slot name="image" v-bind="{ image, title }">
         <SfImage
@@ -43,6 +64,7 @@
           class="sf-collected-product__image"
         />
       </slot>
+
       <slot name="input">
         <div class="sf-collected-product__quantity-wrapper">
           <SfQuantitySelector
@@ -53,18 +75,7 @@
         </div>
       </slot>
     </div>
-    <slot name="remove" v-bind="{ removeHandler }">
-      <SfCircleIcon
-        icon="cross"
-        aria-label="Remove"
-        class="sf-circle-icon--small sf-collected-product__remove sf-collected-product__remove--circle-icon"
-      />
-      <SfButton
-        class="sf-button--text sf-collected-product__remove sf-collected-product__remove--text"
-        @click="removeHandler"
-        >Remove</SfButton
-      >
-    </slot>
+
     <slot name="more-actions">
       <SfButton
         aria-label="More actions"