diff --git a/apps/storefront/index.html b/apps/storefront/index.html
index d72ee864..1499313e 100644
--- a/apps/storefront/index.html
+++ b/apps/storefront/index.html
@@ -67,41 +67,46 @@ <h1>Ugly Cornerstone Store Theme with Weird CSS</h1>
         This is the product added for local testing (with options)
         Commented out below are products without options.
       -->
+
+    <div>
+      <div class="productView-info-value" data-product-sku="">TP-001-RE-SM-SE</div>
       <form class="form" method="post" action="https://storefront-staging.mybigcommerce.com/cart.php" enctype="multipart/form-data" data-cart-item-add="">
         <input type="hidden" name="action" value="add">
         <input type="hidden" name="product_id" value="115">
-
         <div data-product-option-change="" style="">
-          <div class="form-field" data-product-attribute="set-rectangle" role="radiogroup" aria-labelledby="rectangle-group-label">
+
+        <div class="form-field" data-product-attribute="set-rectangle" role="radiogroup" aria-labelledby="rectangle-group-label">
             <label class="form-label form-label--alternate form-label--inlineSmall" id="rectangle-group-label">
             Color:
-            <span data-option-value=""></span>
+            <span data-option-value="">None</span>
 
             <small>
             (Required)
             </small>
             </label>
+
+
             <div class="form-option-wrapper">
-              <input class="form-radio" type="radio" id="attribute_rectangle__130_136" name="attribute[130]" value="136" required="" data-state="false">
-              <label class="form-option" for="attribute_rectangle__130_136" data-product-attribute-value="136">
-                  <span class="form-option-variant">Red</span>
-              </label>
+            <input class="form-radio" type="radio" id="attribute_rectangle__130_136" name="attribute[130]" value="136" required="" data-state="false">
+            <label class="form-option" for="attribute_rectangle__130_136" data-product-attribute-value="136">
+                <span class="form-option-variant">Red</span>
+            </label>
             </div>
             <div class="form-option-wrapper">
-              <input class="form-radio" type="radio" id="attribute_rectangle__130_137" name="attribute[130]" value="137" required="" data-state="false">
-              <label class="form-option" for="attribute_rectangle__130_137" data-product-attribute-value="137">
-                  <span class="form-option-variant">Green</span>
-              </label>
+            <input class="form-radio" type="radio" id="attribute_rectangle__130_137" name="attribute[130]" value="137" required="" data-state="false">
+            <label class="form-option" for="attribute_rectangle__130_137" data-product-attribute-value="137">
+                <span class="form-option-variant">Green</span>
+            </label>
             </div>
             <div class="form-option-wrapper">
-              <input class="form-radio" type="radio" id="attribute_rectangle__130_138" name="attribute[130]" value="138" required="" data-state="false">
-              <label class="form-option" for="attribute_rectangle__130_138" data-product-attribute-value="138">
-                  <span class="form-option-variant">Blue</span>
-              </label>
+            <input class="form-radio" type="radio" id="attribute_rectangle__130_138" name="attribute[130]" value="138" required="" data-state="false">
+            <label class="form-option" for="attribute_rectangle__130_138" data-product-attribute-value="138">
+                <span class="form-option-variant">Blue</span>
+            </label>
+            </div>
             </div>
-          </div>
 
-          <div class="form-field" data-product-attribute="set-select">
+                            <div class="form-field" data-product-attribute="set-select">
             <label class="form-label form-label--alternate form-label--inlineSmall" for="attribute_select_131">
             Size:
 
@@ -116,24 +121,25 @@ <h1>Ugly Cornerstone Store Theme with Weird CSS</h1>
                 <option data-product-attribute-value="140" value="140">Medium</option>
                 <option data-product-attribute-value="141" value="141">Large</option>
             </select>
-          </div>
+            </div>
 
-          <div class="form-field" data-product-attribute="set-radio" role="radiogroup" aria-labelledby="radio-group-label-135">
+                            <div class="form-field" data-product-attribute="set-radio" role="radiogroup" aria-labelledby="radio-group-label-135">
             <label class="form-label form-label--alternate form-label--inlineSmall" id="radio-group-label-135">
-                check11:
+            check11:
 
-                <small>
-                  (Required)
-                </small>
+            <small>
+            (Required)
+            </small>
             </label>
 
+
             <input class="form-radio" type="radio" id="attribute_radio_135_142" name="attribute[135]" value="142" required="" data-state="false">
             <label data-product-attribute-value="142" class="form-label" for="attribute_radio_135_142">selection 1</label>
             <input class="form-radio" type="radio" id="attribute_radio_135_143" name="attribute[135]" value="143" required="" data-state="false">
             <label data-product-attribute-value="143" class="form-label" for="attribute_radio_135_143">selection 2</label>
-          </div>
+            </div>
 
-          <div class="form-field" data-product-attribute="input-text">
+                            <div class="form-field" data-product-attribute="input-text">
             <label class="form-label form-label--alternate form-label--inlineSmall" for="attribute_text_132">
             inputText:
 
@@ -143,9 +149,9 @@ <h1>Ugly Cornerstone Store Theme with Weird CSS</h1>
             </label>
 
             <input class="form-input form-input--small" type="text" id="attribute_text_132" name="attribute[132]" value="" required="" maxlength="100">
-          </div>
+            </div>
 
-          <div class="form-field" data-product-attribute="input-number">
+                            <div class="form-field" data-product-attribute="input-number">
             <label class="form-label form-label--alternate form-label--inlineSmall" for="attribute_number_133">
             input-number:
 
@@ -155,9 +161,9 @@ <h1>Ugly Cornerstone Store Theme with Weird CSS</h1>
             </label>
 
             <input class="form-input" type="number" id="attribute_number_133" name="attribute[133]" value="2" required="">
-          </div>
+            </div>
 
-          <div class="form-field" data-product-attribute="textarea">
+                            <div class="form-field" data-product-attribute="textarea">
             <label class="form-label form-label--alternate form-label--inlineSmall" for="attribute_textarea_134">
             textarea:
 
@@ -166,120 +172,371 @@ <h1>Ugly Cornerstone Store Theme with Weird CSS</h1>
             </small>
             </label>
 
-            <textarea class="form-input" id="attribute_textarea_134" name="attribute[134]" required="" maxlength="255" style="width: 100%; height: 118px;"></textarea>
-          </div>
+            <textarea class="form-input" id="attribute_textarea_134" name="attribute[134]" required="" maxlength="255"></textarea>
+            </div>
 
-          <div class="form-field" data-product-attribute="input-checkbox">
+                            <div class="form-field" data-product-attribute="input-checkbox">
             <label class="form-label form-label--alternate form-label--inlineSmall">
-                check22:
+            check22:
 
-              <small>
-                (Required)
-              </small>
+            <small>
+            Optional
+            </small>
             </label>
-            <input type="hidden" name="attribute[136]" value="145">
+            <input type="hidden" name="attribute[137]" value="147">
             <div class="form-option-wrapper">
-              <input class="form-checkbox" type="checkbox" name="attribute[136]" id="attribute-check-136" value="144" required="">
+            <input class="form-checkbox" type="checkbox" name="attribute[137]" id="attribute-check-137" value="146" checked="" data-default="">
 
-              <label class="form-label " for="attribute-check-136">CK11</label>
+            <label class="form-label " for="attribute-check-137">test-check</label>
             </div>
-          </div>
-        </div>
+            </div>
+
+                            <div class="form-field" data-product-attribute="set-rectangle" role="radiogroup" aria-labelledby="rectangle-group-label">
+            <label class="form-label form-label--alternate form-label--inlineSmall" id="rectangle-group-label">
+            1:
+            <span data-option-value="">None</span>
 
-        <div class="form-field form-field--stock u-hiddenVisually">
-            <label class="form-label form-label--alternate">
-                Current Stock:
-                <span data-product-stock=""></span>
+            <small>
+            Optional
+            </small>
             </label>
-        </div>
-
-        <div id="add-to-cart-wrapper" class="add-to-cart-wrapper">
-          <div class="form-field form-field--increments">
-            <label class="form-label form-label--alternate" for="qty[]">Quantity:</label>
-              <div class="form-increment form-field--success" data-quantity-change="">
-                <button class="button button--icon" data-action="dec">
-                  <span class="is-srOnly">Decrease Quantity of test-001</span>
-                  <i class="icon" aria-hidden="true">
-                    <svg>
-                      <use xlink:href="#icon-keyboard-arrow-down"></use>
-                    </svg>
-                  </i>
-                </button>
-                <input class="form-input form-input--incrementTotal" id="qty[]" name="qty[]" type="tel" value="1" data-quantity-min="0" data-quantity-max="0" min="1" pattern="[0-9]*" aria-live="polite">
-                <button class="button button--icon" data-action="inc">
-                  <span class="is-srOnly">Increase Quantity of test-001</span>
-                  <i class="icon" aria-hidden="true">
-                      <svg>
-                          <use xlink:href="#icon-keyboard-arrow-up"></use>
-                      </svg>
-                  </i>
-                </button>
-                <span class="nod-success-message" style="display: none;"></span>
-              </div>
-          </div>
 
-          <div class="alertBox productAttributes-message" style="display:none">
+            <input class="form-radio" type="radio" id="attribute_rectangle__138_none" name="attribute[138]" value="" checked="" data-state="true">
+            <label class="form-option" for="attribute_rectangle__138_none">
+                <span class="form-option-variant">None</span>
+            </label>
+
+            <div class="form-option-wrapper">
+            <input class="form-radio" type="radio" id="attribute_rectangle__138_148" name="attribute[138]" value="148" data-state="false">
+            <label class="form-option" for="attribute_rectangle__138_148" data-product-attribute-value="148">
+                <span class="form-option-variant">1100</span>
+            </label>
+            </div>
+            <div class="form-option-wrapper">
+            <input class="form-radio" type="radio" id="attribute_rectangle__138_149" name="attribute[138]" value="149" data-state="false">
+            <label class="form-option" for="attribute_rectangle__138_149" data-product-attribute-value="149">
+                <span class="form-option-variant">2200</span>
+            </label>
+            </div>
+            <div class="form-option-wrapper">
+            <input class="form-radio" type="radio" id="attribute_rectangle__138_150" name="attribute[138]" value="150" data-state="false">
+            <label class="form-option" for="attribute_rectangle__138_150" data-product-attribute-value="150">
+                <span class="form-option-variant">3300</span>
+            </label>
+            </div>
+            </div>
+
+                            <div class="form-field" data-product-attribute="product-list" role="radiogroup" aria-labelledby="product-list-label">
+            <label class="form-label form-label--alternate form-label--inlineSmall" id="product-list-label">
+            picklist:
+            <span data-option-value="">None</span>
+
+            <small>
+            Optional
+            </small>
+            </label>
+
+            <ul class="productOptions-list">
+                    <li class="productOptions-list-item">
+                        <input class="form-radio" type="radio" name="attribute[139]" value="" id="attribute_productlist_139_none" checked="" data-state="true">
+                        <label class="form-label" for="attribute_productlist_139_none">None</label>
+                    </li>
+                    <li class="productOptions-list-item" data-product-attribute-value="151">
+                            <figure class="productOptions-list-item-figure">
+                                <img src="https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/160w/products/88/292/3cupchemex5.1658299630.jpg?c=1" alt="" title="" data-sizes="auto" srcset="https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/80w/products/88/292/3cupchemex5.1658299630.jpg?c=1 80w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/160w/products/88/292/3cupchemex5.1658299630.jpg?c=1 160w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/320w/products/88/292/3cupchemex5.1658299630.jpg?c=1 320w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/640w/products/88/292/3cupchemex5.1658299630.jpg?c=1 640w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/960w/products/88/292/3cupchemex5.1658299630.jpg?c=1 960w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/1280w/products/88/292/3cupchemex5.1658299630.jpg?c=1 1280w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/1920w/products/88/292/3cupchemex5.1658299630.jpg?c=1 1920w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/2560w/products/88/292/3cupchemex5.1658299630.jpg?c=1 2560w" data-srcset="https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/80w/products/88/292/3cupchemex5.1658299630.jpg?c=1 80w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/160w/products/88/292/3cupchemex5.1658299630.jpg?c=1 160w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/320w/products/88/292/3cupchemex5.1658299630.jpg?c=1 320w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/640w/products/88/292/3cupchemex5.1658299630.jpg?c=1 640w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/960w/products/88/292/3cupchemex5.1658299630.jpg?c=1 960w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/1280w/products/88/292/3cupchemex5.1658299630.jpg?c=1 1280w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/1920w/products/88/292/3cupchemex5.1658299630.jpg?c=1 1920w, https://cdn11.bigcommerce.com/s-al0cfwwv8r/images/stencil/2560w/products/88/292/3cupchemex5.1658299630.jpg?c=1 2560w" class="productOptions-list-item-image lazyautosizes ls-is-cached lazyloaded" sizes="42px">
+                            </figure>
+                        <div class="productOptions-list-item-content">
+                            <input class="form-radio" type="radio" name="attribute[139]" value="151" id="attribute_productlist_139_151" data-state="false">
+                            <label data-product-attribute-value="151" class="form-label" for="attribute_productlist_139_151">[Sample] Chemex Coffeemaker 3 Cup</label>
+                        </div>
+                    </li>
+            </ul>
+            </div>
+
+                            <div class="form-field" data-product-attribute="date">
+            <label class="form-label form-label--alternate form-label--inlineSmall">
+            date field:
+
+            <small>
+            Optional
+            </small>
+            </label>
+            <select class="form-select form-select--date" name="attribute[140][month]">
+            <option value="">Month</option>
+                <option value="1" selected="selected">
+                    Jan
+                </option>
+                <option value="2">
+                    Feb
+                </option>
+                <option value="3">
+                    Mar
+                </option>
+                <option value="4">
+                    Apr
+                </option>
+                <option value="5">
+                    May
+                </option>
+                <option value="6">
+                    Jun
+                </option>
+                <option value="7">
+                    Jul
+                </option>
+                <option value="8">
+                    Aug
+                </option>
+                <option value="9">
+                    Sep
+                </option>
+                <option value="10">
+                    Oct
+                </option>
+                <option value="11">
+                    Nov
+                </option>
+                <option value="12">
+                    Dec
+                </option>
+            </select>
+            <select class="form-select form-select--date" name="attribute[140][day]">
+            <option value="">Day</option>
+                <option value="1">
+                    1
+                </option>
+                <option value="2">
+                    2
+                </option>
+                <option value="3">
+                    3
+                </option>
+                <option value="4">
+                    4
+                </option>
+                <option value="5">
+                    5
+                </option>
+                <option value="6" selected="selected">
+                    6
+                </option>
+                <option value="7">
+                    7
+                </option>
+                <option value="8">
+                    8
+                </option>
+                <option value="9">
+                    9
+                </option>
+                <option value="10">
+                    10
+                </option>
+                <option value="11">
+                    11
+                </option>
+                <option value="12">
+                    12
+                </option>
+                <option value="13">
+                    13
+                </option>
+                <option value="14">
+                    14
+                </option>
+                <option value="15">
+                    15
+                </option>
+                <option value="16">
+                    16
+                </option>
+                <option value="17">
+                    17
+                </option>
+                <option value="18">
+                    18
+                </option>
+                <option value="19">
+                    19
+                </option>
+                <option value="20">
+                    20
+                </option>
+                <option value="21">
+                    21
+                </option>
+                <option value="22">
+                    22
+                </option>
+                <option value="23">
+                    23
+                </option>
+                <option value="24">
+                    24
+                </option>
+                <option value="25">
+                    25
+                </option>
+                <option value="26">
+                    26
+                </option>
+                <option value="27">
+                    27
+                </option>
+                <option value="28">
+                    28
+                </option>
+                <option value="29">
+                    29
+                </option>
+                <option value="30">
+                    30
+                </option>
+                <option value="31">
+                    31
+                </option>
+            </select>
+            <select class="form-select form-select--date" name="attribute[140][year]">
+            <option value="">Year</option>
+                <option value="2023" selected="selected">
+                    2023
+                </option>
+                <option value="2024">
+                    2024
+                </option>
+                <option value="2025">
+                    2025
+                </option>
+                <option value="2026">
+                    2026
+                </option>
+                <option value="2027">
+                    2027
+                </option>
+                <option value="2028">
+                    2028
+                </option>
+                <option value="2029">
+                    2029
+                </option>
+                <option value="2030">
+                    2030
+                </option>
+                <option value="2031">
+                    2031
+                </option>
+                <option value="2032">
+                    2032
+                </option>
+                <option value="2033">
+                    2033
+                </option>
+            </select>
+            </div>
+
+                            <div class="form-field" data-product-attribute="input-file">
+            <label class="form-label form-label--alternate form-label--inlineSmall" for="attribute_file_141">
+            file upload:
+
+            <small>
+            Optional
+            </small>
+            </label>
+
+            <input class="form-file" type="file" id="attribute_file_141" name="attribute[141]">
+            <p class="form-fileDescription">
+                Maximum file size is
+                <strong>524288KB</strong>,
+                file types are <strong>bmp, gif, jpg, jpeg, jpe, jif, jfif, jfi, png, wbmp, xbm, tiff</strong>
+            </p>
+
+            </div>
+
+                            <div class="form-field" data-product-attribute="swatch" role="radiogroup" aria-labelledby="swatchGroup_142">
+            <label class="form-label form-label--alternate form-label--inlineSmall" id="swatchGroup_142">
+            swatch:
+            <span data-option-value="">None</span>
+
+            <small>
+            Optional
+            </small>
+            </label>
+            <span class="swatch-option-message aria-description--hidden">
+            Selected swatch is
+            </span>
+
+            <input class="form-radio" type="radio" name="attribute[142]" value="" id="attribute_swatch_142_none" checked="" aria-label="None" data-state="true">
+            <label class="form-option form-option-swatch" for="attribute_swatch_142_none">
+                <span class="form-option-variant form-option-variant--none" title="None">None</span>
+            </label>
+
+            <div class="form-option-wrapper">
+            <input class="form-radio" type="radio" name="attribute[142]" value="152" id="attribute_swatch_142_152" aria-label="yellow" data-state="false">
+            <label class="form-option form-option-swatch" for="attribute_swatch_142_152" data-product-attribute-value="152">
+                            <span class="form-option-variant form-option-variant--color" title="yellow" style="background-color: #FFDE00"></span>
+            </label>
+            </div>
+            <div class="form-option-wrapper">
+            <input class="form-radio" type="radio" name="attribute[142]" value="153" id="attribute_swatch_142_153" aria-label="red" data-state="false">
+            <label class="form-option form-option-swatch" for="attribute_swatch_142_153" data-product-attribute-value="153">
+                            <span class="form-option-variant form-option-variant--color" title="red" style="background-color: #C02D2D"></span>
+            </label>
+            </div>
+            <div class="form-option-wrapper">
+            <input class="form-radio" type="radio" name="attribute[142]" value="154" id="attribute_swatch_142_154" aria-label="blue" data-state="false">
+            <label class="form-option form-option-swatch" for="attribute_swatch_142_154" data-product-attribute-value="154">
+                            <span class="form-option-variant form-option-variant--color" title="blue" style="background-color: #2E52E4"></span>
+            </label>
+            </div>
+            </div>
+
+                    </div>
+                    <div class="form-field form-field--stock u-hiddenVisually">
+                        <label class="form-label form-label--alternate">
+                            Current Stock:
+                            <span data-product-stock=""></span>
+                        </label>
+                    </div>
+                    <div id="add-to-cart-wrapper" class="add-to-cart-wrapper">
+
+            <div class="form-field form-field--increments">
+                <label class="form-label form-label--alternate" for="qty[]">Quantity:</label>
+                    <div class="form-increment" data-quantity-change="">
+                        <button class="button button--icon" data-action="dec">
+                            <span class="is-srOnly">Decrease Quantity of test-001</span>
+                            <i class="icon" aria-hidden="true">
+                                <svg>
+                                    <use xlink:href="#icon-keyboard-arrow-down"></use>
+                                </svg>
+                            </i>
+                        </button>
+                        <input class="form-input form-input--incrementTotal" id="qty[]" name="qty[]" type="tel" value="5" data-quantity-min="5" data-quantity-max="10" min="1" pattern="[0-9]*" aria-live="polite">
+                        <button class="button button--icon" data-action="inc">
+                            <span class="is-srOnly">Increase Quantity of test-001</span>
+                            <i class="icon" aria-hidden="true">
+                                <svg>
+                                    <use xlink:href="#icon-keyboard-arrow-up"></use>
+                                </svg>
+                            </i>
+                        </button>
+                    <span style="display: none;"></span></div>
+            </div>
+
+            <div class="alertBox productAttributes-message" style="display:none">
             <div class="alertBox-column alertBox-icon">
                 <icon glyph="ic-success" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
             </div>
             <p class="alertBox-column alertBox-message"></p>
-          </div>
-          <div class="form-action">
-            <input id="form-action-addToCart" data-wait-message="Adding to cart…" class="button button--primary" type="submit" value="Add to Cart">
-            <span class="product-status-message aria-description--hidden" role="status" aria-live="polite">Adding to cart… The item has been added</span>
-          </div>
-        </div>
-
-        <input type="hidden" name="authenticity_token" value="22caddb401abd68c0fc9993d973a7eb833b2d0ebba58eed442444b6029751323">
+            </div>
+            <div class="form-action">
+                <input id="form-action-addToCart" data-wait-message="Adding to cart…" class="button button--primary" type="submit" value="Add to Cart">
+                <span class="product-status-message aria-description--hidden">Adding to cart… The item has been added</span>
+            </div>
+            </div>
       </form>
-      <!-- <form class="form" method="post" action="https://storefront-staging.mybigcommerce.com/cart.php" enctype="multipart/form-data" data-cart-item-add="">
-        <input type="hidden" name="action" value="add">
-        <input type="hidden" name="product_id" value="97">
-        <div data-product-option-change="" style="">
 
-        </div>
-        <div class="form-field form-field--stock u-hiddenVisually">
-            <label class="form-label form-label--alternate">
-                Current Stock:
-                <span data-product-stock=""></span>
-            </label>
-        </div>
-        <div id="add-to-cart-wrapper" class="add-to-cart-wrapper">
-          <div class="form-field form-field--increments">
-            <label class="form-label form-label--alternate" for="qty[]">Quantity:</label>
-                <div class="form-increment" data-quantity-change="">
-                    <button class="button button--icon" data-action="dec">
-                        <span class="is-srOnly">Decrease Quantity of [Sample] Tiered Wire Basket</span>
-                        <i class="icon" aria-hidden="true">
-                            <svg>
-                                <use xlink:href="#icon-keyboard-arrow-down"></use>
-                            </svg>
-                        </i>
-                    </button>
-                    <input class="form-input form-input--incrementTotal" id="qty[]" name="qty[]" type="tel" value="1" data-quantity-min="0" data-quantity-max="0" min="1" pattern="[0-9]*" aria-live="polite">
-                    <button class="button button--icon" data-action="inc">
-                        <span class="is-srOnly">Increase Quantity of [Sample] Tiered Wire Basket</span>
-                        <i class="icon" aria-hidden="true">
-                            <svg>
-                                <use xlink:href="#icon-keyboard-arrow-up"></use>
-                            </svg>
-                        </i>
-                    </button>
-                <span style="display: none;"></span></div>
-        </div>
-
-        <div class="alertBox productAttributes-message" style="display:none">
-        <div class="alertBox-column alertBox-icon">
-            <icon glyph="ic-success" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
-        </div>
-        <p class="alertBox-column alertBox-message"></p>
-        </div>
-        <div class="form-action">
-            <input id="form-action-addToCart" data-wait-message="Adding to cart…" class="button button--primary" type="submit" value="Add to Cart">
-            <span class="product-status-message aria-description--hidden">Adding to cart… The item has been added</span>
-        </div>
-        </div>
-      </form> -->
+    </div>
+
     </div>
     <style>
       body {
diff --git a/apps/storefront/package.json b/apps/storefront/package.json
index 8843c2bc..b83a9c2c 100644
--- a/apps/storefront/package.json
+++ b/apps/storefront/package.json
@@ -23,6 +23,7 @@
     "@mui/x-date-pickers": "^5.0.0-beta.0",
     "@rollup/plugin-graphql": "^1.1.0",
     "@types/babel__core": "^7.1.19",
+    "copy-to-clipboard": "^3.3.3",
     "date-fns": "^2.28.0",
     "http-server": "^14.1.1",
     "lodash": "^4.17.21",
diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
index e364c8e9..ba3f9a81 100644
--- a/apps/storefront/src/App.tsx
+++ b/apps/storefront/src/App.tsx
@@ -13,6 +13,7 @@ import {
 import {
   useOpenPDP,
   useRefresh,
+  useMyQuote,
   useRegisteredbctob2b,
 } from '@/hooks'
 
@@ -20,6 +21,7 @@ import {
   loginInfo,
   getCurrentCustomerInfo,
   getLogo,
+  getQuoteEnabled,
 } from '@/utils'
 
 import {
@@ -60,6 +62,11 @@ export default function App() {
       role,
       logo,
       bcChannelId,
+      isAgenting,
+      quoteConfig,
+      storefrontConfig,
+      productQuoteEnabled,
+      cartQuoteEnabled,
     },
     dispatch,
   } = useContext(GlobaledContext)
@@ -70,18 +77,25 @@ export default function App() {
     role,
   })
 
+  useMyQuote({
+    setOpenPage,
+    productQuoteEnabled,
+    cartQuoteEnabled,
+  })
+
   useRefresh(isOpen, openUrl)
 
-  const setLogo = async () => {
+  const getQuoteConfig = async () => {
     const {
       quoteConfig,
     } = await getB2BRegisterLogo()
-    const logo = getLogo(quoteConfig)
+    const quoteLogo = getLogo(quoteConfig)
 
     dispatch({
       type: 'common',
       payload: {
-        logo,
+        logo: logo || quoteLogo,
+        quoteConfig,
       },
     })
   }
@@ -155,20 +169,32 @@ export default function App() {
       })
     }
 
+    const guestGotoPage = () => {
+      const url = hash.split('#')[1] || ''
+      if (url === '/login' || url === '/quoteDraft' || url.includes('/quoteDetail')) {
+        setOpenPage({
+          isOpen: true,
+          openUrl: url,
+        })
+      }
+    }
+
     const init = async () => {
       // bc token
       if (!BcToken) {
         await loginInfo()
       }
-
-      if (!logo) {
-        setLogo()
-      }
+      getQuoteConfig()
       setStorefrontConfig()
       setChannelStoreType(bcChannelId)
+      // refresh
       if (!customerId) {
         const data = await getCurrentCustomerInfo(dispatch)
-        if (data) gotoPage(data.role)
+        if (data) {
+          gotoPage(data.role)
+        } else {
+          guestGotoPage()
+        }
       }
       if (customerId && hash) gotoPage()
     }
@@ -176,6 +202,23 @@ export default function App() {
     init()
   }, [])
 
+  useEffect(() => {
+    if (quoteConfig.switchStatus.length > 0 && storefrontConfig) {
+      const {
+        productQuoteEnabled,
+        cartQuoteEnabled,
+      } = getQuoteEnabled(quoteConfig, storefrontConfig, role, isB2BUser, isAgenting)
+
+      dispatch({
+        type: 'common',
+        payload: {
+          productQuoteEnabled,
+          cartQuoteEnabled,
+        },
+      })
+    }
+  }, [isB2BUser, isAgenting, role, quoteConfig, storefrontConfig])
+
   useRegisteredbctob2b(setOpenPage, isB2BUser, customerId)
 
   return (
diff --git a/apps/storefront/src/components/B3CollapseContainer.tsx b/apps/storefront/src/components/B3CollapseContainer.tsx
new file mode 100644
index 00000000..e4482a8b
--- /dev/null
+++ b/apps/storefront/src/components/B3CollapseContainer.tsx
@@ -0,0 +1,58 @@
+import {
+  Box,
+  Collapse,
+  Typography,
+} from '@mui/material'
+
+import {
+  useState,
+  ReactNode,
+} from 'react'
+
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+
+interface CollapseContainerProps{
+  title?: string,
+  header?: ReactNode,
+  defaultOpen?: boolean,
+  children: ReactNode,
+}
+
+export const B3CollapseContainer = (props: CollapseContainerProps) => {
+  const {
+    children,
+    title = '',
+    header,
+    defaultOpen = false,
+  } = props
+
+  const [open, setOpen] = useState(defaultOpen)
+
+  const handleClick = () => {
+    setOpen(!open)
+  }
+
+  return (
+    <Box>
+      <Box
+        onClick={handleClick}
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          cursor: 'pointer',
+        }}
+      >
+        {header || <Typography variant="h5">{title}</Typography>}
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </Box>
+      <Collapse
+        in={open}
+        timeout="auto"
+        unmountOnExit
+      >
+        {children}
+      </Collapse>
+    </Box>
+  )
+}
diff --git a/apps/storefront/src/components/index.ts b/apps/storefront/src/components/index.ts
index a2023c68..18d0a265 100644
--- a/apps/storefront/src/components/index.ts
+++ b/apps/storefront/src/components/index.ts
@@ -52,3 +52,7 @@ export {
 export {
   B3LinkTipContent,
 } from './B3LinkTipContent'
+
+export {
+  B3CollapseContainer,
+} from './B3CollapseContainer'
diff --git a/apps/storefront/src/components/layout/B3Layout.tsx b/apps/storefront/src/components/layout/B3Layout.tsx
index f1f3c156..eed1ff9d 100644
--- a/apps/storefront/src/components/layout/B3Layout.tsx
+++ b/apps/storefront/src/components/layout/B3Layout.tsx
@@ -37,6 +37,10 @@ import {
   B3Mainheader,
 } from './B3Mainheader'
 
+import {
+  B3Dialog,
+} from '../B3Dialog'
+
 import {
   routes,
 } from '@/shared/routes'
@@ -60,26 +64,50 @@ export function B3Layout({
     state: {
       emailAddress,
       customerId,
+      globalMessageDialog,
     },
+    dispatch,
   } = useContext(GlobaledContext)
 
   const navigate = useNavigate()
 
   useEffect(() => {
-    if (!emailAddress || !customerId) {
+    if ((!emailAddress || !customerId) && location.pathname !== '/quoteDraft' && !location.pathname.includes('/quoteDetail')) {
       navigate('/login')
     }
   }, [emailAddress, customerId])
 
   useEffect(() => {
     const itemsRoutes = routes.filter((item: RouteItem) => item.path === location.pathname)
-    if (itemsRoutes.length) {
+    if (itemsRoutes.length && location.pathname !== '/quoteDraft') {
       setTitle(itemsRoutes[0].name)
     } else {
       setTitle('')
     }
+    dispatch({
+      type: 'common',
+      payload: {
+        tipMessage: {
+          msgs: [],
+        },
+      },
+    })
   }, [location])
 
+  const messageDialogClose = () => {
+    dispatch({
+      type: 'common',
+      payload: {
+        globalMessageDialog: {
+          open: false,
+          title: '',
+          message: '',
+          cancelText: 'Cancel',
+        },
+      },
+    })
+  }
+
   return (
     <Box>
 
@@ -113,6 +141,7 @@ export function B3Layout({
                   flexDirection: 'column',
                   width: '250px',
                   pl: '20px',
+                  displayPrint: 'none',
                 }}
               >
                 <B3Logo />
@@ -149,6 +178,27 @@ export function B3Layout({
         // </Box>
           )
       }
+
+      <B3Dialog
+        isOpen={globalMessageDialog.open}
+        title={globalMessageDialog.title}
+        leftSizeBtn={globalMessageDialog.cancelText}
+        rightSizeBtn={globalMessageDialog.saveText}
+        handleLeftClick={globalMessageDialog.cancelFn || messageDialogClose}
+        handRightClick={globalMessageDialog.saveFn}
+        showRightBtn={!!globalMessageDialog.saveText}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: `${isMobile ? 'center' : 'start'}`,
+            width: `${isMobile ? '100%' : '450px'}`,
+            height: '100%',
+          }}
+        >
+          {globalMessageDialog.message}
+        </Box>
+      </B3Dialog>
     </Box>
 
   )
diff --git a/apps/storefront/src/components/layout/B3Mainheader.tsx b/apps/storefront/src/components/layout/B3Mainheader.tsx
index 8fdf7cec..98b03b65 100644
--- a/apps/storefront/src/components/layout/B3Mainheader.tsx
+++ b/apps/storefront/src/components/layout/B3Mainheader.tsx
@@ -82,19 +82,24 @@ export const B3Mainheader = ({
         </Box>
         <B3AccountInfo />
       </Box>
-      <Box
-        component="h3"
-        sx={{
-          height: '40px',
-          m: '0',
-          fontSize: '24px',
-          display: 'flex',
-          alignItems: 'end',
-          mb: '8px',
-        }}
-      >
-        {title}
-      </Box>
+      {
+        title && (
+        <Box
+          component="h3"
+          sx={{
+            height: '40px',
+            m: '0',
+            fontSize: '24px',
+            display: 'flex',
+            alignItems: 'end',
+            mb: '8px',
+          }}
+        >
+          {title}
+        </Box>
+        )
+      }
+
     </Box>
 
   )
diff --git a/apps/storefront/src/components/layout/B3Nav.tsx b/apps/storefront/src/components/layout/B3Nav.tsx
index b67ab42f..9d949395 100644
--- a/apps/storefront/src/components/layout/B3Nav.tsx
+++ b/apps/storefront/src/components/layout/B3Nav.tsx
@@ -49,9 +49,47 @@ export const B3Nav = ({
 
   const {
     state: globalState,
+    dispatch,
   } = useContext(GlobaledContext)
 
+  const jumpRegister = () => {
+    navigate('/registered')
+    dispatch({
+      type: 'common',
+      payload: {
+        globalMessageDialog: {
+          open: false,
+          title: '',
+          message: '',
+          cancelText: 'Cancel',
+        },
+      },
+    })
+  }
+
   const handleClick = (item: RouteItem) => {
+    const {
+      role,
+    } = globalState
+
+    if (role === 100) {
+      dispatch({
+        type: 'common',
+        payload: {
+          globalMessageDialog: {
+            open: true,
+            title: 'Registration',
+            message: 'To receive full access to buyer portal, please register. It will take 2 minutes. ',
+            cancelText: 'Cancel',
+            saveText: 'Register',
+            saveFn: jumpRegister,
+          },
+        },
+      })
+
+      return
+    }
+
     navigate(item.path)
     if (isMobile && closeSidebar) {
       closeSidebar(false)
diff --git a/apps/storefront/src/components/spin/B3Sping.tsx b/apps/storefront/src/components/spin/B3Sping.tsx
index 64b28281..d9618172 100644
--- a/apps/storefront/src/components/spin/B3Sping.tsx
+++ b/apps/storefront/src/components/spin/B3Sping.tsx
@@ -23,7 +23,7 @@ interface B3SpingProps {
   thickness?: number & undefined,
   isCloseLoading?: Boolean,
   background?: string,
-  spinningHeight?: number,
+  spinningHeight?: number | string,
   isFlex?: boolean,
 }
 
diff --git a/apps/storefront/src/components/spin/styled.ts b/apps/storefront/src/components/spin/styled.ts
index 2bcdc632..e2a25f66 100644
--- a/apps/storefront/src/components/spin/styled.ts
+++ b/apps/storefront/src/components/spin/styled.ts
@@ -35,7 +35,7 @@ styled('div')(() => ({
 }))
 
 interface SpinContextProps {
-  height?: number,
+  height?: number | string,
   isFlex?: boolean,
 }
 
diff --git a/apps/storefront/src/components/table/B3PaginationTable.tsx b/apps/storefront/src/components/table/B3PaginationTable.tsx
index 4904b86a..b6edb46d 100644
--- a/apps/storefront/src/components/table/B3PaginationTable.tsx
+++ b/apps/storefront/src/components/table/B3PaginationTable.tsx
@@ -14,6 +14,7 @@ import {
 
 import {
   B3Table,
+  TableColumnItem,
 } from './B3Table'
 
 export interface TablePagination {
@@ -21,22 +22,22 @@ export interface TablePagination {
   first: number,
 }
 
-export interface TableColumnItem {
-  key: string,
-  title: string,
-  width?: string,
-  render?: (item: CustomFieldItems, index: number) => ReactNode,
-}
+// export interface TableColumnItem {
+//   key: string,
+//   title: string,
+//   width?: string,
+//   render?: (item: CustomFieldItems, index: number) => ReactNode,
+// }
 
-interface B3PaginationTableProps<Y> {
+interface B3PaginationTableProps<T> {
   tableFixed?: boolean,
   tableHeaderHide?: boolean,
-  columnItems?: TableColumnItem[],
+  columnItems?: TableColumnItem<any>[],
   itemSpacing?: number,
   itemXs?: number,
   rowsPerPageOptions?: number[],
   showPagination?: boolean,
-  renderItem?: (row:any, index?: number, checkBox?: () => ReactElement) => ReactElement,
+  renderItem?: (row: any, index?: number, checkBox?: () => ReactElement) => ReactElement,
   isCustomRender?: boolean,
   infiniteScrollThreshold?: number,
   infiniteScrollNode?: HTMLElement,
@@ -45,7 +46,7 @@ interface B3PaginationTableProps<Y> {
   noDataText?: string,
   tableKey?: string,
   getRequestList: any,
-  searchParams: Y,
+  searchParams: T,
   requestLoading?: (bool: boolean) => void,
   showCheckbox?: boolean,
   selectedSymbol?: string,
@@ -57,7 +58,7 @@ interface B3PaginationTableProps<Y> {
   disableCheckbox?: boolean,
 }
 
-const PaginationTable:<Y>(props: B3PaginationTableProps<Y>) => ReactElement = ({
+const PaginationTable:<T>(props: B3PaginationTableProps<T>) => ReactElement = ({
   columnItems,
   isCustomRender = false,
   tableKey,
diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx
index 4acf90fa..94108385 100644
--- a/apps/storefront/src/components/table/B3Table.tsx
+++ b/apps/storefront/src/components/table/B3Table.tsx
@@ -162,9 +162,9 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                   const node = row.node || row || {}
                   const checkBox = () => (
                     <Checkbox
-                      checked={selectCheckbox.includes(row.node[selectedSymbol])}
+                      checked={selectCheckbox.includes(node[selectedSymbol])}
                       onChange={() => {
-                        if (handleSelectOneItem) handleSelectOneItem(row.node[selectedSymbol])
+                        if (handleSelectOneItem) handleSelectOneItem(node[selectedSymbol])
                       }}
                       disabled={disableCheckbox}
                     />
@@ -176,7 +176,7 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                       key={node[tableKey || 'id']}
                     >
                       <>
-                        {row?.node && renderItem && renderItem(row.node, index, checkBox)}
+                        {node && renderItem && renderItem(node, index, checkBox)}
                       </>
                     </Grid>
                   )
@@ -218,7 +218,7 @@ export const B3Table:<T>(props: TableProps<T>) => ReactElement = ({
                       key={node[tableKey || 'id']}
                     >
                       <>
-                        {row?.node && renderItem && renderItem(row.node, index)}
+                        {node && renderItem && renderItem(node, index)}
                       </>
                     </Grid>
                   )
diff --git a/apps/storefront/src/hooks/index.ts b/apps/storefront/src/hooks/index.ts
index 206afff1..f273c4e5 100644
--- a/apps/storefront/src/hooks/index.ts
+++ b/apps/storefront/src/hooks/index.ts
@@ -6,6 +6,14 @@ import {
   useOpenPDP,
 } from './useOpenPDP'
 
+import {
+  useMyQuote,
+} from './useMyQuote'
+
+import {
+  useQuoteGlobalTip,
+} from './useQuoteGlobalTip'
+
 import {
   useRegisteredbctob2b,
 } from './useRegisteredbctob2b'
@@ -14,6 +22,11 @@ import {
   useCardListColumn,
 } from './useCardListColumn'
 
+import {
+  useSetCountry,
+  useGetCountry,
+} from './useGetCountry'
+
 export {
   useMobile,
 } from './useMobile'
@@ -25,6 +38,10 @@ export {
 export {
   useRefresh,
   useOpenPDP,
+  useMyQuote,
   useRegisteredbctob2b,
   useCardListColumn,
+  useQuoteGlobalTip,
+  useSetCountry,
+  useGetCountry,
 }
diff --git a/apps/storefront/src/hooks/useGetCountry.ts b/apps/storefront/src/hooks/useGetCountry.ts
new file mode 100644
index 00000000..c57ac22c
--- /dev/null
+++ b/apps/storefront/src/hooks/useGetCountry.ts
@@ -0,0 +1,120 @@
+import {
+  useEffect,
+  useContext,
+} from 'react'
+
+import {
+  useWatch,
+  Control,
+} from 'react-hook-form'
+import {
+  getB2BCountries,
+} from '@/shared/service/b2b'
+
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
+import {
+  State,
+  Country,
+} from '@/shared/global/context/config'
+
+const useSetCountry = () => {
+  const {
+    state: {
+      countriesList,
+    },
+    dispatch,
+  } = useContext(GlobaledContext)
+
+  useEffect(() => {
+    const init = async () => {
+      if (countriesList && !countriesList.length) {
+        const {
+          countries,
+        } = await getB2BCountries()
+
+        dispatch({
+          type: 'common',
+          payload: {
+            countriesList: countries,
+          },
+        })
+      }
+    }
+    init()
+  }, [])
+}
+
+interface FormFieldsProps extends Record<string, any> {
+  name: string,
+  label?: string,
+  required?: Boolean,
+  fieldType?: string,
+  default?: string | Array<any> | number,
+  xs: number,
+  variant: string,
+  size: string,
+  options?: any[],
+}
+
+interface GetCountryProps {
+  setAddress: (arr: FormFieldsProps[]) => void,
+  addresses: FormFieldsProps[],
+  control: Control,
+}
+
+const useGetCountry = ({
+  setAddress,
+  control,
+  addresses,
+}: GetCountryProps) => {
+  const {
+    state: {
+      countriesList,
+    },
+  } = useContext(GlobaledContext)
+
+  const country = useWatch({
+    control,
+    name: 'country',
+  })
+
+  const handleCountryChange = (countryCode: string) => {
+    if (countriesList && countriesList.length && countryCode) {
+      const stateList = countriesList.find((country: Country) => country.countryCode === countryCode)?.states || []
+      const stateFields = addresses.find((formFields: FormFieldsProps) => formFields.name === 'state')
+      if (stateFields) {
+        if (stateList.length > 0) {
+          stateFields.fieldType = 'dropdown'
+          stateFields.options = stateList
+        } else {
+          stateFields.fieldType = 'text'
+          stateFields.options = []
+        }
+      }
+
+      setAddress([...addresses])
+    }
+  }
+
+  useEffect(() => {
+    const countryFields = addresses.find((formFields: FormFieldsProps) => formFields.name === 'country')
+    if (countriesList?.length && countryFields && !countryFields?.options?.length) {
+      countryFields.options = countriesList
+      setAddress([...addresses])
+    }
+  }, [countriesList])
+
+  useEffect(() => {
+    if (countriesList && countriesList.length) {
+      handleCountryChange(country)
+    }
+  }, [country])
+}
+
+export {
+  useSetCountry,
+  useGetCountry,
+}
diff --git a/apps/storefront/src/hooks/useMyQuote.ts b/apps/storefront/src/hooks/useMyQuote.ts
new file mode 100644
index 00000000..197ba7f5
--- /dev/null
+++ b/apps/storefront/src/hooks/useMyQuote.ts
@@ -0,0 +1,190 @@
+import {
+  useCallback,
+  SetStateAction,
+  Dispatch,
+  useState,
+} from 'react'
+
+import {
+  useB3Quote,
+  useMutationObservable,
+} from '@b3/hooks'
+
+import globalB3 from '@b3/global-b3'
+
+import type {
+  OpenPageState,
+} from '@b3/hooks'
+
+import {
+  v1 as uuid,
+} from 'uuid'
+import {
+  searchB2BProducts,
+} from '@/shared/service/b2b'
+
+import {
+  addQuoteDraftProduce,
+  isAllRequiredOptionFilled,
+} from '@/utils'
+
+import {
+  serialize,
+  getProductOptionList,
+} from '../pages/pdp/PDP'
+
+import {
+  useQuoteGlobalTip,
+} from './useQuoteGlobalTip'
+
+import {
+  conversionProductsList,
+} from '../pages/shoppingListDetails/shared/config'
+
+interface MutationObserverProps {
+  setOpenPage: Dispatch<SetStateAction<OpenPageState>>,
+  productQuoteEnabled: boolean,
+  cartQuoteEnabled: boolean,
+}
+
+const removeElement = (_element: CustomFieldItems) => {
+  const _parentElement = _element.parentNode
+  if (_parentElement) {
+    _parentElement.removeChild(_element)
+  }
+}
+
+interface OpenTipStateProps {
+  isOpen: boolean,
+  message: string,
+  variant: string,
+}
+
+const useMyQuote = ({
+  setOpenPage,
+  productQuoteEnabled,
+  cartQuoteEnabled,
+}: MutationObserverProps) => {
+  const [openQuickViewNum, setOpenQuickViewNum] = useState<number>(0)
+
+  const [openTipState, setOpenTipState] = useState<OpenTipStateProps>({
+    isOpen: false,
+    message: '',
+    variant: '',
+  })
+
+  const addLoadding = (b3MyQuote: any) => {
+    const loadingDiv = document.createElement('div')
+    loadingDiv.setAttribute('id', 'b2b-div-loading')
+    const loadingBtn = document.createElement('div')
+    loadingBtn.setAttribute('class', 'b2b-btn-loading')
+    loadingDiv.appendChild(loadingBtn)
+    b3MyQuote.appendChild(loadingDiv)
+  }
+
+  const removeLoadding = () => {
+    const b2bLoading = document.querySelector('#b2b-div-loading')
+    if (b2bLoading) removeElement(b2bLoading)
+  }
+
+  const initTip = () => {
+    setOpenTipState({
+      isOpen: false,
+      message: '',
+      variant: '',
+    })
+  }
+
+  const addToQuote = async () => {
+    try {
+      const productId = (document.querySelector('input[name=product_id]') as CustomFieldItems)?.value
+      const qty = (document.querySelector('[name="qty[]"]') as CustomFieldItems)?.value ?? 1
+      const sku = (document.querySelector('[data-product-sku]')?.innerHTML ?? '').trim()
+      const form = document.querySelector('form[data-cart-item-add]')
+
+      const {
+        productsSearch,
+      } = await searchB2BProducts({
+        productIds: [+productId],
+      })
+
+      const newProductInfo: CustomFieldItems = conversionProductsList(productsSearch)
+      const {
+        allOptions,
+        variants,
+      } = newProductInfo[0]
+
+      const variantItem = variants.find((item: CustomFieldItems) => item.sku === sku)
+
+      const optionMap = serialize(form)
+
+      const optionList = getProductOptionList(optionMap)
+
+      const {
+        isValid,
+        message,
+      } = isAllRequiredOptionFilled(allOptions, optionList)
+      if (!isValid) {
+        setOpenTipState({
+          isOpen: true,
+          message,
+          variant: 'error',
+        })
+        return
+      }
+
+      const quoteListitem = {
+        node: {
+          id: uuid(),
+          variantSku: variantItem.sku,
+          variantId: variantItem.variantId,
+          productsSearch: newProductInfo[0],
+          primaryImage: variantItem.image_url,
+          productName: newProductInfo[0].name,
+          quantity: +qty,
+          optionList: JSON.stringify(optionList),
+          productId,
+          basePrice: variantItem.bc_calculated_price.as_entered,
+          tax: variantItem.bc_calculated_price.tax_inclusive - variantItem.bc_calculated_price.tax_exclusive,
+        },
+      }
+
+      addQuoteDraftProduce(quoteListitem, qty, optionList || [])
+
+      setOpenTipState({
+        isOpen: true,
+        message: 'Product was added to your quote.',
+        variant: 'success',
+      })
+    } catch (e) {
+      console.log(e)
+    } finally {
+      removeLoadding()
+    }
+  }
+
+  const quoteCallBbck = useCallback(() => {
+    const b3MyQuote = document.querySelector('#b3MyQuote')
+    const b2bLoading = document.querySelector('#b2b-div-loading')
+    if (b3MyQuote && !b2bLoading) {
+      addLoadding(b3MyQuote)
+      addToQuote()
+    }
+  }, [])
+
+  const cd = useCallback(() => {
+    if (document.querySelectorAll(globalB3['dom.setToShoppingList']).length) {
+      setOpenQuickViewNum(openQuickViewNum + 1)
+    }
+  }, [])
+
+  useMutationObservable(document.documentElement, cd)
+
+  useB3Quote(globalB3['dom.setToShoppingList'], quoteCallBbck, openQuickViewNum, productQuoteEnabled)
+
+  useQuoteGlobalTip(openTipState, setOpenPage, initTip)
+}
+
+export {
+  useMyQuote,
+}
diff --git a/apps/storefront/src/hooks/useQuoteGlobalTip.ts b/apps/storefront/src/hooks/useQuoteGlobalTip.ts
new file mode 100644
index 00000000..2bb5a3ca
--- /dev/null
+++ b/apps/storefront/src/hooks/useQuoteGlobalTip.ts
@@ -0,0 +1,72 @@
+import {
+  useEffect,
+  SetStateAction,
+  Dispatch,
+} from 'react'
+
+import type {
+  OpenPageState,
+} from '@b3/hooks'
+import {
+  QuoteGlobalTip,
+} from '@/utils'
+
+type SetOpenPageProps = Dispatch<SetStateAction<OpenPageState>>
+
+interface OpenTipStateProps {
+  isOpen: boolean,
+  message: string,
+  variant: string,
+}
+type InitTipProps = () => void
+
+export const useQuoteGlobalTip = ({
+  isOpen,
+  message,
+  variant,
+}: OpenTipStateProps, setOpenPage: SetOpenPageProps, initTip: InitTipProps) => {
+  useEffect(() => {
+    if (!isOpen) {
+      QuoteGlobalTip.delete()
+      return
+    }
+    const quoteBtnClick = () => {
+      setOpenPage({
+        isOpen: true,
+        openUrl: '/quoteDraft',
+      })
+    }
+
+    const quoteCloseBtnClick = () => {
+      initTip()
+    }
+    const btnCallBack = () => {
+      const linkBtn = document.querySelector('#globalTip .b2b-quote-global-btn-goto')
+      linkBtn?.addEventListener('click', quoteBtnClick)
+    }
+
+    const btnCloseCallBack = () => {
+      const closeBtn = document.querySelector('#globalTip .b2b-quote-global-btn-close')
+      closeBtn?.addEventListener('click', quoteCloseBtnClick)
+    }
+    if (variant === 'success') {
+      QuoteGlobalTip.createTip(message, {
+        cd: btnCallBack,
+        closeCd: btnCloseCallBack,
+        linkSize: 'OPEN QUOTE',
+      })
+    } else {
+      QuoteGlobalTip.createTip(message, {
+        closeCd: btnCloseCallBack,
+        variant: 'error',
+      })
+    }
+
+    return () => {
+      const linkBtn = document.querySelector('#globalTip .b2b-quote-global-btn-goto')
+      const closeBtn = document.querySelector('#globalTip .b2b-quote-global-btn-close')
+      if (linkBtn) linkBtn.removeEventListener('click', quoteBtnClick)
+      if (closeBtn) closeBtn.removeEventListener('click', btnCloseCallBack)
+    }
+  }, [isOpen, message, variant])
+}
diff --git a/apps/storefront/src/index.d.ts b/apps/storefront/src/index.d.ts
index 48866b9b..211c91cf 100644
--- a/apps/storefront/src/index.d.ts
+++ b/apps/storefront/src/index.d.ts
@@ -2,6 +2,11 @@
 declare interface CustomFieldItems {
   [key: string]: any
 }
+
+declare interface CustomFieldStringItems {
+  [key: string]: strting
+}
+
 declare interface Window {
   tipDispatch: DispatchProps
 }
diff --git a/apps/storefront/src/main.css b/apps/storefront/src/main.css
index 7eba28aa..c0b50940 100644
--- a/apps/storefront/src/main.css
+++ b/apps/storefront/src/main.css
@@ -115,8 +115,9 @@ input[type=number]::-webkit-outer-spin-button
   margin: 0;
 }
 
-#shoppingListBtn {
+#shoppingListBtn, #b3MyQuote {
   padding: 9px 15px;
+  position: relative;
   display: inline-block;
   cursor: pointer;
   background-color: transparent;
@@ -127,7 +128,153 @@ input[type=number]::-webkit-outer-spin-button
   border: 1px solid #a18568;
 }
 
+.b2b-btn-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -10px;
+  border: 1px solid #000;
+  border-top-color: transparent;
+  border-radius: 100%;
+  animation: circle infinite 0.75s linear;
+}
+
+#b2b-div-loading {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgb(165, 158, 158, 0.2);
+}
+
+@keyframes circle {
+  0% {
+    transform: rotate(0);
+
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 #add-to-cart-wrapper .form-action {
   display: flex;
   align-items: self-start;
 }
+
+
+
+#globalTip {
+  position: fixed;
+  top: 10px;
+  right: 20px;
+  z-index: 10000;
+  min-width: 300px;
+}
+
+.b2b-quote-global-success {
+  background-color: rgb(46, 125, 50);
+}
+
+.b2b-quote-global-error {
+  background-color: rgb(211, 47, 47);
+}
+
+.b2b-quote-global-alert {
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+  box-shadow: none;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.43;
+  letter-spacing: 0.01071em;
+  display: flex;
+  padding: 6px 16px;
+  color: white;
+}
+
+.b2b-quote-global-alert .MuiAlert-icon {
+  color: white;
+}
+
+.b2b-quote-global-icon {
+  margin-right: 12px;
+  padding: 7px 0px;
+  display: flex;
+  font-size: 22px;
+  opacity: 0.9;
+}
+
+.b2b-quote-global-svg {
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentcolor;
+  flex-shrink: 0;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-size: inherit;
+}
+
+.b2b-quote-global-message {
+  padding: 8px 0px;
+  min-width: 0px;
+  overflow: auto;
+}
+
+.b2b-quote-global-action {
+  display: flex;
+  align-items: flex-start;
+  padding: 4px 0px 0px 16px;
+  margin-left: auto;
+  margin-right: -8px;
+}
+
+.b2b-quote-global-btn {
+  display: inline-flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0px;
+  border: 0px;
+  margin: 0px;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  text-decoration: none;
+  text-align: center;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  overflow: visible;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  color: inherit;
+  padding: 5px;
+  font-size: 1rem;
+}
+
+.b2b-quote-global-btn-svg {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  font-size: 1.25rem;
+}
diff --git a/apps/storefront/src/pages/login/Login.tsx b/apps/storefront/src/pages/login/Login.tsx
index c2eed16d..a783b1e7 100644
--- a/apps/storefront/src/pages/login/Login.tsx
+++ b/apps/storefront/src/pages/login/Login.tsx
@@ -173,7 +173,6 @@ export default function Login(props:RegisteredProps) {
 
         // setChannelId(getChannelId)
         setLoginInfo(Info)
-
         setLoading(false)
       } catch (e) {
         console.log(e)
diff --git a/apps/storefront/src/pages/order/shared/getOrderStatus.ts b/apps/storefront/src/pages/order/shared/getOrderStatus.ts
index 75b47cab..06ef2064 100644
--- a/apps/storefront/src/pages/order/shared/getOrderStatus.ts
+++ b/apps/storefront/src/pages/order/shared/getOrderStatus.ts
@@ -2,8 +2,8 @@ interface OrderStatusConfig {
   [k: string]: string
 }
 export const orderStatusCode: OrderStatusConfig = {
-  0: 'Incomplete',
-  1: 'Pending',
+  // 0: 'Incomplete',
+  // 1: 'Pending',
   2: 'Shipped',
   3: 'Partially Shipped',
   4: 'Refunded',
@@ -33,8 +33,8 @@ const orderStatusColor: OrderStatusConfig = {
   'Awaiting Shipment': '#BD3E1E',
   'Awaiting Fulfillment': '#87CBF6',
   'Awaiting Payment': '#F19536',
-  Pending: '#899193',
-  Incomplete: '#000000',
+  // Pending: '#899193',
+  // Incomplete: '#000000',
 }
 
 const orderStatusTextColor: OrderStatusConfig = {
@@ -51,8 +51,8 @@ const orderStatusTextColor: OrderStatusConfig = {
   'Awaiting Shipment': '#FFFFFF',
   'Awaiting Fulfillment': 'rgba(0, 0, 0, 0.87)',
   'Awaiting Payment': '#FFFFFF',
-  Pending: '#FFFFFF',
-  Incomplete: '#FFFFFF',
+  // Pending: '#FFFFFF',
+  // Incomplete: '#FFFFFF',
 }
 
 // i18n
diff --git a/apps/storefront/src/pages/pdp/PDP.tsx b/apps/storefront/src/pages/pdp/PDP.tsx
index eedb9899..87ba6d9a 100644
--- a/apps/storefront/src/pages/pdp/PDP.tsx
+++ b/apps/storefront/src/pages/pdp/PDP.tsx
@@ -47,7 +47,7 @@ interface PDPRefProps {
   timer: null | number,
 }
 
-const serialize = (form: any) => {
+export const serialize = (form: any) => {
   const arr: any = {}
   for (let i = 0; i < form.elements.length; i += 1) {
     const file: any = form.elements[i]
@@ -83,8 +83,8 @@ const serialize = (form: any) => {
   return arr
 }
 
-const getProductOptionList = (optionMap: any) => {
-  const optionList: any = []
+export const getProductOptionList = (optionMap: CustomFieldItems) => {
+  const optionList: CustomFieldItems[] = []
   Object.keys(optionMap).forEach((item) => {
     if (item.includes('attribute') && item.match(/\[([0-9]+)\]/g)) {
       optionList.push({
@@ -171,9 +171,6 @@ const PDP = ({
       const productId = (document.querySelector('input[name=product_id]') as any)?.value
       const qty = (document.querySelector('[name="qty[]"]') as any)?.value ?? 1
       const sku = (document.querySelector('[data-product-sku]')?.innerHTML ?? '').trim()
-      // const productId = '115'
-      // const qty = '1'
-      // const sku = 'TP-001-RE-SM-SE'
       const form = document.querySelector('form[data-cart-item-add]')
 
       const getDefaultCurrencyInfo = () => {
@@ -213,8 +210,14 @@ const PDP = ({
 
       const optionList = getProductOptionList(optionMap)
 
-      const canAddToSl = isAllRequiredOptionFilled(allOptions, optionList)
-      if (!canAddToSl) return
+      const {
+        isValid,
+        message,
+      } = isAllRequiredOptionFilled(allOptions, optionList)
+      if (!isValid) {
+        snackbar.error(message)
+        return
+      }
 
       const params = {
         productId: +productId,
diff --git a/apps/storefront/src/pages/quote/QuoteDetail.tsx b/apps/storefront/src/pages/quote/QuoteDetail.tsx
new file mode 100644
index 00000000..2784c72a
--- /dev/null
+++ b/apps/storefront/src/pages/quote/QuoteDetail.tsx
@@ -0,0 +1,357 @@
+import {
+  useState,
+  useContext,
+  useEffect,
+} from 'react'
+
+import {
+  useParams,
+  useLocation,
+  useNavigate,
+} from 'react-router-dom'
+import copy from 'copy-to-clipboard'
+
+import {
+  Box,
+  Grid,
+  Button,
+} from '@mui/material'
+
+import {
+  useMobile,
+} from '@/hooks'
+
+import {
+  getB2BQuoteDetail,
+  getBcQuoteDetail,
+  exportB2BQuotePdf,
+} from '@/shared/service/b2b'
+
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
+import {
+  B3Sping,
+} from '@/components/spin/B3Sping'
+
+import {
+  snackbar,
+  getSearchVal,
+} from '@/utils'
+
+import QuoteDetailHeader from './components/QuoteDetailHeader'
+import QuoteInfo from './components/QuoteInfo'
+import QuoteDetailFooter from './components/QuoteDetailFooter'
+import QuoteDetailTable from './components/QuoteDetailTable'
+import {
+  QuoteDetailSummary,
+} from './components/QuoteDetailSummary'
+import {
+  QuoteAttachment,
+} from './components/QuoteAttachment'
+import {
+  QuoteNote,
+} from './components/QuoteNote'
+
+const QuoteDetail = () => {
+  const {
+    id = '',
+  } = useParams()
+  const navigate = useNavigate()
+
+  const {
+    state: {
+      role,
+    },
+  } = useContext(GlobaledContext)
+  const [isMobile] = useMobile()
+
+  const [quoteDetail, setQuoteDetail] = useState<any>({})
+  const [productList, setProductList] = useState<any>([])
+  const [currency, setCurrency] = useState<any>({})
+  const [quoteSummary, setQuoteSummary] = useState<any>({
+    originalSubtotal: 0,
+    discount: 0,
+    tax: 0,
+    shipping: 0,
+    grandTotal: 0,
+  })
+  const [isRequestLoading, setIsRequestLoading] = useState(false)
+
+  const location = useLocation()
+
+  const getQuoteDetail = async () => {
+    setIsRequestLoading(true)
+
+    try {
+      const {
+        search,
+      } = location
+
+      const date = getSearchVal(search, 'date') || ''
+      const data = {
+        id: +id,
+        date: date.toString(),
+      }
+
+      const fn = +role === 99 ? getBcQuoteDetail : getB2BQuoteDetail
+
+      const {
+        quote,
+      } = await fn(data)
+
+      setQuoteDetail(quote)
+      setQuoteSummary({
+        originalSubtotal: quote.subtotal,
+        discount: quote.discount,
+        tax: quote.taxTotal,
+        shipping: quote.shippingTotal,
+        grandTotal: quote.grandTotal,
+      })
+      setCurrency(quote.currency)
+      setProductList(quote.productsList)
+
+      return quote
+    } catch (err: any) {
+      snackbar.error(err)
+      throw err
+    } finally {
+      setIsRequestLoading(false)
+    }
+  }
+
+  const exportPdf = async () => {
+    setIsRequestLoading(true)
+    const {
+      id,
+      currency: {
+        currencyExchangeRate,
+        token,
+      },
+    } = quoteDetail
+    try {
+      const data = {
+        quoteId: +id,
+        currency: {
+          currencyExchangeRate,
+          token,
+        },
+      }
+
+      const quotePdf = await exportB2BQuotePdf(data)
+
+      if (quotePdf) {
+        window.open(`${quotePdf.quotePdfExport.url}`, '_blank')
+      }
+    } catch (err: any) {
+      snackbar.error(err)
+    } finally {
+      setIsRequestLoading(false)
+    }
+  }
+
+  const getQuoteTableDetails = async (params: any) => {
+    let allProductsList: any[] = productList
+
+    if (allProductsList.length === 0) {
+      const quote = await getQuoteDetail()
+      allProductsList = quote?.productsList || []
+    }
+
+    const startIndex = +params.offset
+    const endIndex = +params.first + startIndex
+
+    if (!allProductsList.length) {
+      return {
+        edges: [],
+        totalCount: 0,
+      }
+    }
+    const list = allProductsList.slice(startIndex, endIndex)
+
+    return {
+      edges: list,
+      totalCount: allProductsList.length,
+    }
+  }
+
+  const tip = () => (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Box
+        sx={{
+          mr: '15px',
+        }}
+      >
+        {
+          +role === 100 ? 'Your quote was submitted. You can always find the quote using this link.' : 'Your quote was submitted'
+        }
+      </Box>
+      <Button
+        onClick={() => {
+          if (+role === 100) {
+            copy(window.location.href)
+            snackbar.success('copy successfully')
+          } else {
+            navigate('/quotes')
+          }
+        }}
+        variant="text"
+        sx={{
+          color: '#ffffff',
+        }}
+      >
+        {
+          +role === 100 ? 'Copy quote link' : 'Review all quotes'
+        }
+      </Button>
+    </Box>
+  )
+
+  useEffect(() => {
+    const {
+      state,
+    } = location
+
+    if (state) {
+      setTimeout(() => {
+        snackbar.success('', {
+          jsx: () => tip(),
+          isClose: true,
+          duration: 30000,
+        })
+      }, 10)
+    }
+  }, [])
+
+  return (
+    <B3Sping
+      isSpinning={isRequestLoading}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+        }}
+      >
+        <QuoteDetailHeader
+          status={quoteDetail.status}
+          quoteNumber={quoteDetail.quoteNumber}
+          issuedAt={quoteDetail.createdAt}
+          expirationDate={quoteDetail.expiredAt}
+          exportPdf={exportPdf}
+          role={role}
+        />
+
+        <Box
+          sx={{
+            marginTop: '1rem',
+          }}
+        >
+          <QuoteInfo
+            contactInfo={quoteDetail.contactInfo}
+            shippingAddress={quoteDetail.shippingAddress}
+            billingAddress={quoteDetail.billingAddress}
+          />
+        </Box>
+
+        <Grid
+          container
+          spacing={2}
+          sx={{
+            marginTop: '0',
+            overflow: 'auto',
+            flexWrap: isMobile ? 'wrap' : 'nowrap',
+            paddingBottom: '20px',
+            marginBottom: isMobile ? '6rem' : 0,
+            '@media print': {
+              overflow: 'hidden',
+            },
+          }}
+        >
+          <Box
+            sx={isMobile ? {
+              flexBasis: '100%',
+              pl: '16px',
+            } : {
+              flexBasis: '690px',
+              flexGrow: 1,
+              ml: '16px',
+              pt: '16px',
+            }}
+          >
+            <Grid
+              item
+              sx={isMobile ? {
+                flexBasis: '100%',
+              } : {
+                flexBasis: '690px',
+                flexGrow: 1,
+              }}
+            >
+              <QuoteDetailTable
+                currencyToken={currency?.token}
+                total={productList.length}
+                getQuoteTableDetails={getQuoteTableDetails}
+              />
+            </Grid>
+          </Box>
+
+          <Grid
+            item
+            sx={isMobile ? {
+              flexBasis: '100%',
+            } : {
+              flexBasis: '340px',
+            }}
+          >
+            <Box
+              sx={{
+                marginBottom: '1rem',
+              }}
+            >
+              <QuoteDetailSummary
+                quoteSummary={quoteSummary}
+                currency={quoteDetail.currency}
+              />
+            </Box>
+
+            <Box
+              sx={{
+                marginBottom: '1rem',
+                displayPrint: 'none',
+              }}
+            >
+              <QuoteNote />
+            </Box>
+
+            <Box
+              sx={{
+                displayPrint: 'none',
+              }}
+            >
+              <QuoteAttachment />
+            </Box>
+          </Grid>
+        </Grid>
+
+        {
+          +role !== 100 && (
+            <QuoteDetailFooter
+              quoteId={quoteDetail.id}
+              quoteDate={quoteDetail?.createdAt?.toString()}
+            />
+          )
+        }
+      </Box>
+    </B3Sping>
+  )
+}
+
+export default QuoteDetail
diff --git a/apps/storefront/src/pages/quote/QuoteDraft.tsx b/apps/storefront/src/pages/quote/QuoteDraft.tsx
new file mode 100644
index 00000000..587a5afb
--- /dev/null
+++ b/apps/storefront/src/pages/quote/QuoteDraft.tsx
@@ -0,0 +1,667 @@
+import {
+  useEffect,
+  useState,
+  useRef,
+  useContext,
+} from 'react'
+
+import {
+  Box,
+  Button,
+  Stack,
+  Typography,
+} from '@mui/material'
+
+import {
+  useNavigate,
+} from 'react-router-dom'
+
+import {
+  QuoteStatus,
+} from './components/QuoteStatus'
+import {
+  B3Sping,
+} from '@/components'
+
+import {
+  getBCCustomerAddresses,
+  getB2BCustomerAddresses,
+  createQuote,
+  createBCQuote,
+} from '@/shared/service/b2b'
+
+import {
+  B3LStorage,
+  B3SStorage,
+  storeHash,
+  addQuoteDraftProduce,
+} from '@/utils'
+
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
+import {
+  useMobile,
+  useSetCountry,
+} from '@/hooks'
+
+import ContactInfo from './components/ContactInfo'
+import QuoteAddress from './components/QuoteAddress'
+
+import {
+  BCAddressItemType,
+  AddressItemType,
+} from '@/types/address'
+
+import {
+  convertBCToB2BAddress,
+} from '../address/shared/config'
+
+import QuoteInfo from './components/QuoteInfo'
+
+import QuoteTable from './components/QuoteTable'
+import {
+  AddToQuote,
+} from './components/AddToQuote'
+import {
+  QuoteSummary,
+} from './components/QuoteSummary'
+import {
+  QuoteNote,
+} from './components/QuoteNote'
+import {
+  QuoteAttachment,
+} from './components/QuoteAttachment'
+
+import {
+  QuoteListitemProps,
+} from './shared/config'
+
+import {
+  getProductOptionsFields,
+} from '../shoppingListDetails/shared/config'
+
+import {
+  getAccountFormFields,
+} from './config'
+
+import {
+  Container,
+} from './style'
+
+type BCAddress = {
+  node: BCAddressItemType
+}
+
+type B2BAddress = {
+  node: AddressItemType
+}
+
+export interface Country {
+  countryCode: string,
+  countryName: string,
+  id?: string,
+}
+
+interface GetValue {
+  [key: string]: string,
+}
+interface InfoRefProps extends HTMLInputElement {
+  getContactInfoValue: () => GetValue,
+}
+
+interface InfoProps {
+  contactInfo: GetValue,
+  shippingAddress: GetValue,
+  billingAddress: GetValue,
+}
+
+interface QuoteTableRef extends HTMLInputElement {
+  refreshList: () => void
+}
+
+const QuoteDraft = () => {
+  const {
+    state: {
+      role,
+      isB2BUser,
+      salesRepCompanyId,
+      companyInfo: {
+        id: companyB2BId,
+      },
+      countriesList,
+      customer,
+      currentChannelId: channelId,
+    },
+  } = useContext(GlobaledContext)
+
+  const navigate = useNavigate()
+
+  const [isMobile] = useMobile()
+
+  const [loading, setLoading] = useState<boolean>(false)
+
+  const [isEdit, setEdit] = useState<boolean>(false)
+
+  const [addressList, setAddressList] = useState<B2BAddress[]>([])
+
+  const [total, setTotal] = useState<number>(0)
+
+  const [isRefresh, setIsRefresh] = useState<boolean>(false)
+
+  const [info, setInfo] = useState<InfoProps>({
+    contactInfo: {},
+    shippingAddress: {},
+    billingAddress: {},
+  })
+
+  const quoteTableRef = useRef<QuoteTableRef | null>(null)
+
+  useSetCountry()
+
+  const contactInfoRef = useRef<InfoRefProps | null>(null)
+  const billingRef = useRef<InfoRefProps | null>(null)
+  const shippingRef = useRef<InfoRefProps | null>(null)
+
+  const setCustomInfo = (quoteInfo: any) => {
+    const newInfo = {
+      ...quoteInfo,
+    }
+    newInfo.contactInfo = {
+      name: `${customer.firstName} ${customer.lastName}`,
+      email: customer.emailAddress,
+      phoneNumber: customer.phoneNumber,
+    }
+    setInfo(newInfo)
+    B3LStorage.set('MyQuoteInfo', newInfo)
+  }
+
+  useEffect(() => {
+    const init = async () => {
+      setLoading(true)
+      try {
+        const MyQuoteInfo = B3LStorage.get('MyQuoteInfo') || {}
+        const quoteInfo = {
+          ...info, ...MyQuoteInfo,
+        }
+        if (isB2BUser) {
+          const companyId = companyB2BId || salesRepCompanyId
+          const {
+            addresses: {
+              edges: addressB2BList = [],
+            },
+          } = await getB2BCustomerAddresses(+companyId)
+
+          const shippingDefautAddress = addressB2BList.find((item: B2BAddress) => (item?.node?.isDefaultShipping === 1))
+          const billingDefautAddress = addressB2BList.find((item: B2BAddress) => (item?.node?.isDefaultBilling === 1))
+          if (shippingDefautAddress && !quoteInfo?.shippingAddress) {
+            const addressItem = {
+              label: shippingDefautAddress?.node?.label || '',
+              firstName: shippingDefautAddress?.node?.firstName || '',
+              lastName: shippingDefautAddress?.node?.lastName || '',
+              company: shippingDefautAddress?.node?.company || '',
+              country: shippingDefautAddress?.node?.countryCode || '',
+              address: shippingDefautAddress?.node?.addressLine1 || '',
+              apartment: shippingDefautAddress?.node?.addressLine2 || '',
+              city: shippingDefautAddress?.node?.city || '',
+              state: shippingDefautAddress?.node?.state || '',
+              zipCode: shippingDefautAddress?.node?.zipCode || '',
+              phoneNumber: shippingDefautAddress?.node?.phoneNumber || '',
+            }
+
+            quoteInfo.shippingAddress = addressItem
+          }
+          if (billingDefautAddress && !quoteInfo?.billingAddress) {
+            const addressItem = {
+              label: billingDefautAddress?.node?.label || '',
+              firstName: billingDefautAddress?.node?.firstName || '',
+              lastName: billingDefautAddress?.node?.lastName || '',
+              company: billingDefautAddress?.node?.company || '',
+              country: billingDefautAddress?.node?.countryCode || '',
+              address: billingDefautAddress?.node?.addressLine1 || '',
+              apartment: billingDefautAddress?.node?.addressLine2 || '',
+              city: billingDefautAddress?.node?.city || '',
+              state: billingDefautAddress?.node?.state || '',
+              zipCode: billingDefautAddress?.node?.zipCode || '',
+              phoneNumber: billingDefautAddress?.node?.phoneNumber || '',
+            }
+
+            quoteInfo.billingAddress = addressItem
+          }
+
+          setAddressList(addressB2BList)
+        } else if (role !== 100) {
+          const {
+            customerAddresses: {
+              edges: addressBCList = [],
+            },
+          } = await getBCCustomerAddresses()
+
+          const list = addressBCList.map((address: BCAddress) => ({
+            node: convertBCToB2BAddress(address.node),
+          }))
+          setAddressList(list)
+        }
+
+        if (quoteInfo && !quoteInfo?.contactInfo && role !== 100) {
+          setCustomInfo(quoteInfo)
+        } else if (quoteInfo) {
+          setInfo(quoteInfo)
+        }
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    init()
+  }, [])
+
+  const handleSaveInfoClick = async () => {
+    const saveInfo = {
+      ...info,
+    }
+    if (contactInfoRef?.current) {
+      saveInfo.contactInfo = await contactInfoRef.current.getContactInfoValue()
+    }
+    if (billingRef?.current) {
+      saveInfo.billingAddress = billingRef.current.getContactInfoValue()
+    }
+    if (shippingRef?.current) {
+      saveInfo.shippingAddress = shippingRef.current.getContactInfoValue()
+    }
+
+    const isComplete = Object.keys(saveInfo.contactInfo).every((key: string) => !!saveInfo.contactInfo[key])
+
+    if (isComplete) {
+      B3LStorage.set('MyQuoteInfo', saveInfo)
+      setInfo(saveInfo)
+      setEdit(false)
+    }
+  }
+
+  const handleEditInfoClick = () => {
+    setEdit(true)
+  }
+
+  const getDefaultCurrencyInfo = () => {
+    const currencies = B3SStorage.get('currencies')
+    if (currencies) {
+      const {
+        currencies: currencyArr,
+      } = currencies
+
+      const defaultCurrency = currencyArr.find((currency: CustomFieldItems) => currency.is_default)
+
+      return defaultCurrency
+    }
+  }
+
+  const {
+    token: currencyToken,
+  } = getDefaultCurrencyInfo()
+
+  const getQuoteTableDetails = async (params: CustomFieldItems) => {
+    const quoteDraftAllList = B3LStorage.get('b2bQuoteDraftList') || []
+
+    const startIndex = +params.offset
+    const endIndex = +params.first + startIndex
+
+    setTotal(quoteDraftAllList.length)
+    if (!quoteDraftAllList.length) {
+      return {
+        edges: [],
+        totalCount: 0,
+      }
+    }
+    const list = quoteDraftAllList.slice(startIndex, endIndex)
+
+    return {
+      edges: list,
+      totalCount: quoteDraftAllList.length,
+    }
+  }
+
+  const accountFormFields = getAccountFormFields(isMobile)
+  useEffect(() => {
+    if (isRefresh) {
+      // TODO list refresh function
+
+      setIsRefresh(false)
+    }
+  }, [isRefresh])
+
+  const updateList = () => {
+    setIsRefresh(true)
+  }
+
+  const addToQuote = (products: CustomFieldItems[]) => {
+    products.forEach((product) => {
+      const {
+        optionList,
+        quantity,
+        variantSku,
+        productsSearch: {
+          variants,
+        },
+      } = product.node
+      const variantItem = variants.find((item: CustomFieldItems) => item.sku === variantSku)
+
+      product.node.basePrice = variantItem.bc_calculated_price.as_entered
+      product.node.tax = variantItem.bc_calculated_price.tax_inclusive - variantItem.bc_calculated_price.tax_exclusive
+
+      const newOptionList = JSON.parse(optionList) || []
+
+      addQuoteDraftProduce(product, quantity, newOptionList)
+    })
+
+    quoteTableRef.current?.refreshList()
+  }
+
+  const handleSubmit = async () => {
+    setLoading(true)
+    try {
+      const info = B3LStorage.get('MyQuoteInfo')
+
+      const b2bQuoteDraftList = B3LStorage.get('b2bQuoteDraftList')
+
+      const emailAddress = B3SStorage.get('B3EmailAddress')
+
+      const contactInfo = info?.contactInfo || {}
+      const note = info?.note || ''
+
+      const perfectAddress = (address: CustomFieldStringItems) => {
+        const newAddress = {
+          ...address,
+        }
+
+        const countryItem = countriesList?.find((item:Country) => item.countryCode === newAddress.country)
+
+        if (countryItem) {
+          newAddress.country = countryItem.countryName
+        }
+
+        newAddress.addressLine1 = address?.address || ''
+        newAddress.addressLine2 = address?.apartment || ''
+
+        delete newAddress.company
+
+        return newAddress
+      }
+
+      const shippingAddress = info?.shippingAddress ? perfectAddress(info.shippingAddress) : {}
+
+      const billingAddress = info?.billingAddress ? perfectAddress(info.billingAddress) : {}
+
+      let allPrice = 0
+
+      const productList = b2bQuoteDraftList.map((item: QuoteListitemProps) => {
+        const {
+          node,
+        } = item
+        const product: any = {
+          ...node.productsSearch,
+          selectOptions: node?.optionList || '',
+        }
+
+        const productFields = (getProductOptionsFields(product, {}))
+
+        const optionsList: CustomFieldItems[] = productFields.map((item) => ({
+          optionId: item.optionId,
+          optionValue: item.optionValue,
+          optionLabel: item.valueText,
+          optionName: item.valueLabel,
+        })).filter((list:CustomFieldItems) => !!list.optionName) || []
+
+        const varants = node.productsSearch.variants
+        const varantsItem = varants.find((item: CustomFieldItems) => item.sku === node.variantSku)
+
+        allPrice += node.basePrice * node.quantity
+
+        const items = {
+          productId: node.productsSearch.id,
+          sku: node.variantSku,
+          basePrice: node.basePrice.toFixed(2),
+          discount: '0.00',
+          offeredPrice: node.basePrice.toFixed(2),
+          quantity: node.quantity,
+          variantId: varantsItem.variant_id,
+          imageUrl: node.primaryImage,
+          productName: node.productName,
+          options: optionsList,
+        }
+
+        return items
+      })
+
+      const getDefaultCurrencyInfo = () => {
+        const currencies = B3SStorage.get('currencies')
+        if (currencies) {
+          const {
+            currencies: currencyArr,
+          } = currencies
+          const defaultCurrency = currencyArr.find((currency: any) => currency.is_default)
+          return defaultCurrency
+        }
+      }
+
+      const currency = getDefaultCurrencyInfo()
+
+      const data = {
+        notes: note,
+        legalTerms: '',
+        totalAmount: allPrice.toFixed(2),
+        grandTotal: allPrice.toFixed(2),
+        subtotal: allPrice.toFixed(2),
+        companyId: isB2BUser ? companyB2BId || salesRepCompanyId : '',
+        storeHash,
+        discount: '0.00',
+        channelId,
+        userEmail: emailAddress,
+        shippingAddress,
+        billingAddress,
+        contactInfo,
+        productList,
+        currency: {
+          currencyExchangeRate: currency.currency_exchange_rate,
+          token: currency.token,
+          location: currency.token_location,
+          decimalToken: currency.decimal_token,
+          decimalPlaces: currency.decimal_places,
+          thousandsToken: currency.thousands_token,
+          currencyCode: currency.currency_code,
+        },
+      }
+
+      const fn = +role === 99 ? createBCQuote : createQuote
+
+      const {
+        quoteCreate: {
+          quote: {
+            id,
+            createdAt,
+          },
+        },
+      } = await fn(data)
+
+      navigate(`/quoteDetail/${id}?date=${createdAt}`, {
+        state: {
+          to: 'draft',
+        },
+      })
+
+      B3LStorage.delete('b2bQuoteDraftList')
+      B3LStorage.delete('MyQuoteInfo')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <B3Sping
+      isSpinning={loading}
+    >
+      <Box
+        sx={{
+          width: '100%',
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              mb: '8px',
+            }}
+          >
+            <Typography
+              component="h3"
+              sx={{
+                fontSize: '24px',
+                mr: '1rem',
+              }}
+            >
+              Quote
+            </Typography>
+            <QuoteStatus code="0" />
+          </Box>
+          <Button
+            variant="contained"
+            size="small"
+            sx={{
+              height: '35px',
+            }}
+            onClick={handleSubmit}
+          >
+            submit
+          </Button>
+        </Box>
+
+        <Box>
+          {
+          !isEdit && (
+          <QuoteInfo
+            contactInfo={info?.contactInfo || {}}
+            shippingAddress={info?.shippingAddress || {}}
+            billingAddress={info?.billingAddress || {}}
+            handleEditInfoClick={handleEditInfoClick}
+          />
+          )
+        }
+          {
+          isEdit && (
+          <Container
+            flexDirection="column"
+          >
+            <ContactInfo
+              info={info.contactInfo}
+              ref={contactInfoRef}
+            />
+            <Box
+              sx={{
+                display: 'flex',
+                mt: isMobile ? 0 : '3rem',
+                flexDirection: isMobile ? 'column' : 'row',
+              }}
+            >
+              <QuoteAddress
+                title="Billing"
+                info={info?.billingAddress || {}}
+                addressList={addressList}
+                pr={isMobile ? 0 : '8px'}
+                ref={billingRef}
+                role={role}
+                accountFormFields={accountFormFields}
+              />
+              <QuoteAddress
+                title="Shipping"
+                info={info?.shippingAddress || {}}
+                addressList={addressList}
+                pl={isMobile ? 0 : '8px'}
+                ref={shippingRef}
+                role={role}
+                accountFormFields={accountFormFields}
+              />
+            </Box>
+            <Button
+              sx={{
+                mt: '20px',
+                mb: '15px',
+              }}
+              onClick={handleSaveInfoClick}
+              variant="outlined"
+            >
+              Save info
+
+            </Button>
+          </Container>
+          )
+        }
+        </Box>
+        <Box
+          sx={{
+            mt: '20px',
+            display: 'flex',
+            flexDirection: isMobile ? 'column' : 'row',
+            alignItems: 'flex-start',
+          }}
+        >
+          <Container
+            flexDirection="column"
+            xs={{
+              flexBasis: isMobile ? '100%' : '680px',
+              flexGrow: 1,
+              marginRight: '20px',
+              marginBottom: '20px',
+            }}
+          >
+            <QuoteTable
+              ref={quoteTableRef}
+              total={total}
+              currencyToken={currencyToken}
+              getQuoteTableDetails={getQuoteTableDetails}
+            />
+
+          </Container>
+
+          <Container
+            flexDirection="column"
+            xs={{
+              flexBasis: isMobile ? '100%' : '340px',
+              marginBottom: '20px',
+              backgroundColor: 'transparent',
+              padding: 0,
+            }}
+          >
+            <Stack
+              spacing={2}
+              sx={{
+                width: '100%',
+              }}
+            >
+              <QuoteSummary
+                currencyToken={currencyToken}
+                isRefresh={isRefresh}
+              />
+              <AddToQuote
+                updateList={updateList}
+                addToQuote={addToQuote}
+              />
+
+              <QuoteNote />
+
+              <QuoteAttachment />
+            </Stack>
+          </Container>
+        </Box>
+      </Box>
+    </B3Sping>
+  )
+}
+
+export default QuoteDraft
diff --git a/apps/storefront/src/pages/quote/QuotesList.tsx b/apps/storefront/src/pages/quote/QuotesList.tsx
new file mode 100644
index 00000000..9a48ff07
--- /dev/null
+++ b/apps/storefront/src/pages/quote/QuotesList.tsx
@@ -0,0 +1,339 @@
+import {
+  useContext,
+  useState,
+} from 'react'
+import {
+  Box,
+} from '@mui/material'
+import {
+  useNavigate,
+} from 'react-router-dom'
+import {
+  format,
+} from 'date-fns'
+import {
+  TableColumnItem,
+} from '@/components/table/B3Table'
+
+import {
+  B3PaginationTable,
+} from '@/components/table/B3PaginationTable'
+
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
+import {
+  getB2BQuotesList,
+  getBCQuotesList,
+} from '@/shared/service/b2b'
+
+import {
+  B3Sping,
+} from '@/components/spin/B3Sping'
+
+import B3Filter from '../../components/filter/B3Filter'
+
+import {
+  QuoteStatus,
+} from './components/QuoteStatus'
+
+import {
+  QuoteItemCard,
+} from './components/QuoteItemCard'
+
+interface SortByListProps {
+  [key: string]: number | string
+}
+
+interface ListItem {
+  [key: string]: string | Object
+  status: string,
+  quoteNumber: string,
+  currency: {
+    token: string
+  }
+}
+
+interface FilterSearchProps {
+  first: number,
+  offset: number,
+  q: string,
+  orderBy: string,
+  createdBy: string,
+  status: string | number,
+  salesRep: string,
+  dateCreatedBeginAt: string,
+}
+
+const sortByList: Array<SortByListProps> = [
+  {
+    name: 'Date Created',
+    id: 'createdAt',
+  },
+  {
+    name: 'Status',
+    id: 'status',
+  },
+  {
+    name: 'Updated',
+    id: 'updatedAt',
+  },
+  {
+    name: 'Expiration',
+    id: 'expiredAt',
+  },
+]
+
+const sortByItemName = {
+  labelName: 'name',
+  valueName: 'id',
+}
+
+const sortByConfigData = {
+  isEnabled: true,
+  sortByList,
+  sortByItemName,
+  sortByLabel: 'Sort by',
+  defaultValue: 'createdAt',
+  isFirstSelect: false,
+  w: 150,
+}
+
+const quotesStatuses = [
+  {
+    customLabel: 'open',
+    statusCode: 1,
+  },
+  {
+    customLabel: 'ordered',
+    statusCode: 4,
+  },
+  {
+    customLabel: 'expired',
+    statusCode: 5,
+  },
+]
+const filterMoreList = [
+  {
+    name: 'orderStatus',
+    label: 'Order status',
+    required: false,
+    default: '',
+    fieldType: 'dropdown',
+    options: quotesStatuses,
+    replaceOptions: {
+      label: 'customLabel',
+      value: 'statusCode',
+    },
+    xs: 12,
+    variant: 'filled',
+    size: 'small',
+  },
+  {
+    name: 'createdBy',
+    label: 'Created By',
+    required: false,
+    default: '',
+    fieldType: 'text',
+    xs: 12,
+    variant: 'filled',
+    size: 'small',
+  },
+  {
+    name: 'salesRep',
+    label: 'Sales Rep',
+    required: false,
+    default: '',
+    fieldType: 'text',
+    xs: 12,
+    variant: 'filled',
+    size: 'small',
+  },
+  {
+    name: 'dateCreatedBeginAt',
+    label: 'Date Created',
+    required: false,
+    default: '',
+    fieldType: 'date',
+    xs: 12,
+    variant: 'filled',
+    size: 'small',
+  },
+]
+
+const QuotesList = () => {
+  const initSearch = {
+    q: '',
+    orderBy: '',
+    createdBy: '',
+    salesRep: '',
+    status: '',
+    dateCreatedBeginAt: '',
+  }
+  const [filterData, setFilterData] = useState<Partial<FilterSearchProps>>(initSearch)
+
+  const [isRequestLoading, setIsRequestLoading] = useState(false)
+
+  const navigate = useNavigate()
+
+  const {
+    state: {
+      isB2BUser,
+    },
+  } = useContext(GlobaledContext)
+
+  const goToDetail = (item: ListItem) => {
+    navigate(`/quoteDetail/${item.id}?date=${item.createdAt}`)
+  }
+
+  const fetchList = async (params: Partial<FilterSearchProps>) => {
+    const fn = isB2BUser ? getB2BQuotesList : getBCQuotesList
+    const key = isB2BUser ? 'quotes' : 'customerQuotes'
+    const {
+      [key]: {
+        edges = [],
+        totalCount,
+      },
+    } = await fn(params)
+
+    return {
+      edges,
+      totalCount,
+    }
+  }
+
+  const columnAllItems: TableColumnItem<ListItem>[] = [
+    {
+      key: 'quoteNumber',
+      title: 'Quote #',
+      render: (item: ListItem) => (
+        <Box
+          component="span"
+          sx={{
+            cursor: 'pointer',
+            '&:hover': {
+              textDecoration: 'underline',
+            },
+          }}
+          onClick={() => goToDetail(item)}
+        >
+          {item.quoteNumber}
+        </Box>
+      ),
+    },
+    {
+      key: 'quoteTitle',
+      title: 'Title',
+    },
+    {
+      key: 'salesRep',
+      title: 'Sales rep',
+    },
+    {
+      key: 'createdBy',
+      title: 'Created by',
+    },
+    {
+      key: 'createdAt',
+      title: 'Date created',
+      render: (item: ListItem) => format(+item.createdAt * 1000, 'dd MMM yy'),
+    },
+    {
+      key: 'updatedAt',
+      title: 'Last update',
+      render: (item: ListItem) => format(+item.updatedAt * 1000, 'dd MMM yy'),
+    },
+    {
+      key: 'expiredAt',
+      title: 'Expiration date',
+      render: (item: ListItem) => format(+item.expiredAt * 1000, 'dd MMM yy'),
+    },
+    {
+      key: 'subtotal',
+      title: 'Subtotal',
+      render: (item: ListItem) => {
+        const {
+          currency: {
+            token,
+          },
+          subtotal,
+        } = item
+
+        return (`${token}${subtotal}`)
+      },
+    },
+    {
+      key: 'status',
+      title: 'Status',
+      render: (item: ListItem) => (<QuoteStatus code={item.status} />),
+    },
+  ]
+  const handleChange = (key:string, value: string) => {
+    if (key === 'search') {
+      setFilterData({
+        ...filterData,
+        q: value,
+      })
+    } else if (key === 'sortBy') {
+      setFilterData({
+        ...filterData,
+        orderBy: value,
+      })
+    }
+  }
+
+  const handleFirterChange = (value: Partial<FilterSearchProps>) => {
+    const search: Partial<FilterSearchProps> = {
+      createdBy: value?.createdBy || '',
+      status: value?.status || '',
+      salesRep: value?.salesRep || '',
+      dateCreatedBeginAt: value?.dateCreatedBeginAt || '',
+    }
+
+    setFilterData({
+      ...filterData,
+      ...search,
+    })
+  }
+
+  return (
+    (
+      <B3Sping
+        isSpinning={isRequestLoading}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+          }}
+        >
+          <B3Filter
+            sortByConfig={sortByConfigData}
+            fiterMoreInfo={filterMoreList}
+            handleChange={handleChange}
+            handleFilterChange={handleFirterChange}
+          />
+          <B3PaginationTable
+            columnItems={columnAllItems}
+            rowsPerPageOptions={[10, 20, 30]}
+            getRequestList={fetchList}
+            searchParams={filterData}
+            isCustomRender={false}
+            requestLoading={setIsRequestLoading}
+            tableKey="quoteNumber"
+            renderItem={(row: ListItem) => (
+              <QuoteItemCard
+                item={row}
+                goToDetail={goToDetail}
+              />
+            )}
+          />
+        </Box>
+      </B3Sping>
+    )
+  )
+}
+
+export default QuotesList
diff --git a/apps/storefront/src/pages/quote/components/AddToQuote.tsx b/apps/storefront/src/pages/quote/components/AddToQuote.tsx
new file mode 100644
index 00000000..7b64d49e
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/AddToQuote.tsx
@@ -0,0 +1,153 @@
+import {
+  Divider,
+  Card,
+  CardContent,
+} from '@mui/material'
+
+import {
+  v1 as uuid,
+} from 'uuid'
+
+import {
+  B3CollapseContainer,
+} from '@/components'
+
+import {
+  snackbar,
+} from '@/utils'
+
+import {
+  searchB2BProducts,
+} from '@/shared/service/b2b'
+
+import {
+  SearchProduct,
+} from '../../shoppingListDetails/components/SearchProduct'
+
+import {
+  QuickAdd,
+} from '../../shoppingListDetails/components/QuickAdd'
+
+interface AddToListProps {
+  updateList: () => void
+  addToQuote: (products: CustomFieldItems[]) => void,
+}
+
+export const AddToQuote = (props: AddToListProps) => {
+  const {
+    updateList,
+    addToQuote,
+  } = props
+
+  const getNewQuoteProduct = (products: CustomFieldItems[]) => products.map((product) => {
+    const {
+      variantId,
+      newSelectOptionList,
+      id: productId,
+      name: productName,
+      quantity,
+      variants = [],
+    } = product
+
+    const variantInfo = variants.length === 1 ? variants[0] : variants.find((item: CustomFieldItems) => item.variant_id === variantId)
+
+    const {
+      image_url: primaryImage = '',
+      calculated_price: basePrice,
+      sku: variantSku,
+    } = variantInfo
+
+    let selectOptions
+    try {
+      selectOptions = JSON.stringify(newSelectOptionList)
+    } catch (error) {
+      selectOptions = '[]'
+    }
+
+    return {
+      node: {
+        basePrice,
+        optionList: selectOptions,
+        id: uuid(),
+        primaryImage,
+        productId,
+        productName,
+        productsSearch: {
+          ...product,
+          selectOptions,
+        },
+        quantity,
+        variantSku,
+      },
+    }
+  })
+
+  const addToList = async (products: CustomFieldItems[]) => {
+    const newProducts = getNewQuoteProduct(products)
+
+    addToQuote(newProducts)
+
+    snackbar.success('Product were added to your quote.')
+
+    return products
+  }
+
+  const quickAddToList = async (variantProducts: CustomFieldItems[]) => {
+    const productIds = variantProducts.map((item) => item.productId)
+
+    const {
+      productsSearch,
+    } : CustomFieldItems = await searchB2BProducts({
+      productIds,
+    })
+
+    const productList = productsSearch.map((product: CustomFieldItems) => {
+      const variantProduct = variantProducts.find((variantProduct: CustomFieldItems) => variantProduct.productId === product.id) || {}
+
+      const {
+        variantId,
+        newSelectOptionList,
+        quantity,
+      } = variantProduct
+
+      return {
+        ...product,
+        variantId,
+        newSelectOptionList,
+        quantity,
+      }
+    })
+
+    const newProducts = getNewQuoteProduct(productList)
+
+    addToQuote(newProducts)
+
+    snackbar.success('Products were added to your quote.')
+
+    return variantProducts
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <B3CollapseContainer title="Add to quote">
+          <SearchProduct
+            updateList={updateList}
+            addToList={addToList}
+            searchDialogTitle="Add to quote"
+            addButtonText="Add to Quote"
+          />
+
+          <Divider />
+
+          <QuickAdd
+            updateList={updateList}
+            quickAddToList={quickAddToList}
+            level={1}
+            buttonText="Add products to Quote"
+          />
+        </B3CollapseContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/storefront/src/pages/quote/components/AddressItemCard.tsx b/apps/storefront/src/pages/quote/components/AddressItemCard.tsx
new file mode 100644
index 00000000..8426c1af
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/AddressItemCard.tsx
@@ -0,0 +1,127 @@
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+
+import styled from '@emotion/styled'
+
+import {
+  useTheme,
+  Theme,
+} from '@mui/material'
+
+import {
+  AddressItemType,
+} from '../../../types/address'
+
+import {
+  B3Tag,
+} from '@/components/B3Tag'
+
+export interface OrderItemCardProps {
+  item: AddressItemType,
+  onSetAddress: (data: AddressItemType) => void
+}
+
+interface TagBoxProps {
+  marginBottom: number | string
+}
+
+const TagBox = styled('div')(({
+  marginBottom,
+}: TagBoxProps) => ({
+  marginBottom,
+  '& > span:not(:last-child)': {
+    marginRight: '4px',
+  },
+}))
+
+interface FlexProps {
+  theme?: Theme
+}
+
+const Flex = styled('div')(({
+  theme,
+}: FlexProps) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  marginTop: theme!.spacing(3),
+}))
+
+export const AddressItemCard = (props: OrderItemCardProps) => {
+  const {
+    item: addressInfo,
+    onSetAddress,
+  } = props
+
+  const theme = useTheme()
+
+  return (
+    <Card
+      key={addressInfo.id}
+    >
+      <CardContent
+        sx={{
+          color: '#313440',
+          wordBreak: 'break-word',
+        }}
+      >
+        {addressInfo.label && (
+          <Typography
+            variant="h5"
+            sx={{
+              marginBottom: addressInfo.isDefaultShipping === 1 || addressInfo.isDefaultBilling === 1 ? theme.spacing(1) : theme.spacing(3),
+              color: 'rgba(0, 0, 0, 0.87)',
+            }}
+          >
+            {addressInfo.label}
+          </Typography>
+        )}
+
+        <TagBox marginBottom={addressInfo.isDefaultShipping === 1 || addressInfo.isDefaultBilling === 1 ? theme.spacing(3) : 0}>
+          { addressInfo.isDefaultShipping === 1 && (
+            <B3Tag
+              color="#C4DD6C"
+              textColor="rgba(0, 0, 0, 0.87)"
+            >
+              Default shipping
+            </B3Tag>
+          )}
+          { addressInfo.isDefaultBilling === 1 && (
+            <B3Tag
+              color="#C4DD6C"
+              textColor="rgba(0, 0, 0, 0.87)"
+            >
+              Default billing
+            </B3Tag>
+          )}
+        </TagBox>
+
+        <Typography variant="body1">
+          {`${addressInfo.firstName} ${addressInfo.lastName}`}
+        </Typography>
+        <Typography variant="body1">{addressInfo.company || ''}</Typography>
+        <Typography variant="body1">{addressInfo.addressLine1}</Typography>
+        <Typography variant="body1">{addressInfo.addressLine2}</Typography>
+        <Typography variant="body1">
+          {`${addressInfo.city}, ${addressInfo.state} ${addressInfo.zipCode}, ${addressInfo.country}`}
+        </Typography>
+        <Typography variant="body1">{addressInfo.phoneNumber}</Typography>
+
+        <Flex>
+          <Button
+            variant="text"
+            sx={{
+              padding: 0,
+            }}
+            onClick={() => { onSetAddress(addressInfo) }}
+          >
+            Set as default
+          </Button>
+        </Flex>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/storefront/src/pages/quote/components/ChooseAddress.tsx b/apps/storefront/src/pages/quote/components/ChooseAddress.tsx
new file mode 100644
index 00000000..10d41e8e
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/ChooseAddress.tsx
@@ -0,0 +1,132 @@
+import {
+  Box, Grid,
+} from '@mui/material'
+import {
+  useState,
+  useEffect,
+  useRef,
+} from 'react'
+
+import {
+  B3Dialog,
+} from '@/components'
+
+import {
+  AddressItemType,
+} from '@/types/address'
+
+import B3FilterSearch from '../../../components/filter/B3FilterSearch'
+
+import {
+  AddressItemCard,
+} from './AddressItemCard'
+
+type AddressItemProps = {
+  node: AddressItemType
+}
+
+interface ChooseAddressProps {
+  isOpen: boolean,
+  addressList: AddressItemProps[]
+  closeModal: () => void
+  handleChangeAddress: (address: AddressItemType) => void
+}
+
+interface RefProps {
+  copyList: AddressItemType[],
+}
+
+const ChooseAddress = ({
+  isOpen,
+  closeModal,
+  handleChangeAddress,
+  addressList = [],
+}: ChooseAddressProps) => {
+  const recordList = useRef<RefProps>({
+    copyList: [],
+  })
+
+  const [list, setList] = useState<AddressItemType[]>([])
+
+  useEffect(() => {
+    if (addressList.length) {
+      const newList = addressList.map((item: AddressItemProps) => item.node)
+      recordList.current.copyList = newList
+      setList(newList)
+    }
+  }, [addressList])
+
+  const keys = ['address', 'firstName', 'lastName', 'phoneNumber', 'state', 'zipCode', 'country', 'label', 'address', 'addressLine1']
+
+  const handleSearchProduct = (q: string) => {
+    if (!q && recordList?.current) {
+      setList(recordList.current.copyList)
+      return
+    }
+    const newList: AddressItemType[] = []
+    keys.forEach((key: string) => {
+      let flag = true
+      list.forEach((item: AddressItemType) => {
+        if (item[key].includes(q) && flag) {
+          newList.push(item)
+          flag = false
+        }
+      })
+    })
+    setList(newList)
+  }
+
+  const handleCancelClicked = () => {
+    closeModal()
+  }
+
+  return (
+    <B3Dialog
+      fullWidth
+      isOpen={isOpen}
+      handleLeftClick={handleCancelClicked}
+      title="Choose from saved"
+      showRightBtn={false}
+      maxWidth="lg"
+    >
+      <Box>
+        <B3FilterSearch
+          searchBGColor="rgba(0, 0, 0, 0.06)"
+          handleChange={(e) => {
+            handleSearchProduct(e)
+          }}
+        />
+      </Box>
+      <Box
+        sx={{
+          mt: '20px',
+        }}
+      >
+        <Grid
+          container
+          spacing={2}
+        >
+          {
+            list.map((addressItem: AddressItemType) => (
+              <Grid
+                item
+                key={addressItem.id}
+                xs={4}
+              >
+                <AddressItemCard
+                  item={addressItem}
+                  onSetAddress={handleChangeAddress}
+                />
+              </Grid>
+            ))
+          }
+        </Grid>
+      </Box>
+
+    </B3Dialog>
+  )
+}
+
+export {
+  ChooseAddress,
+}
diff --git a/apps/storefront/src/pages/quote/components/ContactInfo.tsx b/apps/storefront/src/pages/quote/components/ContactInfo.tsx
new file mode 100644
index 00000000..722c8fd2
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/ContactInfo.tsx
@@ -0,0 +1,136 @@
+import {
+  useForm,
+} from 'react-hook-form'
+import {
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+} from 'react'
+import {
+  Box,
+} from '@mui/material'
+import {
+  B3CustomForm,
+} from '@/components'
+
+import {
+  useMobile,
+} from '@/hooks'
+
+// import {
+//   CustomerInfo,
+// } from '@/shared/global/context/config'
+
+const getContactInfo = (isMobile: boolean) => {
+  const contactInfo = [
+    {
+      name: 'name',
+      label: 'Contact person',
+      required: true,
+      default: '',
+      fieldType: 'text',
+      xs: isMobile ? 12 : 6,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'email',
+      label: 'Email',
+      required: true,
+      default: '',
+      fieldType: 'text',
+      xs: isMobile ? 12 : 6,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'phoneNumber',
+      label: 'Phone',
+      required: true,
+      default: '',
+      fieldType: 'text',
+      xs: isMobile ? 12 : 6,
+      variant: 'filled',
+      size: 'small',
+    },
+  ]
+
+  return contactInfo
+}
+
+interface ContactInfoProps {
+  info: {
+    [key: string]: string,
+  },
+  // role: string | number,
+  // customerInfo: CustomerInfo
+}
+
+const ContactInfo = ({
+  info = {},
+  // role,
+  // customerInfo,
+}: ContactInfoProps, ref: any) => {
+  const {
+    control,
+    getValues,
+    formState: {
+      errors,
+    },
+    setValue,
+    handleSubmit,
+  } = useForm({
+    mode: 'onSubmit',
+  })
+
+  const [isMobile] = useMobile()
+
+  useEffect(() => {
+    if (info && JSON.stringify(info) !== '{}') {
+      Object.keys(info).forEach((item: string) => {
+        setValue(item, info[item])
+      })
+    }
+  }, [info])
+
+  const getContactInfoValue = () => {
+    handleSubmit(async (data) => data)()
+    return getValues()
+  }
+
+  useImperativeHandle(ref, () => ({
+    getContactInfoValue,
+  }))
+
+  const contactInfo = getContactInfo(isMobile)
+
+  return (
+    <Box
+      width="100%"
+    >
+      <Box
+        sx={{
+          fontWeight: 400,
+          fontSize: '24px',
+          height: '32px',
+          mb: '20px',
+        }}
+      >
+        Contact
+
+      </Box>
+
+      <B3CustomForm
+        formFields={contactInfo}
+        errors={errors}
+        control={control}
+        getValues={getValues}
+        setValue={setValue}
+      />
+
+    </Box>
+
+  )
+}
+
+export default forwardRef(ContactInfo)
diff --git a/apps/storefront/src/pages/quote/components/QuoteAddress.tsx b/apps/storefront/src/pages/quote/components/QuoteAddress.tsx
new file mode 100644
index 00000000..99c2df73
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteAddress.tsx
@@ -0,0 +1,227 @@
+import {
+  useForm,
+} from 'react-hook-form'
+import {
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  useEffect,
+} from 'react'
+import {
+  Box, Typography,
+} from '@mui/material'
+import {
+  cloneDeep,
+} from 'lodash'
+import {
+  B3CustomForm,
+} from '@/components'
+
+import {
+  useGetCountry,
+  useMobile,
+} from '@/hooks'
+
+import {
+  AddressItemType,
+} from '@/types/address'
+
+import {
+  ChooseAddress,
+} from './ChooseAddress'
+
+type AddressItemProps = {
+  node: AddressItemType
+}
+
+interface AccountFormFieldsProps extends Record<string, any> {
+  name: string,
+  label?: string,
+  required?: Boolean,
+  fieldType?: string,
+  default?: string | Array<any> | number,
+  xs: number,
+  variant: string,
+  size: string,
+  options?: any[],
+}
+
+interface AddressProps {
+  title: string
+  pr?: string | number
+  pl?: string | number
+  addressList?: AddressItemProps[]
+  info: {
+    [key: string]: string,
+  }
+  role: string | number,
+  accountFormFields: AccountFormFieldsProps[]
+}
+
+export interface FormFieldsProps extends Record<string, any> {
+  name: string,
+  label?: string,
+  required?: Boolean,
+  fieldType?: string,
+  default?: string | Array<any> | number,
+  xs: number,
+  variant: string,
+  size: string,
+  options?: any[],
+  replaceOptions?: {
+    label: string,
+    value: string,
+  }
+}
+
+export interface Country {
+  countryCode: string,
+  countryName: string,
+  id?: string,
+  states: []
+}
+export interface State {
+  stateCode?: string,
+  stateName?: string,
+  id?: string,
+}
+
+const QuoteAddress = ({
+  title,
+  addressList = [],
+  pr = 0,
+  pl = 0,
+  info = {},
+  role,
+  accountFormFields = [],
+}: AddressProps, ref: any) => {
+  const {
+    control,
+    getValues,
+    formState: {
+      errors,
+    },
+    setValue,
+  } = useForm({
+    mode: 'onSubmit',
+  })
+
+  const [isMobile] = useMobile()
+
+  const [isOpen, setOpen] = useState<boolean>(false)
+  const [quoteAddress, setQuoteAddress] = useState<AccountFormFieldsProps[]>(cloneDeep(accountFormFields))
+
+  useGetCountry({
+    control,
+    setAddress: setQuoteAddress,
+    addresses: quoteAddress,
+  })
+
+  const getContactInfoValue = () => getValues()
+
+  useImperativeHandle(ref, () => ({
+    getContactInfoValue,
+  }))
+
+  const handleAddressChoose = () => {
+    setOpen(true)
+  }
+
+  const handleCloseAddressChoose = () => {
+    setOpen(false)
+  }
+
+  const handleChangeAddress = (address: AddressItemType) => {
+    const addressItem: any = {
+      label: address?.label || '',
+      firstName: address?.firstName || '',
+      lastName: address?.lastName || '',
+      company: address?.company || '',
+      country: address?.countryCode || '',
+      address: address?.addressLine1 || '',
+      apartment: address?.addressLine2 || '',
+      city: address?.city || '',
+      state: address?.state || '',
+      zipCode: address?.zipCode || '',
+      phoneNumber: address?.phoneNumber || '',
+    }
+
+    Object.keys(addressItem).forEach((item: string) => {
+      setValue(item, addressItem[item])
+    })
+
+    handleCloseAddressChoose()
+  }
+
+  useEffect(() => {
+    if (JSON.stringify(info) !== '{}') {
+      Object.keys(info).forEach((item: string) => {
+        setValue(item, info[item])
+      })
+    }
+  }, [info, quoteAddress])
+
+  return (
+    <Box
+      width={isMobile ? '100%' : '50%'}
+      mt={isMobile ? '2rem' : '0'}
+      pr={pr}
+      pl={pl}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          mb: '20px',
+        }}
+      >
+        <Typography
+          sx={{
+            fontWeight: 400,
+            fontSize: '24px',
+            height: '32px',
+            mr: '16px',
+          }}
+        >
+          {title}
+        </Typography>
+        {
+          +role !== 100 && (
+          <Typography
+            onClick={handleAddressChoose}
+            sx={{
+              fontWeight: 500,
+              fontSize: '14px',
+              color: '#1976D2',
+              display: 'flex',
+              alignItems: 'flex-end',
+              cursor: 'pointer',
+            }}
+          >
+            Choose from saved
+          </Typography>
+          )
+        }
+
+      </Box>
+
+      <B3CustomForm
+        formFields={quoteAddress}
+        errors={errors}
+        control={control}
+        getValues={getValues}
+        setValue={setValue}
+      />
+
+      <ChooseAddress
+        isOpen={isOpen}
+        handleChangeAddress={handleChangeAddress}
+        closeModal={handleCloseAddressChoose}
+        addressList={addressList}
+      />
+
+    </Box>
+
+  )
+}
+
+export default forwardRef(QuoteAddress)
diff --git a/apps/storefront/src/pages/quote/components/QuoteAttachment.tsx b/apps/storefront/src/pages/quote/components/QuoteAttachment.tsx
new file mode 100644
index 00000000..9bb27814
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteAttachment.tsx
@@ -0,0 +1,56 @@
+import {
+  Card,
+  CardContent,
+  Box,
+} from '@mui/material'
+
+import {
+  useState,
+  useEffect,
+} from 'react'
+
+import {
+  B3CollapseContainer,
+} from '@/components'
+
+import {
+  B3LStorage,
+} from '@/utils'
+
+export const QuoteAttachment = () => {
+  const [fileInfo, setFileInfo] = useState('')
+
+  useEffect(() => {
+    // const {
+    //   fileInfo = '',
+    // } = B3LStorage.get('MyQuoteInfo') || {}
+
+    setFileInfo('file')
+  }, [])
+
+  useEffect(() => {
+    const quoteInfo = B3LStorage.get('MyQuoteInfo')
+
+    if (quoteInfo) {
+      B3LStorage.set('MyQuoteInfo', {
+        ...quoteInfo,
+        fileInfo,
+      })
+    }
+  }, [fileInfo])
+
+  return (
+    <Card>
+      <CardContent>
+        <B3CollapseContainer title="Attachment">
+          <Box sx={{
+            padding: '16px 0',
+          }}
+          >
+            {fileInfo}
+          </Box>
+        </B3CollapseContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailFooter.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailFooter.tsx
new file mode 100644
index 00000000..f6abebe5
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteDetailFooter.tsx
@@ -0,0 +1,69 @@
+import {
+  useNavigate,
+} from 'react-router-dom'
+import {
+  Box,
+  Button,
+} from '@mui/material'
+
+import {
+  useMobile,
+} from '@/hooks'
+
+interface QuoteDetailFooterProps {
+  quoteId: string,
+  quoteDate: string,
+}
+
+const QuoteDetailFooter = (props: QuoteDetailFooterProps) => {
+  const {
+    quoteId,
+    quoteDate,
+  } = props
+  const [isMobile] = useMobile()
+  const navigate = useNavigate()
+
+  const containerStyle = isMobile ? {
+    alignItems: 'flex-end',
+    flexDirection: 'column',
+  } : {
+    alignItems: 'center',
+  }
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        backgroundColor: '#fff',
+        width: '100%',
+        padding: '0.8rem 1rem',
+        height: 'auto',
+        display: 'flex',
+        zIndex: '10',
+        justifyContent: isMobile ? 'center' : 'flex-end',
+        displayPrint: 'none',
+        ...containerStyle,
+      }}
+    >
+      <Button
+        variant="contained"
+        onClick={() => {
+          navigate('/checkout')
+          localStorage.setItem('quoteCheckoutId', quoteId)
+          localStorage.setItem('quoteDate', quoteDate)
+          console.log('proceed to checkout')
+        }}
+        sx={{
+          width: isMobile ? '100%' : 'auto',
+        }}
+      >
+        Proceed to checkout
+      </Button>
+    </Box>
+
+  )
+}
+
+export default QuoteDetailFooter
diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailHeader.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailHeader.tsx
new file mode 100644
index 00000000..9f4c1d0f
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteDetailHeader.tsx
@@ -0,0 +1,200 @@
+import {
+  useNavigate,
+} from 'react-router-dom'
+import {
+  format,
+} from 'date-fns'
+
+import {
+  Box,
+  Grid,
+  styled,
+  Typography,
+  Button,
+} from '@mui/material'
+
+import {
+  ArrowBackIosNew,
+} from '@mui/icons-material'
+
+import {
+  QuoteStatus,
+} from './QuoteStatus'
+
+import {
+  useMobile,
+} from '@/hooks'
+
+const StyledCreateName = styled('div')(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: '0.5rem',
+}))
+
+interface QuoteDetailHeaderProps {
+  status: string,
+  quoteNumber: string,
+  issuedAt: number,
+  expirationDate: number,
+  exportPdf: () => void,
+  role: number | string,
+}
+
+const QuoteDetailHeader = (props: QuoteDetailHeaderProps) => {
+  const [isMobile] = useMobile()
+
+  const {
+    status,
+    quoteNumber,
+    issuedAt,
+    expirationDate,
+    exportPdf,
+    role,
+  } = props
+
+  const navigate = useNavigate()
+  const gridOptions = (xs: number) => (isMobile ? {} : {
+    xs,
+  })
+
+  const printQuote = () => {
+    const iframe = document.querySelector('iframe')
+
+    if (iframe) {
+      iframe?.contentWindow?.print()
+    }
+  }
+
+  return (
+    <>
+      {
+        +role !== 100 && (
+          <Box
+            sx={{
+              marginBottom: '10px',
+              width: 'fit-content',
+              displayPrint: 'none',
+            }}
+          >
+            <Box
+              sx={{
+                color: '#1976d2',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+              onClick={() => {
+                navigate('/quotes')
+              }}
+            >
+              <ArrowBackIosNew
+                fontSize="small"
+                sx={{
+                  fontSize: '12px',
+                  marginRight: '0.5rem',
+                }}
+              />
+              <p>Back to quote lists</p>
+            </Box>
+          </Box>
+        )
+      }
+
+      <Grid
+        container
+        spacing={2}
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexDirection: `${isMobile ? 'column' : 'row'}`,
+          mb: `${isMobile ? '16px' : ''}`,
+        }}
+      >
+        <Grid
+          item
+          {...gridOptions(8)}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: `${isMobile ? 'start' : 'center'}`,
+              flexDirection: `${isMobile ? 'column' : 'row'}`,
+            }}
+          >
+            <Typography
+              sx={{
+                marginRight: '10px',
+                fontSize: '34px',
+                color: '#263238',
+              }}
+            >
+              {`Quote #${quoteNumber || ''}`}
+            </Typography>
+
+            <QuoteStatus code={status} />
+          </Box>
+          <Box>
+            <StyledCreateName>
+              <Typography
+                variant="subtitle2"
+                sx={{
+                  marginRight: '0.5rem',
+                  fontSize: '16px',
+                }}
+              >
+                Issued on:
+              </Typography>
+              <span>{`${issuedAt ? format(+issuedAt * 1000, 'dd MMM yy') : ''}`}</span>
+            </StyledCreateName>
+            <StyledCreateName>
+              <Typography
+                variant="subtitle2"
+                sx={{
+                  marginRight: '0.5rem',
+                  fontSize: '16px',
+                }}
+              >
+                Expiration date:
+              </Typography>
+              <span>{`${expirationDate ? format(+expirationDate * 1000, 'dd MMM yy') : ''}`}</span>
+            </StyledCreateName>
+          </Box>
+        </Grid>
+        {
+          +role !== 100 && (
+            <Grid
+              item
+              sx={{
+                textAlign: `${isMobile ? 'none' : 'end'}`,
+                displayPrint: 'none',
+              }}
+              {...gridOptions(4)}
+            >
+              <Box>
+                <Button
+                  variant="outlined"
+                  sx={{
+                    marginRight: '1rem',
+                    displayPrint: 'none',
+                  }}
+                  onClick={printQuote}
+                >
+                  Print
+                </Button>
+                <Button
+                  variant="outlined"
+                  onClick={exportPdf}
+                >
+                  DownLoad pdf
+                </Button>
+              </Box>
+            </Grid>
+          )
+        }
+
+      </Grid>
+    </>
+  )
+}
+
+export default QuoteDetailHeader
diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailSummary.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailSummary.tsx
new file mode 100644
index 00000000..bcc85d52
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteDetailSummary.tsx
@@ -0,0 +1,145 @@
+import {
+  Box,
+  Typography,
+  Card,
+  CardContent,
+  Grid,
+} from '@mui/material'
+
+interface Summary {
+  originalSubtotal: string | number,
+  discount: string | number,
+  tax: string | number,
+  shipping: string | number,
+  grandTotal: string | number,
+}
+
+interface Currency {
+  token: string,
+}
+
+interface QuoteDetailSummaryProps {
+  quoteSummary: Summary,
+  currency: Currency
+}
+
+export const QuoteDetailSummary = (props: QuoteDetailSummaryProps) => {
+  const {
+    quoteSummary: {
+      originalSubtotal,
+      discount,
+      tax,
+      shipping,
+      grandTotal,
+    },
+    currency,
+  } = props
+
+  const priceFormat = (price: number) => `${currency?.token || '$'} ${price.toFixed(2)}`
+  const quotedSubtotal = +originalSubtotal - +discount
+
+  return (
+    <Card>
+      <CardContent>
+        <Box>
+          <Typography variant="h5">Quote summary</Typography>
+          <Box sx={{
+            marginTop: '20px',
+            color: '#212121',
+          }}
+          >
+            <Grid
+              container
+              justifyContent="space-between"
+              sx={{
+                margin: '4px 0',
+              }}
+            >
+              <Typography>Original subtotal</Typography>
+              <Typography>{priceFormat(+originalSubtotal)}</Typography>
+            </Grid>
+            <Grid
+              container
+              justifyContent="space-between"
+              sx={{
+                margin: '4px 0',
+              }}
+            >
+              <Typography>Discount amount</Typography>
+              <Typography>{`-${priceFormat(+discount)}`}</Typography>
+            </Grid>
+            <Grid
+              container
+              justifyContent="space-between"
+              sx={{
+                margin: '4px 0',
+              }}
+            >
+              <Typography
+                sx={{
+                  fontWeight: 'bold',
+                  color: '#212121',
+                }}
+              >
+                Quoted subtotal
+              </Typography>
+              <Typography
+                sx={{
+                  fontWeight: 'bold',
+                  color: '#212121',
+                }}
+              >
+                {priceFormat(+quotedSubtotal)}
+              </Typography>
+            </Grid>
+
+            <Grid
+              container
+              justifyContent="space-between"
+              sx={{
+                margin: '4px 0',
+              }}
+            >
+              <Typography>Shipping</Typography>
+              <Typography>{priceFormat(+shipping)}</Typography>
+            </Grid>
+
+            <Grid
+              container
+              justifyContent="space-between"
+              sx={{
+                margin: '4px 0',
+              }}
+            >
+              <Typography>Tax</Typography>
+              <Typography>{priceFormat(+tax)}</Typography>
+            </Grid>
+
+            <Grid
+              container
+              justifyContent="space-between"
+              sx={{
+                margin: '24px 0 0',
+              }}
+            >
+              <Typography sx={{
+                fontWeight: 'bold',
+                color: '#212121',
+              }}
+              >
+                Grand total
+              </Typography>
+              <Typography sx={{
+                fontWeight: 'bold',
+                color: '#212121',
+              }}
+              >
+                {priceFormat(+grandTotal)}
+              </Typography>
+            </Grid>
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailTable.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailTable.tsx
new file mode 100644
index 00000000..ca13c1e0
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteDetailTable.tsx
@@ -0,0 +1,287 @@
+import {
+  useState,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+  Ref,
+} from 'react'
+
+import {
+  Box,
+  styled,
+  Typography,
+} from '@mui/material'
+
+import {
+  TableColumnItem,
+} from '@/components/table/B3Table'
+
+import {
+  B3PaginationTable,
+} from '@/components/table/B3PaginationTable'
+
+import QuoteDetailTableCard from './QuoteDetailTableCard'
+
+interface ListItem {
+  [key: string]: string
+}
+
+interface ProductInfoProps {
+  basePrice: number | string,
+  baseSku: string,
+  createdAt: number,
+  discount: number | string,
+  enteredInclusive: boolean,
+  id: number | string,
+  itemId: number,
+  optionList: string,
+  primaryImage: string,
+  productId: number,
+  productName: string,
+  productUrl: string,
+  quantity: number | string,
+  tax: number | string,
+  updatedAt: number,
+  variantId: number,
+  variantSku: string,
+  productsSearch: CustomFieldItems,
+}
+
+interface ListItemProps {
+  node: ProductInfoProps,
+}
+
+interface ShoppingDetailTableProps {
+  total: number,
+  currencyToken?: string,
+  getQuoteTableDetails: any,
+}
+
+interface SearchProps {
+  first?: number,
+  offset?: number,
+}
+
+interface PaginationTableRefProps extends HTMLInputElement {
+  getList: () => void,
+  setList: (items?: ListItemProps[]) => void,
+  getSelectedValue: () => void,
+}
+
+const StyledQuoteTableContainer = styled('div')(() => ({
+  backgroundColor: '#FFFFFF',
+  padding: '0.5rem',
+  width: '100%',
+
+  '& tbody': {
+    '& tr': {
+      '& td': {
+        verticalAlign: 'top',
+      },
+      '& td: first-of-type': {
+        verticalAlign: 'inherit',
+      },
+    },
+    '& tr: hover': {
+      '& #shoppingList-actionList': {
+        opacity: 1,
+      },
+    },
+  },
+}))
+
+const StyledImage = styled('img')(() => ({
+  maxWidth: '60px',
+  height: 'auto',
+  marginRight: '0.5rem',
+}))
+
+const defaultProductImage = 'https://cdn11.bigcommerce.com/s-1i6zpxpe3g/stencil/cd9e3830-4c73-0139-8a51-0242ac11000a/e/4fe76590-73f1-0139-3767-32e4ea84ca1d/img/ProductDefault.gif'
+
+const QuoteDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>) => {
+  const {
+    total,
+    currencyToken,
+    getQuoteTableDetails,
+  } = props
+
+  const paginationTableRef = useRef<PaginationTableRefProps | null>(null)
+
+  const [search, setSearch] = useState<SearchProps>({
+    first: 12,
+    offset: 0,
+  })
+
+  useImperativeHandle(ref, () => ({
+    getList: () => paginationTableRef.current?.getList(),
+    refreshList: () => {
+      setSearch({
+        offset: 0,
+      })
+    },
+  }))
+
+  const columnItems: TableColumnItem<ListItem>[] = [
+    {
+      key: 'Product',
+      title: 'Product',
+      render: (row: CustomFieldItems) => {
+        const optionsValue = row.options
+
+        return (
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'flex-start',
+            }}
+          >
+            <StyledImage
+              src={row.imageUrl || defaultProductImage}
+              alt="Product-img"
+              loading="lazy"
+            />
+            <Box>
+              <Typography
+                variant="body1"
+                color="#212121"
+              >
+                {row.productName}
+              </Typography>
+              <Typography
+                variant="body1"
+                color="#616161"
+              >
+                {row.sku}
+              </Typography>
+              {
+                optionsValue.length > 0 && (
+                  <Box>
+                    {
+                      optionsValue.map((option: any) => (
+                        <Typography
+                          sx={{
+                            fontSize: '0.75rem',
+                            lineHeight: '1.5',
+                            color: '#455A64',
+                          }}
+                          key={`${option.optionName}_keyName`}
+                        >
+                          {`${option.optionName
+                          }: ${option.optionLabel
+                          }`}
+                        </Typography>
+                      ))
+                    }
+                  </Box>
+                )
+              }
+            </Box>
+          </Box>
+        )
+      },
+      width: '40%',
+    },
+    {
+      key: 'Price',
+      title: 'Price',
+      render: (row) => {
+        const price = +row.basePrice
+
+        return (
+          <Typography
+            sx={{
+              padding: '12px 0',
+            }}
+          >
+            {`${currencyToken}${price.toFixed(2)}`}
+          </Typography>
+        )
+      },
+      width: '15%',
+    },
+    {
+      key: 'Qty',
+      title: 'Qty',
+      render: (row) => (
+        <Typography
+          sx={{
+            padding: '12px 0',
+          }}
+        >
+          {row.quantity}
+        </Typography>
+      ),
+      width: '15%',
+    },
+    {
+      key: 'Total',
+      title: 'Total',
+      render: (row: CustomFieldItems) => {
+        const {
+          basePrice,
+          quantity,
+        } = row
+        const total = +basePrice * +quantity
+
+        return (
+          <Box>
+            <Typography
+              sx={{
+                padding: '12px 0',
+              }}
+            >
+              {`${currencyToken}${total.toFixed(2)}`}
+            </Typography>
+          </Box>
+        )
+      },
+      width: '20%',
+    },
+  ]
+
+  return (
+    <StyledQuoteTableContainer>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          margin: '0.5rem 0 1rem 0',
+        }}
+      >
+        <Typography
+          sx={{
+            fontSize: '24px',
+          }}
+        >
+          {`${total || 0} products`}
+        </Typography>
+      </Box>
+
+      <B3PaginationTable
+        ref={paginationTableRef}
+        columnItems={columnItems}
+        rowsPerPageOptions={[12, 24, 36]}
+        getRequestList={getQuoteTableDetails}
+        isCustomRender={false}
+        hover
+        searchParams={search}
+        labelRowsPerPage="Per page:"
+        showBorder={false}
+        itemIsMobileSpacing={0}
+        noDataText="No products found"
+        tableKey="productId"
+        renderItem={(row: ProductInfoProps, index?: number) => (
+          <QuoteDetailTableCard
+            len={total || 0}
+            item={row}
+            itemIndex={index}
+            currencyToken={currencyToken || '$'}
+          />
+        )}
+      />
+    </StyledQuoteTableContainer>
+  )
+}
+
+export default forwardRef(QuoteDetailTable)
diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailTableCard.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailTableCard.tsx
new file mode 100644
index 00000000..2fc56582
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteDetailTableCard.tsx
@@ -0,0 +1,128 @@
+import {
+  Box,
+  CardContent,
+  Typography,
+  styled,
+} from '@mui/material'
+
+interface QuoteTableCardProps {
+  item: any,
+  currencyToken?: string,
+  len: number,
+  itemIndex?: number,
+}
+
+const StyledImage = styled('img')(() => ({
+  maxWidth: '60px',
+  height: 'auto',
+  marginRight: '0.5rem',
+}))
+
+const defaultProductImage = 'https://cdn11.bigcommerce.com/s-1i6zpxpe3g/stencil/cd9e3830-4c73-0139-8a51-0242ac11000a/e/4fe76590-73f1-0139-3767-32e4ea84ca1d/img/ProductDefault.gif'
+
+const QuoteDetailTableCard = (props: QuoteTableCardProps) => {
+  const {
+    item: quoteTableItem,
+    currencyToken = '$',
+    len,
+    itemIndex,
+  } = props
+
+  const {
+    basePrice,
+    quantity,
+    imageUrl,
+    productName,
+    options,
+    sku,
+  } = quoteTableItem
+
+  const total = +basePrice * +quantity
+  const price = +basePrice
+
+  return (
+    <Box
+      key={quoteTableItem.id}
+      width="100%"
+      sx={{
+        borderTop: '1px solid #D9DCE9',
+        borderBottom: itemIndex === len - 1 ? '1px solid #D9DCE9' : '',
+      }}
+    >
+      <CardContent
+        sx={{
+          color: '#313440',
+          display: 'flex',
+          pl: 0,
+        }}
+      >
+        <Box>
+          <StyledImage
+            src={imageUrl || defaultProductImage}
+            alt="Product-img"
+            loading="lazy"
+          />
+        </Box>
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        >
+          <Typography
+            variant="body1"
+            color="#212121"
+          >
+            {productName}
+          </Typography>
+          <Typography
+            variant="body1"
+            color="#616161"
+          >
+            {sku}
+          </Typography>
+          <Box
+            sx={{
+              margin: '1rem 0',
+            }}
+          >
+            {
+              (options.length > 0) && (
+                <Box>
+                  {
+                    options.map((option: any) => (
+                      <Typography
+                        sx={{
+                          fontSize: '0.75rem',
+                          lineHeight: '1.5',
+                          color: '#455A64',
+                        }}
+                        key={option.optionName}
+                      >
+                        {`${option.optionName
+                        }: ${option.optionLabel
+                        }`}
+                      </Typography>
+                    ))
+                  }
+                </Box>
+              )
+            }
+          </Box>
+
+          <Typography>{`Price: ${currencyToken}${price.toFixed(2)}`}</Typography>
+
+          <Typography
+            sx={{
+              padding: '12px 0',
+            }}
+          >
+            {`Qty: ${quantity}`}
+          </Typography>
+          <Typography>{`Total: ${currencyToken}${total.toFixed(2)}`}</Typography>
+        </Box>
+      </CardContent>
+    </Box>
+  )
+}
+
+export default QuoteDetailTableCard
diff --git a/apps/storefront/src/pages/quote/components/QuoteInfo.tsx b/apps/storefront/src/pages/quote/components/QuoteInfo.tsx
new file mode 100644
index 00000000..124e1809
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteInfo.tsx
@@ -0,0 +1,149 @@
+import {
+  Box,
+  Button,
+  Typography,
+} from '@mui/material'
+
+import {
+  useMobile,
+} from '@/hooks'
+
+import {
+  Container,
+} from '../style'
+
+interface GetValue {
+  [key: string]: string,
+}
+
+interface InfoProps {
+  contactInfo: GetValue,
+  shippingAddress: GetValue,
+  billingAddress: GetValue,
+  handleEditInfoClick?: () => void,
+}
+
+type Keys = string | string[]
+
+const contactInfoKeys: string[] = ['name', 'email', 'phoneNumber']
+
+const addressKeys: Keys[] = ['label', ['firstName', 'lastName'], 'company', 'addressLine1', 'addressLine2', ['city', 'state', 'zipCode', 'country'], 'phoneNumber']
+
+interface QuoteInfoItemProps {
+  flag?: string,
+  title: string,
+  info: GetValue,
+}
+
+const QuoteInfoItem = ({
+  flag,
+  title,
+  info,
+}: QuoteInfoItemProps) => {
+  const keyTable = flag === 'info' ? contactInfoKeys : addressKeys
+  return (
+    <Box>
+      <Typography
+        sx={{
+          fontWeight: 400,
+          fontSize: '24px',
+          height: '32px',
+        }}
+      >
+        {title}
+      </Typography>
+      <Box
+        sx={{
+          p: '15px 0',
+        }}
+      >
+        {
+            JSON.stringify(info) !== '{}' && keyTable.map((list: Keys) => {
+              if (typeof list === 'string') {
+                return (
+                  <Typography
+                    key={list}
+                    variant="body1"
+                  >
+                    {info[list] || ''}
+                  </Typography>
+                )
+              }
+
+              return (
+                <Typography
+                  key={`${list}`}
+                  variant="body1"
+                >
+                  {
+                    list.map((item: string, index: number) => {
+                      if (index === list.length - 1) {
+                        return info[item] || ''
+                      }
+                      if (item === 'firstName') return `${info[item] || ''} `
+                      return `${info[item] || ''}, `
+                    })
+                  }
+                </Typography>
+              )
+            })
+          }
+      </Box>
+    </Box>
+  )
+}
+
+const QuoteInfo = ({
+  contactInfo = {},
+  shippingAddress = {},
+  billingAddress = {},
+  handleEditInfoClick,
+}: InfoProps) => {
+  const [isMobile] = useMobile()
+  return (
+    <Container
+      flexDirection="column"
+    >
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexDirection: isMobile ? 'column' : 'row',
+        }}
+      >
+        <QuoteInfoItem
+          title="Contact"
+          flag="info"
+          info={contactInfo}
+        />
+
+        <QuoteInfoItem
+          title="Billing"
+          info={billingAddress}
+        />
+
+        <QuoteInfoItem
+          title="Shipping"
+          info={shippingAddress}
+        />
+      </Box>
+      {
+        handleEditInfoClick && (
+          <Button
+            sx={{
+              mt: '10px',
+              mb: '15px',
+            }}
+            onClick={handleEditInfoClick}
+            variant="outlined"
+          >
+            Edit info
+          </Button>
+        )
+      }
+    </Container>
+  )
+}
+
+export default QuoteInfo
diff --git a/apps/storefront/src/pages/quote/components/QuoteItemCard.tsx b/apps/storefront/src/pages/quote/components/QuoteItemCard.tsx
new file mode 100644
index 00000000..57c56196
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteItemCard.tsx
@@ -0,0 +1,162 @@
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+
+import styled from '@emotion/styled'
+
+import {
+  format,
+} from 'date-fns'
+import {
+  TableColumnItem,
+} from '@/components/table/B3Table'
+
+import {
+  QuoteStatus,
+} from './QuoteStatus'
+
+interface ListItem {
+  [key: string]: string | Object
+  status: string,
+  quoteNumber: string,
+  currency: {
+    token: string
+  }
+}
+
+export interface QuoteItemCardProps {
+  goToDetail: (val: ListItem) => void,
+  item: any,
+}
+
+const Flex = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+  marginBottom: '1rem',
+}))
+
+export const QuoteItemCard = (props: QuoteItemCardProps) => {
+  const {
+    item,
+    goToDetail,
+  } = props
+
+  const columnAllItems: TableColumnItem<ListItem>[] = [
+    {
+      key: 'quoteTitle',
+      title: 'Title',
+    },
+    {
+      key: 'salesRep',
+      title: 'Sales rep',
+    },
+    {
+      key: 'createdBy',
+      title: 'Created by',
+    },
+    {
+      key: 'createdAt',
+      title: 'Date created',
+      render: () => format(+item.createdAt * 1000, 'dd MMM yy'),
+    },
+    {
+      key: 'updatedAt',
+      title: 'Last update',
+      render: () => format(+item.updatedAt * 1000, 'dd MMM yy'),
+    },
+    {
+      key: 'expiredAt',
+      title: 'Expiration date',
+      render: () => format(+item.expiredAt * 1000, 'dd MMM yy'),
+    },
+    {
+      key: 'subtotal',
+      title: 'Subtotal',
+      render: () => {
+        const {
+          currency: {
+            token,
+          },
+          subtotal,
+        } = item
+
+        return (`${token}${subtotal}`)
+      },
+    },
+  ]
+
+  return (
+    <Card
+      key={item.orderId}
+    >
+      <CardContent
+        sx={{
+          color: 'rgba(0, 0, 0, 0.6)',
+        }}
+      >
+        <Flex>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              mb: '1rem',
+            }}
+          >
+            <Typography
+              variant="h6"
+              sx={{
+                color: 'rgba(0, 0, 0, 0.87)',
+              }}
+            >
+              {item.quoteNumber}
+            </Typography>
+          </Box>
+          <Box>
+            <QuoteStatus code={item.status} />
+          </Box>
+
+        </Flex>
+
+        {
+          columnAllItems.map((list: any) => (
+            <Box
+              sx={{
+                display: 'flex',
+              }}
+            >
+              <Typography
+                sx={{
+                  fontWeight: 'bold',
+                  color: 'rgba(0, 0, 0, 0.87)',
+                }}
+              >
+                {`${list.title}:`}
+              </Typography>
+              <Typography>
+                {list?.render ? list.render() : item[list.key]}
+              </Typography>
+            </Box>
+
+          ))
+        }
+
+        <Box
+          onClick={() => goToDetail(item)}
+          sx={{
+            mt: '1rem',
+            pl: 0,
+            color: '#1976D2',
+            cursor: 'pointer',
+            fontWeight: 'bold',
+            display: 'inline-block',
+          }}
+        >
+          VIEW
+        </Box>
+
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/storefront/src/pages/quote/components/QuoteNote.tsx b/apps/storefront/src/pages/quote/components/QuoteNote.tsx
new file mode 100644
index 00000000..24ada5a4
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteNote.tsx
@@ -0,0 +1,66 @@
+import {
+  Card,
+  CardContent,
+  TextField,
+  Box,
+} from '@mui/material'
+
+import {
+  useState,
+  ChangeEvent,
+  useEffect,
+} from 'react'
+
+import {
+  B3CollapseContainer,
+} from '@/components'
+
+import {
+  B3LStorage,
+} from '@/utils'
+
+export const QuoteNote = () => {
+  const [noteText, setNoteText] = useState('')
+
+  const handleNoteTextChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setNoteText(event?.target.value || '')
+  }
+
+  useEffect(() => {
+    const {
+      note = '',
+    } = B3LStorage.get('MyQuoteInfo') || {}
+
+    setNoteText(note)
+  }, [])
+
+  useEffect(() => {
+    const quoteInfo = B3LStorage.get('MyQuoteInfo') || {}
+
+    B3LStorage.set('MyQuoteInfo', {
+      ...quoteInfo,
+      note: noteText,
+    })
+  }, [noteText])
+
+  return (
+    <Card>
+      <CardContent>
+        <B3CollapseContainer title="Note">
+          <Box sx={{
+            padding: '16px 0',
+          }}
+          >
+            <TextField
+              multiline
+              fullWidth
+              rows={5}
+              value={noteText}
+              onChange={handleNoteTextChange}
+            />
+          </Box>
+        </B3CollapseContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/storefront/src/pages/quote/components/QuoteStatus.tsx b/apps/storefront/src/pages/quote/components/QuoteStatus.tsx
new file mode 100644
index 00000000..f38658af
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteStatus.tsx
@@ -0,0 +1,61 @@
+import {
+  B3Tag,
+} from '@/components/B3Tag'
+
+interface OrderStatusProps {
+  code: string,
+}
+
+interface QuoteStatussProps {
+  [key: string]: {
+    [key: string]: string
+  }
+}
+
+export const QuoteStatus = (props: OrderStatusProps) => {
+  const {
+    code,
+  } = props
+
+  const getOrderStatus = (code: string) => {
+    const quoteStatus: QuoteStatussProps = {
+      0: {
+        textColor: 'rgba(0, 0, 0, 0.87)',
+        name: 'Draft',
+        color: '#D8D6D1',
+      },
+      1: {
+        textColor: 'rgba(0, 0, 0, 0.87)',
+        name: 'Open',
+        color: '#F1C224',
+      },
+      4: {
+        textColor: 'rgba(0, 0, 0, 0.87)',
+        name: 'Ordered',
+        color: '#C4DD6C',
+      },
+      5: {
+        textColor: '#fff',
+        name: 'Expired',
+        color: '#BD3E1E',
+      },
+    }
+
+    const statusInfo = quoteStatus[code] || {}
+
+    return statusInfo
+  }
+
+  const status = getOrderStatus(code)
+
+  return (
+    status.name ? (
+      <B3Tag
+        color={status.color}
+        textColor={status.textColor}
+      >
+        {status.name}
+      </B3Tag>
+    ) : <></>
+  )
+}
diff --git a/apps/storefront/src/pages/quote/components/QuoteSummary.tsx b/apps/storefront/src/pages/quote/components/QuoteSummary.tsx
new file mode 100644
index 00000000..f5fdd566
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteSummary.tsx
@@ -0,0 +1,168 @@
+import {
+  Box,
+  Typography,
+  Card,
+  CardContent,
+  Grid,
+} from '@mui/material'
+
+import {
+  useState,
+  useEffect,
+} from 'react'
+
+import {
+  B3LStorage,
+} from '@/utils'
+
+interface QuoteSummaryProps {
+  isRefresh: boolean,
+  currencyToken?: string,
+}
+
+interface Summary {
+  subtotal: number,
+  shipping: number,
+  tax: number,
+  grandTotal: number,
+}
+
+const defaultSummary: Summary = {
+  subtotal: 0,
+  shipping: 0,
+  tax: 0,
+  grandTotal: 0,
+}
+
+export const QuoteSummary = (props: QuoteSummaryProps) => {
+  const {
+    isRefresh,
+    currencyToken = '$',
+  } = props
+
+  const [quoteSummary, setQuoteSummary] = useState<Summary>({
+    ...defaultSummary,
+  })
+
+  const priceCalc = (price: number) => parseFloat(price.toFixed(2))
+
+  const getSummary = () => {
+    const productList = B3LStorage.get('b2bQuoteDraftList') || []
+
+    const newQuoteSummary = productList.reduce((summary: Summary, product: CustomFieldItems) => {
+      const {
+        basePrice,
+        tax: productTax,
+        quantity,
+      } = product.node
+
+      let {
+        subtotal,
+        grandTotal,
+        tax,
+      } = summary
+
+      const {
+        shipping,
+
+      } = summary
+
+      subtotal += priceCalc(basePrice * quantity)
+      tax += priceCalc(productTax * quantity)
+
+      grandTotal = subtotal + shipping + tax
+
+      return {
+        grandTotal,
+        shipping,
+        tax,
+        subtotal,
+      }
+    }, {
+      ...defaultSummary,
+    })
+
+    setQuoteSummary(newQuoteSummary)
+  }
+
+  useEffect(() => {
+    getSummary()
+  }, [])
+
+  useEffect(() => {
+    if (isRefresh) {
+      getSummary()
+    }
+  }, [isRefresh])
+
+  const priceFormat = (price: number) => `${currencyToken} ${price.toFixed(2)}`
+
+  return (
+    <Card>
+      <CardContent>
+        <Box>
+          <Typography variant="h5">Quote summary</Typography>
+          <Box sx={{
+            marginTop: '20px',
+            color: '#212121',
+          }}
+          >
+            <Grid
+              container
+              justifyContent="space-between"
+              sx={{
+                margin: '4px 0',
+              }}
+            >
+              <Typography>Sub total</Typography>
+              <Typography>{priceFormat(quoteSummary.subtotal)}</Typography>
+            </Grid>
+
+            <Grid
+              container
+              justifyContent="space-between"
+              sx={{
+                margin: '4px 0',
+              }}
+            >
+              <Typography>Shipping</Typography>
+              <Typography>{priceFormat(quoteSummary.shipping)}</Typography>
+            </Grid>
+
+            <Grid
+              container
+              justifyContent="space-between"
+              sx={{
+                margin: '4px 0',
+              }}
+            >
+              <Typography>Tax</Typography>
+              <Typography>{priceFormat(quoteSummary.tax)}</Typography>
+            </Grid>
+
+            <Grid
+              container
+              justifyContent="space-between"
+              sx={{
+                margin: '24px 0 0',
+              }}
+            >
+              <Typography sx={{
+                fontWeight: 'bold',
+              }}
+              >
+                Grand total
+              </Typography>
+              <Typography sx={{
+                fontWeight: 'bold',
+              }}
+              >
+                {priceFormat(quoteSummary.grandTotal)}
+              </Typography>
+            </Grid>
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/storefront/src/pages/quote/components/QuoteTable.tsx b/apps/storefront/src/pages/quote/components/QuoteTable.tsx
new file mode 100644
index 00000000..4aed88fc
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteTable.tsx
@@ -0,0 +1,499 @@
+import {
+  useState,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+  Ref,
+} from 'react'
+
+import {
+  Box,
+  styled,
+  Typography,
+  TextField,
+} from '@mui/material'
+
+import {
+  Delete,
+  Edit,
+} from '@mui/icons-material'
+
+import {
+  B3LStorage,
+
+  snackbar,
+} from '@/utils'
+
+import {
+  TableColumnItem,
+} from '@/components/table/B3Table'
+
+import {
+  B3PaginationTable,
+} from '@/components/table/B3PaginationTable'
+
+import {
+  useMobile,
+} from '@/hooks'
+
+import QuoteTableCard from './QuoteTableCard'
+
+import {
+  ChooseOptionsDialog,
+} from '../../shoppingListDetails/components/ChooseOptionsDialog'
+
+import {
+  getProductOptionsFields,
+} from '../../shoppingListDetails/shared/config'
+
+interface ListItem {
+  [key: string]: string
+}
+
+interface ProductInfoProps {
+  basePrice: number | string,
+  baseSku: string,
+  createdAt: number,
+  discount: number | string,
+  enteredInclusive: boolean,
+  id: number | string,
+  itemId: number,
+  optionList: string,
+  primaryImage: string,
+  productId: number,
+  productName: string,
+  productUrl: string,
+  quantity: number | string,
+  tax: number | string,
+  updatedAt: number,
+  variantId: number,
+  variantSku: string,
+  productsSearch: CustomFieldItems,
+}
+
+interface ListItemProps {
+  node: ProductInfoProps,
+}
+
+interface ShoppingDetailTableProps {
+  total: number,
+  currencyToken?: string,
+  getQuoteTableDetails: any,
+  idEdit?: boolean,
+}
+
+interface SearchProps {
+  first?: number,
+  offset?: number,
+}
+
+interface PaginationTableRefProps extends HTMLInputElement {
+  getList: () => void,
+  setList: (items?: ListItemProps[]) => void,
+  getSelectedValue: () => void,
+}
+
+const StyledQuoteTableContainer = styled('div')(() => ({
+  backgroundColor: '#FFFFFF',
+  padding: '0.5rem',
+  width: '100%',
+
+  '& tbody': {
+    '& tr': {
+      '& td': {
+        verticalAlign: 'top',
+      },
+      '& td: first-of-type': {
+        verticalAlign: 'inherit',
+      },
+    },
+    '& tr: hover': {
+      '& #shoppingList-actionList': {
+        opacity: 1,
+      },
+    },
+  },
+}))
+
+const StyledImage = styled('img')(() => ({
+  maxWidth: '60px',
+  height: 'auto',
+  marginRight: '0.5rem',
+}))
+
+const StyledTextField = styled(TextField)(() => ({
+  '& input': {
+    paddingTop: '12px',
+    paddingRight: '6px',
+  },
+}))
+
+const defaultProductImage = 'https://cdn11.bigcommerce.com/s-1i6zpxpe3g/stencil/cd9e3830-4c73-0139-8a51-0242ac11000a/e/4fe76590-73f1-0139-3767-32e4ea84ca1d/img/ProductDefault.gif'
+
+const QuoteTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>) => {
+  const [isMobile] = useMobile()
+
+  const {
+    total,
+    currencyToken,
+    getQuoteTableDetails,
+    idEdit = true,
+  } = props
+
+  const paginationTableRef = useRef<PaginationTableRefProps | null>(null)
+
+  const [isRequestLoading, setIsRequestLoading] = useState(false)
+  const [chooseOptionsOpen, setSelectedOptionsOpen] = useState(false)
+  const [optionsProduct, setOptionsProduct] = useState<any>(null)
+  const [optionsProductId, setOptionsProductId] = useState<number | string>('')
+  const [search, setSearch] = useState<SearchProps>({
+    first: 12,
+    offset: 0,
+  })
+
+  const handleUpdateProductQty = (id: number | string, value: number | string) => {
+    const listItems = paginationTableRef.current?.getList() || []
+    const newListItems = listItems?.map((item: ListItemProps) => {
+      const {
+        node,
+      } = item
+      if (node?.id === id) {
+        node.quantity = +value || ''
+      }
+
+      return item
+    })
+
+    const quoteDraftAllList = B3LStorage.get('b2bQuoteDraftList') || []
+
+    const index = quoteDraftAllList.findIndex((item: CustomFieldItems) => item.node.id === id)
+
+    quoteDraftAllList[index].node.quantity = +value
+
+    B3LStorage.set('b2bQuoteDraftList', quoteDraftAllList)
+
+    paginationTableRef.current?.setList([...newListItems])
+  }
+
+  const handleDeleteClick = (id: number | string) => {
+    const quoteDraftAllList = B3LStorage.get('b2bQuoteDraftList') || []
+
+    const index = quoteDraftAllList.findIndex((item: CustomFieldItems) => item.node.id === id)
+
+    quoteDraftAllList.splice(index, 1)
+
+    B3LStorage.set('b2bQuoteDraftList', quoteDraftAllList)
+
+    setSearch({
+      offset: 0,
+    })
+  }
+
+  useImperativeHandle(ref, () => ({
+    getList: () => paginationTableRef.current?.getList(),
+    refreshList: () => {
+      setSearch({
+        offset: 0,
+      })
+    },
+  }))
+
+  const handleChooseOptionsDialogCancel = () => {
+    setSelectedOptionsOpen(false)
+  }
+
+  const handleOpenProductEdit = (product: any, itemId: number | string) => {
+    setOptionsProduct(product)
+    setOptionsProductId(itemId)
+    setSelectedOptionsOpen(true)
+  }
+
+  const handleChooseOptionsDialogConfirm = async (products: CustomFieldItems[]) => {
+    setSelectedOptionsOpen(false)
+
+    const b2bQuoteDraftList = B3LStorage.get('b2bQuoteDraftList') || []
+
+    const chooseOptionsProduct = b2bQuoteDraftList.find((item: CustomFieldItems) => item.node.id === optionsProductId)?.node || {}
+
+    products.forEach((product) => {
+      const {
+        newSelectOptionList,
+        quantity,
+        variantId,
+        variants,
+        imageUrl,
+      } = product
+      let selectOptions
+      try {
+        selectOptions = JSON.stringify(newSelectOptionList)
+      } catch (error) {
+        selectOptions = chooseOptionsProduct.optionList
+      }
+
+      const variantInfo = variants.length === 1 ? variants[0] : variants.find((item: CustomFieldItems) => item.variant_id === variantId)
+
+      const {
+        image_url: primaryImage = '',
+        calculated_price: basePrice,
+        sku: variantSku,
+      } = variantInfo
+
+      chooseOptionsProduct.optionList = selectOptions
+      chooseOptionsProduct.quantity = quantity
+      chooseOptionsProduct.primaryImage = primaryImage || imageUrl
+      chooseOptionsProduct.basePrice = basePrice
+      chooseOptionsProduct.variantSku = variantSku
+    })
+
+    B3LStorage.set('b2bQuoteDraftList', b2bQuoteDraftList)
+
+    setSearch({
+      offset: 0,
+    })
+
+    snackbar.success('Product were updated in your quote.')
+  }
+
+  const columnItems: TableColumnItem<ListItem>[] = [
+    {
+      key: 'Product',
+      title: 'Product',
+      render: (row: CustomFieldItems) => {
+        const product: any = {
+          ...row.productsSearch,
+          selectOptions: row.optionList,
+        }
+        const productFields = (getProductOptionsFields(product, {}))
+
+        const optionList = JSON.parse(row.optionList)
+        const optionsValue: CustomFieldItems[] = productFields.filter((item) => item.valueText)
+
+        return (
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'flex-start',
+            }}
+          >
+            <StyledImage
+              src={row.primaryImage || defaultProductImage}
+              alt="Product-img"
+              loading="lazy"
+            />
+            <Box>
+              <Typography
+                variant="body1"
+                color="#212121"
+              >
+                {row.productName}
+              </Typography>
+              <Typography
+                variant="body1"
+                color="#616161"
+              >
+                {row.variantSku}
+              </Typography>
+              {
+                (optionList.length > 0 && optionsValue.length > 0) && (
+                  <Box>
+                    {
+                      optionsValue.map((option: any) => (
+                        <Typography
+                          sx={{
+                            fontSize: '0.75rem',
+                            lineHeight: '1.5',
+                            color: '#455A64',
+                          }}
+                          key={option.valueLabel}
+                        >
+                          {`${option.valueLabel
+                          }: ${option.valueText}`}
+                        </Typography>
+                      ))
+                    }
+                  </Box>
+                )
+              }
+            </Box>
+          </Box>
+        )
+      },
+      width: '40%',
+    },
+    {
+      key: 'Price',
+      title: 'Price',
+      render: (row) => {
+        const price = +row.basePrice
+
+        return (
+          <Typography
+            sx={{
+              padding: '12px 0',
+            }}
+          >
+            {`${currencyToken}${price.toFixed(2)}`}
+          </Typography>
+        )
+      },
+      width: '15%',
+    },
+    {
+      key: 'Qty',
+      title: 'Qty',
+      render: (row) => (
+        <StyledTextField
+          size="small"
+          type="number"
+          variant="filled"
+          disabled={!idEdit}
+          value={row.quantity}
+          inputProps={{
+            inputMode: 'numeric', pattern: '[0-9]*',
+          }}
+          onChange={(e) => {
+            handleUpdateProductQty(row.id, e.target.value)
+          }}
+        />
+      ),
+      width: '15%',
+    },
+    {
+      key: 'Total',
+      title: 'Total',
+      render: (row: CustomFieldItems) => {
+        const {
+          basePrice,
+          quantity,
+        } = row
+        const total = +basePrice * +quantity
+        const optionList = JSON.parse(row.optionList)
+
+        return (
+          <Box>
+            <Typography
+              sx={{
+                padding: '12px 0',
+              }}
+            >
+              {`${currencyToken}${total.toFixed(2)}`}
+            </Typography>
+            <Box
+              sx={{
+                marginTop: '1rem',
+                opacity: 0,
+                textAlign: isMobile ? 'end' : 'start',
+              }}
+              id="shoppingList-actionList"
+            >
+              {
+                optionList.length > 0 && idEdit && (
+                  <Edit
+                    sx={{
+                      marginRight: '0.5rem',
+                      cursor: 'pointer',
+                      color: 'rgba(0, 0, 0, 0.54)',
+                    }}
+                    onClick={() => {
+                      const {
+                        productsSearch,
+                        id,
+                        optionList,
+                        quantity,
+                      } = row
+
+                      handleOpenProductEdit({
+                        ...productsSearch,
+                        quantity,
+                        selectOptions: optionList,
+                      }, id)
+                    }}
+                  />
+                )
+              }
+              {
+                idEdit && (
+                <Delete
+                  sx={{
+                    cursor: 'pointer',
+                    color: 'rgba(0, 0, 0, 0.54)',
+                  }}
+                  onClick={() => {
+                    const {
+                      id,
+                    } = row
+                    handleDeleteClick(id)
+                  }}
+                />
+                )
+              }
+
+            </Box>
+          </Box>
+        )
+      },
+      width: '20%',
+    },
+  ]
+
+  return (
+    <StyledQuoteTableContainer>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          margin: '0.5rem 0 1rem 0',
+        }}
+      >
+        <Typography
+          sx={{
+            fontSize: '24px',
+          }}
+        >
+          {`${total || 0} products`}
+        </Typography>
+      </Box>
+
+      <B3PaginationTable
+        ref={paginationTableRef}
+        columnItems={columnItems}
+        rowsPerPageOptions={[12, 24, 36]}
+        getRequestList={getQuoteTableDetails}
+        isCustomRender={false}
+        hover
+        searchParams={search}
+        labelRowsPerPage="Per page:"
+        showBorder={false}
+        itemIsMobileSpacing={0}
+        noDataText="No products found"
+        renderItem={(row: ProductInfoProps, index?: number) => (
+          <QuoteTableCard
+            len={total || 0}
+            item={row}
+            itemIndex={index}
+            onEdit={handleOpenProductEdit}
+            onDelete={handleDeleteClick}
+            currencyToken={currencyToken || '$'}
+            handleUpdateProductQty={handleUpdateProductQty}
+            idEdit={idEdit}
+          />
+        )}
+      />
+
+      <ChooseOptionsDialog
+        isOpen={chooseOptionsOpen}
+        isLoading={isRequestLoading}
+        setIsLoading={setIsRequestLoading}
+        product={optionsProduct}
+        onCancel={handleChooseOptionsDialogCancel}
+        onConfirm={handleChooseOptionsDialogConfirm}
+        currency={currencyToken}
+        isEdit
+      />
+
+    </StyledQuoteTableContainer>
+  )
+}
+
+export default forwardRef(QuoteTable)
diff --git a/apps/storefront/src/pages/quote/components/QuoteTableCard.tsx b/apps/storefront/src/pages/quote/components/QuoteTableCard.tsx
new file mode 100644
index 00000000..ae05fb66
--- /dev/null
+++ b/apps/storefront/src/pages/quote/components/QuoteTableCard.tsx
@@ -0,0 +1,211 @@
+import {
+  ReactElement,
+} from 'react'
+
+import {
+  Box,
+  CardContent,
+  Typography,
+  styled,
+  TextField,
+} from '@mui/material'
+import {
+  Delete,
+  Edit,
+} from '@mui/icons-material'
+
+import {
+  getProductOptionsFields,
+} from '../../shoppingListDetails/shared/config'
+
+interface QuoteTableCardProps {
+  item: any,
+  onEdit: (item: any, itemId: number | string) => void,
+  onDelete: (id: string) => void,
+  currencyToken?: string,
+  handleUpdateProductQty: (id: number | string, value: number | string) => void,
+  idEdit: boolean,
+  len: number,
+  itemIndex?: number,
+}
+
+const StyledImage = styled('img')(() => ({
+  maxWidth: '60px',
+  height: 'auto',
+  marginRight: '0.5rem',
+}))
+
+const defaultProductImage = 'https://cdn11.bigcommerce.com/s-1i6zpxpe3g/stencil/cd9e3830-4c73-0139-8a51-0242ac11000a/e/4fe76590-73f1-0139-3767-32e4ea84ca1d/img/ProductDefault.gif'
+
+const QuoteTableCard = (props: QuoteTableCardProps) => {
+  const {
+    item: quoteTableItem,
+    onEdit,
+    onDelete,
+    currencyToken = '$',
+    handleUpdateProductQty,
+    idEdit,
+    len,
+    itemIndex,
+  } = props
+
+  const {
+    basePrice,
+    quantity,
+    id,
+    primaryImage,
+    productName,
+    variantSku,
+    productsSearch,
+  } = quoteTableItem
+
+  const total = +basePrice * +quantity
+  const price = +basePrice
+
+  const product: any = {
+    ...quoteTableItem.productsSearch,
+    selectOptions: quoteTableItem.optionList,
+  }
+
+  const productFields = (getProductOptionsFields(product, {}))
+
+  const optionList = JSON.parse(quoteTableItem.optionList)
+  const optionsValue: CustomFieldItems[] = productFields.filter((item) => item.valueText)
+
+  return (
+    <Box
+      key={quoteTableItem.id}
+      width="100%"
+      sx={{
+        borderTop: '1px solid #D9DCE9',
+        borderBottom: itemIndex === len - 1 ? '1px solid #D9DCE9' : '',
+      }}
+    >
+      <CardContent
+        sx={{
+          color: '#313440',
+          display: 'flex',
+          pl: 0,
+        }}
+      >
+        <Box>
+          <StyledImage
+            src={primaryImage || defaultProductImage}
+            alt="Product-img"
+            loading="lazy"
+          />
+        </Box>
+        <Box
+          sx={{
+            flex: 1,
+          }}
+        >
+          <Typography
+            variant="body1"
+            color="#212121"
+          >
+            {productName}
+          </Typography>
+          <Typography
+            variant="body1"
+            color="#616161"
+          >
+            {variantSku}
+          </Typography>
+          <Box
+            sx={{
+              margin: '1rem 0',
+            }}
+          >
+            {
+              (optionList.length > 0 && optionsValue.length > 0) && (
+                <Box>
+                  {
+                    optionsValue.map((option: any) => (
+                      <Typography
+                        sx={{
+                          fontSize: '0.75rem',
+                          lineHeight: '1.5',
+                          color: '#455A64',
+                        }}
+                        key={option.valueLabel}
+                      >
+                        {`${option.valueLabel
+                        }: ${option.valueText}`}
+                      </Typography>
+                    ))
+                  }
+                </Box>
+              )
+            }
+          </Box>
+
+          <Typography>{`Price: ${currencyToken}${price.toFixed(2)}`}</Typography>
+
+          <TextField
+            size="small"
+            type="number"
+            variant="filled"
+            label="qty"
+            disabled={!idEdit}
+            inputProps={{
+              inputMode: 'numeric', pattern: '[0-9]*',
+            }}
+            value={quantity}
+            sx={{
+              margin: '1rem 0',
+              width: '60%',
+              maxWidth: '100px',
+            }}
+            onChange={(e) => {
+              handleUpdateProductQty(id, e.target.value)
+            }}
+          />
+          <Typography>{`Total: ${currencyToken}${total.toFixed(2)}`}</Typography>
+          <Box
+            sx={{
+              marginTop: '1rem',
+              textAlign: 'end',
+            }}
+            id="shoppingList-actionList-mobile"
+          >
+            {
+              optionList.length > 0 && idEdit && (
+                <Edit
+                  sx={{
+                    marginRight: '0.5rem',
+                    cursor: 'pointer',
+                    color: 'rgba(0, 0, 0, 0.54)',
+                  }}
+                  onClick={() => {
+                    onEdit({
+                      ...productsSearch,
+                      quantity,
+                      selectOptions: quoteTableItem.optionList,
+                    }, id)
+                  }}
+                />
+              )
+            }
+            {
+              idEdit && (
+              <Delete
+                sx={{
+                  cursor: 'pointer',
+                  color: 'rgba(0, 0, 0, 0.54)',
+                }}
+                onClick={() => {
+                  onDelete(id)
+                }}
+              />
+              )
+            }
+
+          </Box>
+        </Box>
+      </CardContent>
+    </Box>
+  )
+}
+
+export default QuoteTableCard
diff --git a/apps/storefront/src/pages/quote/config.ts b/apps/storefront/src/pages/quote/config.ts
new file mode 100644
index 00000000..5b8ee353
--- /dev/null
+++ b/apps/storefront/src/pages/quote/config.ts
@@ -0,0 +1,132 @@
+const getAccountFormFields = (isMobile: boolean) => {
+  const accountFormFields = [
+    {
+      name: 'label',
+      label: 'Address label',
+      required: false,
+      default: '',
+      fieldType: 'text',
+      xs: 12,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'firstName',
+      label: 'First Name',
+      required: false,
+      default: '',
+      fieldType: 'text',
+      xs: isMobile ? 12 : 6,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'lastName',
+      label: 'Last Name',
+      required: false,
+      default: '',
+      fieldType: 'text',
+      xs: isMobile ? 12 : 6,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'company',
+      label: 'Company',
+      required: false,
+      default: '',
+      fieldType: 'text',
+      xs: 12,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'country',
+      label: 'Country',
+      required: false,
+      default: '',
+      fieldType: 'dropdown',
+      options: [],
+      xs: 12,
+      variant: 'filled',
+      size: 'small',
+      replaceOptions: {
+        label: 'countryName',
+        value: 'countryCode',
+      },
+    },
+    {
+      name: 'address',
+      label: 'Address line 1 ',
+      required: false,
+      default: '',
+      fieldType: 'text',
+      xs: 12,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'apartment',
+      label: 'Address line 2',
+      required: false,
+      default: '',
+      fieldType: 'text',
+      xs: 12,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'city',
+      label: 'City',
+      required: false,
+      default: '',
+      fieldType: 'text',
+      options: [],
+      xs: 12,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'state',
+      label: 'State',
+      required: false,
+      default: '',
+      fieldType: 'text',
+      options: [],
+      xs: isMobile ? 12 : 6,
+      variant: 'filled',
+      size: 'small',
+      replaceOptions: {
+        label: 'stateName',
+        value: 'stateName',
+      },
+    },
+    {
+      name: 'zipCode',
+      label: 'Zip code',
+      required: false,
+      default: '',
+      fieldType: 'text',
+      options: [],
+      xs: isMobile ? 12 : 6,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'phoneNumber',
+      label: 'Phone Number',
+      required: false,
+      default: '',
+      fieldType: 'text',
+      xs: 12,
+      variant: 'filled',
+      size: 'small',
+    },
+  ]
+
+  return accountFormFields
+}
+
+export {
+  getAccountFormFields,
+}
diff --git a/apps/storefront/src/pages/quote/shared/config.ts b/apps/storefront/src/pages/quote/shared/config.ts
new file mode 100644
index 00000000..c0bffc18
--- /dev/null
+++ b/apps/storefront/src/pages/quote/shared/config.ts
@@ -0,0 +1,24 @@
+export interface QuoteListitemProps {
+  node: {
+    variantSku: number | string,
+    variantId: number | string,
+    primaryImage: string,
+    productName: string,
+    optionList: string,
+    productId: number | string,
+    basePrice: number,
+    productsSearch: CustomFieldItems
+    quantity: number,
+  }
+}
+
+export const compareOption = (langList: CustomFieldItems[], shortList:CustomFieldItems[]) => {
+  let flag = true
+  langList.forEach((item: CustomFieldItems) => {
+    const option = shortList.find((list: CustomFieldItems) => list.optionId === item.optionId)
+    if (!option) {
+      if (item?.optionValue) flag = false
+    } else if (item.optionValue !== option.optionValue) flag = false
+  })
+  return flag
+}
diff --git a/apps/storefront/src/pages/quote/style.ts b/apps/storefront/src/pages/quote/style.ts
new file mode 100644
index 00000000..89228956
--- /dev/null
+++ b/apps/storefront/src/pages/quote/style.ts
@@ -0,0 +1,34 @@
+import styled from '@emotion/styled'
+
+interface ContainerProps {
+  padding?: string,
+  flexBasis?: string,
+  alignItems?: string,
+  backgroundColor?: string,
+  width?: string,
+  xs?: {
+    [key: string]: string | number
+  }
+  flexDirection?: 'column' | 'inherit' | '-moz-initial' | 'initial' | 'revert' | 'unset' | 'column-reverse' | 'row' | 'row-reverse',
+}
+
+const Container = styled('div')(({
+  padding = '1rem',
+  alignItems = 'flex-start',
+  flexDirection = 'row',
+  backgroundColor = 'white',
+  width = '100%',
+  xs,
+}: ContainerProps) => ({
+  display: 'flex',
+  flexDirection,
+  alignItems,
+  padding,
+  width,
+  backgroundColor,
+  ...xs,
+}))
+
+export {
+  Container,
+}
diff --git a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
index 627b98dd..509a3a83 100644
--- a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
@@ -359,6 +359,7 @@ const ShoppingListDetails = () => {
                   setCheckedArr={setCheckedArr}
                   shoppingListInfo={shoppingListInfo}
                   currencyToken={currencyToken}
+                  isRequestLoading={isRequestLoading}
                   setIsRequestLoading={setIsRequestLoading}
                   shoppingListId={id}
                   getShoppingListDetails={getShoppingListDetails}
diff --git a/apps/storefront/src/pages/shoppingListDetails/components/AddToShoppingList.tsx b/apps/storefront/src/pages/shoppingListDetails/components/AddToShoppingList.tsx
index 1af425d1..4b0cf309 100644
--- a/apps/storefront/src/pages/shoppingListDetails/components/AddToShoppingList.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/components/AddToShoppingList.tsx
@@ -9,6 +9,10 @@ import {
 
 import UploadFileIcon from '@mui/icons-material/UploadFile'
 
+import {
+  useContext,
+} from 'react'
+
 import {
   SearchProduct,
 } from './SearchProduct'
@@ -17,15 +21,69 @@ import {
   QuickAdd,
 } from './QuickAdd'
 
+import {
+  ShoppingListDetailsContext,
+} from '../context/ShoppingListDetailsContext'
+
+import {
+  addProductToShoppingList,
+} from '@/shared/service/b2b'
+
+import {
+  snackbar,
+} from '@/utils'
+
 interface AddToListProps {
   updateList: () => void
 }
 
 export const AddToShoppingList = (props: AddToListProps) => {
+  const {
+    state: {
+      id,
+    },
+  } = useContext(ShoppingListDetailsContext)
+
   const {
     updateList,
   } = props
 
+  const addToList = async (products: CustomFieldItems[]) => {
+    const items = products.map((product) => ({
+      optionList: product.newSelectOptionList,
+      productId: product.id,
+      quantity: product.quantity,
+      variantId: product.variantId,
+    }))
+
+    const res: CustomFieldItems = await addProductToShoppingList({
+      shoppingListId: id,
+      items,
+    })
+
+    snackbar.success('Product were added to your shopping list')
+
+    return res
+  }
+
+  const quickAddToList = async (products: CustomFieldItems[]) => {
+    const items = products.map((product) => ({
+      optionList: product.newSelectOptionList,
+      productId: parseInt(product.productId, 10) || 0,
+      quantity: product.quantity,
+      variantId: parseInt(product.variantId, 10) || 0,
+    }))
+
+    const res: CustomFieldItems = await addProductToShoppingList({
+      shoppingListId: id,
+      items,
+    })
+
+    snackbar.success('Products were added to your shopping list')
+
+    return res
+  }
+
   return (
     <Card sx={{
       marginBottom: '50px',
@@ -36,12 +94,14 @@ export const AddToShoppingList = (props: AddToListProps) => {
           <Typography variant="h5">Add to list</Typography>
           <SearchProduct
             updateList={updateList}
+            addToList={addToList}
           />
 
           <Divider />
 
           <QuickAdd
             updateList={updateList}
+            quickAddToList={quickAddToList}
           />
 
           <Divider />
diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx
index e3e6be58..b665502e 100644
--- a/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/components/ChooseOptionsDialog.tsx
@@ -5,7 +5,8 @@ import {
   KeyboardEvent,
   useState,
   useEffect,
-  useContext,
+  Dispatch,
+  SetStateAction,
 } from 'react'
 
 import {
@@ -31,7 +32,6 @@ import {
 
 import {
   ShoppingListProductItem,
-  ShoppingListAddProductItem,
   ShoppingListProductItemVariants,
   SimpleObject,
 } from '../../../types'
@@ -42,10 +42,6 @@ import {
   getOptionRequestData,
 } from '../shared/config'
 
-import {
-  ShoppingListDetailsContext,
-} from '../context/ShoppingListDetailsContext'
-
 import {
   searchB2BProducts,
 } from '@/shared/service/b2b'
@@ -97,19 +93,15 @@ interface ChooseOptionsDialogProps {
   isOpen: boolean,
   product?: ShoppingListProductItem,
   onCancel: () => void,
-  onConfirm: (products: ShoppingListAddProductItem[]) => void,
+  onConfirm: (products: CustomFieldItems[]) => void,
   currency?: string,
   isEdit?: boolean,
+  isLoading: boolean,
+  setIsLoading: Dispatch<SetStateAction<boolean>>,
+  addButtonText?: string,
 }
 
 export const ChooseOptionsDialog = (props: ChooseOptionsDialogProps) => {
-  const {
-    state: {
-      isLoading = false,
-    },
-    dispatch,
-  } = useContext(ShoppingListDetailsContext)
-
   const {
     isOpen,
     onCancel,
@@ -117,6 +109,9 @@ export const ChooseOptionsDialog = (props: ChooseOptionsDialogProps) => {
     product,
     currency = '$',
     isEdit = false,
+    isLoading,
+    setIsLoading,
+    addButtonText = 'Add To List',
   } = props
 
   const [quantity, setQuantity] = useState<number | string>(1)
@@ -124,15 +119,6 @@ export const ChooseOptionsDialog = (props: ChooseOptionsDialogProps) => {
   const [variantInfo, setVariantInfo] = useState<ShoppingListProductItemVariants | null>(null)
   const [variantSku, setVariantSku] = useState('')
 
-  const setIsLoading = (isLoading: boolean) => {
-    dispatch({
-      type: 'loading',
-      payload: {
-        isLoading,
-      },
-    })
-  }
-
   const setChooseOptionsForm = async (product: ShoppingListProductItem) => {
     try {
       setIsLoading(true)
@@ -167,6 +153,9 @@ export const ChooseOptionsDialog = (props: ChooseOptionsDialogProps) => {
       }
 
       setQuantity(product.quantity)
+      if (product.variants?.length === 1) {
+        setVariantInfo(product.variants[0])
+      }
 
       const productOptionsFields = getProductOptionsFields(product, productImages)
       setFormFields([...productOptionsFields])
@@ -247,7 +236,7 @@ export const ChooseOptionsDialog = (props: ChooseOptionsDialogProps) => {
       } = variant
 
       const isSelectVariant = optionValues.reduce((isSelect, option) => {
-        if (value[Base64.encode(`attribute[${option.option_id}]`)].toString() !== option.id.toString()) {
+        if (value[Base64.encode(`attribute[${option.option_id}]`)].toString() !== (option.id || '').toString()) {
           return false
         }
         return isSelect
@@ -310,7 +299,8 @@ export const ChooseOptionsDialog = (props: ChooseOptionsDialogProps) => {
       }
 
       onConfirm([{
-        optionList,
+        ...product,
+        newSelectOptionList: optionList,
         productId: product?.id,
         quantity: parseInt(quantity.toString(), 10) || 1,
         variantId: parseInt(variantId.toString(), 10) || 1,
@@ -331,7 +321,7 @@ export const ChooseOptionsDialog = (props: ChooseOptionsDialogProps) => {
   return (
     <B3Dialog
       isOpen={isOpen}
-      rightSizeBtn={isEdit ? 'Save Option' : 'Add To List'}
+      rightSizeBtn={isEdit ? 'Save Option' : addButtonText}
       handleLeftClick={handleCancelClicked}
       handRightClick={handleConfirmClicked}
       title="Choose options"
diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx
index b65ddca5..79a3f8b5 100644
--- a/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx
@@ -34,13 +34,13 @@ import {
 
 import {
   ShoppingListProductItem,
-  ShoppingListAddProductItem,
 } from '../../../types'
 
 interface ProductTableActionProps {
   product: ShoppingListProductItem,
   onAddToListClick: (id: number) => void,
   onChooseOptionsClick: (id: number) => void,
+  addButtonText: string,
 }
 
 const ProductTableAction = (props: ProductTableActionProps) => {
@@ -51,6 +51,7 @@ const ProductTableAction = (props: ProductTableActionProps) => {
     },
     onAddToListClick,
     onChooseOptionsClick,
+    addButtonText,
   } = props
 
   const {
@@ -84,8 +85,7 @@ const ProductTableAction = (props: ProductTableActionProps) => {
           disabled={isLoading}
           fullWidth={isMobile}
         >
-          Add to list
-
+          {addButtonText}
         </Button>
 
       )
@@ -100,8 +100,11 @@ interface ProductListDialogProps {
   onSearchTextChange: (e: ChangeEvent<HTMLInputElement>) => void,
   onSearch: () => void,
   onProductQuantityChange: (id: number, newQuantity: number) => void,
-  onAddToListClick: (products: ShoppingListAddProductItem[]) => void,
+  onAddToListClick: (products: CustomFieldItems[]) => void,
   onChooseOptionsClick: (id: number) => void,
+  isLoading: boolean,
+  searchDialogTitle?: string,
+  addButtonText?: string,
 }
 
 const ProductTable = B3ProductList<ShoppingListProductItem>
@@ -117,14 +120,11 @@ export const ProductListDialog = (props: ProductListDialogProps) => {
     onProductQuantityChange,
     onAddToListClick,
     onChooseOptionsClick,
+    isLoading,
+    searchDialogTitle = 'Add to list',
+    addButtonText = 'Add to list',
   } = props
 
-  const {
-    state: {
-      isLoading = false,
-    },
-  } = useContext(ShoppingListDetailsContext)
-
   const [isMobile] = useMobile()
 
   const handleCancelClicked = () => {
@@ -159,8 +159,8 @@ export const ProductListDialog = (props: ProductListDialogProps) => {
 
     if (product && validateQuantityNumber(product || {})) {
       onAddToListClick([{
-        optionList: [],
-        productId: id,
+        ...product,
+        newSelectOptionList: [],
         quantity: parseInt(product.quantity.toString(), 10) || 1,
         variantId: id,
       }])
@@ -172,7 +172,7 @@ export const ProductListDialog = (props: ProductListDialogProps) => {
       fullWidth
       isOpen={isOpen}
       handleLeftClick={handleCancelClicked}
-      title="Add to list"
+      title={searchDialogTitle}
       showRightBtn={false}
       loading={isLoading}
       maxWidth="lg"
@@ -220,6 +220,7 @@ export const ProductListDialog = (props: ProductListDialogProps) => {
                     product={product}
                     onAddToListClick={handleAddToList}
                     onChooseOptionsClick={onChooseOptionsClick}
+                    addButtonText={addButtonText}
                   />
                 )}
                 actionWidth="180px"
diff --git a/apps/storefront/src/pages/shoppingListDetails/components/QuickAdd.tsx b/apps/storefront/src/pages/shoppingListDetails/components/QuickAdd.tsx
index 3058a205..8e68e46c 100644
--- a/apps/storefront/src/pages/shoppingListDetails/components/QuickAdd.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/components/QuickAdd.tsx
@@ -1,6 +1,5 @@
 import {
   useState,
-  useContext,
   useEffect,
   KeyboardEventHandler,
 } from 'react'
@@ -33,10 +32,6 @@ import {
   getQuickAddRowFields,
 } from '../shared/config'
 
-import {
-  ShoppingListDetailsContext,
-} from '../context/ShoppingListDetailsContext'
-
 import {
   SimpleObject,
   ShoppingListAddProductItem,
@@ -45,27 +40,26 @@ import {
 
 import {
   getB2BVariantInfoBySkus,
-  addProductToShoppingList,
 } from '../../../shared/service/b2b'
 
 interface AddToListContentProps {
-  updateList: () => void
+  updateList: () => void,
+  quickAddToList: (products: CustomFieldItems[]) => CustomFieldItems,
+  level?: number,
+  buttonText?: string,
 }
 
 export const QuickAdd = (props: AddToListContentProps) => {
   const {
     updateList,
+    quickAddToList,
+    level = 3,
+    buttonText = 'Add product to list',
   } = props
 
-  const {
-    state: {
-      id: shoppingListId,
-    },
-  } = useContext(ShoppingListDetailsContext)
-
   const b3Lang = useB3Lang()
 
-  const [rows, setRows] = useState(3)
+  const [rows, setRows] = useState(level)
   const [formFields, setFormFields] = useState<CustomFieldItems[]>([])
   const [isLoading, setIsLoading] = useState(false)
 
@@ -82,7 +76,7 @@ export const QuickAdd = (props: AddToListContentProps) => {
   }, [rows])
 
   const handleAddRowsClick = () => {
-    setRows(rows + 3)
+    setRows(rows + level)
   }
 
   const {
@@ -160,7 +154,7 @@ export const QuickAdd = (props: AddToListContentProps) => {
   const getProductItems = (variantInfoList: CustomFieldItems, skuValue: SimpleObject, skus: string[]) => {
     const notFoundSku: string[] = []
     const notPurchaseSku: string[] = []
-    const productItems: ShoppingListAddProductItem[] = []
+    const productItems: CustomFieldItems[] = []
     const passSku: string[] = []
 
     skus.forEach((sku) => {
@@ -201,7 +195,8 @@ export const QuickAdd = (props: AddToListContentProps) => {
       passSku.push(sku)
 
       productItems.push({
-        optionList,
+        ...variantInfo,
+        newSelectOptionList: optionList,
         productId: parseInt(productId, 10) || 0,
         quantity,
         variantId: parseInt(variantId, 10) || 0,
@@ -288,15 +283,9 @@ export const QuickAdd = (props: AddToListContentProps) => {
         }
 
         if (productItems.length > 0) {
-          await addProductToShoppingList({
-            shoppingListId,
-            items: productItems,
-          })
-
+          await quickAddToList(productItems)
           clearInputValue(value, passSku)
 
-          snackbar.success('Products were added to your shopping list')
-
           updateList()
         }
       } finally {
@@ -314,6 +303,7 @@ export const QuickAdd = (props: AddToListContentProps) => {
   return (
     <B3Sping
       isSpinning={isLoading}
+      spinningHeight="auto"
     >
       <Box>
         <Grid
@@ -385,7 +375,7 @@ export const QuickAdd = (props: AddToListContentProps) => {
                 textAlign: 'center',
               }}
             >
-              Add product to list
+              {buttonText}
             </Box>
           </B3Sping>
         </Button>
diff --git a/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx b/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx
index 7afc51ed..472a890b 100644
--- a/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/components/SearchProduct.tsx
@@ -2,7 +2,6 @@ import {
   ChangeEvent,
   KeyboardEvent,
   useState,
-  useContext,
 } from 'react'
 
 import {
@@ -15,10 +14,6 @@ import {
 
 import SearchIcon from '@mui/icons-material/Search'
 
-import {
-  snackbar,
-} from '@/utils'
-
 import {
   B3Sping,
 } from '@/components'
@@ -31,17 +26,11 @@ import {
   ChooseOptionsDialog,
 } from './ChooseOptionsDialog'
 
-import {
-  ShoppingListDetailsContext,
-} from '../context/ShoppingListDetailsContext'
-
 import {
   ShoppingListProductItem,
-  ShoppingListAddProductItem,
 } from '../../../types'
 
 import {
-  addProductToShoppingList,
   searchB2BProducts,
 } from '@/shared/service/b2b'
 
@@ -50,19 +39,19 @@ import {
 } from '../shared/config'
 
 interface SearchProductProps {
-  updateList: () => void
+  updateList: () => void,
+  addToList: (products: CustomFieldItems[]) => CustomFieldItems,
+  searchDialogTitle?: string,
+  addButtonText?: string,
 }
 
 export const SearchProduct = ({
   updateList,
+  addToList,
+  searchDialogTitle,
+  addButtonText,
 }: SearchProductProps) => {
-  const {
-    state: {
-      id,
-      isLoading = false,
-    },
-    dispatch,
-  } = useContext(ShoppingListDetailsContext)
+  const [isLoading, setIsLoading] = useState(false)
 
   const [productListOpen, setProductListOpen] = useState(false)
   const [isAdded, setIsAdded] = useState(false)
@@ -75,15 +64,6 @@ export const SearchProduct = ({
     setSearchText(e.target.value)
   }
 
-  const setIsLoading = (isLoading: boolean) => {
-    dispatch({
-      type: 'loading',
-      payload: {
-        isLoading,
-      },
-    })
-  }
-
   const searchProduct = async () => {
     if (!searchText || isLoading) {
       return
@@ -141,26 +121,19 @@ export const SearchProduct = ({
     setProductList([...productList])
   }
 
-  const handleAddToListClick = async (products: ShoppingListAddProductItem[]) => {
+  const handleAddToListClick = async (products: CustomFieldItems[]) => {
     try {
       setIsLoading(true)
-      await addProductToShoppingList({
-        shoppingListId: id,
-        items: products,
-      })
+      await addToList(products)
 
       setIsAdded(true)
-
-      snackbar.success('Product were added to your shopping list')
     } finally {
       setIsLoading(false)
     }
   }
 
-  const handleProductListAddToList = (products: ShoppingListAddProductItem[]) => {
+  const handleProductListAddToList = (products: CustomFieldItems[]) => {
     handleAddToListClick(products)
-    // setChooseOptionsOpen(false)
-    // setProductListOpen(false)
   }
 
   const handleChangeOptionsClick = (productId: number) => {
@@ -179,7 +152,7 @@ export const SearchProduct = ({
     setProductListOpen(true)
   }
 
-  const handleChooseOptionsDialogConfirm = (products: ShoppingListAddProductItem[]) => {
+  const handleChooseOptionsDialogConfirm = (products: CustomFieldItems[]) => {
     handleAddToListClick(products)
     setChooseOptionsOpen(false)
     setProductListOpen(true)
@@ -238,6 +211,7 @@ export const SearchProduct = ({
 
       <ProductListDialog
         isOpen={productListOpen}
+        isLoading={isLoading}
         productList={productList}
         searchText={searchText}
         onSearchTextChange={handleSearchTextChange}
@@ -246,13 +220,18 @@ export const SearchProduct = ({
         onProductQuantityChange={handleProductQuantityChange}
         onChooseOptionsClick={handleChangeOptionsClick}
         onAddToListClick={handleProductListAddToList}
+        searchDialogTitle={searchDialogTitle}
+        addButtonText={addButtonText}
       />
 
       <ChooseOptionsDialog
         isOpen={chooseOptionsOpen}
+        isLoading={isLoading}
+        setIsLoading={setIsLoading}
         product={optionsProduct}
         onCancel={handleChooseOptionsDialogCancel}
         onConfirm={handleChooseOptionsDialogConfirm}
+        addButtonText={addButtonText}
       />
 
     </Box>
diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx
index 10a95d80..d80187cf 100644
--- a/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/components/ShoppingDetailTable.tsx
@@ -5,6 +5,8 @@ import {
   forwardRef,
   useImperativeHandle,
   Ref,
+  Dispatch,
+  SetStateAction,
 } from 'react'
 
 import {
@@ -87,7 +89,8 @@ interface ListItemProps {
 interface ShoppingDetailTableProps {
   shoppingListInfo: any,
   currencyToken: string,
-  setIsRequestLoading: (value: boolean) => void,
+  isRequestLoading: boolean,
+  setIsRequestLoading: Dispatch<SetStateAction<boolean>>,
   shoppingListId: number | string,
   getShoppingListDetails: CustomFieldItems,
   setCheckedArr: (values: CustomFieldItems) => void,
@@ -150,6 +153,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
   const {
     shoppingListInfo,
     currencyToken,
+    isRequestLoading,
     setIsRequestLoading,
     shoppingListId,
     getShoppingListDetails,
@@ -216,7 +220,7 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
     setSelectedOptionsOpen(true)
   }
 
-  const handleChooseOptionsDialogConfirm = async (products: ShoppingListAddProductItem[]) => {
+  const handleChooseOptionsDialogConfirm = async (products: CustomFieldItems[]) => {
     setIsRequestLoading(true)
     try {
       const data = {
@@ -574,6 +578,8 @@ const ShoppingDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>)
 
       <ChooseOptionsDialog
         isOpen={chooseOptionsOpen}
+        isLoading={isRequestLoading}
+        setIsLoading={setIsRequestLoading}
         product={optionsProduct}
         onCancel={handleChooseOptionsDialogCancel}
         onConfirm={handleChooseOptionsDialogConfirm}
diff --git a/apps/storefront/src/pages/shoppingListDetails/shared/config.ts b/apps/storefront/src/pages/shoppingListDetails/shared/config.ts
index ec11f1d4..5428f737 100644
--- a/apps/storefront/src/pages/shoppingListDetails/shared/config.ts
+++ b/apps/storefront/src/pages/shoppingListDetails/shared/config.ts
@@ -272,16 +272,32 @@ export const getProductOptionsFields = (product: ShoppingListProductItem, produc
 
     try {
       const selectOptions = JSON.parse(product.selectOptions || '')
+
+      let optionIdKey: 'option_id' | 'optionId' = 'option_id'
+      let optionValueKey: 'option_value' | 'optionValue' = 'option_value'
+      if (selectOptions.length > 0 && !selectOptions[0][optionIdKey]) {
+        optionIdKey = 'optionId'
+        optionValueKey = 'optionValue'
+      }
+
+      const selectOptionsJSON: {
+        [key: string]: ShoppingListSelectProductOption
+      } = {}
+      selectOptions.forEach((item: ShoppingListSelectProductOption) => {
+        selectOptionsJSON[item[optionIdKey]] = item
+      })
+
       if (fieldType === 'checkbox') {
-        const optionValue = selectOptions.find((item: ShoppingListSelectProductOption) => item.option_id === `attribute[${id}]`)?.option_value || ''
+        const optionValue = (selectOptionsJSON[`attribute[${id}]`] || {})[optionValueKey] || ''
+
         const checkedId: number | string = optionValues.find((values) => values.label === 'Yes')?.id || (optionValues.length > 0 ? optionValues[0].id : '')
-        value = (optionValue === '1' || optionValue.includes(checkedId)) ? [checkedId] : []
+        value = (optionValue === '1' || optionValue.includes(`${checkedId}`)) ? [checkedId] : []
       } else if (fieldType !== 'date') {
-        value = selectOptions.find((item: ShoppingListSelectProductOption) => item.option_id === `attribute[${id}]`)?.option_value || ''
+        value = (selectOptionsJSON[`attribute[${id}]`] || {})[optionValueKey] || ''
       } else {
-        const year = selectOptions.find((item: ShoppingListSelectProductOption) => item.option_id === `attribute[${id}][year]`)?.option_value || ''
-        const month = selectOptions.find((item: ShoppingListSelectProductOption) => item.option_id === `attribute[${id}][month]`)?.option_value || ''
-        const day = selectOptions.find((item: ShoppingListSelectProductOption) => item.option_id === `attribute[${id}][day]`)?.option_value || ''
+        const year = (selectOptionsJSON[`attribute[${id}][year]`] || {})[optionValueKey] || ''
+        const month = (selectOptionsJSON[`attribute[${id}][month]`] || {})[optionValueKey] || ''
+        const day = (selectOptionsJSON[`attribute[${id}][day]`] || {})[optionValueKey] || ''
         const date = year && month && day ? `${year}-${month}-${day}` : ''
 
         value = date ? (format(new Date(date), 'yyyy-MM-dd') || value) : value
@@ -307,6 +323,8 @@ export const getProductOptionsFields = (product: ShoppingListProductItem, produc
       default: value,
       valueLabel: displayName,
       valueText: getValueText(fieldType, value, option),
+      optionId: id,
+      optionValue: value ? value.toString() : '',
     })
   })
 
diff --git a/apps/storefront/src/shared/global/context/config.ts b/apps/storefront/src/shared/global/context/config.ts
index 084790e9..31eaadad 100644
--- a/apps/storefront/src/shared/global/context/config.ts
+++ b/apps/storefront/src/shared/global/context/config.ts
@@ -30,6 +30,17 @@ export interface TipMessagesProps{
   horizontal?: 'left' | 'right' | 'center'
   isClose?: boolean
 }
+export interface State {
+  stateCode?: string,
+  stateName?: string,
+  id?: string,
+}
+export interface Country {
+  countryCode: string,
+  countryName: string,
+  id?: string,
+  states: State[]
+}
 
 export interface GlobalState {
   isCheckout: boolean,
@@ -68,8 +79,30 @@ export interface GlobalState {
   storeName: string,
   currentChannelId: number,
   bcChannelId: number,
+  countriesList?: Country[],
+  productQuoteEnabled: boolean,
+  cartQuoteEnabled: boolean,
+  quoteConfig: {
+    switchStatus: {
+      [key: string]: string
+    }[],
+    otherConfigs: {
+      [key: string]: string
+    }[],
+  },
+  globalMessageDialog: {
+    open: boolean,
+    title: string,
+    message: string,
+    cancelText?: string,
+    cancelFn?: () => void,
+    saveText?: string,
+    saveFn?: () => void,
+  },
 }
 
+const role = B3SStorage.get('B3Role')
+
 export const initState = {
   isCheckout: false,
   isCloseGotoBCHome: false,
@@ -80,7 +113,10 @@ export const initState = {
   customerId: B3SStorage.get('B3CustomerId') || '',
   B3UserId: B3SStorage.get('B3UserId') || '',
   emailAddress: B3SStorage.get('B3EmailAddress') || '',
-  role: B3SStorage.get('B3Role') || 0,
+  /* role:
+   * 0: admin, 1: senior 2: buyer, 3: super admin, 99: bc user, 100: guest
+  */
+  role: (role || role === 0) ? role : 100,
   isAgenting: B3SStorage.get('isAgenting') || false,
   salesRepCompanyId: B3SStorage.get('salesRepCompanyId') || '',
   salesRepCompanyName: B3SStorage.get('salesRepCompanyName') || '',
@@ -102,6 +138,19 @@ export const initState = {
   storeName: '',
   currentChannelId: 1,
   bcChannelId: 1,
+  countriesList: [],
+  productQuoteEnabled: true,
+  cartQuoteEnabled: true,
+  quoteConfig: {
+    switchStatus: [],
+    otherConfigs: [],
+  },
+  globalMessageDialog: {
+    open: false,
+    title: '',
+    message: '',
+    cancelText: 'Cancel',
+  },
 }
 
 export interface GlobalAction {
diff --git a/apps/storefront/src/shared/routes/routes.ts b/apps/storefront/src/shared/routes/routes.ts
index 537a99db..8b1dcea8 100644
--- a/apps/storefront/src/shared/routes/routes.ts
+++ b/apps/storefront/src/shared/routes/routes.ts
@@ -22,6 +22,10 @@ const AddressList = lazy(() => import('../../pages/address/Address'))
 
 const ShippingLists = lazy(() => import('../../pages/shoppingLists/ShoppingLists'))
 
+const QuoteDraft = lazy(() => import('../../pages/quote/QuoteDraft'))
+const Quotes = lazy(() => import('../../pages/quote/QuotesList'))
+const QuoteDetail = lazy(() => import('../../pages/quote/QuoteDetail'))
+
 // const AccountSetting = lazy(() => import('../../pages/accountSetting/AccountSetting'))
 const ShoppingListDetails = lazy(() => import('../../pages/shoppingListDetails/ShoppingListDetails'))
 
@@ -44,7 +48,7 @@ const routes: RouteItem[] = [
     wsKey: 'router-orders',
     isMenuItem: true,
     component: OrderList,
-    permissions: [0, 1, 2, 3, 99],
+    permissions: [0, 1, 2, 3, 99, 100],
   },
   {
     path: '/company-orders',
@@ -60,7 +64,7 @@ const routes: RouteItem[] = [
     wsKey: 'router-orders',
     isMenuItem: false,
     component: OrderDetail,
-    permissions: [0, 1, 2, 3, 99],
+    permissions: [0, 1, 2, 3, 99, 100],
   },
   {
     path: '/invoiceDetail/:id',
@@ -68,7 +72,7 @@ const routes: RouteItem[] = [
     wsKey: 'router-invoice',
     isMenuItem: false,
     component: InvoiceDetail,
-    permissions: [0, 1, 2, 3, 99],
+    permissions: [0, 1, 2, 3, 99, 100],
   },
   {
     path: '/addresses',
@@ -77,7 +81,7 @@ const routes: RouteItem[] = [
     isMenuItem: true,
     component: AddressList,
     configKey: 'addressBook',
-    permissions: [0, 1, 2, 3, 99],
+    permissions: [0, 1, 2, 3, 99, 100],
   },
   {
     path: '/shoppingList/:id',
@@ -104,13 +108,40 @@ const routes: RouteItem[] = [
     configKey: 'shoppingLists',
     permissions: [0, 1, 2, 3],
   },
+  {
+    path: '/quoteDraft',
+    name: 'QuoteDraft',
+    wsKey: 'quoteDraft',
+    isMenuItem: false,
+    component: QuoteDraft,
+    configKey: 'quoteDraft',
+    permissions: [0, 1, 2, 3, 99, 100],
+  },
+  {
+    path: '/quotes',
+    name: 'Quotes',
+    wsKey: 'quotes',
+    isMenuItem: true,
+    component: Quotes,
+    configKey: 'quotes',
+    permissions: [0, 1, 2, 3, 99, 100],
+  },
+  {
+    path: '/quoteDetail/:id',
+    name: 'QuoteDetail',
+    wsKey: 'quoteDetail',
+    isMenuItem: false,
+    component: QuoteDetail,
+    configKey: 'quoteDetail',
+    permissions: [0, 1, 2, 3, 99],
+  },
   {
     path: '/recently-viewed',
     name: 'Recently Viewed',
     wsKey: 'router-orders',
     isMenuItem: true,
     component: Dashboard,
-    permissions: [0, 1, 2, 3, 99],
+    permissions: [0, 1, 2, 3, 99, 100],
   },
   {
     path: '/account-settings',
@@ -119,7 +150,7 @@ const routes: RouteItem[] = [
     isMenuItem: true,
     component: Dashboard,
     configKey: 'accountSettings',
-    permissions: [0, 1, 2, 3, 99],
+    permissions: [0, 1, 2, 3, 99, 100],
   },
   {
     path: '/',
@@ -127,7 +158,7 @@ const routes: RouteItem[] = [
     wsKey: 'router-orders',
     isMenuItem: true,
     component: Dashboard,
-    permissions: [0, 1, 2, 3, 99],
+    permissions: [0, 1, 2, 3, 99, 100],
   },
 ]
 
@@ -137,11 +168,14 @@ const getAllowedRoutes = (globalState: GlobalState): RouteItem[] => {
     role,
     isAgenting,
     storefrontConfig,
+    productQuoteEnabled,
+    cartQuoteEnabled,
   } = globalState
 
   return routes.filter((item: RouteItem) => {
     const {
       permissions = [],
+      configKey,
     } = item
 
     // b2b user
@@ -153,6 +187,10 @@ const getAllowedRoutes = (globalState: GlobalState): RouteItem[] => {
       return false
     }
 
+    if ((configKey === 'quotes' || configKey === 'quoteDraft') && !productQuoteEnabled && !cartQuoteEnabled) {
+      return false
+    }
+
     const config = storefrontConfig[item.configKey || ''] ?? {
       enabledStatus: true,
     }
diff --git a/apps/storefront/src/shared/service/b2b/graphql/global.ts b/apps/storefront/src/shared/service/b2b/graphql/global.ts
index bea98a04..03610ca3 100644
--- a/apps/storefront/src/shared/service/b2b/graphql/global.ts
+++ b/apps/storefront/src/shared/service/b2b/graphql/global.ts
@@ -121,6 +121,8 @@ const currencies = (channelId: string) => `{
       decimal_places,
       enabled,
       is_transactional,
+      token_location,
+      thousands_token,
     },
     channelCurrencies,
   }
@@ -157,6 +159,6 @@ export const getStorefrontConfig = (): CustomFieldItems => B3Request.graphqlB2B(
 export const getCurrencies = (channelId: string): CustomFieldItems => B3Request.graphqlB2B({
   query: currencies(channelId),
 })
-export const getBcCurrencies = (channelId: string): CustomFieldItems => B3Request.graphqlBC({
+export const getBcCurrencies = (channelId: string): CustomFieldItems => B3Request.graphqlProxyBC({
   query: currencies(channelId),
 })
diff --git a/apps/storefront/src/shared/service/b2b/graphql/product.ts b/apps/storefront/src/shared/service/b2b/graphql/product.ts
index 527bae81..71054991 100644
--- a/apps/storefront/src/shared/service/b2b/graphql/product.ts
+++ b/apps/storefront/src/shared/service/b2b/graphql/product.ts
@@ -2,6 +2,12 @@ import {
   B3Request,
 } from '../../request/b3Fetch'
 
+import {
+  B3SStorage,
+
+  storeHash,
+} from '@/utils'
+
 import {
   convertArrayToGraphql,
 } from '../../../../utils'
@@ -45,6 +51,8 @@ const searchProducts = (data: CustomFieldItems) => `{
     productIds: [${data.productIds || []}]
     currencyCode: "${data.currencyCode || ''}"
     companyId: "${data.companyId || ''}"
+    storeHash: "${storeHash}"
+    channelId: ${B3SStorage.get('B3channelId') || 1}
   ){
     id,
     name,
diff --git a/apps/storefront/src/shared/service/b2b/graphql/quote.ts b/apps/storefront/src/shared/service/b2b/graphql/quote.ts
new file mode 100644
index 00000000..4302db82
--- /dev/null
+++ b/apps/storefront/src/shared/service/b2b/graphql/quote.ts
@@ -0,0 +1,317 @@
+import {
+  B3Request,
+} from '../../request/b3Fetch'
+
+import {
+  storeHash,
+} from '../../../../utils/basicConfig'
+
+import {
+  convertArrayToGraphql,
+  convertObjectToGraphql,
+} from '../../../../utils'
+
+const getQuotesList = (data: CustomFieldItems, type: string) => `{
+  ${type === 'b2b' ? 'quotes' : 'customerQuotes'}(
+    first: ${data.first}
+    offset: ${data.offset}
+    search: "${data.q || ''}"
+    orderBy: "${data?.orderBy || ''}"
+    createdBy: "${data?.createdBy || ''}"
+    salesRep: "${data?.salesRep || ''}"
+    ${data?.status ? `salesRep: "${data.status}"` : ''}
+    ${data?.dateCreatedBeginAt ? `dateCreatedBeginAt: "${data.dateCreatedBeginAt}"` : ''}
+  ) {
+    totalCount,
+    edges {
+      node {
+        id,
+        createdAt,
+        updatedAt,
+        quoteNumber,
+        quoteTitle,
+        referenceNumber,
+        createdBy,
+        expiredAt,
+        expiredAt,
+        discount,
+        grandTotal,
+        currency,
+        status,
+        salesRep,
+        orderId,
+        subtotal,
+      }
+    }
+  }
+}`
+
+const getCustomerAddresses = () => `{
+  customerAddresses (
+    first: 50
+    offset: 0
+  ){
+    totalCount,
+    edges {
+      node {
+        id,
+        createdAt,
+        updatedAt,
+        firstName,
+        lastName,
+        company,
+        bcAddressId,
+        address1,
+        address2,
+        city,
+        stateOrProvince,
+        postalCode,
+        country,
+        countryCode,
+        phone,
+        addressType,
+      },
+    },
+  }
+}`
+
+const getAddresses = (companyId: number) => `{
+  addresses (
+    first: 50
+    offset: 0
+    companyId: ${companyId}
+  ){
+    totalCount,
+    edges{
+      node{
+        id,
+        createdAt,
+        updatedAt,
+        firstName,
+        lastName,
+        isShipping,
+        isBilling,
+        addressLine1,
+        addressLine2,
+        address,
+        city,
+        state,
+        stateCode,
+        country,
+        countryCode,
+        zipCode,
+        phoneNumber,
+        isActive,
+        label,
+        company,
+        uuid,
+        isDefaultShipping,
+        isDefaultBilling,
+      },
+    },
+  }
+}`
+
+const quoteCreate = (data: CustomFieldItems) => `mutation{
+  quoteCreate(quoteData: {
+    notes: "${data.notes}",
+    legalTerms: "${data.legalTerms}",
+    totalAmount: "${data.totalAmount}",
+    grandTotal: "${data.grandTotal}",
+    subtotal: "${data.subtotal || ''}",
+    ${data?.companyId ? `companyId: ${data.companyId}` : ''}
+    storeHash: "${data.storeHash}",
+    discount: "${data.discount}",
+    channelId: ${data.channelId},
+    userEmail: "${data?.userEmail || ''}",
+    currency: ${convertObjectToGraphql(data.currency)}
+    shippingAddress: ${convertObjectToGraphql(data.shippingAddress)}
+    billingAddress: ${convertObjectToGraphql(data.billingAddress)}
+    contactInfo: ${convertObjectToGraphql(data.contactInfo)}
+    productList: ${convertArrayToGraphql(data.productList || [])}
+  }) {
+    quote{
+      id,
+      createdAt,
+    }
+  }
+}`
+
+const getQuoteInfo = (data: {
+  id: number,
+  date: string,
+}) => `{
+  quote(
+    id: ${data.id},
+    storeHash: "${storeHash}",
+    date:  "${data?.date || ''}",
+  ) {
+    id,
+    createdAt,
+    updatedAt,
+    quoteNumber,
+    quoteTitle,
+    referenceNumber,
+    userEmail,
+    bcCustomerId,
+    createdBy,
+    expiredAt,
+    companyId {
+      id,
+      companyName,
+      bcGroupName,
+      description,
+      catalogId,
+      companyStatus,
+      addressLine1,
+      addressLine2,
+      city,
+      state,
+      zipCode,
+      country,
+      extraFields {
+        fieldName,
+        fieldValue,
+      },
+    },
+    salesRepStatus,
+    customerStatus,
+    subtotal,
+    discount,
+    grandTotal,
+    cartId,
+    cartUrl,
+    checkoutUrl,
+    bcOrderId,
+    currency,
+    contactInfo,
+    trackingHistory,
+    extraFields {
+      fieldName,
+      fieldValue,
+    },
+    notes,
+    legalTerms,
+    shippingTotal,
+    taxTotal,
+    totalAmount,
+    shippingMethod,
+    billingAddress,
+    oldSalesRepStatus,
+    oldCustomerStatus,
+    recipients,
+    discountType,
+    discountValue,
+    status,
+    company,
+    salesRep,
+    salesRepEmail,
+    orderId,
+    shippingAddress,
+    productsList {
+      productId,
+      sku,
+      basePrice,
+      discount,
+      offeredPrice,
+      quantity,
+      variantId,
+      imageUrl,
+      orderQuantityMaximum,
+      orderQuantityMinimum,
+      productName,
+      options,
+      notes,
+      costPrice,
+      inventoryTracking,
+      inventoryLevel,
+    },
+    storefrontAttachFiles {
+      id,
+      fileName,
+      fileType,
+      fileUrl,
+    },
+    backendAttachFiles {
+      id,
+      fileName,
+      fileType,
+      fileUrl,
+    },
+    storeInfo {
+      storeName,
+      storeAddress,
+      storeCountry,
+      storeLogo,
+      storeUrl,
+    },
+    companyInfo {
+      companyId,
+      companyName,
+      companyAddress,
+      companyCountry,
+      companyState,
+      companyCity,
+      companyZipCode,
+      phoneNumber,
+    },
+    salesRepInfo {
+      salesRepName,
+      salesRepEmail,
+      salesRepPhoneNumber,
+    },
+    quoteLogo,
+    quoteUrl,
+    channelId,
+    channelName,
+  }
+}`
+
+const exportQuotePdf = (data: {
+  quoteId: number,
+  currency: object,
+}) => `mutation{
+  quotePdfExport(
+    quoteId: ${data.quoteId},
+    currency:  ${convertObjectToGraphql(data.currency || {})},
+    storeHash: "${storeHash}",
+  ) {
+    url,
+  }
+}`
+
+export const getBCCustomerAddresses = (): CustomFieldItems => B3Request.graphqlProxyBC({
+  query: getCustomerAddresses(),
+})
+
+export const getB2BCustomerAddresses = (companyId: number): CustomFieldItems => B3Request.graphqlB2B({
+  query: getAddresses(companyId),
+})
+
+export const getB2BQuotesList = (data: CustomFieldItems): CustomFieldItems => B3Request.graphqlB2B({
+  query: getQuotesList(data, 'b2b'),
+})
+
+export const getBCQuotesList = (data: CustomFieldItems): CustomFieldItems => B3Request.graphqlProxyBC({
+  query: getQuotesList(data, 'bc'),
+})
+
+export const createQuote = (data: CustomFieldItems): CustomFieldItems => B3Request.graphqlB2B({
+  query: quoteCreate(data),
+})
+
+export const createBCQuote = (data: CustomFieldItems): CustomFieldItems => B3Request.graphqlProxyBC({
+  query: quoteCreate(data),
+})
+
+export const getB2BQuoteDetail = (data: { id: number, date: string }): CustomFieldItems => B3Request.graphqlB2B({
+  query: getQuoteInfo(data),
+})
+
+export const getBcQuoteDetail = (data: { id: number, date: string }): CustomFieldItems => B3Request.graphqlProxyBC({
+  query: getQuoteInfo(data),
+})
+
+export const exportB2BQuotePdf = (data: { quoteId: number, currency: object }): CustomFieldItems => B3Request.graphqlB2B({
+  query: exportQuotePdf(data),
+})
diff --git a/apps/storefront/src/shared/service/b2b/graphql/register.ts b/apps/storefront/src/shared/service/b2b/graphql/register.ts
index 49c51438..182f4847 100644
--- a/apps/storefront/src/shared/service/b2b/graphql/register.ts
+++ b/apps/storefront/src/shared/service/b2b/graphql/register.ts
@@ -46,8 +46,14 @@ const getCompanyExtraFields = () => `{
 
 const getRegisterLogo = () => `{
   quoteConfig(storeHash: "${storeHash}") {
-    key,
-    isEnabled
+    switchStatus{
+      key
+      isEnabled
+    }
+    otherConfigs{
+      key
+      value
+    }
   }
 }`
 
diff --git a/apps/storefront/src/shared/service/b2b/index.ts b/apps/storefront/src/shared/service/b2b/index.ts
index 715eb327..4c7e1743 100644
--- a/apps/storefront/src/shared/service/b2b/index.ts
+++ b/apps/storefront/src/shared/service/b2b/index.ts
@@ -38,6 +38,18 @@ import {
   validateAddressExtraFields,
 } from './api/address'
 
+import {
+  getB2BCustomerAddresses,
+  getBCCustomerAddresses,
+  getB2BQuotesList,
+  getBCQuotesList,
+  createQuote,
+  createBCQuote,
+  getB2BQuoteDetail,
+  exportB2BQuotePdf,
+  getBcQuoteDetail,
+} from './graphql/quote'
+
 import {
   getB2BToken,
   getAgentInfo,
@@ -151,4 +163,13 @@ export {
   checkUserEmail,
   checkUserBCEmail,
   setChannelStoreType,
+  getB2BCustomerAddresses,
+  getBCCustomerAddresses,
+  getB2BQuotesList,
+  getBCQuotesList,
+  createQuote,
+  getB2BQuoteDetail,
+  exportB2BQuotePdf,
+  createBCQuote,
+  getBcQuoteDetail,
 }
diff --git a/apps/storefront/src/types/shoppingList.ts b/apps/storefront/src/types/shoppingList.ts
index 203f3e45..0ad2b947 100644
--- a/apps/storefront/src/types/shoppingList.ts
+++ b/apps/storefront/src/types/shoppingList.ts
@@ -63,7 +63,7 @@ export interface ShoppingListProductItemModifiers {
     file_types_supported?: string[],
   },
   display_name: string,
-  id: number,
+  id: number | string,
   option_values: ShoppingListProductItemModifiersOption[],
   required: boolean,
   type: string,
@@ -71,7 +71,7 @@ export interface ShoppingListProductItemModifiers {
 }
 
 export interface ShoppingListProductItemVariantsOption {
-  id: number,
+  id?: number,
   label: string,
   option_display_name: string,
   option_id: number,
@@ -108,6 +108,8 @@ export interface ShoppingListAddProductOption{
 export interface ShoppingListSelectProductOption{
   option_id: string,
   option_value: string,
+  optionId: string,
+  optionValue: string,
 }
 export interface ShoppingListAddProductItem{
   optionList: ShoppingListAddProductOption[],
diff --git a/apps/storefront/src/utils/b3AddToShoppingList.ts b/apps/storefront/src/utils/b3AddToShoppingList.ts
index 18e24ea7..07b6f41d 100644
--- a/apps/storefront/src/utils/b3AddToShoppingList.ts
+++ b/apps/storefront/src/utils/b3AddToShoppingList.ts
@@ -1,5 +1,4 @@
 import {
-  snackbar,
   B3SStorage,
 } from '@/utils'
 
@@ -184,8 +183,13 @@ export const isModifierNumberTextValid = (option: any, optionVal: any) => {
   }
 }
 
-export const isAllRequiredOptionFilled = (bcOriginalOptions: any, optionList: any) => {
-  if (bcOriginalOptions.length === 0) return true
+export const isAllRequiredOptionFilled = (bcOriginalOptions: any, optionList: any): any => {
+  if (bcOriginalOptions.length === 0) {
+    return {
+      isValid: true,
+      message: '',
+    }
+  }
   const requiredOptions = bcOriginalOptions.filter(({
     required,
   }: any) => !!required)
@@ -208,9 +212,10 @@ export const isAllRequiredOptionFilled = (bcOriginalOptions: any, optionList: an
 
   if (!isRequiredValid) {
     const errorMessage = 'Please fill out product options first.'
-    snackbar.error(errorMessage)
-
-    return false
+    return {
+      isValid: false,
+      message: errorMessage,
+    }
   }
 
   const VALIDATION_MAP: {
@@ -251,14 +256,18 @@ export const isAllRequiredOptionFilled = (bcOriginalOptions: any, optionList: an
         isOptionValid, errMsg,
       }: any = validationFuc(option, optionValue)
       if (!isOptionValid) {
-        snackbar.error(errMsg)
-
-        return false
+        return {
+          isValid: false,
+          message: errMsg,
+        }
       }
     }
   }
 
-  return true
+  return {
+    isValid: true,
+    message: '',
+  }
 }
 
 export const serialize = (form: any) => {
diff --git a/apps/storefront/src/utils/b3Init.ts b/apps/storefront/src/utils/b3Init.ts
index cde49429..26bd6ae4 100644
--- a/apps/storefront/src/utils/b3Init.ts
+++ b/apps/storefront/src/utils/b3Init.ts
@@ -1,9 +1,73 @@
-export interface QuoteConfig {
+export interface QuoteConfigItem {
   [key: string]: string
 }
 
-export const getLogo = (quoteConfig:Array<QuoteConfig>): string => {
-  const item:Array<QuoteConfig> = quoteConfig.filter((list:QuoteConfig) => list.key === 'quote_logo')
+export interface QuoteConfig {
+  switchStatus: QuoteConfigItem[],
+  otherConfigs: QuoteConfigItem[],
+}
+
+export const getLogo = (quoteConfig:QuoteConfig): string => {
+  const logoItem = quoteConfig.switchStatus.find((list:QuoteConfigItem) => list.key === 'quote_logo') || {}
+
+  return logoItem.isEnabled || ''
+}
+
+export const getQuoteEnabled = (
+  quoteConfig: QuoteConfig,
+  storefrontConfig: {
+    [k: string]: boolean | {
+      value: boolean,
+      enabledStatus: boolean,
+    },
+  },
+  role: number | string,
+  isB2BUser: boolean,
+  isAgenting: boolean,
+) => {
+  let customerEnabled = '1'
+  let guestEnabled = '1'
+  let bcUserEnabled = '1'
+  let productEnabled = '1'
+  let cartEnabled = '1'
+
+  const quoteEnabled = storefrontConfig.quotes || false
+
+  quoteConfig.switchStatus.forEach((config) => {
+    if (config.key === 'quote_customer') {
+      customerEnabled = config.isEnabled
+    }
+    if (config.key === 'quote_for_guest') {
+      guestEnabled = config.isEnabled
+    }
+    if (config.key === 'quote_for_individual_customer') {
+      bcUserEnabled = config.isEnabled
+    }
+    if (config.key === 'quote_on_product_page') {
+      productEnabled = config.isEnabled
+    }
+    if (config.key === 'quote_on_cart_page') {
+      cartEnabled = config.isEnabled
+    }
+  })
+
+  let productQuoteEnabled = quoteEnabled && customerEnabled === '1' && productEnabled === '1'
+  let cartQuoteEnabled = quoteEnabled && customerEnabled === '1' && cartEnabled === '1'
+
+  // guest
+  if (`${role}` === '100') {
+    productQuoteEnabled = productQuoteEnabled && guestEnabled === '1'
+    cartQuoteEnabled = cartQuoteEnabled && guestEnabled === '1'
+  }
+
+  // BCUser
+  if (!isB2BUser || (`${role}` === '9' && !isAgenting)) {
+    productQuoteEnabled = productQuoteEnabled && bcUserEnabled === '1'
+    cartQuoteEnabled = cartQuoteEnabled && guestEnabled === '1'
+  }
 
-  return item[0].isEnabled
+  return {
+    productQuoteEnabled,
+    cartQuoteEnabled,
+  }
 }
diff --git a/apps/storefront/src/utils/b3Product.ts b/apps/storefront/src/utils/b3Product.ts
new file mode 100644
index 00000000..11e9d9c4
--- /dev/null
+++ b/apps/storefront/src/utils/b3Product.ts
@@ -0,0 +1,91 @@
+import {
+  B3SStorage,
+  B3LStorage,
+} from '@/utils'
+
+interface optionListItem {
+  optionId: string,
+  optionValue: string,
+  option_id: string,
+  value_id: number,
+}
+
+interface QuoteListitemProps {
+  node: {
+    id: number,
+    quantity?: number,
+    variantSku: number | string,
+    variantId: number | string,
+    primaryImage: number | string,
+    productName: number | string,
+    optionList: number | string,
+    productId: number | string,
+    basePrice: number | string,
+    productsSearch: CustomFieldItems
+  }
+}
+
+// const getProductPrice = async (optionList: Partial<optionListItem>[], quoteListitem: CustomFieldItems) => {
+//   const currencies = B3SStorage.get('currencies')
+//   const channelId = B3SStorage.get('B3channelId')
+//   const customerInfo = B3SStorage.get('B3CustomerInfo') || {}
+
+//   if (!customerInfo?.customerGroupId) customerInfo.customerGroupId = 0
+
+//   const newOptionList: Partial<optionListItem>[] = []
+//   optionList.forEach((item: Partial<optionListItem>) => {
+//     const val = Number(item.optionValue)
+//     if (!Number.isNaN(val)) {
+//       newOptionList.push({
+//         option_id: item.optionId,
+//         value_id: Number(item.optionValue),
+//       })
+//     }
+//   })
+//   console.log(currencies, channelId, newOptionList, quoteListitem)
+//   // TODO: get product price
+//   // await
+//   return quoteListitem
+// }
+
+const addQuoteDraftProduce = async (quoteListitem: CustomFieldItems, qty: number, optionList: CustomFieldItems[]) => {
+  const b2bQuoteDraftList = B3LStorage.get('b2bQuoteDraftList') || []
+
+  const compareOption = (langList: CustomFieldItems[], shortList:CustomFieldItems[]) => {
+    let flag = true
+    langList.forEach((item: CustomFieldItems) => {
+      const option = shortList.find((list: CustomFieldItems) => list.optionId === item.optionId)
+      if (!option) {
+        if (item?.optionValue) flag = false
+      } else if (item.optionValue !== option.optionValue) flag = false
+    })
+    return flag
+  }
+
+  const index = b2bQuoteDraftList.findIndex((item: QuoteListitemProps) => item?.node?.variantSku === quoteListitem.node.variantSku)
+
+  if (index !== -1) {
+    console.log(b2bQuoteDraftList[index].node.optionList, b2bQuoteDraftList[index])
+    // TODO optionList compare
+    const oldOptionList = JSON.parse(b2bQuoteDraftList[index].node.optionList)
+
+    const isAdd = oldOptionList.length > optionList.length ? compareOption(oldOptionList, optionList) : compareOption(optionList, oldOptionList)
+
+    if (isAdd) {
+      b2bQuoteDraftList[index].node.quantity += +qty
+    } else {
+      // const productList = await getProductPrice(optionList, quoteListitem)
+      b2bQuoteDraftList.push(quoteListitem)
+    }
+  } else {
+    // const productList = await getProductPrice(optionList, quoteListitem)
+    b2bQuoteDraftList.push(quoteListitem)
+  }
+
+  B3LStorage.set('b2bQuoteDraftList', b2bQuoteDraftList)
+}
+
+export {
+  // getProductPrice,
+  addQuoteDraftProduce,
+}
diff --git a/apps/storefront/src/utils/b3QuoteGlobalTip.ts b/apps/storefront/src/utils/b3QuoteGlobalTip.ts
new file mode 100644
index 00000000..d638e74b
--- /dev/null
+++ b/apps/storefront/src/utils/b3QuoteGlobalTip.ts
@@ -0,0 +1,97 @@
+interface CreateTipProps {
+  variant?: string
+  cd?: () => void
+  closeCd?: () => void
+  linkSize?: string
+}
+
+export default class QuoteGlobalTip {
+  variant: string
+
+  message: string
+
+  constructor() {
+    this.variant = ''
+    this.message = ''
+  }
+
+  static removeElement = (_element: CustomFieldItems) => {
+    const _parentElement = _element.parentNode
+    if (_parentElement) {
+      _parentElement.removeChild(_element)
+    }
+  }
+
+  static delete() {
+    const isGlobalTip = document.querySelector('#globalTip')
+    if (isGlobalTip) this.removeElement(isGlobalTip)
+  }
+
+  static createTip(message: string, {
+    variant = 'success',
+    cd,
+    closeCd,
+    linkSize,
+  }: CreateTipProps) {
+    this.delete()
+    const globalTip = document.createElement('div')
+    globalTip.setAttribute('id', 'globalTip')
+    const tipHtml = `
+    <div class="b2b-quote-global-alert ${variant === 'success' ? 'b2b-quote-global-success' : 'b2b-quote-global-error'}" role="alert">
+      <div class="MuiAlert-icon b2b-quote-global-icon">
+        <svg
+          class="b2b-quote-global-svg"
+          focusable="false"
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          data-testid="SuccessOutlinedIcon"
+        >
+        ${variant === 'success' ? '<path d="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"></path>'
+    : '<path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path>'}
+        </svg>
+      </div>
+      <div class="b2b-quote-global-message">
+        <div>${message}</div>
+      </div>
+      <div class="b2b-quote-global-action">
+          ${
+  variant === 'success'
+    ? `<button
+            class="b2b-quote-global-btn b2b-quote-global-btn-goto"
+            tabindex="0"
+            type="button"
+            aria-label="Close"
+            title="Close"
+          >
+            ${linkSize}
+          </button>` : ''
+}
+          <button
+            class="b2b-quote-global-btn b2b-quote-global-btn-close"
+            tabindex="0"
+            type="button"
+            aria-label="Close"
+            title="Close"
+          >
+            <svg
+              class="b2b-quote-global-btn-svg"
+              focusable="false"
+              aria-hidden="true"
+              viewBox="0 0 24 24"
+              data-testid="CloseIcon"
+            >
+              <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              ></path>
+            </svg>
+          </button>
+      </div>
+    </div>`
+    globalTip.innerHTML = tipHtml
+
+    document.body.append(globalTip)
+
+    if (cd) cd()
+    if (closeCd) closeCd()
+  }
+}
diff --git a/apps/storefront/src/utils/index.ts b/apps/storefront/src/utils/index.ts
index 3757bb5c..b3c961c2 100644
--- a/apps/storefront/src/utils/index.ts
+++ b/apps/storefront/src/utils/index.ts
@@ -24,10 +24,12 @@ import {
   clearCurrentCustomerInfo,
   getCurrentJwt,
   getCurrenciesInfo,
+  getSearchVal,
 } from './loginInfo'
 
 import {
   getLogo,
+  getQuoteEnabled,
 } from './b3Init'
 
 import {
@@ -46,6 +48,8 @@ import {
   getCookie,
 } from './b3utils'
 
+import QuoteGlobalTip from './b3QuoteGlobalTip'
+
 import {
   handleGetCurrentProductInfo,
   isModifierTextValid,
@@ -55,6 +59,10 @@ import {
   getProductOptionList,
 } from './b3AddToShoppingList'
 
+export {
+  addQuoteDraftProduce,
+} from './b3Product'
+
 export {
   convertArrayToGraphql,
   convertObjectToGraphql,
@@ -80,4 +88,7 @@ export {
   isAllRequiredOptionFilled,
   serialize,
   getProductOptionList,
+  QuoteGlobalTip,
+  getQuoteEnabled,
+  getSearchVal,
 }
diff --git a/apps/storefront/src/utils/loginInfo.ts b/apps/storefront/src/utils/loginInfo.ts
index a6f39d9f..9f5c9305 100644
--- a/apps/storefront/src/utils/loginInfo.ts
+++ b/apps/storefront/src/utils/loginInfo.ts
@@ -243,6 +243,8 @@ export const getCurrentAgentInfo = async (customerId: number, role: number) => {
 
 export const getCurrentCustomerInfo = async (dispatch: DispatchProps) => {
   try {
+    await getCurrenciesInfo()
+
     const {
       data: {
         customer,
@@ -272,10 +274,6 @@ export const getCurrentCustomerInfo = async (dispatch: DispatchProps) => {
 
     await getCurrentJwtAndB2BToken(userType)
 
-    if (userType === 3) {
-      await getCurrenciesInfo()
-    }
-
     const companyInfo = await getCompanyInfo(id, userType, role)
 
     if (customerId) {
@@ -292,14 +290,14 @@ export const getCurrentCustomerInfo = async (dispatch: DispatchProps) => {
       B3SStorage.set('B3CustomerId', customerId)
       B3SStorage.set('B3EmailAddress', emailAddress)
       B3SStorage.set('B3UserId', id)
-      B3SStorage.set('B3Role', role)
+      B3SStorage.set('B3Role', userType === 3 ? role : 99)
       B3SStorage.set('isB2BUser', userType === 3)
 
       dispatch({
         type: 'common',
         payload: {
           isB2BUser: userType === 3,
-          role,
+          role: userType === 3 ? role : 99,
           customerId,
           B3UserId: id,
           isAgenting: agentInfo.isAgenting,
@@ -326,3 +324,12 @@ export const getCurrentCustomerInfo = async (dispatch: DispatchProps) => {
     clearCurrentCustomerInfo(dispatch)
   }
 }
+
+export const getSearchVal = (search:string, key:string) => {
+  if (!search) {
+    return ''
+  }
+  const searchParams = new URLSearchParams(search)
+
+  return searchParams.get(key)
+}
diff --git a/packages/hooks/index.ts b/packages/hooks/index.ts
index 00c8f9c8..fd397ae0 100644
--- a/packages/hooks/index.ts
+++ b/packages/hooks/index.ts
@@ -17,3 +17,7 @@ export type {
 export {
   useB3PDPOpen,
 } from './useB3PDPOpen'
+
+export {
+  useB3Quote,
+} from './useB3Quote'
diff --git a/packages/hooks/useB3Quote.ts b/packages/hooks/useB3Quote.ts
new file mode 100644
index 00000000..5f7faae1
--- /dev/null
+++ b/packages/hooks/useB3Quote.ts
@@ -0,0 +1,38 @@
+import {
+  useEffect,
+} from 'react'
+
+export const useB3Quote = (el: string, cd: () => void, openQuickViewNum: number, isEnabled: boolean) => {
+  useEffect(() => {
+    const addToQuoteAll = document.querySelectorAll(el)
+
+    // const wishlistSdd = document.querySelector('form[data-wishlist-add]')
+    let shoppingBtnDom: CustomFieldItems | null = null
+    if (!addToQuoteAll.length) return
+
+    if (!isEnabled) {
+      document.querySelector('#b3MyQuote')?.remove()
+      return
+    }
+
+    if (document.querySelectorAll('#b3MyQuote')?.length) {
+      return
+    }
+
+    addToQuoteAll.forEach((node: CustomFieldItems) => {
+      shoppingBtnDom = document.createElement('div')
+      shoppingBtnDom.setAttribute('id', 'b3MyQuote')
+      // shoppingBtnDom.setAttribute('class', 'b2b-btn-loading')
+      shoppingBtnDom.innerHTML = 'Add to Quote'
+      node.parentNode.appendChild(shoppingBtnDom)
+      shoppingBtnDom.addEventListener('click', cd, {
+        capture: true,
+      })
+    })
+    return () => {
+      if (shoppingBtnDom) {
+        shoppingBtnDom.removeEventListener('click', cd)
+      }
+    }
+  }, [openQuickViewNum])
+}
diff --git a/yarn.lock b/yarn.lock
index 6685c44d..5ee5e1af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1795,6 +1795,13 @@ convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+copy-to-clipboard@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.npmmirror.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-pure@^3.20.2:
   version "3.24.1"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.24.1.tgz#8839dde5da545521bf282feb7dc6d0b425f39fd3"
@@ -4735,6 +4742,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.npmmirror.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 tough-cookie@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"