diff --git a/components/ACheckbox.vue b/components/ACheckbox.vue
index a3ec5f0..5b6c884 100644
--- a/components/ACheckbox.vue
+++ b/components/ACheckbox.vue
@@ -290,4 +290,15 @@ watch(
     }
   }
 }
+
+.custom-checkbox input:checked:disabled ~ .checkmark-lab {
+  background-color: var(--a-grey-dark) !important;
+
+  &:after {
+    display: block;
+    border-color: var(--a-white) !important;
+  }
+}
+
+
 </style>
diff --git a/components/AGallery.vue b/components/AGallery.vue
index 2398d1d..723ed0a 100644
--- a/components/AGallery.vue
+++ b/components/AGallery.vue
@@ -19,6 +19,7 @@ interface AGalleryProps {
   title: string;
   subTitle: string;
   action: string;
+  autoHeight: boolean;
 }
 
 const props = withDefaults(defineProps<AGalleryProps>(), {
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<AGalleryProps>(), {
   title: undefined,
   subTitle: undefined,
   action: undefined,
+  autoHeight: false,
 });
 
 interface AGalleryEmits {
@@ -100,6 +102,9 @@ const mediasAndInspirations = computed((): string[] => {
 <template>
   <div
     class="container-gallery"
+    :class="{
+      'container-gallery-auto-height': autoHeight,
+    }"
     :style="{
       '--width': containerWidth + 'px',
       '--height': containerHeight + 'px',
@@ -321,6 +326,35 @@ const mediasAndInspirations = computed((): string[] => {
   background: transparent;
   max-width: 100%;
 
+  // AUTO HEIGHT
+  &.container-gallery-auto-height {
+    .media-container {
+      .media-content {
+        height: inherit;
+
+        .upload-container {
+          height: inherit;
+
+          :slotted(img),
+          :slotted(video) {
+            object-fit: contain;
+          }
+
+          :slotted(div) {
+            img {
+              object-fit: contain;
+            }
+          }
+        }
+      }
+    }
+
+    .icon-next,
+    .icon-back {
+      top: calc(50% - var(--border-space));
+    }
+  }
+
   .media-container {
     width: var(--width);
     overflow: hidden;
@@ -370,7 +404,7 @@ const mediasAndInspirations = computed((): string[] => {
         :slotted(img) {
           height: 100%;
           width: 100%;
-          object-fit: cover;
+          object-fit: contain;
         }
 
         :slotted(video) {
@@ -387,7 +421,7 @@ const mediasAndInspirations = computed((): string[] => {
           img {
             height: 100%;
             width: 100%;
-            object-fit: cover;
+            object-fit: contain;
           }
 
           video {
diff --git a/components/AModal.vue b/components/AModal.vue
index fb513c6..1adb007 100644
--- a/components/AModal.vue
+++ b/components/AModal.vue
@@ -131,13 +131,15 @@ defineExpose({
             'no-padding': !hasBodyPadding,
           }"
         >
-          <ACard
-            :has-header="hasHeader"
-            :has-footer="hasFooter"
-            :title-alignement="titleAlignement"
-            :action-alignement="actionAlignement"
-          >
-            <template #header>
+          <div class="a-card">
+            <header
+              class="a-card-head"
+              v-if="hasHeader"
+              :class="[
+                titleAlignement === 'center' && 'is-centered',
+                titleAlignement === 'right' && 'is-end',
+              ]"
+            >
               <div class="header-content">
                 <slot name="icon">
                   <AIcon v-if="icon" :icon="icon" color="black"></AIcon>
@@ -149,9 +151,9 @@ defineExpose({
                     </slot>
                   </h3>
                   <p>
-                    <slot name="sub-title"
-                      ><Translate>{{ subTitle }}</Translate></slot
-                    >
+                    <slot name="sub-title">
+                      <Translate>{{ subTitle }}</Translate>
+                    </slot>
                   </p>
                 </div>
                 <div class="right-content">
@@ -168,8 +170,8 @@ defineExpose({
                   <AIcon icon="close" color="black"></AIcon>
                 </AButton>
               </div>
-            </template>
-            <template #content>
+            </header>
+            <div class="a-card-body">
               <div class="body-container">
                 <AButton
                   v-if="!hasHeader"
@@ -189,11 +191,18 @@ defineExpose({
                 ></slot>
                 <slot name="content"></slot>
               </div>
-            </template>
-            <template #action>
+            </div>
+            <div
+              class="a-card-foot"
+              v-if="hasFooter"
+              :class="[
+                actionAlignement === 'center' && 'is-centered',
+                actionAlignement === 'right' && 'is-end',
+              ]"
+            >
               <slot name="action" :close="() => close()"></slot>
-            </template>
-          </ACard>
+            </div>
+          </div>
         </div>
       </div>
     </transition>
@@ -219,9 +228,12 @@ defineExpose({
   }
 
   .a-card {
+    position: relative;
     width: 100%;
     border-radius: 5px;
     max-height: 100vh;
+    background: var(--a-white);
+    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
 
     > .a-card-body {
       overflow: auto;
@@ -265,6 +277,10 @@ defineExpose({
       animation: upScale 0.25s cubic-bezier(0.23, 1, 0.32, 1) forwards;
       transform-origin: center;
 
+      @media screen and (max-width: 768px) {
+        max-height: 100svh !important;
+      }
+
       @keyframes upScale {
         0% {
           transform: scale(0.95);
@@ -353,6 +369,11 @@ defineExpose({
         padding: 16px 20px;
         max-height: 600px;
         position: relative;
+        overscroll-behavior: contain;
+
+        @media screen and (max-width: 768px) {
+          max-height: calc(100svh - 141px) !important;
+        }
 
         .body-container {
           .a-modal-close {
@@ -398,6 +419,8 @@ defineExpose({
 
       // FOOTER
       .a-card-foot {
+        display: flex;
+        gap: 10px;
         margin: 0;
         padding: 16px;
         border-top: 1px solid var(--a-grey-light);
@@ -458,8 +481,8 @@ defineExpose({
         height: 100%;
 
         .a-card-body {
-          height: 100%;
-          max-height: 100%;
+          height: calc(100% - 162px);
+          max-height: calc(100% - 162px);
         }
       }
     }
@@ -575,8 +598,8 @@ defineExpose({
         height: 100%;
 
         .a-card-body {
-          height: 100%;
-          max-height: 100%;
+          height: calc(100% - 162px);
+          max-height: calc(100% - 162px);
         }
       }
     }
@@ -616,8 +639,8 @@ defineExpose({
         height: 100%;
 
         .a-card-body {
-          height: 100%;
-          max-height: 100%;
+          height: calc(100% - 162px);
+          max-height: calc(100% - 162px);
         }
       }
     }
diff --git a/components/ANumberAnimated.vue b/components/ANumberAnimated.vue
index 733d061..a13c841 100644
--- a/components/ANumberAnimated.vue
+++ b/components/ANumberAnimated.vue
@@ -33,9 +33,11 @@ watch(
 </script>
 
 <template>
-  <p>
-    <span v-if="!decimal">{{ Math.floor(target) }}</span>
-    <span v-else>{{ Math.floor(target * 10) / 10 }}</span>
-    <span>{{ suffix }}</span>
-  </p>
+<p>
+  <span v-if="decimal && target % 1 !== 0">{{ target.toFixed(1) }}</span>
+  <span v-else>{{ Math.round(target) }}</span>
+  <span>{{ suffix }}</span>
+</p>
+
+
 </template>
diff --git a/components/ATextarea.vue b/components/ATextarea.vue
index 55cadf1..8c04d39 100644
--- a/components/ATextarea.vue
+++ b/components/ATextarea.vue
@@ -81,6 +81,7 @@ const color = useColor(mainColor);
 
     .textarea {
       font-family: inherit;
+      background-color: inherit;
     }
 
     &::after {
@@ -90,7 +91,7 @@ const color = useColor(mainColor);
       left: 0;
       width: 100%;
       height: 30px;
-      background: var(--a-white);
+      background-color: inherit;
       pointer-events: none;
       border-radius: 10px;
     }