diff --git a/_dev/elegance.css b/_dev/elegance.css
index ea22670..5925f28 100644
--- a/_dev/elegance.css
+++ b/_dev/elegance.css
@@ -35,3 +35,77 @@ ul {
 input[type="radio"],input[type="checkbox"] {
   @apply focus:ring-transparent;
 }
+
+.wrapper {
+  max-width: 50rem;
+  width: 100%;
+  margin: 0 auto;
+}
+.tabs {
+  position: relative;
+  height: 14.75rem;
+}
+.tabs::before,
+.tabs::after {
+  content: "";
+  display: table;
+}
+.tabs::after {
+  clear: both;
+}
+.tab {
+  float: left;
+}
+.tab-switch {
+  display: none;
+}
+.tab-label {
+  position: relative;
+  display: block;
+  line-height: 2.75em;
+  height: 3em;
+  padding: 0 1.618em;
+  color: #000000;
+  cursor: pointer;
+  top: 0;
+  transition: all 0.25s;
+}
+.tab-label:hover {
+  top: -0.25rem;
+  transition: top 0.25s;
+}
+.tab-content {
+  height: 12rem;
+  position: absolute;
+  z-index: 1;
+  top: 2.75em;
+  left: 0;
+  padding: 1.618rem;
+  background: #fff;
+  color: #2c3e50;
+  opacity: 0;
+  transition: all 0.35s;
+}
+.tab-switch:checked + .tab-label {
+  background: #fff;
+  color: #2c3e50;
+  border-bottom: 0;
+  transition: all 0.35s;
+  z-index: 1;
+  top: -0.0625rem;
+}
+.tab-switch:checked + label + .tab-content {
+  z-index: 2;
+  opacity: 1;
+  transition: all 0.35s;
+}
+/* For Webkit-based browsers (Chrome, Safari and Opera) */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* For IE, Edge and Firefox */
+.scrollbar-hide {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
\ No newline at end of file
diff --git a/assets/css/theme.css b/assets/css/theme.css
index 68b5ba0..31cf6ca 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -759,6 +759,10 @@ select {
   visibility: collapse;
 }
 
+.static {
+  position: static;
+}
+
 .fixed {
   position: fixed;
 }
@@ -787,10 +791,6 @@ select {
   left: 0px;
 }
 
-.left-1\/2 {
-  left: 50%;
-}
-
 .left-\[100\%\] {
   left: 100%;
 }
@@ -846,6 +846,11 @@ select {
   margin-bottom: -0.75rem;
 }
 
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -876,12 +881,20 @@ select {
   margin-bottom: 2rem;
 }
 
+.-mb-px {
+  margin-bottom: -1px;
+}
+
+.mb-0 {
+  margin-bottom: 0px;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
 
-.mb-16 {
-  margin-bottom: 4rem;
+.mb-12 {
+  margin-bottom: 3rem;
 }
 
 .mb-2 {
@@ -960,6 +973,10 @@ select {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .inline {
   display: inline;
 }
@@ -984,8 +1001,8 @@ select {
   aspect-ratio: 342/513;
 }
 
-.aspect-square {
-  aspect-ratio: 1 / 1;
+.h-1\/2 {
+  height: 50%;
 }
 
 .h-12 {
@@ -1012,6 +1029,10 @@ select {
   height: 2rem;
 }
 
+.h-\[40px\] {
+  height: 40px;
+}
+
 .h-auto {
   height: auto;
 }
@@ -1044,6 +1065,10 @@ select {
   width: 3.5rem;
 }
 
+.w-2\/5 {
+  width: 40%;
+}
+
 .w-24 {
   width: 6rem;
 }
@@ -1052,6 +1077,10 @@ select {
   width: 75%;
 }
 
+.w-3\/5 {
+  width: 60%;
+}
+
 .w-32 {
   width: 8rem;
 }
@@ -1080,14 +1109,18 @@ select {
   width: 2rem;
 }
 
-.w-\[150px\] {
-  width: 150px;
-}
-
 .w-\[160px\] {
   width: 160px;
 }
 
+.w-\[220px\] {
+  width: 220px;
+}
+
+.w-\[95px\] {
+  width: 95px;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1097,10 +1130,6 @@ select {
   width: max-content;
 }
 
-.w-px {
-  width: 1px;
-}
-
 .max-w-6xl {
   max-width: 72rem;
 }
@@ -1156,14 +1185,34 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
 
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
 .list-\[square\] {
   list-style-type: square;
 }
 
+.list-none {
+  list-style-type: none;
+}
+
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1242,6 +1291,10 @@ select {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -1256,22 +1309,43 @@ select {
   white-space: nowrap;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
 
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
 .border {
   border-width: 1px;
 }
 
-.border-b {
-  border-bottom-width: 1px;
+.border-b-0 {
+  border-bottom-width: 0px;
+}
+
+.border-l-0 {
+  border-left-width: 0px;
+}
+
+.border-r-0 {
+  border-right-width: 0px;
 }
 
 .border-t {
   border-top-width: 1px;
 }
 
+.border-t-0 {
+  border-top-width: 0px;
+}
+
 .border-none {
   border-style: none;
 }
@@ -1331,10 +1405,6 @@ select {
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
 }
 
-.border-transparent {
-  border-color: transparent;
-}
-
 .bg-black\/70 {
   background-color: rgb(0 0 0 / 0.7);
 }
@@ -1344,6 +1414,11 @@ select {
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
 
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
 .bg-blue-950 {
   --tw-bg-opacity: 1;
   background-color: rgb(23 37 84 / var(--tw-bg-opacity));
@@ -1359,6 +1434,16 @@ select {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1369,6 +1454,10 @@ select {
   background-color: rgb(254 242 242 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1378,10 +1467,6 @@ select {
   stroke: #000;
 }
 
-.stroke-blue-900 {
-  stroke: #1e3a8a;
-}
-
 .stroke-gray-500 {
   stroke: #6b7280;
 }
@@ -1398,26 +1483,21 @@ select {
   stroke: inherit;
 }
 
-.stroke-2 {
-  stroke-width: 2;
-}
-
 .stroke-\[3px\] {
   stroke-width: 3px;
 }
 
-.object-contain {
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
 }
 
-.p-0 {
-  padding: 0px;
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-10 {
+  padding: 2.5rem;
 }
 
 .p-2 {
@@ -1441,6 +1521,11 @@ select {
   padding-right: 0.5rem;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1485,6 +1570,10 @@ select {
   padding-bottom: 3rem;
 }
 
+.pl-0 {
+  padding-left: 0px;
+}
+
 .pl-12 {
   padding-left: 3rem;
 }
@@ -1493,6 +1582,10 @@ select {
   padding-left: 0.5rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -1545,6 +1638,18 @@ select {
   text-align: justify;
 }
 
+.text-start {
+  text-align: start;
+}
+
+.text-end {
+  text-align: end;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1607,6 +1712,10 @@ select {
   line-height: 1;
 }
 
+.leading-normal {
+  line-height: 1.5;
+}
+
 .text-blue-900 {
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity));
@@ -1632,6 +1741,16 @@ select {
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1675,16 +1794,34 @@ select {
   text-decoration-line: line-through;
 }
 
+.no-underline {
+  text-decoration-line: none;
+}
+
 .underline-offset-2 {
   text-underline-offset: 2px;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -1740,6 +1877,95 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   --tw-ring-color: transparent;
 }
 
+.wrapper {
+  max-width: 50rem;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.tabs {
+  position: relative;
+  height: 14.75rem;
+}
+
+.tabs::before,
+.tabs::after {
+  content: "";
+  display: table;
+}
+
+.tabs::after {
+  clear: both;
+}
+
+.tab {
+  float: left;
+}
+
+.tab-switch {
+  display: none;
+}
+
+.tab-label {
+  position: relative;
+  display: block;
+  line-height: 2.75em;
+  height: 3em;
+  padding: 0 1.618em;
+  color: #000000;
+  cursor: pointer;
+  top: 0;
+  transition: all 0.25s;
+}
+
+.tab-label:hover {
+  top: -0.25rem;
+  transition: top 0.25s;
+}
+
+.tab-content {
+  height: 12rem;
+  position: absolute;
+  z-index: 1;
+  top: 2.75em;
+  left: 0;
+  padding: 1.618rem;
+  background: #fff;
+  color: #2c3e50;
+  opacity: 0;
+  transition: all 0.35s;
+}
+
+.tab-switch:checked + .tab-label {
+  background: #fff;
+  color: #2c3e50;
+  border-bottom: 0;
+  transition: all 0.35s;
+  z-index: 1;
+  top: -0.0625rem;
+}
+
+.tab-switch:checked + label + .tab-content {
+  z-index: 2;
+  opacity: 1;
+  transition: all 0.35s;
+}
+
+/* For Webkit-based browsers (Chrome, Safari and Opera) */
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* For IE, Edge and Firefox */
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
 .file\:mr-4::file-selector-button {
   margin-right: 1rem;
 }
@@ -1803,11 +2029,21 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   border-color: rgb(30 58 138 / var(--tw-border-opacity));
 }
 
+.hover\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-blue-900:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(30 58 138 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
 .hover\:stroke-blue-900:hover {
   stroke: #1e3a8a;
 }
@@ -1918,26 +2154,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
 }
 
 @media not all and (min-width: 1024px) {
-  .max-lg\:hidden {
-    display: none;
-  }
-
-  .max-lg\:w-full {
-    width: 100%;
-  }
-
   .max-lg\:flex-col {
     flex-direction: column;
   }
-
-  .max-lg\:items-center {
-    align-items: center;
-  }
-
-  .max-lg\:text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
 }
 
 @media not all and (min-width: 768px) {
@@ -1953,10 +2172,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 100%;
   }
 
-  .max-md\:max-w-full {
-    max-width: 100%;
-  }
-
   .max-md\:flex-col {
     flex-direction: column;
   }
@@ -1982,17 +2197,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-left: 1rem;
   }
 
-  .max-md\:pr-2 {
-    padding-right: 0.5rem;
-  }
-
   .max-md\:text-center {
     text-align: center;
   }
-
-  .max-md\:leading-5 {
-    line-height: 1.25rem;
-  }
 }
 
 @media not all and (min-width: 640px) {
@@ -2012,14 +2219,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     position: absolute;
   }
 
-  .md\:left-1\/2 {
-    left: 50%;
-  }
-
-  .md\:mb-4 {
-    margin-bottom: 1rem;
-  }
-
   .md\:block {
     display: block;
   }
@@ -2044,6 +2243,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 33.333333%;
   }
 
+  .md\:w-1\/4 {
+    width: 25%;
+  }
+
   .md\:w-1\/6 {
     width: 16.666667%;
   }
@@ -2080,11 +2283,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     gap: 1rem;
   }
 
-  .md\:object-cover {
-    -o-object-fit: cover;
-       object-fit: cover;
-  }
-
   .md\:p-2 {
     padding: 0.5rem;
   }
@@ -2109,11 +2307,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-right: 12rem;
   }
 
-  .md\:text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-
   .md\:text-base {
     font-size: 1rem;
     line-height: 1.5rem;
@@ -2151,8 +2344,8 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
-  .lg\:h-screen {
-    height: 100vh;
+  .lg\:h-\[90vh\] {
+    height: 90vh;
   }
 
   .lg\:w-1\/3 {
@@ -2175,18 +2368,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 60%;
   }
 
-  .lg\:w-\[850px\] {
-    width: 850px;
+  .lg\:w-\[450px\] {
+    width: 450px;
+  }
+
+  .lg\:w-\[500px\] {
+    width: 500px;
+  }
+
+  .lg\:w-\[600px\] {
+    width: 600px;
   }
 
   .lg\:w-full {
     width: 100%;
   }
 
-  .lg\:max-w-\[850px\] {
-    max-width: 850px;
-  }
-
   .lg\:max-w-full {
     max-width: 100%;
   }
@@ -2220,13 +2417,16 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-bottom: 0px;
   }
 
-  .lg\:pt-24 {
-    padding-top: 6rem;
+  .lg\:pr-11 {
+    padding-right: 2.75rem;
   }
 
-  .lg\:text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
+  .lg\:pr-4 {
+    padding-right: 1rem;
+  }
+
+  .lg\:pt-24 {
+    padding-top: 6rem;
   }
 
   .lg\:shadow-none {
@@ -2240,9 +2440,4 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   .xl\:w-1\/4 {
     width: 25%;
   }
-
-  .xl\:text-6xl {
-    font-size: 3.75rem;
-    line-height: 1;
-  }
-}
+}
\ No newline at end of file
diff --git a/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl b/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl
index a0177f4..60af8d9 100644
--- a/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl
+++ b/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl
@@ -27,17 +27,19 @@
     <section class=" h-34 p-10 flex flex-col">
         {if isset($selectedForm)}
             <h2 class="text-lg font-bold">{l s='Form:' mod='thobbodymeasurements'} {$selectedForm.label_form}</h2>
-            <form action="#" method="post" class="flex flex-col ">
+            <form action="#" method="post" class="flex flex-col items-center justify-center ">
                 {foreach from=$selectedForm.attributes item=attribute}
-                <section class="flex flex-row mx-auto p-4">
+                <section class="flex flex-row p-4">
                     <div class=" flex flex-row gap-4">
+                       <div class="w-24 lg:pr-4 text-end mt-2">
                         <label for="{$attribute.id}" class="text-base font-semibold mt-1 ">{$attribute.name}:</label>
-                        <div class="w-[500px]">
+                        </div>
+                        <div class="lg:w-[500px]">
                             <input
                                 type="text"
                                 id="{$attribute.id}"
                                 name="{$attribute.id}"
-                                class=" w-full"
+                                class=" lg:w-[450px]"
                                 pattern="[0-9]+"
                                 title="Please enter a positive number" 
                                 required
@@ -48,7 +50,7 @@
                                 {/if}
                             />
                         </div>
-                        <div class="mt-1">
+                        <div class="mt-1 w-24 mt-2 text-start ">
                             {$attribute.unit}
                         </div>
                     </div>
@@ -57,7 +59,7 @@
                 </section>
                 {/foreach}
 
-                <div class="">
+                <div class="lg:pr-11">
                     <button name="measurements_submit_form" type="submit" class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light">{l s='Save Measurements' mod='thobbodymeasurements'}</button>
                 </div>
             </form>
diff --git a/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl b/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl
index c192473..d66a2e0 100644
--- a/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl
+++ b/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl
@@ -9,8 +9,78 @@
 </a>
 
 <!-- Modal -->
-<div class="modal modal-set-measurements" id="measurements-modal" tabindex="-1" role="dialog" style="display: none;;overflow-x:auto ;position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 80%; background-color: white; border: 1px solid black; padding: 20px; z-index: 9999;">
-  <div class="modal-dialog" role="document">
+<div class="modal modal-set-measurements scrollbar-hide lg:w-[600px]" id="measurements-modal" tabindex="-1" role="dialog" style="display: none;;overflow-x:auto ;position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 80%; background-color: white; border: 1px solid black; padding: 20px; z-index: 9999;">
+ <div class="wrapper">
+  <div class="tabs">
+    <div class="tab">
+      <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
+      <label for="tab-1" class="tab-label">Tab One</label>
+      <div class="tab-content">
+      {if isset($currentForm)}
+        <h2 class="font-semibold mb-4">{$currentForm.label_form}</h2>
+              <form id="measurements-form" name="measurements-form" class="form-horizontal" action="#" method="POST">
+                <section class="form-fields">
+                  {foreach from=json_decode($currentForm.attributes, true) item=$attribute}
+                    <div class="mb-4 flex flex-row form-group ">
+                      <label for="{$attribute.id}" class="form-control-label md:w-1/4 pr-4 pl-4 required">{$attribute.name}</label>
+                      <div class="md:w-1/2 pr-4 pl-4 js-input-column">
+                        <input 
+                          type="text"
+                          id="{$attribute.id}"
+                          name="{$attribute.id}"
+                          class=" block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
+                          pattern="[0-9]+"
+                          title="Please enter a positive number" 
+                          required
+                          {if isset($customerMeasurements) && isset($customerMeasurements[$attribute.id])}
+                            value="{$customerMeasurements[$attribute.id]}"
+                          {/if}>
+                      </div>
+                      <div class="md:w-1/4 pr-4 pl-4 form-control-comment">
+                        <small class="block mt-1 text-gray-700">{$attribute.unit}</small>
+                      </div>
+                    </div>
+                  {/foreach}
+                  <input type="hidden" name="current_form_id" id="current_form_id" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.id_form}">
+                  <input type="hidden" name="current_form_label" id="current_form_label" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.label_form}">
+                </section>
+              </form>
+                 {else}
+              <p>No form data available.</p>
+            {/if}
+            <button type="submit" class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light" id="submit-measurements-button">{l s='Submit' mod='thobbodymeasurements'}</button>
+        <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-gray-600 text-white hover:bg-gray-700" data-dismiss="modal">Close</button>
+        
+      </div>
+    </div>
+    <div class="tab">
+      <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
+      <label for="tab-2" class="tab-label">Tab Two</label>
+      <div class="tab-content">
+         <div class="tab-pane" id="mirror-size-measurements" role="tabpanel" aria-labelledby="mirror-size-measurements-tab">
+            {if $qrCode}
+                <img src="{$qrCode}" alt="Mirror Size QR Code" class="max-w-full h-auto">
+                <p> Scan the above QR code to begin our easy 2 photo custom measurement collection.</p>
+                <p> Click on 'Photos Completed' button once your above process is finished. </p>
+                <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-green-500 text-white hover:green-600" id="photos-completed-button" name="photos-completed-button">Photos Completed</button>
+            {/if}
+          </div>
+         <div class="modal-footer">
+        <button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-gray-600 text-white hover:bg-gray-700" data-dismiss="modal">Close</button>
+      </div>
+      </div>
+    </div>
+
+  </div>
+
+</div>
+ 
+
+
+
+
+ 
+ <!-- <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <ul class="flex flex-wrap list-none pl-0 mb-0 border border-t-0 border-r-0 border-l-0 border-b-1 border-gray-200" id="measurementTabs" role="tablist">
@@ -73,4 +143,4 @@
       </div>
     </div>
   </div>
-</div>
+</div> -->