diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4d938e0f89b6..9785cecd70dd 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -114,7 +114,8 @@
     "__bits": "cpp",
     "__verbose_abort": "cpp",
     "variant": "cpp",
-    "charconv": "cpp"
+    "charconv": "cpp",
+    "execution": "cpp"
   },
   "files.exclude": {
     "Binaries/*build*": true,
diff --git a/Core/GDCore/Project/BehaviorConfigurationContainer.h b/Core/GDCore/Project/BehaviorConfigurationContainer.h
index 87e2fae1514e..9bdf4311bfa2 100644
--- a/Core/GDCore/Project/BehaviorConfigurationContainer.h
+++ b/Core/GDCore/Project/BehaviorConfigurationContainer.h
@@ -8,8 +8,10 @@
 
 #include <map>
 #include <memory>
-#include "GDCore/Serialization/Serializer.h"
+
 #include "GDCore/Project/QuickCustomization.h"
+#include "GDCore/Project/QuickCustomizationVisibilitiesContainer.h"
+#include "GDCore/Serialization/Serializer.h"
 #include "GDCore/String.h"
 
 namespace gd {
@@ -32,12 +34,21 @@ namespace gd {
  */
 class GD_CORE_API BehaviorConfigurationContainer {
  public:
-  BehaviorConfigurationContainer() : folded(false), quickCustomizationVisibility(QuickCustomization::Visibility::Default){};
+  BehaviorConfigurationContainer()
+      : folded(false),
+        quickCustomizationVisibility(QuickCustomization::Visibility::Default),
+        propertiesQuickCustomizationVisibilities() {};
   BehaviorConfigurationContainer(const gd::String& name_,
                                  const gd::String& type_)
-      : name(name_), type(type_), folded(false), quickCustomizationVisibility(QuickCustomization::Visibility::Default){};
+      : name(name_),
+        type(type_),
+        folded(false),
+        quickCustomizationVisibility(QuickCustomization::Visibility::Default),
+        propertiesQuickCustomizationVisibilities() {};
   virtual ~BehaviorConfigurationContainer();
-  virtual BehaviorConfigurationContainer* Clone() const { return new BehaviorConfigurationContainer(*this); }
+  virtual BehaviorConfigurationContainer* Clone() const {
+    return new BehaviorConfigurationContainer(*this);
+  }
 
   /**
    * \brief Return the name identifying the behavior
@@ -68,7 +79,6 @@ class GD_CORE_API BehaviorConfigurationContainer {
    */
   std::map<gd::String, gd::PropertyDescriptor> GetProperties() const;
 
-
   /**
    * \brief Called when the IDE wants to update a custom property of the
    * behavior
@@ -84,9 +94,7 @@ class GD_CORE_API BehaviorConfigurationContainer {
    * \brief Called to initialize the content with the default properties
    * for the behavior.
    */
-  virtual void InitializeContent() {
-    InitializeContent(content);
-  };
+  virtual void InitializeContent() { InitializeContent(content); };
 
   /**
    * \brief Serialize the behavior content.
@@ -115,15 +123,42 @@ class GD_CORE_API BehaviorConfigurationContainer {
    */
   bool IsFolded() const { return folded; }
 
-  void SetQuickCustomizationVisibility(QuickCustomization::Visibility visibility) {
+  /**
+   * @brief Set if the whole behavior should be visible or not in the Quick
+   * Customization.
+   */
+  void SetQuickCustomizationVisibility(
+      QuickCustomization::Visibility visibility) {
     quickCustomizationVisibility = visibility;
   }
 
+  /**
+   * @brief Get if the whole behavior should be visible or not in the Quick
+   * Customization.
+   */
   QuickCustomization::Visibility GetQuickCustomizationVisibility() const {
     return quickCustomizationVisibility;
   }
 
-protected:
+  /**
+   * @brief Get the map of properties and their visibility in the Quick
+   * Customization.
+   */
+  QuickCustomizationVisibilitiesContainer&
+  GetPropertiesQuickCustomizationVisibilities() {
+    return propertiesQuickCustomizationVisibilities;
+  }
+
+  /**
+   * @brief Get the map of properties and their visibility in the Quick
+   * Customization.
+   */
+  const QuickCustomizationVisibilitiesContainer&
+  GetPropertiesQuickCustomizationVisibilities() const {
+    return propertiesQuickCustomizationVisibilities;
+  }
+
+ protected:
   /**
    * \brief Called when the IDE wants to know about the custom properties of the
    * behavior.
@@ -159,7 +194,7 @@ class GD_CORE_API BehaviorConfigurationContainer {
    * \brief Called to initialize the content with the default properties
    * for the behavior.
    */
-  virtual void InitializeContent(gd::SerializerElement& behaviorContent){};
+  virtual void InitializeContent(gd::SerializerElement& behaviorContent) {};
 
  private:
   gd::String name;  ///< Name of the behavior
@@ -169,6 +204,8 @@ class GD_CORE_API BehaviorConfigurationContainer {
   gd::SerializerElement content;  // Storage for the behavior properties
   bool folded;
   QuickCustomization::Visibility quickCustomizationVisibility;
+  QuickCustomizationVisibilitiesContainer
+      propertiesQuickCustomizationVisibilities;
 };
 
 }  // namespace gd
diff --git a/Core/GDCore/Project/Layout.cpp b/Core/GDCore/Project/Layout.cpp
index 9c9ea5bcdcdd..3e1eb344c8d1 100644
--- a/Core/GDCore/Project/Layout.cpp
+++ b/Core/GDCore/Project/Layout.cpp
@@ -24,10 +24,11 @@
 #include "GDCore/Project/ObjectGroup.h"
 #include "GDCore/Project/ObjectGroupsContainer.h"
 #include "GDCore/Project/Project.h"
+#include "GDCore/Project/QuickCustomization.h"
 #include "GDCore/Serialization/SerializerElement.h"
 #include "GDCore/String.h"
-#include "GDCore/Tools/PolymorphicClone.h"
 #include "GDCore/Tools/Log.h"
+#include "GDCore/Tools/PolymorphicClone.h"
 
 using namespace std;
 
@@ -43,7 +44,7 @@ Layout& Layout::operator=(const Layout& other) {
   return *this;
 }
 
-Layout::~Layout(){};
+Layout::~Layout() {};
 
 Layout::Layout()
     : backgroundColorR(209),
@@ -52,9 +53,7 @@ Layout::Layout()
       stopSoundsOnStartup(true),
       standardSortMethod(true),
       disableInputWhenNotFocused(true),
-      variables(gd::VariablesContainer::SourceType::Scene)
-{
-}
+      variables(gd::VariablesContainer::SourceType::Scene) {}
 
 void Layout::SetName(const gd::String& name_) {
   name = name_;
@@ -102,7 +101,9 @@ const gd::Layer& Layout::GetLayer(const gd::String& name) const {
   return layers.GetLayer(name);
 }
 
-gd::Layer& Layout::GetLayer(std::size_t index) { return layers.GetLayer(index); }
+gd::Layer& Layout::GetLayer(std::size_t index) {
+  return layers.GetLayer(index);
+}
 
 const gd::Layer& Layout::GetLayer(std::size_t index) const {
   return layers.GetLayer(index);
@@ -125,9 +126,7 @@ void Layout::InsertLayer(const gd::Layer& layer, std::size_t position) {
   layers.InsertLayer(layer, position);
 }
 
-void Layout::RemoveLayer(const gd::String& name) {
-  layers.RemoveLayer(name);
-}
+void Layout::RemoveLayer(const gd::String& name) { layers.RemoveLayer(name); }
 
 void Layout::SwapLayers(std::size_t firstLayerIndex,
                         std::size_t secondLayerIndex) {
@@ -153,7 +152,7 @@ void Layout::UpdateBehaviorsSharedData(gd::Project& project) {
       allBehaviorsNames.push_back(behavior.GetName());
     }
   }
-  auto &globalObjects = project.GetObjects();
+  auto& globalObjects = project.GetObjects();
   for (std::size_t i = 0; i < globalObjects.GetObjectsCount(); ++i) {
     std::vector<gd::String> objectBehaviors =
         globalObjects.GetObject(i).GetAllBehaviorNames();
@@ -173,7 +172,8 @@ void Layout::UpdateBehaviorsSharedData(gd::Project& project) {
 
     if (behaviorsSharedData.find(name) != behaviorsSharedData.end()) continue;
 
-    auto sharedData = CreateBehaviorsSharedData(project, name, allBehaviorsTypes[i]);
+    auto sharedData =
+        CreateBehaviorsSharedData(project, name, allBehaviorsTypes[i]);
     if (sharedData) {
       behaviorsSharedData[name] = std::move(sharedData);
     }
@@ -196,37 +196,39 @@ void Layout::UpdateBehaviorsSharedData(gd::Project& project) {
 }
 
 std::unique_ptr<gd::BehaviorsSharedData> Layout::CreateBehaviorsSharedData(
-        gd::Project& project, const gd::String& name, const gd::String& behaviorsType) {
-    if (project.HasEventsBasedBehavior(behaviorsType)) {
-      auto sharedData =
-          gd::make_unique<gd::CustomBehaviorsSharedData>(name, project, behaviorsType);
-      sharedData->InitializeContent();
-      return std::move(sharedData);
-    }
-    const gd::BehaviorMetadata& behaviorMetadata =
-        gd::MetadataProvider::GetBehaviorMetadata(
-            project.GetCurrentPlatform(),
-            behaviorsType);
-    if (gd::MetadataProvider::IsBadBehaviorMetadata(behaviorMetadata)) {
-      gd::LogWarning("Tried to create a behavior shared data with an unknown type: " +
-                     behaviorsType + " on object " + GetName() + "!");
+    gd::Project& project,
+    const gd::String& name,
+    const gd::String& behaviorsType) {
+  if (project.HasEventsBasedBehavior(behaviorsType)) {
+    auto sharedData = gd::make_unique<gd::CustomBehaviorsSharedData>(
+        name, project, behaviorsType);
+    sharedData->InitializeContent();
+    return std::move(sharedData);
+  }
+  const gd::BehaviorMetadata& behaviorMetadata =
+      gd::MetadataProvider::GetBehaviorMetadata(project.GetCurrentPlatform(),
+                                                behaviorsType);
+  if (gd::MetadataProvider::IsBadBehaviorMetadata(behaviorMetadata)) {
+    gd::LogWarning(
+        "Tried to create a behavior shared data with an unknown type: " +
+        behaviorsType + " on object " + GetName() + "!");
     // It's probably an events-based behavior that was removed.
     // Create a custom behavior shared data to preserve the properties values.
-      auto sharedData =
-          gd::make_unique<gd::CustomBehaviorsSharedData>(name, project, behaviorsType);
-      sharedData->InitializeContent();
-      return std::move(sharedData);
-    }
+    auto sharedData = gd::make_unique<gd::CustomBehaviorsSharedData>(
+        name, project, behaviorsType);
+    sharedData->InitializeContent();
+    return std::move(sharedData);
+  }
 
-    gd::BehaviorsSharedData* behaviorsSharedDataBluePrint =
-        behaviorMetadata.GetSharedDataInstance();
-    if (!behaviorsSharedDataBluePrint) return nullptr;
+  gd::BehaviorsSharedData* behaviorsSharedDataBluePrint =
+      behaviorMetadata.GetSharedDataInstance();
+  if (!behaviorsSharedDataBluePrint) return nullptr;
 
-    auto sharedData = behaviorsSharedDataBluePrint->Clone();
-    sharedData->SetName(name);
-    sharedData->SetTypeName(behaviorsType);
-    sharedData->InitializeContent();
-    return std::unique_ptr<gd::BehaviorsSharedData>(sharedData);
+  auto sharedData = behaviorsSharedDataBluePrint->Clone();
+  sharedData->SetName(name);
+  sharedData->SetTypeName(behaviorsType);
+  sharedData->InitializeContent();
+  return std::unique_ptr<gd::BehaviorsSharedData>(sharedData);
 }
 
 void Layout::SerializeTo(SerializerElement& element) const {
@@ -243,11 +245,13 @@ void Layout::SerializeTo(SerializerElement& element) const {
 
   editorSettings.SerializeTo(element.AddChild("uiSettings"));
 
-  objectsContainer.GetObjectGroups().SerializeTo(element.AddChild("objectsGroups"));
+  objectsContainer.GetObjectGroups().SerializeTo(
+      element.AddChild("objectsGroups"));
   GetVariables().SerializeTo(element.AddChild("variables"));
   GetInitialInstances().SerializeTo(element.AddChild("instances"));
   objectsContainer.SerializeObjectsTo(element.AddChild("objects"));
-  objectsContainer.SerializeFoldersTo(element.AddChild("objectsFolderStructure"));
+  objectsContainer.SerializeFoldersTo(
+      element.AddChild("objectsFolderStructure"));
   gd::EventsListSerialization::SerializeEventsTo(events,
                                                  element.AddChild("events"));
 
@@ -257,15 +261,33 @@ void Layout::SerializeTo(SerializerElement& element) const {
       element.AddChild("behaviorsSharedData");
   behaviorDatasElement.ConsiderAsArrayOf("behaviorSharedData");
   for (const auto& it : behaviorsSharedData) {
+    const gd::BehaviorsSharedData& sharedData = *it.second;
     SerializerElement& dataElement =
         behaviorDatasElement.AddChild("behaviorSharedData");
 
-    it.second->SerializeTo(dataElement);
+    sharedData.SerializeTo(dataElement);
     dataElement.RemoveChild("type");  // The content can contain type or name
                                       // properties, remove them.
     dataElement.RemoveChild("name");
-    dataElement.SetAttribute("type", it.second->GetTypeName());
-    dataElement.SetAttribute("name", it.second->GetName());
+    dataElement.SetAttribute("type", sharedData.GetTypeName());
+    dataElement.SetAttribute("name", sharedData.GetName());
+
+    // Handle Quick Customization info.
+    dataElement.RemoveChild("propertiesQuickCustomizationVisibilities");
+    const QuickCustomizationVisibilitiesContainer&
+        propertiesQuickCustomizationVisibilities =
+            sharedData.GetPropertiesQuickCustomizationVisibilities();
+    if (!propertiesQuickCustomizationVisibilities.IsEmpty()) {
+      propertiesQuickCustomizationVisibilities.SerializeTo(
+          dataElement.AddChild("propertiesQuickCustomizationVisibilities"));
+    }
+    const QuickCustomization::Visibility visibility =
+        sharedData.GetQuickCustomizationVisibility();
+    if (visibility != QuickCustomization::Visibility::Default) {
+      dataElement.SetAttribute(
+          "quickCustomizationVisibility",
+          QuickCustomization::VisibilityAsString(visibility));
+    }
   }
 }
 
@@ -289,9 +311,11 @@ void Layout::UnserializeFrom(gd::Project& project,
   gd::EventsListSerialization::UnserializeEventsFrom(
       project, GetEvents(), element.GetChild("events", 0, "Events"));
 
-  objectsContainer.UnserializeObjectsFrom(project, element.GetChild("objects", 0, "Objets"));
+  objectsContainer.UnserializeObjectsFrom(
+      project, element.GetChild("objects", 0, "Objets"));
   if (element.HasChild("objectsFolderStructure")) {
-    objectsContainer.UnserializeFoldersFrom(project, element.GetChild("objectsFolderStructure", 0));
+    objectsContainer.UnserializeFoldersFrom(
+        project, element.GetChild("objectsFolderStructure", 0));
   }
   objectsContainer.AddMissingObjectsInRootFolder();
 
@@ -321,7 +345,6 @@ void Layout::UnserializeFrom(gd::Project& project,
                             "Behavior");  // Compatibility with GD <= 4
     gd::String name = sharedDataElement.GetStringAttribute("name", "", "Name");
 
-
     auto sharedData = CreateBehaviorsSharedData(project, name, type);
     if (sharedData) {
       // Compatibility with GD <= 4.0.98
@@ -336,6 +359,21 @@ void Layout::UnserializeFrom(gd::Project& project,
       else {
         sharedData->UnserializeFrom(sharedDataElement);
       }
+
+      // Handle Quick Customization info.
+      if (sharedDataElement.HasChild(
+              "propertiesQuickCustomizationVisibilities")) {
+        sharedData->GetPropertiesQuickCustomizationVisibilities()
+            .UnserializeFrom(sharedDataElement.GetChild(
+                "propertiesQuickCustomizationVisibilities"));
+      }
+      if (sharedDataElement.HasChild("quickCustomizationVisibility")) {
+        sharedData->SetQuickCustomizationVisibility(
+            QuickCustomization::StringAsVisibility(
+                sharedDataElement.GetStringAttribute(
+                    "quickCustomizationVisibility")));
+      }
+
       behaviorsSharedData[name] = std::move(sharedData);
     }
   }
@@ -390,8 +428,9 @@ gd::String GD_CORE_API GetTypeOfObject(const gd::ObjectsContainer& project,
     type = project.GetObject(name).GetType();
 
   // Search in groups.
-  // Currently, a group is considered as the "intersection" of all of its objects.
-  // Search "groups is the intersection of its objects" in the codebase.
+  // Currently, a group is considered as the "intersection" of all of its
+  // objects. Search "groups is the intersection of its objects" in the
+  // codebase.
   else if (searchInGroups) {
     for (std::size_t i = 0; i < layout.GetObjectGroups().size(); ++i) {
       if (layout.GetObjectGroups()[i].GetName() == name) {
@@ -448,11 +487,12 @@ gd::String GD_CORE_API GetTypeOfObject(const gd::ObjectsContainer& project,
   return type;
 }
 
-void GD_CORE_API FilterBehaviorNamesFromObject(
-    const gd::Object &object, const gd::String &behaviorType,
-    std::vector<gd::String> &behaviorNames) {
+void GD_CORE_API
+FilterBehaviorNamesFromObject(const gd::Object& object,
+                              const gd::String& behaviorType,
+                              std::vector<gd::String>& behaviorNames) {
   for (size_t i = 0; i < behaviorNames.size();) {
-    auto &behaviorName = behaviorNames[i];
+    auto& behaviorName = behaviorNames[i];
     if (!object.HasBehaviorNamed(behaviorName) ||
         object.GetBehavior(behaviorName).GetTypeName() != behaviorType) {
       behaviorNames.erase(behaviorNames.begin() + i);
@@ -462,19 +502,21 @@ void GD_CORE_API FilterBehaviorNamesFromObject(
   }
 }
 
-std::vector<gd::String> GD_CORE_API GetBehaviorNamesInObjectOrGroup(
-    const gd::ObjectsContainer &project, const gd::ObjectsContainer &layout,
-    const gd::String &objectOrGroupName, const gd::String &behaviorType,
-    bool searchInGroups) {
+std::vector<gd::String> GD_CORE_API
+GetBehaviorNamesInObjectOrGroup(const gd::ObjectsContainer& project,
+                                const gd::ObjectsContainer& layout,
+                                const gd::String& objectOrGroupName,
+                                const gd::String& behaviorType,
+                                bool searchInGroups) {
   // Search in objects.
   if (layout.HasObjectNamed(objectOrGroupName)) {
-    auto &object = layout.GetObject(objectOrGroupName);
+    auto& object = layout.GetObject(objectOrGroupName);
     auto behaviorNames = object.GetAllBehaviorNames();
     FilterBehaviorNamesFromObject(object, behaviorType, behaviorNames);
     return behaviorNames;
   }
   if (project.HasObjectNamed(objectOrGroupName)) {
-    auto &object = project.GetObject(objectOrGroupName);
+    auto& object = project.GetObject(objectOrGroupName);
     auto behaviorNames = object.GetAllBehaviorNames();
     FilterBehaviorNamesFromObject(object, behaviorType, behaviorNames);
     return behaviorNames;
@@ -486,9 +528,10 @@ std::vector<gd::String> GD_CORE_API GetBehaviorNamesInObjectOrGroup(
   }
 
   // Search in groups.
-  // Currently, a group is considered as the "intersection" of all of its objects.
-  // Search "groups is the intersection of its objects" in the codebase.
-  const gd::ObjectsContainer *container;
+  // Currently, a group is considered as the "intersection" of all of its
+  // objects. Search "groups is the intersection of its objects" in the
+  // codebase.
+  const gd::ObjectsContainer* container;
   if (layout.GetObjectGroups().Has(objectOrGroupName)) {
     container = &layout;
   } else if (project.GetObjectGroups().Has(objectOrGroupName)) {
@@ -497,7 +540,7 @@ std::vector<gd::String> GD_CORE_API GetBehaviorNamesInObjectOrGroup(
     std::vector<gd::String> behaviorNames;
     return behaviorNames;
   }
-  const vector<gd::String> &groupsObjects =
+  const vector<gd::String>& groupsObjects =
       container->GetObjectGroups().Get(objectOrGroupName).GetAllObjectsNames();
 
   // Empty groups don't contain any behavior.
@@ -510,15 +553,15 @@ std::vector<gd::String> GD_CORE_API GetBehaviorNamesInObjectOrGroup(
   auto behaviorNames = GetBehaviorNamesInObjectOrGroup(
       project, layout, groupsObjects[0], behaviorType, false);
   for (size_t i = 1; i < groupsObjects.size(); i++) {
-    auto &objectName = groupsObjects[i];
+    auto& objectName = groupsObjects[i];
 
     if (layout.HasObjectNamed(objectName)) {
-      auto &object = layout.GetObject(objectName);
+      auto& object = layout.GetObject(objectName);
       FilterBehaviorNamesFromObject(object, behaviorType, behaviorNames);
       return behaviorNames;
     }
     if (project.HasObjectNamed(objectName)) {
-      auto &object = project.GetObject(objectName);
+      auto& object = project.GetObject(objectName);
       FilterBehaviorNamesFromObject(object, behaviorType, behaviorNames);
       return behaviorNames;
     }
@@ -529,10 +572,10 @@ std::vector<gd::String> GD_CORE_API GetBehaviorNamesInObjectOrGroup(
   return behaviorNames;
 }
 
-bool GD_CORE_API HasBehaviorInObjectOrGroup(const gd::ObjectsContainer &project,
-                                            const gd::ObjectsContainer &layout,
-                                            const gd::String &objectOrGroupName,
-                                            const gd::String &behaviorName,
+bool GD_CORE_API HasBehaviorInObjectOrGroup(const gd::ObjectsContainer& project,
+                                            const gd::ObjectsContainer& layout,
+                                            const gd::String& objectOrGroupName,
+                                            const gd::String& behaviorName,
                                             bool searchInGroups) {
   // Search in objects.
   if (layout.HasObjectNamed(objectOrGroupName)) {
@@ -547,9 +590,10 @@ bool GD_CORE_API HasBehaviorInObjectOrGroup(const gd::ObjectsContainer &project,
   }
 
   // Search in groups.
-  // Currently, a group is considered as the "intersection" of all of its objects.
-  // Search "groups is the intersection of its objects" in the codebase.
-  const gd::ObjectsContainer *container;
+  // Currently, a group is considered as the "intersection" of all of its
+  // objects. Search "groups is the intersection of its objects" in the
+  // codebase.
+  const gd::ObjectsContainer* container;
   if (layout.GetObjectGroups().Has(objectOrGroupName)) {
     container = &layout;
   } else if (project.GetObjectGroups().Has(objectOrGroupName)) {
@@ -557,7 +601,7 @@ bool GD_CORE_API HasBehaviorInObjectOrGroup(const gd::ObjectsContainer &project,
   } else {
     return false;
   }
-  const vector<gd::String> &groupsObjects =
+  const vector<gd::String>& groupsObjects =
       container->GetObjectGroups().Get(objectOrGroupName).GetAllObjectsNames();
 
   // Empty groups don't contain any behavior.
@@ -566,9 +610,9 @@ bool GD_CORE_API HasBehaviorInObjectOrGroup(const gd::ObjectsContainer &project,
   }
 
   // Check that all objects have the behavior.
-  for (auto &&object : groupsObjects) {
-    if (!HasBehaviorInObjectOrGroup(project, layout, object, behaviorName,
-                                    false)) {
+  for (auto&& object : groupsObjects) {
+    if (!HasBehaviorInObjectOrGroup(
+            project, layout, object, behaviorName, false)) {
       return false;
     }
   }
@@ -576,18 +620,18 @@ bool GD_CORE_API HasBehaviorInObjectOrGroup(const gd::ObjectsContainer &project,
 }
 
 bool GD_CORE_API IsDefaultBehavior(const gd::ObjectsContainer& project,
-                                         const gd::ObjectsContainer& layout,
-                                         gd::String objectOrGroupName,
-                                         gd::String behaviorName,
-                                         bool searchInGroups) {
+                                   const gd::ObjectsContainer& layout,
+                                   gd::String objectOrGroupName,
+                                   gd::String behaviorName,
+                                   bool searchInGroups) {
   // Search in objects.
   if (layout.HasObjectNamed(objectOrGroupName)) {
-    auto &object = layout.GetObject(objectOrGroupName);
+    auto& object = layout.GetObject(objectOrGroupName);
     return object.HasBehaviorNamed(behaviorName) &&
            object.GetBehavior(behaviorName).IsDefaultBehavior();
   }
   if (project.HasObjectNamed(objectOrGroupName)) {
-    auto &object = project.GetObject(objectOrGroupName);
+    auto& object = project.GetObject(objectOrGroupName);
     return object.HasBehaviorNamed(behaviorName) &&
            object.GetBehavior(behaviorName).IsDefaultBehavior();
   }
@@ -597,9 +641,10 @@ bool GD_CORE_API IsDefaultBehavior(const gd::ObjectsContainer& project,
   }
 
   // Search in groups.
-  // Currently, a group is considered as the "intersection" of all of its objects.
-  // Search "groups is the intersection of its objects" in the codebase.
-  const gd::ObjectsContainer *container;
+  // Currently, a group is considered as the "intersection" of all of its
+  // objects. Search "groups is the intersection of its objects" in the
+  // codebase.
+  const gd::ObjectsContainer* container;
   if (layout.GetObjectGroups().Has(objectOrGroupName)) {
     container = &layout;
   } else if (project.GetObjectGroups().Has(objectOrGroupName)) {
@@ -607,7 +652,7 @@ bool GD_CORE_API IsDefaultBehavior(const gd::ObjectsContainer& project,
   } else {
     return false;
   }
-  const vector<gd::String> &groupsObjects =
+  const vector<gd::String>& groupsObjects =
       container->GetObjectGroups().Get(objectOrGroupName).GetAllObjectsNames();
 
   // Empty groups don't contain any behavior.
@@ -616,30 +661,32 @@ bool GD_CORE_API IsDefaultBehavior(const gd::ObjectsContainer& project,
   }
 
   // Check that all objects have the same type.
-  for (auto &&object : groupsObjects) {
-    if (!IsDefaultBehavior(project, layout, object, behaviorName,
-                                    false)) {
+  for (auto&& object : groupsObjects) {
+    if (!IsDefaultBehavior(project, layout, object, behaviorName, false)) {
       return false;
     }
   }
   return true;
 }
 
-gd::String GD_CORE_API GetTypeOfBehaviorInObjectOrGroup(const gd::ObjectsContainer& project,
-                                         const gd::ObjectsContainer& layout,
-                                         const gd::String& objectOrGroupName,
-                                         const gd::String& behaviorName,
-                                         bool searchInGroups) {
+gd::String GD_CORE_API
+GetTypeOfBehaviorInObjectOrGroup(const gd::ObjectsContainer& project,
+                                 const gd::ObjectsContainer& layout,
+                                 const gd::String& objectOrGroupName,
+                                 const gd::String& behaviorName,
+                                 bool searchInGroups) {
   // Search in objects.
   if (layout.HasObjectNamed(objectOrGroupName)) {
-    auto &object = layout.GetObject(objectOrGroupName);
-    return object.HasBehaviorNamed(behaviorName) ?
-           object.GetBehavior(behaviorName).GetTypeName() : "";
+    auto& object = layout.GetObject(objectOrGroupName);
+    return object.HasBehaviorNamed(behaviorName)
+               ? object.GetBehavior(behaviorName).GetTypeName()
+               : "";
   }
   if (project.HasObjectNamed(objectOrGroupName)) {
-    auto &object = project.GetObject(objectOrGroupName);
-    return object.HasBehaviorNamed(behaviorName) ?
-           object.GetBehavior(behaviorName).GetTypeName() : "";
+    auto& object = project.GetObject(objectOrGroupName);
+    return object.HasBehaviorNamed(behaviorName)
+               ? object.GetBehavior(behaviorName).GetTypeName()
+               : "";
   }
 
   if (!searchInGroups) {
@@ -647,9 +694,10 @@ gd::String GD_CORE_API GetTypeOfBehaviorInObjectOrGroup(const gd::ObjectsContain
   }
 
   // Search in groups.
-  // Currently, a group is considered as the "intersection" of all of its objects.
-  // Search "groups is the intersection of its objects" in the codebase.
-  const gd::ObjectsContainer *container;
+  // Currently, a group is considered as the "intersection" of all of its
+  // objects. Search "groups is the intersection of its objects" in the
+  // codebase.
+  const gd::ObjectsContainer* container;
   if (layout.GetObjectGroups().Has(objectOrGroupName)) {
     container = &layout;
   } else if (project.GetObjectGroups().Has(objectOrGroupName)) {
@@ -657,7 +705,7 @@ gd::String GD_CORE_API GetTypeOfBehaviorInObjectOrGroup(const gd::ObjectsContain
   } else {
     return "";
   }
-  const vector<gd::String> &groupsObjects =
+  const vector<gd::String>& groupsObjects =
       container->GetObjectGroups().Get(objectOrGroupName).GetAllObjectsNames();
 
   // Empty groups don't contain any behavior.
@@ -668,9 +716,9 @@ gd::String GD_CORE_API GetTypeOfBehaviorInObjectOrGroup(const gd::ObjectsContain
   // Check that all objects have the behavior with the same type.
   auto behaviorType = GetTypeOfBehaviorInObjectOrGroup(
       project, layout, groupsObjects[0], behaviorName, false);
-  for (auto &&object : groupsObjects) {
-    if (GetTypeOfBehaviorInObjectOrGroup(project, layout, object, behaviorName,
-                                    false) != behaviorType) {
+  for (auto&& object : groupsObjects) {
+    if (GetTypeOfBehaviorInObjectOrGroup(
+            project, layout, object, behaviorName, false) != behaviorType) {
       return "";
     }
   }
@@ -682,14 +730,14 @@ gd::String GD_CORE_API GetTypeOfBehavior(const gd::ObjectsContainer& project,
                                          gd::String name,
                                          bool searchInGroups) {
   for (std::size_t i = 0; i < layout.GetObjectsCount(); ++i) {
-    const auto &object = layout.GetObject(i);
+    const auto& object = layout.GetObject(i);
     if (object.HasBehaviorNamed(name)) {
       return object.GetBehavior(name).GetTypeName();
     }
   }
 
   for (std::size_t i = 0; i < project.GetObjectsCount(); ++i) {
-    const auto &object = project.GetObject(i);
+    const auto& object = project.GetObject(i);
     if (object.HasBehaviorNamed(name)) {
       return object.GetBehavior(name).GetTypeName();
     }
@@ -726,8 +774,9 @@ GetBehaviorsOfObject(const gd::ObjectsContainer& project,
   }
 
   // Search in groups
-  // Currently, a group is considered as the "intersection" of all of its objects.
-  // Search "groups is the intersection of its objects" in the codebase.
+  // Currently, a group is considered as the "intersection" of all of its
+  // objects. Search "groups is the intersection of its objects" in the
+  // codebase.
   if (searchInGroups) {
     for (std::size_t i = 0; i < layout.GetObjectGroups().size(); ++i) {
       if (layout.GetObjectGroups()[i].GetName() == name) {
diff --git a/Core/GDCore/Project/Object.cpp b/Core/GDCore/Project/Object.cpp
index 0b11d52d71ce..02ac3bbeb489 100644
--- a/Core/GDCore/Project/Object.cpp
+++ b/Core/GDCore/Project/Object.cpp
@@ -12,8 +12,9 @@
 #include "GDCore/Project/CustomBehavior.h"
 #include "GDCore/Project/Layout.h"
 #include "GDCore/Project/Project.h"
-#include "GDCore/Serialization/SerializerElement.h"
 #include "GDCore/Project/PropertyDescriptor.h"
+#include "GDCore/Project/QuickCustomization.h"
+#include "GDCore/Serialization/SerializerElement.h"
 #include "GDCore/Tools/Log.h"
 #include "GDCore/Tools/UUID/UUID.h"
 
@@ -27,8 +28,8 @@ Object::Object(const gd::String& name_,
     : name(name_),
       configuration(std::move(configuration_)),
       objectVariables(gd::VariablesContainer::SourceType::Object) {
-      SetType(type_);
-    }
+  SetType(type_);
+}
 
 Object::Object(const gd::String& name_,
                const gd::String& type_,
@@ -36,8 +37,8 @@ Object::Object(const gd::String& name_,
     : name(name_),
       configuration(configuration_),
       objectVariables(gd::VariablesContainer::SourceType::Object) {
-      SetType(type_);
-    }
+  SetType(type_);
+}
 
 void Object::Init(const gd::Object& object) {
   persistentUuid = object.persistentUuid;
@@ -54,9 +55,7 @@ void Object::Init(const gd::Object& object) {
   configuration = object.configuration->Clone();
 }
 
-gd::ObjectConfiguration& Object::GetConfiguration() {
-  return *configuration;
-}
+gd::ObjectConfiguration& Object::GetConfiguration() { return *configuration; }
 
 const gd::ObjectConfiguration& Object::GetConfiguration() const {
   return *configuration;
@@ -77,8 +76,7 @@ bool Object::RenameBehavior(const gd::String& name, const gd::String& newName) {
       behaviors.find(newName) != behaviors.end())
     return false;
 
-  std::unique_ptr<Behavior> aut =
-      std::move(behaviors.find(name)->second);
+  std::unique_ptr<Behavior> aut = std::move(behaviors.find(name)->second);
   behaviors.erase(name);
   behaviors[newName] = std::move(aut);
   behaviors[newName]->SetName(newName);
@@ -99,10 +97,10 @@ bool Object::HasBehaviorNamed(const gd::String& name) const {
 }
 
 gd::Behavior* Object::AddNewBehavior(const gd::Project& project,
-                                            const gd::String& type,
-                                            const gd::String& name) {
-  auto initializeAndAdd =
-      [this, &name](std::unique_ptr<gd::Behavior> behavior) {
+                                     const gd::String& type,
+                                     const gd::String& name) {
+  auto initializeAndAdd = [this,
+                           &name](std::unique_ptr<gd::Behavior> behavior) {
     behavior->InitializeContent();
     this->behaviors[name] = std::move(behavior);
     return this->behaviors[name].get();
@@ -111,18 +109,17 @@ gd::Behavior* Object::AddNewBehavior(const gd::Project& project,
   if (project.HasEventsBasedBehavior(type)) {
     return initializeAndAdd(
         gd::make_unique<CustomBehavior>(name, project, type));
-  }
-  else {
+  } else {
     const gd::BehaviorMetadata& behaviorMetadata =
         gd::MetadataProvider::GetBehaviorMetadata(project.GetCurrentPlatform(),
                                                   type);
     if (gd::MetadataProvider::IsBadBehaviorMetadata(behaviorMetadata)) {
-      gd::LogWarning("Tried to create a behavior with an unknown type: " + type
-                     + " on object " + GetName() + "!");
-    // It's probably an events-based behavior that was removed.
-    // Create a custom behavior to preserve the properties values.
-    return initializeAndAdd(
-        gd::make_unique<CustomBehavior>(name, project, type));
+      gd::LogWarning("Tried to create a behavior with an unknown type: " +
+                     type + " on object " + GetName() + "!");
+      // It's probably an events-based behavior that was removed.
+      // Create a custom behavior to preserve the properties values.
+      return initializeAndAdd(
+          gd::make_unique<CustomBehavior>(name, project, type));
     }
     std::unique_ptr<gd::Behavior> behavior(behaviorMetadata.Get().Clone());
     behavior->SetName(name);
@@ -196,6 +193,20 @@ void Object::UnserializeFrom(gd::Project& project,
       else {
         behavior->UnserializeFrom(behaviorElement);
       }
+
+      // Handle Quick Customization info.
+      if (behaviorElement.HasChild(
+              "propertiesQuickCustomizationVisibilities")) {
+        behavior->GetPropertiesQuickCustomizationVisibilities().UnserializeFrom(
+            behaviorElement.GetChild(
+                "propertiesQuickCustomizationVisibilities"));
+      }
+      if (behaviorElement.HasChild("quickCustomizationVisibility")) {
+        behavior->SetQuickCustomizationVisibility(
+            QuickCustomization::StringAsVisibility(
+                behaviorElement.GetStringAttribute(
+                    "quickCustomizationVisibility")));
+      }
     }
   }
 
@@ -217,8 +228,8 @@ void Object::SerializeTo(SerializerElement& element) const {
   std::vector<gd::String> allBehaviors = GetAllBehaviorNames();
   for (std::size_t i = 0; i < allBehaviors.size(); ++i) {
     const gd::Behavior& behavior = GetBehavior(allBehaviors[i]);
-    // Default behaviors are added at the object creation according to metadata.
-    // They don't need to be serialized.
+    // Default behaviors are added at the object creation according to
+    // metadata. They don't need to be serialized.
     if (behavior.IsDefaultBehavior()) {
       continue;
     }
@@ -230,6 +241,23 @@ void Object::SerializeTo(SerializerElement& element) const {
     behaviorElement.RemoveChild("name");
     behaviorElement.SetAttribute("type", behavior.GetTypeName());
     behaviorElement.SetAttribute("name", behavior.GetName());
+
+    // Handle Quick Customization info.
+    behaviorElement.RemoveChild("propertiesQuickCustomizationVisibilities");
+    const QuickCustomizationVisibilitiesContainer&
+        propertiesQuickCustomizationVisibilities =
+            behavior.GetPropertiesQuickCustomizationVisibilities();
+    if (!propertiesQuickCustomizationVisibilities.IsEmpty()) {
+      propertiesQuickCustomizationVisibilities.SerializeTo(
+          behaviorElement.AddChild("propertiesQuickCustomizationVisibilities"));
+    }
+    const QuickCustomization::Visibility visibility =
+        behavior.GetQuickCustomizationVisibility();
+    if (visibility != QuickCustomization::Visibility::Default) {
+      behaviorElement.SetAttribute(
+          "quickCustomizationVisibility",
+          QuickCustomization::VisibilityAsString(visibility));
+    }
   }
 
   configuration->SerializeTo(element);
diff --git a/Core/GDCore/Project/QuickCustomization.h b/Core/GDCore/Project/QuickCustomization.h
index c09c102d6d30..4b162fb3d144 100644
--- a/Core/GDCore/Project/QuickCustomization.h
+++ b/Core/GDCore/Project/QuickCustomization.h
@@ -1,16 +1,37 @@
 #pragma once
 
+#include "GDCore/String.h"
+
 namespace gd {
 class QuickCustomization {
  public:
   enum Visibility {
-    /** Visibility based on the parent or editor heuristics (probably visible). */
+    /** Visibility based on the parent or editor heuristics (probably visible).
+     */
     Default,
     /** Visible in the quick customization editor. */
     Visible,
     /** Not visible in the quick customization editor. */
     Hidden
   };
+
+  static Visibility StringAsVisibility(const gd::String& str) {
+    if (str == "visible")
+      return Visibility::Visible;
+    else if (str == "hidden")
+      return Visibility::Hidden;
+
+    return Visibility::Default;
+  }
+
+  static gd::String VisibilityAsString(Visibility visibility) {
+    if (visibility == Visibility::Visible)
+      return "visible";
+    else if (visibility == Visibility::Hidden)
+      return "hidden";
+
+    return "default";
+  }
 };
 
 }  // namespace gd
\ No newline at end of file
diff --git a/Core/GDCore/Project/QuickCustomizationVisibilitiesContainer.cpp b/Core/GDCore/Project/QuickCustomizationVisibilitiesContainer.cpp
new file mode 100644
index 000000000000..aa6d702fbc09
--- /dev/null
+++ b/Core/GDCore/Project/QuickCustomizationVisibilitiesContainer.cpp
@@ -0,0 +1,58 @@
+/*
+ * GDevelop Core
+ * Copyright 2008-2016 Florian Rival (Florian.Rival@gmail.com). All rights
+ * reserved. This project is released under the MIT License.
+ */
+#include "GDCore/Project/QuickCustomizationVisibilitiesContainer.h"
+
+#include <algorithm>
+#include <iostream>
+
+#include "GDCore/Project/QuickCustomization.h"
+#include "GDCore/Serialization/SerializerElement.h"
+#include "GDCore/String.h"
+#include "GDCore/Tools/UUID/UUID.h"
+
+using namespace std;
+
+namespace gd {
+
+QuickCustomizationVisibilitiesContainer::
+    QuickCustomizationVisibilitiesContainer() {}
+
+bool QuickCustomizationVisibilitiesContainer::IsEmpty() const {
+  return visibilities.empty();
+}
+
+void QuickCustomizationVisibilitiesContainer::Set(
+    const gd::String& name, QuickCustomization::Visibility visibility) {
+  visibilities[name] = visibility;
+}
+
+QuickCustomization::Visibility QuickCustomizationVisibilitiesContainer::Get(
+    const gd::String& name) const {
+  auto it = visibilities.find(name);
+  if (it != visibilities.end()) return it->second;
+
+  return QuickCustomization::Visibility::Default;
+}
+
+void QuickCustomizationVisibilitiesContainer::SerializeTo(
+    SerializerElement& element) const {
+  for (auto& visibility : visibilities) {
+    element.SetStringAttribute(
+        visibility.first,
+        QuickCustomization::VisibilityAsString(visibility.second));
+  }
+}
+
+void QuickCustomizationVisibilitiesContainer::UnserializeFrom(
+    const SerializerElement& element) {
+  visibilities.clear();
+  for (auto& child : element.GetAllChildren()) {
+    visibilities[child.first] =
+        QuickCustomization::StringAsVisibility(child.second->GetStringValue());
+  }
+}
+
+}  // namespace gd
diff --git a/Core/GDCore/Project/QuickCustomizationVisibilitiesContainer.h b/Core/GDCore/Project/QuickCustomizationVisibilitiesContainer.h
new file mode 100644
index 000000000000..56794d5ef224
--- /dev/null
+++ b/Core/GDCore/Project/QuickCustomizationVisibilitiesContainer.h
@@ -0,0 +1,29 @@
+#pragma once
+#include <memory>
+#include <vector>
+
+#include "GDCore/Project/QuickCustomization.h"
+#include "GDCore/Serialization/SerializerElement.h"
+#include "GDCore/String.h"
+
+namespace gd {
+
+class QuickCustomizationVisibilitiesContainer {
+ public:
+  QuickCustomizationVisibilitiesContainer();
+
+  void Set(const gd::String& name, QuickCustomization::Visibility visibility);
+
+  QuickCustomization::Visibility Get(const gd::String& name) const;
+
+  bool IsEmpty() const;
+
+  void SerializeTo(SerializerElement& element) const;
+
+  void UnserializeFrom(const SerializerElement& element);
+
+ private:
+  std::map<gd::String, QuickCustomization::Visibility> visibilities;
+};
+
+}  // namespace gd
\ No newline at end of file
diff --git a/Extensions/3D/AmbientLight.ts b/Extensions/3D/AmbientLight.ts
index 3efbb8621d50..438ff6761641 100644
--- a/Extensions/3D/AmbientLight.ts
+++ b/Extensions/3D/AmbientLight.ts
@@ -73,9 +73,7 @@ namespace gdjs {
           }
           updateStringParameter(parameterName: string, value: string): void {
             if (parameterName === 'color') {
-              this.light.color.setHex(
-                gdjs.PixiFiltersTools.rgbOrHexToHexNumber(value)
-              );
+              this.light.color.setHex(gdjs.rgbOrHexStringToNumber(value));
             }
           }
           updateColorParameter(parameterName: string, value: number): void {
diff --git a/Extensions/3D/DirectionalLight.ts b/Extensions/3D/DirectionalLight.ts
index 8b8d60599b8e..e481412120dd 100644
--- a/Extensions/3D/DirectionalLight.ts
+++ b/Extensions/3D/DirectionalLight.ts
@@ -94,7 +94,7 @@ namespace gdjs {
           updateStringParameter(parameterName: string, value: string): void {
             if (parameterName === 'color') {
               this.light.color = new THREE.Color(
-                gdjs.PixiFiltersTools.rgbOrHexToHexNumber(value)
+                gdjs.rgbOrHexStringToNumber(value)
               );
             }
             if (parameterName === 'top') {
diff --git a/Extensions/3D/ExponentialFog.ts b/Extensions/3D/ExponentialFog.ts
index 976cd9a70a45..dc39b12e0f19 100644
--- a/Extensions/3D/ExponentialFog.ts
+++ b/Extensions/3D/ExponentialFog.ts
@@ -71,7 +71,7 @@ namespace gdjs {
           updateStringParameter(parameterName: string, value: string): void {
             if (parameterName === 'color') {
               this.fog.color = new THREE.Color(
-                gdjs.PixiFiltersTools.rgbOrHexToHexNumber(value)
+                gdjs.rgbOrHexStringToNumber(value)
               );
             }
           }
diff --git a/Extensions/3D/HemisphereLight.ts b/Extensions/3D/HemisphereLight.ts
index 288042205ba8..ed803501d4c8 100644
--- a/Extensions/3D/HemisphereLight.ts
+++ b/Extensions/3D/HemisphereLight.ts
@@ -95,12 +95,12 @@ namespace gdjs {
           updateStringParameter(parameterName: string, value: string): void {
             if (parameterName === 'skyColor') {
               this.light.color = new THREE.Color(
-                gdjs.PixiFiltersTools.rgbOrHexToHexNumber(value)
+                gdjs.rgbOrHexStringToNumber(value)
               );
             }
             if (parameterName === 'groundColor') {
               this.light.groundColor = new THREE.Color(
-                gdjs.PixiFiltersTools.rgbOrHexToHexNumber(value)
+                gdjs.rgbOrHexStringToNumber(value)
               );
             }
             if (parameterName === 'top') {
diff --git a/Extensions/3D/LinearFog.ts b/Extensions/3D/LinearFog.ts
index b2381a76b95f..bf821fe05e31 100644
--- a/Extensions/3D/LinearFog.ts
+++ b/Extensions/3D/LinearFog.ts
@@ -76,7 +76,7 @@ namespace gdjs {
           updateStringParameter(parameterName: string, value: string): void {
             if (parameterName === 'color') {
               this.fog.color = new THREE.Color(
-                gdjs.PixiFiltersTools.rgbOrHexToHexNumber(value)
+                gdjs.rgbOrHexStringToNumber(value)
               );
             }
           }
diff --git a/Extensions/Effects/bevel-pixi-filter.ts b/Extensions/Effects/bevel-pixi-filter.ts
index 8148082fad6b..f9df16eba7c9 100644
--- a/Extensions/Effects/bevel-pixi-filter.ts
+++ b/Extensions/Effects/bevel-pixi-filter.ts
@@ -67,14 +67,10 @@ namespace gdjs {
         const bevelFilter = (filter as unknown) as PIXI.filters.BevelFilter &
           BevelFilterExtra;
         if (parameterName === 'lightColor') {
-          bevelFilter.lightColor = gdjs.PixiFiltersTools.rgbOrHexToHexNumber(
-            value
-          );
+          bevelFilter.lightColor = gdjs.rgbOrHexStringToNumber(value);
         }
         if (parameterName === 'shadowColor') {
-          bevelFilter.shadowColor = gdjs.PixiFiltersTools.rgbOrHexToHexNumber(
-            value
-          );
+          bevelFilter.shadowColor = gdjs.rgbOrHexStringToNumber(value);
         }
       }
       updateColorParameter(
diff --git a/Extensions/Effects/color-replace-pixi-filter.ts b/Extensions/Effects/color-replace-pixi-filter.ts
index 0d004f467cc8..eb75a8e5e568 100644
--- a/Extensions/Effects/color-replace-pixi-filter.ts
+++ b/Extensions/Effects/color-replace-pixi-filter.ts
@@ -45,13 +45,9 @@ namespace gdjs {
         const colorReplaceFilter = (filter as unknown) as PIXI.filters.ColorReplaceFilter &
           ColorReplaceFilterExtra;
         if (parameterName === 'originalColor') {
-          colorReplaceFilter.originalColor = gdjs.PixiFiltersTools.rgbOrHexToHexNumber(
-            value
-          );
+          colorReplaceFilter.originalColor = gdjs.rgbOrHexStringToNumber(value);
         } else if (parameterName === 'newColor') {
-          colorReplaceFilter.newColor = gdjs.PixiFiltersTools.rgbOrHexToHexNumber(
-            value
-          );
+          colorReplaceFilter.newColor = gdjs.rgbOrHexStringToNumber(value);
         }
       }
       updateColorParameter(
diff --git a/Extensions/Effects/drop-shadow-pixi-filter.ts b/Extensions/Effects/drop-shadow-pixi-filter.ts
index c9c163fe3d73..46c878e976c9 100644
--- a/Extensions/Effects/drop-shadow-pixi-filter.ts
+++ b/Extensions/Effects/drop-shadow-pixi-filter.ts
@@ -66,9 +66,7 @@ namespace gdjs {
       ) {
         const dropShadowFilter = (filter as unknown) as PIXI.filters.DropShadowFilter;
         if (parameterName === 'color') {
-          dropShadowFilter.color = gdjs.PixiFiltersTools.rgbOrHexToHexNumber(
-            value
-          );
+          dropShadowFilter.color = gdjs.rgbOrHexStringToNumber(value);
         }
       }
       updateColorParameter(
diff --git a/Extensions/Effects/glow-pixi-filter.ts b/Extensions/Effects/glow-pixi-filter.ts
index 49c2419a0906..fbc16eea0ac5 100644
--- a/Extensions/Effects/glow-pixi-filter.ts
+++ b/Extensions/Effects/glow-pixi-filter.ts
@@ -53,7 +53,7 @@ namespace gdjs {
         const glowFilter = (filter as unknown) as PIXI.filters.GlowFilter &
           GlowFilterExtra;
         if (parameterName === 'color') {
-          glowFilter.color = gdjs.PixiFiltersTools.rgbOrHexToHexNumber(value);
+          glowFilter.color = gdjs.rgbOrHexStringToNumber(value);
         }
       }
       updateColorParameter(
diff --git a/Extensions/Effects/outline-pixi-filter.ts b/Extensions/Effects/outline-pixi-filter.ts
index e1c1a037aa2c..0dce37f67b9f 100644
--- a/Extensions/Effects/outline-pixi-filter.ts
+++ b/Extensions/Effects/outline-pixi-filter.ts
@@ -41,9 +41,7 @@ namespace gdjs {
       ) {
         const outlineFilter = (filter as unknown) as PIXI.filters.OutlineFilter;
         if (parameterName === 'color') {
-          outlineFilter.color = gdjs.PixiFiltersTools.rgbOrHexToHexNumber(
-            value
-          );
+          outlineFilter.color = gdjs.rgbOrHexStringToNumber(value);
         }
       }
       updateColorParameter(
diff --git a/Extensions/ParticleSystem/particleemitterobject.ts b/Extensions/ParticleSystem/particleemitterobject.ts
index 0f6c2f2fab32..44ece11796a6 100644
--- a/Extensions/ParticleSystem/particleemitterobject.ts
+++ b/Extensions/ParticleSystem/particleemitterobject.ts
@@ -877,7 +877,6 @@ namespace gdjs {
     setParticleColor1AsNumber(color: number): void {
       this.color1 = color;
       this._colorDirty = true;
-      debugger;
     }
 
     setParticleColor1(rgbOrHexColor: string): void {
@@ -889,7 +888,6 @@ namespace gdjs {
     setParticleColor2AsNumber(color: number): void {
       this.color2 = color;
       this._colorDirty = true;
-      debugger;
     }
 
     setParticleColor2(rgbOrHexColor: string): void {
diff --git a/Extensions/TextObject/TextObject.cpp b/Extensions/TextObject/TextObject.cpp
index 7b479739febe..f33901302124 100644
--- a/Extensions/TextObject/TextObject.cpp
+++ b/Extensions/TextObject/TextObject.cpp
@@ -129,19 +129,22 @@ std::map<gd::String, gd::PropertyDescriptor> TextObject::GetProperties() const {
       .SetType("resource")
       .AddExtraInfo("font")
       .SetLabel(_("Font"))
-      .SetGroup(_("Font"));
+      .SetGroup(_("Font"))
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
   objectProperties["bold"]
       .SetValue(bold ? "true" : "false")
       .SetType("boolean")
       .SetLabel(_("Bold"))
-      .SetGroup(_("Font"));
+      .SetGroup(_("Font"))
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
   objectProperties["italic"]
       .SetValue(italic ? "true" : "false")
       .SetType("boolean")
       .SetLabel(_("Italic"))
-      .SetGroup(_("Font"));
+      .SetGroup(_("Font"))
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
   objectProperties["color"]
       .SetValue(color)
@@ -157,21 +160,24 @@ std::map<gd::String, gd::PropertyDescriptor> TextObject::GetProperties() const {
       .AddExtraInfo("right")
       .SetLabel(_("Alignment"))
       .SetDescription(_("Alignment of the text when multiple lines are displayed"))
-      .SetGroup(_("Font"));
+      .SetGroup(_("Font"))
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
   objectProperties["isOutlineEnabled"]
       .SetValue(isOutlineEnabled ? "true" : "false")
       .SetType("boolean")
       .SetLabel(_("Show outline"))
       .SetGroup(_("Outline"))
-      .SetAdvanced();
+      .SetAdvanced()
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
   objectProperties["outlineColor"]
       .SetValue(outlineColor)
       .SetType("color")
       .SetLabel(_("Color"))
       .SetGroup(_("Outline"))
-      .SetAdvanced();
+      .SetAdvanced()
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
   objectProperties["outlineThickness"]
       .SetValue(gd::String::From(outlineThickness))
@@ -179,21 +185,24 @@ std::map<gd::String, gd::PropertyDescriptor> TextObject::GetProperties() const {
       .SetLabel(_("Thickness"))
       .SetMeasurementUnit(gd::MeasurementUnit::GetPixel())
       .SetGroup(_("Outline"))
-      .SetAdvanced();
+      .SetAdvanced()
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
   objectProperties["isShadowEnabled"]
       .SetValue(isShadowEnabled ? "true" : "false")
       .SetType("boolean")
       .SetLabel(_("Show shadow"))
       .SetGroup(_("Shadow"))
-      .SetAdvanced();
+      .SetAdvanced()
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
   objectProperties["shadowColor"]
       .SetValue(shadowColor)
       .SetType("color")
       .SetLabel(_("Color"))
       .SetGroup(_("Shadow"))
-      .SetAdvanced();
+      .SetAdvanced()
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
   objectProperties["shadowOpacity"]
       .SetValue(gd::String::From(shadowOpacity))
@@ -201,7 +210,8 @@ std::map<gd::String, gd::PropertyDescriptor> TextObject::GetProperties() const {
       .SetLabel(_("Opacity"))
       .SetMeasurementUnit(gd::MeasurementUnit::GetPixel())
       .SetGroup(_("Shadow"))
-      .SetAdvanced();
+      .SetAdvanced()
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
   objectProperties["shadowAngle"]
       .SetValue(gd::String::From(shadowAngle))
@@ -209,7 +219,8 @@ std::map<gd::String, gd::PropertyDescriptor> TextObject::GetProperties() const {
       .SetLabel(_("Angle"))
       .SetMeasurementUnit(gd::MeasurementUnit::GetDegreeAngle())
       .SetGroup(_("Shadow"))
-      .SetAdvanced();
+      .SetAdvanced()
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
   objectProperties["shadowDistance"]
       .SetValue(gd::String::From(shadowDistance))
@@ -217,7 +228,8 @@ std::map<gd::String, gd::PropertyDescriptor> TextObject::GetProperties() const {
       .SetLabel(_("Distance"))
       .SetMeasurementUnit(gd::MeasurementUnit::GetPixel())
       .SetGroup(_("Shadow"))
-      .SetAdvanced();
+      .SetAdvanced()
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
   objectProperties["shadowBlurRadius"]
       .SetValue(gd::String::From(shadowBlurRadius))
@@ -225,7 +237,8 @@ std::map<gd::String, gd::PropertyDescriptor> TextObject::GetProperties() const {
       .SetLabel(_("Blur radius"))
       .SetMeasurementUnit(gd::MeasurementUnit::GetPixel())
       .SetGroup(_("Shadow"))
-      .SetAdvanced();
+      .SetAdvanced()
+      .SetQuickCustomizationVisibility(gd::QuickCustomization::Hidden);
 
   return objectProperties;
 }
diff --git a/GDJS/Runtime/gd.ts b/GDJS/Runtime/gd.ts
index fd2bd17905db..82e3ded9f09c 100644
--- a/GDJS/Runtime/gd.ts
+++ b/GDJS/Runtime/gd.ts
@@ -10,6 +10,9 @@
  */
 namespace gdjs {
   const logger = new gdjs.Logger('Engine runtime');
+  const hexStringRegex = /^(#{0,1}[A-Fa-f0-9]{6})$/;
+  const shorthandHexStringRegex = /^(#{0,1}[A-Fa-f0-9]{3})$/;
+  const rgbStringRegex = /^(\d{1,3};\d{1,3};\d{1,3})/;
 
   /**
    * Contains functions used by events (this is a convention only, functions can actually
@@ -61,7 +64,7 @@ namespace gdjs {
   };
 
   /**
-   * Convert a Hex string to an RGB color array [r, g, b], where each component is in the range [0, 255].
+   * Convert a Hex string (#124FE4) to an RGB color array [r, g, b], where each component is in the range [0, 255].
    *
    * @param {string} hex Color hexadecimal
    */
@@ -74,6 +77,24 @@ namespace gdjs {
       : [0, 0, 0];
   };
 
+  /**
+   * Convert a shorthand Hex string (#1F4) to an RGB color array [r, g, b], where each component is in the range [0, 255].
+   *
+   * @param {string} hex Color hexadecimal
+   */
+  export const shorthandHexToRGBColor = function (
+    hexString: string
+  ): [number, number, number] {
+    const hexNumber = parseInt(hexString.replace('#', ''), 16);
+    return Number.isFinite(hexNumber)
+      ? [
+          17 * ((hexNumber >> 8) & 0xf),
+          17 * ((hexNumber >> 4) & 0xf),
+          17 * (hexNumber & 0xf),
+        ]
+      : [0, 0, 0];
+  };
+
   /**
    * Convert a RGB string ("rrr;ggg;bbb") or a Hex string ("#rrggbb") to a RGB color array ([r,g,b] with each component going from 0 to 255).
    * @param value The color as a RGB string or Hex string
@@ -81,17 +102,28 @@ namespace gdjs {
   export const rgbOrHexToRGBColor = function (
     value: string
   ): [number, number, number] {
-    const splitValue = value.split(';');
-    // If a RGB string is provided, return the RGB object.
-    if (splitValue.length === 3) {
-      return [
-        parseInt(splitValue[0], 10),
-        parseInt(splitValue[1], 10),
-        parseInt(splitValue[2], 10),
-      ];
+    const rgbColor = extractRGBString(value);
+    if (rgbColor) {
+      const splitValue = rgbColor.split(';');
+      // If a RGB string is provided, return the RGB object.
+      if (splitValue.length === 3) {
+        return [
+          Math.min(255, parseInt(splitValue[0], 10)),
+          Math.min(255, parseInt(splitValue[1], 10)),
+          Math.min(255, parseInt(splitValue[2], 10)),
+        ];
+      }
+    }
+
+    const hexColor = extractHexString(value);
+    if (hexColor) {
+      return hexToRGBColor(hexColor);
+    }
+    const shorthandHexColor = extractShorthandHexString(value);
+    if (shorthandHexColor) {
+      return shorthandHexToRGBColor(shorthandHexColor);
     }
-    // Otherwise, convert the Hex to RGB.
-    return hexToRGBColor(value);
+    return [0, 0, 0];
   };
 
   /**
@@ -146,6 +178,23 @@ namespace gdjs {
     ];
   };
 
+  export const extractHexString = (str: string): string | null => {
+    const matches = str.match(hexStringRegex);
+    if (!matches) return null;
+    return matches[0];
+  };
+  export const extractShorthandHexString = (str: string): string | null => {
+    const matches = str.match(shorthandHexStringRegex);
+    if (!matches) return null;
+    return matches[0];
+  };
+
+  export const extractRGBString = (str: string): string | null => {
+    const matches = str.match(rgbStringRegex);
+    if (!matches) return null;
+    return matches[0];
+  };
+
   /**
    * Get a random integer between 0 and max.
    * @param max The maximum value (inclusive).
diff --git a/GDJS/Runtime/pixi-renderers/pixi-filters-tools.ts b/GDJS/Runtime/pixi-renderers/pixi-filters-tools.ts
index 0642b23c6c10..c4f12b12a18a 100644
--- a/GDJS/Runtime/pixi-renderers/pixi-filters-tools.ts
+++ b/GDJS/Runtime/pixi-renderers/pixi-filters-tools.ts
@@ -52,22 +52,6 @@ namespace gdjs {
       _filterCreators[filterName] = filterCreator;
     };
 
-    /**
-     * Convert a string RGB color ("rrr;ggg;bbb") or a hex string (#rrggbb) to a hex number.
-     * @param value The color as a RGB string or hex string
-     */
-    export const rgbOrHexToHexNumber = function (value: string): number {
-      const splitValue = value.split(';');
-      if (splitValue.length === 3) {
-        return gdjs.rgbToHexNumber(
-          parseInt(splitValue[0], 10),
-          parseInt(splitValue[1], 10),
-          parseInt(splitValue[2], 10)
-        );
-      }
-      return parseInt(value.replace('#', '0x'), 16);
-    };
-
     /** A wrapper allowing to create an effect. */
     export interface FilterCreator {
       /** Function to call to create the filter */
diff --git a/GDJS/Runtime/pixi-renderers/spriteruntimeobject-pixi-renderer.ts b/GDJS/Runtime/pixi-renderers/spriteruntimeobject-pixi-renderer.ts
index 030d3dba6882..d676323b9c6c 100644
--- a/GDJS/Runtime/pixi-renderers/spriteruntimeobject-pixi-renderer.ts
+++ b/GDJS/Runtime/pixi-renderers/spriteruntimeobject-pixi-renderer.ts
@@ -142,16 +142,8 @@ namespace gdjs {
       this._sprite.visible = !this._object.hidden;
     }
 
-    setColor(rgbColor): void {
-      const colors = rgbColor.split(';');
-      if (colors.length < 3) {
-        return;
-      }
-      this._sprite.tint = gdjs.rgbToHexNumber(
-        parseInt(colors[0], 10),
-        parseInt(colors[1], 10),
-        parseInt(colors[2], 10)
-      );
+    setColor(rgbOrHexColor): void {
+      this._sprite.tint = gdjs.rgbOrHexStringToNumber(rgbOrHexColor);
     }
 
     getColor() {
diff --git a/GDJS/Runtime/spriteruntimeobject.ts b/GDJS/Runtime/spriteruntimeobject.ts
index 7dd4b90e9e8e..4b9227fc35bb 100644
--- a/GDJS/Runtime/spriteruntimeobject.ts
+++ b/GDJS/Runtime/spriteruntimeobject.ts
@@ -759,10 +759,10 @@ namespace gdjs {
     /**
      * Change the tint of the sprite object.
      *
-     * @param rgbColor The color, in RGB format ("128;200;255").
+     * @param rgbOrHexColor The color as a string, in RGB format ("128;200;255") or Hex format.
      */
-    setColor(rgbColor: string): void {
-      this._renderer.setColor(rgbColor);
+    setColor(rgbOrHexColor: string): void {
+      this._renderer.setColor(rgbOrHexColor);
     }
 
     /**
diff --git a/GDJS/tests/tests/colors.js b/GDJS/tests/tests/colors.js
new file mode 100644
index 000000000000..01bcc50f2f65
--- /dev/null
+++ b/GDJS/tests/tests/colors.js
@@ -0,0 +1,55 @@
+describe('gdjs', function () {
+  it('should define gdjs', function () {
+    expect(gdjs).to.be.ok();
+  });
+
+  describe('Color conversion', function () {
+    describe('Hex strings to RGB components', () => {
+      it('should convert hex strings', function () {
+        expect(gdjs.hexToRGBColor('#FFFFfF')).to.eql([255, 255, 255]);
+        expect(gdjs.hexToRGBColor('#000000')).to.eql([0, 0, 0]);
+        expect(gdjs.hexToRGBColor('#1245F5')).to.eql([18, 69, 245]);
+      });
+      it('should convert hex strings without hashtag', function () {
+        expect(gdjs.hexToRGBColor('FFFFfF')).to.eql([255, 255, 255]);
+        expect(gdjs.hexToRGBColor('000000')).to.eql([0, 0, 0]);
+        expect(gdjs.hexToRGBColor('1245F5')).to.eql([18, 69, 245]);
+      });
+      it('should convert shorthand hex strings', function () {
+        expect(gdjs.shorthandHexToRGBColor('#FfF')).to.eql([255, 255, 255]);
+        expect(gdjs.shorthandHexToRGBColor('#000')).to.eql([0, 0, 0]);
+        expect(gdjs.shorthandHexToRGBColor('#F3a')).to.eql([255, 51, 170]);
+      });
+      it('should convert shorthand hex strings without hashtag', function () {
+        expect(gdjs.shorthandHexToRGBColor('FFF')).to.eql([255, 255, 255]);
+        expect(gdjs.shorthandHexToRGBColor('000')).to.eql([0, 0, 0]);
+        expect(gdjs.shorthandHexToRGBColor('F3a')).to.eql([255, 51, 170]);
+      });
+    });
+    describe.only('RGB strings to RGB components', () => {
+      it('should convert rgb strings', function () {
+        expect(gdjs.rgbOrHexToRGBColor('0;0;0')).to.eql([0, 0, 0]);
+        expect(gdjs.rgbOrHexToRGBColor('255;255;255')).to.eql([255, 255, 255]);
+        expect(gdjs.rgbOrHexToRGBColor('120;12;6')).to.eql([120, 12, 6]);
+      });
+      it('should max rgb values', function () {
+        expect(gdjs.rgbOrHexToRGBColor('255;255;300')).to.eql([255, 255, 255]);
+        expect(gdjs.rgbOrHexToRGBColor('999;12;6')).to.eql([255, 12, 6]);
+      });
+      it('should cut rgb values if string too long', function () {
+        expect(gdjs.rgbOrHexToRGBColor('255;255;200456')).to.eql([
+          255,
+          255,
+          200,
+        ]);
+      });
+      it('should return components for black if unrecognized input', function () {
+        expect(gdjs.rgbOrHexToRGBColor('NaN')).to.eql([0, 0, 0]);
+        expect(gdjs.rgbOrHexToRGBColor('19819830803')).to.eql([0, 0, 0]);
+        expect(gdjs.rgbOrHexToRGBColor('Infinity')).to.eql([0, 0, 0]);
+        expect(gdjs.rgbOrHexToRGBColor('-4564')).to.eql([0, 0, 0]);
+        expect(gdjs.rgbOrHexToRGBColor('9999;12;6')).to.eql([0, 0, 0]);
+      });
+    });
+  });
+});
diff --git a/GDevelop.js/Bindings/Bindings.idl b/GDevelop.js/Bindings/Bindings.idl
index 98560ab2594f..5cb5e6bf7369 100644
--- a/GDevelop.js/Bindings/Bindings.idl
+++ b/GDevelop.js/Bindings/Bindings.idl
@@ -750,6 +750,8 @@ interface Behavior {
     void SetFolded(boolean folded);
 
     boolean IsDefaultBehavior();
+
+    [Ref] QuickCustomizationVisibilitiesContainer GetPropertiesQuickCustomizationVisibilities();
 };
 
 [JSImplementation=Behavior]
@@ -771,6 +773,8 @@ interface BehaviorsSharedData {
     [Value] MapStringPropertyDescriptor GetProperties();
     boolean UpdateProperty([Const] DOMString name, [Const] DOMString value);
     void InitializeContent();
+
+    [Ref] QuickCustomizationVisibilitiesContainer GetPropertiesQuickCustomizationVisibilities();
 };
 
 [JSImplementation=BehaviorsSharedData]
@@ -1918,6 +1922,11 @@ interface QuickCustomization {
     // Nothing, it's just a container for the visibility enum.
 };
 
+interface QuickCustomizationVisibilitiesContainer {
+    void Set([Const] DOMString name, QuickCustomization_Visibility visibility);
+    QuickCustomization_Visibility Get([Const] DOMString name);
+};
+
 interface BehaviorMetadata {
     [Const, Ref] DOMString GetName();
     [Const, Ref] DOMString GetFullName();
diff --git a/GDevelop.js/types.d.ts b/GDevelop.js/types.d.ts
index 41a38995eb50..c8c294d356ff 100644
--- a/GDevelop.js/types.d.ts
+++ b/GDevelop.js/types.d.ts
@@ -649,6 +649,7 @@ export class Behavior extends EmscriptenObject {
   isFolded(): boolean;
   setFolded(folded: boolean): void;
   isDefaultBehavior(): boolean;
+  getPropertiesQuickCustomizationVisibilities(): QuickCustomizationVisibilitiesContainer;
 }
 
 export class BehaviorJsImplementation extends Behavior {
@@ -666,6 +667,7 @@ export class BehaviorsSharedData extends EmscriptenObject {
   getProperties(): MapStringPropertyDescriptor;
   updateProperty(name: string, value: string): boolean;
   initializeContent(): void;
+  getPropertiesQuickCustomizationVisibilities(): QuickCustomizationVisibilitiesContainer;
 }
 
 export class BehaviorSharedDataJsImplementation extends BehaviorsSharedData {
@@ -1534,6 +1536,11 @@ export class QuickCustomization extends EmscriptenObject {
   static Hidden = 2;
 }
 
+export class QuickCustomizationVisibilitiesContainer extends EmscriptenObject {
+  set(name: string, visibility: QuickCustomization_Visibility): void;
+  get(name: string): QuickCustomization_Visibility;
+}
+
 export class BehaviorMetadata extends EmscriptenObject {
   getName(): string;
   getFullName(): string;
diff --git a/GDevelop.js/types/gdbehavior.js b/GDevelop.js/types/gdbehavior.js
index 6392464c7f71..6be63e427cc4 100644
--- a/GDevelop.js/types/gdbehavior.js
+++ b/GDevelop.js/types/gdbehavior.js
@@ -13,6 +13,7 @@ declare class gdBehavior {
   isFolded(): boolean;
   setFolded(folded: boolean): void;
   isDefaultBehavior(): boolean;
+  getPropertiesQuickCustomizationVisibilities(): gdQuickCustomizationVisibilitiesContainer;
   delete(): void;
   ptr: number;
 };
\ No newline at end of file
diff --git a/GDevelop.js/types/gdbehaviorsshareddata.js b/GDevelop.js/types/gdbehaviorsshareddata.js
index 28311eb336b2..1cdf78cfb382 100644
--- a/GDevelop.js/types/gdbehaviorsshareddata.js
+++ b/GDevelop.js/types/gdbehaviorsshareddata.js
@@ -7,6 +7,7 @@ declare class gdBehaviorsSharedData {
   getProperties(): gdMapStringPropertyDescriptor;
   updateProperty(name: string, value: string): boolean;
   initializeContent(): void;
+  getPropertiesQuickCustomizationVisibilities(): gdQuickCustomizationVisibilitiesContainer;
   delete(): void;
   ptr: number;
 };
\ No newline at end of file
diff --git a/GDevelop.js/types/gdquickcustomizationvisibilitiescontainer.js b/GDevelop.js/types/gdquickcustomizationvisibilitiescontainer.js
new file mode 100644
index 000000000000..26aa5580709d
--- /dev/null
+++ b/GDevelop.js/types/gdquickcustomizationvisibilitiescontainer.js
@@ -0,0 +1,7 @@
+// Automatically generated by GDevelop.js/scripts/generate-types.js
+declare class gdQuickCustomizationVisibilitiesContainer {
+  set(name: string, visibility: QuickCustomization_Visibility): void;
+  get(name: string): QuickCustomization_Visibility;
+  delete(): void;
+  ptr: number;
+};
\ No newline at end of file
diff --git a/GDevelop.js/types/libgdevelop.js b/GDevelop.js/types/libgdevelop.js
index ae7f433578a0..a707d41a7e7a 100644
--- a/GDevelop.js/types/libgdevelop.js
+++ b/GDevelop.js/types/libgdevelop.js
@@ -151,6 +151,7 @@ declare class libGDevelop {
   ObjectMetadata: Class<gdObjectMetadata>;
   QuickCustomization_Visibility: Class<QuickCustomization_Visibility>;
   QuickCustomization: Class<gdQuickCustomization>;
+  QuickCustomizationVisibilitiesContainer: Class<gdQuickCustomizationVisibilitiesContainer>;
   BehaviorMetadata: Class<gdBehaviorMetadata>;
   EffectMetadata: Class<gdEffectMetadata>;
   EventMetadata: Class<gdEventMetadata>;
diff --git a/newIDE/app/public/res/quick_customization/replace_objects.svg b/newIDE/app/public/res/quick_customization/replace_objects.svg
deleted file mode 100644
index 5f68c8b21057..000000000000
--- a/newIDE/app/public/res/quick_customization/replace_objects.svg
+++ /dev/null
@@ -1,148 +0,0 @@
-<svg width="207" height="158" viewBox="0 0 207 158" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.65">
-<path d="M78.0688 74.6908C78.2894 74.6908 78.4682 74.4219 78.4682 74.0903C78.4682 73.7586 78.2894 73.4898 78.0688 73.4898C77.8483 73.4898 77.6694 73.7586 77.6694 74.0903C77.6694 74.4219 77.8483 74.6908 78.0688 74.6908Z" fill="#D1FEF9"/>
-<path d="M77.7182 61.9879C78.1324 61.9879 78.4682 61.483 78.4682 60.8602C78.4682 60.2374 78.1324 59.7325 77.7182 59.7325C77.3039 59.7325 76.9681 60.2374 76.9681 60.8602C76.9681 61.483 77.3039 61.9879 77.7182 61.9879Z" fill="#D1FEF9"/>
-<path d="M79.3058 66.6089C79.6124 66.6089 79.861 66.2352 79.861 65.7741C79.861 65.3131 79.6124 64.9393 79.3058 64.9393C78.9992 64.9393 78.7506 65.3131 78.7506 65.7741C78.7506 66.2352 78.9992 66.6089 79.3058 66.6089Z" fill="#D1FEF9"/>
-<path d="M73.4192 60.0424C73.5779 60.0424 73.7065 59.8489 73.7065 59.6103C73.7065 59.3717 73.5779 59.1783 73.4192 59.1783C73.2605 59.1783 73.1318 59.3717 73.1318 59.6103C73.1318 59.8489 73.2605 60.0424 73.4192 60.0424Z" fill="#D1FEF9"/>
-<path d="M74.3802 51.3279C74.512 51.3279 74.6188 51.1673 74.6188 50.9691C74.6188 50.7709 74.512 50.6103 74.3802 50.6103C74.2484 50.6103 74.1416 50.7709 74.1416 50.9691C74.1416 51.1673 74.2484 51.3279 74.3802 51.3279Z" fill="#D1FEF9"/>
-<path d="M88.3693 54.9485C88.8221 54.9485 89.1891 54.3966 89.1891 53.7158C89.1891 53.035 88.8221 52.4831 88.3693 52.4831C87.9165 52.4831 87.5494 53.035 87.5494 53.7158C87.5494 54.3966 87.9165 54.9485 88.3693 54.9485Z" fill="#D1FEF9"/>
-<path d="M86.6044 58.8177C86.8232 58.8177 87.0005 58.5511 87.0005 58.2221C87.0005 57.8932 86.8232 57.6265 86.6044 57.6265C86.3856 57.6265 86.2083 57.8932 86.2083 58.2221C86.2083 58.5511 86.3856 58.8177 86.6044 58.8177Z" fill="#D1FEF9"/>
-<path d="M89.4622 51.428C89.6128 51.428 89.7349 51.2444 89.7349 51.0179C89.7349 50.7914 89.6128 50.6078 89.4622 50.6078C89.3116 50.6078 89.1895 50.7914 89.1895 51.0179C89.1895 51.2444 89.3116 51.428 89.4622 51.428Z" fill="#D1FEF9"/>
-<path d="M86.6763 73.8778C87.2788 73.8778 87.7673 73.1434 87.7673 72.2375C87.7673 71.3316 87.2788 70.5972 86.6763 70.5972C86.0738 70.5972 85.5853 71.3316 85.5853 72.2375C85.5853 73.1434 86.0738 73.8778 86.6763 73.8778Z" fill="#D1FEF9"/>
-<path d="M115.108 115.533C115.352 115.533 115.551 115.235 115.551 114.867C115.551 114.499 115.352 114.2 115.108 114.2C114.863 114.2 114.664 114.499 114.664 114.867C114.664 115.235 114.863 115.533 115.108 115.533Z" fill="#D1FEF9"/>
-<path d="M120.02 95.8006C120.289 95.8006 120.506 95.4738 120.506 95.0707C120.506 94.6676 120.289 94.3409 120.02 94.3409C119.752 94.3409 119.535 94.6676 119.535 95.0707C119.535 95.4738 119.752 95.8006 120.02 95.8006Z" fill="#D1FEF9"/>
-<path d="M118.641 91.212C119.002 91.212 119.295 90.7716 119.295 90.2283C119.295 89.685 119.002 89.2446 118.641 89.2446C118.28 89.2446 117.987 89.685 117.987 90.2283C117.987 90.7716 118.28 91.212 118.641 91.212Z" fill="#D1FEF9"/>
-<path d="M122.056 80.6494C122.219 80.6494 122.352 80.4505 122.352 80.2051C122.352 79.9598 122.219 79.7609 122.056 79.7609C121.893 79.7609 121.761 79.9598 121.761 80.2051C121.761 80.4505 121.893 80.6494 122.056 80.6494Z" fill="#D1FEF9"/>
-<path d="M127.386 70.2851C127.908 70.2851 128.331 69.649 128.331 68.8644C128.331 68.0798 127.908 67.4438 127.386 67.4438C126.865 67.4438 126.442 68.0798 126.442 68.8644C126.442 69.649 126.865 70.2851 127.386 70.2851Z" fill="#D1FEF9"/>
-<path d="M126.09 65.9574C126.265 65.9574 126.407 65.7443 126.407 65.4814C126.407 65.2186 126.265 65.0055 126.09 65.0055C125.915 65.0055 125.774 65.2186 125.774 65.4814C125.774 65.7443 125.915 65.9574 126.09 65.9574Z" fill="#D1FEF9"/>
-<path d="M115.16 81.1667C115.433 81.1667 115.655 80.8334 115.655 80.4222C115.655 80.0111 115.433 79.6777 115.16 79.6777C114.886 79.6777 114.664 80.0111 114.664 80.4222C114.664 80.8334 114.886 81.1667 115.16 81.1667Z" fill="#D1FEF9"/>
-<path d="M112.696 106.609C112.768 106.609 112.826 106.521 112.826 106.412C112.826 106.304 112.768 106.216 112.696 106.216C112.624 106.216 112.565 106.304 112.565 106.412C112.565 106.521 112.624 106.609 112.696 106.609Z" fill="#D1FEF9"/>
-<path d="M112.166 116.458C112.458 116.458 112.695 116.102 112.695 115.662C112.695 115.223 112.458 114.866 112.166 114.866C111.874 114.866 111.637 115.223 111.637 115.662C111.637 116.102 111.874 116.458 112.166 116.458Z" fill="#D1FEF9"/>
-<path d="M116.285 106.219C116.69 106.219 117.019 105.725 117.019 105.115C117.019 104.506 116.69 104.012 116.285 104.012C115.88 104.012 115.551 104.506 115.551 105.115C115.551 105.725 115.88 106.219 116.285 106.219Z" fill="#D1FEF9"/>
-<path d="M115.331 98.5198C115.453 98.5198 115.551 98.3711 115.551 98.1878C115.551 98.0044 115.453 97.8558 115.331 97.8558C115.209 97.8558 115.11 98.0044 115.11 98.1878C115.11 98.3711 115.209 98.5198 115.331 98.5198Z" fill="#D1FEF9"/>
-<path d="M89.67 108.252C90.0439 108.252 90.347 107.796 90.347 107.234C90.347 106.672 90.0439 106.216 89.67 106.216C89.2961 106.216 88.993 106.672 88.993 107.234C88.993 107.796 89.2961 108.252 89.67 108.252Z" fill="#D1FEF9"/>
-<path d="M91.9348 99.0838C92.0988 99.0838 92.2319 98.8838 92.2319 98.6371C92.2319 98.3904 92.0988 98.1904 91.9348 98.1904C91.7707 98.1904 91.6377 98.3904 91.6377 98.6371C91.6377 98.8838 91.7707 99.0838 91.9348 99.0838Z" fill="#D1FEF9"/>
-<path d="M82.4307 98.0704C82.8476 98.0704 83.1856 97.5622 83.1856 96.9354C83.1856 96.3085 82.8476 95.8003 82.4307 95.8003C82.0138 95.8003 81.6758 96.3085 81.6758 96.9354C81.6758 97.5622 82.0138 98.0704 82.4307 98.0704Z" fill="#D1FEF9"/>
-<path d="M86.926 116.202C87.3905 116.202 87.767 115.635 87.767 114.937C87.767 114.239 87.3905 113.673 86.926 113.673C86.4616 113.673 86.0851 114.239 86.0851 114.937C86.0851 115.635 86.4616 116.202 86.926 116.202Z" fill="#D1FEF9"/>
-<path d="M80.5412 93.7402C80.7071 93.7402 80.8415 93.538 80.8415 93.2886C80.8415 93.0393 80.7071 92.8371 80.5412 92.8371C80.3753 92.8371 80.2408 93.0393 80.2408 93.2886C80.2408 93.538 80.3753 93.7402 80.5412 93.7402Z" fill="#D1FEF9"/>
-<path d="M128.873 99.2302C129.295 99.2302 129.637 98.7165 129.637 98.0829C129.637 97.4493 129.295 96.9357 128.873 96.9357C128.452 96.9357 128.11 97.4493 128.11 98.0829C128.11 98.7165 128.452 99.2302 128.873 99.2302Z" fill="#D1FEF9"/>
-<path d="M111.636 11.2551C112.23 11.2551 112.712 10.5305 112.712 9.6367C112.712 8.7429 112.23 8.01834 111.636 8.01834C111.041 8.01834 110.559 8.7429 110.559 9.6367C110.559 10.5305 111.041 11.2551 111.636 11.2551Z" fill="#D1FEF9"/>
-<path d="M128.516 85.6435C128.713 85.6435 128.873 85.4031 128.873 85.1065C128.873 84.8099 128.713 84.5695 128.516 84.5695C128.319 84.5695 128.159 84.8099 128.159 85.1065C128.159 85.4031 128.319 85.6435 128.516 85.6435Z" fill="#D1FEF9"/>
-<path d="M127.213 100.24C127.398 100.24 127.549 100.014 127.549 99.735C127.549 99.456 127.398 99.2297 127.213 99.2297C127.027 99.2297 126.877 99.456 126.877 99.735C126.877 100.014 127.027 100.24 127.213 100.24Z" fill="#D1FEF9"/>
-<path d="M126.89 90.1623C127.067 90.1623 127.211 89.9459 127.211 89.679C127.211 89.4121 127.067 89.1957 126.89 89.1957C126.712 89.1957 126.568 89.4121 126.568 89.679C126.568 89.9459 126.712 90.1623 126.89 90.1623Z" fill="#D1FEF9"/>
-<path d="M124.399 106.607C124.674 106.607 124.896 106.273 124.896 105.86C124.896 105.448 124.674 105.113 124.399 105.113C124.125 105.113 123.903 105.448 123.903 105.86C123.903 106.273 124.125 106.607 124.399 106.607Z" fill="#D1FEF9"/>
-<path d="M127.505 40.9983C127.84 40.9983 128.112 40.5896 128.112 40.0854C128.112 39.5812 127.84 39.1725 127.505 39.1725C127.169 39.1725 126.898 39.5812 126.898 40.0854C126.898 40.5896 127.169 40.9983 127.505 40.9983Z" fill="#D1FEF9"/>
-<path d="M127.19 32.2102C127.363 32.2102 127.503 31.9993 127.503 31.7391C127.503 31.479 127.363 31.268 127.19 31.268C127.017 31.268 126.877 31.479 126.877 31.7391C126.877 31.9993 127.017 32.2102 127.19 32.2102Z" fill="#D1FEF9"/>
-<path d="M122.719 22.3808C122.921 22.3808 123.086 22.1338 123.086 21.8291C123.086 21.5244 122.921 21.2775 122.719 21.2775C122.516 21.2775 122.352 21.5244 122.352 21.8291C122.352 22.1338 122.516 22.3808 122.719 22.3808Z" fill="#D1FEF9"/>
-<path d="M122.785 36.9511C123.026 36.9511 123.22 36.6582 123.22 36.2969C123.22 35.9356 123.026 35.6427 122.785 35.6427C122.545 35.6427 122.35 35.9356 122.35 36.2969C122.35 36.6582 122.545 36.9511 122.785 36.9511Z" fill="#D1FEF9"/>
-<path d="M120.91 48.8488C121.133 48.8488 121.314 48.5767 121.314 48.241C121.314 47.9053 121.133 47.6332 120.91 47.6332C120.687 47.6332 120.506 47.9053 120.506 48.241C120.506 48.5767 120.687 48.8488 120.91 48.8488Z" fill="#D1FEF9"/>
-<path d="M85.3566 18.4508C85.483 18.4508 85.5855 18.2967 85.5855 18.1066C85.5855 17.9165 85.483 17.7625 85.3566 17.7625C85.2302 17.7625 85.1277 17.9165 85.1277 18.1066C85.1277 18.2967 85.2302 18.4508 85.3566 18.4508Z" fill="#D1FEF9"/>
-<path d="M87.9931 34.2027C88.3589 34.2027 88.6555 33.7568 88.6555 33.2068C88.6555 32.6568 88.3589 32.2109 87.9931 32.2109C87.6273 32.2109 87.3307 32.6568 87.3307 33.2068C87.3307 33.7568 87.6273 34.2027 87.9931 34.2027Z" fill="#D1FEF9"/>
-<path d="M83.6516 40.9983C83.9869 40.9983 84.2588 40.5896 84.2588 40.0854C84.2588 39.5812 83.9869 39.1725 83.6516 39.1725C83.3163 39.1725 83.0444 39.5812 83.0444 40.0854C83.0444 40.5896 83.3163 40.9983 83.6516 40.9983Z" fill="#D1FEF9"/>
-<path d="M81.5884 34.639C81.7184 34.639 81.8238 34.4805 81.8238 34.2851C81.8238 34.0896 81.7184 33.9311 81.5884 33.9311C81.4584 33.9311 81.353 34.0896 81.353 34.2851C81.353 34.4805 81.4584 34.639 81.5884 34.639Z" fill="#D1FEF9"/>
-<path d="M76.5768 38.3769C76.8387 38.3769 77.0509 38.0577 77.0509 37.6641C77.0509 37.2704 76.8387 36.9513 76.5768 36.9513C76.315 36.9513 76.1028 37.2704 76.1028 37.6641C76.1028 38.0577 76.315 38.3769 76.5768 38.3769Z" fill="#D1FEF9"/>
-<path d="M80.1809 48.6022C80.6642 48.6022 81.056 48.0132 81.056 47.2866C81.056 46.5599 80.6642 45.9709 80.1809 45.9709C79.6977 45.9709 79.3059 46.5599 79.3059 47.2866C79.3059 48.0132 79.6977 48.6022 80.1809 48.6022Z" fill="#D1FEF9"/>
-<path d="M108.81 17.2593C109.034 17.2593 109.216 16.9861 109.216 16.6491C109.216 16.3121 109.034 16.0388 108.81 16.0388C108.586 16.0388 108.404 16.3121 108.404 16.6491C108.404 16.9861 108.586 17.2593 108.81 17.2593Z" fill="#D1FEF9"/>
-<path d="M92.5257 9.01466C92.8924 9.01466 93.1897 8.56768 93.1897 8.0163C93.1897 7.46492 92.8924 7.01794 92.5257 7.01794C92.159 7.01794 91.8617 7.46492 91.8617 8.0163C91.8617 8.56768 92.159 9.01466 92.5257 9.01466Z" fill="#D1FEF9"/>
-<path d="M111.144 1.47926C111.415 1.47926 111.635 1.14812 111.635 0.739644C111.635 0.331167 111.415 3.05176e-05 111.144 3.05176e-05C110.872 3.05176e-05 110.652 0.331167 110.652 0.739644C110.652 1.14812 110.872 1.47926 111.144 1.47926Z" fill="#D1FEF9"/>
-<path d="M100.566 20.9507C101.026 20.9507 101.398 20.3912 101.398 19.7009C101.398 19.0107 101.026 18.4512 100.566 18.4512C100.107 18.4512 99.7352 19.0107 99.7352 19.7009C99.7352 20.3912 100.107 20.9507 100.566 20.9507Z" fill="#D1FEF9"/>
-<path d="M108.082 38.3764C108.464 38.3764 108.774 37.9108 108.774 37.3365C108.774 36.7622 108.464 36.2967 108.082 36.2967C107.7 36.2967 107.391 36.7622 107.391 37.3365C107.391 37.9108 107.7 38.3764 108.082 38.3764Z" fill="#D1FEF9"/>
-<path d="M111.889 39.9341C112.029 39.9341 112.142 39.7636 112.142 39.5533C112.142 39.343 112.029 39.1725 111.889 39.1725C111.749 39.1725 111.635 39.343 111.635 39.5533C111.635 39.7636 111.749 39.9341 111.889 39.9341Z" fill="#D1FEF9"/>
-<path d="M97.2843 39.553C97.5004 39.553 97.6756 39.2897 97.6756 38.9648C97.6756 38.6399 97.5004 38.3765 97.2843 38.3765C97.0682 38.3765 96.8931 38.6399 96.8931 38.9648C96.8931 39.2897 97.0682 39.553 97.2843 39.553Z" fill="#D1FEF9"/>
-<path d="M95.6538 31.1318C95.8968 31.1318 96.0938 30.8356 96.0938 30.4702C96.0938 30.1049 95.8968 29.8087 95.6538 29.8087C95.4108 29.8087 95.2139 30.1049 95.2139 30.4702C95.2139 30.8356 95.4108 31.1318 95.6538 31.1318Z" fill="#D1FEF9"/>
-<path d="M109.51 21.8292C109.672 21.8292 109.803 21.6324 109.803 21.3898C109.803 21.1471 109.672 20.9504 109.51 20.9504C109.349 20.9504 109.218 21.1471 109.218 21.3898C109.218 21.6324 109.349 21.8292 109.51 21.8292Z" fill="#D1FEF9"/>
-<path d="M107.322 13.735C107.518 13.735 107.677 13.4956 107.677 13.2004C107.677 12.9052 107.518 12.6658 107.322 12.6658C107.126 12.6658 106.966 12.9052 106.966 13.2004C106.966 13.4956 107.126 13.735 107.322 13.735Z" fill="#D1FEF9"/>
-<path d="M70.3198 69.582C70.4964 69.582 70.6396 69.3668 70.6396 69.1012C70.6396 68.8356 70.4964 68.6203 70.3198 68.6203C70.1432 68.6203 70 68.8356 70 69.1012C70 69.3668 70.1432 69.582 70.3198 69.582Z" fill="#D1FEF9"/>
-<path d="M92.6133 18.798C92.8958 18.798 93.1247 18.4537 93.1247 18.0291C93.1247 17.6044 92.8958 17.2602 92.6133 17.2602C92.3309 17.2602 92.1019 17.6044 92.1019 18.0291C92.1019 18.4537 92.3309 18.798 92.6133 18.798Z" fill="#D1FEF9"/>
-<path d="M72.3184 71.6868C72.7048 71.6868 73.0181 71.2158 73.0181 70.6347C73.0181 70.0537 72.7048 69.5827 72.3184 69.5827C71.9319 69.5827 71.6187 70.0537 71.6187 70.6347C71.6187 71.2158 71.9319 71.6868 72.3184 71.6868Z" fill="#D1FEF9"/>
-</g>
-<g opacity="0.2" filter="url(#filter0_f_2214_156)">
-<path d="M98.1638 87.1355L90.2254 81.2306C88.1961 79.7211 87.0002 77.3409 87.0001 74.8118L87 57.3723C87 54.8971 88.1457 52.5613 90.103 51.0462L98.2802 44.7161C101.118 42.5192 105.072 42.4811 107.952 44.623L115.784 50.4486C117.814 51.9581 119.01 54.3384 119.01 56.8677V74.3516C119.01 76.8014 117.887 79.1162 115.964 80.6333L107.892 86.9983C105.053 89.2374 101.065 89.2936 98.1638 87.1355Z" fill="#5CF9BE"/>
-</g>
-<g filter="url(#filter1_f_2214_156)">
-<ellipse cx="11.1792" cy="0.610387" rx="11.1792" ry="0.610387" transform="matrix(0.904419 0.426646 -0.444506 0.895776 91.4253 83.5497)" fill="black" fill-opacity="0.9"/>
-</g>
-<path d="M103.014 48.7421L116.027 65.4139L103.014 73.1561V48.7421Z" fill="#B5FFE3"/>
-<path d="M103.014 83.1173L90.0002 65.4142L103.014 73.1567L103.014 83.1173Z" fill="#1AD28D"/>
-<path d="M103.013 48.7441V73.1578L90 65.4155L103.013 48.7441Z" fill="#5CF9BE"/>
-<path d="M103.014 83.1166L103.014 73.1562L116.027 65.4136L103.014 83.1166Z" fill="#5CF9BE"/>
-<path d="M12.6533 128.378C12.6533 128.378 15.6889 130.737 18.0705 132.17C20.7977 133.812 26.1962 134.337 26.1962 134.337C26.1962 134.337 26.4524 140.774 26.1962 143.244C25.9401 145.713 25.6545 148.422 25.6545 148.422C25.6545 148.422 27.0714 150.49 27.8214 151.672C28.869 153.324 29.4465 156.006 29.4465 156.006H11.0282C11.0282 156.006 11.0404 152.826 11.5699 150.896C11.8848 149.749 12.6533 148.058 12.6533 148.058C13.1951 144.651 13.7368 143.066 13.7368 140.296C13.7368 137.564 13.1951 131.629 12.6533 128.378Z" fill="url(#paint0_linear_2214_156)"/>
-<path d="M12.6533 128.92C12.6533 128.92 16.7723 134.529 19.1539 135.962C21.8811 137.604 26.1962 134.337 26.1962 134.337C26.1962 134.337 26.3295 137.686 26.3076 140.48C26.3036 140.999 26.3034 141.477 26.2919 141.921C26.2919 141.921 19.6956 140.838 13.3641 134.456C13.3466 134.282 13.3287 134.107 13.3104 133.932C13.1203 132.12 12.8868 130.321 12.6533 128.92Z" fill="#007156"/>
-<path d="M34.8636 135.421C34.8636 135.421 39.7391 134.63 41.906 133.254C44.0728 131.878 46.2397 130.004 46.2397 130.004C46.2397 130.004 48.72 135.448 49.49 140.838C50.0317 144.63 49.49 148.422 49.49 148.422C49.49 148.422 50.9069 150.49 51.6568 151.672C52.7044 153.324 53.282 156.006 53.282 156.006H34.8636C34.8636 156.006 34.8758 152.826 35.4054 150.896C35.7203 149.749 36.4888 148.058 36.4888 148.058C37.5722 145.172 36.4888 140.838 36.4888 140.838C36.4888 140.838 35.4054 136.504 34.8636 135.421Z" fill="url(#paint1_linear_2214_156)"/>
-<path d="M34.8636 135.421C34.8636 135.421 39.7391 134.63 41.906 133.254C44.0728 131.878 46.2397 130.004 46.2397 130.004C46.2397 130.004 47.0124 131.7 47.8292 134.136C47.8292 134.136 47.8648 134.879 44.6145 137.588C41.3642 140.296 36.7054 141.921 36.7054 141.921C36.5936 141.257 36.4888 140.838 36.4888 140.838C36.4888 140.838 35.4054 136.504 34.8636 135.421Z" fill="#007156"/>
-<path d="M68.2192 94.3534C69.4182 90.706 67.3321 87.4889 65.6115 86.6376C63.8909 85.7862 61.3118 84.9384 58.316 87.0972C55.3202 89.256 52.6363 94.408 48.9297 100.873C45.1005 109.044 43.3942 111.627 42.1225 115.496L55.4382 117.587C57.5684 113.714 67.3714 96.9324 68.2192 94.3534Z" fill="url(#paint2_linear_2214_156)"/>
-<circle cx="30.5299" cy="115.919" r="24.9189" fill="url(#paint3_linear_2214_156)"/>
-<rect x="29.4465" y="114.348" width="15.7175" height="16.2181" rx="2" transform="rotate(-46.6569 29.4465 114.348)" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0931 111.544L35.2888 108.158C35.6478 108.086 36.0252 108.047 36.4146 108.047C38.808 108.047 40.7483 109.502 40.7483 111.298C40.7483 113.093 38.808 114.548 36.4146 114.548C34.1317 114.548 32.2611 113.224 32.0931 111.544Z" fill="white"/>
-<circle cx="30.5299" cy="115.919" r="24.9189" fill="url(#paint4_linear_2214_156)"/>
-<rect x="31.6134" y="114.348" width="15.7175" height="16.2181" rx="2" transform="rotate(-46.6569 31.6134 114.348)" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M34.26 111.544L37.4557 108.158C37.8147 108.086 38.1921 108.047 38.5815 108.047C40.9749 108.047 42.9152 109.502 42.9152 111.298C42.9152 113.093 40.9749 114.548 38.5815 114.548C36.2986 114.548 34.428 113.224 34.26 111.544Z" fill="white"/>
-<path d="M32.2192 91.3534C33.4182 87.7061 31.3321 84.4889 29.6115 83.6376C27.8909 82.7862 25.3118 81.9384 22.316 84.0972C19.3202 86.256 16.6363 91.408 12.9297 97.8726C9.10045 106.044 7.39417 108.627 6.12251 112.496L19.4382 114.587C21.5684 110.714 31.3714 93.9325 32.2192 91.3534Z" fill="url(#paint5_linear_2214_156)"/>
-<path d="M161.255 157.142C154.659 157.934 153.911 140.546 154.24 138.287C158.009 135.131 162.279 136.804 164.044 138.833C162.559 147.447 167.851 156.35 161.255 157.142Z" fill="#DE493C"/>
-<path d="M137.886 103.805C133.306 108.403 148.879 119.326 150.946 120.274C156.274 118.174 151.19 110.969 150.441 108.444C142.435 105.019 141.141 100.536 137.886 103.805Z" fill="url(#paint6_linear_2214_156)"/>
-<path d="M151.453 85.6076C160.483 71.4667 173.409 71.4663 181.727 78.5568C189.608 86.7946 183.942 96.2737 183.942 104.289C183.942 111.992 184.794 115.353 185.945 124.332C187.136 133.626 183.278 147.318 167.456 146.095C151.635 144.871 148.39 125.413 147.62 119.342C146.85 113.271 143.991 97.2935 151.453 85.6076Z" fill="url(#paint7_linear_2214_156)"/>
-<path d="M159.056 100.608C154.981 99.5787 152.363 96.7915 151.477 94.9583C152.586 92.6446 155.576 87.5483 158.669 85.6726C162.535 83.3279 167.671 85.9566 169.859 89.9911C171.61 93.2187 172.046 96.7563 172.615 99.2727C170.1 100.579 164.586 102.006 159.056 100.608Z" fill="#FEF9F5"/>
-<mask id="mask0_2214_156" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="154" y="83" width="15" height="16">
-<path d="M154.596 90.5782C154.2 94.5348 156.679 98.015 160.135 98.3515C163.591 98.6879 167.706 95.9858 168.103 92.0292C168.5 88.0726 165.028 84.3599 161.572 84.0234C158.117 83.6869 154.993 86.6216 154.596 90.5782Z" fill="black"/>
-</mask>
-<g mask="url(#mask0_2214_156)">
-<path d="M158.867 102.244C154.931 100.78 152.174 96.7472 151.288 94.9141C152.397 92.6004 155.387 87.5041 158.48 85.6283C162.346 83.2836 167.482 85.9124 169.67 89.9469C171.421 93.1745 172.551 97.9564 173.279 100.068C170.763 101.375 163.787 104.074 158.867 102.244Z" fill="black"/>
-</g>
-<path d="M153.602 104.017C149.394 108.947 161.954 117.875 164.02 118.823C170.938 119.101 171.169 114.121 170.42 111.596C162.414 108.171 157.811 99.0871 153.602 104.017Z" fill="url(#paint8_linear_2214_156)"/>
-<path d="M174.469 157.142C167.874 157.934 167.125 140.546 167.454 138.287C171.223 135.131 175.493 136.804 177.259 138.833C175.773 147.447 181.065 156.35 174.469 157.142Z" fill="url(#paint9_linear_2214_156)"/>
-<path d="M153.716 109.565C160.963 118.174 164.373 119.084 165.439 119.644C164.657 119.714 162.154 119.236 159.897 117.754C157.979 116.494 154.143 112.294 153.716 109.565Z" fill="#DB422A"/>
-<defs>
-<filter id="filter0_f_2214_156" x="71" y="27.0421" width="64.0098" height="77.6745" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="8" result="effect1_foregroundBlur_2214_156"/>
-</filter>
-<filter id="filter1_f_2214_156" x="81.1503" y="74.0648" width="40.2288" height="29.6025" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_2214_156"/>
-</filter>
-<linearGradient id="paint0_linear_2214_156" x1="19.6956" y1="139.754" x2="19.6956" y2="156.006" gradientUnits="userSpaceOnUse">
-<stop stop-color="#14B678"/>
-<stop offset="0.8125" stop-color="#1FF073"/>
-</linearGradient>
-<linearGradient id="paint1_linear_2214_156" x1="44.0728" y1="137.046" x2="44.0728" y2="156.006" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00AB6A"/>
-<stop offset="1" stop-color="#1FF073"/>
-</linearGradient>
-<linearGradient id="paint2_linear_2214_156" x1="56.6992" y1="111.142" x2="64.3184" y2="85.3552" gradientUnits="userSpaceOnUse">
-<stop stop-color="#0FA866"/>
-<stop offset="0.994297" stop-color="#1FF073"/>
-<stop offset="0.994397" stop-color="#1EB57C"/>
-</linearGradient>
-<linearGradient id="paint3_linear_2214_156" x1="44.0728" y1="93.1669" x2="15.9036" y2="133.254" gradientUnits="userSpaceOnUse">
-<stop offset="0.234375" stop-color="#16CF89"/>
-<stop offset="1" stop-color="#14B578"/>
-</linearGradient>
-<linearGradient id="paint4_linear_2214_156" x1="47.8648" y1="97.5006" x2="26.1962" y2="140.296" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1FF073"/>
-<stop offset="1" stop-color="#04795D"/>
-</linearGradient>
-<linearGradient id="paint5_linear_2214_156" x1="20.6992" y1="108.142" x2="28.3184" y2="82.3552" gradientUnits="userSpaceOnUse">
-<stop stop-color="#0FA866"/>
-<stop offset="0.994297" stop-color="#1FF073"/>
-<stop offset="0.994397" stop-color="#1EB57C"/>
-</linearGradient>
-<linearGradient id="paint6_linear_2214_156" x1="136.753" y1="106.067" x2="153.865" y2="117.402" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E04D40"/>
-<stop offset="1" stop-color="#F15F56"/>
-</linearGradient>
-<linearGradient id="paint7_linear_2214_156" x1="170.839" y1="72.4184" x2="171.132" y2="149.758" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F46A6A"/>
-<stop offset="1" stop-color="#EA5749"/>
-</linearGradient>
-<linearGradient id="paint8_linear_2214_156" x1="152.47" y1="106.28" x2="169.582" y2="117.615" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FF6F66"/>
-<stop offset="1" stop-color="#EF6058"/>
-</linearGradient>
-<linearGradient id="paint9_linear_2214_156" x1="171.886" y1="156.836" x2="171.882" y2="136.194" gradientUnits="userSpaceOnUse">
-<stop stop-color="#DA4639"/>
-<stop offset="1" stop-color="#EC5B4F"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/newIDE/app/public/res/quick_customization/tweak_gameplay.svg b/newIDE/app/public/res/quick_customization/tweak_gameplay.svg
deleted file mode 100644
index 01777a94378d..000000000000
--- a/newIDE/app/public/res/quick_customization/tweak_gameplay.svg
+++ /dev/null
@@ -1,78 +0,0 @@
-<svg width="177" height="128" viewBox="0 0 177 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_f_1723_288)">
-<rect x="55.0928" y="32.298" width="88.8537" height="62.9028" rx="7.05188" fill="#DBFF00" fill-opacity="0.2"/>
-</g>
-<g filter="url(#filter1_f_1723_288)">
-<ellipse cx="39.2962" cy="120.164" rx="34.4132" ry="1.83349" fill="#270B31" fill-opacity="0.2"/>
-</g>
-<path d="M46.5355 118.458C52.6632 119.205 53.3584 102.808 53.0531 100.678C49.5513 97.7015 45.5841 99.279 43.9441 101.193C45.3245 109.316 40.4078 117.711 46.5355 118.458Z" fill="#DE493C"/>
-<path d="M68.2468 68.1605C72.5017 72.4965 58.0334 82.7974 56.1136 83.6909C51.1634 81.7107 55.887 74.9163 56.5828 72.5355C64.0207 69.3056 65.2221 65.078 68.2468 68.1605Z" fill="url(#paint0_linear_1723_288)"/>
-<path d="M55.642 51.0007C47.2525 37.6657 35.2439 37.6653 27.5168 44.3518C20.1951 52.12 25.4588 61.0589 25.4588 68.6174C25.4588 75.8816 24.6668 79.0509 23.5979 87.5186C22.4917 96.2826 26.0754 109.194 40.7743 108.04C55.4732 106.887 58.4879 88.5377 59.2032 82.8125C59.9185 77.0873 62.575 62.0206 55.642 51.0007Z" fill="url(#paint1_linear_1723_288)"/>
-<path d="M48.5788 65.1463C52.365 64.1754 54.7966 61.547 55.62 59.8183C54.59 57.6365 51.8117 52.8306 48.9385 51.0617C45.3469 48.8507 40.5749 51.3296 38.5422 55.1342C36.9161 58.1779 36.5105 61.5138 35.982 63.8868C38.3189 65.1191 43.4409 66.464 48.5788 65.1463Z" fill="#FEF9F5"/>
-<mask id="mask0_1723_288" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="40" y="49" width="13" height="15">
-<path d="M52.7216 55.6879C53.0903 59.419 50.7867 62.7009 47.5762 63.0182C44.3657 63.3355 40.5426 60.7873 40.1739 57.0562C39.8051 53.3251 43.0303 49.824 46.2408 49.5067C49.4513 49.1894 52.3528 51.9568 52.7216 55.6879Z" fill="black"/>
-</mask>
-<g mask="url(#mask0_1723_288)">
-<path d="M48.7543 66.6887C52.411 65.3079 54.9721 61.5053 55.7956 59.7766C54.7656 57.5948 51.9872 52.7889 49.114 51.0201C45.5224 48.809 40.7504 51.2879 38.7177 55.0925C37.0916 58.1362 36.0412 62.6456 35.3655 64.6371C37.7023 65.8694 44.1835 68.4148 48.7543 66.6887Z" fill="black"/>
-</g>
-<path d="M53.6452 68.3612C57.5554 73.0105 45.8867 81.4295 43.9669 82.3231C37.5402 82.5853 37.3251 77.8892 38.0209 75.5084C45.4588 72.2785 49.7349 63.712 53.6452 68.3612Z" fill="url(#paint2_linear_1723_288)"/>
-<path d="M34.2591 118.458C40.3868 119.205 41.0821 102.808 40.7768 100.678C37.2749 97.7015 33.3077 99.279 31.6677 101.193C33.0481 109.316 28.1314 117.711 34.2591 118.458Z" fill="url(#paint3_linear_1723_288)"/>
-<path d="M53.5395 73.5923C46.8071 81.7108 43.639 82.5688 42.6489 83.0968C43.375 83.1628 45.7002 82.7127 47.7972 81.3147C49.5793 80.1267 53.1434 76.1665 53.5395 73.5923Z" fill="#DB422A"/>
-<rect x="61.4391" y="36.6702" width="76.1603" height="54.1584" rx="6.91084" fill="#58FFD7" fill-opacity="0.2" stroke="#7FFF00" stroke-width="0.282075"/>
-<rect x="125.611" y="30.0414" width="20.8736" height="22.8481" rx="3.10283" stroke="#67EEAD" stroke-opacity="0.4" stroke-width="0.56415"/>
-<circle cx="99.5716" cy="58.708" r="11.319" stroke="#76FF9C" stroke-width="0.282075" stroke-dasharray="1.41 1.41"/>
-<path d="M95.2211 69.1069L93.205 80.6731H88.6422" stroke="#76FF9C" stroke-width="0.282075" stroke-dasharray="1.41 1.41"/>
-<path d="M104.028 69.1069L106.044 80.6731H110.607" stroke="#76FF9C" stroke-width="0.282075" stroke-dasharray="1.41 1.41"/>
-<path d="M88.3237 57.0102L81.6387 61.7852L89.3848 64.0136C89.4909 64.8625 89.4273 66.6664 88.3237 67.0908" stroke="#76FF9C" stroke-width="0.282075" stroke-dasharray="1.41 1.41"/>
-<path d="M110.856 57.0102L117.541 61.7852L109.795 64.0136C109.689 64.8625 109.752 66.6664 110.856 67.0908" stroke="#76FF9C" stroke-width="0.282075" stroke-dasharray="1.41 1.41"/>
-<path d="M92.0376 56.6919C92.6743 57.3286 104.983 57.753 107.318 56.6919" stroke="#76FF9C" stroke-width="0.282075" stroke-dasharray="1.41 1.41"/>
-<circle cx="95.7515" cy="52.7658" r="0.424447" fill="#76FF9C"/>
-<circle cx="102.118" cy="52.7658" r="0.424447" fill="#76FF9C"/>
-<rect x="30.129" y="14.1042" width="57.8254" height="29.6179" rx="6.91084" fill="#ACFF58" fill-opacity="0.2" stroke="#7FFF00" stroke-width="0.282075"/>
-<path d="M47.1825 25.2591H51.1044V25.8445H49.4964V30.4H48.7974V25.8445H47.1825V25.2591ZM54.0255 26.9877C53.7041 26.9877 53.4608 27.1128 53.2955 27.363C53.1302 27.6132 53.0476 27.9839 53.0476 28.4752C53.0476 28.9641 53.1302 29.3348 53.2955 29.5873C53.4608 29.8376 53.7041 29.9627 54.0255 29.9627C54.3491 29.9627 54.5936 29.8376 54.7589 29.5873C54.9242 29.3348 55.0068 28.9641 55.0068 28.4752C55.0068 27.9839 54.9242 27.6132 54.7589 27.363C54.5936 27.1128 54.3491 26.9877 54.0255 26.9877ZM54.0255 26.4505C54.5603 26.4505 54.9689 26.6238 55.2513 26.9704C55.5359 27.3171 55.6782 27.8186 55.6782 28.4752C55.6782 29.134 55.5371 29.6367 55.2547 29.9833C54.9724 30.3277 54.5626 30.4998 54.0255 30.4998C53.4906 30.4998 53.082 30.3277 52.7996 29.9833C52.5173 29.6367 52.3761 29.134 52.3761 28.4752C52.3761 27.8186 52.5173 27.3171 52.7996 26.9704C53.082 26.6238 53.4906 26.4505 54.0255 26.4505ZM58.9092 26.9877C58.5878 26.9877 58.3445 27.1128 58.1792 27.363C58.0139 27.6132 57.9313 27.9839 57.9313 28.4752C57.9313 28.9641 58.0139 29.3348 58.1792 29.5873C58.3445 29.8376 58.5878 29.9627 58.9092 29.9627C59.2328 29.9627 59.4773 29.8376 59.6426 29.5873C59.8079 29.3348 59.8905 28.9641 59.8905 28.4752C59.8905 27.9839 59.8079 27.6132 59.6426 27.363C59.4773 27.1128 59.2328 26.9877 58.9092 26.9877ZM58.9092 26.4505C59.444 26.4505 59.8526 26.6238 60.135 26.9704C60.4196 27.3171 60.5619 27.8186 60.5619 28.4752C60.5619 29.134 60.4208 29.6367 60.1384 29.9833C59.8561 30.3277 59.4463 30.4998 58.9092 30.4998C58.3743 30.4998 57.9657 30.3277 57.6833 29.9833C57.401 29.6367 57.2598 29.134 57.2598 28.4752C57.2598 27.8186 57.401 27.3171 57.6833 26.9704C57.9657 26.6238 58.3743 26.4505 58.9092 26.4505ZM64.1475 29.0054C64.1475 29.2901 64.1992 29.5047 64.3025 29.6493C64.4081 29.7939 64.563 29.8663 64.7673 29.8663H65.5076V30.4H64.7053C64.3266 30.4 64.0327 30.2794 63.8238 30.0384C63.6172 29.7951 63.5139 29.4508 63.5139 29.0054V25.5174H62.4982V25.0215H64.1475V29.0054ZM69.9058 26.6778V27.2975C69.7245 27.192 69.542 27.1128 69.3583 27.06C69.1747 27.0072 68.9876 26.9808 68.7971 26.9808C68.5101 26.9808 68.2955 27.0278 68.1532 27.1219C68.0131 27.2138 67.9431 27.3549 67.9431 27.5455C67.9431 27.7176 67.9959 27.8462 68.1015 27.9311C68.2071 28.0161 68.47 28.0987 68.89 28.179L69.1448 28.2272C69.4593 28.2869 69.6969 28.4063 69.8576 28.5853C70.0206 28.7644 70.1021 28.9974 70.1021 29.2843C70.1021 29.6654 69.9666 29.9638 69.6958 30.1796C69.4249 30.3931 69.0484 30.4998 68.5664 30.4998C68.3758 30.4998 68.1761 30.4792 67.9672 30.4378C67.7583 30.3988 67.5322 30.3391 67.2889 30.2588V29.6046C67.5253 29.7262 67.7515 29.818 67.9672 29.88C68.183 29.9397 68.3873 29.9696 68.5801 29.9696C68.8602 29.9696 69.0771 29.9133 69.2309 29.8008C69.3847 29.6861 69.4616 29.5265 69.4616 29.3222C69.4616 29.0284 69.1804 28.8252 68.618 28.7127L68.5905 28.7059L68.3529 28.6577C67.9879 28.5865 67.7216 28.4671 67.554 28.2995C67.3865 28.1297 67.3027 27.899 67.3027 27.6074C67.3027 27.2379 67.4278 26.9532 67.678 26.7535C67.9282 26.5515 68.2852 26.4505 68.7489 26.4505C68.9555 26.4505 69.154 26.47 69.3446 26.509C69.5351 26.5458 69.7222 26.602 69.9058 26.6778Z" fill="#76FF9C"/>
-<rect x="88.0953" y="87.0206" width="37.3231" height="12.6236" rx="6.31181" fill="#16CF89"/>
-<path d="M100.661 92.9817C100.787 93.0687 100.787 93.2553 100.661 93.3424L96.1736 96.4345C96.0283 96.5346 95.8303 96.4306 95.8303 96.2541L95.8303 90.0699C95.8303 89.8935 96.0283 89.7894 96.1736 89.8896L100.661 92.9817Z" fill="black"/>
-<path d="M118.94 91.0184C118.944 91.041 118.944 91.0636 118.94 91.0863C118.94 91.1089 118.933 91.1338 118.919 91.1609C118.901 91.2243 118.881 91.2809 118.858 91.3307C118.831 91.3941 118.797 91.4484 118.756 91.4936C118.738 91.5208 118.72 91.548 118.702 91.5751C118.688 91.5977 118.675 91.6204 118.661 91.643L118.573 91.7584L117.704 93.0145L117.548 93.2114V95.0174C117.539 95.0401 117.534 95.0627 117.534 95.0853C117.534 95.108 117.532 95.1329 117.527 95.16C117.518 95.1826 117.511 95.2053 117.507 95.2279C117.502 95.246 117.496 95.2664 117.487 95.289C117.477 95.3071 117.473 95.3207 117.473 95.3297C117.468 95.3388 117.464 95.3456 117.459 95.3501C117.459 95.3546 117.457 95.3614 117.453 95.3705C117.425 95.4157 117.387 95.4565 117.337 95.4927C117.238 95.5425 117.124 95.5538 116.998 95.5266C116.925 95.5176 116.871 95.495 116.835 95.4588C116.812 95.4452 116.794 95.4293 116.78 95.4112C116.767 95.3931 116.753 95.3727 116.74 95.3501C116.731 95.323 116.722 95.2981 116.713 95.2754C116.703 95.2528 116.697 95.2302 116.692 95.2075C116.683 95.1849 116.679 95.1645 116.679 95.1464C116.679 95.1238 116.679 95.1034 116.679 95.0853V93.2318L116.529 93.0009L115.647 91.7516L115.572 91.6294C115.545 91.5887 115.511 91.5412 115.47 91.4868C115.434 91.4371 115.402 91.3827 115.375 91.3239C115.357 91.2967 115.341 91.2696 115.327 91.2424C115.318 91.2107 115.309 91.1791 115.3 91.1474C115.287 91.1021 115.284 91.0568 115.294 91.0116C115.307 90.9527 115.334 90.9029 115.375 90.8622C115.42 90.8215 115.468 90.7898 115.518 90.7672C115.581 90.7219 115.653 90.7038 115.735 90.7128C115.785 90.7128 115.828 90.7219 115.864 90.74C115.9 90.7581 115.936 90.7785 115.972 90.8011C116.013 90.8328 116.052 90.8667 116.088 90.9029C116.129 90.9392 116.165 90.9776 116.197 91.0184C116.233 91.0636 116.267 91.1066 116.298 91.1474C116.33 91.1836 116.362 91.2266 116.393 91.2764L116.414 91.3035C116.522 91.4484 116.624 91.5887 116.719 91.7245C116.814 91.8557 116.914 91.9983 117.018 92.1522C117.027 92.1613 117.041 92.1794 117.059 92.2065C117.077 92.2337 117.097 92.2654 117.12 92.3016C117.138 92.2699 117.154 92.2428 117.167 92.2201C117.186 92.193 117.199 92.1749 117.208 92.1658C117.312 92.0119 117.412 91.8671 117.507 91.7313C117.602 91.5955 117.704 91.4552 117.812 91.3103L117.826 91.2832C117.862 91.2424 117.894 91.2017 117.921 91.1609C117.953 91.1157 117.987 91.0704 118.023 91.0252C118.082 90.9437 118.161 90.8735 118.261 90.8147C118.333 90.7649 118.408 90.7332 118.485 90.7196C118.571 90.7106 118.645 90.7287 118.709 90.7739C118.736 90.792 118.761 90.8079 118.783 90.8215C118.811 90.835 118.833 90.8509 118.851 90.869C118.887 90.9097 118.917 90.9595 118.94 91.0184Z" fill="black"/>
-<path d="M115.405 95.0718C115.409 95.0989 115.412 95.1261 115.412 95.1532C115.416 95.1759 115.418 95.203 115.418 95.2347C115.418 95.289 115.402 95.3388 115.371 95.3841C115.357 95.4067 115.339 95.4294 115.316 95.452C115.294 95.4701 115.267 95.4859 115.235 95.4995C115.122 95.5629 115.002 95.5855 114.875 95.5674C114.812 95.5493 114.755 95.5199 114.705 95.4791C114.696 95.4701 114.69 95.4656 114.685 95.4656C114.681 95.461 114.676 95.4543 114.671 95.4452C114.667 95.4407 114.662 95.4361 114.658 95.4316C114.653 95.4226 114.647 95.4158 114.638 95.4113C114.615 95.3886 114.597 95.3682 114.583 95.3501C114.57 95.3275 114.556 95.3049 114.542 95.2822C114.533 95.2596 114.522 95.2392 114.509 95.2211C114.499 95.1985 114.488 95.1759 114.475 95.1532C114.466 95.1351 114.456 95.1193 114.447 95.1057C114.438 95.0876 114.432 95.0695 114.427 95.0514C114.409 95.0107 114.398 94.9745 114.393 94.9428L114.251 94.6101C113.938 94.6101 113.626 94.6123 113.314 94.6169C113.006 94.6169 112.696 94.6146 112.383 94.6101L112.241 94.9428C112.232 94.9609 112.225 94.979 112.22 94.9971C112.22 95.0152 112.216 95.0333 112.207 95.0514C112.198 95.0695 112.189 95.0876 112.18 95.1057C112.175 95.1193 112.168 95.1351 112.159 95.1532C112.146 95.1759 112.132 95.1985 112.119 95.2211C112.11 95.2392 112.098 95.2596 112.085 95.2822C112.076 95.3049 112.064 95.3275 112.051 95.3501C112.037 95.3682 112.019 95.3886 111.996 95.4113C111.987 95.4158 111.981 95.4226 111.976 95.4316C111.971 95.4361 111.967 95.4407 111.962 95.4452C111.958 95.4543 111.953 95.461 111.949 95.4656C111.944 95.4656 111.938 95.4701 111.928 95.4791C111.879 95.5199 111.822 95.5493 111.759 95.5674C111.632 95.5855 111.512 95.5629 111.399 95.4995C111.367 95.4859 111.34 95.4701 111.317 95.452C111.295 95.4294 111.277 95.4067 111.263 95.3841C111.231 95.3388 111.216 95.289 111.216 95.2347C111.216 95.203 111.216 95.1759 111.216 95.1532C111.22 95.1261 111.225 95.0989 111.229 95.0718C111.238 95.031 111.25 94.9903 111.263 94.9496C111.277 94.9088 111.283 94.8885 111.283 94.8885L112.696 91.4122L112.736 91.3036C112.745 91.2764 112.757 91.2515 112.77 91.2289C112.784 91.2062 112.795 91.1791 112.804 91.1474C112.827 91.0886 112.852 91.0365 112.879 90.9912C112.893 90.9641 112.908 90.9392 112.927 90.9165C112.945 90.8939 112.963 90.8713 112.981 90.8487C113.008 90.8124 113.046 90.783 113.096 90.7604C113.16 90.7378 113.232 90.7264 113.314 90.7264C113.4 90.7264 113.474 90.7378 113.538 90.7604C113.587 90.783 113.626 90.8124 113.653 90.8487C113.685 90.8894 113.719 90.9369 113.755 90.9912C113.782 91.0365 113.807 91.0886 113.83 91.1474C113.839 91.1791 113.85 91.2062 113.864 91.2289C113.877 91.2515 113.888 91.2764 113.897 91.3036L113.938 91.4122L115.35 94.8885C115.35 94.8885 115.357 94.9088 115.371 94.9496C115.384 94.9903 115.396 95.031 115.405 95.0718ZM113.796 93.4083C113.737 93.2771 113.676 93.1413 113.612 93.0009C113.553 92.8606 113.49 92.7181 113.422 92.5732C113.404 92.5325 113.386 92.4917 113.368 92.451C113.35 92.4057 113.332 92.3627 113.314 92.322C113.3 92.3627 113.284 92.4057 113.266 92.451C113.248 92.4917 113.23 92.5325 113.212 92.5732C113.144 92.7181 113.078 92.8606 113.015 93.0009C112.956 93.1413 112.897 93.2771 112.838 93.4083L112.716 93.7071H113.918L113.796 93.4083Z" fill="black"/>
-<path d="M110.659 95.0174C110.668 95.04 110.673 95.074 110.673 95.1193C110.673 95.16 110.673 95.1939 110.673 95.2211C110.673 95.2573 110.666 95.2913 110.652 95.3229C110.639 95.3546 110.621 95.384 110.598 95.4112C110.557 95.4655 110.499 95.5063 110.422 95.5334C110.313 95.5696 110.211 95.5877 110.116 95.5877C110.066 95.5923 110.014 95.5945 109.96 95.5945C109.906 95.5945 109.851 95.5991 109.797 95.6081H109.77C109.421 95.6126 109.061 95.6126 108.69 95.6081C108.6 95.6036 108.498 95.6036 108.385 95.6081C108.272 95.6172 108.161 95.6149 108.052 95.6013C107.943 95.5923 107.844 95.5674 107.753 95.5266C107.667 95.4814 107.606 95.4112 107.57 95.3162C107.561 95.2935 107.554 95.2732 107.55 95.255C107.545 95.2324 107.543 95.2098 107.543 95.1872C107.525 95.0333 107.518 94.8816 107.522 94.7322C107.527 94.5829 107.529 94.4358 107.529 94.2909L107.543 93.3064V92.3966C107.543 92.2337 107.543 92.0888 107.543 91.9621C107.547 91.8354 107.552 91.695 107.556 91.5411V91.5072C107.561 91.4619 107.563 91.4167 107.563 91.3714C107.568 91.3261 107.57 91.2809 107.57 91.2356C107.579 91.1315 107.604 91.0432 107.645 90.9708C107.672 90.9029 107.719 90.8486 107.787 90.8079C107.846 90.7671 107.916 90.7468 107.998 90.7468C108.029 90.7468 108.059 90.749 108.086 90.7536C108.118 90.7536 108.147 90.7558 108.174 90.7603C108.201 90.7649 108.226 90.7739 108.249 90.7875C108.276 90.8011 108.303 90.8192 108.33 90.8418C108.358 90.8735 108.382 90.912 108.405 90.9572C108.423 91.007 108.435 91.0568 108.439 91.1066C108.444 91.1383 108.448 91.1677 108.453 91.1949C108.457 91.222 108.459 91.2492 108.459 91.2764C108.45 91.3035 108.446 91.3307 108.446 91.3578C108.446 91.385 108.446 91.4099 108.446 91.4325V91.5547L108.419 94.7526L109.763 94.7662H110.082C110.109 94.7662 110.139 94.7685 110.17 94.773C110.202 94.773 110.234 94.7752 110.265 94.7798C110.302 94.7843 110.333 94.7888 110.361 94.7934C110.388 94.7979 110.415 94.8047 110.442 94.8137C110.492 94.8273 110.533 94.8499 110.564 94.8816C110.614 94.9269 110.646 94.9721 110.659 95.0174Z" fill="black"/>
-<path d="M106.491 91.1542C106.663 91.3126 106.789 91.5027 106.871 91.7245C106.952 91.9418 106.984 92.159 106.966 92.3763C106.948 92.5845 106.882 92.7769 106.769 92.9534C106.656 93.1254 106.484 93.2567 106.253 93.3472C106.072 93.4242 105.893 93.4785 105.717 93.5102C105.54 93.5418 105.345 93.5667 105.133 93.5848C105.038 93.5939 104.956 93.6007 104.888 93.6052C104.825 93.6052 104.75 93.6075 104.664 93.612C104.646 93.612 104.614 93.612 104.569 93.612C104.528 93.612 104.499 93.6143 104.481 93.6188V95.0242C104.467 95.1102 104.449 95.1985 104.427 95.289C104.409 95.3796 104.356 95.4497 104.27 95.4995C104.221 95.5267 104.16 95.5425 104.087 95.547C104.015 95.5516 103.949 95.5493 103.89 95.5402C103.827 95.5312 103.773 95.5153 103.727 95.4927C103.687 95.4656 103.653 95.4203 103.625 95.3569C103.607 95.3162 103.589 95.2709 103.571 95.2211C103.558 95.1668 103.551 95.1012 103.551 95.0242V91.2696C103.551 91.2379 103.553 91.2085 103.558 91.1813C103.562 91.1542 103.567 91.127 103.571 91.0999C103.58 91.0772 103.587 91.0523 103.592 91.0252C103.596 90.998 103.603 90.9731 103.612 90.9505C103.621 90.9278 103.63 90.9075 103.639 90.8894C103.653 90.8713 103.668 90.8554 103.687 90.8418C103.709 90.8192 103.743 90.7988 103.788 90.7807C103.838 90.7626 103.911 90.7536 104.006 90.7536H104.019C104.16 90.7445 104.316 90.7377 104.488 90.7332C104.66 90.7242 104.802 90.7264 104.915 90.74C104.979 90.7491 105.038 90.7558 105.092 90.7604C105.146 90.7604 105.198 90.7626 105.248 90.7672C105.302 90.7717 105.357 90.7762 105.411 90.7807C105.465 90.7853 105.52 90.7921 105.574 90.8011C105.619 90.8102 105.66 90.817 105.696 90.8215C105.737 90.826 105.778 90.8328 105.819 90.8418C105.855 90.8509 105.893 90.86 105.934 90.869C105.979 90.8781 106.02 90.8939 106.056 90.9165C106.151 90.9437 106.23 90.9776 106.294 91.0184C106.357 91.0591 106.423 91.1044 106.491 91.1542ZM106.083 92.2744C106.088 92.1658 106.065 92.0708 106.015 91.9893C105.97 91.9078 105.905 91.8399 105.819 91.7856C105.732 91.7313 105.635 91.6883 105.527 91.6566C105.418 91.6249 105.309 91.6023 105.201 91.5887C105.173 91.5887 105.135 91.5887 105.085 91.5887C105.04 91.5842 104.99 91.5819 104.936 91.5819C104.882 91.5774 104.829 91.5751 104.78 91.5751C104.734 91.5706 104.698 91.5683 104.671 91.5683C104.648 91.5638 104.621 91.5615 104.59 91.5615C104.558 91.5615 104.522 91.5615 104.481 91.5615C104.485 91.7019 104.488 91.8377 104.488 91.9689C104.488 92.0957 104.488 92.2337 104.488 92.3831C104.483 92.4646 104.481 92.546 104.481 92.6275C104.481 92.709 104.481 92.7882 104.481 92.8651L104.902 92.8584C105.011 92.8584 105.13 92.8516 105.262 92.838C105.393 92.8244 105.517 92.7972 105.635 92.7565C105.753 92.7158 105.852 92.6569 105.934 92.58C106.02 92.503 106.07 92.4012 106.083 92.2744Z" fill="black"/>
-<rect x="98.6731" y="23.4126" width="53.3122" height="3.3849" rx="1.69245" fill="#F2A632" fill-opacity="0.2" stroke="#FFAB49" stroke-width="0.282075"/>
-<rect x="98.5321" y="23.2716" width="36.0356" height="3.66698" rx="1.83349" fill="#F2A632" fill-opacity="0.7"/>
-<rect x="48.4638" y="105.214" width="53.3122" height="3.3849" rx="1.69245" fill="#32F28B" fill-opacity="0.2" stroke="#49FF92" stroke-width="0.282075"/>
-<rect x="48.3228" y="105.073" width="19.7453" height="3.66698" rx="1.83349" fill="#32F296" fill-opacity="0.7"/>
-<line x1="145.498" y1="58.3898" x2="145.498" y2="74.1861" stroke="#E27526" stroke-opacity="0.3" stroke-width="0.846226" stroke-linecap="round"/>
-<circle cx="145.498" cy="65.4417" r="1.55141" fill="#F57600"/>
-<line x1="149.729" y1="58.3898" x2="149.729" y2="74.1861" stroke="#E27526" stroke-opacity="0.3" stroke-width="0.846226" stroke-linecap="round"/>
-<circle cx="149.729" cy="69.3908" r="1.55141" fill="#F57600"/>
-<line x1="153.96" y1="58.3898" x2="153.96" y2="74.1861" stroke="#E27526" stroke-opacity="0.3" stroke-width="0.846226" stroke-linecap="round"/>
-<circle cx="153.96" cy="61.7747" r="1.55141" fill="#F57600"/>
-<defs>
-<filter id="filter0_f_1723_288" x="22.9362" y="0.14146" width="153.167" height="127.216" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="16.0783" result="effect1_foregroundBlur_1723_288"/>
-</filter>
-<filter id="filter1_f_1723_288" x="0.0877781" y="113.536" width="78.4169" height="13.2575" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="2.39764" result="effect1_foregroundBlur_1723_288"/>
-</filter>
-<linearGradient id="paint0_linear_1723_288" x1="69.2988" y1="70.2936" x2="53.2572" y2="80.7628" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E04D40"/>
-<stop offset="1" stop-color="#F15F56"/>
-</linearGradient>
-<linearGradient id="paint1_linear_1723_288" x1="68.491" y1="55.4282" x2="27.026" y2="105.638" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FB9782"/>
-<stop offset="0.302083" stop-color="#F46639"/>
-<stop offset="0.760417" stop-color="#F44C3C"/>
-</linearGradient>
-<linearGradient id="paint2_linear_1723_288" x1="54.6971" y1="70.4947" x2="38.6555" y2="80.9639" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FF6F66"/>
-<stop offset="1" stop-color="#EF6058"/>
-</linearGradient>
-<linearGradient id="paint3_linear_1723_288" x1="36.6587" y1="118.169" x2="36.6629" y2="98.7046" gradientUnits="userSpaceOnUse">
-<stop stop-color="#DA4639"/>
-<stop offset="1" stop-color="#EC5B4F"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/newIDE/app/src/AssetStore/AssetStoreContext.js b/newIDE/app/src/AssetStore/AssetStoreContext.js
index 31743c3a60ae..b70276616753 100644
--- a/newIDE/app/src/AssetStore/AssetStoreContext.js
+++ b/newIDE/app/src/AssetStore/AssetStoreContext.js
@@ -134,7 +134,6 @@ export const initialAssetStoreState: AssetStoreState = {
   shopNavigationState: {
     getCurrentPage: () => assetStoreHomePageState,
     isRootPage: true,
-    isAssetSwappingHistory: false,
     backToPreviousPage: () => assetStoreHomePageState,
     openHome: () => assetStoreHomePageState,
     openAssetSwapping: () => assetStoreHomePageState,
diff --git a/newIDE/app/src/AssetStore/AssetStoreNavigator.js b/newIDE/app/src/AssetStore/AssetStoreNavigator.js
index 3c72fa116dd6..4f97cfe68a21 100644
--- a/newIDE/app/src/AssetStore/AssetStoreNavigator.js
+++ b/newIDE/app/src/AssetStore/AssetStoreNavigator.js
@@ -28,7 +28,6 @@ export type AssetStorePageState = {|
 export type NavigationState = {|
   getCurrentPage: () => AssetStorePageState,
   isRootPage: boolean,
-  isAssetSwappingHistory: boolean,
   backToPreviousPage: () => AssetStorePageState,
   openHome: () => AssetStorePageState,
   openAssetSwapping: () => AssetStorePageState,
@@ -122,7 +121,6 @@ export const useShopNavigation = (): NavigationState => {
     () => ({
       getCurrentPage: () => previousPages[previousPages.length - 1],
       isRootPage: previousPages.length <= 1,
-      isAssetSwappingHistory: !isHomePage(previousPages[0]),
       backToPreviousPage: () => {
         if (previousPages.length > 1) {
           const newPreviousPages = previousPages.slice(
diff --git a/newIDE/app/src/AssetStore/AssetSwappingDialog.js b/newIDE/app/src/AssetStore/AssetSwappingDialog.js
index 6fa0b697a6c1..3e679b2108e3 100644
--- a/newIDE/app/src/AssetStore/AssetSwappingDialog.js
+++ b/newIDE/app/src/AssetStore/AssetSwappingDialog.js
@@ -1,21 +1,19 @@
 // @flow
-import { Trans } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import { I18n } from '@lingui/react';
 import * as React from 'react';
 import Dialog from '../UI/Dialog';
 import FlatButton from '../UI/FlatButton';
 import { AssetStore, type AssetStoreInterface } from '.';
 import { type ResourceManagementProps } from '../ResourcesList/ResourceSource';
-import RaisedButton from '../UI/RaisedButton';
 import { AssetStoreContext } from './AssetStoreContext';
-import Window from '../Utils/Window';
 import ErrorBoundary from '../UI/ErrorBoundary';
 import LoaderModal from '../UI/LoaderModal';
 import { useInstallAsset } from './NewObjectDialog';
 import { swapAsset } from './AssetSwapper';
 import PixiResourcesLoader from '../ObjectsRendering/PixiResourcesLoader';
-
-const isDev = Window.isDev();
+import useAlertDialog from '../UI/Alert/useAlertDialog';
+import RaisedButton from '../UI/RaisedButton';
 
 type Props = {|
   project: gdProject,
@@ -25,6 +23,8 @@ type Props = {|
   object: gdObject,
   resourceManagementProps: ResourceManagementProps,
   onClose: ({ swappingDone: boolean }) => void,
+  // Use minimal UI to hide filters & the details page (useful for Quick Customization)
+  minimalUI?: boolean,
 |};
 
 function AssetSwappingDialog({
@@ -35,10 +35,9 @@ function AssetSwappingDialog({
   object,
   resourceManagementProps,
   onClose,
+  minimalUI,
 }: Props) {
-  const { shopNavigationState, environment, setEnvironment } = React.useContext(
-    AssetStoreContext
-  );
+  const { shopNavigationState } = React.useContext(AssetStoreContext);
   const { openedAssetShortHeader } = shopNavigationState.getCurrentPage();
 
   const [
@@ -50,33 +49,44 @@ function AssetSwappingDialog({
     objectsContainer,
     resourceManagementProps,
   });
+  const { showAlert } = useAlertDialog();
 
-  const onInstallOpenedAsset = React.useCallback(
+  const installOpenedAsset = React.useCallback(
     async (): Promise<void> => {
       if (!openedAssetShortHeader) return;
 
       setIsAssetBeingInstalled(true);
-      const installAssetOutput = await installAsset(openedAssetShortHeader);
-      if (!installAssetOutput) {
-        setIsAssetBeingInstalled(false);
-        return;
-      }
+      try {
+        const installAssetOutput = await installAsset(openedAssetShortHeader);
+        if (!installAssetOutput) {
+          throw new Error('Failed to install asset');
+        }
 
-      if (installAssetOutput.createdObjects.length > 0) {
-        swapAsset(
-          project,
-          PixiResourcesLoader,
-          object,
-          installAssetOutput.createdObjects[0],
-          openedAssetShortHeader
-        );
-      }
-      for (const createdObject of installAssetOutput.createdObjects) {
-        objectsContainer.removeObject(createdObject.getName());
-      }
+        if (installAssetOutput.createdObjects.length > 0) {
+          swapAsset(
+            project,
+            PixiResourcesLoader,
+            object,
+            installAssetOutput.createdObjects[0],
+            openedAssetShortHeader
+          );
+        }
+        for (const createdObject of installAssetOutput.createdObjects) {
+          objectsContainer.removeObject(createdObject.getName());
+        }
 
-      setIsAssetBeingInstalled(false);
-      onClose({ swappingDone: true });
+        onClose({ swappingDone: true });
+      } catch (err) {
+        showAlert({
+          title: t`Could not swap asset`,
+          message: t`Something went wrong while swapping the asset. Please try again.`,
+        });
+        console.error('Error while installing asset:', err);
+      } finally {
+        // Always go back to the previous page so the asset is unselected.
+        shopNavigationState.backToPreviousPage();
+        setIsAssetBeingInstalled(false);
+      }
     },
     [
       installAsset,
@@ -85,35 +95,36 @@ function AssetSwappingDialog({
       objectsContainer,
       openedAssetShortHeader,
       onClose,
+      shopNavigationState,
+      showAlert,
     ]
   );
 
-  const mainAction = openedAssetShortHeader ? (
-    <RaisedButton
-      key="add-asset"
-      primary
-      label={
-        isAssetBeingInstalled ? <Trans>Adding...</Trans> : <Trans>Swap</Trans>
-      }
-      onClick={onInstallOpenedAsset}
-      disabled={isAssetBeingInstalled}
-      id="swap-asset-button"
-    />
-  ) : isDev ? (
-    <RaisedButton
-      key="show-dev-assets"
-      label={
-        environment === 'staging' ? (
-          <Trans>Show live assets</Trans>
-        ) : (
-          <Trans>Show staging assets</Trans>
-        )
+  const mainAction =
+    openedAssetShortHeader && !minimalUI ? (
+      <RaisedButton
+        key="add-asset"
+        primary
+        label={
+          isAssetBeingInstalled ? <Trans>Adding...</Trans> : <Trans>Swap</Trans>
+        }
+        onClick={installOpenedAsset}
+        disabled={isAssetBeingInstalled}
+        id="swap-asset-button"
+      />
+    ) : null;
+
+  // Try to install the asset as soon as selected, if in minimal UI mode.
+  React.useEffect(
+    () => {
+      if (openedAssetShortHeader && !isAssetBeingInstalled && minimalUI) {
+        installOpenedAsset();
       }
-      onClick={() => {
-        setEnvironment(environment === 'staging' ? 'live' : 'staging');
-      }}
-    />
-  ) : null;
+    },
+    // Only run when the asset is selected and not already being installed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isAssetBeingInstalled, openedAssetShortHeader]
+  );
 
   const assetStore = React.useRef<?AssetStoreInterface>(null);
   const handleClose = React.useCallback(
@@ -130,27 +141,30 @@ function AssetSwappingDialog({
         <>
           <Dialog
             title={<Trans>Swap {object.getName()} with another asset</Trans>}
-            actions={[
+            actions={[mainAction]}
+            secondaryActions={[
               <FlatButton
                 key="close"
                 label={<Trans>Back</Trans>}
-                primary={false}
                 onClick={handleClose}
                 id="close-button"
+                fullWidth
+                primary
               />,
-              mainAction,
             ]}
+            onApply={minimalUI ? undefined : installOpenedAsset}
             onRequestClose={handleClose}
-            onApply={onInstallOpenedAsset}
             open
             flexBody
             fullHeight
             id="asset-swapping-dialog"
+            actionsFullWidthOnMobile
           >
             <AssetStore
               ref={assetStore}
               hideGameTemplates
               assetSwappedObject={object}
+              minimalUI={minimalUI}
             />
           </Dialog>
           {isAssetBeingInstalled && <LoaderModal show={true} />}
diff --git a/newIDE/app/src/AssetStore/AssetsList.js b/newIDE/app/src/AssetStore/AssetsList.js
index 2e68d40175c4..667223554d0c 100644
--- a/newIDE/app/src/AssetStore/AssetsList.js
+++ b/newIDE/app/src/AssetStore/AssetsList.js
@@ -48,7 +48,6 @@ import Breadcrumbs from '../UI/Breadcrumbs';
 import { getFolderTagsFromAssetShortHeaders } from './TagsHelper';
 import { PrivateGameTemplateStoreContext } from './PrivateGameTemplates/PrivateGameTemplateStoreContext';
 import { type AssetStorePageState } from './AssetStoreNavigator';
-import RaisedButton from '../UI/RaisedButton';
 import FlatButton from '../UI/FlatButton';
 import HelpIcon from '../UI/HelpIcon';
 import { OwnedProductLicense } from './ProductLicense/ProductLicenseOptions';
@@ -202,9 +201,8 @@ const PageBreakNavigation = ({
           }}
           disabled={pageBreakIndex <= 0}
         />
-        <RaisedButton
+        <FlatButton
           key="next-assets"
-          primary
           label={<Trans>Show next assets</Trans>}
           onClick={() => {
             currentPage.pageBreakIndex = (currentPage.pageBreakIndex || 0) + 1;
diff --git a/newIDE/app/src/AssetStore/ShopTiles.js b/newIDE/app/src/AssetStore/ShopTiles.js
index eba9eff670c0..c7e4e373da1f 100644
--- a/newIDE/app/src/AssetStore/ShopTiles.js
+++ b/newIDE/app/src/AssetStore/ShopTiles.js
@@ -522,13 +522,24 @@ export const ExampleTile = ({
   onSelect,
   style,
   customTitle,
+  useQuickCustomizationThumbnail,
 }: {|
   exampleShortHeader: ExampleShortHeader | null,
   onSelect: () => void,
   /** Props needed so that GridList component can adjust tile size */
   style?: any,
   customTitle?: string,
+  useQuickCustomizationThumbnail?: boolean,
 |}) => {
+  const thumbnailImgUrl = exampleShortHeader
+    ? useQuickCustomizationThumbnail
+      ? exampleShortHeader.quickCustomizationImageUrl
+        ? exampleShortHeader.quickCustomizationImageUrl
+        : exampleShortHeader.previewImageUrls
+        ? exampleShortHeader.previewImageUrls[0]
+        : ''
+      : ''
+    : '';
   const classesForGridListItem = useStylesForGridListItem();
   return (
     <GridListTile
@@ -547,11 +558,7 @@ export const ExampleTile = ({
           <CorsAwareImage
             key={exampleShortHeader.name}
             style={styles.previewImage}
-            src={
-              exampleShortHeader.previewImageUrls
-                ? exampleShortHeader.previewImageUrls[0]
-                : ''
-            }
+            src={thumbnailImgUrl}
             alt={`Preview image of example ${exampleShortHeader.name}`}
           />
         ) : (
diff --git a/newIDE/app/src/AssetStore/index.js b/newIDE/app/src/AssetStore/index.js
index dd408354ac9b..cacd0040a61c 100644
--- a/newIDE/app/src/AssetStore/index.js
+++ b/newIDE/app/src/AssetStore/index.js
@@ -65,6 +65,7 @@ type Props = {|
   ) => void,
   onOpenProfile?: () => void,
   assetSwappedObject?: ?gdObject,
+  minimalUI?: boolean,
 |};
 
 export type AssetStoreInterface = {|
@@ -104,6 +105,7 @@ export const AssetStore = React.forwardRef<Props, AssetStoreInterface>(
       onOpenPrivateGameTemplateListingData,
       onOpenProfile,
       assetSwappedObject,
+      minimalUI,
     }: Props,
     ref
   ) => {
@@ -147,11 +149,6 @@ export const AssetStore = React.forwardRef<Props, AssetStoreInterface>(
             }
           }
           assetSwappedObjectPtr.current = assetSwappedObject.ptr;
-        } else if (shopNavigationState.isAssetSwappingHistory) {
-          shopNavigationState.openHome();
-          assetFiltersState.setAssetSwappingFilter(
-            new AssetSwappingAssetStoreSearchFilter()
-          );
         }
       },
       [
@@ -600,129 +597,138 @@ export const AssetStore = React.forwardRef<Props, AssetStoreInterface>(
 
     return (
       <Column expand noMargin useFullHeight noOverflowParent id="asset-store">
-        <LineStackLayout>
-          <IconButton
-            id="home-button"
-            key="back-discover"
-            tooltip={t`Back to discover`}
-            onClick={() => {
-              setSearchText('');
-              const page = assetSwappedObject
-                ? shopNavigationState.openAssetSwapping()
-                : shopNavigationState.openHome();
-              setScrollUpdateIsNeeded(page);
-              clearAllAssetStoreFilters();
-              setIsFiltersPanelOpen(false);
-            }}
-            size="small"
-          >
-            <Home />
-          </IconButton>
-          <Column expand useFullHeight noMargin>
-            <SearchBar
-              placeholder={
-                hideGameTemplates ? t`Search assets` : `Search the shop`
-              }
-              value={searchText}
-              onChange={(newValue: string) => {
-                if (searchText === newValue) {
-                  return;
+        <>
+          <LineStackLayout>
+            {!(assetSwappedObject && minimalUI) && (
+              <IconButton
+                id="home-button"
+                key="back-discover"
+                tooltip={t`Back to discover`}
+                onClick={() => {
+                  setSearchText('');
+                  const page = assetSwappedObject
+                    ? shopNavigationState.openAssetSwapping()
+                    : shopNavigationState.openHome();
+                  setScrollUpdateIsNeeded(page);
+                  clearAllAssetStoreFilters();
+                  setIsFiltersPanelOpen(false);
+                }}
+                size="small"
+              >
+                <Home />
+              </IconButton>
+            )}
+            <Column expand useFullHeight noMargin>
+              <SearchBar
+                placeholder={
+                  hideGameTemplates ? t`Search assets` : `Search the shop`
                 }
-                setSearchText(newValue);
-                if (isOnSearchResultPage) {
-                  // An existing search is already being done: just move to the
-                  // top search results.
-                  shopNavigationState.openSearchResultPage();
-                  const assetsListInterface = assetsList.current;
-                  if (assetsListInterface) {
-                    assetsListInterface.scrollToPosition(0);
-                    assetsListInterface.setPageBreakIndex(0);
+                value={searchText}
+                onChange={(newValue: string) => {
+                  if (searchText === newValue) {
+                    return;
                   }
-                } else {
-                  // A new search is being initiated: navigate to the search page,
-                  // and clear the history as a new search was launched.
-                  if (!!newValue) {
-                    shopNavigationState.clearHistory();
+                  setSearchText(newValue);
+                  if (isOnSearchResultPage) {
+                    // An existing search is already being done: just move to the
+                    // top search results.
                     shopNavigationState.openSearchResultPage();
-                    openFiltersPanelIfAppropriate();
+                    const assetsListInterface = assetsList.current;
+                    if (assetsListInterface) {
+                      assetsListInterface.scrollToPosition(0);
+                      assetsListInterface.setPageBreakIndex(0);
+                    }
+                  } else {
+                    // A new search is being initiated: navigate to the search page,
+                    // and clear the history as a new search was launched.
+                    if (!!newValue) {
+                      shopNavigationState.clearHistory();
+                      shopNavigationState.openSearchResultPage();
+                      openFiltersPanelIfAppropriate();
+                    }
                   }
-                }
-              }}
-              onRequestSearch={() => {}}
-              ref={searchBar}
-              id="asset-store-search-bar"
-            />
-          </Column>
-          <IconButton
-            onClick={() => setIsFiltersPanelOpen(!isFiltersPanelOpen)}
-            disabled={!canShowFiltersPanel}
-            selected={canShowFiltersPanel && isFiltersPanelOpen}
-            size="small"
-          >
-            <Tune />
-          </IconButton>
-        </LineStackLayout>
-        <Spacer />
+                }}
+                onRequestSearch={() => {}}
+                ref={searchBar}
+                id="asset-store-search-bar"
+              />
+            </Column>
+            {!(assetSwappedObject && minimalUI) && (
+              <IconButton
+                onClick={() => setIsFiltersPanelOpen(!isFiltersPanelOpen)}
+                disabled={!canShowFiltersPanel}
+                selected={canShowFiltersPanel && isFiltersPanelOpen}
+                size="small"
+              >
+                <Tune />
+              </IconButton>
+            )}
+          </LineStackLayout>
+          <Spacer />
+        </>
         <Column noMargin>
           <Line justifyContent="space-between" noMargin alignItems="center">
-            {(!isOnHomePage || !!openedShopCategory) && (
-              <>
-                {shopNavigationState.isRootPage ? null : (
-                  <Column expand alignItems="flex-start" noMargin>
-                    <TextButton
-                      icon={<ChevronArrowLeft />}
-                      label={<Trans>Back</Trans>}
-                      onClick={async () => {
-                        const page = shopNavigationState.backToPreviousPage();
-                        const isUpdatingSearchtext = reApplySearchTextIfNeeded(
-                          page
-                        );
-                        if (isUpdatingSearchtext) {
-                          // Updating the search is not instant, so we cannot apply the scroll position
-                          // right away. We force a wait as there's no easy way to know when results are completely updated.
-                          await delay(500);
-                          setScrollUpdateIsNeeded(page);
-                          applyBackScrollPosition(page); // We apply it manually, because the layout effect won't be called again.
-                        } else {
-                          setScrollUpdateIsNeeded(page);
-                        }
-                      }}
-                    />
-                  </Column>
-                )}
-                {(openedAssetPack ||
-                  openedPrivateAssetPackListingData ||
-                  filtersState.chosenCategory) && (
-                  <>
-                    {!openedAssetPack && !openedPrivateAssetPackListingData && (
-                      // Only show the category name if we're not on an asset pack page.
-                      <Column expand alignItems="center">
-                        <Text size="block-title" noMargin>
-                          {filtersState.chosenCategory
-                            ? capitalize(filtersState.chosenCategory.node.name)
-                            : ''}
-                        </Text>
-                      </Column>
-                    )}
-                    <Column
-                      expand
-                      alignItems="flex-end"
-                      noMargin
-                      justifyContent="center"
-                    >
-                      {openedAssetPack &&
-                      openedAssetPack.content &&
-                      doesAssetPackContainAudio(openedAssetPack) &&
-                      !isAssetPackAudioOnly(openedAssetPack) ? (
-                        <PrivateAssetPackAudioFilesDownloadButton
-                          assetPack={openedAssetPack}
-                        />
-                      ) : null}
+            {(!isOnHomePage || !!openedShopCategory) &&
+              !(assetSwappedObject && minimalUI) && (
+                <>
+                  {shopNavigationState.isRootPage ? null : (
+                    <Column expand alignItems="flex-start" noMargin>
+                      <TextButton
+                        icon={<ChevronArrowLeft />}
+                        label={<Trans>Back</Trans>}
+                        onClick={async () => {
+                          const page = shopNavigationState.backToPreviousPage();
+                          const isUpdatingSearchtext = reApplySearchTextIfNeeded(
+                            page
+                          );
+                          if (isUpdatingSearchtext) {
+                            // Updating the search is not instant, so we cannot apply the scroll position
+                            // right away. We force a wait as there's no easy way to know when results are completely updated.
+                            await delay(500);
+                            setScrollUpdateIsNeeded(page);
+                            applyBackScrollPosition(page); // We apply it manually, because the layout effect won't be called again.
+                          } else {
+                            setScrollUpdateIsNeeded(page);
+                          }
+                        }}
+                      />
                     </Column>
-                  </>
-                )}
-              </>
-            )}
+                  )}
+                  {(openedAssetPack ||
+                    openedPrivateAssetPackListingData ||
+                    filtersState.chosenCategory) && (
+                    <>
+                      {!openedAssetPack && !openedPrivateAssetPackListingData && (
+                        // Only show the category name if we're not on an asset pack page.
+                        <Column expand alignItems="center">
+                          <Text size="block-title" noMargin>
+                            {filtersState.chosenCategory
+                              ? capitalize(
+                                  filtersState.chosenCategory.node.name
+                                )
+                              : ''}
+                          </Text>
+                        </Column>
+                      )}
+                      <Column
+                        expand
+                        alignItems="flex-end"
+                        noMargin
+                        justifyContent="center"
+                      >
+                        {openedAssetPack &&
+                        openedAssetPack.content &&
+                        doesAssetPackContainAudio(openedAssetPack) &&
+                        !isAssetPackAudioOnly(openedAssetPack) ? (
+                          <PrivateAssetPackAudioFilesDownloadButton
+                            assetPack={openedAssetPack}
+                          />
+                        ) : null}
+                      </Column>
+                    </>
+                  )}
+                </>
+              )}
           </Line>
         </Column>
         <Line
@@ -790,9 +796,10 @@ export const AssetStore = React.forwardRef<Props, AssetStoreInterface>(
               onGoBackToFolderIndex={goBackToFolderIndex}
               currentPage={shopNavigationState.getCurrentPage()}
               hideGameTemplates={hideGameTemplates}
-              hideDetails={!!assetSwappedObject}
+              hideDetails={!!assetSwappedObject && !!minimalUI}
             />
-          ) : openedAssetShortHeader ? (
+          ) : // Do not show the asset details if we're swapping an asset.
+          openedAssetShortHeader && !(assetSwappedObject && minimalUI) ? (
             <AssetDetails
               ref={assetDetails}
               onTagSelection={selectTag}
diff --git a/newIDE/app/src/BehaviorsEditor/index.js b/newIDE/app/src/BehaviorsEditor/index.js
index 6ee8d8fa680a..27c3d9689859 100644
--- a/newIDE/app/src/BehaviorsEditor/index.js
+++ b/newIDE/app/src/BehaviorsEditor/index.js
@@ -44,6 +44,7 @@ import PasteIcon from '../UI/CustomSvgIcons/Clipboard';
 import CopyIcon from '../UI/CustomSvgIcons/Copy';
 import ResponsiveFlatButton from '../UI/ResponsiveFlatButton';
 import { useResponsiveWindowSize } from '../UI/Responsive/ResponsiveWindowMeasurer';
+import QuickCustomizationPropertiesVisibilityDialog from '../QuickCustomization/QuickCustomizationPropertiesVisibilityDialog';
 
 const gd: libGDevelop = global.gd;
 
@@ -76,6 +77,9 @@ type BehaviorConfigurationEditorProps = {|
   canPasteBehaviors: boolean,
   pasteBehaviors: () => Promise<void>,
   openExtension: (behaviorType: string) => void,
+  openBehaviorPropertiesQuickCustomizationDialog: (
+    behaviorName: string
+  ) => void,
 |};
 
 const BehaviorConfigurationEditor = React.forwardRef<
@@ -95,6 +99,7 @@ const BehaviorConfigurationEditor = React.forwardRef<
       canPasteBehaviors,
       pasteBehaviors,
       openExtension,
+      openBehaviorPropertiesQuickCustomizationDialog,
     },
     ref
   ) => {
@@ -209,6 +214,18 @@ const BehaviorConfigurationEditor = React.forwardRef<
                       },
                     ]
                   : []),
+                ...(!Window.isDev()
+                  ? []
+                  : [
+                      { type: 'separator' },
+                      {
+                        label: i18n._(t`Quick Customization settings`),
+                        click: () =>
+                          openBehaviorPropertiesQuickCustomizationDialog(
+                            behaviorName
+                          ),
+                      },
+                    ]),
               ]}
             />,
           ]}
@@ -608,6 +625,11 @@ const BehaviorsEditor = (props: Props) => {
   } = props;
   const forceUpdate = useForceUpdate();
 
+  const [
+    selectedQuickCustomizationPropertiesBehavior,
+    setSelectedQuickCustomizationPropertiesBehavior,
+  ] = React.useState<?gdBehavior>(null);
+
   const {
     changeBehaviorName,
     removeBehavior,
@@ -671,6 +693,16 @@ const BehaviorsEditor = (props: Props) => {
     [openBehaviorEvents, project]
   );
 
+  const openBehaviorPropertiesQuickCustomizationDialog = React.useCallback(
+    (behaviorName: string) => {
+      if (!object.hasBehaviorNamed(behaviorName)) return;
+      const behavior = object.getBehavior(behaviorName);
+
+      setSelectedQuickCustomizationPropertiesBehavior(behavior);
+    },
+    [object]
+  );
+
   const isClipboardContainingBehaviors = Clipboard.has(
     BEHAVIORS_CLIPBOARD_KIND
   );
@@ -725,6 +757,9 @@ const BehaviorsEditor = (props: Props) => {
                   onBehaviorsUpdated={onBehaviorsUpdated}
                   onChangeBehaviorName={changeBehaviorName}
                   openExtension={openExtension}
+                  openBehaviorPropertiesQuickCustomizationDialog={
+                    openBehaviorPropertiesQuickCustomizationDialog
+                  }
                   canPasteBehaviors={isClipboardContainingBehaviors}
                   pasteBehaviors={pasteBehaviors}
                   resourceManagementProps={props.resourceManagementProps}
@@ -780,6 +815,17 @@ const BehaviorsEditor = (props: Props) => {
         </React.Fragment>
       )}
       {newBehaviorDialog}
+      {!!selectedQuickCustomizationPropertiesBehavior && (
+        <QuickCustomizationPropertiesVisibilityDialog
+          open={!!selectedQuickCustomizationPropertiesBehavior}
+          onClose={() => setSelectedQuickCustomizationPropertiesBehavior(null)}
+          propertyNames={selectedQuickCustomizationPropertiesBehavior
+            .getProperties()
+            .keys()
+            .toJSArray()}
+          propertiesQuickCustomizationVisibilities={selectedQuickCustomizationPropertiesBehavior.getPropertiesQuickCustomizationVisibilities()}
+        />
+      )}
     </Column>
   );
 };
diff --git a/newIDE/app/src/CompactPropertiesEditor/PropertiesMapToCompactSchema.js b/newIDE/app/src/CompactPropertiesEditor/PropertiesMapToCompactSchema.js
index 279461f597ce..a3f72ee80b2a 100644
--- a/newIDE/app/src/CompactPropertiesEditor/PropertiesMapToCompactSchema.js
+++ b/newIDE/app/src/CompactPropertiesEditor/PropertiesMapToCompactSchema.js
@@ -165,13 +165,10 @@ const createField = (
     const extraInfos = property.getExtraInfo().toJSArray();
     // $FlowFixMe - assume the passed resource kind is always valid.
     const kind: ResourceKind = extraInfos[0] || '';
-    // $FlowFixMe - assume the passed resource kind is always valid.
-    const fallbackKind: ResourceKind = extraInfos[1] || '';
     return {
       name,
       valueType: 'resource',
       resourceKind: kind,
-      fallbackResourceKind: fallbackKind,
       getValue: (instance: Instance): string => {
         return getProperties(instance)
           .get(name)
@@ -257,11 +254,17 @@ const uncapitalize = str => {
  * @param visibility `true` when only deprecated properties must be displayed
  * and `false` when only not deprecated ones must be displayed
  */
-const isPropertyVisible = (
+const isPropertyVisible = ({
+  properties,
+  name,
+  visibility,
+  quickCustomizationVisibilities,
+}: {
   properties: gdMapStringPropertyDescriptor,
   name: string,
-  visibility: 'All' | 'Basic' | 'Advanced' | 'Deprecated' | 'Basic-Quick'
-): boolean => {
+  visibility: 'All' | 'Basic' | 'Advanced' | 'Deprecated' | 'Basic-Quick',
+  quickCustomizationVisibilities?: gdQuickCustomizationVisibilitiesContainer,
+}): boolean => {
   if (!properties.has(name)) {
     return false;
   }
@@ -286,7 +289,7 @@ const isPropertyVisible = (
     if (property.isDeprecated()) return false;
     if (property.isAdvanced()) return false;
 
-    // Honor visibility if set:
+    // Honor visibility if set on the property.
     if (
       property.getQuickCustomizationVisibility() ===
       gd.QuickCustomization.Hidden
@@ -298,6 +301,13 @@ const isPropertyVisible = (
     )
       return true;
 
+    // Honor visibility if set on the container.
+    if (quickCustomizationVisibilities) {
+      const visibility = quickCustomizationVisibilities.get(name);
+      if (visibility === gd.QuickCustomization.Hidden) return false;
+      if (visibility === gd.QuickCustomization.Visible) return true;
+    }
+
     // Otherwise, hide some properties that we know are complex.
     const propertyType = property.getType();
     if (propertyType === 'Behavior') return false; // Hide "required behaviors".
@@ -315,7 +325,14 @@ const isPropertyVisible = (
  * @param getProperties The function called to read again the properties
  * @param onUpdateProperty The function called to update a property of an object
  */
-const propertiesMapToSchema = (
+const propertiesMapToSchema = ({
+  properties,
+  getProperties,
+  onUpdateProperty,
+  object,
+  visibility = 'All',
+  quickCustomizationVisibilities,
+}: {
   properties: gdMapStringPropertyDescriptor,
   getProperties: (instance: Instance) => any,
   onUpdateProperty: (
@@ -323,14 +340,10 @@ const propertiesMapToSchema = (
     propertyName: string,
     newValue: string
   ) => void,
-  object: ?gdObject,
-  visibility:
-    | 'All'
-    | 'Basic'
-    | 'Advanced'
-    | 'Deprecated'
-    | 'Basic-Quick' = 'All'
-): Schema => {
+  object?: gdObject,
+  visibility?: 'All' | 'Basic' | 'Advanced' | 'Deprecated' | 'Basic-Quick',
+  quickCustomizationVisibilities?: gdQuickCustomizationVisibilitiesContainer,
+}): Schema => {
   const propertyNames = properties.keys();
   // Aggregate field by groups to be able to build field groups with a title.
   const fieldsByGroups = new Map<string, Array<Field>>();
@@ -338,7 +351,14 @@ const propertiesMapToSchema = (
   mapFor(0, propertyNames.size(), i => {
     const name = propertyNames.at(i);
     const property = properties.get(name);
-    if (!isPropertyVisible(properties, name, visibility)) {
+    if (
+      !isPropertyVisible({
+        properties,
+        name,
+        visibility,
+        quickCustomizationVisibilities,
+      })
+    ) {
       return null;
     }
     if (alreadyHandledProperties.has(name)) return null;
@@ -362,7 +382,14 @@ const propertiesMapToSchema = (
             name.replace(keyword, otherKeyword)
           );
           for (const rowPropertyName of rowAllPropertyNames) {
-            if (isPropertyVisible(properties, rowPropertyName, visibility)) {
+            if (
+              isPropertyVisible({
+                properties,
+                name: rowPropertyName,
+                visibility,
+                quickCustomizationVisibilities,
+              })
+            ) {
               rowPropertyNames.push(rowPropertyName);
             }
           }
@@ -373,7 +400,14 @@ const propertiesMapToSchema = (
             name.replace(uncapitalizeKeyword, uncapitalize(otherKeyword))
           );
           for (const rowPropertyName of rowAllPropertyNames) {
-            if (isPropertyVisible(properties, rowPropertyName, visibility)) {
+            if (
+              isPropertyVisible({
+                properties,
+                name: rowPropertyName,
+                visibility,
+                quickCustomizationVisibilities,
+              })
+            ) {
               rowPropertyNames.push(rowPropertyName);
             }
           }
diff --git a/newIDE/app/src/CompactPropertiesEditor/index.js b/newIDE/app/src/CompactPropertiesEditor/index.js
index 9e67e7955173..70ddfccf2b02 100644
--- a/newIDE/app/src/CompactPropertiesEditor/index.js
+++ b/newIDE/app/src/CompactPropertiesEditor/index.js
@@ -116,7 +116,6 @@ export type PrimitiveValueField =
 export type ResourceField = {|
   valueType: 'resource',
   resourceKind: ResourceKind,
-  fallbackResourceKind?: ResourceKind,
   getValue: Instance => string,
   setValue: (instance: Instance, newValue: string) => void,
   renderLeftIcon?: (className?: string) => React.Node,
@@ -231,8 +230,6 @@ const styles = {
   },
   container: { flex: 1, minWidth: 0 },
   separator: {
-    marginRight: -marginsSize,
-    marginLeft: -marginsSize,
     marginTop: marginsSize,
     borderTop: '1px solid black', // Border color is changed in the component.
   },
@@ -420,21 +417,26 @@ const CompactPropertiesEditor = ({
         const { setValue } = field;
 
         return (
-          <CompactToggleField
+          <CompactPropertiesEditorRowField
+            key={field.name}
             label={getFieldLabel({ instances, field })}
             markdownDescription={getFieldDescription(field)}
-            key={field.name}
-            id={field.name}
-            checked={getFieldValue({ instances, field })}
-            onCheck={newValue => {
-              instances.forEach(i => setValue(i, newValue));
-              onFieldChanged({
-                instances,
-                hasImpactOnAllOtherFields: field.hasImpactOnAllOtherFields,
-              });
-            }}
-            disabled={getDisabled({ instances, field })}
-            fullWidth
+            field={
+              <CompactToggleField
+                key={field.name}
+                id={field.name}
+                checked={getFieldValue({ instances, field })}
+                onCheck={newValue => {
+                  instances.forEach(i => setValue(i, newValue));
+                  onFieldChanged({
+                    instances,
+                    hasImpactOnAllOtherFields: field.hasImpactOnAllOtherFields,
+                  });
+                }}
+                disabled={getDisabled({ instances, field })}
+                fullWidth
+              />
+            }
           />
         );
       } else if (field.valueType === 'number') {
@@ -782,26 +784,29 @@ const CompactPropertiesEditor = ({
 
     const { setValue } = field;
     return (
-      <CompactResourceSelectorWithThumbnail
+      <CompactPropertiesEditorRowField
         key={field.name}
-        project={project}
-        resourceManagementProps={resourceManagementProps}
-        resourceKind={field.resourceKind}
-        fallbackResourceKind={field.fallbackResourceKind}
-        resourceName={getFieldValue({
-          instances,
-          field,
-          defaultValue: '(Multiple values)',
-        })}
-        onChange={newValue => {
-          instances.forEach(i => setValue(i, newValue));
-          onFieldChanged({
-            instances,
-            hasImpactOnAllOtherFields: field.hasImpactOnAllOtherFields,
-          });
-        }}
         label={getFieldLabel({ instances, field })}
         markdownDescription={getFieldDescription(field)}
+        field={
+          <CompactResourceSelectorWithThumbnail
+            project={project}
+            resourceManagementProps={resourceManagementProps}
+            resourceKind={field.resourceKind}
+            resourceName={getFieldValue({
+              instances,
+              field,
+              defaultValue: '(Multiple values)',
+            })}
+            onChange={newValue => {
+              instances.forEach(i => setValue(i, newValue));
+              onFieldChanged({
+                instances,
+                hasImpactOnAllOtherFields: field.hasImpactOnAllOtherFields,
+              });
+            }}
+          />
+        }
       />
     );
   };
diff --git a/newIDE/app/src/EffectsList/index.js b/newIDE/app/src/EffectsList/index.js
index 7d21a45ea409..2d5cadb98475 100644
--- a/newIDE/app/src/EffectsList/index.js
+++ b/newIDE/app/src/EffectsList/index.js
@@ -296,6 +296,7 @@ const Effect = React.forwardRef(
                         </BackgroundText>
                       </Line>
                       <PropertiesEditor
+                        key={effect.getEffectType()}
                         instances={[effect]}
                         schema={effectMetadata.parametersSchema}
                         project={project}
diff --git a/newIDE/app/src/EventsFunctionsExtensionEditor/OptionsEditorDialog/ExtensionOptionsEditor.js b/newIDE/app/src/EventsFunctionsExtensionEditor/OptionsEditorDialog/ExtensionOptionsEditor.js
index ae0232e4c76d..4ebbeec2362e 100644
--- a/newIDE/app/src/EventsFunctionsExtensionEditor/OptionsEditorDialog/ExtensionOptionsEditor.js
+++ b/newIDE/app/src/EventsFunctionsExtensionEditor/OptionsEditorDialog/ExtensionOptionsEditor.js
@@ -118,7 +118,7 @@ export const ExtensionOptionsEditor = ({
   return (
     <I18n>
       {({ i18n }: { i18n: I18nType }) => (
-        <ColumnStackLayout noMargin>
+        <ColumnStackLayout noMargin expand>
           <TextField
             floatingLabelText={<Trans>Name</Trans>}
             value={eventsFunctionsExtension.getName()}
diff --git a/newIDE/app/src/ExportAndShare/GenericExporters/OnlineWebExport/OnlineGameLink.js b/newIDE/app/src/ExportAndShare/GenericExporters/OnlineWebExport/OnlineGameLink.js
index e3e4a4a10b76..a495edc638c6 100644
--- a/newIDE/app/src/ExportAndShare/GenericExporters/OnlineWebExport/OnlineGameLink.js
+++ b/newIDE/app/src/ExportAndShare/GenericExporters/OnlineWebExport/OnlineGameLink.js
@@ -46,6 +46,7 @@ type OnlineGameLinkProps = {|
   exportStep: BuildStep,
   onRefreshGame: () => Promise<void>,
   automaticallyOpenGameProperties?: boolean,
+  shouldShowShareDialog: boolean,
 |};
 
 const timeForExport = 5; // seconds.
@@ -60,6 +61,7 @@ const OnlineGameLink = ({
   exportStep,
   onRefreshGame,
   automaticallyOpenGameProperties,
+  shouldShowShareDialog,
 }: OnlineGameLinkProps) => {
   const [showCopiedInfoBar, setShowCopiedInfoBar] = React.useState<boolean>(
     false
@@ -177,10 +179,12 @@ const OnlineGameLink = ({
     () => {
       if (exportStep === 'done') {
         setTimeBeforeExportFinished(timeForExport); // reset.
-        setIsShareDialogOpen(true);
+        if (shouldShowShareDialog) {
+          setIsShareDialogOpen(true);
+        }
       }
     },
-    [exportStep, automaticallyOpenGameProperties]
+    [exportStep, automaticallyOpenGameProperties, shouldShowShareDialog]
   );
 
   React.useEffect(
diff --git a/newIDE/app/src/ExportAndShare/GenericExporters/OnlineWebExport/OnlineWebExportFlow.js b/newIDE/app/src/ExportAndShare/GenericExporters/OnlineWebExport/OnlineWebExportFlow.js
index 5eff2421714d..cfb4da4214ab 100644
--- a/newIDE/app/src/ExportAndShare/GenericExporters/OnlineWebExport/OnlineWebExportFlow.js
+++ b/newIDE/app/src/ExportAndShare/GenericExporters/OnlineWebExport/OnlineWebExportFlow.js
@@ -105,6 +105,7 @@ const OnlineWebExportFlow = ({
         automaticallyOpenGameProperties={automaticallyOpenGameProperties}
         onRefreshGame={refreshGame}
         game={game}
+        shouldShowShareDialog={uiMode === 'full'}
       />
     </Column>
   );
diff --git a/newIDE/app/src/GameDashboard/ShareGameDialog.js b/newIDE/app/src/GameDashboard/ShareGameDialog.js
index 19f04b614811..5f1cb2fe8801 100644
--- a/newIDE/app/src/GameDashboard/ShareGameDialog.js
+++ b/newIDE/app/src/GameDashboard/ShareGameDialog.js
@@ -14,7 +14,7 @@ import ShareButton from '../UI/ShareDialog/ShareButton';
 
 type Props = {| game: Game, onClose: () => void |};
 
-const ShareDialog = ({ game, onClose }: Props) => {
+const ShareGameDialog = ({ game, onClose }: Props) => {
   const [showAlertMessage, setShowAlertMessage] = React.useState(false);
   const gameUrl = getGameUrl(game);
 
@@ -55,4 +55,4 @@ const ShareDialog = ({ game, onClose }: Props) => {
   );
 };
 
-export default ShareDialog;
+export default ShareGameDialog;
diff --git a/newIDE/app/src/InstancesEditor/CompactInstancePropertiesEditor/index.js b/newIDE/app/src/InstancesEditor/CompactInstancePropertiesEditor/index.js
index f50640a58c74..dada3748a456 100644
--- a/newIDE/app/src/InstancesEditor/CompactInstancePropertiesEditor/index.js
+++ b/newIDE/app/src/InstancesEditor/CompactInstancePropertiesEditor/index.js
@@ -13,7 +13,7 @@ import IconButton from '../../UI/IconButton';
 import { Line, Column, Spacer, marginsSize } from '../../UI/Grid';
 import Text from '../../UI/Text';
 import { type UnsavedChanges } from '../../MainFrame/UnsavedChangesContext';
-import ScrollView from '../../UI/ScrollView';
+import ScrollView, { type ScrollViewInterface } from '../../UI/ScrollView';
 import EventsRootVariablesFinder from '../../Utils/EventsRootVariablesFinder';
 import VariablesList, {
   type HistoryHandler,
@@ -87,6 +87,7 @@ export const CompactInstancePropertiesEditor = ({
   const forceUpdate = useForceUpdate();
   const variablesListRef = React.useRef<?VariablesListInterface>(null);
 
+  const scrollViewRef = React.useRef<?ScrollViewInterface>(null);
   const instance = instances[0];
   /**
    * TODO: multiple instances support for variables list. Expected behavior should be:
@@ -96,6 +97,12 @@ export const CompactInstancePropertiesEditor = ({
    */
   const shouldDisplayVariablesList = instances.length === 1;
 
+  const onScrollY = React.useCallback(deltaY => {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollBy(deltaY);
+    }
+  }, []);
+
   const { object, instanceSchema } = React.useMemo<{|
     object?: gdObject,
     instanceSchema?: Schema,
@@ -129,21 +136,21 @@ export const CompactInstancePropertiesEditor = ({
       const canBeFlippedZ = objectMetadata.hasDefaultBehavior(
         'Scene3D::Base3DBehavior'
       );
-      const instanceSchemaForCustomProperties = propertiesMapToSchema(
+      const instanceSchemaForCustomProperties = propertiesMapToSchema({
         properties,
-        (instance: gdInitialInstance) =>
+        getProperties: (instance: gdInitialInstance) =>
           instance.getCustomProperties(
             globalObjectsContainer || objectsContainer,
             objectsContainer
           ),
-        (instance: gdInitialInstance, name, value) =>
+        onUpdateProperty: (instance: gdInitialInstance, name, value) =>
           instance.updateCustomProperty(
             name,
             value,
             globalObjectsContainer || objectsContainer,
             objectsContainer
-          )
-      );
+          ),
+      });
 
       const reorderedInstanceSchemaForCustomProperties = reorderInstanceSchemaForCustomProperties(
         instanceSchemaForCustomProperties,
@@ -211,6 +218,7 @@ export const CompactInstancePropertiesEditor = ({
       scope="scene-editor-instance-properties"
     >
       <ScrollView
+        ref={scrollViewRef}
         autoHideScrollbar
         style={styles.scrollView}
         key={instances
@@ -244,6 +252,8 @@ export const CompactInstancePropertiesEditor = ({
                   onSelectTileMapTile={onSelectTileMapTile}
                   showPaintingToolbar
                   allowMultipleSelection={false}
+                  onScrollY={onScrollY}
+                  allowRectangleSelection
                   interactive
                 />
               </Column>
diff --git a/newIDE/app/src/InstancesEditor/TileMapPaintingPreview.js b/newIDE/app/src/InstancesEditor/TileMapPaintingPreview.js
index 56b530349870..a8e4edd3820c 100644
--- a/newIDE/app/src/InstancesEditor/TileMapPaintingPreview.js
+++ b/newIDE/app/src/InstancesEditor/TileMapPaintingPreview.js
@@ -9,6 +9,12 @@ import RenderedInstance from '../ObjectsRendering/Renderers/RenderedInstance';
 import Rendered3DInstance from '../ObjectsRendering/Renderers/Rendered3DInstance';
 import { type TileMapTileSelection } from './TileSetVisualizer';
 import { AffineTransformation } from '../Utils/AffineTransformation';
+import {
+  getTileSet,
+  getTilesGridCoordinatesFromPointerSceneCoordinates,
+  isTileSetBadlyConfigured,
+  type TileSet,
+} from '../Utils/TileMap';
 
 export const updateSceneToTileMapTransformation = (
   instance: gdInitialInstance,
@@ -62,136 +68,6 @@ export const updateSceneToTileMapTransformation = (
   return { scaleX, scaleY };
 };
 
-export const getTileSet = (object: gdObject) => {
-  const objectConfigurationProperties = object
-    .getConfiguration()
-    .getProperties();
-  const columnCount = parseFloat(
-    objectConfigurationProperties.get('columnCount').getValue()
-  );
-  const rowCount = parseFloat(
-    objectConfigurationProperties.get('rowCount').getValue()
-  );
-  const tileSize = parseFloat(
-    objectConfigurationProperties.get('tileSize').getValue()
-  );
-  const atlasImage = objectConfigurationProperties.get('atlasImage').getValue();
-  return { rowCount, columnCount, tileSize, atlasImage };
-};
-
-export const isTileSetBadlyConfigured = ({
-  rowCount,
-  columnCount,
-  tileSize,
-  atlasImage,
-}: {|
-  rowCount: number,
-  columnCount: number,
-  tileSize: number,
-  atlasImage: string,
-|}) => {
-  return (
-    !Number.isInteger(columnCount) ||
-    columnCount <= 0 ||
-    !Number.isInteger(rowCount) ||
-    rowCount <= 0
-  );
-};
-
-/**
- * Returns the list of tiles corresponding to the user selection.
- * If only one coordinate is present, only one tile is placed at the slot the
- * pointer points to.
- * If two coordinates are present, tiles are displayed to form a rectangle with the
- * two coordinates being the top left and bottom right corner of the rectangle.
- */
-export const getTilesGridCoordinatesFromPointerSceneCoordinates = ({
-  coordinates,
-  tileSize,
-  sceneToTileMapTransformation,
-}: {|
-  coordinates: Array<{| x: number, y: number |}>,
-  tileSize: number,
-  sceneToTileMapTransformation: AffineTransformation,
-|}): Array<{| x: number, y: number |}> => {
-  if (coordinates.length === 0) return [];
-
-  const tilesCoordinatesInTileMapGrid = [];
-
-  if (coordinates.length === 1) {
-    const coordinatesInTileMapGrid = [0, 0];
-    sceneToTileMapTransformation.transform(
-      [coordinates[0].x, coordinates[0].y],
-      coordinatesInTileMapGrid
-    );
-    coordinatesInTileMapGrid[0] = Math.floor(
-      coordinatesInTileMapGrid[0] / tileSize
-    );
-    coordinatesInTileMapGrid[1] = Math.floor(
-      coordinatesInTileMapGrid[1] / tileSize
-    );
-    tilesCoordinatesInTileMapGrid.push({
-      x: coordinatesInTileMapGrid[0],
-      y: coordinatesInTileMapGrid[1],
-    });
-  }
-  if (coordinates.length === 2) {
-    const firstPointCoordinatesInTileMap = [0, 0];
-    sceneToTileMapTransformation.transform(
-      [coordinates[0].x, coordinates[0].y],
-      firstPointCoordinatesInTileMap
-    );
-    const secondPointCoordinatesInTileMap = [0, 0];
-    sceneToTileMapTransformation.transform(
-      [coordinates[1].x, coordinates[1].y],
-      secondPointCoordinatesInTileMap
-    );
-    const topLeftCornerCoordinatesInTileMap = [
-      Math.min(
-        firstPointCoordinatesInTileMap[0],
-        secondPointCoordinatesInTileMap[0]
-      ),
-      Math.min(
-        firstPointCoordinatesInTileMap[1],
-        secondPointCoordinatesInTileMap[1]
-      ),
-    ];
-    const bottomRightCornerCoordinatesInTileMap = [
-      Math.max(
-        firstPointCoordinatesInTileMap[0],
-        secondPointCoordinatesInTileMap[0]
-      ),
-      Math.max(
-        firstPointCoordinatesInTileMap[1],
-        secondPointCoordinatesInTileMap[1]
-      ),
-    ];
-    const topLeftCornerCoordinatesInTileMapGrid = [
-      Math.floor(topLeftCornerCoordinatesInTileMap[0] / tileSize),
-      Math.floor(topLeftCornerCoordinatesInTileMap[1] / tileSize),
-    ];
-    const bottomRightCornerCoordinatesInTileMapGrid = [
-      Math.floor(bottomRightCornerCoordinatesInTileMap[0] / tileSize),
-      Math.floor(bottomRightCornerCoordinatesInTileMap[1] / tileSize),
-    ];
-
-    for (
-      let columnIndex = topLeftCornerCoordinatesInTileMapGrid[0];
-      columnIndex <= bottomRightCornerCoordinatesInTileMapGrid[0];
-      columnIndex++
-    ) {
-      for (
-        let rowIndex = topLeftCornerCoordinatesInTileMapGrid[1];
-        rowIndex <= bottomRightCornerCoordinatesInTileMapGrid[1];
-        rowIndex++
-      ) {
-        tilesCoordinatesInTileMapGrid.push({ x: columnIndex, y: rowIndex });
-      }
-    }
-  }
-  return tilesCoordinatesInTileMapGrid;
-};
-
 type Props = {|
   project: gdProject,
   layout: gdLayout | null,
@@ -249,72 +125,100 @@ class TileMapPaintingPreview {
     return this.preview;
   }
 
-  render() {
-    this.preview.removeChildren(0);
-    const tileMapTileSelection = this.getTileMapTileSelection();
-    if (!tileMapTileSelection) {
-      return;
-    }
-    const selection = this.instancesSelection.getSelectedInstances();
-    if (selection.length !== 1) return;
-    const instance = selection[0];
-    const associatedObjectName = instance.getObjectName();
-    const object = getObjectByName(
-      this.project.getObjects(),
-      this.layout ? this.layout.getObjects() : null,
-      associatedObjectName
+  _getTextureInAtlas({
+    tileSet,
+    x,
+    y,
+  }: {
+    tileSet: TileSet,
+    x: number,
+    y: number,
+  }): ?PIXI.Texture {
+    const { atlasImage, tileSize } = tileSet;
+    if (!atlasImage) return;
+    const cacheKey = `${atlasImage}-${tileSize}-${x}-${y}`;
+    const cachedTexture = this.cache.get(cacheKey);
+    if (cachedTexture) return cachedTexture;
+
+    const atlasTexture = PixiResourcesLoader.getPIXITexture(
+      this.project,
+      atlasImage
     );
-    if (!object || object.getType() !== 'TileMap::SimpleTileMap') return;
-    const tileSet = getTileSet(object);
-    const isBadlyConfigured = isTileSetBadlyConfigured(tileSet);
-    const { tileSize } = tileSet;
-    let texture;
-    if (isBadlyConfigured) {
-      texture = PixiResourcesLoader.getInvalidPIXITexture();
-    } else {
-      if (tileMapTileSelection.kind === 'single') {
-        const atlasResourceName = object
-          .getConfiguration()
-          .getProperties()
-          .get('atlasImage')
-          .getValue();
-        if (!atlasResourceName) return;
-        const cacheKey = `${atlasResourceName}-${tileSize}-${
-          tileMapTileSelection.coordinates.x
-        }-${tileMapTileSelection.coordinates.y}`;
-        texture = this.cache.get(cacheKey);
-        if (!texture) {
-          const atlasTexture = PixiResourcesLoader.getPIXITexture(
-            this.project,
-            atlasResourceName
-          );
 
-          const rect = new PIXI.Rectangle(
-            tileMapTileSelection.coordinates.x * tileSize,
-            tileMapTileSelection.coordinates.y * tileSize,
-            tileSize,
-            tileSize
-          );
+    const rect = new PIXI.Rectangle(
+      x * tileSize,
+      y * tileSize,
+      tileSize,
+      tileSize
+    );
 
-          try {
-            texture = new PIXI.Texture(atlasTexture, rect);
-          } catch (error) {
-            console.error(
-              `Tile could not be extracted from atlas texture:`,
-              error
-            );
-            texture = PixiResourcesLoader.getInvalidPIXITexture();
-          }
-          this.cache.set(cacheKey, texture);
-        }
-      } else if (tileMapTileSelection.kind === 'erase') {
-        texture = PIXI.Texture.from(
-          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAARSURBVHgBY7h58+Z/BhgAcQA/VAcVLiw46wAAAABJRU5ErkJggg=='
-        );
-        texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
-      }
+    try {
+      const texture = new PIXI.Texture(atlasTexture, rect);
+      this.cache.set(cacheKey, texture);
+    } catch (error) {
+      console.error(`Tile could not be extracted from atlas texture:`, error);
+      return PixiResourcesLoader.getInvalidPIXITexture();
     }
+  }
+
+  _getTilingSpriteForRectangle({
+    bottomRightCorner,
+    topLeftCorner,
+    texture,
+    scaleX,
+    scaleY,
+    flipHorizontally,
+    flipVertically,
+    tileSize,
+    angle,
+  }: {|
+    bottomRightCorner: {| x: number, y: number |},
+    topLeftCorner: {| x: number, y: number |},
+    scaleX: number,
+    scaleY: number,
+    tileSize: number,
+    flipHorizontally: boolean,
+    flipVertically: boolean,
+    angle: number,
+    texture: PIXI.Texture,
+  |}) {
+    const sprite = new PIXI.TilingSprite(texture);
+    const workingPoint = [0, 0];
 
+    sprite.tileScale.x =
+      (flipHorizontally ? -1 : +1) * this.viewPosition.toCanvasScale(scaleX);
+    sprite.tileScale.y =
+      (flipVertically ? -1 : +1) * this.viewPosition.toCanvasScale(scaleY);
+
+    this.tileMapToSceneTransformation.transform(
+      [topLeftCorner.x * tileSize, topLeftCorner.y * tileSize],
+      workingPoint
+    );
+    const tileSizeInCanvas = this.viewPosition.toCanvasScale(tileSize);
+
+    sprite.x = this.viewPosition.toCanvasScale(workingPoint[0]);
+    sprite.y = this.viewPosition.toCanvasScale(workingPoint[1]);
+    sprite.width =
+      (bottomRightCorner.x - topLeftCorner.x + 1) * tileSizeInCanvas * scaleX;
+    sprite.height =
+      (bottomRightCorner.y - topLeftCorner.y + 1) * tileSizeInCanvas * scaleY;
+
+    sprite.angle = angle;
+
+    return sprite;
+  }
+
+  _getPreviewSprites({
+    instance,
+    tileSet,
+    isBadlyConfigured,
+    tileMapTileSelection,
+  }: {
+    instance: gdInitialInstance,
+    tileSet: TileSet,
+    isBadlyConfigured: boolean,
+    tileMapTileSelection: TileMapTileSelection,
+  }): ?PIXI.Container {
     const renderedInstance = this.getRendererOfInstance(instance);
     if (
       !renderedInstance ||
@@ -324,7 +228,7 @@ class TileMapPaintingPreview {
       console.error(
         `Instance of ${instance.getObjectName()} seems to not be a RenderedSimpleTileMapInstance (method getEditableTileMap does not exist).`
       );
-      return;
+      return null;
     }
 
     const scales = updateSceneToTileMapTransformation(
@@ -334,65 +238,97 @@ class TileMapPaintingPreview {
       this.sceneToTileMapTransformation,
       this.tileMapToSceneTransformation
     );
-    if (!scales) return;
+    if (!scales) return null;
     const { scaleX, scaleY } = scales;
     const coordinates = this.getCoordinatesToRender();
-    if (coordinates.length === 0) return;
-    const tileSizeInCanvas = this.viewPosition.toCanvasScale(tileSize);
-    const spriteWidth = tileSizeInCanvas * scaleX;
-    const spriteHeight = tileSizeInCanvas * scaleY;
+    if (coordinates.length === 0) return null;
+    const { tileSize } = tileSet;
 
-    const spritesCoordinatesInTileMapGrid = getTilesGridCoordinatesFromPointerSceneCoordinates(
+    const tilesCoordinatesInTileMapGrid = getTilesGridCoordinatesFromPointerSceneCoordinates(
       {
+        tileMapTileSelection,
         coordinates,
         tileSize,
         sceneToTileMapTransformation: this.sceneToTileMapTransformation,
       }
     );
-    if (spritesCoordinatesInTileMapGrid.length === 0) {
+    if (tilesCoordinatesInTileMapGrid.length === 0) {
       console.warn("Could't get coordinates to render in tile map grid.");
-      return;
+      return null;
     }
+    const container = new PIXI.Container();
+    tilesCoordinatesInTileMapGrid.forEach(tilesCoordinates => {
+      const {
+        bottomRightCorner,
+        topLeftCorner,
+        tileCoordinates,
+      } = tilesCoordinates;
+      let texture;
+      if (isBadlyConfigured) {
+        texture = PixiResourcesLoader.getInvalidPIXITexture();
+      } else {
+        if (tileMapTileSelection.kind === 'rectangle' && tileCoordinates) {
+          texture = this._getTextureInAtlas({
+            tileSet,
+            ...tileCoordinates,
+          });
+          if (!texture) return null;
+        } else if (tileMapTileSelection.kind === 'erase') {
+          texture = PIXI.Texture.from(
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAARSURBVHgBY7h58+Z/BhgAcQA/VAcVLiw46wAAAABJRU5ErkJggg=='
+          );
+          texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
+        }
+      }
+      const sprite = this._getTilingSpriteForRectangle({
+        bottomRightCorner,
+        topLeftCorner,
+        texture,
+        scaleX,
+        scaleY,
+        flipHorizontally: tileMapTileSelection.flipHorizontally || false,
+        flipVertically: tileMapTileSelection.flipVertically || false,
+        tileSize,
+        angle: instance.getAngle(),
+      });
+      container.addChild(sprite);
+    });
 
-    const workingPoint = [0, 0];
-
-    const sprite = new PIXI.TilingSprite(texture);
-
-    sprite.tileScale.x =
-      (tileMapTileSelection.flipHorizontally ? -1 : +1) *
-      this.viewPosition.toCanvasScale(scaleX);
-    sprite.tileScale.y =
-      (tileMapTileSelection.flipVertically ? -1 : +1) *
-      this.viewPosition.toCanvasScale(scaleY);
-    sprite.width = spriteWidth;
-    sprite.height = spriteHeight;
+    return container;
+  }
 
-    let minX = Infinity;
-    let minY = Infinity;
-    let maxX = -Infinity;
-    let maxY = -Infinity;
-    for (const { x, y } of spritesCoordinatesInTileMapGrid) {
-      if (x < minX) minX = x;
-      if (y < minY) minY = y;
-      if (x > maxX) maxX = x;
-      if (y > maxY) maxY = y;
+  render() {
+    this.preview.removeChildren(0);
+    const tileMapTileSelection = this.getTileMapTileSelection();
+    if (!tileMapTileSelection) {
+      return;
     }
-
-    this.tileMapToSceneTransformation.transform(
-      [minX * tileSize, minY * tileSize],
-      workingPoint
+    const selection = this.instancesSelection.getSelectedInstances();
+    if (selection.length !== 1) return;
+    const instance = selection[0];
+    const associatedObjectName = instance.getObjectName();
+    const object = getObjectByName(
+      this.project.getObjects(),
+      this.layout ? this.layout.getObjects() : null,
+      associatedObjectName
     );
+    if (!object || object.getType() !== 'TileMap::SimpleTileMap') return;
+    const tileSet = getTileSet(object);
+    const isBadlyConfigured = isTileSetBadlyConfigured(tileSet);
 
-    sprite.x = this.viewPosition.toCanvasScale(workingPoint[0]);
-    sprite.y = this.viewPosition.toCanvasScale(workingPoint[1]);
-    sprite.width =
-      (maxX - minX + 1) * this.viewPosition.toCanvasScale(tileSize) * scaleX;
-    sprite.height =
-      (maxY - minY + 1) * this.viewPosition.toCanvasScale(tileSize) * scaleY;
-
-    sprite.angle = instance.getAngle();
-
-    this.preview.addChild(sprite);
+    if (
+      isBadlyConfigured ||
+      tileMapTileSelection.kind === 'rectangle' ||
+      tileMapTileSelection.kind === 'erase'
+    ) {
+      const container = this._getPreviewSprites({
+        instance,
+        tileSet,
+        tileMapTileSelection,
+        isBadlyConfigured,
+      });
+      if (container) this.preview.addChild(container);
+    }
 
     const canvasCoordinates = this.viewPosition.toCanvasCoordinates(0, 0);
     this.preview.position.x = canvasCoordinates[0];
diff --git a/newIDE/app/src/InstancesEditor/TileSetVisualizer.js b/newIDE/app/src/InstancesEditor/TileSetVisualizer.js
index ee98eb1913a1..1da3f02bcfb0 100644
--- a/newIDE/app/src/InstancesEditor/TileSetVisualizer.js
+++ b/newIDE/app/src/InstancesEditor/TileSetVisualizer.js
@@ -16,7 +16,7 @@ import useForceUpdate from '../Utils/UseForceUpdate';
 import { useLongTouch, type ClientCoordinates } from '../Utils/UseLongTouch';
 import Text from '../UI/Text';
 import EmptyMessage from '../UI/EmptyMessage';
-import { isTileSetBadlyConfigured } from './TileMapPaintingPreview';
+import { isTileSetBadlyConfigured } from '../Utils/TileMap';
 
 const styles = {
   tilesetAndTooltipsContainer: {
@@ -30,6 +30,7 @@ const styles = {
     position: 'relative',
     display: 'flex',
     overflow: 'auto',
+    touchAction: 'none',
   },
   atlasImage: { flex: 1, imageRendering: 'pixelated' },
   icon: { fontSize: 18 },
@@ -64,12 +65,12 @@ type TileMapCoordinates = {| x: number, y: number |};
 /**
  * Returns the tile id in a tile set.
  * This id corresponds to the index of the tile if the tile set
- * is flattened so that each column is put right after the previous one.
+ * is flattened so that each row is put right after the previous one.
  * Example:
- *   1 | 4 | 7
- *   2 | 5 | 8
- *   3 | 6 | 9
- * @param argument Object that contains x the horizontal position of the tile, y the vertical position and rowCount the number of rows in the tile set.
+ *   0 | 1 | 2
+ *   3 | 4 | 5
+ *   6 | 7 | 8
+ * @param argument Object that contains x the horizontal position of the tile, y the vertical position and columnCount the number of columns in the tile set.
  * @returns the id of the tile.
  */
 export const getTileIdFromGridCoordinates = ({
@@ -85,12 +86,12 @@ export const getTileIdFromGridCoordinates = ({
 /**
  * Returns the coordinates of a tile in a tile set given its id.
  * This id corresponds to the index of the tile if the tile set
- * is flattened so that each column is put right after the previous one.
+ * is flattened so that each row is put right after the previous one.
  * Example:
- *   1 | 4 | 7
- *   2 | 5 | 8
- *   3 | 6 | 9
- * @param argument Object that contains id the id of the tile and rowCount the number of rows in the tile set.
+ *   0 | 1 | 2
+ *   3 | 4 | 5
+ *   6 | 7 | 8
+ * @param argument Object that contains the id of the tile and columnCount the number of columns in the tile set.
  * @returns the id of the tile.
  */
 export const getGridCoordinatesFromTileId = ({
@@ -191,14 +192,14 @@ const Tile = ({
 
 export type TileMapTileSelection =
   | {|
-      kind: 'single',
-      coordinates: TileMapCoordinates,
-      flipHorizontally: boolean,
-      flipVertically: boolean,
+      kind: 'multiple',
+      coordinates: TileMapCoordinates[],
     |}
   | {|
-      kind: 'multiple',
+      kind: 'rectangle',
       coordinates: TileMapCoordinates[],
+      flipHorizontally: boolean,
+      flipVertically: boolean,
     |}
   | {|
       kind: 'erase',
@@ -210,12 +211,18 @@ type Props = {|
   tileMapTileSelection: ?TileMapTileSelection,
   onSelectTileMapTile: (?TileMapTileSelection) => void,
   allowMultipleSelection: boolean,
+  allowRectangleSelection: boolean,
   showPaintingToolbar: boolean,
   interactive: boolean,
   onAtlasImageLoaded?: (
     e: SyntheticEvent<HTMLImageElement>,
     atlasResourceName: string
   ) => void,
+  /**
+   * Needed to enable scrolling on touch devices when the user is not using
+   * a long touch to make a tile selection on the tile set.
+   */
+  onScrollY: number => void,
 |};
 
 const TileSetVisualizer = ({
@@ -224,9 +231,11 @@ const TileSetVisualizer = ({
   tileMapTileSelection,
   onSelectTileMapTile,
   allowMultipleSelection,
+  allowRectangleSelection,
   showPaintingToolbar,
   interactive,
   onAtlasImageLoaded,
+  onScrollY,
 }: Props) => {
   const forceUpdate = useForceUpdate();
   const atlasResourceName = objectConfiguration
@@ -242,9 +251,9 @@ const TileSetVisualizer = ({
     setShouldFlipHorizontally,
   ] = React.useState<boolean>(false);
   const [
-    lastSelectedTile,
-    setLastSelectedTile,
-  ] = React.useState<?TileMapCoordinates>(null);
+    lastSelection,
+    setLastSelection,
+  ] = React.useState<?TileMapTileSelection>(null);
   const tilesetContainerRef = React.useRef<?HTMLDivElement>(null);
   const tilesetAndTooltipContainerRef = React.useRef<?HTMLDivElement>(null);
   const [tooltipContent, setTooltipContent] = React.useState<?{|
@@ -268,17 +277,11 @@ const TileSetVisualizer = ({
     rowCount,
     tileSize,
   });
-  const [clickStartCoordinates, setClickStartCoordinates] = React.useState<?{|
+  const startCoordinatesRef = React.useRef<?{|
     x: number,
     y: number,
   |}>(null);
-  const [touchStartCoordinates, setTouchStartCoordinates] = React.useState<?{|
-    x: number,
-    y: number,
-  |}>(null);
-  const [shouldCancelClick, setShouldCancelClick] = React.useState<boolean>(
-    false
-  );
+  const isLongTouchRef = React.useRef<boolean>(false);
   const tooltipDisplayTimeoutId = React.useRef<?TimeoutID>(null);
   const [
     rectangularSelectionTilePreview,
@@ -314,7 +317,6 @@ const TileSetVisualizer = ({
 
   const displayTileIdTooltip = React.useCallback(
     (e: ClientCoordinates) => {
-      setShouldCancelClick(true);
       if (!displayedTileSize || isBadlyConfigured) return;
 
       const imageCoordinates = getImageCoordinatesFromPointerEvent(e);
@@ -339,7 +341,17 @@ const TileSetVisualizer = ({
     [displayedTileSize, columnCount, rowCount, isBadlyConfigured]
   );
 
-  const longTouchProps = useLongTouch(displayTileIdTooltip);
+  const handleLongTouch = React.useCallback(
+    (e: ClientCoordinates) => {
+      isLongTouchRef.current = true;
+      displayTileIdTooltip(e);
+    },
+    [displayTileIdTooltip]
+  );
+
+  const longTouchProps = useLongTouch(handleLongTouch, {
+    doNotCancelOnScroll: true,
+  });
 
   React.useEffect(
     () => {
@@ -353,15 +365,12 @@ const TileSetVisualizer = ({
   const onPointerDown = React.useCallback(
     (event: PointerEvent) => {
       if (isBadlyConfigured) return;
-      if (event.pointerType === 'touch') {
-        setTouchStartCoordinates({ x: event.pageX, y: event.pageY });
-      }
-      const imageCoordinates = getImageCoordinatesFromPointerEvent(event);
-      if (!imageCoordinates) return;
-      setClickStartCoordinates({
-        x: imageCoordinates.mouseX,
-        y: imageCoordinates.mouseY,
-      });
+      const coordinates = getImageCoordinatesFromPointerEvent(event);
+      if (!coordinates) return;
+      startCoordinatesRef.current = {
+        x: coordinates.mouseX,
+        y: coordinates.mouseY,
+      };
     },
     [isBadlyConfigured]
   );
@@ -370,13 +379,33 @@ const TileSetVisualizer = ({
     (event: PointerEvent) => {
       if (
         isBadlyConfigured ||
-        !clickStartCoordinates ||
+        !startCoordinatesRef ||
         !displayedTileSize ||
-        !allowMultipleSelection ||
-        event.pointerType === 'touch'
+        (!allowMultipleSelection && !allowRectangleSelection)
       ) {
         return;
       }
+
+      const startCoordinates = startCoordinatesRef.current;
+      if (!startCoordinates) return;
+
+      const isTouchDevice = event.pointerType === 'touch';
+
+      if (isTouchDevice) {
+        // Distinguish between a long touch (to multi select tiles) and a scroll.
+        if (!isLongTouchRef.current) {
+          const coordinates = getImageCoordinatesFromPointerEvent(event);
+          if (!coordinates) return;
+          if (tilesetContainerRef.current) {
+            const deltaY = -event.movementY;
+            const deltaX =
+              startCoordinates.x - coordinates.mouseXWithoutScrollLeft;
+            tilesetContainerRef.current.scrollLeft = deltaX;
+            onScrollY(deltaY);
+          }
+          return;
+        }
+      }
       const imageCoordinates = getImageCoordinatesFromPointerEvent(event);
       if (!imageCoordinates) return;
 
@@ -387,10 +416,11 @@ const TileSetVisualizer = ({
         rowCount,
         displayedTileSize,
       });
+
       const { x: startX, y: startY } = getGridCoordinatesFromPointerCoordinates(
         {
-          pointerX: clickStartCoordinates.x,
-          pointerY: clickStartCoordinates.y,
+          pointerX: startCoordinates.x,
+          pointerY: startCoordinates.y,
           columnCount,
           rowCount,
           displayedTileSize,
@@ -412,7 +442,8 @@ const TileSetVisualizer = ({
       columnCount,
       rowCount,
       allowMultipleSelection,
-      clickStartCoordinates,
+      allowRectangleSelection,
+      onScrollY,
     ]
   );
 
@@ -420,22 +451,13 @@ const TileSetVisualizer = ({
     (event: PointerEvent) => {
       try {
         if (!displayedTileSize || isBadlyConfigured) return;
-        if (shouldCancelClick) {
-          setShouldCancelClick(false);
-          return;
-        }
 
-        let isTouchDevice = false;
+        const isTouchDevice = event.pointerType === 'touch';
+        const startCoordinates = startCoordinatesRef.current;
+        if (!startCoordinates) return;
 
-        if (event.pointerType === 'touch') {
-          isTouchDevice = true;
-          if (
-            !touchStartCoordinates ||
-            Math.abs(event.pageX - touchStartCoordinates.x) > 30 ||
-            Math.abs(event.pageY - touchStartCoordinates.y) > 30
-          ) {
-            return;
-          }
+        if (isTouchDevice && !isLongTouchRef.current) {
+          return;
         }
 
         const imageCoordinates = getImageCoordinatesFromPointerEvent(event);
@@ -448,80 +470,89 @@ const TileSetVisualizer = ({
           rowCount,
           displayedTileSize,
         });
-        if (!allowMultipleSelection) {
-          if (
-            tileMapTileSelection &&
-            tileMapTileSelection.kind === 'single' &&
-            tileMapTileSelection.coordinates.x === x &&
-            tileMapTileSelection.coordinates.y === y
-          ) {
-            onSelectTileMapTile(null);
-          } else {
-            onSelectTileMapTile({
-              kind: 'single',
-              coordinates: { x, y },
-              flipHorizontally: shouldFlipHorizontally,
-              flipVertically: shouldFlipVertically,
-            });
-          }
-          return;
-        }
-        if (!clickStartCoordinates) return;
+        if (!startCoordinates) return;
 
         const {
           x: startX,
           y: startY,
         } = getGridCoordinatesFromPointerCoordinates({
-          pointerX: clickStartCoordinates.x,
-          pointerY: clickStartCoordinates.y,
+          pointerX: startCoordinates.x,
+          pointerY: startCoordinates.y,
           columnCount,
           rowCount,
           displayedTileSize,
         });
-        const newSelection =
-          tileMapTileSelection && tileMapTileSelection.kind === 'multiple'
-            ? { ...tileMapTileSelection }
-            : { kind: 'multiple', coordinates: [] };
-        // Click on a tile.
-        if (
-          (startX === x && startY === y) ||
-          // Do not allow rectangular select on touch device as it conflicts with basic scrolling gestures.
-          isTouchDevice
-        ) {
-          if (
-            tileMapTileSelection &&
-            tileMapTileSelection.kind === 'multiple'
-          ) {
-            addOrRemoveCoordinatesInArray(newSelection.coordinates, {
-              x,
-              y,
-            });
-          }
-        } else {
-          for (
-            let columnIndex = Math.min(startX, x);
-            columnIndex <= Math.max(startX, x);
-            columnIndex++
-          ) {
+        if (allowMultipleSelection) {
+          const newSelection =
+            tileMapTileSelection && tileMapTileSelection.kind === 'multiple'
+              ? { ...tileMapTileSelection }
+              : { kind: 'multiple', coordinates: [] };
+          if (startX === x && startY === y) {
+            if (
+              tileMapTileSelection &&
+              tileMapTileSelection.kind === 'multiple'
+            ) {
+              addOrRemoveCoordinatesInArray(newSelection.coordinates, {
+                x,
+                y,
+              });
+            }
+          } else {
             for (
-              let rowIndex = Math.min(startY, y);
-              rowIndex <= Math.max(startY, y);
-              rowIndex++
+              let columnIndex = Math.min(startX, x);
+              columnIndex <= Math.max(startX, x);
+              columnIndex++
             ) {
-              if (newSelection && newSelection.kind === 'multiple') {
-                addOrRemoveCoordinatesInArray(newSelection.coordinates, {
-                  x: columnIndex,
-                  y: rowIndex,
-                });
+              for (
+                let rowIndex = Math.min(startY, y);
+                rowIndex <= Math.max(startY, y);
+                rowIndex++
+              ) {
+                if (newSelection && newSelection.kind === 'multiple') {
+                  addOrRemoveCoordinatesInArray(newSelection.coordinates, {
+                    x: columnIndex,
+                    y: rowIndex,
+                  });
+                }
               }
             }
           }
+          onSelectTileMapTile(newSelection);
+        } else if (allowRectangleSelection) {
+          const shouldRemoveSelection =
+            tileMapTileSelection &&
+            tileMapTileSelection.kind === 'rectangle' &&
+            startX === x &&
+            startY === y &&
+            x <= tileMapTileSelection.coordinates[1].x &&
+            x >= tileMapTileSelection.coordinates[0].x &&
+            y <= tileMapTileSelection.coordinates[1].y &&
+            y >= tileMapTileSelection.coordinates[0].y;
+          if (shouldRemoveSelection) {
+            // Remove selection when user selects a single tile in the current tile selection.
+            onSelectTileMapTile(null);
+          } else {
+            const topLeftCorner = {
+              x: Math.min(startX, x),
+              y: Math.min(startY, y),
+            };
+            const bottomRightCorner = {
+              x: Math.max(startX, x),
+              y: Math.max(startY, y),
+            };
+            const newSelection = {
+              kind: 'rectangle',
+              coordinates: [topLeftCorner, bottomRightCorner],
+              flipHorizontally: shouldFlipHorizontally,
+              flipVertically: shouldFlipVertically,
+            };
+            onSelectTileMapTile(newSelection);
+          }
         }
-        onSelectTileMapTile(newSelection);
       } finally {
-        setClickStartCoordinates(null);
+        startCoordinatesRef.current = null;
         setRectangularSelectionTilePreview(null);
-        setTouchStartCoordinates(null);
+        isLongTouchRef.current = false;
       }
     },
     [
@@ -534,19 +565,14 @@ const TileSetVisualizer = ({
       shouldFlipHorizontally,
       shouldFlipVertically,
       allowMultipleSelection,
-      clickStartCoordinates,
-      shouldCancelClick,
-      touchStartCoordinates,
+      allowRectangleSelection,
     ]
   );
 
   React.useEffect(
     () => {
-      if (tileMapTileSelection && tileMapTileSelection.kind === 'single') {
-        setLastSelectedTile({
-          x: tileMapTileSelection.coordinates.x,
-          y: tileMapTileSelection.coordinates.y,
-        });
+      if (tileMapTileSelection && tileMapTileSelection.kind === 'rectangle') {
+        setLastSelection(tileMapTileSelection);
       }
     },
     [tileMapTileSelection]
@@ -651,21 +677,23 @@ const TileSetVisualizer = ({
                 tooltip={t`Paint`}
                 selected={
                   !!tileMapTileSelection &&
-                  tileMapTileSelection.kind === 'single'
+                  tileMapTileSelection.kind === 'rectangle'
                 }
                 onClick={e => {
                   if (
                     !!tileMapTileSelection &&
-                    tileMapTileSelection.kind === 'single'
+                    tileMapTileSelection.kind === 'rectangle'
                   )
                     onSelectTileMapTile(null);
                   else
-                    onSelectTileMapTile({
-                      kind: 'single',
-                      coordinates: lastSelectedTile || { x: 0, y: 0 },
-                      flipHorizontally: shouldFlipHorizontally,
-                      flipVertically: shouldFlipVertically,
-                    });
+                    onSelectTileMapTile(
+                      lastSelection || {
+                        kind: 'rectangle',
+                        coordinates: [{ x: 0, y: 0 }, { x: 0, y: 0 }],
+                        flipHorizontally: shouldFlipHorizontally,
+                        flipVertically: shouldFlipVertically,
+                      }
+                    );
                 }}
                 disabled={!isAtlasImageSet}
               >
@@ -676,15 +704,14 @@ const TileSetVisualizer = ({
                 tooltip={t`Horizontal flip`}
                 selected={shouldFlipHorizontally}
                 disabled={
-                  !tileMapTileSelection ||
-                  tileMapTileSelection.kind !== 'single'
+                  !tileMapTileSelection || tileMapTileSelection.kind === 'erase'
                 }
                 onClick={e => {
                   const newShouldFlipHorizontally = !shouldFlipHorizontally;
                   setShouldFlipHorizontally(newShouldFlipHorizontally);
                   if (
                     !!tileMapTileSelection &&
-                    tileMapTileSelection.kind === 'single'
+                    tileMapTileSelection.kind === 'rectangle'
                   ) {
                     onSelectTileMapTile({
                       ...tileMapTileSelection,
@@ -700,15 +727,14 @@ const TileSetVisualizer = ({
                 tooltip={t`Vertical flip`}
                 selected={shouldFlipVertically}
                 disabled={
-                  !tileMapTileSelection ||
-                  tileMapTileSelection.kind !== 'single'
+                  !tileMapTileSelection || tileMapTileSelection.kind === 'erase'
                 }
                 onClick={e => {
                   const newShouldFlipVertically = !shouldFlipVertically;
                   setShouldFlipVertically(newShouldFlipVertically);
                   if (
                     !!tileMapTileSelection &&
-                    tileMapTileSelection.kind === 'single'
+                    tileMapTileSelection.kind === 'rectangle'
                   ) {
                     onSelectTileMapTile({
                       ...tileMapTileSelection,
@@ -776,14 +802,24 @@ const TileSetVisualizer = ({
                 />
               )}
               {tileMapTileSelection &&
-                tileMapTileSelection.kind === 'single' &&
+                tileMapTileSelection.kind === 'rectangle' &&
                 displayedTileSize && (
                   <Tile
                     key={`selected-tile`}
                     highlighted
                     size={displayedTileSize}
-                    x={tileMapTileSelection.coordinates.x}
-                    y={tileMapTileSelection.coordinates.y}
+                    x={tileMapTileSelection.coordinates[0].x}
+                    y={tileMapTileSelection.coordinates[0].y}
+                    width={
+                      tileMapTileSelection.coordinates[1].x -
+                      tileMapTileSelection.coordinates[0].x +
+                      1
+                    }
+                    height={
+                      tileMapTileSelection.coordinates[1].y -
+                      tileMapTileSelection.coordinates[0].y +
+                      1
+                    }
                   />
                 )}
               {tileMapTileSelection &&
diff --git a/newIDE/app/src/InstancesEditor/index.js b/newIDE/app/src/InstancesEditor/index.js
index f13bf9a2fb49..e6f319f3fd73 100644
--- a/newIDE/app/src/InstancesEditor/index.js
+++ b/newIDE/app/src/InstancesEditor/index.js
@@ -44,9 +44,6 @@ import {
 } from '../Utils/ZoomUtils';
 import Background from './Background';
 import TileMapPaintingPreview, {
-  getTileSet,
-  getTilesGridCoordinatesFromPointerSceneCoordinates,
-  isTileSetBadlyConfigured,
   updateSceneToTileMapTransformation,
 } from './TileMapPaintingPreview';
 import {
@@ -59,6 +56,11 @@ import { AffineTransformation } from '../Utils/AffineTransformation';
 import { ErrorFallbackComponent } from '../UI/ErrorBoundary';
 import { Trans } from '@lingui/macro';
 import { generateUUID } from 'three/src/math/MathUtils';
+import {
+  getTilesGridCoordinatesFromPointerSceneCoordinates,
+  getTileSet,
+  isTileSetBadlyConfigured,
+} from '../Utils/TileMap';
 
 const gd: libGDevelop = global.gd;
 
@@ -847,6 +849,7 @@ export default class InstancesEditor extends Component<Props, State> {
       }
       const tileMapGridCoordinates = getTilesGridCoordinatesFromPointerSceneCoordinates(
         {
+          tileMapTileSelection,
           coordinates: sceneCoordinates,
           tileSize: tileSet.tileSize,
           sceneToTileMapTransformation,
@@ -855,96 +858,126 @@ export default class InstancesEditor extends Component<Props, State> {
 
       let shouldTrimAfterOperations = false;
 
-      if (tileMapTileSelection.kind === 'single') {
+      if (tileMapTileSelection.kind === 'rectangle') {
         shouldTrimAfterOperations = editableTileMap.isEmpty();
         // TODO: Optimize list execution to make sure the most important size changing operations are done first.
         let cumulatedUnshiftedRows = 0,
           cumulatedUnshiftedColumns = 0;
-        const tileId = getTileIdFromGridCoordinates({
-          columnCount: tileSet.columnCount,
-          ...tileMapTileSelection.coordinates,
-        });
-
-        const tileDefinition = editableTileMap.getTileDefinition(tileId);
-        if (!tileDefinition) return;
 
         const layer = editableTileMap.getTileLayer(0);
         if (!layer) return;
 
-        tileMapGridCoordinates.forEach(({ x: gridX, y: gridY }) => {
-          // If rows or columns have been unshifted in the previous tile setting operations,
-          // we have to take them into account for the current coordinates.
-          const x = gridX + cumulatedUnshiftedColumns;
-          const y = gridY + cumulatedUnshiftedRows;
-          const rowsToAppend = Math.max(
-            0,
-            y - (editableTileMap.getDimensionY() - 1)
-          );
-          const columnsToAppend = Math.max(
-            0,
-            x - (editableTileMap.getDimensionX() - 1)
-          );
-          const rowsToUnshift = Math.abs(Math.min(0, y));
-          const columnsToUnshift = Math.abs(Math.min(0, x));
-          if (
-            rowsToAppend > 0 ||
-            columnsToAppend > 0 ||
-            rowsToUnshift > 0 ||
-            columnsToUnshift > 0
+        tileMapGridCoordinates.forEach(
+          ({ bottomRightCorner, topLeftCorner, tileCoordinates }) => {
+            if (!tileCoordinates) return;
+            const tileId = getTileIdFromGridCoordinates({
+              columnCount: tileSet.columnCount,
+              ...tileCoordinates,
+            });
+
+            const tileDefinition = editableTileMap.getTileDefinition(tileId);
+            if (!tileDefinition) return;
+
+            for (
+              let gridX = topLeftCorner.x;
+              gridX <= bottomRightCorner.x;
+              gridX++
+            ) {
+              for (
+                let gridY = topLeftCorner.y;
+                gridY <= bottomRightCorner.y;
+                gridY++
+              ) {
+                // If rows or columns have been unshifted in the previous tile setting operations,
+                // we have to take them into account for the current coordinates.
+                const x = gridX + cumulatedUnshiftedColumns;
+                const y = gridY + cumulatedUnshiftedRows;
+                const rowsToAppend = Math.max(
+                  0,
+                  y - (editableTileMap.getDimensionY() - 1)
+                );
+                const columnsToAppend = Math.max(
+                  0,
+                  x - (editableTileMap.getDimensionX() - 1)
+                );
+                const rowsToUnshift = Math.abs(Math.min(0, y));
+                const columnsToUnshift = Math.abs(Math.min(0, x));
+                if (
+                  rowsToAppend > 0 ||
+                  columnsToAppend > 0 ||
+                  rowsToUnshift > 0 ||
+                  columnsToUnshift > 0
+                ) {
+                  editableTileMap.increaseDimensions(
+                    columnsToAppend,
+                    columnsToUnshift,
+                    rowsToAppend,
+                    rowsToUnshift
+                  );
+                }
+                const newX = x + columnsToUnshift;
+                const newY = y + rowsToUnshift;
+
+                editableTileMap.setTile(newX, newY, 0, tileId);
+                editableTileMap.flipTileOnX(
+                  newX,
+                  newY,
+                  0,
+                  tileMapTileSelection.flipHorizontally
+                );
+                editableTileMap.flipTileOnY(
+                  newX,
+                  newY,
+                  0,
+                  tileMapTileSelection.flipVertically
+                );
+
+                cumulatedUnshiftedRows += rowsToUnshift;
+                cumulatedUnshiftedColumns += columnsToUnshift;
+                // The instance angle is not considered when moving the instance after
+                // rows/columns were added/removed because the instance position does not
+                // include the rotation transformation. Otherwise, we could have used
+                // tileMapToSceneTransformation to get the new position.
+                selectedInstance.setX(
+                  selectedInstance.getX() -
+                    columnsToUnshift * (tileSet.tileSize * scaleX)
+                );
+                selectedInstance.setY(
+                  selectedInstance.getY() -
+                    rowsToUnshift * (tileSet.tileSize * scaleY)
+                );
+                if (selectedInstance.hasCustomSize()) {
+                  selectedInstance.setCustomWidth(
+                    selectedInstance.getCustomWidth() +
+                      tileSet.tileSize *
+                        scaleX *
+                        (columnsToAppend + columnsToUnshift)
+                  );
+                  selectedInstance.setCustomHeight(
+                    selectedInstance.getCustomHeight() +
+                      tileSet.tileSize * scaleY * (rowsToAppend + rowsToUnshift)
+                  );
+                }
+              }
+            }
+          }
+        );
+      } else if (tileMapTileSelection.kind === 'erase') {
+        const { bottomRightCorner, topLeftCorner } = tileMapGridCoordinates[0];
+        for (
+          let gridX = topLeftCorner.x;
+          gridX <= bottomRightCorner.x;
+          gridX++
+        ) {
+          for (
+            let gridY = topLeftCorner.y;
+            gridY <= bottomRightCorner.y;
+            gridY++
           ) {
-            editableTileMap.increaseDimensions(
-              columnsToAppend,
-              columnsToUnshift,
-              rowsToAppend,
-              rowsToUnshift
-            );
+            editableTileMap.removeTile(gridX, gridY, 0);
           }
-          const newX = x + columnsToUnshift;
-          const newY = y + rowsToUnshift;
-
-          editableTileMap.setTile(newX, newY, 0, tileId);
-          editableTileMap.flipTileOnX(
-            newX,
-            newY,
-            0,
-            tileMapTileSelection.flipHorizontally
-          );
-          editableTileMap.flipTileOnY(
-            newX,
-            newY,
-            0,
-            tileMapTileSelection.flipVertically
-          );
+        }
 
-          cumulatedUnshiftedRows += rowsToUnshift;
-          cumulatedUnshiftedColumns += columnsToUnshift;
-          // The instance angle is not considered when moving the instance after
-          // rows/columns were added/removed because the instance position does not
-          // include the rotation transformation. Otherwise, we could have used
-          // tileMapToSceneTransformation to get the new position.
-          selectedInstance.setX(
-            selectedInstance.getX() -
-              columnsToUnshift * (tileSet.tileSize * scaleX)
-          );
-          selectedInstance.setY(
-            selectedInstance.getY() -
-              rowsToUnshift * (tileSet.tileSize * scaleY)
-          );
-          if (selectedInstance.hasCustomSize()) {
-            selectedInstance.setCustomWidth(
-              selectedInstance.getCustomWidth() +
-                tileSet.tileSize * scaleX * (columnsToAppend + columnsToUnshift)
-            );
-            selectedInstance.setCustomHeight(
-              selectedInstance.getCustomHeight() +
-                tileSet.tileSize * scaleY * (rowsToAppend + rowsToUnshift)
-            );
-          }
-        });
-      } else if (tileMapTileSelection.kind === 'erase') {
-        tileMapGridCoordinates.forEach(({ x: gridX, y: gridY }) => {
-          editableTileMap.removeTile(gridX, gridY, 0);
-        });
         shouldTrimAfterOperations = true;
       } else {
         return;
diff --git a/newIDE/app/src/MainFrame/EditorContainers/HomePage/index.js b/newIDE/app/src/MainFrame/EditorContainers/HomePage/index.js
index cfccfbef45a2..437a7d7e1baf 100644
--- a/newIDE/app/src/MainFrame/EditorContainers/HomePage/index.js
+++ b/newIDE/app/src/MainFrame/EditorContainers/HomePage/index.js
@@ -58,6 +58,8 @@ const isShopRequested = (routeArguments: RouteArguments): boolean =>
   routeArguments['initial-dialog'] === 'store'; // New way of opening the store
 const isGamesDashboardRequested = (routeArguments: RouteArguments): boolean =>
   routeArguments['initial-dialog'] === 'games-dashboard';
+const isBuildRequested = (routeArguments: RouteArguments): boolean =>
+  routeArguments['initial-dialog'] === 'build';
 
 const styles = {
   container: {
@@ -220,10 +222,15 @@ export const HomePage = React.memo<Props>(
       const isGamesDashboardRequestedAtOpening = React.useRef<boolean>(
         isGamesDashboardRequested(routeArguments)
       );
+      const isBuildRequestedAtOpening = React.useRef<boolean>(
+        isBuildRequested(routeArguments)
+      );
       const initialTab = isShopRequestedAtOpening.current
         ? 'shop'
         : isGamesDashboardRequestedAtOpening.current
         ? 'manage'
+        : isBuildRequestedAtOpening.current
+        ? 'build'
         : showGetStartedSectionByDefault
         ? 'get-started'
         : 'build';
@@ -298,6 +305,9 @@ export const HomePage = React.memo<Props>(
           } else if (isGamesDashboardRequested(routeArguments)) {
             setActiveTab('manage');
             removeRouteArguments(['initial-dialog']);
+          } else if (isBuildRequested(routeArguments)) {
+            setActiveTab('build');
+            removeRouteArguments(['initial-dialog']);
           }
         },
         [
diff --git a/newIDE/app/src/MainFrame/RouterContext.js b/newIDE/app/src/MainFrame/RouterContext.js
index b7897eeb3afd..601dc64905ca 100644
--- a/newIDE/app/src/MainFrame/RouterContext.js
+++ b/newIDE/app/src/MainFrame/RouterContext.js
@@ -8,7 +8,8 @@ export type Route =
   | 'subscription'
   | 'games-dashboard'
   | 'asset-store' // For compatibility when there was only asset packs.
-  | 'store'; // New way of opening the store.
+  | 'store' // New way of opening the store.
+  | 'build';
 type RouteKey =
   | 'initial-dialog'
   | 'game-id'
diff --git a/newIDE/app/src/MainFrame/index.js b/newIDE/app/src/MainFrame/index.js
index 4ddbc2d59390..3ba2c6743691 100644
--- a/newIDE/app/src/MainFrame/index.js
+++ b/newIDE/app/src/MainFrame/index.js
@@ -177,6 +177,7 @@ import { emptyStorageProvider } from '../ProjectsStorage/ProjectStorageProviders
 import CustomDragLayer from '../UI/DragAndDrop/CustomDragLayer';
 import CloudProjectRecoveryDialog from '../ProjectsStorage/CloudStorageProvider/CloudProjectRecoveryDialog';
 import CloudProjectSaveChoiceDialog from '../ProjectsStorage/CloudStorageProvider/CloudProjectSaveChoiceDialog';
+import CloudStorageProvider from '../ProjectsStorage/CloudStorageProvider';
 import useCreateProject from '../Utils/UseCreateProject';
 import newNameGenerator from '../Utils/NewNameGenerator';
 import { addDefaultLightToAllLayers } from '../ProjectCreation/CreateProject';
@@ -193,6 +194,7 @@ import { useAuthenticatedPlayer } from './UseAuthenticatedPlayer';
 import ListIcon from '../UI/ListIcon';
 import { QuickCustomizationDialog } from '../QuickCustomization/QuickCustomizationDialog';
 import { type ObjectWithContext } from '../ObjectsList/EnumerateObjects';
+import RouterContext from './RouterContext';
 
 const GD_STARTUP_TIMES = global.GD_STARTUP_TIMES || [];
 
@@ -381,6 +383,7 @@ const MainFrame = (props: Props) => {
     newProjectSetupDialogOpen,
     setNewProjectSetupDialogOpen,
   ] = React.useState<boolean>(false);
+  const { navigateToRoute } = React.useContext(RouterContext);
 
   const [isProjectOpening, setIsProjectOpening] = React.useState<boolean>(
     false
@@ -2410,7 +2413,12 @@ const MainFrame = (props: Props) => {
   );
 
   const saveProjectAsWithStorageProvider = React.useCallback(
-    async (requestedStorageProvider?: StorageProvider) => {
+    async (
+      options: ?{|
+        requestedStorageProvider?: StorageProvider,
+        forcedSavedAsLocation?: SaveAsLocation,
+      |}
+    ) => {
       if (!currentProject) return;
 
       saveUiSettings(state.editorTabs);
@@ -2428,6 +2436,8 @@ const MainFrame = (props: Props) => {
       const oldStorageProviderOperations = getStorageProviderOperations();
 
       // Get the methods to save the project using the *new* storage provider.
+      const requestedStorageProvider =
+        options && options.requestedStorageProvider;
       const newStorageProviderOperations = getStorageProviderOperations(
         requestedStorageProvider
       );
@@ -2453,8 +2463,9 @@ const MainFrame = (props: Props) => {
       const storageProviderInternalName = newStorageProvider.internalName;
 
       try {
-        let newSaveAsLocation: ?SaveAsLocation = null;
-        if (onChooseSaveProjectAsLocation) {
+        let newSaveAsLocation: ?SaveAsLocation =
+          options && options.forcedSavedAsLocation;
+        if (onChooseSaveProjectAsLocation && !newSaveAsLocation) {
           const { saveAsLocation } = await onChooseSaveProjectAsLocation({
             project: currentProject,
             fileMetadata: currentFileMetadata,
@@ -2462,19 +2473,19 @@ const MainFrame = (props: Props) => {
           if (!saveAsLocation) {
             return; // Save as was cancelled.
           }
+          newSaveAsLocation = saveAsLocation;
+        }
 
-          if (canFileMetadataBeSafelySavedAs && currentFileMetadata) {
-            const canProjectBeSafelySavedAs = await canFileMetadataBeSafelySavedAs(
-              currentFileMetadata,
-              {
-                showAlert,
-                showConfirmation,
-              }
-            );
+        if (canFileMetadataBeSafelySavedAs && currentFileMetadata) {
+          const canProjectBeSafelySavedAs = await canFileMetadataBeSafelySavedAs(
+            currentFileMetadata,
+            {
+              showAlert,
+              showConfirmation,
+            }
+          );
 
-            if (!canProjectBeSafelySavedAs) return;
-          }
-          newSaveAsLocation = saveAsLocation;
+          if (!canProjectBeSafelySavedAs) return;
         }
 
         const { wasSaved, fileMetadata } = await onSaveProjectAs(
@@ -3766,7 +3777,9 @@ const MainFrame = (props: Props) => {
           storageProviders={props.storageProviders}
           onChooseProvider={storageProvider => {
             openSaveToStorageProviderDialog(false);
-            saveProjectAsWithStorageProvider(storageProvider);
+            saveProjectAsWithStorageProvider({
+              requestedStorageProvider: storageProvider,
+            });
           }}
         />
       )}
@@ -3868,17 +3881,50 @@ const MainFrame = (props: Props) => {
           onLaunchPreview={
             hotReloadPreviewButtonProps.launchProjectDataOnlyPreview
           }
-          onClose={options => {
+          onClose={async options => {
+            if (hasUnsavedChanges) {
+              const response = await showConfirmation({
+                title: t`Leave the customization?`,
+                message: t`Do you want to quit the customization? All your changes will be lost.`,
+                confirmButtonLabel: t`Leave`,
+              });
+
+              if (!response) {
+                return;
+              }
+            }
+
             setQuickCustomizationDialogOpenedFromGameId(null);
-            if (options && options.tryAnotherGame) {
-              // Close the project so the user is back at where they can chose a game to customize
-              // which is probably the home page.
-              closeProject();
-              openHomePage();
+            closeProject();
+            openHomePage();
+            if (!hasUnsavedChanges) {
+              navigateToRoute('build');
             }
           }}
           onlineWebExporter={quickPublishOnlineWebExporter}
-          onSaveProject={saveProject}
+          onSaveProject={async () => {
+            // Automatically try to save project to the cloud.
+            const storageProvider = getStorageProvider();
+            if (
+              !['Empty', 'UrlStorageProvider', 'Cloud'].includes(
+                storageProvider.internalName
+              )
+            ) {
+              console.error(
+                `Unexpected storage provider ${
+                  storageProvider.internalName
+                } when saving project from quick customization dialog. Saving anyway.`
+              );
+            }
+
+            saveProjectAsWithStorageProvider({
+              requestedStorageProvider: CloudStorageProvider,
+              forcedSavedAsLocation: {
+                name: currentProject.getName(),
+              },
+            });
+            return;
+          }}
           isSavingProject={isSavingProject}
           canClose={true}
           sourceGameId={quickCustomizationDialogOpenedFromGameId}
diff --git a/newIDE/app/src/ObjectEditor/Editors/SimpleTileMapEditor.js b/newIDE/app/src/ObjectEditor/Editors/SimpleTileMapEditor.js
index dc5e6a4354a6..51a8665bddeb 100644
--- a/newIDE/app/src/ObjectEditor/Editors/SimpleTileMapEditor.js
+++ b/newIDE/app/src/ObjectEditor/Editors/SimpleTileMapEditor.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import type { EditorProps } from './EditorProps.flow';
-import ScrollView from '../../UI/ScrollView';
+import ScrollView, { type ScrollViewInterface } from '../../UI/ScrollView';
 import { ColumnStackLayout } from '../../UI/Layout';
 import SemiControlledTextField from '../../UI/SemiControlledTextField';
 import { Trans } from '@lingui/macro';
@@ -27,6 +27,7 @@ const SimpleTileMapEditor = ({
   resourceManagementProps,
   renderObjectNameField,
 }: EditorProps) => {
+  const scrollViewRef = React.useRef<?ScrollViewInterface>(null);
   const forceUpdate = useForceUpdate();
   const objectProperties = objectConfiguration.getProperties();
   const tileSize = parseFloat(objectProperties.get('tileSize').getValue());
@@ -128,6 +129,12 @@ const SimpleTileMapEditor = ({
     [columnCount, objectConfiguration, forceUpdate, onObjectUpdated]
   );
 
+  const onScrollY = React.useCallback(deltaY => {
+    if (scrollViewRef.current) {
+      scrollViewRef.current.scrollBy(deltaY);
+    }
+  }, []);
+
   const onChangeAtlasImage = React.useCallback(
     () => {
       if (onObjectUpdated) onObjectUpdated();
@@ -168,7 +175,7 @@ const SimpleTileMapEditor = ({
   );
 
   return (
-    <ScrollView>
+    <ScrollView ref={scrollViewRef}>
       <ColumnStackLayout noMargin>
         {!!renderObjectNameField && renderObjectNameField()}
         {/* TODO: Should this be a Select field with all possible values given the atlas image size? */}
@@ -208,8 +215,10 @@ const SimpleTileMapEditor = ({
               onSelectTileMapTile={onChangeTilesWithHitBox}
               showPaintingToolbar={false}
               allowMultipleSelection
+              allowRectangleSelection={false}
               onAtlasImageLoaded={onAtlasImageLoaded}
               interactive={true}
+              onScrollY={onScrollY}
             />
           </>
         )}
diff --git a/newIDE/app/src/Profile/AuthenticatedUserProvider.js b/newIDE/app/src/Profile/AuthenticatedUserProvider.js
index e909c16c8b45..d77a4a699e50 100644
--- a/newIDE/app/src/Profile/AuthenticatedUserProvider.js
+++ b/newIDE/app/src/Profile/AuthenticatedUserProvider.js
@@ -309,9 +309,11 @@ export default class AuthenticatedUserProvider extends React.Component<
     }
   };
 
-  _fetchUserProfileWithoutThrowingErrors = async () => {
+  _fetchUserProfileWithoutThrowingErrors = async (
+    options: ?{ dontNotifyAboutEmailVerification?: boolean }
+  ) => {
     try {
-      await this._fetchUserProfile();
+      await this._fetchUserProfile(options);
     } catch (error) {
       console.error(
         'Error while fetching the user profile - but ignoring it.',
@@ -320,7 +322,9 @@ export default class AuthenticatedUserProvider extends React.Component<
     }
   };
 
-  _fetchUserProfile = async () => {
+  _fetchUserProfile = async (
+    options: ?{ dontNotifyAboutEmailVerification?: boolean }
+  ) => {
     const { authentication } = this.props;
 
     this.setState(({ authenticatedUser }) => ({
@@ -561,7 +565,9 @@ export default class AuthenticatedUserProvider extends React.Component<
         // We call this function every time the user is fetched, as it will
         // automatically prevent the event to be sent if the user attributes haven't changed.
         identifyUserForAnalytics(this.state.authenticatedUser);
-        this._notifyUserAboutEmailVerification();
+        if (!options || !options.dontNotifyAboutEmailVerification) {
+          this._notifyUserAboutEmailVerification();
+        }
       }
     );
   };
@@ -919,6 +925,8 @@ export default class AuthenticatedUserProvider extends React.Component<
     if (!authentication) return;
 
     this.setState({
+      // This function is used for both account creation & login.
+      createAccountInProgress: true,
       loginInProgress: true,
       apiCallError: null,
       authenticatedUser: {
@@ -956,6 +964,7 @@ export default class AuthenticatedUserProvider extends React.Component<
       }
     }
     this.setState({
+      createAccountInProgress: false,
       loginInProgress: false,
       authenticatedUser: {
         ...this.state.authenticatedUser,
@@ -1083,7 +1092,10 @@ export default class AuthenticatedUserProvider extends React.Component<
         // by the API when fetched.
       }
 
-      await this._fetchUserProfileWithoutThrowingErrors();
+      await this._fetchUserProfileWithoutThrowingErrors({
+        // When creating an account, avoid showing the email verification dialog right away.
+        dontNotifyAboutEmailVerification: true,
+      });
       this.openCreateAccountDialog(false);
       sendSignupDone(form.email);
       const firebaseUser = this.state.authenticatedUser.firebaseUser;
diff --git a/newIDE/app/src/QuickCustomization/GameImage.js b/newIDE/app/src/QuickCustomization/GameImage.js
new file mode 100644
index 000000000000..88ee3a98c161
--- /dev/null
+++ b/newIDE/app/src/QuickCustomization/GameImage.js
@@ -0,0 +1,46 @@
+// @flow
+import * as React from 'react';
+
+const styles = {
+  image: {
+    width: '100%',
+    maxHeight: '325px',
+    objectFit: 'contain',
+    borderRadius: '16px',
+    boxSizing: 'border-box',
+    aspectRatio: '16 / 9',
+  },
+};
+
+type Props = {|
+  project: gdProject,
+|};
+
+const GameImage = ({ project }: Props) => {
+  const rocketUrl = 'res/quick_customization/quick_publish.svg';
+
+  const gameThumbnailUrl = React.useMemo(
+    () => {
+      const resourcesManager = project.getResourcesManager();
+      const thumbnailName = project
+        .getPlatformSpecificAssets()
+        .get('liluo', `thumbnail`);
+      if (!thumbnailName) return rocketUrl;
+      const path = resourcesManager.getResource(thumbnailName).getFile();
+      if (!path) return rocketUrl;
+
+      return path;
+    },
+    [project]
+  );
+
+  return (
+    <img
+      alt="Customize your game with GDevelop"
+      src={gameThumbnailUrl}
+      style={styles.image}
+    />
+  );
+};
+
+export default GameImage;
diff --git a/newIDE/app/src/QuickCustomization/PreviewLine.js b/newIDE/app/src/QuickCustomization/PreviewLine.js
new file mode 100644
index 000000000000..4801330707f8
--- /dev/null
+++ b/newIDE/app/src/QuickCustomization/PreviewLine.js
@@ -0,0 +1,60 @@
+// @flow
+import * as React from 'react';
+import { Trans } from '@lingui/macro';
+import FlatButton from '../UI/FlatButton';
+import { LineStackLayout } from '../UI/Layout';
+import Text from '../UI/Text';
+import PreviewIcon from '../UI/CustomSvgIcons/Preview';
+import { Column } from '../UI/Grid';
+import Paper from '../UI/Paper';
+import PlaySquared from '../UI/CustomSvgIcons/PlaySquared';
+import GDevelopThemeContext from '../UI/Theme/GDevelopThemeContext';
+import classes from './PreviewLine.module.css';
+import classNames from 'classnames';
+
+type Props = {|
+  onLaunchPreview: () => Promise<void>,
+|};
+
+const PreviewLine = ({ onLaunchPreview }: Props) => {
+  const gdevelopTheme = React.useContext(GDevelopThemeContext);
+
+  return (
+    <Column noMargin>
+      <Paper background="light">
+        <div
+          className={classNames({
+            [classes.previewLine]: true,
+          })}
+        >
+          <Column>
+            <LineStackLayout
+              alignItems="center"
+              justifyContent="space-between"
+              expand
+            >
+              <LineStackLayout
+                noMargin
+                alignItems="center"
+                justifyContent="center"
+              >
+                <PlaySquared htmlColor={gdevelopTheme.message.valid} />
+                <Text noMargin size="body">
+                  <Trans>Preview your game</Trans>
+                </Text>
+              </LineStackLayout>
+              <FlatButton
+                primary
+                label={<Trans>Preview</Trans>}
+                onClick={onLaunchPreview}
+                leftIcon={<PreviewIcon />}
+              />
+            </LineStackLayout>
+          </Column>
+        </div>
+      </Paper>
+    </Column>
+  );
+};
+
+export default PreviewLine;
diff --git a/newIDE/app/src/QuickCustomization/PreviewLine.module.css b/newIDE/app/src/QuickCustomization/PreviewLine.module.css
new file mode 100644
index 000000000000..abd68a72449b
--- /dev/null
+++ b/newIDE/app/src/QuickCustomization/PreviewLine.module.css
@@ -0,0 +1,5 @@
+.previewLine {
+  border-left: 4px solid var(--theme-message-valid-color);
+  border-radius: 6px;
+}
+
diff --git a/newIDE/app/src/QuickCustomization/QuickBehaviorsTweaker.js b/newIDE/app/src/QuickCustomization/QuickBehaviorsTweaker.js
index 561d70b390a8..5a34e7ed0b3c 100644
--- a/newIDE/app/src/QuickCustomization/QuickBehaviorsTweaker.js
+++ b/newIDE/app/src/QuickCustomization/QuickBehaviorsTweaker.js
@@ -9,9 +9,9 @@ import { enumerateObjectFolderOrObjects } from '.';
 import CompactPropertiesEditor from '../CompactPropertiesEditor';
 import propertiesMapToSchema from '../CompactPropertiesEditor/PropertiesMapToCompactSchema';
 import { Trans } from '@lingui/macro';
-import { CalloutCard } from '../UI/CalloutCard';
-import { LargeSpacer } from '../UI/Grid';
 import { useForceRecompute } from '../Utils/UseForceUpdate';
+import TipCard from './TipCard';
+import { Column } from '../UI/Grid';
 
 const gd: libGDevelop = global.gd;
 
@@ -34,29 +34,32 @@ const QuickBehaviorPropertiesEditor = ({
       if (schemaRecomputeTrigger) {
         // schemaRecomputeTrigger allows to invalidate the schema when required.
       }
-      return propertiesMapToSchema(
-        behavior.getProperties(),
-        behavior => behavior.getProperties(),
-        (behavior, name, value) => {
+      return propertiesMapToSchema({
+        properties: behavior.getProperties(),
+        getProperties: behavior => behavior.getProperties(),
+        onUpdateProperty: (behavior, name, value) => {
           behavior.updateProperty(name, value);
         },
         object,
-        'Basic-Quick'
-      );
+        visibility: 'Basic-Quick',
+        quickCustomizationVisibilities: behavior.getPropertiesQuickCustomizationVisibilities(),
+      });
     },
     [behavior, object, schemaRecomputeTrigger]
   );
 
   return (
-    <CompactPropertiesEditor
-      sectionTitleStyle="level2"
-      project={project}
-      schema={basicPropertiesSchema}
-      instances={[behavior]}
-      onInstancesModified={onBehaviorUpdated}
-      resourceManagementProps={resourceManagementProps}
-      onRefreshAllFields={forceRecomputeSchema}
-    />
+    <Column noMargin>
+      <CompactPropertiesEditor
+        sectionTitleStyle="level2"
+        project={project}
+        schema={basicPropertiesSchema}
+        instances={[behavior]}
+        onInstancesModified={onBehaviorUpdated}
+        resourceManagementProps={resourceManagementProps}
+        onRefreshAllFields={forceRecomputeSchema}
+      />
+    </Column>
   );
 };
 
@@ -107,6 +110,15 @@ export const QuickBehaviorsTweaker = ({
 }: Props) => {
   return (
     <ColumnStackLayout noMargin expand>
+      <TipCard
+        title={<Trans>These are behaviors</Trans>}
+        description={
+          <Trans>
+            Behaviors are attached to objects and make them alive. The rules of
+            the game can be created using behaviors and events.
+          </Trans>
+        }
+      />
       {mapFor(0, project.getLayoutsCount(), i => {
         const layout = project.getLayoutAt(i);
         const folderObjects = enumerateObjectFolderOrObjects(
@@ -127,7 +139,7 @@ export const QuickBehaviorsTweaker = ({
                 }
 
                 return (
-                  <ResponsiveLineStackLayout noMargin expand>
+                  <ResponsiveLineStackLayout noMargin expand key={object.ptr}>
                     <ObjectPreview object={object} project={project} />
                     <ColumnStackLayout noMargin expand noOverflowParent>
                       {behaviorNamesToTweak.map(behaviorName => {
@@ -140,6 +152,7 @@ export const QuickBehaviorsTweaker = ({
                             object={object}
                             onBehaviorUpdated={() => {}}
                             resourceManagementProps={resourceManagementProps}
+                            key={behavior.ptr}
                           />
                         );
                       })}
@@ -154,7 +167,12 @@ export const QuickBehaviorsTweaker = ({
             }
 
             return (
-              <ColumnStackLayout noMargin expand noOverflowParent>
+              <ColumnStackLayout
+                noMargin
+                expand
+                noOverflowParent
+                key={folderName}
+              >
                 <Text noMargin size={'sub-title'}>
                   {folderName}
                 </Text>
@@ -176,7 +194,12 @@ export const QuickBehaviorsTweaker = ({
         }
 
         return (
-          <ColumnStackLayout noMargin expand noOverflowParent>
+          <ColumnStackLayout
+            noMargin
+            expand
+            noOverflowParent
+            key={layout.getName()}
+          >
             {project.getLayoutsCount() > 1 && (
               <Text noMargin size={'block-title'}>
                 {layout.getName()}
@@ -186,30 +209,6 @@ export const QuickBehaviorsTweaker = ({
           </ColumnStackLayout>
         );
       }).filter(Boolean)}
-      <LargeSpacer />
-      <CalloutCard
-        renderImage={style => (
-          <img
-            src="res/quick_customization/tweak_gameplay.svg"
-            style={style}
-            alt=""
-          />
-        )}
-      >
-        <ResponsiveLineStackLayout noMargin expand alignItems="stretch">
-          <ColumnStackLayout alignItems="flex-start" expand noMargin>
-            <Text noMargin size="block-title">
-              <Trans>Making a fun game with behaviors</Trans>
-            </Text>
-            <Text noMargin size="body">
-              <Trans>
-                Behaviors are attached to objects and make them alive. The rules
-                of the game can be created using behaviors and events.
-              </Trans>
-            </Text>
-          </ColumnStackLayout>
-        </ResponsiveLineStackLayout>
-      </CalloutCard>
     </ColumnStackLayout>
   );
 };
diff --git a/newIDE/app/src/QuickCustomization/QuickCustomizationDialog.js b/newIDE/app/src/QuickCustomization/QuickCustomizationDialog.js
index 71123167a35c..e689d3285cc8 100644
--- a/newIDE/app/src/QuickCustomization/QuickCustomizationDialog.js
+++ b/newIDE/app/src/QuickCustomization/QuickCustomizationDialog.js
@@ -5,20 +5,19 @@ import { renderQuickCustomization, useQuickCustomizationState } from '.';
 import { Trans } from '@lingui/macro';
 import { type ResourceManagementProps } from '../ResourcesList/ResourceSource';
 import FlatButton from '../UI/FlatButton';
-import { ColumnStackLayout, LineStackLayout } from '../UI/Layout';
-import Text from '../UI/Text';
-import { useResponsiveWindowSize } from '../UI/Responsive/ResponsiveWindowMeasurer';
-import Paper from '../UI/Paper';
+import { ColumnStackLayout } from '../UI/Layout';
 import { type Exporter } from '../ExportAndShare/ShareDialog';
 import { useGameAndBuildsManager } from '../Utils/UseGameAndBuildsManager';
 import { sendQuickCustomizationProgress } from '../Utils/Analytics/EventSender';
 import ScrollView from '../UI/ScrollView';
+import PreviewLine from './PreviewLine';
+import UnsavedChangesContext from '../MainFrame/UnsavedChangesContext';
 
 type Props = {|
   project: gdProject,
   resourceManagementProps: ResourceManagementProps,
   onLaunchPreview: () => Promise<void>,
-  onClose: (?{| tryAnotherGame: boolean |}) => void,
+  onClose: (?{| tryAnotherGame: boolean |}) => Promise<void>,
   onlineWebExporter: Exporter,
   onSaveProject: () => Promise<void>,
   isSavingProject: boolean,
@@ -37,14 +36,12 @@ export const QuickCustomizationDialog = ({
   canClose,
   sourceGameId,
 }: Props) => {
+  const { triggerUnsavedChanges } = React.useContext(UnsavedChangesContext);
   const gameAndBuildsManager = useGameAndBuildsManager({
     project,
     copyLeaderboardsAndMultiplayerLobbiesFromGameId: sourceGameId,
   });
   const quickCustomizationState = useQuickCustomizationState({ onClose });
-  const { windowSize } = useResponsiveWindowSize();
-
-  const isMediumOrSmaller = windowSize === 'small' || windowSize === 'medium';
 
   const onContinueQuickCustomization = React.useCallback(
     () => {
@@ -60,12 +57,7 @@ export const QuickCustomizationDialog = ({
     [onClose]
   );
 
-  const {
-    title,
-    titleRightContent,
-    titleTopContent,
-    content,
-  } = renderQuickCustomization({
+  const { title, content, showPreview } = renderQuickCustomization({
     project,
     gameAndBuildsManager,
     resourceManagementProps,
@@ -91,70 +83,64 @@ export const QuickCustomizationDialog = ({
     [quickCustomizationState.step.name, sourceGameId, name]
   );
 
+  React.useEffect(
+    () => {
+      triggerUnsavedChanges();
+    },
+    // Trigger unsaved changes when the dialog is opened,
+    // so the user is warned if they try to close the dialog.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
   return (
     <Dialog
       open
-      title={null}
-      fixedContent={
-        isMediumOrSmaller ? (
-          <Paper background="dark">{titleTopContent}</Paper>
-        ) : null
-      }
+      title={title}
       maxWidth="md"
       fullHeight
       actions={
-        !quickCustomizationState.step.shouldHideNavigationButtons
+        !!quickCustomizationState.step.nextLabel
           ? [
-              quickCustomizationState.canGoToPreviousStep ? (
-                <FlatButton
-                  key="previous"
-                  label={<Trans>Back</Trans>}
-                  onClick={quickCustomizationState.goToPreviousStep}
-                  disabled={
-                    !quickCustomizationState.canGoToPreviousStep ||
-                    quickCustomizationState.isNavigationDisabled
-                  }
-                />
-              ) : null,
               <DialogPrimaryButton
                 key="next"
                 label={quickCustomizationState.step.nextLabel}
                 primary
                 onClick={quickCustomizationState.goToNextStep}
                 disabled={quickCustomizationState.isNavigationDisabled}
+                fullWidth
               />,
             ]
-          : undefined
+          : []
       }
       secondaryActions={[
-        quickCustomizationState.step.shouldHideNavigationButtons ||
-        !canClose ? null : (
+        !quickCustomizationState.canGoToPreviousStep ? null : (
           <FlatButton
-            key="close"
-            label={<Trans>Close</Trans>}
-            primary={false}
-            onClick={onClose}
-            disabled={quickCustomizationState.isNavigationDisabled}
+            key="previous"
+            primary
+            label={<Trans>Back</Trans>}
+            onClick={quickCustomizationState.goToPreviousStep}
+            disabled={
+              !quickCustomizationState.canGoToPreviousStep ||
+              quickCustomizationState.isNavigationDisabled
+            }
+            fullWidth
           />
         ),
       ]}
+      onRequestClose={canClose ? onClose : undefined}
       flexBody
+      actionsFullWidthOnMobile
+      cannotBeDismissed={quickCustomizationState.isNavigationDisabled}
     >
-      <ScrollView key={quickCustomizationState.step.name}>
-        <ColumnStackLayout noMargin expand>
-          <LineStackLayout
-            noMargin
-            alignItems="center"
-            justifyContent="space-between"
-          >
-            <Text noMargin size={'title'}>
-              {title}
-            </Text>
-            {!isMediumOrSmaller ? titleRightContent : null}
-          </LineStackLayout>
-          {content}
-        </ColumnStackLayout>
-      </ScrollView>
+      <ColumnStackLayout noMargin expand>
+        <ScrollView key={quickCustomizationState.step.name}>
+          <ColumnStackLayout noMargin expand>
+            {content}
+          </ColumnStackLayout>
+        </ScrollView>
+        {showPreview && <PreviewLine onLaunchPreview={onLaunchPreview} />}
+      </ColumnStackLayout>
     </Dialog>
   );
 };
diff --git a/newIDE/app/src/QuickCustomization/QuickCustomizationGameTiles.js b/newIDE/app/src/QuickCustomization/QuickCustomizationGameTiles.js
index a2937467ff68..2d97a2a78e63 100644
--- a/newIDE/app/src/QuickCustomization/QuickCustomizationGameTiles.js
+++ b/newIDE/app/src/QuickCustomization/QuickCustomizationGameTiles.js
@@ -78,6 +78,7 @@ export const QuickCustomizationGameTiles = ({
                       thumbnailTitleByLocale
                     )}
                     key={exampleShortHeader.name}
+                    useQuickCustomizationThumbnail
                   />
                 )
               )
diff --git a/newIDE/app/src/QuickCustomization/QuickCustomizationPropertiesVisibilityDialog.js b/newIDE/app/src/QuickCustomization/QuickCustomizationPropertiesVisibilityDialog.js
new file mode 100644
index 000000000000..7052bd0b66a3
--- /dev/null
+++ b/newIDE/app/src/QuickCustomization/QuickCustomizationPropertiesVisibilityDialog.js
@@ -0,0 +1,114 @@
+// @flow
+import { t, Trans } from '@lingui/macro';
+
+import * as React from 'react';
+import Dialog from '../UI/Dialog';
+import FlatButton from '../UI/FlatButton';
+import { mapFor } from '../Utils/MapFor';
+import Text from '../UI/Text';
+import SelectField from '../UI/SelectField';
+import SelectOption from '../UI/SelectOption';
+import { LineStackLayout } from '../UI/Layout';
+import useForceUpdate from '../Utils/UseForceUpdate';
+
+const gd: libGDevelop = global.gd;
+
+const getVisibilityForProperty = (
+  propertyName: string,
+  propertiesQuickCustomizationVisibilities: gdQuickCustomizationVisibilitiesContainer
+) => {
+  return propertiesQuickCustomizationVisibilities.get(propertyName);
+};
+
+type Props = {|
+  propertyNames: string[],
+  open: boolean,
+  onClose: () => void,
+  propertiesQuickCustomizationVisibilities: gdQuickCustomizationVisibilitiesContainer,
+|};
+
+export default function QuickCustomizationPropertiesVisibilityDialog({
+  open,
+  onClose,
+  propertyNames,
+  propertiesQuickCustomizationVisibilities,
+}: Props) {
+  const forceUpdate = useForceUpdate();
+
+  return (
+    <Dialog
+      title={<Trans>Quick Customization: Behavior properties</Trans>}
+      secondaryActions={[
+        <FlatButton
+          key="close"
+          label={<Trans>Close</Trans>}
+          primary={false}
+          onClick={onClose}
+        />,
+      ]}
+      open
+      onRequestClose={onClose}
+      flexColumnBody
+      fullHeight
+    >
+      {mapFor(0, propertyNames.length, i => {
+        const propertyName = propertyNames[i];
+        const value = getVisibilityForProperty(
+          propertyName,
+          propertiesQuickCustomizationVisibilities
+        );
+
+        return (
+          <LineStackLayout
+            key={propertyName}
+            justifyContent="flex-start"
+            alignItems="center"
+          >
+            <Text>{propertyName}</Text>
+            <SelectField
+              margin="none"
+              value={value}
+              onChange={(e, i, newValue: string) => {
+                const newQuickCustomizationVisibility = parseInt(newValue, 10);
+                if (
+                  [
+                    gd.QuickCustomization.Visible,
+                    gd.QuickCustomization.Hidden,
+                    gd.QuickCustomization.Default,
+                  ].includes(newQuickCustomizationVisibility)
+                ) {
+                  propertiesQuickCustomizationVisibilities.set(
+                    propertyName,
+                    // $FlowIgnore: We checked that newQuickCustomizationVisibility is a valid visibility
+                    newQuickCustomizationVisibility
+                  );
+                  forceUpdate();
+                  return;
+                }
+
+                propertiesQuickCustomizationVisibilities.set(
+                  propertyName,
+                  gd.QuickCustomization.Default
+                );
+                forceUpdate();
+              }}
+            >
+              <SelectOption
+                value={gd.QuickCustomization.Default}
+                label={t`Default`}
+              />
+              <SelectOption
+                value={gd.QuickCustomization.Visible}
+                label={t`Visible`}
+              />
+              <SelectOption
+                value={gd.QuickCustomization.Hidden}
+                label={t`Hidden`}
+              />
+            </SelectField>
+          </LineStackLayout>
+        );
+      })}
+    </Dialog>
+  );
+}
diff --git a/newIDE/app/src/QuickCustomization/QuickObjectReplacer.js b/newIDE/app/src/QuickCustomization/QuickObjectReplacer.js
index 9981071f2cd6..6d852204af07 100644
--- a/newIDE/app/src/QuickCustomization/QuickObjectReplacer.js
+++ b/newIDE/app/src/QuickCustomization/QuickObjectReplacer.js
@@ -2,15 +2,14 @@
 import * as React from 'react';
 import { ObjectPreview } from './ObjectPreview';
 import { mapFor } from '../Utils/MapFor';
-import { ColumnStackLayout, ResponsiveLineStackLayout } from '../UI/Layout';
+import { ColumnStackLayout } from '../UI/Layout';
 import FlatButton from '../UI/FlatButton';
 import AssetSwappingDialog from '../AssetStore/AssetSwappingDialog';
 import { type ResourceManagementProps } from '../ResourcesList/ResourceSource';
 import Text from '../UI/Text';
 import { Trans } from '@lingui/macro';
 import { enumerateObjectFolderOrObjects } from '.';
-import { CalloutCard } from '../UI/CalloutCard';
-import { LargeSpacer } from '../UI/Grid';
+import TipCard from './TipCard';
 
 type Props = {|
   project: gdProject,
@@ -35,6 +34,15 @@ export const QuickObjectReplacer = ({
 
   return (
     <ColumnStackLayout noMargin expand>
+      <TipCard
+        title={<Trans>These are objects</Trans>}
+        description={
+          <Trans>
+            Each character, player, obstacle, background, item, etc. is an
+            object. Objects are the building blocks of your game.
+          </Trans>
+        }
+      />
       {mapFor(0, project.getLayoutsCount(), i => {
         const layout = project.getLayoutAt(i);
         const folderObjects = enumerateObjectFolderOrObjects(
@@ -44,7 +52,7 @@ export const QuickObjectReplacer = ({
         if (!folderObjects.length) return null;
 
         return (
-          <ColumnStackLayout noMargin expand>
+          <ColumnStackLayout noMargin key={layout.getName()}>
             {project.getLayoutsCount() > 1 && (
               <Text noMargin size={'block-title'}>
                 {layout.getName()}
@@ -52,13 +60,13 @@ export const QuickObjectReplacer = ({
             )}
             {folderObjects.map(({ folderName, objects }) => {
               return (
-                <ColumnStackLayout noMargin expand>
+                <ColumnStackLayout noMargin key={folderName}>
                   <Text noMargin size={'sub-title'}>
                     {folderName}
                   </Text>
                   <div style={styles.objectsContainer}>
                     {objects.map(object => (
-                      <ColumnStackLayout noMargin>
+                      <ColumnStackLayout noMargin key={object.ptr}>
                         <ObjectPreview object={object} project={project} />
                         <FlatButton
                           primary
@@ -76,30 +84,6 @@ export const QuickObjectReplacer = ({
           </ColumnStackLayout>
         );
       })}
-      <LargeSpacer />
-      <CalloutCard
-        renderImage={style => (
-          <img
-            src="res/quick_customization/replace_objects.svg"
-            style={style}
-            alt=""
-          />
-        )}
-      >
-        <ResponsiveLineStackLayout noMargin expand alignItems="stretch">
-          <ColumnStackLayout alignItems="flex-start" expand noMargin>
-            <Text noMargin size="block-title">
-              <Trans>Objects are everything in your game</Trans>
-            </Text>
-            <Text noMargin size="body">
-              <Trans>
-                Each character, player, obstacle, background, item, etc. is an
-                object. Objects are the building blocks of your game.
-              </Trans>
-            </Text>
-          </ColumnStackLayout>
-        </ResponsiveLineStackLayout>
-      </CalloutCard>
       {selectedObjectToSwap && (
         <AssetSwappingDialog
           project={project}
@@ -111,6 +95,7 @@ export const QuickObjectReplacer = ({
           onClose={() => {
             setSelectedObjectToSwap(null);
           }}
+          minimalUI
         />
       )}
     </ColumnStackLayout>
diff --git a/newIDE/app/src/QuickCustomization/QuickPublish.js b/newIDE/app/src/QuickCustomization/QuickPublish.js
index dc6d0dc456eb..74d8429e0551 100644
--- a/newIDE/app/src/QuickCustomization/QuickPublish.js
+++ b/newIDE/app/src/QuickCustomization/QuickPublish.js
@@ -4,27 +4,34 @@ import { Trans } from '@lingui/macro';
 import EventsFunctionsExtensionsContext from '../EventsFunctionsExtensionsLoader/EventsFunctionsExtensionsContext';
 import ExportLauncher from '../ExportAndShare/ShareDialog/ExportLauncher';
 import AuthenticatedUserContext from '../Profile/AuthenticatedUserContext';
-import { ColumnStackLayout } from '../UI/Layout';
+import { ColumnStackLayout, ResponsiveLineStackLayout } from '../UI/Layout';
 import RaisedButton from '../UI/RaisedButton';
 import { I18n } from '@lingui/react';
 import { type Exporter } from '../ExportAndShare/ShareDialog';
 import Text from '../UI/Text';
 import { type GameAndBuildsManager } from '../Utils/UseGameAndBuildsManager';
 import FlatButton from '../UI/FlatButton';
-import { Spacer } from '../UI/Grid';
-import TextButton from '../UI/TextButton';
+import { Column, Line, Spacer } from '../UI/Grid';
 import classes from './QuickPublish.module.css';
 import classNames from 'classnames';
+import Paper from '../UI/Paper';
+import Google from '../UI/CustomSvgIcons/Google';
+import GitHub from '../UI/CustomSvgIcons/GitHub';
+import Apple from '../UI/CustomSvgIcons/Apple';
+import TextButton from '../UI/TextButton';
+import Trash from '../UI/CustomSvgIcons/Trash';
+import GameImage from './GameImage';
+import ShareLink from '../UI/ShareDialog/ShareLink';
+import { getGameUrl } from '../Utils/GDevelopServices/Game';
 
 type Props = {|
   project: gdProject,
   gameAndBuildsManager: GameAndBuildsManager,
   setIsNavigationDisabled: (isNavigationDisabled: boolean) => void,
-  shouldAutomaticallyStartExport: boolean,
   onlineWebExporter: Exporter,
   onSaveProject: () => Promise<void>,
   isSavingProject: boolean,
-  onClose: () => void,
+  onClose: () => Promise<void>,
   onContinueQuickCustomization: () => void,
   onTryAnotherGame: () => void,
 |};
@@ -33,7 +40,6 @@ export const QuickPublish = ({
   project,
   gameAndBuildsManager,
   setIsNavigationDisabled,
-  shouldAutomaticallyStartExport,
   onlineWebExporter,
   onSaveProject,
   isSavingProject,
@@ -43,6 +49,7 @@ export const QuickPublish = ({
 }: Props) => {
   const authenticatedUser = React.useContext(AuthenticatedUserContext);
   const { profile, onOpenCreateAccountDialog } = authenticatedUser;
+  const { game } = gameAndBuildsManager;
   const eventsFunctionsExtensionsState = React.useContext(
     EventsFunctionsExtensionsContext
   );
@@ -61,129 +68,162 @@ export const QuickPublish = ({
 
   React.useEffect(
     () => {
-      if (profile && shouldAutomaticallyStartExport) {
+      if (profile && exportState === '') {
+        // Save project & launch export as soon as the user is authenticated (or if they already were)
+        onSaveProject();
         launchExport();
       }
     },
-    [profile, shouldAutomaticallyStartExport, launchExport]
+    [profile, launchExport, onSaveProject, exportState]
   );
 
+  const gameUrl = game ? getGameUrl(game) : '';
+  const hasNotSavedProject = !profile && exportState === '';
+
   return (
-    <ColumnStackLayout noMargin expand alignItems="center">
-      <Spacer />
-      <img
-        alt="Publish your game with GDevelop"
-        src="res/quick_customization/quick_publish.svg"
-        className={classNames({
-          [classes.illustrationImage]: true,
-          [classes.animatedRocket]: exportState === 'started',
-        })}
-      />
-      {profile ? (
-        <I18n>
-          {({ i18n }) => (
-            <ColumnStackLayout noMargin expand alignItems="stretch">
-              <ExportLauncher
-                ref={exportLauncherRef}
-                i18n={i18n}
-                project={project}
-                onSaveProject={onSaveProject}
-                isSavingProject={isSavingProject}
-                onChangeSubscription={() => {
-                  // Nothing to do.
-                }}
-                authenticatedUser={authenticatedUser}
-                eventsFunctionsExtensionsState={eventsFunctionsExtensionsState}
-                exportPipeline={onlineWebExporter.exportPipeline}
-                setIsNavigationDisabled={setIsNavigationDisabled}
-                gameAndBuildsManager={gameAndBuildsManager}
-                uiMode="minimal"
-                onExportLaunched={() => {
-                  setExportState('started');
-                }}
-                onExportErrored={() => {
-                  setExportState('errored');
-                }}
-                onExportSucceeded={() => {
-                  setExportState('succeeded');
-                }}
-              />
-              {exportState === 'succeeded' ? (
-                <ColumnStackLayout noMargin>
-                  <Text size="body" align="center">
-                    <Trans>Congratulations! Your game is now published.</Trans>
-                  </Text>
-                  <RaisedButton
-                    primary
-                    label={<Trans>Continue tweaking the game</Trans>}
-                    onClick={onContinueQuickCustomization}
-                  />
-                  <FlatButton
-                    label={<Trans>Edit the full game</Trans>}
-                    onClick={onClose}
-                  />
-                  <Text size="body2" color="secondary" align="center">
-                    <Trans>or</Trans>
-                  </Text>
-                  <FlatButton
-                    label={<Trans>Try with another game</Trans>}
-                    onClick={onTryAnotherGame}
-                  />
-                </ColumnStackLayout>
-              ) : !shouldAutomaticallyStartExport && exportState === '' ? (
+    <ColumnStackLayout
+      noMargin
+      expand
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <ColumnStackLayout>
+        <GameImage project={project} />
+        <Spacer />
+        {profile ? (
+          <I18n>
+            {({ i18n }) => (
+              <ColumnStackLayout noMargin expand alignItems="stretch">
+                <ExportLauncher
+                  ref={exportLauncherRef}
+                  i18n={i18n}
+                  project={project}
+                  onSaveProject={onSaveProject}
+                  isSavingProject={isSavingProject}
+                  onChangeSubscription={() => {
+                    // Nothing to do.
+                  }}
+                  authenticatedUser={authenticatedUser}
+                  eventsFunctionsExtensionsState={
+                    eventsFunctionsExtensionsState
+                  }
+                  exportPipeline={onlineWebExporter.exportPipeline}
+                  setIsNavigationDisabled={setIsNavigationDisabled}
+                  gameAndBuildsManager={gameAndBuildsManager}
+                  uiMode="minimal"
+                  onExportLaunched={() => {
+                    setExportState('started');
+                  }}
+                  onExportErrored={() => {
+                    setExportState('errored');
+                  }}
+                  onExportSucceeded={() => {
+                    setExportState('succeeded');
+                  }}
+                />
+                {exportState === 'succeeded' ? (
+                  <Paper background="light">
+                    <div
+                      className={classNames({
+                        [classes.paperContainer]: true,
+                      })}
+                    >
+                      <ColumnStackLayout>
+                        <Text size="body" align="center">
+                          <Trans>Share your game with your friends!</Trans>
+                        </Text>
+                        {gameUrl && <ShareLink url={gameUrl} />}
+                      </ColumnStackLayout>
+                    </div>
+                  </Paper>
+                ) : exportState === 'errored' ? (
+                  <ColumnStackLayout noMargin>
+                    <Text size="body" align="center">
+                      <Trans>
+                        An error occurred while exporting your game. Verify your
+                        internet connection and try again.
+                      </Trans>
+                    </Text>
+                    <RaisedButton
+                      primary
+                      label={<Trans>Try again</Trans>}
+                      onClick={launchExport}
+                    />
+                  </ColumnStackLayout>
+                ) : null}
+              </ColumnStackLayout>
+            )}
+          </I18n>
+        ) : (
+          <Column noMargin>
+            <Paper background="light">
+              <div
+                className={classNames({
+                  [classes.paperContainer]: true,
+                })}
+              >
                 <ColumnStackLayout>
-                  <FlatButton
-                    label={<Trans>Go back and tweak the game</Trans>}
-                    onClick={onContinueQuickCustomization}
-                  />
-                  <Text size="body2" color="secondary" align="center">
-                    <Trans>or</Trans>
-                  </Text>
-                  <FlatButton
-                    label={<Trans>Edit the full game</Trans>}
-                    onClick={onClose}
-                  />
-                </ColumnStackLayout>
-              ) : exportState === 'errored' ? (
-                <ColumnStackLayout noMargin>
                   <Text size="body" align="center">
                     <Trans>
-                      An error occurred while exporting your game. Verify your
-                      internet connection and try again.
+                      Create a GDevelop account to save your changes and keep
+                      personalizing your game
                     </Trans>
                   </Text>
-                  <RaisedButton
-                    primary
-                    label={<Trans>Try again</Trans>}
-                    onClick={launchExport}
-                  />
+                  <ResponsiveLineStackLayout
+                    expand
+                    justifyContent="center"
+                    alignItems="center"
+                    noMargin
+                  >
+                    <RaisedButton
+                      primary
+                      icon={<Google />}
+                      label={<Trans>Google</Trans>}
+                      onClick={onOpenCreateAccountDialog}
+                      fullWidth
+                    />
+                    <RaisedButton
+                      primary
+                      icon={<GitHub />}
+                      label={<Trans>Github</Trans>}
+                      onClick={onOpenCreateAccountDialog}
+                      fullWidth
+                    />
+                    <RaisedButton
+                      primary
+                      icon={<Apple />}
+                      label={<Trans>Apple</Trans>}
+                      onClick={onOpenCreateAccountDialog}
+                      fullWidth
+                    />
+                  </ResponsiveLineStackLayout>
                   <FlatButton
-                    label={<Trans>Edit the full game</Trans>}
-                    onClick={onClose}
+                    primary
+                    label={<Trans>Use your email</Trans>}
+                    onClick={onOpenCreateAccountDialog}
                   />
                 </ColumnStackLayout>
-              ) : null}
-            </ColumnStackLayout>
-          )}
-        </I18n>
-      ) : (
-        <ColumnStackLayout noMargin>
-          <Text size="body" align="center">
-            <Trans>
-              Create a GDevelop account to share your game in a few seconds.
-            </Trans>
-          </Text>
-          <RaisedButton
-            primary
-            label={<Trans>Create an account</Trans>}
-            onClick={onOpenCreateAccountDialog}
-            keyboardFocused
-          />
+              </div>
+            </Paper>
+          </Column>
+        )}
+      </ColumnStackLayout>
+
+      {exportState !== 'started' && (
+        <Line justifyContent="center" alignItems="center">
           <TextButton
-            label={<Trans>Skip and edit the full game</Trans>}
+            secondary
             onClick={onClose}
+            label={
+              hasNotSavedProject ? (
+                <Trans>Leave and lose all changes</Trans>
+              ) : (
+                <Trans>Finish and close</Trans>
+              )
+            }
+            icon={hasNotSavedProject ? <Trash /> : null}
           />
-        </ColumnStackLayout>
+        </Line>
       )}
     </ColumnStackLayout>
   );
diff --git a/newIDE/app/src/QuickCustomization/QuickPublish.module.css b/newIDE/app/src/QuickCustomization/QuickPublish.module.css
index 5b93d5c32fc0..55a42b865c9d 100644
--- a/newIDE/app/src/QuickCustomization/QuickPublish.module.css
+++ b/newIDE/app/src/QuickCustomization/QuickPublish.module.css
@@ -1,20 +1,3 @@
-.illustrationImage {
-  width: 100px;
-  aspect-ratio: 117 / 162;
-}
-
-.animatedRocket {
-  animation: animatedRocket ease-in-out 1.2s infinite;
-}
-
-@keyframes animatedRocket {
-    0% { transform: rotate(0deg); }
-    15% { transform: rotate(4deg); }
-    25% { transform: rotate(5deg); }
-    35% { transform: rotate(4deg); }
-    50% { transform: rotate(0deg); }
-    65% { transform: rotate(-4deg); }
-    75% { transform: rotate(-5deg); }
-    85% { transform: rotate(-4deg); }
-    100% { transform: rotate(0deg); }
-}
+.paperContainer {
+  padding: 16px;
+}
\ No newline at end of file
diff --git a/newIDE/app/src/QuickCustomization/QuickTitleTweaker.js b/newIDE/app/src/QuickCustomization/QuickTitleTweaker.js
new file mode 100644
index 000000000000..75e414a888cb
--- /dev/null
+++ b/newIDE/app/src/QuickCustomization/QuickTitleTweaker.js
@@ -0,0 +1,188 @@
+// @flow
+import * as React from 'react';
+import { ColumnStackLayout, ResponsiveLineStackLayout } from '../UI/Layout';
+import { type ResourceManagementProps } from '../ResourcesList/ResourceSource';
+import CompactPropertiesEditor from '../CompactPropertiesEditor';
+import propertiesMapToSchema from '../CompactPropertiesEditor/PropertiesMapToCompactSchema';
+import { useForceRecompute } from '../Utils/UseForceUpdate';
+import { Column, Line } from '../UI/Grid';
+import GameImage from './GameImage';
+import Text from '../UI/Text';
+import { Trans } from '@lingui/macro';
+
+const gd: libGDevelop = global.gd;
+
+export const findTitleObject = (
+  objectFolderOrObject: gdObjectFolderOrObject
+): ?gdObject => {
+  for (let i = 0; i < objectFolderOrObject.getChildrenCount(); i++) {
+    const child = objectFolderOrObject.getChildAt(i);
+
+    if (child.isFolder()) {
+      const foundTitleObject = findTitleObject(child);
+      if (foundTitleObject) {
+        return foundTitleObject;
+      }
+    } else {
+      const object = child.getObject();
+      if (object.getName() === 'Title') {
+        return object;
+      }
+    }
+  }
+
+  return null;
+};
+
+const QuickObjectPropertiesEditor = ({
+  project,
+  object,
+  objectConfiguration,
+  onObjectUpdated,
+  resourceManagementProps,
+}: {|
+  project: gdProject,
+  object: gdObject,
+  objectConfiguration: gdObjectConfiguration,
+  onObjectUpdated: () => void,
+  resourceManagementProps: ResourceManagementProps,
+|}) => {
+  const [schemaRecomputeTrigger, forceRecomputeSchema] = useForceRecompute();
+
+  // Properties:
+  const basicPropertiesSchema = React.useMemo(
+    () => {
+      if (schemaRecomputeTrigger) {
+        // schemaRecomputeTrigger allows to invalidate the schema when required.
+      }
+      const properties = objectConfiguration.getProperties();
+      const schema = propertiesMapToSchema({
+        properties,
+        getProperties: object => object.getProperties(),
+        onUpdateProperty: (object, name, value) =>
+          object.updateProperty(name, value),
+        object,
+        visibility: 'Basic-Quick',
+      });
+
+      return schema;
+    },
+    [objectConfiguration, schemaRecomputeTrigger, object]
+  );
+
+  return (
+    <ColumnStackLayout>
+      <GameImage project={project} />
+      <Column noMargin>
+        <CompactPropertiesEditor
+          project={project}
+          schema={basicPropertiesSchema}
+          instances={[objectConfiguration]}
+          onInstancesModified={onObjectUpdated}
+          resourceManagementProps={resourceManagementProps}
+          onRefreshAllFields={forceRecomputeSchema}
+        />
+      </Column>
+    </ColumnStackLayout>
+  );
+};
+
+type Props = {|
+  project: gdProject,
+  resourceManagementProps: ResourceManagementProps,
+|};
+
+export const QuickTitleTweaker = ({
+  project,
+  resourceManagementProps,
+}: Props) => {
+  const titleObject = React.useMemo(
+    () => {
+      for (let i = 0; i < project.getLayoutsCount(); i++) {
+        const layout = project.getLayoutAt(i);
+        const titleObject = findTitleObject(
+          layout.getObjects().getRootFolder()
+        );
+
+        if (titleObject) {
+          return titleObject;
+        }
+      }
+
+      return null;
+    },
+    [project]
+  );
+
+  const titleObjectConfiguration = React.useMemo(
+    () => {
+      if (!titleObject) {
+        return null;
+      }
+
+      const objectConfiguration = titleObject.getConfiguration();
+      // TODO: Workaround a bad design of ObjectJsImplementation. When getProperties
+      // and associated methods are redefined in JS, they have different arguments (
+      // see ObjectJsImplementation C++ implementation). If called directly here from JS,
+      // the arguments will be mismatched. To workaround this, always cast the object to
+      // a base gdObject to ensure C++ methods are called.
+      const objectConfigurationAsGd = gd.castObject(
+        objectConfiguration,
+        gd.ObjectConfiguration
+      );
+
+      return objectConfigurationAsGd;
+    },
+    [titleObject]
+  );
+
+  const updateProjectName = React.useCallback(
+    () => {
+      if (!titleObject || !titleObjectConfiguration) {
+        return;
+      }
+
+      const properties = titleObjectConfiguration.getProperties();
+      const textProperty = properties.get('text');
+      if (!textProperty) {
+        console.error('Title object does not have a "text" property.');
+        return;
+      }
+
+      const textPropertyValue = textProperty.getValue();
+      if (textPropertyValue !== project.getName()) {
+        project.setName(textPropertyValue);
+      }
+    },
+    [titleObject, titleObjectConfiguration, project]
+  );
+
+  if (!titleObject || !titleObjectConfiguration) {
+    return (
+      <Column expand alignItems="center" justifyContent="center">
+        <Line>
+          <Text>
+            <Trans>
+              Oops! Looks like this game has no logo set up, you can continue to
+              the next step.
+            </Trans>
+          </Text>
+        </Line>
+      </Column>
+    );
+  }
+
+  return (
+    <ResponsiveLineStackLayout noMargin expand>
+      <ColumnStackLayout noMargin expand noOverflowParent>
+        <QuickObjectPropertiesEditor
+          project={project}
+          object={titleObject}
+          objectConfiguration={titleObjectConfiguration}
+          onObjectUpdated={updateProjectName}
+          resourceManagementProps={resourceManagementProps}
+        />
+      </ColumnStackLayout>
+    </ResponsiveLineStackLayout>
+  );
+};
diff --git a/newIDE/app/src/QuickCustomization/TipCard.js b/newIDE/app/src/QuickCustomization/TipCard.js
new file mode 100644
index 000000000000..43d943eee0dc
--- /dev/null
+++ b/newIDE/app/src/QuickCustomization/TipCard.js
@@ -0,0 +1,39 @@
+// @flow
+import * as React from 'react';
+import Text from '../UI/Text';
+import { Column, Line } from '../UI/Grid';
+import Paper from '../UI/Paper';
+import Lightbulb from '../UI/CustomSvgIcons/Lightbulb';
+import { ColumnStackLayout } from '../UI/Layout';
+
+type Props = {|
+  title: React.Node,
+  description: React.Node,
+|};
+
+const TipCard = ({ title, description }: Props) => {
+  return (
+    <Column noMargin>
+      <Paper background="light">
+        <Line alignItems="flex-start" justifyContent="flex-start" expand>
+          <Column alignItems="center" justifyContent="flex-start">
+            <Lightbulb />
+          </Column>
+          <ColumnStackLayout
+            alignItems="flex-start"
+            justifyContent="flex-start"
+          >
+            <Text noMargin size="sub-title">
+              {title}
+            </Text>
+            <Text noMargin size="body">
+              {description}
+            </Text>
+          </ColumnStackLayout>
+        </Line>
+      </Paper>
+    </Column>
+  );
+};
+
+export default TipCard;
diff --git a/newIDE/app/src/QuickCustomization/index.js b/newIDE/app/src/QuickCustomization/index.js
index 9e29a6d3e2f0..12a4d9e5b62f 100644
--- a/newIDE/app/src/QuickCustomization/index.js
+++ b/newIDE/app/src/QuickCustomization/index.js
@@ -4,52 +4,51 @@ import { QuickObjectReplacer } from './QuickObjectReplacer';
 import { QuickBehaviorsTweaker } from './QuickBehaviorsTweaker';
 import { type ResourceManagementProps } from '../ResourcesList/ResourceSource';
 import { QuickPublish } from './QuickPublish';
-import { ColumnStackLayout, LineStackLayout } from '../UI/Layout';
-import Text from '../UI/Text';
-import FlatButton from '../UI/FlatButton';
 import { Trans } from '@lingui/macro';
-import PreviewIcon from '../UI/CustomSvgIcons/Preview';
 import { type Exporter } from '../ExportAndShare/ShareDialog';
 import { mapFor } from '../Utils/MapFor';
 import { canSwapAssetOfObject } from '../AssetStore/AssetSwapper';
 import { type GameAndBuildsManager } from '../Utils/UseGameAndBuildsManager';
+import { QuickTitleTweaker } from './QuickTitleTweaker';
 
 const gd: libGDevelop = global.gd;
 
-type StepName = 'replace-objects' | 'tweak-behaviors' | 'publish';
+type StepName = 'replace-objects' | 'tweak-behaviors' | 'game-logo' | 'publish';
 type Step = {|
   name: StepName,
   canPreview: boolean,
   title: React.Node,
-  nextLabel: React.Node,
-  shouldHideNavigationButtons?: boolean,
+  nextLabel?: React.Node,
 |};
 
 const steps: Array<Step> = [
   {
     name: 'replace-objects',
     canPreview: true,
-    title: <Trans>Personalize your game objects art</Trans>,
+    title: <Trans>Choose your game art</Trans>,
     nextLabel: <Trans>Next: Tweak Gameplay</Trans>,
   },
   {
     name: 'tweak-behaviors',
     canPreview: true,
     title: <Trans>Tweak gameplay</Trans>,
-    nextLabel: <Trans>Next: Try & Publish</Trans>,
+    nextLabel: <Trans>Next: Game logo</Trans>,
+  },
+  {
+    name: 'game-logo',
+    canPreview: true,
+    title: <Trans>Make your game logo</Trans>,
+    nextLabel: <Trans>Next</Trans>,
   },
   {
     name: 'publish',
     canPreview: false,
-    title: <Trans>Publish and try your game</Trans>,
-    nextLabel: <Trans>Finish</Trans>,
-    shouldHideNavigationButtons: true,
+    title: <Trans>Save your game</Trans>,
   },
 ];
 
 export type QuickCustomizationState = {|
   isNavigationDisabled: boolean,
-  shouldAutomaticallyStartExport: boolean,
   step: Step,
   goToNextStep: () => void,
   goToPreviousStep: () => void,
@@ -60,20 +59,15 @@ export type QuickCustomizationState = {|
 export const useQuickCustomizationState = ({
   onClose,
 }: {
-  onClose: () => void,
+  onClose: () => Promise<void>,
 }): QuickCustomizationState => {
   const [stepIndex, setStepIndex] = React.useState(0);
   const [isNavigationDisabled, setIsNavigationDisabled] = React.useState(false);
-  const [
-    shouldAutomaticallyStartExport,
-    setShouldAutomaticallyStartExport,
-  ] = React.useState(true);
 
   const step = steps[stepIndex];
 
   return {
     isNavigationDisabled,
-    shouldAutomaticallyStartExport,
     step,
     goToNextStep: React.useCallback(
       () => {
@@ -88,23 +82,19 @@ export const useQuickCustomizationState = ({
     ),
     goToPreviousStep: React.useCallback(
       () => {
-        if (step.name === 'publish') {
-          setShouldAutomaticallyStartExport(false);
-        }
         if (stepIndex !== 0) {
           setStepIndex(stepIndex - 1);
         }
       },
-      [step, stepIndex]
+      [stepIndex]
     ),
-    canGoToPreviousStep: stepIndex !== 0,
+    canGoToPreviousStep: stepIndex !== 0 && stepIndex !== steps.length - 1,
     setIsNavigationDisabled,
   };
 };
 
 export const enumerateObjectFolderOrObjects = (
-  objectFolderOrObject: gdObjectFolderOrObject,
-  depth: number = 0
+  objectFolderOrObject: gdObjectFolderOrObject
 ): Array<{ folderName: string, objects: Array<gdObject> }> => {
   const orderedFolderNames: Array<string> = [''];
   const folderObjects: { [key: string]: Array<gdObject> } = {
@@ -125,7 +115,7 @@ export const enumerateObjectFolderOrObjects = (
         folderObjects[folderName] || []);
       orderedFolderNames.push(folderName);
 
-      enumerateObjectFolderOrObjects(child, depth + 1).forEach(
+      enumerateObjectFolderOrObjects(child).forEach(
         ({ folderName, objects }) => {
           currentFolderObjects.push.apply(currentFolderObjects, objects);
         }
@@ -154,8 +144,7 @@ type Props = {|
   onlineWebExporter: Exporter,
   onSaveProject: () => Promise<void>,
   isSavingProject: boolean,
-
-  onClose: () => void,
+  onClose: () => Promise<void>,
   onContinueQuickCustomization: () => void,
   onTryAnotherGame: () => void,
 |};
@@ -169,43 +158,12 @@ export const renderQuickCustomization = ({
   onlineWebExporter,
   onSaveProject,
   isSavingProject,
-
   onClose,
   onContinueQuickCustomization,
   onTryAnotherGame,
 }: Props) => {
   return {
     title: quickCustomizationState.step.title,
-    titleRightContent: quickCustomizationState.step.canPreview ? (
-      <LineStackLayout noMargin alignItems="center">
-        <Text noMargin size={'body-small'}>
-          Preview your game
-        </Text>
-        <FlatButton
-          label={<Trans>Preview</Trans>}
-          onClick={onLaunchPreview}
-          leftIcon={<PreviewIcon />}
-        />
-      </LineStackLayout>
-    ) : null,
-    titleTopContent: quickCustomizationState.step.canPreview ? (
-      <ColumnStackLayout>
-        <LineStackLayout
-          justifyContent="space-between"
-          alignItems="center"
-          expand
-        >
-          <Text noMargin size={'body-small'}>
-            Preview your game
-          </Text>
-          <FlatButton
-            label={<Trans>Preview</Trans>}
-            onClick={onLaunchPreview}
-            leftIcon={<PreviewIcon />}
-          />
-        </LineStackLayout>
-      </ColumnStackLayout>
-    ) : null,
     content: (
       <>
         {quickCustomizationState.step.name === 'replace-objects' ? (
@@ -218,6 +176,11 @@ export const renderQuickCustomization = ({
             project={project}
             resourceManagementProps={resourceManagementProps}
           />
+        ) : quickCustomizationState.step.name === 'game-logo' ? (
+          <QuickTitleTweaker
+            project={project}
+            resourceManagementProps={resourceManagementProps}
+          />
         ) : quickCustomizationState.step.name === 'publish' ? (
           <QuickPublish
             onlineWebExporter={onlineWebExporter}
@@ -226,9 +189,6 @@ export const renderQuickCustomization = ({
             setIsNavigationDisabled={
               quickCustomizationState.setIsNavigationDisabled
             }
-            shouldAutomaticallyStartExport={
-              quickCustomizationState.shouldAutomaticallyStartExport
-            }
             onSaveProject={onSaveProject}
             isSavingProject={isSavingProject}
             onClose={onClose}
@@ -238,5 +198,6 @@ export const renderQuickCustomization = ({
         ) : null}
       </>
     ),
+    showPreview: quickCustomizationState.step.canPreview,
   };
 };
diff --git a/newIDE/app/src/ResourcesList/CompactResourceSelectorWithThumbnail/index.js b/newIDE/app/src/ResourcesList/CompactResourceSelectorWithThumbnail/index.js
index 8b0ad2e0113f..7abd8c12de98 100644
--- a/newIDE/app/src/ResourcesList/CompactResourceSelectorWithThumbnail/index.js
+++ b/newIDE/app/src/ResourcesList/CompactResourceSelectorWithThumbnail/index.js
@@ -36,12 +36,9 @@ type Props = {|
   project: gdProject,
   resourceManagementProps: ResourceManagementProps,
   resourceKind: ResourceKind,
-  fallbackResourceKind?: ResourceKind,
   resourceName: string,
   defaultNewResourceName?: string,
   onChange: string => void,
-  label?: string,
-  markdownDescription?: ?string,
   id?: string,
 |};
 
@@ -52,9 +49,6 @@ export const CompactResourceSelectorWithThumbnail = ({
   resourceName,
   defaultNewResourceName,
   onChange,
-  label,
-  markdownDescription,
-  fallbackResourceKind,
   id,
 }: Props) => {
   const resourcesLoader = ResourcesLoader;
diff --git a/newIDE/app/src/UI/Accordion.js b/newIDE/app/src/UI/Accordion.js
index cbc5ce4dde70..51d88236a503 100644
--- a/newIDE/app/src/UI/Accordion.js
+++ b/newIDE/app/src/UI/Accordion.js
@@ -135,7 +135,7 @@ type AccordionProps = {|
  */
 export const Accordion = React.forwardRef<AccordionProps, MUIAccordion>(
   (props, ref) => {
-    const { costlyBody, ...otherProps } = props;
+    const { costlyBody, noMargin, ...otherProps } = props;
     const gdevelopTheme = React.useContext(GDevelopThemeContext);
 
     return (
@@ -147,12 +147,11 @@ export const Accordion = React.forwardRef<AccordionProps, MUIAccordion>(
         style={{
           ...{
             border:
-              !props.noMargin &&
-              `1px solid ${gdevelopTheme.toolbar.separatorColor}`,
+              !noMargin && `1px solid ${gdevelopTheme.toolbar.separatorColor}`,
             backgroundColor: gdevelopTheme.paper.backgroundColor.medium,
             marginLeft: 0,
           },
-          ...(props.noMargin && {
+          ...(noMargin && {
             border: `0px`,
             padding: `0px`,
             margin: `0px`,
diff --git a/newIDE/app/src/UI/CompactToggleField/index.js b/newIDE/app/src/UI/CompactToggleField/index.js
index 4c2469a5b22c..b320291758c7 100644
--- a/newIDE/app/src/UI/CompactToggleField/index.js
+++ b/newIDE/app/src/UI/CompactToggleField/index.js
@@ -1,24 +1,9 @@
 // @flow
 import * as React from 'react';
-import Tooltip from '@material-ui/core/Tooltip';
-import Text from '../../UI/Text';
-import { MarkdownText } from '../../UI/MarkdownText';
-import { tooltipEnterDelay } from '../../UI/Tooltip';
 import classes from './CompactToggleField.module.css';
 import classNames from 'classnames';
 
-const styles = {
-  label: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    lineHeight: '17px',
-    maxHeight: 34, // 2 * lineHeight to limit to 2 lines.
-    opacity: 0.7,
-  },
-};
 type Props = {|
-  label: string,
-  markdownDescription?: ?string,
   id?: string,
   checked: boolean,
   onCheck: (newValue: boolean) => void,
@@ -27,9 +12,6 @@ type Props = {|
 |};
 
 export const CompactToggleField = (props: Props) => {
-  const title = !props.markdownDescription
-    ? props.label
-    : [props.label, ' - ', <MarkdownText source={props.markdownDescription} />];
   return (
     <label
       className={classNames({
@@ -38,10 +20,16 @@ export const CompactToggleField = (props: Props) => {
       })}
       id={props.id}
     >
-      <div className={classes.toggleSwitch}>
+      <div
+        className={classNames({
+          [classes.toggleSwitch]: true,
+        })}
+      >
         <input
           type="checkbox"
-          className={classes.checkbox}
+          className={classNames({
+            [classes.checkbox]: true,
+          })}
           onChange={() => props.onCheck(!props.checked)}
           disabled={props.disabled}
         />
@@ -69,27 +57,6 @@ export const CompactToggleField = (props: Props) => {
           </span>
         </span>
       </div>
-      <Tooltip
-        title={title}
-        enterDelay={tooltipEnterDelay}
-        placement="bottom"
-        PopperProps={{
-          modifiers: {
-            offset: {
-              enabled: true,
-              /**
-               * It does not seem possible to get the tooltip closer to the anchor
-               * when positioned on top. So it is positioned on bottom with a negative offset.
-               */
-              offset: '0,-20',
-            },
-          },
-        }}
-      >
-        <Text noMargin style={styles.label}>
-          {props.label}
-        </Text>
-      </Tooltip>
     </label>
   );
 };
diff --git a/newIDE/app/src/UI/CustomSvgIcons/PlaySquared.js b/newIDE/app/src/UI/CustomSvgIcons/PlaySquared.js
new file mode 100644
index 000000000000..7f37526a20b3
--- /dev/null
+++ b/newIDE/app/src/UI/CustomSvgIcons/PlaySquared.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+export default React.memo(props => (
+  <SvgIcon
+    {...props}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.49999 3.66667C4.03975 3.66667 3.66666 4.03977 3.66666 4.50001V11.5C3.66666 11.9603 4.03975 12.3333 4.49999 12.3333H11.5C11.9602 12.3333 12.3333 11.9603 12.3333 11.5V4.50001C12.3333 4.03976 11.9602 3.66667 11.5 3.66667H4.49999ZM2.66666 4.50001C2.66666 3.48748 3.48747 2.66667 4.49999 2.66667H11.5C12.5125 2.66667 13.3333 3.48749 13.3333 4.50001V11.5C13.3333 12.5125 12.5125 13.3333 11.5 13.3333H4.49999C3.48747 13.3333 2.66666 12.5126 2.66666 11.5V4.50001Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.25218 5.39907C6.40812 5.31009 6.59979 5.31154 6.75435 5.40288L10.421 7.56954C10.5733 7.6595 10.6667 7.82318 10.6667 8.00001C10.6667 8.17683 10.5733 8.34051 10.421 8.43047L6.75435 10.5971C6.59979 10.6885 6.40812 10.6899 6.25218 10.6009C6.09625 10.512 5.99999 10.3462 5.99999 10.1667V5.83334C5.99999 5.6538 6.09625 5.48805 6.25218 5.39907ZM6.99999 6.70956V9.29045L9.18382 8.00001L6.99999 6.70956Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));
diff --git a/newIDE/app/src/UI/Dialog.js b/newIDE/app/src/UI/Dialog.js
index e1c4f2b54085..703c5141fbbd 100644
--- a/newIDE/app/src/UI/Dialog.js
+++ b/newIDE/app/src/UI/Dialog.js
@@ -218,6 +218,7 @@ type DialogProps = {|
   minHeight?: 'sm' | 'lg',
   fullHeight?: boolean,
   fullscreen?: 'never-even-on-mobile' | 'always-even-on-desktop',
+  actionsFullWidthOnMobile?: boolean,
 
   id?: ?string,
 |};
@@ -247,6 +248,7 @@ const Dialog = ({
   cannotBeDismissed,
   exceptionallyStillAllowRenderingInstancesEditors,
   fullscreen,
+  actionsFullWidthOnMobile,
 }: DialogProps) => {
   const preferences = React.useContext(PreferencesContext);
   const gdevelopTheme = React.useContext(GDevelopThemeContext);
@@ -269,18 +271,26 @@ const Dialog = ({
     () => (
       <React.Fragment>
         {secondaryActions && (
-          <LineStackLayout key="secondary-actions" noMargin>
+          <LineStackLayout
+            key="secondary-actions"
+            noMargin
+            expand={isMobile && actionsFullWidthOnMobile}
+          >
             {secondaryActions}
           </LineStackLayout>
         )}
         {actions && (
-          <LineStackLayout key="actions" noMargin>
+          <LineStackLayout
+            key="actions"
+            noMargin
+            expand={isMobile && actionsFullWidthOnMobile}
+          >
             {actions}
           </LineStackLayout>
         )}
       </React.Fragment>
     ),
-    [actions, secondaryActions]
+    [actions, secondaryActions, isMobile, actionsFullWidthOnMobile]
   );
 
   const flexStyle = flexColumnBody
diff --git a/newIDE/app/src/UI/ScrollView.js b/newIDE/app/src/UI/ScrollView.js
index 8f396f354d2b..e94cd064cf32 100644
--- a/newIDE/app/src/UI/ScrollView.js
+++ b/newIDE/app/src/UI/ScrollView.js
@@ -27,6 +27,7 @@ export type ScrollViewInterface = {|
     target: ?React$Component<any, any> | ?React.ElementRef<any>
   ) => void,
   scrollToPosition: (number: number) => void,
+  scrollBy: (deltaY: number) => void,
   scrollToBottom: () => void,
 |};
 
@@ -66,15 +67,23 @@ export default React.forwardRef<Props, ScrollViewInterface>(
         }
       },
       /**
-       * Scroll the view to the target position.
+       * Scroll the view to the target component.
+       */
+      scrollBy: (deltaY: number) => {
+        const scrollViewElement = scrollView.current;
+        if (!scrollViewElement) return;
+        scrollViewElement.scrollBy(0, deltaY);
+      },
+      /**
+       * Scroll the view vertically by the offset passed as argument.
        */
-      scrollToPosition: (y: number) => {
+      scrollToPosition: (deltaY: number) => {
         const scrollViewElement = scrollView.current;
         if (!scrollViewElement) return;
 
         const scrollViewYPosition = scrollViewElement.getBoundingClientRect()
           .top;
-        scrollViewElement.scrollTop = y - scrollViewYPosition;
+        scrollViewElement.scrollTop = deltaY - scrollViewYPosition;
       },
       /**
        * Scroll the view to the bottom.
diff --git a/newIDE/app/src/Utils/GDevelopServices/Example.js b/newIDE/app/src/Utils/GDevelopServices/Example.js
index b45cc0e3607c..07ead0b7b72a 100644
--- a/newIDE/app/src/Utils/GDevelopServices/Example.js
+++ b/newIDE/app/src/Utils/GDevelopServices/Example.js
@@ -14,6 +14,7 @@ export type ExampleShortHeader = {|
   authors?: Array<UserPublicProfile>,
   authorIds?: Array<string>,
   previewImageUrls: Array<string>,
+  quickCustomizationImageUrl?: string,
   gdevelopVersion: string,
   codeSizeLevel: string,
   difficultyLevel?: string,
diff --git a/newIDE/app/src/Utils/TileMap.js b/newIDE/app/src/Utils/TileMap.js
new file mode 100644
index 000000000000..b27dea1ff5dc
--- /dev/null
+++ b/newIDE/app/src/Utils/TileMap.js
@@ -0,0 +1,463 @@
+// @flow
+import { AffineTransformation } from './AffineTransformation';
+import { type TileMapTileSelection } from '../InstancesEditor/TileSetVisualizer';
+
+export type TileMapTilePatch = {|
+  tileCoordinates?: {| x: number, y: number |},
+  erase?: boolean,
+  topLeftCorner: {| x: number, y: number |},
+  bottomRightCorner: {| x: number, y: number |},
+|};
+
+export type TileSet = {|
+  rowCount: number,
+  columnCount: number,
+  tileSize: number,
+  atlasImage: string,
+|};
+
+const areSameCoordinates = (
+  tileA: {| x: number, y: number |},
+  tileB: {| x: number, y: number |}
+): boolean => tileA.x === tileB.x && tileA.y === tileB.y;
+
+/**
+ * This method gathers tiles into a big rectangle when possible.
+ * Hypothesis taken on the input list:
+ * - The list contains only tiles of size 1
+ * - The list is a flattened view of the grid in order to have the following grid:
+ *   A, C, E, G
+ *   B, D, F, H
+ *   given as:
+ *   [A, B, C, D, E, F, G, H]
+ *
+ * Note: This method won't handle perfectly nested rectangles. For instance, this layout:
+ *   A D D D D D D D D D D D E
+ *   B J J J J J J J J J J J G
+ *   B J J J K K K K K J J J G
+ *   B J J J K K K K K J J J G
+ *   B J J J K K K K K J J J G
+ *   B J J J J J J J J J J J G
+ *   C F F F F F F F F F F F H
+ * might result in something like:
+ *   A ╾ ─ ─ ─ ─ D ─ ─ ─ ─ ╼ E
+ *   ╿ J ╾ ─ ─ ─ J ─ ─ ─ ─ ╼ ╿
+ *   │ ┌ ─ ┐ ┌ ─ ─ ─ ┐ ┌ ─ ┐ │
+ *   B │ J │ │   K   │ │ J │ G
+ *   │ │   │ └ ─ ─ ─ ┘ └ ─ ┘ │
+ *   ╽ └ ─ ┘ ╾ ─ ─ J ─ ─ ─ ╼ ╽
+ *   C ╾ ─ ─ ─ ─ F ─ ─ ─ ─ ╼ H
+ */
+export const optimizeTilesGridCoordinates = ({
+  tileMapTilePatches,
+  minX,
+  minY,
+  maxX,
+  maxY,
+}: {|
+  tileMapTilePatches: TileMapTilePatch[],
+  minX: number,
+  maxX: number,
+  minY: number,
+  maxY: number,
+|}): TileMapTilePatch[] => {
+  const newTileMapTilePatches = [];
+
+  while (tileMapTilePatches[0]) {
+    const referencePatch = tileMapTilePatches[0];
+    if (!referencePatch || !referencePatch.tileCoordinates) break;
+    const referencePatchTileCoordinates = referencePatch.tileCoordinates;
+    if (!referencePatchTileCoordinates) break;
+    const patchesWithSameTile = tileMapTilePatches
+      .slice(1)
+      .filter(
+        patch =>
+          patch.tileCoordinates &&
+          areSameCoordinates(
+            referencePatchTileCoordinates,
+            patch.tileCoordinates
+          )
+      );
+    let expandRight = 0;
+    let expandBottom = 0;
+    const patchesOnRight = patchesWithSameTile.filter(
+      patch =>
+        patch.topLeftCorner.x > referencePatch.topLeftCorner.x &&
+        patch.topLeftCorner.y === referencePatch.topLeftCorner.y &&
+        areSameCoordinates(patch.topLeftCorner, patch.bottomRightCorner)
+    );
+    const patchesOnRightX = patchesOnRight.map(patch => patch.topLeftCorner.x);
+    for (
+      let deltaX = 1;
+      deltaX <= maxX - referencePatch.topLeftCorner.x;
+      deltaX++
+    ) {
+      if (patchesOnRightX.includes(deltaX + referencePatch.topLeftCorner.x))
+        expandRight = deltaX;
+      else break;
+    }
+    const patchesOnBottom = patchesWithSameTile.filter(
+      patch =>
+        patch.topLeftCorner.x === referencePatch.topLeftCorner.x &&
+        patch.topLeftCorner.y > referencePatch.topLeftCorner.y &&
+        areSameCoordinates(patch.topLeftCorner, patch.bottomRightCorner)
+    );
+    const patchesOnBottomY = patchesOnBottom.map(
+      patch => patch.topLeftCorner.y
+    );
+    for (
+      let deltaY = 1;
+      deltaY <= maxY - referencePatch.topLeftCorner.y;
+      deltaY++
+    ) {
+      if (patchesOnBottomY.includes(deltaY + referencePatch.topLeftCorner.y))
+        expandBottom = deltaY;
+      else break;
+    }
+    if (expandRight === 0 && expandBottom === 0) {
+      newTileMapTilePatches.push(tileMapTilePatches.shift());
+      continue;
+    }
+
+    let isWholeRectangleOfSameTile = true;
+    const patchIndices = [];
+    for (let deltaX = 0; deltaX <= expandRight; deltaX++) {
+      for (let deltaY = 0; deltaY <= expandBottom; deltaY++) {
+        if (deltaX === 0 && deltaY === 0) {
+          patchIndices.push(0);
+          continue;
+        }
+
+        const patchIndex = tileMapTilePatches.findIndex(
+          patch =>
+            patch.topLeftCorner.x === deltaX + referencePatch.topLeftCorner.x &&
+            patch.topLeftCorner.y === deltaY + referencePatch.topLeftCorner.y &&
+            patch.tileCoordinates &&
+            areSameCoordinates(
+              referencePatchTileCoordinates,
+              patch.tileCoordinates
+            )
+        );
+        if (patchIndex === -1) {
+          isWholeRectangleOfSameTile = false;
+          break;
+        } else {
+          patchIndices.push(patchIndex);
+        }
+      }
+      if (!isWholeRectangleOfSameTile) break;
+    }
+    if (!isWholeRectangleOfSameTile) {
+      newTileMapTilePatches.push(tileMapTilePatches.shift());
+    } else {
+      newTileMapTilePatches.push({
+        tileCoordinates: referencePatchTileCoordinates,
+        topLeftCorner: referencePatch.topLeftCorner,
+        bottomRightCorner: {
+          x: referencePatch.topLeftCorner.x + expandRight,
+          y: referencePatch.topLeftCorner.y + expandBottom,
+        },
+      });
+      patchIndices.sort((a, b) => (a > b ? -1 : 1));
+      patchIndices.forEach(index => tileMapTilePatches.splice(index, 1));
+    }
+  }
+  return newTileMapTilePatches;
+};
+
+export const isSelectionASingleTileRectangle = (
+  tileMapTileSelection: TileMapTileSelection
+): boolean => {
+  return (
+    tileMapTileSelection.kind === 'rectangle' &&
+    tileMapTileSelection.coordinates.length === 2 &&
+    tileMapTileSelection.coordinates[0].x ===
+      tileMapTileSelection.coordinates[1].x &&
+    tileMapTileSelection.coordinates[0].y ===
+      tileMapTileSelection.coordinates[1].y
+  );
+};
+
+/**
+ * When flipping is activated, the tile texture should be flipped but
+ * the tiles should be flipped as well in the selection
+ * (the left tiles should be replaced by the right tiles if the horizontal flip
+ * is activated).
+ */
+const getTileCorrespondingToFlippingInstructions = ({
+  tileMapTileSelection,
+  tileCoordinates,
+}: {|
+  tileMapTileSelection: TileMapTileSelection,
+  tileCoordinates: {| x: number, y: number |},
+|}): {| x: number, y: number |} => {
+  if (tileMapTileSelection.kind === 'rectangle') {
+    const selectionTopLeftCorner = tileMapTileSelection.coordinates[0];
+    const selectionBottomRightCorner = tileMapTileSelection.coordinates[1];
+    const selectionWidth =
+      selectionBottomRightCorner.x - selectionTopLeftCorner.x + 1;
+    const selectionHeight =
+      selectionBottomRightCorner.y - selectionTopLeftCorner.y + 1;
+    const deltaX = tileCoordinates.x - selectionTopLeftCorner.x;
+    const deltaY = tileCoordinates.y - selectionTopLeftCorner.y;
+    const newX =
+      selectionTopLeftCorner.x +
+      (tileMapTileSelection.flipHorizontally
+        ? selectionWidth - deltaX - 1
+        : deltaX);
+    const newY =
+      selectionTopLeftCorner.y +
+      (tileMapTileSelection.flipVertically
+        ? selectionHeight - deltaY - 1
+        : deltaY);
+    return { x: newX, y: newY };
+  }
+  return tileCoordinates;
+};
+
+/**
+ * Returns the list of tiles corresponding to the user selection.
+ * This method maps tiles from the tileset selection to a grid position on the
+ * tilemap corresponding to the user selection. This operation is done coordinate
+ * coordinate (on the tilemap) and is then optimized to gather rectangles of same tile
+ * to speed up consequential operations.
+ */
+export const getTilesGridCoordinatesFromPointerSceneCoordinates = ({
+  tileMapTileSelection,
+  coordinates,
+  tileSize,
+  sceneToTileMapTransformation,
+}: {|
+  tileMapTileSelection: TileMapTileSelection,
+  coordinates: Array<{| x: number, y: number |}>,
+  tileSize: number,
+  sceneToTileMapTransformation: AffineTransformation,
+|}): TileMapTilePatch[] => {
+  if (coordinates.length === 0) return [];
+
+  if (coordinates.length === 1) {
+    // One coordinate corresponds to the pointer over the canvas.
+    const coordinatesInTileMapGrid = [0, 0];
+    sceneToTileMapTransformation.transform(
+      [coordinates[0].x, coordinates[0].y],
+      coordinatesInTileMapGrid
+    );
+    const x = Math.floor(coordinatesInTileMapGrid[0] / tileSize);
+    const y = Math.floor(coordinatesInTileMapGrid[1] / tileSize);
+    let tileCoordinates;
+    if (tileMapTileSelection.kind === 'rectangle') {
+      const topLeftCorner = tileMapTileSelection.coordinates[0];
+      tileCoordinates = getTileCorrespondingToFlippingInstructions({
+        tileMapTileSelection,
+        tileCoordinates: topLeftCorner,
+      });
+    }
+    return [
+      {
+        erase: tileMapTileSelection.kind === 'erase',
+        tileCoordinates,
+        topLeftCorner: { x, y },
+        bottomRightCorner: { x, y },
+      },
+    ];
+  }
+
+  const tilesCoordinatesInTileMapGrid: TileMapTilePatch[] = [];
+
+  if (coordinates.length === 2) {
+    const firstPointCoordinatesInTileMap = [0, 0];
+    sceneToTileMapTransformation.transform(
+      [coordinates[0].x, coordinates[0].y],
+      firstPointCoordinatesInTileMap
+    );
+    const secondPointCoordinatesInTileMap = [0, 0];
+    sceneToTileMapTransformation.transform(
+      [coordinates[1].x, coordinates[1].y],
+      secondPointCoordinatesInTileMap
+    );
+    const topLeftCornerCoordinatesInTileMap = [
+      Math.min(
+        firstPointCoordinatesInTileMap[0],
+        secondPointCoordinatesInTileMap[0]
+      ),
+      Math.min(
+        firstPointCoordinatesInTileMap[1],
+        secondPointCoordinatesInTileMap[1]
+      ),
+    ];
+    const bottomRightCornerCoordinatesInTileMap = [
+      Math.max(
+        firstPointCoordinatesInTileMap[0],
+        secondPointCoordinatesInTileMap[0]
+      ),
+      Math.max(
+        firstPointCoordinatesInTileMap[1],
+        secondPointCoordinatesInTileMap[1]
+      ),
+    ];
+    const topLeftCornerCoordinatesInTileMapGrid = [
+      Math.floor(topLeftCornerCoordinatesInTileMap[0] / tileSize),
+      Math.floor(topLeftCornerCoordinatesInTileMap[1] / tileSize),
+    ];
+    const bottomRightCornerCoordinatesInTileMapGrid = [
+      Math.floor(bottomRightCornerCoordinatesInTileMap[0] / tileSize),
+      Math.floor(bottomRightCornerCoordinatesInTileMap[1] / tileSize),
+    ];
+    if (tileMapTileSelection.kind === 'erase') {
+      tilesCoordinatesInTileMapGrid.push({
+        erase: true,
+        topLeftCorner: {
+          x: topLeftCornerCoordinatesInTileMapGrid[0],
+          y: topLeftCornerCoordinatesInTileMapGrid[1],
+        },
+        bottomRightCorner: {
+          x: bottomRightCornerCoordinatesInTileMapGrid[0],
+          y: bottomRightCornerCoordinatesInTileMapGrid[1],
+        },
+      });
+      return tilesCoordinatesInTileMapGrid;
+    }
+    if (tileMapTileSelection.kind === 'rectangle') {
+      const selectionTopLeftCorner = tileMapTileSelection.coordinates[0];
+      const selectionBottomRightCorner = tileMapTileSelection.coordinates[1];
+      const selectionWidth =
+        selectionBottomRightCorner.x - selectionTopLeftCorner.x + 1;
+      const selectionHeight =
+        selectionBottomRightCorner.y - selectionTopLeftCorner.y + 1;
+
+      if (isSelectionASingleTileRectangle(tileMapTileSelection)) {
+        tilesCoordinatesInTileMapGrid.push({
+          tileCoordinates: getTileCorrespondingToFlippingInstructions({
+            tileMapTileSelection,
+            tileCoordinates: selectionTopLeftCorner,
+          }),
+          topLeftCorner: {
+            x: topLeftCornerCoordinatesInTileMapGrid[0],
+            y: topLeftCornerCoordinatesInTileMapGrid[1],
+          },
+          bottomRightCorner: {
+            x: bottomRightCornerCoordinatesInTileMapGrid[0],
+            y: bottomRightCornerCoordinatesInTileMapGrid[1],
+          },
+        });
+        return tilesCoordinatesInTileMapGrid;
+      }
+
+      for (
+        let x = topLeftCornerCoordinatesInTileMapGrid[0];
+        x <= bottomRightCornerCoordinatesInTileMapGrid[0];
+        x++
+      ) {
+        for (
+          let y = topLeftCornerCoordinatesInTileMapGrid[1];
+          y <= bottomRightCornerCoordinatesInTileMapGrid[1];
+          y++
+        ) {
+          const deltaX = x - topLeftCornerCoordinatesInTileMapGrid[0];
+          const deltaY = y - topLeftCornerCoordinatesInTileMapGrid[1];
+          const invertedDeltaX =
+            bottomRightCornerCoordinatesInTileMapGrid[0] - x;
+          const invertedDeltaY =
+            bottomRightCornerCoordinatesInTileMapGrid[1] - y;
+          if (deltaX === 0 && deltaY === 0) {
+            tilesCoordinatesInTileMapGrid.push({
+              tileCoordinates: getTileCorrespondingToFlippingInstructions({
+                tileMapTileSelection,
+                tileCoordinates: selectionTopLeftCorner,
+              }),
+              topLeftCorner: { x, y },
+              bottomRightCorner: { x, y },
+            });
+            continue;
+          }
+          if (invertedDeltaX === 0 && invertedDeltaY === 0) {
+            tilesCoordinatesInTileMapGrid.push({
+              tileCoordinates: getTileCorrespondingToFlippingInstructions({
+                tileMapTileSelection,
+                tileCoordinates: selectionBottomRightCorner,
+              }),
+              topLeftCorner: { x, y },
+              bottomRightCorner: { x, y },
+            });
+            continue;
+          }
+
+          let tileX, tileY;
+          if (deltaX === 0 || selectionWidth === 1) {
+            tileX = selectionTopLeftCorner.x;
+          } else if (invertedDeltaX === 0 || selectionWidth === 2) {
+            tileX = selectionBottomRightCorner.x;
+          } else {
+            tileX =
+              ((deltaX - 1) % (selectionWidth - 2)) +
+              1 +
+              selectionTopLeftCorner.x;
+          }
+          if (deltaY === 0 || selectionHeight === 1) {
+            tileY = selectionTopLeftCorner.y;
+          } else if (invertedDeltaY === 0 || selectionHeight === 2) {
+            tileY = selectionBottomRightCorner.y;
+          } else {
+            tileY =
+              ((deltaY - 1) % (selectionHeight - 2)) +
+              1 +
+              selectionTopLeftCorner.y;
+          }
+
+          tilesCoordinatesInTileMapGrid.push({
+            tileCoordinates: getTileCorrespondingToFlippingInstructions({
+              tileMapTileSelection,
+              tileCoordinates: { x: tileX, y: tileY },
+            }),
+            topLeftCorner: { x, y },
+            bottomRightCorner: { x, y },
+          });
+        }
+      }
+      if (selectionWidth >= 4 && selectionHeight >= 4) {
+        // In this case, each cell in the grid will contain a tile that is different
+        // from all the adjacent ones, so there is no need to optimize the list.
+        return tilesCoordinatesInTileMapGrid;
+      }
+      return optimizeTilesGridCoordinates({
+        tileMapTilePatches: tilesCoordinatesInTileMapGrid,
+        minX: topLeftCornerCoordinatesInTileMapGrid[0],
+        minY: topLeftCornerCoordinatesInTileMapGrid[1],
+        maxX: bottomRightCornerCoordinatesInTileMapGrid[0],
+        maxY: bottomRightCornerCoordinatesInTileMapGrid[1],
+      });
+    }
+  }
+  return [];
+};
+
+export const getTileSet = (object: gdObject): TileSet => {
+  const objectConfigurationProperties = object
+    .getConfiguration()
+    .getProperties();
+  const columnCount = parseFloat(
+    objectConfigurationProperties.get('columnCount').getValue()
+  );
+  const rowCount = parseFloat(
+    objectConfigurationProperties.get('rowCount').getValue()
+  );
+  const tileSize = parseFloat(
+    objectConfigurationProperties.get('tileSize').getValue()
+  );
+  const atlasImage = objectConfigurationProperties.get('atlasImage').getValue();
+  return { rowCount, columnCount, tileSize, atlasImage };
+};
+
+export const isTileSetBadlyConfigured = ({
+  rowCount,
+  columnCount,
+  tileSize,
+  atlasImage,
+}: TileSet) => {
+  return (
+    !Number.isInteger(columnCount) ||
+    columnCount <= 0 ||
+    !Number.isInteger(rowCount) ||
+    rowCount <= 0
+  );
+};
diff --git a/newIDE/app/src/Utils/TileMap.spec.js b/newIDE/app/src/Utils/TileMap.spec.js
new file mode 100644
index 000000000000..19e3f75f6f32
--- /dev/null
+++ b/newIDE/app/src/Utils/TileMap.spec.js
@@ -0,0 +1,244 @@
+// @flow
+
+import { optimizeTilesGridCoordinates } from './TileMap';
+
+describe('optimizeTilesGridCoordinates', () => {
+  test('Selection of 2x1 is expanded on the right', () => {
+    const minX = 4;
+    const maxX = 7;
+    const minY = 12;
+    const maxY = 12;
+    const result = optimizeTilesGridCoordinates({
+      minX,
+      maxX,
+      minY,
+      maxY,
+      tileMapTilePatches: [
+        {
+          tileCoordinates: { x: 4, y: 4 },
+          topLeftCorner: { x: minX, y: minY },
+          bottomRightCorner: { x: minX, y: minY },
+        },
+        ...[1, 2, 3].map(deltaX => ({
+          tileCoordinates: { x: 4, y: 1 },
+          topLeftCorner: { x: minX + deltaX, y: minY },
+          bottomRightCorner: { x: minX + deltaX, y: minY },
+        })),
+      ],
+    });
+    expect(result).toEqual([
+      {
+        tileCoordinates: { x: 4, y: 4 },
+        topLeftCorner: { x: minX, y: minY },
+        bottomRightCorner: { x: minX, y: minY },
+      },
+      {
+        tileCoordinates: { x: 4, y: 1 },
+        topLeftCorner: { x: minX + 1, y: minY },
+        bottomRightCorner: { x: maxX, y: minY },
+      },
+    ]);
+  });
+  test('Selection of 1x1 is expanded on the right', () => {
+    const minX = 4;
+    const maxX = 7;
+    const minY = 12;
+    const maxY = 12;
+    const result = optimizeTilesGridCoordinates({
+      minX,
+      maxX,
+      minY,
+      maxY,
+      tileMapTilePatches: [
+        {
+          tileCoordinates: { x: 4, y: 4 },
+          topLeftCorner: { x: minX, y: minY },
+          bottomRightCorner: { x: minX, y: minY },
+        },
+        ...[1, 2, 3].map(deltaX => ({
+          tileCoordinates: { x: 4, y: 4 },
+          topLeftCorner: { x: minX + deltaX, y: minY },
+          bottomRightCorner: { x: minX + deltaX, y: minY },
+        })),
+      ],
+    });
+    expect(result).toEqual([
+      {
+        tileCoordinates: { x: 4, y: 4 },
+        topLeftCorner: { x: minX, y: minY },
+        bottomRightCorner: { x: maxX, y: maxY },
+      },
+    ]);
+  });
+  test('Selection of 1x1 is expanded on the bottom', () => {
+    const minX = 4;
+    const maxX = 4;
+    const minY = 12;
+    const maxY = 16;
+    const result = optimizeTilesGridCoordinates({
+      minX,
+      maxX,
+      minY,
+      maxY,
+      tileMapTilePatches: [
+        {
+          tileCoordinates: { x: 4, y: 4 },
+          topLeftCorner: { x: minX, y: minY },
+          bottomRightCorner: { x: minX, y: minY },
+        },
+        ...[1, 2, 3, 4].map(deltaY => ({
+          tileCoordinates: { x: 4, y: 4 },
+          topLeftCorner: { x: minX, y: minY + deltaY },
+          bottomRightCorner: { x: minX, y: minY + deltaY },
+        })),
+      ],
+    });
+    expect(result).toEqual([
+      {
+        tileCoordinates: { x: 4, y: 4 },
+        topLeftCorner: { x: minX, y: minY },
+        bottomRightCorner: { x: maxX, y: maxY },
+      },
+    ]);
+  });
+  test('Selection of 1x1 is expanded on the right and on the bottom', () => {
+    const minX = 4;
+    const maxX = 7;
+    const minY = 12;
+    const maxY = 15;
+    const result = optimizeTilesGridCoordinates({
+      minX,
+      maxX,
+      minY,
+      maxY,
+      tileMapTilePatches: [
+        {
+          tileCoordinates: { x: 4, y: 4 },
+          topLeftCorner: { x: minX, y: minY },
+          bottomRightCorner: { x: minX, y: minY },
+        },
+        ...[0, 1, 2, 3]
+          .map(deltaX => {
+            return [0, 1, 2, 3].map(deltaY =>
+              deltaX === 0 && deltaY === 0
+                ? null
+                : {
+                    tileCoordinates: { x: 4, y: 4 },
+                    topLeftCorner: { x: minX + deltaX, y: minY + deltaY },
+                    bottomRightCorner: { x: minX + deltaX, y: minY + deltaY },
+                  }
+            );
+          })
+          .flat()
+          .filter(Boolean),
+      ],
+    });
+    expect(result).toEqual([
+      {
+        tileCoordinates: { x: 4, y: 4 },
+        topLeftCorner: { x: minX, y: minY },
+        bottomRightCorner: { x: maxX, y: maxY },
+      },
+    ]);
+  });
+  test('Selection of 3x2 is expanded on the right and on the bottom', () => {
+    const minX = 4;
+    const maxX = 7;
+    const minY = 12;
+    const maxY = 13;
+    const topLeftCorner = { x: 4, y: 4 };
+    const topMiddleCorner = { x: 5, y: 4 };
+    const topRightCorner = { x: 6, y: 4 };
+    const bottomLeftCorner = { x: 4, y: 5 };
+    const bottomMiddleCorner = { x: 5, y: 5 };
+    const bottomRightCorner = { x: 6, y: 5 };
+    const result = optimizeTilesGridCoordinates({
+      minX,
+      maxX,
+      minY,
+      maxY,
+      tileMapTilePatches: [
+        // First column
+        {
+          tileCoordinates: topLeftCorner,
+          topLeftCorner: { x: minX, y: minY },
+          bottomRightCorner: { x: minX, y: minY },
+        },
+        {
+          tileCoordinates: bottomLeftCorner,
+          topLeftCorner: { x: minX, y: minY + 1 },
+          bottomRightCorner: { x: minX, y: minY + 1 },
+        },
+        // Second column
+        {
+          tileCoordinates: topMiddleCorner,
+          topLeftCorner: { x: minX + 1, y: minY },
+          bottomRightCorner: { x: minX + 1, y: minY },
+        },
+        {
+          tileCoordinates: bottomMiddleCorner,
+          topLeftCorner: { x: minX + 1, y: minY + 1 },
+          bottomRightCorner: { x: minX + 1, y: minY + 1 },
+        },
+        // Third column
+        {
+          tileCoordinates: topMiddleCorner,
+          topLeftCorner: { x: minX + 2, y: minY },
+          bottomRightCorner: { x: minX + 2, y: minY },
+        },
+        {
+          tileCoordinates: bottomMiddleCorner,
+          topLeftCorner: { x: minX + 2, y: minY + 1 },
+          bottomRightCorner: { x: minX + 2, y: minY + 1 },
+        },
+        // Fourth column
+        {
+          tileCoordinates: topRightCorner,
+          topLeftCorner: { x: minX + 3, y: minY },
+          bottomRightCorner: { x: minX + 3, y: minY },
+        },
+        {
+          tileCoordinates: bottomRightCorner,
+          topLeftCorner: { x: minX + 3, y: minY + 1 },
+          bottomRightCorner: { x: minX + 3, y: minY + 1 },
+        },
+      ],
+    });
+    expect(result).toEqual([
+      // First column
+      {
+        tileCoordinates: topLeftCorner,
+        topLeftCorner: { x: minX, y: minY },
+        bottomRightCorner: { x: minX, y: minY },
+      },
+      {
+        tileCoordinates: bottomLeftCorner,
+        topLeftCorner: { x: minX, y: minY + 1 },
+        bottomRightCorner: { x: minX, y: minY + 1 },
+      },
+      // Second and third column first line
+      {
+        tileCoordinates: topMiddleCorner,
+        topLeftCorner: { x: minX + 1, y: minY },
+        bottomRightCorner: { x: minX + 2, y: minY },
+      },
+      // Second and third column second line
+      {
+        tileCoordinates: bottomMiddleCorner,
+        topLeftCorner: { x: minX + 1, y: minY + 1 },
+        bottomRightCorner: { x: minX + 2, y: minY + 1 },
+      },
+      // Fourth column
+      {
+        tileCoordinates: topRightCorner,
+        topLeftCorner: { x: minX + 3, y: minY },
+        bottomRightCorner: { x: minX + 3, y: minY },
+      },
+      {
+        tileCoordinates: bottomRightCorner,
+        topLeftCorner: { x: minX + 3, y: minY + 1 },
+        bottomRightCorner: { x: minX + 3, y: minY + 1 },
+      },
+    ]);
+  });
+});
diff --git a/newIDE/app/src/Utils/UseLongTouch.js b/newIDE/app/src/Utils/UseLongTouch.js
index b292332e578b..6224baea0631 100644
--- a/newIDE/app/src/Utils/UseLongTouch.js
+++ b/newIDE/app/src/Utils/UseLongTouch.js
@@ -47,6 +47,7 @@ export const useLongTouch = (
      */
     context?: string,
     delay?: number,
+    doNotCancelOnScroll?: boolean,
   }
 ) => {
   const timeout = React.useRef<?TimeoutID>(null);
@@ -61,8 +62,11 @@ export const useLongTouch = (
     [context]
   );
 
+  const cancelOnScroll = !options || !options.doNotCancelOnScroll;
+
   React.useEffect(
     () => {
+      if (!cancelOnScroll) return;
       // Cancel the long touch if scrolling (otherwise we can get a long touch
       // being activated while scroll and maintaining the touch on an element,
       // which is weird for the user that just want to scroll).
@@ -84,7 +88,7 @@ export const useLongTouch = (
         document.removeEventListener('scroll', clear, { capture: true });
       };
     },
-    [clear]
+    [clear, cancelOnScroll]
   );
 
   const start = React.useCallback(
diff --git a/newIDE/app/src/stories/componentStories/QuickCustomization/QuickPublish.stories.js b/newIDE/app/src/stories/componentStories/QuickCustomization/QuickPublish.stories.js
index 0687171d274f..25e401189f73 100644
--- a/newIDE/app/src/stories/componentStories/QuickCustomization/QuickPublish.stories.js
+++ b/newIDE/app/src/stories/componentStories/QuickCustomization/QuickPublish.stories.js
@@ -57,7 +57,6 @@ export const NotAuthenticated = () => {
           onSaveProject={async () => {}}
           onlineWebExporter={onlineWebExporter}
           setIsNavigationDisabled={() => {}}
-          shouldAutomaticallyStartExport={false}
           onClose={action('onClose')}
           onContinueQuickCustomization={action('onContinueQuickCustomization')}
           onTryAnotherGame={action('onTryAnotherGame')}
@@ -80,7 +79,6 @@ export const Authenticated = () => {
           onSaveProject={async () => {}}
           onlineWebExporter={onlineWebExporter}
           setIsNavigationDisabled={() => {}}
-          shouldAutomaticallyStartExport={false}
           onClose={action('onClose')}
           onContinueQuickCustomization={action('onContinueQuickCustomization')}
           onTryAnotherGame={action('onTryAnotherGame')}
@@ -90,30 +88,7 @@ export const Authenticated = () => {
   );
 };
 
-export const AuthenticatedStartsAutomatically = () => {
-  return (
-    <EventsFunctionsExtensionsContext.Provider
-      value={fakeEventsFunctionsExtensionsState}
-    >
-      <AuthenticatedUserContext.Provider value={fakeSilverAuthenticatedUser}>
-        <QuickPublish
-          project={testProject.project}
-          gameAndBuildsManager={fakeEmptyGameAndBuildsManager}
-          isSavingProject={false}
-          onSaveProject={async () => {}}
-          onlineWebExporter={onlineWebExporter}
-          setIsNavigationDisabled={() => {}}
-          shouldAutomaticallyStartExport={true}
-          onClose={action('onClose')}
-          onContinueQuickCustomization={action('onContinueQuickCustomization')}
-          onTryAnotherGame={action('onTryAnotherGame')}
-        />
-      </AuthenticatedUserContext.Provider>
-    </EventsFunctionsExtensionsContext.Provider>
-  );
-};
-
-export const AuthenticatedStartsAutomaticallyAndFails = () => {
+export const AuthenticatedAndFails = () => {
   return (
     <EventsFunctionsExtensionsContext.Provider
       value={fakeEventsFunctionsExtensionsState}
@@ -126,7 +101,6 @@ export const AuthenticatedStartsAutomaticallyAndFails = () => {
           onSaveProject={async () => {}}
           onlineWebExporter={erroringOnlineWebExporter}
           setIsNavigationDisabled={() => {}}
-          shouldAutomaticallyStartExport={true}
           onClose={action('onClose')}
           onContinueQuickCustomization={action('onContinueQuickCustomization')}
           onTryAnotherGame={action('onTryAnotherGame')}
@@ -149,7 +123,6 @@ export const AuthenticatedExistingGame = () => {
           onSaveProject={async () => {}}
           onlineWebExporter={onlineWebExporter}
           setIsNavigationDisabled={() => {}}
-          shouldAutomaticallyStartExport={false}
           onClose={action('onClose')}
           onContinueQuickCustomization={action('onContinueQuickCustomization')}
           onTryAnotherGame={action('onTryAnotherGame')}
@@ -172,7 +145,6 @@ export const AuthenticatedNotOwnedGame = () => {
           onSaveProject={async () => {}}
           onlineWebExporter={onlineWebExporter}
           setIsNavigationDisabled={() => {}}
-          shouldAutomaticallyStartExport={false}
           onClose={action('onClose')}
           onContinueQuickCustomization={action('onContinueQuickCustomization')}
           onTryAnotherGame={action('onTryAnotherGame')}
diff --git a/newIDE/app/src/stories/componentStories/ResourcesList/CompactResourceSelectorWithThumbnail.stories.js b/newIDE/app/src/stories/componentStories/ResourcesList/CompactResourceSelectorWithThumbnail.stories.js
index 02cdd81acb17..171ce43c9be4 100644
--- a/newIDE/app/src/stories/componentStories/ResourcesList/CompactResourceSelectorWithThumbnail.stories.js
+++ b/newIDE/app/src/stories/componentStories/ResourcesList/CompactResourceSelectorWithThumbnail.stories.js
@@ -43,25 +43,6 @@ export const Default = () => {
           resourceName="icon128.png"
           onChange={action('on change')}
         />
-        <Text size="sub-title">With label</Text>
-        <CompactResourceSelectorWithThumbnail
-          id="default"
-          resourceKind="image"
-          project={testProject.project}
-          resourceManagementProps={fakeResourceManagementProps}
-          resourceName="icon128.png"
-          onChange={action('on change')}
-          label="Choose an image"
-        />
-        <Text size="sub-title">With description</Text>
-        <CompactResourceSelectorWithThumbnail
-          resourceKind="image"
-          project={testProject.project}
-          resourceManagementProps={fakeResourceManagementProps}
-          resourceName="icon128.png"
-          onChange={action('on change')}
-          markdownDescription="This is a description"
-        />
         <Text size="sub-title">With multiple external editors</Text>
         <CompactResourceSelectorWithThumbnail
           resourceKind="image"
diff --git a/newIDE/app/src/stories/componentStories/Share/OnlineGameLink.stories.js b/newIDE/app/src/stories/componentStories/Share/OnlineGameLink.stories.js
index 4c057747ce16..0fdc3a4bfb0b 100644
--- a/newIDE/app/src/stories/componentStories/Share/OnlineGameLink.stories.js
+++ b/newIDE/app/src/stories/componentStories/Share/OnlineGameLink.stories.js
@@ -50,6 +50,7 @@ export const Export = () => {
         onRefreshGame={action('onRefreshGame')}
         isSavingProject={false}
         project={testProject.project}
+        shouldShowShareDialog
       />
     </AuthenticatedUserContext.Provider>
   );
@@ -66,6 +67,7 @@ export const SavingProject = () => {
         onRefreshGame={action('onRefreshGame')}
         isSavingProject
         project={testProject.project}
+        shouldShowShareDialog
       />
     </AuthenticatedUserContext.Provider>
   );
@@ -82,6 +84,7 @@ export const ResourcesDownload = () => {
         onRefreshGame={action('onRefreshGame')}
         isSavingProject={false}
         project={testProject.project}
+        shouldShowShareDialog
       />
     </AuthenticatedUserContext.Provider>
   );
@@ -98,6 +101,7 @@ export const Compress = () => {
         onRefreshGame={action('onRefreshGame')}
         isSavingProject={false}
         project={testProject.project}
+        shouldShowShareDialog
       />
     </AuthenticatedUserContext.Provider>
   );
@@ -114,6 +118,7 @@ export const Upload = () => {
         onRefreshGame={action('onRefreshGame')}
         isSavingProject={false}
         project={testProject.project}
+        shouldShowShareDialog
       />
     </AuthenticatedUserContext.Provider>
   );
@@ -130,6 +135,7 @@ export const WaitingForBuild = () => {
         onRefreshGame={action('onRefreshGame')}
         isSavingProject={false}
         project={testProject.project}
+        shouldShowShareDialog
       />
     </AuthenticatedUserContext.Provider>
   );
@@ -146,6 +152,7 @@ export const Build = () => {
         onRefreshGame={action('onRefreshGame')}
         isSavingProject={false}
         project={testProject.project}
+        shouldShowShareDialog
       />
     </AuthenticatedUserContext.Provider>
   );
@@ -162,6 +169,7 @@ export const DoneWithPublicBuild = () => {
         onRefreshGame={action('onRefreshGame')}
         isSavingProject={false}
         project={testProject.project}
+        shouldShowShareDialog
       />
     </AuthenticatedUserContext.Provider>
   );
@@ -178,6 +186,7 @@ export const DoneWithPrivateBuild = () => {
         onRefreshGame={action('onRefreshGame')}
         isSavingProject={false}
         project={testProject.project}
+        shouldShowShareDialog
       />
     </AuthenticatedUserContext.Provider>
   );
diff --git a/newIDE/app/src/stories/componentStories/UI/CompactToggleField.stories.js b/newIDE/app/src/stories/componentStories/UI/CompactToggleField.stories.js
index e13ccb0605b6..30292c41cdcb 100644
--- a/newIDE/app/src/stories/componentStories/UI/CompactToggleField.stories.js
+++ b/newIDE/app/src/stories/componentStories/UI/CompactToggleField.stories.js
@@ -7,6 +7,7 @@ import paperDecorator from '../../PaperDecorator';
 import { CompactToggleField } from '../../../UI/CompactToggleField';
 import { ColumnStackLayout } from '../../../UI/Layout';
 import ElementHighlighterProvider from '../../ElementHighlighterProvider';
+import Text from '../../../UI/Text';
 
 export default {
   title: 'UI Building Blocks/CompactToggleField',
@@ -17,30 +18,15 @@ export default {
 export const Default = () => {
   const [value, setValue] = React.useState<boolean>(false);
   const [value2, setValue2] = React.useState<boolean>(true);
-  const [value3, setValue3] = React.useState<boolean>(false);
   return (
     <ElementHighlighterProvider
       elements={[{ label: 'Default', id: 'default' }]}
     >
       <ColumnStackLayout expand>
-        <CompactToggleField
-          checked={value}
-          onCheck={setValue}
-          id="default"
-          label="Default"
-        />
-        <CompactToggleField
-          disabled
-          checked={value2}
-          onCheck={setValue2}
-          label="Disabled field"
-        />
-        <CompactToggleField
-          checked={value3}
-          onCheck={setValue3}
-          label="With description"
-          markdownDescription="This is a description"
-        />
+        <Text size="sub-title">Default</Text>
+        <CompactToggleField checked={value} onCheck={setValue} id="default" />
+        <Text size="sub-title">Disabled</Text>
+        <CompactToggleField disabled checked={value2} onCheck={setValue2} />
       </ColumnStackLayout>
     </ElementHighlighterProvider>
   );