diff --git a/modules/thobbodymeasurements/views/js/front-set-product-measurements.js b/modules/thobbodymeasurements/views/js/front-set-product-measurements.js
new file mode 100644
index 0000000..0ce9d9d
--- /dev/null
+++ b/modules/thobbodymeasurements/views/js/front-set-product-measurements.js
@@ -0,0 +1,285 @@
+$(document).ready(function() {
+
+    $('#photos-completed-button').click(function(event){
+        event.preventDefault();
+
+        var accessCode = $('#product-additional-info-access-code').val();
+
+        $.ajax({
+            url: 'index.php?fc=module&module=thobbodymeasurements&controller=SetProductMeasurements&ajax=true&action=getCustomerMeasurementsForMirrorSize',
+            method: 'POST',
+            dataType: 'json',
+            headers: {
+                Accepts: "application/json",
+            },
+            data: {
+                ajax: true,
+                action: 'getCustomerMeasurementsForMirrorSize',
+                accessCode: accessCode,
+            },
+            success: function(response) {
+                console.log(response);
+                // window.location.reload();
+            },
+            error: function(xhr, status, error) {
+                console.error(xhr.responseText);
+            }
+        });
+    });
+
+       $('#set-measurements-button').click(function(event) {
+          // Prevent the default behavior of the anchor tag
+          event.preventDefault();
+      
+          // Toggle the visibility of the modal
+         $('#measurements-modal').toggle();
+        });
+        $(document).click(function(event) {
+            // Check if the click target is not within the modal
+            if (!$(event.target).closest('#measurements-modal').length && !$(event.target).is('#set-measurements-button')) {
+                // Hide the modal
+                $('#measurements-modal').hide();
+            }
+        });
+    });
+
+
+   // Add click event handler to the "Custom Measurements" tab
+   $('#custom-measurements-tab').click(function(event) {
+    // Prevent the default behavior of the anchor tag
+    event.preventDefault();
+
+    // Hide the "Mirror Size Measurements" tab if it's currently active
+    $('#mirror-size-measurements').removeClass('opacity-100 block active');
+
+    // Show the "Custom Measurements" tab
+    $('#custom-measurements').addClass('opacity-100 block active');
+});
+
+// Add click event handler to the "Mirror Size Measurements" tab
+$('#mirror-size-measurements-tab').click(function(event) {
+    // Prevent the default behavior of the anchor tag
+    event.preventDefault();
+
+
+    // Show the "Mirror Size Measurements" tab
+    $('#mirror-size-measurements').addClass('opacity-100 block active');
+});
+
+
+
+    // Add click event handler to the "Photos Completed" button
+    $('#photos-completed-button').click(function(event) {
+        // Perform some action here
+        alert('Photos Completed button clicked!');
+    });
+      
+
+    $('#submit-measurements-button').click(function(event) {
+        event.preventDefault();
+        var measurements = [];
+
+        $('.modal-set-measurements .form-group').each(function() {
+            var attributeId = $(this).find('input').attr('id');
+            var value = $(this).find('input').val();
+            console.log("Attribute id: ",attributeId)
+            console.log("value: ",value)
+            
+
+            measurements.push({
+                "attributeId": attributeId,
+                "value": value
+            });
+        });
+        console.log("measurements: ",measurements)
+
+        var formId = $('#current_form_id').val();
+        var formLabel = $('#current_form_label').val();
+
+        var productId = $('#product-additional-info-product-id').val();
+        var categoryId = $('#product-additional-info-category-id').val();
+        var productAttributeId = $('#product-additional-info-product-attribute-id').val();
+
+        $.ajax({
+            url: 'index.php?fc=module&module=thobbodymeasurements&controller=SetProductMeasurements&ajax=true&action=saveProductMeasurements',
+            method: 'POST',
+            dataType: 'json',
+            headers: {
+                Accepts: "application/json",
+            },
+            data: {
+                ajax: true,
+                action: 'saveProductMeasurements',
+                formId: formId,
+                formLabel: formLabel,
+                measurements: JSON.stringify(measurements),
+                productId: productId,
+                categoryId: categoryId,
+                productAttributeId:  productAttributeId,
+            },
+            success: function(response) {
+                console.log(response);
+                window.location.reload();
+            },
+            error: function(xhr, status, error) {
+                console.error(xhr.responseText);
+            }
+        });
+    });
+
+    $('.add-to-cart').click( (event) => {
+        console.log("inside add to cart click...");
+
+        var productId = $('#product-additional-info-product-id').val();
+        var categoryId = $('#product-additional-info-category-id').val();
+        var productAttributeId = $('#product-additional-info-product-attribute-id').val();
+
+        if(!productId && !categoryId){
+            return;
+        }
+
+        event.preventDefault();
+        event.stopImmediatePropagation();
+
+        var formId = $('#current_form_id').val();
+        var formLabel = $('#current_form_label').val();
+        var measurements = [];
+
+        $('.modal-set-measurements .form-group').each(function() {
+            var attributeId = $(this).find('input').attr('id');
+            var value = $(this).find('input').val();
+
+            measurements.push({
+                "attributeId": attributeId,
+                "value": value
+            });
+        });
+
+        //first check if the measurements are set by the customer
+        $.ajax({
+            url: 'index.php?fc=module&module=thobbodymeasurements&controller=SetProductMeasurements&ajax=true&action=customerHasMeasurements',
+            method: 'POST',
+            dataType: 'json',
+            headers: {
+                Accepts: "application/json",
+            },
+            data: {
+                ajax: true,
+                action: 'customerHasMeasurements',
+                productId: productId,
+                categoryId: categoryId,
+            }
+        }).done(function (response){
+            console.log('has measurements response....');
+            if(!response.hasMeasurements){
+                console.log("Set measurements first...");
+                $('#measurements-modal').modal('show');
+            }else{
+                $.ajax({
+                    url: 'index.php?fc=module&module=thobbodymeasurements&controller=SetProductMeasurements&ajax=true&action=saveProductMeasurements',
+                    method: 'POST',
+                    dataType: 'json',
+                    headers: {
+                        Accepts: "application/json",
+                    },
+                    data: {
+                        ajax: true,
+                        action: 'saveProductMeasurements',
+                        formId: formId,
+                        formLabel: formLabel,
+                        measurements: JSON.stringify(measurements),
+                        productId: productId,
+                        categoryId: categoryId,
+                        productAttributeId:  productAttributeId,
+                    },
+                    success: function(response) {
+                        console.log(response);
+                        console.log("Proceed to add to cart....");
+
+                        const $form = $(event.currentTarget.form);
+                        const query = `${$form.serialize()}&add=1&action=update`;
+                        console.log("Query: ", query);
+
+                        const actionURL = $form.attr('action');
+                        const addToCartButton = $(event.currentTarget);
+
+                        addToCartButton.prop('disabled', true);
+
+                        const isQuantityInputValid = ($input) => {
+                            let validInput = true;
+
+                            $input.each((index, input) => {
+                                const $currentInput = $(input);
+                                const minimalValue = parseInt($currentInput.attr('min'), 10);
+
+                                if (minimalValue && $currentInput.val() < minimalValue) {
+                                    onInvalidQuantity($currentInput);
+                                    validInput = false;
+                                }
+                            });
+
+                            return validInput;
+                        };
+
+                        let onInvalidQuantity = ($input) => {
+                            $input
+                                .parents(prestashop.selectors.product.addToCart)
+                                .first()
+                                .find(prestashop.selectors.product.minimalQuantity)
+                                .addClass('error');
+                            $input
+                                .parent()
+                                .find('label')
+                                .addClass('error');
+                        };
+
+                        const $quantityInput = $form.find('input[min]');
+
+                        if (!isQuantityInputValid($quantityInput)) {
+                            onInvalidQuantity($quantityInput);
+                            return;
+                        }
+
+                        $.post(actionURL, query, null, 'json')
+                            .then((resp) => {
+                                console.log('Resp: ', resp);
+                                if (!resp.hasError) {
+                                    prestashop.emit('updateCart', {
+                                        reason: {
+                                            idProduct: resp.id_product,
+                                            idProductAttribute: resp.id_product_attribute,
+                                            idCustomization: resp.id_customization,
+                                            linkAction: 'add-to-cart',
+                                            cart: resp.cart,
+                                        },
+                                        resp,
+                                    });
+                                } else {
+                                    prestashop.emit('handleError', {
+                                        eventType: 'addProductToCart',
+                                        resp,
+                                    });
+                                }
+                            })
+                            .fail((resp) => {
+                                prestashop.emit('handleError', {
+                                    eventType: 'addProductToCart',
+                                    resp,
+                                });
+                            })
+                            .always(() => {
+                                setTimeout(() => {
+                                    addToCartButton.prop('disabled', false);
+                                }, 1000);
+                            });
+                    },
+                    error: function(xhr, status, error) {
+                        console.error(xhr.responseText);
+                    }
+                }); 
+            }
+        });
+    });
+
+
+
diff --git a/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl b/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl
new file mode 100644
index 0000000..a0177f4
--- /dev/null
+++ b/modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl
@@ -0,0 +1,86 @@
+{**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ *}
+{extends file='customer/page.tpl'}
+
+{block name='page_title'}
+    {l s='thob - Manual Body Measurements' mod='thobbodymeasurements'}
+{/block}
+
+{block name='page_content'}
+<div class="bg-white-400  shadow-md">
+    <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 ">
+                {foreach from=$selectedForm.attributes item=attribute}
+                <section class="flex flex-row mx-auto p-4">
+                    <div class=" flex flex-row gap-4">
+                        <label for="{$attribute.id}" class="text-base font-semibold mt-1 ">{$attribute.name}:</label>
+                        <div class="w-[500px]">
+                            <input
+                                type="text"
+                                id="{$attribute.id}"
+                                name="{$attribute.id}"
+                                class=" w-full"
+                                pattern="[0-9]+"
+                                title="Please enter a positive number" 
+                                required
+                                {if isset($customerMeasurements) && isset($customerMeasurements[$attribute.id])}
+                                    value="{$customerMeasurements[$attribute.id]}"
+                                {else}
+                                    placeholder="Enter measurement"
+                                {/if}
+                            />
+                        </div>
+                        <div class="mt-1">
+                            {$attribute.unit}
+                        </div>
+                    </div>
+                    <input type="hidden" name="selected_form_id" id="selected_form_id" class="form-control" value="{$selectedForm.id_form}">
+                    <input type="hidden" name="selected_form_label" id="selected_form_label" class="form-control" value="{$selectedForm.label_form}">
+                </section>
+                {/foreach}
+
+                <div class="">
+                    <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>
+        {else}
+            <form action="#" method="post" class="form-horizontal">
+                <div class="flex lg:flex-row flex-col gap-4 justify-center">
+                    <label for="form_select" class="form-control-label col-md-3 font-medium text-lg mt-1 ">{l s='Select a Form:' mod='thobbodymeasurements'}</label>
+                    <div class="">
+                        <select name="form_select" id="form_select" class="form-control form-control-select w-[220px] h-[40px] rounded">
+                            {foreach from=$currentForms item=form}
+                                <option value="{$form.id_form}">{$form.label_form}</option>
+                            {/foreach}
+                        </select>
+                    </div>
+                </div>
+
+                <div class="">
+                    <div class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light w-32">
+                        <button type="submit" class="">{l s='Select Form' mod='thobbodymeasurements'}</button>
+                    </div>
+                </div>
+            </form>
+        {/if}
+    </section>
+</div>
+{/block}
diff --git a/modules/thobbodymeasurements/views/templates/hook/customer_account.tpl b/modules/thobbodymeasurements/views/templates/hook/customer_account.tpl
new file mode 100644
index 0000000..f5c5e5a
--- /dev/null
+++ b/modules/thobbodymeasurements/views/templates/hook/customer_account.tpl
@@ -0,0 +1,7 @@
+
+<a class="w-full md:w-1/3 lg:w-1/5 flex flex-col p-4 border-gray-500"  id="tbm-link" href="{$front_controller}">
+  <span class="flex flex-col items-center font-semibolds text-lg">
+    <svg xmlns="http://www.w3.org/2000/svg" width=32 height=32 viewBox="0 0 32 32" id="measurements" stroke="currentColor"><path d="M29.5,1h-5A2.5,2.5,0,0,0,22,3.5V22H3.5A2.5,2.5,0,0,0,1,24.5v5A2.5,2.5,0,0,0,3.5,32h26A2.5,2.5,0,0,0,32,29.5V3.5A2.5,2.5,0,0,0,29.5,1ZM31,29.5A1.5,1.5,0,0,1,29.5,31H3.5A1.5,1.5,0,0,1,2,29.5v-5A1.5,1.5,0,0,1,3.5,23H4v3.5a.5.5,0,0,0,1,0V23H7v1.5a.5.5,0,0,0,1,0V23h2v1.5a.5.5,0,0,0,1,0V23h2v3.5a.5.5,0,0,0,1,0V23h2v1.5a.5.5,0,0,0,1,0V23h2v1.5a.5.5,0,0,0,1,0V23h2v3.5a.5.5,0,0,0,1,0V23h3.5a.5.5,0,0,0,0-1H23V20h1.5a.5.5,0,0,0,0-1H23V17h1.5a.5.5,0,0,0,0-1H23V14h3.5a.5.5,0,0,0,0-1H23V11h1.5a.5.5,0,0,0,0-1H23V8h1.5a.5.5,0,0,0,0-1H23V5h3.5a.5.5,0,0,0,0-1H23V3.5A1.5,1.5,0,0,1,24.5,2h5A1.5,1.5,0,0,1,31,3.5Z"></path></svg>
+    {l s='thob Body Measurements' mod='thobbodymeasurements'}
+  </span>
+</a>
\ No newline at end of file
diff --git a/modules/thobbodymeasurements/views/templates/hook/display_measurements_section_cart.tpl b/modules/thobbodymeasurements/views/templates/hook/display_measurements_section_cart.tpl
new file mode 100644
index 0000000..5e25114
--- /dev/null
+++ b/modules/thobbodymeasurements/views/templates/hook/display_measurements_section_cart.tpl
@@ -0,0 +1,22 @@
+{if $measurements}
+      <div class="block w-full overflow-auto scrolling-touch table-striped p-1">
+        <table class="w-full max-w-full mb-4 bg-transparent">
+            <thead>
+                <tr>
+                    <th>Attribute</th>
+                    <th>Value</th>
+                    <th>Unit</th>
+                </tr>
+            </thead>
+            <tbody>
+            {foreach from=$measurements item="measurement"}
+                <tr>
+                    <td style="text-align:left;">{$measurement.label}</td>
+                    <td style="text-align:left;">{$measurement.value}</td>
+                    <td style="text-align:left;">{$measurement.unit}</td>
+                </tr>
+            {/foreach}
+            </tbody>
+        </table>
+    </div>
+{/if}
diff --git a/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl b/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl
new file mode 100644
index 0000000..c192473
--- /dev/null
+++ b/modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl
@@ -0,0 +1,76 @@
+
+<input type="hidden" id="product-additional-info-product-id" value="{$productId}">
+<input type="hidden" id="product-additional-info-category-id" value="{$categoryId}">
+<input type="hidden" id="product-additional-info-product-attribute-id" value="{$productAttributeId}">
+<input type="hidden" id="product-additional-info-access-code" value="{$accessCode}">
+
+<a href="#" class="product-set-measurements-btn" id="set-measurements-button" data-toggle="modal" data-target="#measurements-modal">
+  Set Measurements
+</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-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">
+          <li class="-mb-px">
+            <a class="inline-block py-2 px-4 no-underline border border-b-0 mx-1 rounded rounded-t active" id="custom-measurements-tab" data-toggle="tab" href="#custom-measurements" role="tab" aria-controls="custom-measurements" aria-selected="true">Custom Measurements</a>
+          </li>
+          <li class="-mb-px">
+            <a class="inline-block py-2 px-4 no-underline border border-b-0 mx-1 rounded rounded-t" id="mirror-size-measurements-tab" data-toggle="tab" href="#mirror-size-measurements" role="tab" aria-controls="mirror-size-measurements" aria-selected="false">Mirror Size Measurements</a>
+          </li>
+        </ul>
+      <div class="modal-body">
+        <div class="tab-content" id="measurementTabsContent">
+          <div class="tab-pane opacity-100 block active" id="custom-measurements" role="tabpanel" aria-labelledby="custom-measurements-tab">
+            {if isset($currentForm)}
+              <h2>{$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-wrap 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}
+          </div>
+          <div class="tab-pane opacity-0" 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>
+      </div>
+      <div class="modal-footer">
+        <button type="submit" 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-blue-600 text-white hover:bg-blue-600" 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>
+</div>
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index a3d050e..8b02604 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -41,7 +41,7 @@
             <div class="modal-body flex flex-col gap-2">
               {foreach from=$customization.fields item="field"}
                 <div class="product-customization-line row">
-                  <div class="col-sm-12 col-xs-8 value">
+                  <div class="value">
                     {if $field.type == 'text'}
                       {if (int)$field.id_module}
                         {$field.text nofilter}
diff --git a/templates/checkout/_partials/order-final-summary-table.tpl b/templates/checkout/_partials/order-final-summary-table.tpl
old mode 100755
new mode 100644
diff --git a/templates/checkout/_partials/order-final-summary.tpl b/templates/checkout/_partials/order-final-summary.tpl
old mode 100755
new mode 100644