diff --git a/apps/webstore/src/app/pages/home/home.component.css b/apps/webstore/src/app/pages/home/home.component.css
index 7c8fdd370..cdd7cfced 100644
--- a/apps/webstore/src/app/pages/home/home.component.css
+++ b/apps/webstore/src/app/pages/home/home.component.css
@@ -125,58 +125,10 @@ figure {
   background-image: url('/assets/img/home/family-tree-baby.jpg');
 }
 
-.hide .arrow-up-item,
-.hide {
-  transition: 0.4s;
-  opacity: 0 !important;
-  bottom: 30px;
-}
-
 .remove {
   bottom: 100px;
 }
 
-.show {
-  transition: 0.4s;
-  opacity: 1;
-}
-/* Arrow button */
-.arrow-up-container {
-  position: relative;
-  display: flex;
-  justify-content: flex-end;
-  z-index: 1000;
-}
-.arrow-up-item {
-  transition: 1s;
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-}
-.up-arrow {
-  margin: 4vh 2vh 2vh 2vh;
-  padding-right: 2px;
-  outline: none;
-  background-color: transparent;
-  border: none;
-}
-.up-bar1,
-.up-bar2 {
-  width: 25px;
-  height: 3px;
-  background-color: var(--second-action-color);
-  margin: 5px 0;
-  transition: 0.4s;
-}
-.up-bar2 {
-  -webkit-transform: rotate(-45deg) translate(-2px, -11px);
-  transform: rotate(-45deg) translate(-2px, -11px);
-}
-.up-bar1 {
-  -webkit-transform: rotate(45deg) translate(6px, -4px);
-  transform: rotate(45deg) translate(6px, -4px);
-}
-
 .review-section {
   background-color: white;
   display: flex;
diff --git a/apps/webstore/src/app/pages/home/home.component.html b/apps/webstore/src/app/pages/home/home.component.html
index 1deea0c6d..97b2c6c9c 100644
--- a/apps/webstore/src/app/pages/home/home.component.html
+++ b/apps/webstore/src/app/pages/home/home.component.html
@@ -200,16 +200,5 @@ <h3 i18n="@@quality">Quality</h3>
                 </div>
             </div>
         </section>
-
-        <div class="arrow-up-container" [ngClass]="showUpArrow ? 'show' : 'hide'">
-            <div class="arrow-up-item" (click)="scrollTop(); eventsService.create('webstore.home.clicked.scroll-top')">
-                <button class="up-arrow">
-                    <div class="icon">
-                        <div class="up-bar1"></div>
-                        <div class="up-bar2"></div>
-                    </div>
-                </button>
-            </div>
-        </div>
     </div>
 </main>
diff --git a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html b/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
index 60e4f5446..881d27c38 100644
--- a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
+++ b/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
@@ -9,6 +9,38 @@
             >
                 < <span i18n="@@back">Back</span>
             </a>
+
+            <div class="view-button-container">
+                <div class="view-button view-section">
+                    <button
+                        class="toggle-box-options tc-button-square view"
+                        type="button"
+                        (click)="
+                            toggleBoxOptions();
+                            eventsService.create('webstore.family-tree.clicked.toggle-showing-options')
+                        "
+                        title="Hide/Show box options"
+                    >
+                        <img
+                            class="toggle-box-options-icon"
+                            [ngClass]="{ active: !isMobileOptionOpen }"
+                            alt="Toggle box options"
+                            [src]="toggleBoxOptionsIcon"
+                        />
+                    </button>
+                    <button
+                        class="intro-modal-option tc-button-square"
+                        type="button"
+                        (click)="
+                            openIntroModal(); eventsService.create('webstore.family-tree.clicked.open-intro-modal')
+                        "
+                        title="Hide/Show box options"
+                        data-cy="family-tree-intro-modal-option-button"
+                    >
+                        ?
+                    </button>
+                </div>
+            </div>
         </div>
         <webstore-family-tree-design
             #familyTreeDesignCanvas
@@ -30,17 +62,13 @@
     </div>
     <!-- END CY TESTS -->
 
-    <aside
-        [ngClass]="isMobileOptionOpen ? 'mobile-options-container' : 'desktop-options-container'"
-        *ngIf="isMutable"
-        data-cy="product-options"
-    >
+    <aside [ngClass]="{ 'desktop-options-container': !isMobileOptionOpen }" *ngIf="isMutable" data-cy="product-options">
         <div
             class="blocker"
             *ngIf="isMobileOptionOpen"
             (click)="showOptions(); eventsService.create('webstore.family-tree.clicked.show-options.mobile-background')"
         ></div>
-        <menu [ngClass]="isMobileOptionOpen ? 'mobile-options-items' : ''">
+        <menu [ngClass]="{ 'mobile-options-items': isMobileOptionOpen }">
             <div class="option option-font-select">
                 <div class="option-title">
                     Font
@@ -232,27 +260,5 @@
         >
             <img class="toggle-box-options-icon" alt="Option icon" src="/assets/icons/pen-icon.svg" />
         </button>
-        <button
-            class="toggle-box-options tc-button-square view"
-            type="button"
-            (click)="toggleBoxOptions(); eventsService.create('webstore.family-tree.clicked.toggle-showing-options')"
-            title="Hide/Show box options"
-        >
-            <img
-                class="toggle-box-options-icon"
-                [ngClass]="!isMobileOptionOpen ? '' : 'active'"
-                alt="Toggle box options"
-                [src]="toggleBoxOptionsIcon"
-            />
-        </button>
-        <button
-            class="intro-modal-option tc-button-square"
-            type="button"
-            (click)="openIntroModal(); eventsService.create('webstore.family-tree.clicked.open-intro-modal')"
-            title="Hide/Show box options"
-            data-cy="family-tree-intro-modal-option-button"
-        >
-            ?
-        </button>
     </div>
 </div>
diff --git a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.scss b/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.scss
index 0234c8f77..2fb82abe9 100644
--- a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.scss
+++ b/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.scss
@@ -31,3 +31,7 @@
 .back-container {
   padding: 0;
 }
+
+.view-section {
+  display: flex;
+}
diff --git a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html
index e95903a69..20d8d3d82 100644
--- a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html
+++ b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html
@@ -10,6 +10,25 @@
             >
                 < <span i18n="@@back">Back</span>
             </a>
+
+            <div class="view-button-container">
+                <button
+                    class="toggle-box-options tc-button-square view view-button"
+                    type="button"
+                    (click)="
+                        toggleUserOptions(); eventsService.create('webstore.pet-sign.clicked.toggle-showing-options')
+                    "
+                    title="Hide/Show box options"
+                    data-cy="hide-pet-sign-options"
+                >
+                    <img
+                        class="toggle-box-options-icon"
+                        [ngClass]="{ active: !isMobileOptionOpen }"
+                        alt="Toggle box options"
+                        [src]="toggleUserOptionsIcon"
+                    />
+                </button>
+            </div>
         </div>
         <webstore-pet-sign-design
             #petSignDesign
@@ -45,122 +64,116 @@
     </section>
 
     <!-- Options -->
-    <aside [ngClass]="isMobileOptionOpen ? 'mobile-options-container' : 'desktop-options-container'" *ngIf="isMutable">
+    <aside [ngClass]="{ 'desktop-options-container': !isMobileOptionOpen }" *ngIf="isMutable">
         <div
             class="blocker"
             *ngIf="isMobileOptionOpen"
             (click)="showOptions(); eventsService.create('webstore.pet-sign.clicked.show-options.mobile-background')"
         ></div>
-        <div [ngClass]="isMobileOptionOpen ? 'mobile-options-container' : ''">
-            <menu [ngClass]="isMobileOptionOpen ? 'mobile-options-items' : ''">
-                <!-- ====== Font selection ====== -->
-                <div class="option option-font-select">
-                    <div class="option-title">
-                        Font
-                        <webstore-info-popover
-                            title="Font"
-                            text="{{
-                                isEnglish()
-                                    ? 'Choose the font that best suits you.'
-                                    : 'Vælg hvilken font der passer dig bedst. '
-                            }}"
-                        ></webstore-info-popover>
-                    </div>
-                    <div class="option-frame-design-btn">
-                        <div ngbDropdown class="font-dropdown-container" data-cy="font-select-option">
-                            <button class="btn" ngbDropdownToggle [ngStyle]="{ 'font-family': displayFont }">
-                                {{ displayFont }}
-                            </button>
-                            <div ngbDropdownMenu>
-                                <button
-                                    (click)="changeFont(font)"
-                                    ngbDropdownItem
-                                    *ngFor="let font of fontOptions"
-                                    [ngStyle]="{ 'font-family': font.value }"
-                                >
-                                    {{ font.key }}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
+        <menu [ngClass]="{ 'mobile-options-items': isMobileOptionOpen }">
+            <!-- ====== Font selection ====== -->
+            <div class="option option-font-select">
+                <div class="option-title">
+                    Font
+                    <webstore-info-popover
+                        title="Font"
+                        text="{{
+                            isEnglish()
+                                ? 'Choose the font that best suits you.'
+                                : 'Vælg hvilken font der passer dig bedst. '
+                        }}"
+                    ></webstore-info-popover>
                 </div>
-
-                <!-- ====== Design selection option ====== -->
-                <div class="option option-frame-design">
-                    <div class="option-title">
-                        Design
-                        <webstore-info-popover
-                            title="Design"
-                            text="{{
-                                isEnglish()
-                                    ? 'Choose the frame you like the most.'
-                                    : 'Vælg den ramme der passer dig bedst.'
-                            }}"
-                        ></webstore-info-popover>
-                    </div>
-                    <div class="option-frame-design-btn">
-                        <button
-                            class="design-arrow-left tc-button-sm-square"
-                            (click)="changeDesign('prev')"
-                            data-cy="prev-design-button"
-                        >
-                            <span class="arrow-left"></span>
+                <div class="option-frame-design-btn">
+                    <div ngbDropdown class="font-dropdown-container" data-cy="font-select-option">
+                        <button class="btn" ngbDropdownToggle [ngStyle]="{ 'font-family': displayFont }">
+                            {{ displayFont }}
                         </button>
-                        <div class="display display-design">
-                            {{ getDesignName() }}
+                        <div ngbDropdownMenu>
+                            <button
+                                (click)="changeFont(font)"
+                                ngbDropdownItem
+                                *ngFor="let font of fontOptions"
+                                [ngStyle]="{ 'font-family': font.value }"
+                            >
+                                {{ font.key }}
+                            </button>
                         </div>
-                        <button
-                            class="design-arrow-right tc-button-sm-square"
-                            (click)="changeDesign('next')"
-                            [disabled]="!isMutable"
-                            data-cy="next-design-button"
-                        >
-                            <span class="arrow-right"></span>
-                        </button>
                     </div>
                 </div>
+            </div>
 
-                <!-- ====== Save and reset buttons ====== -->
-                <div class="option option-actions">
+            <!-- ====== Design selection option ====== -->
+            <div class="option option-frame-design">
+                <div class="option-title">
+                    Design
+                    <webstore-info-popover
+                        title="Design"
+                        text="{{
+                            isEnglish() ? 'Choose the frame you like the most.' : 'Vælg den ramme der passer dig bedst.'
+                        }}"
+                    ></webstore-info-popover>
+                </div>
+                <div class="option-frame-design-btn">
                     <button
-                        class="btn-save-design tc-button-50"
-                        (click)="
-                            saveDesign({ persists: true });
-                            eventsService.create('webstore.pet-sign.clicked.save-design')
-                        "
-                        [disabled]="!isDesignValid"
-                        data-cy="save-button"
+                        class="design-arrow-left tc-button-sm-square"
+                        (click)="changeDesign('prev')"
+                        data-cy="prev-design-button"
                     >
-                        <span i18n="@@save">Save</span>
-                        <img src="/assets/icons/save-icon.svg" class="option-icon" alt="Save icon" />
+                        <span class="arrow-left"></span>
                     </button>
+                    <div class="display display-design">
+                        {{ getDesignName() }}
+                    </div>
                     <button
-                        class="tc-button-50"
-                        (click)="clearDesign(); eventsService.create('webstore.pet-sign.clicked.reset')"
-                        data-cy="reset-button"
+                        class="design-arrow-right tc-button-sm-square"
+                        (click)="changeDesign('next')"
+                        [disabled]="!isMutable"
+                        data-cy="next-design-button"
                     >
-                        <span i18n="@@reset">Reset</span>
-                        <img src="/assets/icons/reset-icon.svg" class="option-icon" alt="Reset icon" />
+                        <span class="arrow-right"></span>
                     </button>
                 </div>
+            </div>
 
-                <!-- ====== Add to Basket button ====== -->
-                <div class="option">
-                    <button
-                        class="tc-button-100 green remove-on-mobile"
-                        (click)="
-                            openAddToBasketModal();
-                            eventsService.create('webstore.pet-sign.clicked.add-to-basket.desktop')
-                        "
-                        [disabled]="!isDesignValid"
-                        data-cy="add-pet-sign-to-basket-button"
-                    >
-                        <span i18n="@@add">Add</span>
-                        <img src="/assets/icons/basket-white-icon.svg" class="option-icon" alt="Basket icon" />
-                    </button>
-                </div>
-            </menu>
-        </div>
+            <!-- ====== Save and reset buttons ====== -->
+            <div class="option option-actions">
+                <button
+                    class="btn-save-design tc-button-50"
+                    (click)="
+                        saveDesign({ persists: true }); eventsService.create('webstore.pet-sign.clicked.save-design')
+                    "
+                    [disabled]="!isDesignValid"
+                    data-cy="save-button"
+                >
+                    <span i18n="@@save">Save</span>
+                    <img src="/assets/icons/save-icon.svg" class="option-icon" alt="Save icon" />
+                </button>
+                <button
+                    class="tc-button-50"
+                    (click)="clearDesign(); eventsService.create('webstore.pet-sign.clicked.reset')"
+                    data-cy="reset-button"
+                >
+                    <span i18n="@@reset">Reset</span>
+                    <img src="/assets/icons/reset-icon.svg" class="option-icon" alt="Reset icon" />
+                </button>
+            </div>
+
+            <!-- ====== Add to Basket button ====== -->
+            <div class="option">
+                <button
+                    class="tc-button-100 green remove-on-mobile"
+                    (click)="
+                        openAddToBasketModal(); eventsService.create('webstore.pet-sign.clicked.add-to-basket.desktop')
+                    "
+                    [disabled]="!isDesignValid"
+                    data-cy="add-pet-sign-to-basket-button"
+                >
+                    <span i18n="@@add">Add</span>
+                    <img src="/assets/icons/basket-white-icon.svg" class="option-icon" alt="Basket icon" />
+                </button>
+            </div>
+        </menu>
     </aside>
 </main>
 <!-- Floating icons -->
@@ -179,19 +192,5 @@
         >
             <img class="toggle-box-options-icon" alt="Option icon" src="/assets/icons/pen-icon.svg" />
         </button>
-        <button
-            class="toggle-box-options tc-button-square view"
-            type="button"
-            (click)="toggleUserOptions(); eventsService.create('webstore.pet-sign.clicked.toggle-showing-options')"
-            title="Hide/Show box options"
-            data-cy="hide-pet-sign-options"
-        >
-            <img
-                class="toggle-box-options-icon"
-                [ngClass]="!isMobileOptionOpen ? '' : 'active'"
-                alt="Toggle box options"
-                [src]="toggleUserOptionsIcon"
-            />
-        </button>
     </div>
 </div>
diff --git a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.scss b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.scss
index 27e3cee87..2d09ba296 100644
--- a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.scss
+++ b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.scss
@@ -38,3 +38,7 @@
   position: relative;
   top: -51%;
 }
+
+.view-button {
+  right: -5px !important;
+}
diff --git a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
index 4ff02c0be..84aa7aba8 100644
--- a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
+++ b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
@@ -10,6 +10,24 @@
             >
                 < <span i18n="@@back">Back</span>
             </a>
+            <div class="view-button-container">
+                <button
+                    class="toggle-box-options tc-button-square view view-button"
+                    type="button"
+                    (click)="
+                        toggleUserOptions(); eventsService.create('webstore.quotable.clicked.toggle-showing-options')
+                    "
+                    title="Hide/Show box options"
+                    data-cy="hide-quotable-options"
+                >
+                    <img
+                        class="toggle-box-options-icon"
+                        [ngClass]="{ active: !isMobileOptionOpen }"
+                        alt="Toggle box options"
+                        [src]="toggleUserOptionsIcon"
+                    />
+                </button>
+            </div>
         </div>
         <webstore-quotable-design
             #quotableDesign
@@ -46,156 +64,149 @@
     </section>
 
     <!-- Options -->
-    <aside [ngClass]="isMobileOptionOpen ? 'mobile-options-container' : 'desktop-options-container'" *ngIf="isMutable">
+    <aside [ngClass]="{ 'desktop-options-container': !isMobileOptionOpen }" *ngIf="isMutable">
         <div
             class="blocker"
             *ngIf="isMobileOptionOpen"
             (click)="showOptions(); eventsService.create('webstore.quotable.clicked.show-options.mobile-background')"
         ></div>
-        <div [ngClass]="isMobileOptionOpen ? 'mobile-options-container' : ''">
-            <menu [ngClass]="isMobileOptionOpen ? 'mobile-options-items' : ''">
-                <!-- ====== Font selection ====== -->
-                <div class="option option-font-select">
-                    <div class="option-title">
-                        Font
-                        <webstore-info-popover
-                            title="Font"
-                            text="{{
-                                isEnglish()
-                                    ? 'Choose the font that best suits you.'
-                                    : 'Vælg hvilken font der passer dig bedst. '
-                            }}"
-                        ></webstore-info-popover>
-                    </div>
-                    <div class="option-frame-design-btn">
-                        <div ngbDropdown class="font-dropdown-container" data-cy="font-select-option">
-                            <button class="btn" ngbDropdownToggle [ngStyle]="{ 'font-family': displayFont }">
-                                {{ displayFont }}
-                            </button>
-                            <div ngbDropdownMenu>
-                                <button
-                                    (click)="changeFont(font)"
-                                    ngbDropdownItem
-                                    *ngFor="let font of fontOptions"
-                                    [ngStyle]="{ 'font-family': font.value }"
-                                >
-                                    {{ font.key }}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
+        <menu [ngClass]="{ 'mobile-options-items': isMobileOptionOpen }">
+            <!-- ====== Font selection ====== -->
+            <div class="option option-font-select">
+                <div class="option-title">
+                    Font
+                    <webstore-info-popover
+                        title="Font"
+                        text="{{
+                            isEnglish()
+                                ? 'Choose the font that best suits you.'
+                                : 'Vælg hvilken font der passer dig bedst. '
+                        }}"
+                    ></webstore-info-popover>
                 </div>
-
-                <!-- ====== Design selection option ====== -->
-                <div class="option option-frame-design">
-                    <div class="option-title">
-                        Design
-                        <webstore-info-popover
-                            title="Design"
-                            text="{{
-                                isEnglish()
-                                    ? 'Choose the frame you like the most.'
-                                    : 'Vælg den ramme der passer dig bedst.'
-                            }}"
-                        ></webstore-info-popover>
-                    </div>
-                    <div class="option-frame-design-btn">
-                        <button
-                            class="design-arrow-left tc-button-sm-square"
-                            (click)="changeDesign('prev')"
-                            data-cy="prev-design-button"
-                        >
-                            <span class="arrow-left"></span>
+                <div class="option-frame-design-btn">
+                    <div ngbDropdown class="font-dropdown-container" data-cy="font-select-option">
+                        <button class="btn" ngbDropdownToggle [ngStyle]="{ 'font-family': displayFont }">
+                            {{ displayFont }}
                         </button>
-                        <div class="display display-design">
-                            {{ getDesignName() }}
+                        <div ngbDropdownMenu>
+                            <button
+                                (click)="changeFont(font)"
+                                ngbDropdownItem
+                                *ngFor="let font of fontOptions"
+                                [ngStyle]="{ 'font-family': font.value }"
+                            >
+                                {{ font.key }}
+                            </button>
                         </div>
-                        <button
-                            class="design-arrow-right tc-button-sm-square"
-                            (click)="changeDesign('next')"
-                            [disabled]="!isMutable"
-                            data-cy="next-design-button"
-                        >
-                            <span class="arrow-right"></span>
-                        </button>
                     </div>
                 </div>
+            </div>
 
-                <!-- ====== Font size change ====== -->
-                <div class="option option-font-size">
-                    <div class="option-title">
-                        <span i18n="@@font-size">Font Size</span>
-                        <webstore-info-popover
-                            title="{{ isEnglish() ? 'Font size' : 'Font størrelse' }}"
-                            text="{{
-                                isEnglish()
-                                    ? 'You can increase or decrease the size of the font. Make them larger for better visibility of your design.'
-                                    : 'Du kan gøre fonten større og mindre. Gør dem større for et mere tydeligt print.'
-                            }}"
-                        ></webstore-info-popover>
-                        <ngx-slider
-                            (userChange)="changeFontSize()"
-                            [(value)]="design.fontSize"
-                            [options]="fontSizeOptions"
-                            data-cy="font-size-slider"
-                        ></ngx-slider>
-                    </div>
+            <!-- ====== Design selection option ====== -->
+            <div class="option option-frame-design">
+                <div class="option-title">
+                    Design
+                    <webstore-info-popover
+                        title="Design"
+                        text="{{
+                            isEnglish() ? 'Choose the frame you like the most.' : 'Vælg den ramme der passer dig bedst.'
+                        }}"
+                    ></webstore-info-popover>
                 </div>
-
-                <!-- ====== Save and reset buttons ====== -->
-                <div class="option option-actions">
+                <div class="option-frame-design-btn">
                     <button
-                        class="btn-save-design tc-button-50"
-                        (click)="
-                            saveDesign({ persists: true });
-                            eventsService.create('webstore.quotable.clicked.save-design')
-                        "
-                        [disabled]="!isDesignValid"
-                        data-cy="save-button"
+                        class="design-arrow-left tc-button-sm-square"
+                        (click)="changeDesign('prev')"
+                        data-cy="prev-design-button"
                     >
-                        <span i18n="@@save">Save</span>
-                        <img src="/assets/icons/save-icon.svg" class="option-icon" alt="Save icon" />
+                        <span class="arrow-left"></span>
                     </button>
+                    <div class="display display-design">
+                        {{ getDesignName() }}
+                    </div>
                     <button
-                        class="tc-button-50"
-                        (click)="clearDesign(); eventsService.create('webstore.quotable.clicked.reset')"
-                        data-cy="reset-button"
+                        class="design-arrow-right tc-button-sm-square"
+                        (click)="changeDesign('next')"
+                        [disabled]="!isMutable"
+                        data-cy="next-design-button"
                     >
-                        <span i18n="@@reset">Reset</span>
-                        <img src="/assets/icons/reset-icon.svg" class="option-icon" alt="Reset icon" />
+                        <span class="arrow-right"></span>
                     </button>
                 </div>
+            </div>
 
-                <!-- ====== Add to Basket button ====== -->
-                <div class="option">
-                    <button
-                        class="tc-button-100"
-                        (click)="
-                            openQuotableTemplateModal();
-                            eventsService.create('webstore.quotable.clicked.select-template')
-                        "
-                        data-cy="quotable-template-button"
-                    >
-                        <span i18n="@@select-a-template">Select a template</span>
-                        <img src="/assets/icons/template-icon.svg" class="option-icon" alt="Option icon" />
-                    </button>
-                </div>
-                <div class="option">
-                    <button
-                        class="tc-button-100 green remove-on-mobile"
-                        (click)="
-                            openAddToBasketModal();
-                            eventsService.create('webstore.quotable.clicked.add-to-basket.desktop')
-                        "
-                        [disabled]="!isDesignValid"
-                        data-cy="add-quotable-to-basket-button"
-                    >
-                        <span i18n="@@add">Add</span>
-                        <img src="/assets/icons/basket-white-icon.svg" class="option-icon" alt="Basket icon" />
-                    </button>
+            <!-- ====== Font size change ====== -->
+            <div class="option option-font-size">
+                <div class="option-title">
+                    <span i18n="@@font-size">Font Size</span>
+                    <webstore-info-popover
+                        title="{{ isEnglish() ? 'Font size' : 'Font størrelse' }}"
+                        text="{{
+                            isEnglish()
+                                ? 'You can increase or decrease the size of the font. Make them larger for better visibility of your design.'
+                                : 'Du kan gøre fonten større og mindre. Gør dem større for et mere tydeligt print.'
+                        }}"
+                    ></webstore-info-popover>
+                    <ngx-slider
+                        (userChange)="changeFontSize()"
+                        [(value)]="design.fontSize"
+                        [options]="fontSizeOptions"
+                        data-cy="font-size-slider"
+                    ></ngx-slider>
                 </div>
-            </menu>
-        </div>
+            </div>
+
+            <!-- ====== Save and reset buttons ====== -->
+            <div class="option option-actions">
+                <button
+                    class="btn-save-design tc-button-50"
+                    (click)="
+                        saveDesign({ persists: true }); eventsService.create('webstore.quotable.clicked.save-design')
+                    "
+                    [disabled]="!isDesignValid"
+                    data-cy="save-button"
+                >
+                    <span i18n="@@save">Save</span>
+                    <img src="/assets/icons/save-icon.svg" class="option-icon" alt="Save icon" />
+                </button>
+                <button
+                    class="tc-button-50"
+                    (click)="clearDesign(); eventsService.create('webstore.quotable.clicked.reset')"
+                    data-cy="reset-button"
+                >
+                    <span i18n="@@reset">Reset</span>
+                    <img src="/assets/icons/reset-icon.svg" class="option-icon" alt="Reset icon" />
+                </button>
+            </div>
+
+            <!-- ====== Add to Basket button ====== -->
+            <div class="option">
+                <button
+                    class="tc-button-100"
+                    (click)="
+                        openQuotableTemplateModal(); eventsService.create('webstore.quotable.clicked.select-template')
+                    "
+                    data-cy="quotable-template-button"
+                >
+                    <span i18n="@@select-a-template">Select a template</span>
+                    <img src="/assets/icons/template-icon.svg" class="option-icon" alt="Option icon" />
+                </button>
+            </div>
+            <div class="option">
+                <button
+                    class="tc-button-100 green remove-on-mobile"
+                    (click)="
+                        openAddToBasketModal(); eventsService.create('webstore.quotable.clicked.add-to-basket.desktop')
+                    "
+                    [disabled]="!isDesignValid"
+                    data-cy="add-quotable-to-basket-button"
+                >
+                    <span i18n="@@add">Add</span>
+                    <img src="/assets/icons/basket-white-icon.svg" class="option-icon" alt="Basket icon" />
+                </button>
+            </div>
+        </menu>
     </aside>
 </main>
 <!-- Floating icons -->
@@ -214,19 +225,5 @@
         >
             <img class="toggle-box-options-icon" alt="Option icon" src="/assets/icons/pen-icon.svg" />
         </button>
-        <button
-            class="toggle-box-options tc-button-square view"
-            type="button"
-            (click)="toggleUserOptions(); eventsService.create('webstore.quotable.clicked.toggle-showing-options')"
-            title="Hide/Show box options"
-            data-cy="hide-quotable-options"
-        >
-            <img
-                class="toggle-box-options-icon"
-                [ngClass]="!isMobileOptionOpen ? '' : 'active'"
-                alt="Toggle box options"
-                [src]="toggleUserOptionsIcon"
-            />
-        </button>
     </div>
 </div>
diff --git a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.scss b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.scss
index 27e3cee87..2d09ba296 100644
--- a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.scss
+++ b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.scss
@@ -38,3 +38,7 @@
   position: relative;
   top: -51%;
 }
+
+.view-button {
+  right: -5px !important;
+}
diff --git a/apps/webstore/src/app/shared/components/products/pet-sign-design/pet-sign-design.component.html b/apps/webstore/src/app/shared/components/products/pet-sign-design/pet-sign-design.component.html
index bd405fc77..fd717182e 100644
--- a/apps/webstore/src/app/shared/components/products/pet-sign-design/pet-sign-design.component.html
+++ b/apps/webstore/src/app/shared/components/products/pet-sign-design/pet-sign-design.component.html
@@ -10,7 +10,7 @@
                 cdkAutosizeMinRows="1"
                 cdkAutosizeMaxRows="25"
                 spellcheck="false"
-                [ngStyle]="{ 'font-size': fontSize * 2 + 'px' }"
+                [ngStyle]="{ 'font-size': fontSize * 2.5 + 'px' }"
                 [maxlength]="150"
                 autocomplete="off"
                 [ngModel]="design.title ?? ''"
diff --git a/apps/webstore/src/assets/styles/product-options.scss b/apps/webstore/src/assets/styles/product-options.scss
index 49739027c..a8e30a076 100644
--- a/apps/webstore/src/assets/styles/product-options.scss
+++ b/apps/webstore/src/assets/styles/product-options.scss
@@ -149,6 +149,7 @@
 .mobile-options {
   display: flex;
   flex-direction: row-reverse;
+  justify-content: center;
   margin-right: 10px;
 }
 
@@ -182,6 +183,8 @@
   background: white;
   padding: 10px 25px 20px 25px;
   z-index: 1000;
+  align-items: center;
+  justify-content: center;
 }
 
 .remove {
@@ -255,7 +258,8 @@
   }
 
   .mobile-option-buttons-container {
-    right: 1em;
+    display: flex;
+    justify-content: center;
   }
 
   .mobile-options {
diff --git a/apps/webstore/src/index.html b/apps/webstore/src/index.html
index 56f2c14bb..d6a9fb5bd 100644
--- a/apps/webstore/src/index.html
+++ b/apps/webstore/src/index.html
@@ -53,6 +53,38 @@
             gtag('config', 'G-X852EK18T4'); // testing.treecreate.dk gtagId
         </script>
         <!-- End google analytics -->
+        <!-- Messenger Chat Plugin Code -->
+        <div id="fb-root"></div>
+
+        <!-- Meta Chat Plugin code -->
+        <div id="fb-customer-chat" class="fb-customerchat"></div>
+
+        <script>
+            var chatbox = document.getElementById('fb-customer-chat');
+            chatbox.setAttribute('page_id', '111729197337915');
+            chatbox.setAttribute('attribution', 'biz_inbox');
+        </script>
+
+        <!-- Your SDK code -->
+        <script>
+            window.fbAsyncInit = function () {
+                FB.init({
+                    xfbml: true,
+                    version: 'v15.0',
+                });
+            };
+
+            (function (d, s, id) {
+                var js,
+                    fjs = d.getElementsByTagName(s)[0];
+                if (d.getElementById(id)) return;
+                js = d.createElement(s);
+                js.id = id;
+                js.src = 'https://connect.facebook.net/da_DK/sdk/xfbml.customerchat.js';
+                fjs.parentNode.insertBefore(js, fjs);
+            })(document, 'script', 'facebook-jssdk');
+        </script>
+        <!-- End Meta Chat Plugin code -->
 
         <!-- load fonts -->
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Share+Tech" />
diff --git a/apps/webstore/src/index.prod.html b/apps/webstore/src/index.prod.html
index d1af6e4c6..5a57c30a4 100644
--- a/apps/webstore/src/index.prod.html
+++ b/apps/webstore/src/index.prod.html
@@ -66,6 +66,38 @@
             gtag('config', 'UA-182084333-1'); // treecreate.dk gtagId
         </script>
         <!-- End google analytics -->
+        <!-- Messenger Chat Plugin Code -->
+        <div id="fb-root"></div>
+
+        <!-- Meta Chat Plugin code -->
+        <div id="fb-customer-chat" class="fb-customerchat"></div>
+
+        <script>
+            var chatbox = document.getElementById('fb-customer-chat');
+            chatbox.setAttribute('page_id', '111729197337915');
+            chatbox.setAttribute('attribution', 'biz_inbox');
+        </script>
+
+        <!-- Your SDK code -->
+        <script>
+            window.fbAsyncInit = function () {
+                FB.init({
+                    xfbml: true,
+                    version: 'v15.0',
+                });
+            };
+
+            (function (d, s, id) {
+                var js,
+                    fjs = d.getElementsByTagName(s)[0];
+                if (d.getElementById(id)) return;
+                js = d.createElement(s);
+                js.id = id;
+                js.src = 'https://connect.facebook.net/da_DK/sdk/xfbml.customerchat.js';
+                fjs.parentNode.insertBefore(js, fjs);
+            })(document, 'script', 'facebook-jssdk');
+        </script>
+        <!-- End Meta Chat Plugin code -->
     </head>
 
     <body>
diff --git a/apps/webstore/src/styles.css b/apps/webstore/src/styles.css
index cad681085..05aeb2a16 100644
--- a/apps/webstore/src/styles.css
+++ b/apps/webstore/src/styles.css
@@ -208,6 +208,19 @@ hr {
   text-align: left;
   width: 100%;
   padding-left: 10px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.view-button {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}
+
+.view-button-container {
+  position: relative;
+  bottom: 20px;
 }
 
 @media screen and (max-width: 600px) {