diff --git a/css/main.css b/css/main.css
index f2dacba..95d85b0 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap");
 * {
   padding: 0;
   margin: 0;
@@ -22,7 +21,7 @@ body {
   color: rgba(var(--text-color), 1);
   height: calc(100%);
   font-size: clamp(1rem, 1.2vmax, 3rem);
-  background: rgba(var(--foreground-color), 1);
+  background: rgba(var(--text-color), 0.06);
 }
 
 body[data-theme=dark] {
@@ -31,6 +30,36 @@ body[data-theme=dark] {
   --text-color-light: 170, 170, 170;
   --foreground-color: 20, 20, 20;
   --error-color: rgb(255, 106, 106);
+  background: rgba(var(--foreground-color), 1);
+}
+
+.h1 {
+  font-size: 2.5rem;
+}
+
+.h2 {
+  font-size: 2rem;
+}
+
+.h3 {
+  font-size: 1.4rem;
+}
+
+.h4 {
+  font-size: 1rem;
+}
+
+.h5 {
+  font-size: 0.8rem;
+}
+
+p {
+  line-height: 1.5;
+}
+
+img {
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 button {
@@ -96,12 +125,34 @@ ul {
   grid-auto-flow: column;
 }
 
+.gap-0-5 {
+  gap: 0.5rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.gap-1-5 {
+  gap: 1.5rem;
+}
+
 .align-center {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
 
+.text-center {
+  text-align: center;
+}
+
+.justify-center {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
 .justify-right {
   margin-left: auto;
 }
@@ -127,10 +178,22 @@ ul {
   margin-top: 1.5rem;
 }
 
+.margin-bottom-0-5 {
+  margin-bottom: 0.5rem;
+}
+
+.margin-bottom-1 {
+  margin-bottom: 1rem;
+}
+
 .margin-bottom-1-5 {
   margin-bottom: 1.5rem;
 }
 
+.margin-bottom-2 {
+  margin-bottom: 2rem;
+}
+
 .margin-left-0-5 {
   margin-left: 0.5rem;
 }
@@ -204,13 +267,157 @@ ul {
   left: -0.5rem;
 }
 
-.option__icon {
-  height: 1.2rem;
-  width: 1.2rem;
-  margin-right: 0.8rem;
-}
-
-.option__label {
+.button__label {
   font-size: 1rem;
 }
-/*# sourceMappingURL=main.css.map */
\ No newline at end of file
+
+.button__icon {
+  height: 1.1rem;
+  width: 1.1rem;
+}
+.button__icon--left {
+  margin-right: 0.5rem;
+}
+.button__icon--right {
+  margin-left: 0.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;
+}
+
+#background_tile {
+  position: absolute;
+  width: 100%;
+  height: 80vh;
+  left: 0;
+  top: 50vh;
+  z-index: -1;
+  -webkit-transform: skewY(-3deg);
+          transform: skewY(-3deg);
+  background: #f6f6f6;
+}
+
+#main_header {
+  position: relative;
+  padding: 1rem;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+#main_logo {
+  position: absolute;
+  justify-self: center;
+}
+
+#main_header__logo {
+  height: 1.8rem;
+  width: 1.8rem;
+}
+
+.page {
+  padding: 0 1rem;
+}
+
+#floor_1__outlets {
+  margin: 1rem 0;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+}
+
+.outlet-preview {
+  padding: 1rem;
+  background: rgba(var(--foreground-color), 1);
+  -webkit-transition: -webkit-box-shadow 0.3s;
+  transition: -webkit-box-shadow 0.3s;
+  transition: box-shadow 0.3s;
+  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
+  -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+          box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+  /*     &:nth-of-type(1){
+          transform: rotateY(1deg);
+      }
+      &:nth-of-type(2){
+          transform: translateZ(-0.2rem);
+      }
+      &:nth-of-type(3){
+          transform: rotateY(-1deg);
+      } */
+}
+.outlet-preview:hover {
+  -webkit-box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+          box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+}
+
+.outlet__title {
+  font-weight: bold;
+  text-transform: capitalize;
+}
+
+.outlet__description {
+  color: rgba(var(--text-color), 0.8);
+}
+
+.investor-card {
+  grid-template-columns: auto 1fr;
+  grid-template-areas: "img ." "img .";
+}
+
+.investor__image {
+  grid-area: img;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+}
+
+@media only screen and (min-width: 640px) {
+  #main_header {
+    padding: 1.5rem 2rem;
+  }
+
+  .page {
+    padding: 0 3rem;
+  }
+}
+@media only screen and (min-width: 1280px) {
+  .page {
+    padding: 0 10vw;
+  }
+
+  .outlet-preview {
+    padding: 3rem 2rem;
+  }
+}
+@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;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--text-color), 0.5);
+  }
+}
\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
deleted file mode 100644
index cf7256e..0000000
--- a/css/main.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"AAAQ,gIAAA;AAER;EACI,UAAA;EACA,SAAA;EACA,8BAAA;EACA,sBAAA;EACA,iCAAA;ACAJ;;ADEA;EACI,uBAAA;ACCJ;;ADEA;EACI,uBAAA;EACA,4CAAA;EACA,wBAAA;EACA,iCAAA;EACA,iCAAA;EACA,2BAAA;EACA,kBAAA;EACA,iCAAA;EACA,kBAAA;EACA,qCAAA;EACA,4CAAA;ACCJ;;ADCA;EACI,sBAAA;EACA,2BAAA;EACA,iCAAA;EACA,8BAAA;EACA,iCAAA;ACEJ;;ADCA;EACI,kBAAA;EACA,gBAAA;EACA,2BAAA;EAAA,2BAAA;EAAA,oBAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,mBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,aAAA;EACA,cAAA;EACA,gBAAA;EACA,wCAAA;ACEJ;;ADAA;EACI,qBAAA;EACA,sBAAA;ACGJ;;ADDA;EACI,+BAAA;EACA,uCAAA;ACIJ;ADHI;EACI,sCAAA;ACKR;;ADFA;EACI,gDAAA;ACKJ;;ADHA;;EAEI,uBAAA;EACA,2CAAA;ACMJ;;ADJA;EACI,uBAAA;ACOJ;;ADLA;EACI,gBAAA;ACQJ;;ADNA;EACI,oBAAA;EAAA,oBAAA;EAAA,aAAA;ACSJ;;ADPA;EACI,aAAA;ACUJ;;ADRA;EACI,sBAAA;ACWJ;;ADTA;EACI,yBAAA;MAAA,sBAAA;UAAA,mBAAA;ACYJ;;ADVA;EACI,iBAAA;ACaJ;;ADXA;EACI,4BAAA;EAAA,6BAAA;MAAA,0BAAA;UAAA,sBAAA;ACcJ;;ADZA;EACI,yBAAA;MAAA,sBAAA;UAAA,8BAAA;ACeJ;;ADbA;EACI,WAAA;ACgBJ;;ADdA;EACI,kBAAA;ACiBJ;;ADfA;EACI,qBAAA;ACkBJ;;ADhBA;EACI,mBAAA;ACmBJ;;ADjBA;EACI,oBAAA;ACoBJ;;ADlBA;EACI,UAAA;EACA,oBAAA;ACqBJ;;ADnBA;EACI,wBAAA;ACsBJ;;ADpBA;EACI,kCAAA;UAAA,0BAAA;ACuBJ;;ADrBA;EACI,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;ACwBJ;;ADtBA;EACI,kBAAA;EACA,kBAAA;EACA,2BAAA;UAAA,mBAAA;EACA,yCAAA;EACA,oBAAA;ACyBJ;;ADvBA;EACI,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,wCAAA;AC0BJ;;ADxBA;EACI,aAAA;AC2BJ;;ADzBA;EACI,aAAA;AC4BJ;;AD1BA;EACI,aAAA;EACA,cAAA;EACA,kCAAA;AC6BJ;;AD3BA;EACI,cAAA;EACA,aAAA;EACA,eAAA;AC8BJ;;AD5BA;EACI,eAAA;AC+BJ;;AD7BA;EACI,aAAA;ACgCJ;;AD7BA;EACI,cAAA;EACA,aAAA;EACA,oBAAA;ACgCJ;;AD9BA;EACI,eAAA;ACiCJ","file":"main.css"}
\ No newline at end of file
diff --git a/css/main.min.css b/css/main.min.css
index 0a4130e..dfaac0c 100644
--- a/css/main.min.css
+++ b/css/main.min.css
@@ -1,2 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap";*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}html{scroll-behavior:smooth}body{--accent-color: #00a566;--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(--foreground-color), 1)}body[data-theme=dark]{--accent-color:#00fa9a;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--foreground-color: 20, 20, 20;--error-color: rgb(255, 106, 106)}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}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.flow-column{grid-auto-flow:column}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.justify-right{margin-left:auto}.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}.full-width{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-1-5{margin-bottom:1.5rem}.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}.option__icon{height:1.2rem;width:1.2rem;margin-right:.8rem}.option__label{font-size:1rem}
-/*# sourceMappingURL=main.min.css.map */
\ No newline at end of file
+*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}html{scroll-behavior:smooth}body{--accent-color: #00a566;--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:#00fa9a;--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)}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}p{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}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.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}.full-width{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5{margin-bottom:.5rem}.margin-bottom-1{margin-bottom:1rem}.margin-bottom-1-5{margin-bottom:1.5rem}.margin-bottom-2{margin-bottom:2rem}.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}#background_tile{position:absolute;width:100%;height:80vh;left:0;top:50vh;z-index:-1;-webkit-transform:skewY(-3deg);transform:skewY(-3deg);background:#f6f6f6}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3, 1fr)}#main_logo{position:absolute;justify-self:center}#main_header__logo{height:1.8rem;width:1.8rem}.page{padding:0 1rem}#floor_1__outlets{margin:1rem 0;gap:1rem;grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr))}.outlet-preview{padding:1rem;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;-webkit-box-shadow:rgba(50,50,93,.25) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px;box-shadow:rgba(50,50,93,.25) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px}.outlet-preview:hover{-webkit-box-shadow:rgba(17,12,46,.15) 0px 48px 100px 0px;box-shadow:rgba(17,12,46,.15) 0px 48px 100px 0px}.outlet__title{font-weight:bold;text-transform:capitalize}.outlet__description{color:rgba(var(--text-color), 0.8)}.investor-card{grid-template-columns:auto 1fr;grid-template-areas:"img ." "img ."}.investor__image{grid-area:img;width:4rem;height:4rem;border-radius:50%}@media only screen and (min-width: 640px){#main_header{padding:1.5rem 2rem}.page{padding:0 3rem}}@media only screen and (min-width: 1280px){.page{padding:0 10vw}.outlet-preview{padding:3rem 2rem}}@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)}}
\ No newline at end of file
diff --git a/css/main.min.css.map b/css/main.min.css.map
deleted file mode 100644
index 066f6ff..0000000
--- a/css/main.min.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["main.scss"],"names":[],"mappings":"AAAQ,0HAAA,CAER,EACI,SAAA,CACA,QAAA,CACA,6BAAA,CACA,qBAAA,CACA,+BAAA,CAEJ,KACI,sBAAA,CAGJ,KACI,uBAAA,CACA,4CAAA,CACA,wBAAA,CACA,iCAAA,CACA,iCAAA,CACA,2BAAA,CACA,kBAAA,CACA,gCAAA,CACA,iBAAA,CACA,oCAAA,CACA,2CAAA,CAEJ,sBACI,sBAAA,CACA,2BAAA,CACA,iCAAA,CACA,8BAAA,CACA,iCAAA,CAGJ,OACI,iBAAA,CACA,eAAA,CACA,0BAAA,CAAA,0BAAA,CAAA,mBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,WAAA,CACA,eAAA,CACA,cAAA,CACA,YAAA,CACA,aAAA,CACA,eAAA,CACA,uCAAA,CAEJ,QACI,mBAAA,CACA,mBAAA,CAEJ,iBACI,8BAAA,CACA,sCAAA,CACA,uBACI,qCAAA,CAGR,qBACI,8CAAA,CAEJ,qBAEI,uBAAA,CACA,2CAAA,CAEJ,UACI,uBAAA,CAEJ,GACI,eAAA,CAEJ,MACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CAEJ,MACI,YAAA,CAEJ,aACI,qBAAA,CAEJ,cACI,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CAEJ,eACI,gBAAA,CAEJ,kBACI,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CAEJ,eACI,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CAEJ,YACI,UAAA,CAEJ,gBACI,iBAAA,CAEJ,mBACI,oBAAA,CAEJ,iBACI,iBAAA,CAEJ,kBACI,kBAAA,CAEJ,MACI,SAAA,CACA,mBAAA,CAEJ,iBACI,uBAAA,CAEJ,oBACI,iCAAA,CAAA,yBAAA,CAEJ,mBACI,UAAA,CACA,eAAA,CACA,kBAAA,CACA,sBAAA,CAEJ,QACI,iBAAA,CACA,iBAAA,CACA,0BAAA,CAAA,kBAAA,CACA,wCAAA,CACA,mBAAA,CAEJ,UACI,iBAAA,CACA,eAAA,CACA,cAAA,CACA,uCAAA,CAEJ,2BACI,YAAA,CAEJ,8CACI,YAAA,CAEJ,MACI,YAAA,CACA,aAAA,CACA,iCAAA,CAEJ,WACI,aAAA,CACA,YAAA,CACA,aAAA,CAEJ,YACI,aAAA,CAEJ,cACI,YAAA,CAGJ,cACI,aAAA,CACA,YAAA,CACA,kBAAA,CAEJ,eACI,cAAA","file":"main.min.css"}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index cea45bd..702266d 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');
-
 * {
     padding: 0;
     margin: 0;
@@ -22,7 +20,7 @@ body {
     color: rgba(var(--text-color), 1);
     height: calc(100%);
     font-size: clamp(1rem, 1.2vmax, 3rem);
-    background: rgba(var(--foreground-color), 1);
+    background: rgba(var(--text-color), 0.06);
 }
 body[data-theme='dark']{
     --accent-color:#00fa9a;
@@ -30,6 +28,34 @@ body[data-theme='dark']{
     --text-color-light: 170, 170, 170;
     --foreground-color: 20, 20, 20;
     --error-color: rgb(255, 106, 106);
+    background: rgba(var(--foreground-color), 1);
+}
+.heading{
+    // font-family: 'Roboto Mono', sans-serif;
+}
+
+.h1{
+    font-size: 2.5rem;
+}
+.h2{
+    font-size: 2rem;
+}
+.h3{
+    font-size: 1.4rem;
+}
+.h4{
+    font-size: 1rem;
+}
+.h5{
+    font-size: 0.8rem;
+}
+
+p {
+    line-height: 1.5;
+}
+
+img{
+    object-fit: cover;
 }
 
 button{
@@ -79,9 +105,24 @@ ul{
 .flow-column{
     grid-auto-flow: column;
 }
+.gap-0-5{
+    gap: 0.5rem;
+}
+.gap-1{
+    gap: 1rem;
+}
+.gap-1-5{
+    gap: 1.5rem;
+}
 .align-center{
     align-items: center;
 }
+.text-center{
+    text-align: center;
+}
+.justify-center{
+    justify-content: center;
+}
 .justify-right{
     margin-left: auto;
 }
@@ -97,9 +138,18 @@ ul{
 .margin-top-1-5{
     margin-top: 1.5rem;
 }
+.margin-bottom-0-5{
+    margin-bottom: 0.5rem;
+}
+.margin-bottom-1{
+    margin-bottom: 1rem;
+}
 .margin-bottom-1-5{
     margin-bottom: 1.5rem;
 }
+.margin-bottom-2{
+    margin-bottom: 2rem;
+}
 .margin-left-0-5{
     margin-left: 0.5rem;
 }
@@ -158,11 +208,145 @@ ul{
     left: -0.5rem;
 }
 
-.option__icon{
-    height: 1.2rem;
-    width: 1.2rem;
-    margin-right: 0.8rem;
-}
-.option__label{
+.button__label{
     font-size: 1rem;
 }
+.button__icon{
+    height: 1.1rem;
+    width: 1.1rem;
+    &--left{
+        margin-right: 0.5rem;
+    }
+    &--right{
+        margin-left: 0.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;
+}
+
+
+#background_tile{
+    position: absolute;
+    width: 100%;
+    height: 80vh;
+    left: 0;
+    top: 50vh;
+    z-index: -1;
+    transform: skewY(-3deg);
+    background: #f6f6f6;
+}
+
+#main_header{
+    position: relative;
+    padding: 1rem;
+    grid-template-columns: repeat(3, 1fr);
+}
+#main_logo{
+    position: absolute;
+    justify-self: center;
+}
+#main_header__logo{
+    height: 1.8rem;
+    width: 1.8rem;
+}
+
+.page{
+    padding: 0 1rem;
+}
+
+#floor_1__outlets{
+    margin: 1rem 0;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+}
+
+.outlet-preview{
+    // transform-style: preserve-3d;
+    padding: 1rem;
+    background: rgba(var(--foreground-color), 1);
+    // border: solid 0.8rem rgba(var(--text-color), 1);
+    transition: box-shadow 0.3s;
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+    &:hover{
+        box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+    }
+/*     &:nth-of-type(1){
+        transform: rotateY(1deg);
+    }
+    &:nth-of-type(2){
+        transform: translateZ(-0.2rem);
+    }
+    &:nth-of-type(3){
+        transform: rotateY(-1deg);
+    } */
+}
+.outlet__title{
+    font-weight: bold;
+    text-transform: capitalize;
+}
+.outlet__description{
+    color: rgba(var(--text-color), 0.8);
+}
+.outlet-preview__button{}
+
+.investor-card{
+    grid-template-columns: auto 1fr;
+    grid-template-areas: 'img .' 'img .';
+}
+.investor__image{
+    grid-area: img;
+    width: 4rem;
+    height: 4rem;
+    border-radius: 50%;
+}
+
+
+@media only screen and (min-width: 640px) {
+    #main_header{
+        padding: 1.5rem 2rem;
+    }
+    .page{
+        padding: 0 3rem;
+    }
+}
+@media only screen and (min-width: 1280px) {
+    .page{
+        padding: 0 10vw;
+    }
+    .outlet-preview{
+        padding: 3rem 2rem;
+    }
+}
+
+@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);
+        }
+    }
+}
\ No newline at end of file
diff --git a/dp.jpg b/dp.jpg
new file mode 100644
index 0000000..4af1b4f
Binary files /dev/null and b/dp.jpg differ
diff --git a/index.html b/index.html
index 338168c..ab16fa6 100644
--- a/index.html
+++ b/index.html
@@ -6,13 +6,351 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <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:wght@400;500;700&display=swap" rel="stylesheet">
 </head>
-<body>
-    <header id="main_header">
-        <button>Elevator</button>
-        <div id="main_logo">
-            
+<body data-theme="light">
+
+    <!-- Compoenet templates -->
+
+    <template id="bit_bond_row">
+        <div class="bit-bond-series__row grid gap-1-5">
+            <div class="flex direction-column">
+                <h5 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">Series</h5>
+                <h3 class="h3 original-value"></h3>
+            </div>
+            <div class="flex direction-column">
+                <h5 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">Current value</h5>
+                <h3 class="h3 current-value"></h3>
+            </div>
+            <div class="flex direction-column">
+                <h5 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">Time Elapsed</h5>
+                <h3 class="h3 time-elapsed"></h3>
+            </div>
+        </div>
+    </template>
+
+    <!--  -->
+
+
+    <div id="background_tile"></div>
+    <header id="main_header" class="grid align-center margin-bottom-1">
+        <button class="button">Elevator</button>
+        <div id="main_logo" class="flex align-center">
+            <svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
+            <h4 class="h4 header__company-name">RanchiMall</h4>
         </div>
     </header>
+    <article id="homepage" class="page">
+        <section id="floor_1" class="floor">
+            <header class="floor__header margin-bottom-2">
+                <h4 class="heading h4">Floor 1</h4>
+            </header>
+            <main id="floor_1__outlets" class="grid">
+                <div class="flex direction-column card outlet-preview">
+                    <div class="flex direction-column margin-bottom-1-5 text-center">
+                        <h3 class="heading h3 outlet__title margin-bottom-1">bitcoin bonds</h3>
+                        <p class="outlet__description margin-bottom-1-5">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
+                        </p>
+                        <button class="button outlet-preview__button justify-right">
+                            <span class="button__label">VISIT</span>
+                            <svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 12l-6 6V6z"/></svg>
+                        </button>
+                    </div>
+                    <div id="bit_bond_series__container" class="flex"></div>
+                </div>
+                <div class="flex direction-column card outlet-preview">
+                    <div class="flex direction-column margin-bottom-1-5 text-center">
+                        <h3 class="heading h3 outlet__title margin-bottom-1">Bob's Fund</h3>
+                        <p class="outlet__description margin-bottom-1-5">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
+                        </p>
+                        <button class="button outlet-preview__button justify-right">
+                            <span class="button__label">VISIT</span>
+                            <svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 12l-6 6V6z"/></svg>
+                        </button>
+                    </div>
+                    <div id="bit_bond_series__container" class="grid gap-1">
+                        <div class="flex direction-column margin-bottom-1">
+                            <h5 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">
+                                Investor
+                            </h5>
+                            <h3 class="h3">
+                                John Doe
+                            </h3>
+                        </div>
+                        <div class="grid flow-column">
+                            <div class="flex direction-column">
+                                <h5 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">
+                                    Series
+                                </h5>
+                                <h3 class="h3">
+                                    $975
+                                </h3>
+                            </div>
+                            <div class="flex direction-column">
+                                <h4 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">
+                                    Current value
+                                </h4>
+                                <h3 class="h3">
+                                    $XXXXXX
+                                </h3>
+                            </div>
+                            <div class="flex direction-column">
+                                <h4 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">
+                                    Time Elapsed
+                                </h4>
+                                <h3 class="h3">
+                                    XXXXXX
+                                </h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex direction-column card outlet-preview">
+                    <div class="flex direction-column margin-bottom-1-5 text-center">
+                        <h3 class="heading h3 outlet__title margin-bottom-1">ICO</h3>
+                        <p class="outlet__description margin-bottom-1-5">
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
+                        </p>
+                        <button class="button outlet-preview__button justify-right">
+                            <span class="button__label">VISIT</span>
+                            <svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 12l-6 6V6z"/></svg>
+                        </button>
+                    </div>
+                    <div id="ico_investor__container" class="grid">
+                        <div class="investor-card grid gap-1-5">
+                            <img class="investor__image" src="dp.jpg" alt="">
+                            <div class="flex direction-column">
+                                <h4 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">
+                                    Investor
+                                </h4>
+                                <h3 class="h3">
+                                    John Doe
+                                </h3>
+                            </div>
+                            <div class="flex direction-column">
+                                <h4 class="h5 heading color-0-8 weight-500 margin-bottom-0-5">
+                                    Contribution
+                                </h4>
+                                <p class="weight-700">
+                                    Helping us in social media with increasing reach of Twitter
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </section>
+    </article>
+
+    <script>
+        const domRefs = {}
+
+        function getRef(elementId){
+            if(!domRefs.elementId)
+                domRefs[elementId] = document.getElementById(elementId)
+            return domRefs[elementId]
+        }
+    </script>
+
+    <script>
+
+        const render = {
+            bitBondRow(obj){
+                const {series, currentValue, timeElapsed} = obj
+                const row = document.getElementById('bit_bond_row').content.cloneNode(true)
+                row.querySelector('.original-value').textContent = series
+                row.querySelector('.current-value').textContent = currentValue
+                row.querySelector('.time-elapsed').textContent = timeElapsed
+                return row
+            }
+        }
+
+
+        /* 
+            Animations
+        */
+
+        const fadeIn = [
+            {opacity: 0},
+            {opacity: 1},
+        ]
+
+        const fadeOut = [
+            {opacity: 1},
+            {opacity: 0},
+        ]
+
+        //Fly animation
+        const flyInZoom = [
+            {
+                transform: 'scale(0.9)',
+                opacity: 0
+            },
+            {
+                transform: 'scale(1)',
+                opacity: 1
+            }
+        ]
+        const flyInShrink = [
+            {
+                transform: 'scale(1.1)',
+                opacity: 0
+            },
+            {
+                transform: 'scale(1)',
+                opacity: 1
+            },
+        ]
+        const flyOutZoom = [
+            {
+                transform: 'scale(1)',
+                opacity: 1
+            },
+            {
+                transform: 'scale(1.1)',
+                opacity: 0
+            }
+        ]
+        const flyOutShrink = [
+            {
+                transform: 'scale(1)',
+                opacity: 1
+            },
+            {
+                transform: 'scale(0.9)',
+                opacity: 0
+            },
+        ]
+        
+        // Slide animations
+        const slideInLeft = [
+            {
+                transform: 'translateX(1rem)',
+                opacity: 0
+            },
+            {
+                transform: 'translateX(0)',
+                opacity: 1
+            }
+        ]
+        const slideInRight = [
+            {
+                transform: 'translateX(-1rem)',
+                opacity: 0
+            },
+            {
+                transform: 'translateX(0)',
+                opacity: 1
+            },
+        ]
+        const slideOutLeft = [
+            {
+                transform: 'translateX(0)',
+                opacity: 1
+            },
+            {
+                transform: 'translateX(-1rem)',
+                opacity: 0
+            }
+        ]
+        const slideOutRight = [
+            {
+                transform: 'translateX(0)',
+                opacity: 1
+            },
+            {
+                transform: 'translateX(1rem)',
+                opacity: 0
+            },
+        ]
+        const slideInDown = [
+            {
+                transform: 'translateY(-1rem)',
+                opacity: 0
+            },
+            {
+                transform: 'translateY(0)',
+                opacity: 1
+            },
+        ]
+        const slideOutUp = [
+            {
+                transform: 'translateY(0)',
+                opacity: 1
+            },
+            {
+                transform: 'translateY(-1rem)',
+                opacity: 0
+            },
+        ]
+
+        // eases
+        const easeInOvershoot = `cubic-bezier(0.6, -0.28, 0.735, 0.045)`;
+        const easeOutOvershoot = `cubic-bezier(0.175, 0.885, 0.32, 1.275)`;
+
+        //////////////////
+
+
+        const bitBondSerieses = [
+            {
+                series: '$975',
+                currentValue: '$XXXXX',
+                timeElapsed: '2years'
+            },
+            {
+                series: '$1057',
+                currentValue: '$XXXXX',
+                timeElapsed: '2years'
+            },
+            {
+                series: '$1064',
+                currentValue: '$XXXXX',
+                timeElapsed: '2years'
+            },
+            {
+                series: '$1205',
+                currentValue: '$XXXXX',
+                timeElapsed: '2years'
+            },
+            {
+                series: '$1285',
+                currentValue: '$XXXXX',
+                timeElapsed: '2years'
+            },
+            {
+                series: '$2513',
+                currentValue: '$XXXXX',
+                timeElapsed: '2years'
+            },
+        ]
+        let currentSeriesIndex = 0
+        function changeSeriesRow(){
+            const options = {
+                        duration: 300,
+                        fill: 'forwards'
+                    }
+            if(getRef('bit_bond_series__container').children.length){
+                getRef('bit_bond_series__container').children[0].animate(fadeOut, options)
+                .onfinish = () => {
+                    getRef('bit_bond_series__container').children[0].remove()
+                    replaceSeriesRow(options)
+                    setTimeout(changeSeriesRow, 3000)
+                }
+            }else{
+                replaceSeriesRow(options)
+                setTimeout(changeSeriesRow, 3000)
+            }
+        }
+        function replaceSeriesRow(options){
+            const row = render.bitBondRow(bitBondSerieses[currentSeriesIndex])
+            getRef('bit_bond_series__container').append(row)
+            getRef('bit_bond_series__container').children[0].animate(fadeIn, options)
+            currentSeriesIndex = currentSeriesIndex < bitBondSerieses.length - 1 ? currentSeriesIndex + 1 : 0
+        }
+        changeSeriesRow()
+    </script>
 </body>
 </html>
\ No newline at end of file