diff --git a/index.html b/index.html
index a680d69..fc04d9b 100644
--- a/index.html
+++ b/index.html
@@ -712,7 +712,7 @@
                 <h2>Complaints</h2>
             </div>
             <h5 class="label">Select Cashier</h5>
-            <sm-select name="cashier" id="select_cashier"></sm-select>
+            <sm-strip-select name="cashier" id="select_cashier"></sm-strip-select>
             <sm-tabs>
                 <sm-tab slot="tab" active>Deposit</sm-tab>
                 <sm-panel slot="panel" id="deposit_complaints_container" class="complaints-container">
@@ -1846,7 +1846,6 @@
 slot[name="tab"]{
     display: grid;
     grid-auto-flow: column;
-    gap: 1rem;
     grid-auto-columns: max-content;
 }
 :host([type="tab"]) .indicator{
@@ -1999,7 +1998,7 @@ slot[name="tab"]::slotted(.active){
                     e.target.nextElementSibling.classList.remove('hide-completely')
                 }
                 e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
-                this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width / 2}px; transform: translateX(${e.target.getBoundingClientRect().left - e.target.parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft + e.target.getBoundingClientRect().width / 4}px)`)
+                this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width}px; transform: translateX(${e.target.getBoundingClientRect().left - e.target.parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
                 this.prevTab = e.target;
             })
             let observer = new IntersectionObserver((entries) => {
@@ -2011,12 +2010,12 @@ slot[name="tab"]::slotted(.active){
                         })
                         if (activeElement.length) {
                             let tabDimensions = activeElement[0].getBoundingClientRect();
-                            this.indicator.setAttribute('style', `width: ${tabDimensions.width / 2}px; transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft + tabDimensions.width / 4}px)`)
+                            this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
                         }
                         else {
                             this.tabSlot.assignedElements()[0].classList.add('active')
                             let tabDimensions = this.tabSlot.assignedElements()[0].getBoundingClientRect();
-                            this.indicator.setAttribute('style', `width: ${tabDimensions.width / 2}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft + tabDimensions.width / 4}px)`)
+                            this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
                             this.prevTab = this.tabSlot.assignedElements()[0];
                         }
                         setTimeout(() => {
@@ -2050,14 +2049,12 @@ slot[name="tab"]::slotted(.active){
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     white-space: nowrap;
-    font-size: 0.9rem;
-    padding: 0.4rem 0;
-    font-weight: 600;
-    letter-spacing: 0.06em;
+    padding: 0.6rem 0.8rem;
+    font-weight: 500;
     word-spacing: 0.1em;
     text-align: center;
     transition: color 0.3s;
-    text-transform: uppercase;
+    text-transform: capitalize;
     font-family: var(--font-family);
 }
 </style>
@@ -2087,6 +2084,145 @@ slot[name="tab"]::slotted(.active){
         }
     })
 
+    // sm-select
+        const smStripSelect = document.createElement('template')
+        smStripSelect.innerHTML = `
+        <style>     
+            *{
+                padding: 0;
+                margin: 0;
+                box-sizing: border-box;
+            }    
+            :host{
+                display: flex;
+            }
+            ::-webkit-scrollbar-track {
+                -webkit-box-shadow: none !important;
+                background-color: transparent !important;
+            }
+            ::-webkit-scrollbar {
+                height: 0;
+                background-color: transparent;
+            }
+            .sm-select{
+                position: relative;
+                display: grid;
+                gap: 0.5rem;
+                grid-auto-flow: column;
+                grid-auto-columns: max-content;
+                max-width: 100%;
+                overflow: auto hidden;
+                margin: 0.6rem 0;
+            }
+            slot::slotted(.active){
+                border-radius: 2rem;
+                background-color: rgba(var(--text), .16);  
+            }
+        </style>
+        <div class="sm-select">
+            <slot></slot> 
+        </div>`;
+        customElements.define('sm-strip-select', class extends HTMLElement {
+            constructor() {
+                super()
+                this.attachShadow({ mode: 'open' }).append(smStripSelect.content.cloneNode(true))
+            }
+            static get observedAttributes() {
+                return ['value']
+            }
+            get value() {
+                return this.getAttribute('value')
+            }
+            set value(val) {
+                this.setAttribute('value', val)
+            }
+            connectedCallback() {
+                let previousOption,
+                    slot = this.shadowRoot.querySelector('slot');
+                this.addEventListener('optionSelected', e => {
+                    if (previousOption === e.target) return;
+                    if (previousOption)
+                        previousOption.classList.remove('active')
+                    e.target.classList.add('active')
+                    e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+                    this.setAttribute('value', e.detail.value)
+                    this.dispatchEvent(new CustomEvent('change', {
+                        bubbles: true,
+                        composed: true
+                    }))
+                    previousOption = e.target;
+                })
+                slot.addEventListener('slotchange', e => {
+                    if (slot.assignedElements()[0]) {
+                        let firstElement = slot.assignedElements()[0];
+                        this.setAttribute('value', firstElement.getAttribute('value'))
+                        firstElement.classList.add('active')
+                        previousOption = firstElement;
+                    }
+                });
+            }
+        })
+
+        // sm-option
+        const smStripOption = document.createElement('template')
+        smStripOption.innerHTML = `
+        <style>     
+            *{
+                padding: 0;
+                margin: 0;
+                box-sizing: border-box;
+            }     
+            :host{
+                display: flex;
+            }
+            .sm-option{
+                padding: 0.6rem 1rem;
+                cursor: pointer;
+                overflow-wrap: break-word;
+                outline: none;
+                border-radius: 2rem;
+                text-transform: capitalize;
+            }
+            .sm-option:hover{
+                background: rgba(var(--text), 0.1);
+            }
+        </style>
+        <div class="sm-option" tabindex="0">
+            <slot></slot> 
+        </div>`;
+        customElements.define('sm-strip-option', class extends HTMLElement {
+            constructor() {
+                super()
+                this.attachShadow({ mode: 'open' }).append(smStripOption.content.cloneNode(true))
+            }
+            connectedCallback() {
+                this.addEventListener('click', e => {
+                    let optionSelected = new CustomEvent('optionSelected', {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            text: this.textContent,
+                            value: this.getAttribute('value')
+                        }
+                    })
+                    this.dispatchEvent(optionSelected)
+                })
+                if (this.hasAttribute('default')) {
+                    setTimeout(() => {
+                        let optionSelected = new CustomEvent('optionSelected', {
+                            bubbles: true,
+                            composed: true,
+                            detail: {
+                                text: this.textContent,
+                                value: this.getAttribute('value')
+                            }
+                        })
+                        this.dispatchEvent(optionSelected)
+                    }, 0);
+                }
+            }
+        })
+
     </script>
     <script id="init_lib">
         //All util libraries required for Standard operations (DO NOT EDIT ANY)
@@ -11492,7 +11628,7 @@ slot[name="tab"]::slotted(.active){
                     let cashierList = ``,
                         cashierSelect = document.getElementById('select_cashier')
                     for (cashier in token_app.master_configurations.cashiers)
-                        cashierList += `<sm-option value = "${cashier}">${cashier}</sm-option>`
+                        cashierList += `<sm-strip-option value = "${cashier}">${cashier}</sm-strip-option>`
                     cashierSelect.innerHTML = cashierList;
                     await Promise.all([load_deposit_complaints(cashierSelect.value), load_withdraw_complaints(cashierSelect.value), load_pay_thru_cashier_complaints(cashierSelect.value)])
                     userType.textContent = 'Helpline'