diff --git a/components.js b/components.js
index 7677df0..a14c1b7 100644
--- a/components.js
+++ b/components.js
@@ -3631,3 +3631,226 @@ customElements.define('sm-tab-panels', class extends HTMLElement {
         })
     }
 })
+
+
+const scrollTabHeader = document.createElement('template')
+scrollTabHeader.innerHTML = `
+    <style>
+        *{
+            padding: 0;
+            margin: 0;
+            -webkit-box-sizing: border-box;
+                    box-sizing: border-box;
+        }   
+        :host{
+            gap: 1rem;
+            --padding: 0;
+            --border-radius: 0.3rem;
+            --background: rgba(var(--foreground-color), 1);
+        }
+        .tab-header{
+            display: grid;
+            gap: var(--gap);
+            padding: var(--padding);
+            border-radius: var(--border-radius);
+            background: var(--background);
+        }
+    </style>
+    <div class="tab-header">
+        <slot></slot>
+    </div>
+`
+customElements.define('scroll-tab-header', class extends HTMLElement{
+    constructor(){
+        super()
+        this.shadow = this.attachShadow({
+            mode: 'open'
+        })
+        this.shadow.append(scrollTabHeader.content.cloneNode(true))
+        this.tabHeader = this.shadow.querySelector('.tab-header')
+        this.tabHeaderSlot = this.shadow.querySelector('slot')
+        this.targetPanelGroup
+        this._assignedElements
+        this.activeTab
+    }
+    
+    fireEvent = (panelIndex) => {
+        this.dispatchEvent(new CustomEvent('changePanel', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                panelIndex,
+                targetPanelGroup: this.targetPanelGroup
+            }
+        }))
+    }
+
+    changeActiveTab = (tabIndex, fire = false) => {
+        if (this.activeTab)
+            this.activeTab.removeAttribute('active')
+        console.log(this._assignedElements, tabIndex)
+        this._assignedElements[tabIndex].setAttribute('active', '')
+        if(fire)
+            this.fireEvent(tabIndex)
+        this.activeTab = this._assignedElements[tabIndex]
+    }
+
+    handleClick = (e) => {
+        if (e.target.closest('[data-index]') && this.activeTab !== e.target.closest('[data-index]')) {
+            this.changeActiveTab(e.target.closest('[data-index]').dataset.index, true)
+        }
+    }
+
+    handleTabChange = (e) => {
+        if(this._assignedElements[e.detail.tabIndex] !== this.activeTab)
+            this.changeActiveTab(e.detail.tabIndex)            
+    }
+
+    connectedCallback() {
+        if (!this.dataset.target) return;
+
+        this.targetPanelGroup = this.dataset.target
+
+        this.tabHeaderSlot.addEventListener('slotchange', e => {
+            this._assignedElements = this.tabHeaderSlot.assignedElements()
+            this._assignedElements.forEach((elem, index) => {
+                elem.setAttribute('data-index', index)
+                if (elem.hasAttribute('active')) {
+                    this.changeActiveTab(elem.dataset.index, true)
+                }
+            })
+        })
+        this.tabHeader.addEventListener('click', this.handleClick)
+        document.addEventListener('changeTab', this.handleTabChange)
+    }
+    disconnectedCallbakc() {
+        this.tabHeader.removeEventListener('click', this.handleClick)
+    }
+})
+
+const scrollTabPanels = document.createElement('template')
+scrollTabPanels.innerHTML = `
+    <style>
+        *{
+            padding: 0;
+            margin: 0;
+            -webkit-box-sizing: border-box;
+                    box-sizing: border-box;
+        }   
+        :host{
+            --gap: 0;
+            --height: auto;
+            --border-radius: 0.3rem;
+            --background: rgba(var(--foreground-color), 1);
+        }
+        .tab-panels{
+            display: grid;
+            gap: var(--gap);
+            height: var(--height);
+            overflow-y: auto;
+            border-radius: var(--border-radius);
+            background: var(--background);
+            scroll-snap-type: y proximity;
+            scroll-behavior: smooth;
+        }
+        slot::slotted(*){
+            scroll-snap-align: start;
+        }
+        @media (any-hover: none){
+            ::-webkit-scrollbar-track {
+                -webkit-box-shadow: none !important;
+                background-color: transparent !important;
+            }
+            ::-webkit-scrollbar {
+                height: 0;
+                background-color: transparent;
+            }
+        }
+        @media (any-hover: hover){
+            ::-webkit-scrollbar{
+                width: 0.5rem;
+                height: 0.5rem;
+            }
+            
+            ::-webkit-scrollbar-thumb{
+                background: rgba(var(--text-color), 0.3);
+                border-radius: 1rem;
+                &:hover{
+                    background: rgba(var(--text-color), 0.5);
+                }
+            }
+        }
+    </style>
+    <div class="tab-panels">
+        <slot></slot>
+    </div>
+`
+customElements.define('scroll-tab-panels', class extends HTMLElement {
+    constructor() {
+        super()
+        this.shadow = this.attachShadow({
+            mode: 'open'
+        })
+        this.shadow.append(scrollTabPanels.content.cloneNode(true))
+        this.tabPanels = this.shadow.querySelector('.tab-panels')
+        this.tabPanelsSlot = this.shadow.querySelector('slot')
+        this._assignedElements
+        this.activePanel
+        this.debounceTimeout
+    }
+
+    fireEvent = (tabIndex) => {
+        this.dispatchEvent(new CustomEvent('changeTab', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                tabIndex
+            }
+        }))
+    }
+
+    handlePanelChange = (e) => {
+        if (e.detail.targetPanelGroup === this.id) {
+            this.tabPanels.scrollTo({
+                top: (this._assignedElements[e.detail.panelIndex].getBoundingClientRect().top - this.tabPanels.getBoundingClientRect().top + this.tabPanels.scrollTop),
+                behavior: 'smooth'
+            })
+        }
+    }
+    
+    connectedCallback() {
+        const panelObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    if (this.debounceTimeout) {
+                        clearTimeout(this.debounceTimeout)
+                    }
+                    this.debounceTimeout = setTimeout(() => {
+                        this.fireEvent(entry.target.dataset.index)
+                    }, 300);
+                }
+            })
+        },
+            {
+                threshold: 0.8,
+                root: this.tabPanels
+        })
+        this.tabPanels.addEventListener('slotchange', e => {
+            this._assignedElements = this.tabPanelsSlot.assignedElements()
+            console.log(this._assignedElements)
+            this._assignedElements.forEach((elem, index) => {
+                elem.setAttribute('data-index', index)
+                if (elem.hasAttribute('active')) {
+                    this.activePanel = elem
+                    this.fireEvent(elem.dataset.index)
+                }
+                panelObserver.observe(elem)
+            })
+        })
+        document.addEventListener('changePanel', this.handlePanelChange)
+    }
+    
+    disconnectedCallback() {
+        document.removeEventListener('changePanel', this.handlePanelChange)
+    }
+})
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index cc027c1..2636a23 100644
--- a/css/main.css
+++ b/css/main.css
@@ -18,11 +18,6 @@ body {
   height: calc(100%);
   font-size: clamp(1rem, 1.2vmax, 3rem);
   background: rgba(var(--text-color), 0.06);
-  display: grid;
-  grid-template-columns: 1rem 1fr 1rem;
-}
-body > * {
-  grid-column: 2/3;
 }
 
 body[data-theme=dark] {
@@ -42,12 +37,6 @@ body[data-theme=dark] .outlet-preview sm-carousel {
   border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7);
 }
 
-/* .font-mono{
-    font-family: 'Roboto Mono', sans-serif;
-}
-.font-slab{
-    font-family: 'Roboto slab', sans-serif;
-} */
 .full-bleed {
   grid-column: 1/4;
 }
@@ -452,7 +441,12 @@ ul {
 
 .page {
   position: relative;
-  padding: 0 1rem;
+  display: grid;
+  grid-template-columns: 1rem 1fr 1rem;
+  padding-bottom: 3rem;
+}
+.page > * {
+  grid-column: 2/3;
 }
 
 .tag {
@@ -465,9 +459,6 @@ ul {
 }
 
 #home_page {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
   overflow-y: auto;
   max-height: calc(100vh - 5rem);
   padding: 0;
@@ -482,54 +473,16 @@ ul {
   height: 40vh;
   z-index: 5;
   grid-template-columns: 2rem 1fr;
+  grid-column: 1/2;
 }
 
 .line-map {
   height: 100%;
 }
 
-.line-map__track {
-  height: 1rem;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-.line-map__circle,
-.line-map__disc {
+.line-map__circle {
   position: absolute;
   border-radius: 1rem;
-  z-index: 1;
-}
-
-.line-map__disc {
-  height: 0.5rem;
-  width: 0.5rem;
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
-  transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
-  background: rgba(var(--text-color), 1);
-}
-
-.line-map__line {
-  height: 0.1rem;
-  width: 100%;
-  background: rgba(var(--text-color), 0.8);
-}
-
-.room-button {
-  font-weight: 500;
-  font-size: 1.4rem;
-  opacity: 0.6;
-  -webkit-transition: opacity 0.3s;
-  transition: opacity 0.3s;
-}
-.room-button--active {
-  opacity: 1;
-}
-
-.line-map__circle {
   width: 1rem;
   height: 1rem;
   margin-top: -0.5rem;
@@ -539,6 +492,7 @@ ul {
   transition: -webkit-transform 0.1s linear;
   transition: transform 0.1s linear;
   transition: transform 0.1s linear, -webkit-transform 0.1s linear;
+  z-index: 5;
 }
 
 .line-map__bar {
@@ -575,6 +529,7 @@ ul {
 }
 
 .floor-circle {
+  position: absolute;
   height: 0.6rem;
   width: 0.6rem;
   background: rgba(var(--text-color), 1);
@@ -603,6 +558,11 @@ ul {
   width: 100%;
 }
 
+.big-icon {
+  height: 2rem;
+  width: 2rem;
+}
+
 #floor_1__outlets {
   margin: 1rem 0;
   gap: 1rem;
@@ -711,20 +671,54 @@ sm-carousel {
       -ms-flex-align: center;
           align-items: center;
   color: var(--accent-color);
-  margin-bottom: 0.3rem;
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
 }
-.outlet-label::after {
-  content: "";
-  height: 0.1rem;
-  width: 2rem;
-  background: var(--accent-color);
-  margin-left: 0.3rem;
+.outlet-label .icon {
+  fill: var(--accent-color);
+  margin-right: 0.5rem;
 }
 
-sm-tab-header {
-  padding: 0.3rem;
-  border-radius: 0.3rem;
+scroll-tab-header,
+scroll-tab-panels {
+  --border-radius: 0.5rem;
+}
+
+scroll-tab-header {
+  --padding: 0.5rem;
+  margin-right: 1.5rem;
+  --background: rgba(var(--text-color), 0.04);
+}
+
+scroll-tab-panels {
+  --height: max(24rem, 50vh);
+  --gap: 4rem;
+  --background: transparent;
+}
+
+.grid-2 {
+  grid-template-columns: auto 1fr;
+}
+
+.room-button {
+  font-weight: 500;
+  font-size: 1.1rem;
+  opacity: 0.6;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+  padding: 0.6rem 0.8rem;
+}
+.room-button:not(:last-of-type) {
+  margin-bottom: 0.5rem;
+}
+.room-button[active] {
   background: rgba(var(--text-color), 0.06);
+  opacity: 1;
+  border-radius: 0.3rem;
+  color: var(--accent-color);
+}
+.room-button[active] .icon {
+  fill: var(--accent-color);
 }
 
 table {
@@ -823,7 +817,7 @@ table {
   }
 }
 @media only screen and (min-width: 640px) {
-  body {
+  .page {
     grid-template-columns: 1fr 90vw 1fr;
   }
 
@@ -865,7 +859,7 @@ table {
   }
 }
 @media only screen and (min-width: 1280px) {
-  body {
+  .page {
     grid-template-columns: 1fr 80vw 1fr;
   }
 
diff --git a/css/main.min.css b/css/main.min.css
index 43e1548..e4a6c12 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}body{--accent-color: #1042e9;--light-shade: rgba(var(--text-color), 0.06);--text-color: 17, 17, 17;--text-color-light: 100, 100, 100;--foreground-color: 255, 255, 255;--background-color: #efefef;--error-color: red;color:rgba(var(--text-color), 1);height:calc(100%);font-size:clamp(1rem, 1.2vmax, 3rem);background:rgba(var(--text-color), 0.06);display:grid;grid-template-columns:1rem 1fr 1rem}body>*{grid-column:2/3}body[data-theme=dark]{--accent-color:#2fb3ff;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--foreground-color: 20, 20, 20;--error-color: rgb(255, 106, 106);background:rgba(var(--foreground-color), 1)}body[data-theme=dark] .outlet-preview{background:rgba(var(--text-color), 0.02);-webkit-box-shadow:rgba(0,0,0,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px}body[data-theme=dark] .outlet-preview sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 0.7)}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{max-width:60ch;line-height:1.5}img{-o-object-fit:cover;object-fit:cover}button{position:relative;overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:none;cursor:pointer;outline:none;color:inherit;font-weight:500;-webkit-tap-highlight-color:transparent}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{background:var(--accent-color);color:rgba(var(--foreground-color), 1)}.button--primary .icon{fill:rgba(var(--foreground-color), 1)}button:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea{--border-radius: 0.2rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.2rem}sm-tab-header{-ms-flex-item-align:start;align-self:flex-start}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-3{grid-template-columns:repeat(auto-fill, minmax(6rem, 1fr))}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.pos-relative{position:relative}.align-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{-webkit-transform:none !important;transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;-webkit-transform:scale(0);transform:scale(0);background:rgba(var(--text-color), 0.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.9)}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-0.5rem}.button__label{font-size:1rem}.button__icon{height:1.1rem;width:1.1rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.color-0-9{color:rgba(var(--text-color), 0.9)}.color-0-8{color:rgba(var(--text-color), 0.8)}.color-0-7{color:rgba(var(--text-color), 0.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.popup__header__close{padding:.5rem;cursor:pointer}#elevator_button_panel{gap:1rem;grid-template-columns:repeat(3, 1fr)}.floor__button{padding:1rem;height:4rem;width:4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:.5rem;font-size:1.5rem;font-weight:900;background:rgba(var(--text-color), 0.06)}.floor__button--active{background:rgba(var(--text-color), 0.2);-webkit-box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3, 1fr)}#elevator_button{justify-self:flex-start}#main_logo{justify-self:center}#main_header__logo{height:1.8rem;width:1.8rem}#theme_switcher{justify-self:flex-end}.page{position:relative;padding:0 1rem}.tag{background:var(--accent-color);padding:.4rem .6rem}.common-padding{padding:0 1rem}#home_page{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;max-height:calc(100vh - 5rem);padding:0;grid-template-columns:2rem 1fr}#floor_line_map{position:relative;position:-webkit-sticky;position:sticky;top:1rem;height:40vh;z-index:5;grid-template-columns:2rem 1fr}.line-map{height:100%}.line-map__track{height:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.line-map__circle,.line-map__disc{position:absolute;border-radius:1rem;z-index:1}.line-map__disc{height:.5rem;width:.5rem;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;background:rgba(var(--text-color), 1)}.line-map__line{height:.1rem;width:100%;background:rgba(var(--text-color), 0.8)}.room-button{font-weight:500;font-size:1.4rem;opacity:.6;-webkit-transition:opacity .3s;transition:opacity .3s}.room-button--active{opacity:1}.line-map__circle{width:1rem;height:1rem;margin-top:-0.5rem;background:rgba(var(--foreground-color), 1);border:solid .2rem rgba(var(--text-color), 1);-webkit-transition:-webkit-transform .1s linear;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear, -webkit-transform .1s linear}.line-map__bar{width:.1rem;height:100%;background:rgba(var(--text-color), 0.4)}.floor-label{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;left:.7rem;margin-top:-0.9rem;padding-bottom:1rem;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.floor-label--active{opacity:1}.floor-label--active .floor-title{-webkit-box-shadow:0 0 .5rem rgba(0,0,0,.2);box-shadow:0 0 .5rem rgba(0,0,0,.2)}.floor-circle{height:.6rem;width:.6rem;background:rgba(var(--text-color), 1);border-radius:1rem}.floor-title{font-size:.9rem;white-space:nowrap;padding:.4rem .6rem;margin-left:.5rem;border-radius:.2rem;background:rgba(var(--foreground-color), 1);-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s}#floor_container{width:calc(100% - 1rem)}.floor{padding-bottom:3rem;width:100%}#floor_1__outlets{margin:1rem 0;gap:1rem;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr))}.outlet-preview{padding-top:2rem;background:rgba(var(--foreground-color), 1);border-radius:.3rem;-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s;-webkit-box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px}.outlet-preview sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 1)}.outlet__title{font-weight:900;text-transform:capitalize}.outlet__description{color:rgba(var(--text-color), 0.8)}.label{position:relative;font-size:.8rem;color:var(--accent-color);margin-bottom:.3rem}sm-carousel{position:relative;height:100%;background:rgba(var(--text-color), 0.06);padding-bottom:4rem;padding-top:1.5rem;--arrow-left: 1.5rem;--arrow-right: 1.5rem;--arrow-fill: rgba(var(--text-color), 1);--arrow-background: transparent;--arrow-box-shadow: none;--arrow-bottom: -3.5rem;--indicator-bottom: -2.5rem}.bit-bond-series__row,.bob-fund__row,.investor-card{min-width:100%}.investor-card{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr}.investor-card--small{grid-template-areas:"img ." "para para"}.investor-card--small .investor__image{width:4rem;height:4rem;border-radius:50%}.investor-card--big{grid-template-areas:"img ." "img para"}.investor__image{grid-area:img;width:8rem;border-radius:.5rem}.investor__bio{font-size:.9rem;margin-top:.5rem}.investor__contribution-container{grid-area:para}.outlet-hero-section{margin-top:6rem}.outlet-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--accent-color);margin-bottom:.3rem}.outlet-label::after{content:"";height:.1rem;width:2rem;background:var(--accent-color);margin-left:.3rem}sm-tab-header{padding:.3rem;border-radius:.3rem;background:rgba(var(--text-color), 0.06)}table{border-collapse:collapse;width:-webkit-max-content;width:-moz-max-content;width:max-content}.tr{margin:.5rem}.tr:nth-of-type(even){background:rgba(var(--text-color), 0.1)}.td{padding:.6rem .8rem;white-space:nowrap}#ico_page__carousel{width:min(32rem, 100%)}.phase{grid-template-columns:4rem 1fr}.phase:not(:last-of-type) .phase__description{padding-bottom:1.5rem}.phase:last-of-type .progress-bar__line{height:0}.progress-bar__circle,.progress-bar__line{position:absolute;margin-top:1rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-bar__circle{padding:.4rem;background:rgba(var(--foreground-color), 1);border:solid rgba(var(--text-color), 1) .1rem;border-radius:50%;z-index:1}.progress-bar__line{height:100%;width:.1rem;background:rgba(var(--text-color), 0.9)}.phase__date{margin-top:.3rem}.phase__description{margin-top:1rem}@media only screen and (max-width: 640px){.hide-on-mobile{display:none}.floor-label{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s}.floor-label .floor-title{opacity:0;-webkit-transform:translateX(-1rem);transform:translateX(-1rem);-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s}.floor-label--active{opacity:1}.floor-label--active .floor-title{opacity:1;-webkit-box-shadow:0 0 .5rem rgba(0,0,0,.2);box-shadow:0 0 .5rem rgba(0,0,0,.2);-webkit-transform:none;transform:none}}@media only screen and (min-width: 640px){body{grid-template-columns:1fr 90vw 1fr}.h1{font-size:4rem}.h2{font-size:2.5rem}.h3{font-size:1.5rem}.h4{font-size:1.1rem}#main_header{padding:1.5rem 2rem}.common-padding{padding:0 2rem}#home_page{grid-template-columns:8rem 1fr}.outlet-preview{padding-top:3rem}#elevator_sections{gap:3rem;grid-template-columns:auto 1fr}}@media only screen and (min-width: 1280px){body{grid-template-columns:1fr 80vw 1fr}#elevator_popup{--width: min(100%, 54rem) }}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}body[data-theme=dark] .outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px}.outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px}.page-link{cursor:pointer;-webkit-transition:color .3s;transition:color .3s}.page-link:hover{color:var(--accent-color)}.page-link:hover .icon{fill:var(--accent-color)}.floor__button:hover{background:rgba(var(--text-color), 0.2)}}
\ No newline at end of file
+*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}body{--accent-color: #1042e9;--light-shade: rgba(var(--text-color), 0.06);--text-color: 17, 17, 17;--text-color-light: 100, 100, 100;--foreground-color: 255, 255, 255;--background-color: #efefef;--error-color: red;color:rgba(var(--text-color), 1);height:calc(100%);font-size:clamp(1rem, 1.2vmax, 3rem);background:rgba(var(--text-color), 0.06)}body[data-theme=dark]{--accent-color:#2fb3ff;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--foreground-color: 20, 20, 20;--error-color: rgb(255, 106, 106);background:rgba(var(--foreground-color), 1)}body[data-theme=dark] .outlet-preview{background:rgba(var(--text-color), 0.02);-webkit-box-shadow:rgba(0,0,0,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px}body[data-theme=dark] .outlet-preview sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 0.7)}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{max-width:60ch;line-height:1.5}img{-o-object-fit:cover;object-fit:cover}button{position:relative;overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:none;cursor:pointer;outline:none;color:inherit;font-weight:500;-webkit-tap-highlight-color:transparent}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{background:var(--accent-color);color:rgba(var(--foreground-color), 1)}.button--primary .icon{fill:rgba(var(--foreground-color), 1)}button:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea{--border-radius: 0.2rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.2rem}sm-tab-header{-ms-flex-item-align:start;align-self:flex-start}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-3{grid-template-columns:repeat(auto-fill, minmax(6rem, 1fr))}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.pos-relative{position:relative}.align-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{-webkit-transform:none !important;transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;-webkit-transform:scale(0);transform:scale(0);background:rgba(var(--text-color), 0.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.9)}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-0.5rem}.button__label{font-size:1rem}.button__icon{height:1.1rem;width:1.1rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.color-0-9{color:rgba(var(--text-color), 0.9)}.color-0-8{color:rgba(var(--text-color), 0.8)}.color-0-7{color:rgba(var(--text-color), 0.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.popup__header__close{padding:.5rem;cursor:pointer}#elevator_button_panel{gap:1rem;grid-template-columns:repeat(3, 1fr)}.floor__button{padding:1rem;height:4rem;width:4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:.5rem;font-size:1.5rem;font-weight:900;background:rgba(var(--text-color), 0.06)}.floor__button--active{background:rgba(var(--text-color), 0.2);-webkit-box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3, 1fr)}#elevator_button{justify-self:flex-start}#main_logo{justify-self:center}#main_header__logo{height:1.8rem;width:1.8rem}#theme_switcher{justify-self:flex-end}.page{position:relative;display:grid;grid-template-columns:1rem 1fr 1rem;padding-bottom:3rem}.page>*{grid-column:2/3}.tag{background:var(--accent-color);padding:.4rem .6rem}.common-padding{padding:0 1rem}#home_page{overflow-y:auto;max-height:calc(100vh - 5rem);padding:0;grid-template-columns:2rem 1fr}#floor_line_map{position:relative;position:-webkit-sticky;position:sticky;top:1rem;height:40vh;z-index:5;grid-template-columns:2rem 1fr;grid-column:1/2}.line-map{height:100%}.line-map__circle{position:absolute;border-radius:1rem;width:1rem;height:1rem;margin-top:-0.5rem;background:rgba(var(--foreground-color), 1);border:solid .2rem rgba(var(--text-color), 1);-webkit-transition:-webkit-transform .1s linear;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear, -webkit-transform .1s linear;z-index:5}.line-map__bar{width:.1rem;height:100%;background:rgba(var(--text-color), 0.4)}.floor-label{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;left:.7rem;margin-top:-0.9rem;padding-bottom:1rem;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.floor-label--active{opacity:1}.floor-label--active .floor-title{-webkit-box-shadow:0 0 .5rem rgba(0,0,0,.2);box-shadow:0 0 .5rem rgba(0,0,0,.2)}.floor-circle{position:absolute;height:.6rem;width:.6rem;background:rgba(var(--text-color), 1);border-radius:1rem}.floor-title{font-size:.9rem;white-space:nowrap;padding:.4rem .6rem;margin-left:.5rem;border-radius:.2rem;background:rgba(var(--foreground-color), 1);-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s}#floor_container{width:calc(100% - 1rem)}.floor{padding-bottom:3rem;width:100%}.big-icon{height:2rem;width:2rem}#floor_1__outlets{margin:1rem 0;gap:1rem;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr))}.outlet-preview{padding-top:2rem;background:rgba(var(--foreground-color), 1);border-radius:.3rem;-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s;-webkit-box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px}.outlet-preview sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 1)}.outlet__title{font-weight:900;text-transform:capitalize}.outlet__description{color:rgba(var(--text-color), 0.8)}.label{position:relative;font-size:.8rem;color:var(--accent-color);margin-bottom:.3rem}sm-carousel{position:relative;height:100%;background:rgba(var(--text-color), 0.06);padding-bottom:4rem;padding-top:1.5rem;--arrow-left: 1.5rem;--arrow-right: 1.5rem;--arrow-fill: rgba(var(--text-color), 1);--arrow-background: transparent;--arrow-box-shadow: none;--arrow-bottom: -3.5rem;--indicator-bottom: -2.5rem}.bit-bond-series__row,.bob-fund__row,.investor-card{min-width:100%}.investor-card{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr}.investor-card--small{grid-template-areas:"img ." "para para"}.investor-card--small .investor__image{width:4rem;height:4rem;border-radius:50%}.investor-card--big{grid-template-areas:"img ." "img para"}.investor__image{grid-area:img;width:8rem;border-radius:.5rem}.investor__bio{font-size:.9rem;margin-top:.5rem}.investor__contribution-container{grid-area:para}.outlet-hero-section{margin-top:6rem}.outlet-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--accent-color);margin-bottom:.5rem;font-size:1rem}.outlet-label .icon{fill:var(--accent-color);margin-right:.5rem}scroll-tab-header,scroll-tab-panels{--border-radius: 0.5rem}scroll-tab-header{--padding: 0.5rem;margin-right:1.5rem;--background: rgba(var(--text-color), 0.04)}scroll-tab-panels{--height: max(24rem, 50vh);--gap: 4rem;--background: transparent}.grid-2{grid-template-columns:auto 1fr}.room-button{font-weight:500;font-size:1.1rem;opacity:.6;-webkit-transition:opacity .3s;transition:opacity .3s;padding:.6rem .8rem}.room-button:not(:last-of-type){margin-bottom:.5rem}.room-button[active]{background:rgba(var(--text-color), 0.06);opacity:1;border-radius:.3rem;color:var(--accent-color)}.room-button[active] .icon{fill:var(--accent-color)}table{border-collapse:collapse;width:-webkit-max-content;width:-moz-max-content;width:max-content}.tr{margin:.5rem}.tr:nth-of-type(even){background:rgba(var(--text-color), 0.1)}.td{padding:.6rem .8rem;white-space:nowrap}#ico_page__carousel{width:min(32rem, 100%)}.phase{grid-template-columns:4rem 1fr}.phase:not(:last-of-type) .phase__description{padding-bottom:1.5rem}.phase:last-of-type .progress-bar__line{height:0}.progress-bar__circle,.progress-bar__line{position:absolute;margin-top:1rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-bar__circle{padding:.4rem;background:rgba(var(--foreground-color), 1);border:solid rgba(var(--text-color), 1) .1rem;border-radius:50%;z-index:1}.progress-bar__line{height:100%;width:.1rem;background:rgba(var(--text-color), 0.9)}.phase__date{margin-top:.3rem}.phase__description{margin-top:1rem}@media only screen and (max-width: 640px){.hide-on-mobile{display:none}.floor-label{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s}.floor-label .floor-title{opacity:0;-webkit-transform:translateX(-1rem);transform:translateX(-1rem);-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s}.floor-label--active{opacity:1}.floor-label--active .floor-title{opacity:1;-webkit-box-shadow:0 0 .5rem rgba(0,0,0,.2);box-shadow:0 0 .5rem rgba(0,0,0,.2);-webkit-transform:none;transform:none}}@media only screen and (min-width: 640px){.page{grid-template-columns:1fr 90vw 1fr}.h1{font-size:4rem}.h2{font-size:2.5rem}.h3{font-size:1.5rem}.h4{font-size:1.1rem}#main_header{padding:1.5rem 2rem}.common-padding{padding:0 2rem}#home_page{grid-template-columns:8rem 1fr}.outlet-preview{padding-top:3rem}#elevator_sections{gap:3rem;grid-template-columns:auto 1fr}}@media only screen and (min-width: 1280px){.page{grid-template-columns:1fr 80vw 1fr}#elevator_popup{--width: min(100%, 54rem) }}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}body[data-theme=dark] .outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px}.outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px}.page-link{cursor:pointer;-webkit-transition:color .3s;transition:color .3s}.page-link:hover{color:var(--accent-color)}.page-link:hover .icon{fill:var(--accent-color)}.floor__button:hover{background:rgba(var(--text-color), 0.2)}}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index c85bcd8..880be12 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -18,11 +18,6 @@ body {
     height: calc(100%);
     font-size: clamp(1rem, 1.2vmax, 3rem);
     background: rgba(var(--text-color), 0.06);
-    display: grid;
-    grid-template-columns: 1rem 1fr 1rem;
-    & > * {
-        grid-column: 2/3;
-    }
 }
 body[data-theme='dark']{
     --accent-color:#2fb3ff;
@@ -39,12 +34,6 @@ body[data-theme='dark']{
         }
     }
 }
-/* .font-mono{
-    font-family: 'Roboto Mono', sans-serif;
-}
-.font-slab{
-    font-family: 'Roboto slab', sans-serif;
-} */
 
 .full-bleed{
     grid-column: 1/4;
@@ -358,7 +347,12 @@ ul{
 
 .page{
     position: relative;
-    padding: 0 1rem;
+    display: grid;
+    grid-template-columns: 1rem 1fr 1rem;
+    padding-bottom: 3rem;
+    & > * {
+        grid-column: 2/3;
+    }
 }
 
 .tag{
@@ -371,7 +365,6 @@ ul{
 }
 
 #home_page{
-    flex: 1;
     overflow-y: auto;
     max-height: calc(100vh - 5rem);
     padding: 0;
@@ -385,47 +378,21 @@ ul{
     height: 40vh;
     z-index: 5;
     grid-template-columns: 2rem 1fr;
+    grid-column: 1/2;
 }
 .line-map{
     height: 100%;
 }
-.line-map__track{
-    height: 1rem;
-    align-items: center;
-}
-.line-map__circle,
-.line-map__disc{
+.line-map__circle{
     position: absolute;
     border-radius: 1rem;
-    z-index: 1;
-}
-.line-map__disc{
-    height: 0.5rem;
-    width: 0.5rem;
-    transition: transform 0.3s;
-    background: rgba(var(--text-color), 1);
-}
-.line-map__line{
-    height: 0.1rem;
-    width: 100%;
-    background: rgba(var(--text-color), 0.8);
-}
-.room-button{
-    font-weight: 500;
-    font-size: 1.4rem;
-    opacity: 0.6;
-    transition: opacity 0.3s;
-    &--active{
-        opacity: 1;
-    }
-}
-.line-map__circle{
     width: 1rem;
     height: 1rem;
     margin-top: -0.5rem;
     background: rgba(var(--foreground-color), 1);
     border: solid 0.2rem rgba(var(--text-color), 1);
     transition: transform 0.1s linear;
+    z-index: 5;
 }
 .line-map__bar{
     width: 0.1rem;
@@ -451,6 +418,7 @@ ul{
     }
 }
 .floor-circle{
+    position: absolute;
     height: 0.6rem;
     width: 0.6rem;
     background: rgba(var(--text-color), 1);
@@ -475,6 +443,11 @@ ul{
     width: 100%;
 }
 
+.big-icon{
+    height: 2rem;
+    width: 2rem;
+}
+
 #floor_1__outlets{
     margin: 1rem 0;
     gap: 1rem;
@@ -571,21 +544,50 @@ sm-carousel{
     display: flex;
     align-items: center;
     color: var(--accent-color);
-    margin-bottom: 0.3rem;
-    &::after{
-        content: '';
-        height: 0.1rem;
-        width: 2rem;
-        background: var(--accent-color);
-        margin-left: 0.3rem;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    .icon{
+        fill: var(--accent-color);
+        margin-right: 0.5rem;
     }
 }
 
+scroll-tab-header,
+scroll-tab-panels{
+    --border-radius: 0.5rem;
+}
+scroll-tab-header{
+    --padding: 0.5rem;
+    margin-right: 1.5rem;
+    --background: rgba(var(--text-color), 0.04);
+}
+scroll-tab-panels{
+    --height: max(24rem, 50vh);
+    --gap: 4rem;
+    --background: transparent;
+}
+.grid-2{
+    grid-template-columns: auto 1fr;
+}
+.room-button{
+    font-weight: 500;
+    font-size: 1.1rem;
+    opacity: 0.6;
+    transition: opacity 0.3s;
+    padding: 0.6rem 0.8rem;
+    &:not(:last-of-type){
+        margin-bottom: 0.5rem;
+    }
+    &[active]{
+        background: rgba(var(--text-color), 0.06);
+        opacity: 1;
+        border-radius: 0.3rem;
+        color: var(--accent-color);
+        .icon{
+            fill: var(--accent-color);
+        }
+    }
 
-sm-tab-header{
-    padding: 0.3rem;
-    border-radius: 0.3rem;
-    background: rgba(var(--text-color), 0.06);
 }
 
 table{
@@ -670,7 +672,7 @@ table{
     }
 }
 @media only screen and (min-width: 640px) {
-    body{
+    .page{
         grid-template-columns: 1fr 90vw 1fr;
     }
     .h1{
@@ -703,7 +705,7 @@ table{
     }
 }
 @media only screen and (min-width: 1280px) {
-    body{
+    .page{
         grid-template-columns: 1fr 80vw 1fr;
     }
     #elevator_popup{
diff --git a/index.html b/index.html
index b1bfdb9..956130d 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
     <link rel="shortcut icon" href="assets/RM logo.png" type="image/png">
     <link rel="stylesheet" href="css/main.min.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Roboto+Slab:wght@400;500;700;900&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
 </head>
 <body data-theme="light">
     <audio id="notification_sound">
@@ -85,7 +85,7 @@
             </div>
             <div class="flex direction-column investor__contribution-container">
                 <h4 class="label color-0-8 weight-500">Contribution</h4>
-                <p class="investor__contribution font-mono weight-700"></p>
+                <p class="investor__contribution weight-700"></p>
             </div>
         </div>
     </template>
@@ -170,7 +170,7 @@
         </div>
         <sm-switch id="theme_switcher"></sm-switch>
     </header>
-    <article id="home_page" class="page grid hide-completely full-bleed">
+    <article id="home_page" class="page hide-completely full-bleed">
         <aside id="floor_line_map" class="grid">
             <div class="flex line-map justify-center">
                 <div id="floor_line_map__circle" class="line-map__circle"></div>
@@ -180,10 +180,16 @@
         </aside>
         <main id="floor_container" class="grid">
             <section id="floor_1" class="floor">
+                <span class="flex align-center margin-bottom-1-5r">
+                    <svg class="icon button__icon--left big-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
+                    <h4 class="h3 weight-500">
+                        Outlets
+                    </h4>
+                </span>
                 <main id="floor_1__outlets" class="grid">
                     <div id="bit_bond_outlet" class="flex direction-column card outlet-preview carousel-container">
                         <div class="flex direction-column common-padding margin-bottom-1-5r">
-                            <h3 class="font-slab h3 outlet__title margin-bottom-1r">bitcoin bonds</h3>
+                            <h3 class="h3 outlet__title margin-bottom-1r">bitcoin bonds</h3>
                             <p class="outlet__description margin-bottom-1-5r">
                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
                             </p>
@@ -196,7 +202,7 @@
                     </div>
                     <div id="bob_fund_outlet" class="flex direction-column card outlet-preview carousel-container">
                         <div class="flex direction-column margin-bottom-1-5r common-padding">
-                            <h3 class="font-slab h3 outlet__title margin-bottom-1r">Bob's Fund</h3>
+                            <h3 class="h3 outlet__title margin-bottom-1r">Bob's Fund</h3>
                             <p class="outlet__description margin-bottom-1-5r">
                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
                             </p>
@@ -209,7 +215,7 @@
                     </div>
                     <div id="ico_outlet" class="flex direction-column card outlet-preview carousel-container">
                         <div class="flex direction-column margin-bottom-1-5r common-padding">
-                            <h3 class="font-slab h3 outlet__title margin-bottom-1r">ICO</h3>
+                            <h3 class="h3 outlet__title margin-bottom-1r">ICO</h3>
                             <p class="outlet__description margin-bottom-1-5r">
                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
                             </p>
@@ -242,108 +248,125 @@
 
     <article id="bitbonds" class="page flex direction-column hide-completely">
         <section class="outlet-hero-section margin-bottom-3r">
-            <h5 class="outlet-label">Outlet</h5>
-            <h2 class="h2 weight-900 margin-bottom-1r">BitCoin Bonds</h2>
+            <h4 class="outlet-label">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
+                Outlet
+            </h4>
+            <h1 class="h1 weight-900 margin-bottom-1r">BitCoin Bonds</h1>
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
         </section>
-        <h4 class="label">Rooms</h4>
-        <div class="tab-header flex direction-column" data-target-group="bit_bond_page_group">
-            <ul class="grid gap-1 flow-column">
-                <li>
-                    <button class="room-button room-button--active" data-button-group="bit_bond_page_group" data-target="bit_bond_returns_table">Returns</button>
-                </li>
-                <li>
-                    <button class="room-button" data-button-group="bit_bond_page_group" data-target="bit_bond_info">More</button>
-                </li>
-            </ul>
-            <div class="line-map__track flex w-100">
-                <div class="line-map__disc"></div>
-                <div class="line-map__line"></div>
-            </div>
+        <h3 class="h3 margin-bottom-1r">Rooms</h3>
+        <div class="grid grid-2">
+            <scroll-tab-header data-target="bit_bond_page_group">
+                <button class="room-button">
+                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z"/><polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93"/><polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9"/></g></g></svg>
+                    <span class="button__label">
+                        Returns
+                    </span>
+                </button>
+                <button class="room-button">
+                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
+                    <span class="button__label">
+                        More
+                    </span>
+                </button>
+            </scroll-tab-header>
+            <scroll-tab-panels id="bit_bond_page_group">
+                <table>
+                    <thead>
+                        <tr class="tr">
+                            <td class="td weight-700 uppercase">Series</td>
+                            <td class="td weight-700 uppercase">Series date</td>
+                            <td class="td weight-700 uppercase">Time Elapsed</td>
+                            <td class="td weight-700 uppercase">Current value</td>
+                            <td class="td weight-700 uppercase">Rate of return</td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="tr">
+                            <td class="td weight-500">$975</td>
+                         </tr>
+                         <tr class="tr">
+                             <td class="td weight-500">$1057</td>
+                         </tr>   
+                         <tr class="tr">
+                             <td class="td weight-500">$1064</td>
+                         </tr>
+                         <tr class="tr">
+                             <td class="td weight-500">$1205</td>
+                         </tr>
+                         <tr class="tr">
+                             <td class="td weight-500">$1285</td>
+                         </tr>
+                         <tr class="tr">
+                             <td class="td weight-500">$2513</td>
+                         </tr>
+                        </tr>
+                    </tbody>
+                </table>
+                <h1 id="bit_bond_info" class="h1">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore error omnis ipsam ut incidunt, doloremque pariatur expedita distinctio itaque.
+                </h1>
+            </scroll-tab-panels>
         </div>
-        <table id="bit_bond_returns_table" data-panel-group="bit_bond_page_group">
-            <thead>
-                <tr class="tr">
-                    <td class="td weight-700 uppercase">Series</td>
-                    <td class="td weight-700 uppercase">Series date</td>
-                    <td class="td weight-700 uppercase">Time Elapsed</td>
-                    <td class="td weight-700 uppercase">Current value</td>
-                    <td class="td weight-700 uppercase">Rate of return</td>
-                </tr>
-            </thead>
-            <tbody>
-                <tr class="tr">
-                    <td class="td weight-500">$975</td>
-                 </tr>
-                 <tr class="tr">
-                     <td class="td weight-500">$1057</td>
-                 </tr>   
-                 <tr class="tr">
-                     <td class="td weight-500">$1064</td>
-                 </tr>
-                 <tr class="tr">
-                     <td class="td weight-500">$1205</td>
-                 </tr>
-                 <tr class="tr">
-                     <td class="td weight-500">$1285</td>
-                 </tr>
-                 <tr class="tr">
-                     <td class="td weight-500">$2513</td>
-                 </tr>
-                </tr>
-            </tbody>
-        </table>
-        <p id="bit_bond_info" class="hide-completely" data-panel-group="bit_bond_page_group"></p>
     </article>
 
     <article id="bob'sfund" class="page flex direction-column hide-completely">
         <section class="outlet-hero-section margin-bottom-3r">
-            <h5 class="outlet-label">Outlet</h5>
-            <h2 class="h2 weight-900 margin-bottom-1r">Bob's Fund</h2>
+            <h5 class="outlet-label">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
+                Outlet
+            </h5>
+            <h1 class="h1 weight-900 margin-bottom-1r">Bob's Fund</h1>
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
         </section>
-        <h4 class="label">Rooms</h4>
-        <div class="tab-header flex direction-column" data-target-group="bob_fund_page_group">
-            <ul class="grid gap-1 flow-column">
-                <li>
-                    <button class="room-button room-button--active" data-button-group="bob_fund_page_group" data-target="bob_fund_page__carousel">Investors</button>
-                </li>
-                <li>
-                    <button class="room-button" data-button-group="bob_fund_page_group" data-target="bob_fund_info">More</button>
-                </li>
-            </ul>
-            <div class="line-map__track flex w-100">
-                <div class="line-map__disc"></div>
-                <div class="line-map__line"></div>
-            </div>
-        </div>
-        <sm-carousel id="bob_fund_page__carousel" data-panel-group="bob_fund_page_group" indicator autoplay></sm-carousel>
-        <p id="bob_fund_info" class="hide-completely" data-panel-group="bob_fund_page_group"></p>
+        <h3 class="h3 margin-bottom-1r">Rooms</h3>
+        <sm-tab-header target="bob_fund_page_group" variant="tab" class="margin-bottom-1r">
+            <sm-tab class="h4">Investors</sm-tab>
+            <sm-tab class="h4">More</sm-tab>
+        </sm-tab-header>
+        <sm-tab-panels id="bob_fund_page_group">
+            <sm-panel>
+                <!-- <sm-carousel id="bob_fund_page__carousel" indicator autoplay></sm-carousel> -->
+                <h1 class="h1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, modi.</h1>
+                <h1 class="h1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, modi.</h1>
+            </sm-panel>
+            <sm-panel>
+                <p id="bob_fund_info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi facere officiis eius iusto quibusdam tenetur illo blanditiis asperiores et corporis!</p>
+            </sm-panel>
+        </sm-tab-panels>
     </article>
 
     <article id="ico" class="page flex direction-column hide-completely">
         <section class="outlet-hero-section grid margin-bottom-3r">
-            <h5 class="outlet-label">Outlet</h5>
-            <h2 class="h2 weight-900 margin-bottom-1r">ICO</h2>
+            <h5 class="outlet-label">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
+                Outlet
+            </h5>
+            <h1 class="h1 weight-900 margin-bottom-1r">ICO</h1>
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
         </section>
-        <h4 class="label">Rooms</h4>
-        <div class="tab-header flex direction-column" data-target-group="ico_page_group">
-            <ul class="grid gap-1 flow-column">
-                <li>
-                    <button class="room-button room-button--active" data-button-group="ico_page_group" data-target="ico_page__carousel">Investors</button>
-                </li>
-                <li>
-                    <button class="room-button" data-button-group="ico_page_group" data-target="ico_phase_list">Phases</button>
-                </li>
-            </ul>
-            <div class="line-map__track flex w-100">
-                <div class="line-map__disc"></div>
-                <div class="line-map__line"></div>
-            </div>
+        <h3 class="h3 margin-bottom-1r">Rooms</h3>
+        <div class="grid flow-column">
+            <scroll-tab-header data-target="ico_page_group">
+                <button class="room-button" title="Investors">
+                    <svg class="icon icon-only" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 22a8 8 0 1 1 16 0h-2a6 6 0 1 0-12 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm8.284 3.703A8.002 8.002 0 0 1 23 22h-2a6.001 6.001 0 0 0-3.537-5.473l.82-1.824zm-.688-11.29A5.5 5.5 0 0 1 21 8.5a5.499 5.499 0 0 1-5 5.478v-2.013a3.5 3.5 0 0 0 1.041-6.609l.555-1.943z"/></svg>
+                </button>
+                <button class="room-button" title="Phases">
+                    <svg class="icon icon-only" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="4" y="12" width="4" height="10"/><rect x="10" y="7" width="4" height="15"/><rect x="16" y="2" width="4" height="20"/></svg>
+                </button>
+            </scroll-tab-header>
+            <scroll-tab-panels id="ico_page_group">
+                <div class="grid">
+                    <h4 class="h4 margin-bottom-1-5r">Investors</h4>
+                    <sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel>
+                </div>
+                <div class="grid">
+                    <h4 class="h4 margin-bottom-1-5r">Phases</h4>
+                    <ul id="ico_phase_list"></ul>
+                </div>
+            </scroll-tab-panels>
         </div>
-        <sm-carousel id="ico_page__carousel" data-panel-group="ico_page_group" indicator autoplay></sm-carousel>
-        <ul id="ico_phase_list" class="hide-completely" data-panel-group="ico_page_group"></ul>
     </article>
 
     <!--  -->
@@ -1166,31 +1189,6 @@
                 const target = label.dataset.target
                 getRef(target).scrollIntoView({behavior: 'smooth'})
             }
-            else if(e.target.closest('.room-button')){
-                const button = e.target.closest('.room-button')
-                const buttonDimensions = button.getBoundingClientRect()
-                const target = button.dataset.target
-                const tabHeader = button.closest('.tab-header')
-                const targetGroup = tabHeader.dataset.targetGroup
-                const indicator = tabHeader.querySelector('.line-map__disc')
-                const options = {
-                    duration: 300,
-                    easing: 'ease',
-                    fill: 'forwards'
-                }
-                
-                const activePanel = document.querySelector(`:not(.hide-completely)[data-panel-group="${targetGroup}"]`)
-                activePanel.animate(fadeOut, options).onfinish = () => {
-                    activePanel.classList.add('hide-completely')
-                    getRef(target).classList.remove('hide-completely')
-                    getRef(target).animate(fadeIn, options)
-                }
-                
-                document.querySelector(`.room-button--active[data-button-group="${targetGroup}"]`).classList.remove('room-button--active')
-                button.classList.add('room-button--active')
-                
-                indicator.setAttribute('style', `transform: translateX(${buttonDimensions.left + (buttonDimensions.width / 2) - tabHeader.getBoundingClientRect().left + tabHeader.scrollLeft}px)`)
-            }
         })
 
         let activeOutletIndex = 0