diff --git a/components/css/main.css b/components/css/main.css
index 51a36db..fb3c16c 100644
--- a/components/css/main.css
+++ b/components/css/main.css
@@ -15,73 +15,25 @@ html, body {
 }
 
 body {
-  --accent-color: #4d2588;
+  background: rgba(var(--background-color), 1);
+}
+body,
+body * {
+  --accent-color: #0D7377;
   --text-color: 17, 17, 17;
   --background-color: 255, 255, 255;
   --danger-color: red;
   color: rgba(var(--text-color), 1);
-  background: rgba(var(--background-color), 1);
-  /* string  - green */
-  /* keyword - dark pink */
-  /* comment - gray */
-  /* type - light blue */
-  /* literal */
-  /* html/xml tag */
-  /* html/xml attribute name */
-  /* html/xml attribute value*/
-  /* decimal - blue */
-}
-body pre .str, body code .str {
-  color: #65B042;
-}
-body pre .kwd, body code .kwd {
-  color: #E28964;
-}
-body pre .com, body code .com {
-  color: #AEAEAE;
-  font-style: italic;
-}
-body pre .typ, body code .typ {
-  color: #4395ff;
-}
-body pre .lit, body code .lit {
-  color: #1a76c2;
-}
-body pre .tag, body code .tag {
-  color: #1976D2;
-}
-body pre .atn, body code .atn {
-  color: #00C853;
-}
-body pre .atv, body code .atv {
-  color: #F57F17;
-}
-body pre .dec, body code .dec {
-  color: #3387CC;
 }
 
-body[data-theme=dark] {
-  /* html/xml tag */
-  /* html/xml attribute name */
-  /* html/xml attribute value*/
-}
 body[data-theme=dark],
 body[data-theme=dark] * {
-  --accent-color: #976dd6;
+  --accent-color: #32E0C4;
   --text-color: 240, 240, 240;
   --text-color-light: 170, 170, 170;
-  --background-color: 20, 20, 20;
+  --background-color: 10, 10, 10;
   --danger-color: rgb(255, 106, 106);
 }
-body[data-theme=dark] pre .tag, body[data-theme=dark] code .tag {
-  color: #29B6F6;
-}
-body[data-theme=dark] pre .atn, body[data-theme=dark] code .atn {
-  color: #1DE9B6;
-}
-body[data-theme=dark] pre .atv, body[data-theme=dark] code .atv {
-  color: #84FFFF;
-}
 
 p {
   font-size: 0.8;
@@ -124,21 +76,33 @@ ul {
   list-style: none;
 }
 
-table {
+.table {
+  display: grid;
+  gap: 0.5rem;
+  margin: 1rem 0;
   position: relative;
   text-align: left;
+  overflow-x: auto;
   border-radius: 0.5rem;
   border-collapse: separate;
   border-spacing: 1rem 1.5rem;
   background-color: rgba(var(--text-color), 0.04);
-  margin: 1rem 0;
 }
-table p:only-of-type {
+.table p:only-of-type {
   margin-bottom: 0;
 }
-table td {
-  line-height: 1.7;
-  max-width: 65ch;
+
+.tr {
+  display: grid;
+  gap: 1rem;
+  padding: 1rem;
+  grid-template-columns: 12rem minmax(0, 1fr);
+}
+.tr:nth-of-type(odd) {
+  background-color: rgba(var(--text-color), 0.04);
+}
+.tr p {
+  min-width: 30ch;
 }
 
 .flex {
@@ -380,15 +344,61 @@ table td {
 }
 
 pre .pun, code .pun {
-  color: rgba(var(--text-color), 0.8);
+  color: khaki;
 }
 
 /* punctuation */
 pre .pln, code .pln {
-  color: rgba(var(--text-color), 0.8);
+  color: rgba(255, 255, 255, 0.8);
 }
 
 /* plaintext */
+pre .str, code .str {
+  color: #65B042;
+}
+
+/* string  - green */
+pre .kwd, code .kwd {
+  color: #E28964;
+}
+
+/* keyword - dark pink */
+pre .com, code .com {
+  color: #AEAEAE;
+  font-style: italic;
+}
+
+/* comment - gray */
+pre .typ, code .typ {
+  color: #4395ff;
+}
+
+/* type - light blue */
+pre .lit, code .lit {
+  color: #1a76c2;
+}
+
+/* literal */
+pre .dec, code .dec {
+  color: #3387CC;
+}
+
+/* decimal - blue */
+pre .tag, code .tag {
+  color: #29B6F6;
+}
+
+/* html/xml tag */
+pre .atn, code .atn {
+  color: #1DE9B6;
+}
+
+/* html/xml attribute name */
+pre .atv, code .atv {
+  color: #84FFFF;
+}
+
+/* html/xml attribute value*/
 pre {
   max-width: 100%;
   margin: 1rem 0;
@@ -398,7 +408,7 @@ pre {
   font-weight: 500;
   white-space: pre-line;
   border-radius: 0.5rem;
-  background: rgba(var(--text-color), 0.04);
+  background: rgba(0, 0, 0, 0.9);
   line-height: 1.7;
 }
 
@@ -447,16 +457,6 @@ main {
   margin-left: -0.5rem;
 }
 
-#backdrop {
-  position: fixed;
-  z-index: 4;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
 .right {
   max-height: 100%;
   overflow-y: auto;
@@ -555,6 +555,7 @@ strong.important {
   border-radius: 0.3rem;
   padding: 0 0.5rem;
   font-size: 0.9rem;
+  line-height: 1.6;
 }
 
 #total_components_count {
diff --git a/components/css/main.min.css b/components/css/main.min.css
index 694d843..e0a7721 100644
--- a/components/css/main.min.css
+++ b/components/css/main.min.css
@@ -1 +1 @@
-p,pre,table td{line-height:1.7}.list,ul{list-style:none}p,strong,table td{max-width:65ch}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{--accent-color:#4d2588;--text-color:17,17,17;--background-color:255,255,255;--danger-color:red;color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body code .str,body pre .str{color:#65B042}body code .kwd,body pre .kwd{color:#E28964}body code .com,body pre .com{color:#AEAEAE;font-style:italic}body code .typ,body pre .typ{color:#4395ff}body code .lit,body pre .lit{color:#1a76c2}body code .tag,body pre .tag{color:#1976D2}body code .atn,body pre .atn{color:#00C853}body code .atv,body pre .atv{color:#F57F17}body code .dec,body pre .dec{color:#3387CC}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#976dd6;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:20,20,20;--danger-color:rgb(255, 106, 106)}body[data-theme=dark] code .tag,body[data-theme=dark] pre .tag{color:#29B6F6}body[data-theme=dark] code .atn,body[data-theme=dark] pre .atn{color:#1DE9B6}body[data-theme=dark] code .atv,body[data-theme=dark] pre .atv{color:#84FFFF}p{font-size:.8;margin-bottom:1.5rem;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}img{object-fit:cover}a{color:inherit;text-decoration:none}.color-0-8,code .pln,code .pun,pre .pln,pre .pun{color:rgba(var(--text-color),.8)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{display:inline-flex;border:none;background-color:inherit}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}table{position:relative;text-align:left;border-radius:.5rem;border-collapse:separate;border-spacing:1rem 1.5rem;background-color:rgba(var(--text-color),.04);margin:1rem 0}table p:only-of-type{margin-bottom:0}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.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}#side_nav h4,.highlight,pre{font-size:.9rem}.uppercase{text-transform:uppercase}.capitalize,.list__item,h2,ol li::first-letter{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.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}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.button__icon--right,.comp-checkbox__title{margin-left:.5rem}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500,pre{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16);pointer-events:none}.interact,.theme-switcher{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}.highlight,code,strong.important{border-radius:.3rem}.interact{overflow:hidden}.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),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.theme-switcher{justify-self:flex-end;width:1.5rem;height:1.5rem}.card,.list{flex-direction:column}.theme-switcher .icon{position:absolute;transition:transform .6s}.theme-switcher__checkbox{display:none}.theme-switcher__checkbox:checked~.moon-icon{transform:scale(0) rotate(90deg)}.theme-switcher__checkbox:not(:checked)~.sun-icon{transform:scale(0) rotate(-90deg)}pre{max-width:100%;margin:1rem 0;padding:0 1.5rem;overflow-x:auto;white-space:pre-line;border-radius:.5rem;background:rgba(var(--text-color),.04)}code{font-weight:400;padding:.2rem .4rem;background:rgba(var(--text-color),.1)}code>*{font-family:"Roboto Mono",monospace}pre code{line-height:1.4;border-radius:none;background:0 0;width:100%}h1,h2,h3,h4.h5{font-family:Poppins,sans-serif}h2{margin:3rem 0 1rem}h2:first-of-type{margin-top:1rem}main{display:grid;height:100%}.card,.list,.list__item,.page,strong.important{display:flex}#main_header{padding:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color),.1)}#side_nav_button{padding:.5rem;margin-left:-.5rem}#backdrop{position:fixed;z-index:4;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5)}#side_nav>:last-child{padding-bottom:3rem}#side_nav h4{letter-spacing:.08em;text-transform:uppercase;padding:1.5rem}.right{max-height:100%;overflow-y:auto;padding:1.5rem}.right h1{margin-bottom:1.5rem}.list{margin-bottom:.8rem}ol li,sm-carousel{margin-bottom:1rem}.list__item{padding:.8rem 1.5rem}.list__item--active{color:var(--accent-color);background:rgba(var(--text-color),.06)}.card{margin-right:1rem;border-radius:.4rem;padding:1.5rem;min-width:min(24rem,80%);background-color:rgba(var(--text-color),.06)}sm-tab-header{margin-bottom:1.5rem}.page{flex-direction:column;padding-bottom:3rem}ol{padding:.6rem 1rem;max-width:75ch;margin-bottom:3rem}ol li:last-of-type{margin-bottom:0}strong.important{padding:.5rem;margin:.5rem 0;color:rgba(0,0,0,.8);background-color:khaki}.highlight{display:inline-flex;font-family:"Roboto Mono",monospace;background-color:rgba(var(--text-color),.1);padding:0 .5rem}#total_components_count{font-size:4rem}#components_selection_list{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));padding:1.5rem 0 3rem}@media screen and (max-width:640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}}@media screen and (min-width:640px){#main_header{padding:1rem 1.5rem;grid-area:main-header}#side_nav_button{display:none}main{grid-template-columns:14rem minmax(0,1fr);grid-template-areas:"main-header main-header" ". ."}.right{display:grid;grid-template-columns:1fr 90% 1fr}.right>*{grid-column:2/3}.page__title{font-size:2.5rem}#overview_page{display:grid;gap:1.5rem;grid-template-columns:1fr auto}#overview_page>div:first-of-type{grid-column:2/3;text-align:right}#overview_page>div:nth-of-type(2){grid-row:1/2}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.list__item:hover{background:rgba(var(--text-color),.1);cursor:pointer}}
\ No newline at end of file
+p,pre{line-height:1.7}.list,ul{list-style:none}p,strong{max-width:65ch}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{background:rgba(var(--background-color),1)}body,body *{--accent-color:#0D7377;--text-color:17,17,17;--background-color:255,255,255;--danger-color:red;color:rgba(var(--text-color),1)}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#32E0C4;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--danger-color:rgb(255, 106, 106)}p{font-size:.8;margin-bottom:1.5rem;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}img{object-fit:cover}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{display:inline-flex;border:none;background-color:inherit}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}.table{display:grid;gap:.5rem;margin:1rem 0;position:relative;text-align:left;overflow-x:auto;border-radius:.5rem;border-collapse:separate;border-spacing:1rem 1.5rem;background-color:rgba(var(--text-color),.04)}.table p:only-of-type{margin-bottom:0}.tr{display:grid;gap:1rem;padding:1rem;grid-template-columns:12rem minmax(0,1fr)}.tr:nth-of-type(odd){background-color:rgba(var(--text-color),.04)}.tr p{min-width:30ch}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.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}#side_nav h4,.highlight,pre{font-size:.9rem}.uppercase{text-transform:uppercase}.capitalize,.list__item,h2,ol li::first-letter{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.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}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.button__icon--right,.comp-checkbox__title{margin-left:.5rem}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color),.8)}.weight-400{font-weight:400}.weight-500,pre{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16);pointer-events:none}.interact,.theme-switcher{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}.highlight,code,strong.important{border-radius:.3rem}.interact{overflow:hidden}.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),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.theme-switcher{justify-self:flex-end;width:1.5rem;height:1.5rem}.card,.list{flex-direction:column}.theme-switcher .icon{position:absolute;transition:transform .6s}.theme-switcher__checkbox{display:none}.theme-switcher__checkbox:checked~.moon-icon{transform:scale(0) rotate(90deg)}.theme-switcher__checkbox:not(:checked)~.sun-icon{transform:scale(0) rotate(-90deg)}code .pun,pre .pun{color:khaki}code .pln,pre .pln{color:rgba(255,255,255,.8)}code .str,pre .str{color:#65B042}code .kwd,pre .kwd{color:#E28964}code .com,pre .com{color:#AEAEAE;font-style:italic}code .typ,pre .typ{color:#4395ff}code .lit,pre .lit{color:#1a76c2}code .dec,pre .dec{color:#3387CC}code .tag,pre .tag{color:#29B6F6}code .atn,pre .atn{color:#1DE9B6}code .atv,pre .atv{color:#84FFFF}pre{max-width:100%;margin:1rem 0;padding:0 1.5rem;overflow-x:auto;white-space:pre-line;border-radius:.5rem;background:rgba(0,0,0,.9)}code{font-weight:400;padding:.2rem .4rem;background:rgba(var(--text-color),.1)}code>*{font-family:"Roboto Mono",monospace}pre code{line-height:1.4;border-radius:none;background:0 0;width:100%}h1,h2,h3,h4.h5{font-family:Poppins,sans-serif}h2{margin:3rem 0 1rem}h2:first-of-type{margin-top:1rem}main{display:grid;height:100%}.card,.list,.list__item,.page,strong.important{display:flex}#main_header{padding:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color),.1)}#side_nav_button{padding:.5rem;margin-left:-.5rem}#side_nav>:last-child{padding-bottom:3rem}#side_nav h4,.card,.right{padding:1.5rem}#side_nav h4{letter-spacing:.08em;text-transform:uppercase}.right{max-height:100%;overflow-y:auto}.right h1{margin-bottom:1.5rem}.list{margin-bottom:.8rem}ol li,sm-carousel{margin-bottom:1rem}.list__item{padding:.8rem 1.5rem}.list__item--active{color:var(--accent-color);background:rgba(var(--text-color),.06)}.card{margin-right:1rem;border-radius:.4rem;min-width:min(24rem,80%);background-color:rgba(var(--text-color),.06)}sm-tab-header{margin-bottom:1.5rem}.page{flex-direction:column;padding-bottom:3rem}ol{padding:.6rem 1rem;max-width:75ch;margin-bottom:3rem}ol li:last-of-type{margin-bottom:0}strong.important{padding:.5rem;margin:.5rem 0;color:rgba(0,0,0,.8);background-color:khaki}.highlight{display:inline-flex;font-family:"Roboto Mono",monospace;background-color:rgba(var(--text-color),.1);padding:0 .5rem;line-height:1.6}#total_components_count{font-size:4rem}#components_selection_list{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));padding:1.5rem 0 3rem}@media screen and (max-width:640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}}@media screen and (min-width:640px){#main_header{padding:1rem 1.5rem;grid-area:main-header}#side_nav_button{display:none}main{grid-template-columns:14rem minmax(0,1fr);grid-template-areas:"main-header main-header" ". ."}.right{display:grid;grid-template-columns:1fr 90% 1fr}.right>*{grid-column:2/3}.page__title{font-size:2.5rem}#overview_page{display:grid;gap:1.5rem;grid-template-columns:1fr auto}#overview_page>div:first-of-type{grid-column:2/3;text-align:right}#overview_page>div:nth-of-type(2){grid-row:1/2}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.list__item:hover{background:rgba(var(--text-color),.1);cursor:pointer}}
\ No newline at end of file
diff --git a/components/css/main.scss b/components/css/main.scss
index 1c0b209..b5d133e 100644
--- a/components/css/main.scss
+++ b/components/css/main.scss
@@ -12,36 +12,26 @@ html, body{
     scroll-behavior: smooth;
 }
 body {
-    --accent-color: #4d2588;
-    --text-color: 17, 17, 17;
-    --background-color: 255, 255, 255;
-    --danger-color: red;
-    color: rgba(var(--text-color), 1);
+    &,
+    *{
+        --accent-color: #0D7377;
+        --text-color: 17, 17, 17;
+        --background-color: 255, 255, 255;
+        --danger-color: red;
+        color: rgba(var(--text-color), 1);
+    }
     background: rgba(var(--background-color), 1);
 
-    pre .str, code .str { color: #65B042; } /* string  - green */
-    pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
-    pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
-    pre .typ, code .typ { color: #4395ff; } /* type - light blue */
-    pre .lit, code .lit { color: #1a76c2; } /* literal */
-    pre .tag, code .tag { color: #1976D2; } /* html/xml tag */
-    pre .atn, code .atn { color: #00C853; } /* html/xml attribute name */
-    pre .atv, code .atv { color: #F57F17 } /* html/xml attribute value*/
-    pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
 }
 body[data-theme='dark']{
     &,
     *{
-        --accent-color: #976dd6;
+        --accent-color: #32E0C4;
         --text-color: 240, 240, 240;
         --text-color-light: 170, 170, 170;
-        --background-color: 20, 20, 20;
+        --background-color: 10, 10, 10;
         --danger-color: rgb(255, 106, 106);
     }
-
-    pre .tag, code .tag { color: #29B6F6; } /* html/xml tag */
-    pre .atn, code .atn { color: #1DE9B6; } /* html/xml attribute name */
-    pre .atv, code .atv { color: #84FFFF; } /* html/xml attribute value*/
 }
 p {
     font-size: 0.8;
@@ -80,22 +70,33 @@ sm-button{
 ul{
     list-style: none;
 }
-table{
+.table{
+    display: grid;
+    gap: 0.5rem;
+    margin: 1rem 0;
     position: relative;
     text-align: left;
+    overflow-x: auto;
     border-radius: 0.5rem;
     border-collapse: separate;
     border-spacing: 1rem 1.5rem;
     background-color: rgba(var(--text-color), .04);
-    margin: 1rem 0;
     p:only-of-type{
         margin-bottom: 0;
     }
-    td{
-        line-height: 1.7;
-        max-width: 65ch;
-    }
 }
+.tr{
+    display: grid;
+    gap: 1rem;
+    padding: 1rem;
+    grid-template-columns: 12rem minmax(0, 1fr);
+    &:nth-of-type(odd){
+        background-color: rgba(var(--text-color), .04);
+    }
+    p{
+        min-width: 30ch;
+    }
+}   
 .flex{
     display: flex;
 }
@@ -291,8 +292,17 @@ table{
 
 //Syntax highlighting
 
-pre .pun, code .pun { color: rgba(var(--text-color), 0.8); } /* punctuation */
-pre .pln, code .pln { color: rgba(var(--text-color), 0.8); } /* plaintext */
+pre .pun, code .pun { color: khaki } /* punctuation */
+pre .pln, code .pln { color: rgba(255, 255, 255, 0.8); } /* plaintext */
+pre .str, code .str { color: #65B042; } /* string  - green */
+pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
+pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
+pre .typ, code .typ { color: #4395ff; } /* type - light blue */
+pre .lit, code .lit { color: #1a76c2; } /* literal */
+pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
+pre .tag, code .tag { color: #29B6F6; } /* html/xml tag */
+pre .atn, code .atn { color: #1DE9B6; } /* html/xml attribute name */
+pre .atv, code .atv { color: #84FFFF; } /* html/xml attribute value*/
 
 pre{
     max-width: 100%;
@@ -303,7 +313,7 @@ pre{
     font-weight: 500;
     white-space: pre-line;
     border-radius: 0.5rem;
-    background: rgba(var(--text-color), .04);
+    background: rgba(0,0,0, 0.9);
     line-height: 1.7;
 }
 code{
@@ -345,15 +355,6 @@ main{
     padding: 0.5rem;
     margin-left: -0.5rem;
 }
-#backdrop{
-    position: fixed;
-    z-index: 4;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0,0,0, 0.5);
-}
 .right{
     max-height: 100%;
     overflow-y: auto;
@@ -442,6 +443,7 @@ strong.important{
     border-radius: 0.3rem;
     padding: 0 0.5rem;
     font-size: 0.9rem;
+    line-height: 1.6;
 }
 #total_components_count{
     font-size: 4rem;
diff --git a/components/dist/carousel.js b/components/dist/carousel.js
index 5981cc9..86c1dd1 100644
--- a/components/dist/carousel.js
+++ b/components/dist/carousel.js
@@ -22,7 +22,7 @@ smCarousel.innerHTML = `
     --nav-background-color: rgba(var(--text-color), 1);
     --nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;
     --indicator-top: auto;
-    --indicator-bottom: -1rem;
+    --indicator-bottom: -1.5rem;
     --active-indicator-color: var(--accent-color);
 }
 .carousel__button{
@@ -67,6 +67,9 @@ button:focus-visible{
 .hide{
     display: none !important;
 }
+:host([indicator]) .carousel-container{
+    margin-bottom: 2rem;
+}
 .carousel-container{
     position: relative;
     display: grid;
diff --git a/components/dist/carousel.min.js b/components/dist/carousel.min.js
index 15df292..99d3c9c 100644
--- a/components/dist/carousel.min.js
+++ b/components/dist/carousel.min.js
@@ -1 +1 @@
-const smCarousel=document.createElement("template");smCarousel.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --arrow-left: 1rem;\n    --arrow-right: 1rem;\n    --arrow-top: auto;\n    --arrow-bottom: auto;\n    --nav-icon-fill: rgba(var(--background-color), 1);\n    --nav-background-color: rgba(var(--text-color), 1);\n    --nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;\n    --indicator-top: auto;\n    --indicator-bottom: -1rem;\n    --active-indicator-color: var(--accent-color);\n}\n.carousel__button{\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    cursor: pointer;\n    min-width: 0;\n    top:  var(--arrow-top);\n    bottom:  var(--arrow-bottom);\n    border: none;\n    background: var(--nav-background-color);\n    -webkit-box-shadow: var(--nav-box-shadow);\n            box-shadow:  var(--nav-box-shadow); \n    -webkit-tap-highlight-color: transparent;\n    transition: transform 0.3s;\n    z-index: 1;\n    border-radius: 3rem;\n    padding: 0.5rem;\n}\nbutton:focus{\n    outline: none;\n}\nbutton:focus-visible{\n    outline: rgba(var(--text-color), 1) 0.1rem solid;\n}\n.carousel__button:active{\n    transform: scale(0.9);\n}\n.carousel__button--left{\n    left: var(--arrow-left);\n}\n.carousel__button--right{\n    right: var(--arrow-right);\n}\n.icon {\n    height: 1.5rem;\n    width: 1.5rem;\n    fill: var(--nav-icon-fill);\n}\n.hide{\n    display: none !important;\n}\n.carousel-container{\n    position: relative;\n    display: grid;\n    width: 100%;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.carousel{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    max-width: 100%;\n    width: 100%;\n    overflow: auto hidden;\n    -ms-scroll-snap-type: x mandatory;\n        scroll-snap-type: x mandatory;\n}\n.indicators{\n    display: -ms-grid;\n    display: grid;\n    grid-auto-flow: column;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: absolute;\n    top: var(--indicator-top);\n    bottom: var(--indicator-bottom);\n    gap: 0.5rem;\n    width: 100%;\n}\n.dot{\n    position: relative;\n    padding: 0.2rem;\n    background: rgba(var(--text-color), 0.3);\n    border-radius: 1rem;\n    -webkit-transition: 0.2s;\n    -o-transition: 0.2s;\n    transition: 0.2s;\n    cursor: pointer;\n}\n.dot.active{\n    -webkit-transform: scale(1.5);\n        -ms-transform: scale(1.5);\n            transform: scale(1.5);\n    background: var(--active-indicator-color);\n}\nslot::slotted(*){\n    scroll-snap-align: center;\n}\n:host([align-items="start"]) slot::slotted(*){\n    scroll-snap-align: start;\n}\n:host([align-items="center"]) slot::slotted(*){\n    scroll-snap-align: center;\n}\n:host([align-items="end"]) slot::slotted(*){\n    scroll-snap-align: end;\n}\n@media (hover: hover){\n    .carousel{\n        overflow: hidden;\n    }\n    .left,.right{\n        display: none;\n    }\n}\n@media (hover: none){\n    ::-webkit-scrollbar-track {\n        -webkit-box-shadow: none !important;\n        background-color: transparent !important;\n    }\n    ::-webkit-scrollbar {\n        height: 0;\n        background-color: transparent;\n    }\n    .carousel{\n        overflow: auto none;\n    }\n    .carousel__button{\n        display: none;\n    }\n    .left,.right{\n        display: block;\n    }\n}\n</style>\n<div class="carousel-container">\n    <button class="carousel__button carousel__button--left hide">\n        <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="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>\n    </button>\n    <div part="carousel" class="carousel">\n        <slot></slot>\n    </div>\n    <button class="carousel__button carousel__button--right hide">\n        <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="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>\n    </button>\n    <div class="indicators"></div>\n</div>\n',customElements.define("sm-carousel",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCarousel.content.cloneNode(!0)),this.isAutoPlaying=!1,this.autoPlayInterval=5e3,this.autoPlayTimeout,this.initialTimeout,this.activeSlideNum=0,this.carouselItems,this.indicators,this.showIndicator=!1,this.carousel=this.shadowRoot.querySelector(".carousel"),this.carouselContainer=this.shadowRoot.querySelector(".carousel-container"),this.carouselSlot=this.shadowRoot.querySelector("slot"),this.navButtonRight=this.shadowRoot.querySelector(".carousel__button--right"),this.navButtonLeft=this.shadowRoot.querySelector(".carousel__button--left"),this.indicatorsContainer=this.shadowRoot.querySelector(".indicators"),this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.handleIndicatorClick=this.handleIndicatorClick.bind(this),this.showSlide=this.showSlide.bind(this),this.nextSlide=this.nextSlide.bind(this),this.autoPlay=this.autoPlay.bind(this),this.startAutoPlay=this.startAutoPlay.bind(this),this.stopAutoPlay=this.stopAutoPlay.bind(this)}static get observedAttributes(){return["indicator","autoplay","interval"]}scrollLeft(){this.carousel.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.carousel.scrollBy({left:this.scrollDistance,behavior:"smooth"})}showSlide(t){this.carousel.scrollTo({left:this.carouselItems[t].getBoundingClientRect().left-this.carousel.getBoundingClientRect().left+this.carousel.scrollLeft,behavior:"smooth"})}nextSlide(){if(!this.carouselItems)return;let t=this.activeSlideNum+1<this.carouselItems.length?this.activeSlideNum+1:0;this.showSlide(t)}autoPlay(){this.nextSlide(),this.isAutoPlaying&&(this.autoPlayTimeout=setTimeout(()=>{this.autoPlay()},this.autoPlayInterval))}startAutoPlay(){this.setAttribute("autoplay","")}stopAutoPlay(){this.removeAttribute("autoplay")}createIndicator(t){let n=document.createElement("div");return n.classList.add("dot"),n.dataset.rank=t,n}handleIndicatorClick(t){if(t.target.closest(".dot")){const n=parseInt(t.target.closest(".dot").dataset.rank);this.activeSlideNum!==n&&this.showSlide(n)}}handleKeyDown(t){"ArrowLeft"===t.code?this.scrollRight():"ArrowRight"===t.code&&this.scrollRight()}connectedCallback(){let t=document.createDocumentFragment();this.carouselSlot.addEventListener("slotchange",n=>{this.carouselItems=this.carouselSlot.assignedElements(),this.carouselItems.forEach(t=>e.observe(t)),this.carouselItems.length>0?(i.observe(this.carouselItems[0]),o.observe(this.carouselItems[this.carouselItems.length-1])):(navButtonLeft.classList.add("hide"),navButtonRight.classList.add("hide"),i.disconnect(),o.disconnect()),this.showIndicator&&(this.indicatorsContainer.innerHTML="",this.carouselItems.forEach((n,e)=>{t.append(this.createIndicator(e)),n.dataset.rank=e}),this.indicatorsContainer.append(t),this.indicators=this.indicatorsContainer.children)});const n={threshold:.9,root:this},e=new IntersectionObserver(t=>{t.forEach(t=>{if(this.showIndicator){const n=parseInt(t.target.dataset.rank);t.isIntersecting?(this.indicators[n].classList.add("active"),this.activeSlideNum=n):this.indicators[n].classList.remove("active")}})},n),i=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonLeft.classList.add("hide"):this.navButtonLeft.classList.remove("hide")})},n),o=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonRight.classList.add("hide"):this.navButtonRight.classList.remove("hide")})},n),s=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const n=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*n.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});s.observe(this),this.addEventListener("keydown",this.handleKeyDown),this.navButtonRight.addEventListener("click",this.scrollRight),this.navButtonLeft.addEventListener("click",this.scrollLeft),this.indicatorsContainer.addEventListener("click",this.handleIndicatorClick)}attributeChangedCallback(t,n,e){n!==e&&("indicator"===t&&(this.showIndicator=this.hasAttribute("indicator")),"autoplay"===t&&(this.hasAttribute("autoplay")?this.initialTimeout=setTimeout(()=>{this.isAutoPlaying=!0,this.autoPlay()},this.autoPlayInterval):(this.isAutoPlaying=!1,clearTimeout(this.autoPlayTimeout),clearTimeout(this.initialTimeout))),"interval"===t&&(this.hasAttribute("interval")&&""!==this.getAttribute("interval").trim()?this.autoPlayInterval=Math.abs(parseInt(this.getAttribute("interval").trim())):this.autoPlayInterval=5e3))}disconnectedCallback(){this.navButtonRight.removeEventListener("click",this.scrollRight),this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.indicatorsContainer.removeEventListener("click",this.handleIndicatorClick)}});
\ No newline at end of file
+const smCarousel=document.createElement("template");smCarousel.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --arrow-left: 1rem;\n    --arrow-right: 1rem;\n    --arrow-top: auto;\n    --arrow-bottom: auto;\n    --nav-icon-fill: rgba(var(--background-color), 1);\n    --nav-background-color: rgba(var(--text-color), 1);\n    --nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;\n    --indicator-top: auto;\n    --indicator-bottom: -1.5rem;\n    --active-indicator-color: var(--accent-color);\n}\n.carousel__button{\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    cursor: pointer;\n    min-width: 0;\n    top:  var(--arrow-top);\n    bottom:  var(--arrow-bottom);\n    border: none;\n    background: var(--nav-background-color);\n    -webkit-box-shadow: var(--nav-box-shadow);\n            box-shadow:  var(--nav-box-shadow); \n    -webkit-tap-highlight-color: transparent;\n    transition: transform 0.3s;\n    z-index: 1;\n    border-radius: 3rem;\n    padding: 0.5rem;\n}\nbutton:focus{\n    outline: none;\n}\nbutton:focus-visible{\n    outline: rgba(var(--text-color), 1) 0.1rem solid;\n}\n.carousel__button:active{\n    transform: scale(0.9);\n}\n.carousel__button--left{\n    left: var(--arrow-left);\n}\n.carousel__button--right{\n    right: var(--arrow-right);\n}\n.icon {\n    height: 1.5rem;\n    width: 1.5rem;\n    fill: var(--nav-icon-fill);\n}\n.hide{\n    display: none !important;\n}\n:host([indicator]) .carousel-container{\n    margin-bottom: 2rem;\n}\n.carousel-container{\n    position: relative;\n    display: grid;\n    width: 100%;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.carousel{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    max-width: 100%;\n    width: 100%;\n    overflow: auto hidden;\n    -ms-scroll-snap-type: x mandatory;\n        scroll-snap-type: x mandatory;\n}\n.indicators{\n    display: -ms-grid;\n    display: grid;\n    grid-auto-flow: column;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: absolute;\n    top: var(--indicator-top);\n    bottom: var(--indicator-bottom);\n    gap: 0.5rem;\n    width: 100%;\n}\n.dot{\n    position: relative;\n    padding: 0.2rem;\n    background: rgba(var(--text-color), 0.3);\n    border-radius: 1rem;\n    -webkit-transition: 0.2s;\n    -o-transition: 0.2s;\n    transition: 0.2s;\n    cursor: pointer;\n}\n.dot.active{\n    -webkit-transform: scale(1.5);\n        -ms-transform: scale(1.5);\n            transform: scale(1.5);\n    background: var(--active-indicator-color);\n}\nslot::slotted(*){\n    scroll-snap-align: center;\n}\n:host([align-items="start"]) slot::slotted(*){\n    scroll-snap-align: start;\n}\n:host([align-items="center"]) slot::slotted(*){\n    scroll-snap-align: center;\n}\n:host([align-items="end"]) slot::slotted(*){\n    scroll-snap-align: end;\n}\n@media (hover: hover){\n    .carousel{\n        overflow: hidden;\n    }\n    .left,.right{\n        display: none;\n    }\n}\n@media (hover: none){\n    ::-webkit-scrollbar-track {\n        -webkit-box-shadow: none !important;\n        background-color: transparent !important;\n    }\n    ::-webkit-scrollbar {\n        height: 0;\n        background-color: transparent;\n    }\n    .carousel{\n        overflow: auto none;\n    }\n    .carousel__button{\n        display: none;\n    }\n    .left,.right{\n        display: block;\n    }\n}\n</style>\n<div class="carousel-container">\n    <button class="carousel__button carousel__button--left hide">\n        <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="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>\n    </button>\n    <div part="carousel" class="carousel">\n        <slot></slot>\n    </div>\n    <button class="carousel__button carousel__button--right hide">\n        <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="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>\n    </button>\n    <div class="indicators"></div>\n</div>\n',customElements.define("sm-carousel",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCarousel.content.cloneNode(!0)),this.isAutoPlaying=!1,this.autoPlayInterval=5e3,this.autoPlayTimeout,this.initialTimeout,this.activeSlideNum=0,this.carouselItems,this.indicators,this.showIndicator=!1,this.carousel=this.shadowRoot.querySelector(".carousel"),this.carouselContainer=this.shadowRoot.querySelector(".carousel-container"),this.carouselSlot=this.shadowRoot.querySelector("slot"),this.navButtonRight=this.shadowRoot.querySelector(".carousel__button--right"),this.navButtonLeft=this.shadowRoot.querySelector(".carousel__button--left"),this.indicatorsContainer=this.shadowRoot.querySelector(".indicators"),this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.handleIndicatorClick=this.handleIndicatorClick.bind(this),this.showSlide=this.showSlide.bind(this),this.nextSlide=this.nextSlide.bind(this),this.autoPlay=this.autoPlay.bind(this),this.startAutoPlay=this.startAutoPlay.bind(this),this.stopAutoPlay=this.stopAutoPlay.bind(this)}static get observedAttributes(){return["indicator","autoplay","interval"]}scrollLeft(){this.carousel.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.carousel.scrollBy({left:this.scrollDistance,behavior:"smooth"})}showSlide(t){this.carousel.scrollTo({left:this.carouselItems[t].getBoundingClientRect().left-this.carousel.getBoundingClientRect().left+this.carousel.scrollLeft,behavior:"smooth"})}nextSlide(){if(!this.carouselItems)return;let t=this.activeSlideNum+1<this.carouselItems.length?this.activeSlideNum+1:0;this.showSlide(t)}autoPlay(){this.nextSlide(),this.isAutoPlaying&&(this.autoPlayTimeout=setTimeout(()=>{this.autoPlay()},this.autoPlayInterval))}startAutoPlay(){this.setAttribute("autoplay","")}stopAutoPlay(){this.removeAttribute("autoplay")}createIndicator(t){let n=document.createElement("div");return n.classList.add("dot"),n.dataset.rank=t,n}handleIndicatorClick(t){if(t.target.closest(".dot")){const n=parseInt(t.target.closest(".dot").dataset.rank);this.activeSlideNum!==n&&this.showSlide(n)}}handleKeyDown(t){"ArrowLeft"===t.code?this.scrollRight():"ArrowRight"===t.code&&this.scrollRight()}connectedCallback(){let t=document.createDocumentFragment();this.carouselSlot.addEventListener("slotchange",n=>{this.carouselItems=this.carouselSlot.assignedElements(),this.carouselItems.forEach(t=>e.observe(t)),this.carouselItems.length>0?(i.observe(this.carouselItems[0]),o.observe(this.carouselItems[this.carouselItems.length-1])):(navButtonLeft.classList.add("hide"),navButtonRight.classList.add("hide"),i.disconnect(),o.disconnect()),this.showIndicator&&(this.indicatorsContainer.innerHTML="",this.carouselItems.forEach((n,e)=>{t.append(this.createIndicator(e)),n.dataset.rank=e}),this.indicatorsContainer.append(t),this.indicators=this.indicatorsContainer.children)});const n={threshold:.9,root:this},e=new IntersectionObserver(t=>{t.forEach(t=>{if(this.showIndicator){const n=parseInt(t.target.dataset.rank);t.isIntersecting?(this.indicators[n].classList.add("active"),this.activeSlideNum=n):this.indicators[n].classList.remove("active")}})},n),i=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonLeft.classList.add("hide"):this.navButtonLeft.classList.remove("hide")})},n),o=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonRight.classList.add("hide"):this.navButtonRight.classList.remove("hide")})},n),s=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const n=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*n.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});s.observe(this),this.addEventListener("keydown",this.handleKeyDown),this.navButtonRight.addEventListener("click",this.scrollRight),this.navButtonLeft.addEventListener("click",this.scrollLeft),this.indicatorsContainer.addEventListener("click",this.handleIndicatorClick)}attributeChangedCallback(t,n,e){n!==e&&("indicator"===t&&(this.showIndicator=this.hasAttribute("indicator")),"autoplay"===t&&(this.hasAttribute("autoplay")?this.initialTimeout=setTimeout(()=>{this.isAutoPlaying=!0,this.autoPlay()},this.autoPlayInterval):(this.isAutoPlaying=!1,clearTimeout(this.autoPlayTimeout),clearTimeout(this.initialTimeout))),"interval"===t&&(this.hasAttribute("interval")&&""!==this.getAttribute("interval").trim()?this.autoPlayInterval=Math.abs(parseInt(this.getAttribute("interval").trim())):this.autoPlayInterval=5e3))}disconnectedCallback(){this.navButtonRight.removeEventListener("click",this.scrollRight),this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.indicatorsContainer.removeEventListener("click",this.handleIndicatorClick)}});
\ No newline at end of file
diff --git a/components/dist/hamburger-menu.js b/components/dist/hamburger-menu.js
index e4acb95..077337f 100644
--- a/components/dist/hamburger-menu.js
+++ b/components/dist/hamburger-menu.js
@@ -15,7 +15,7 @@ hamburgerMenu.innerHTML = `
     overflow-y: auto;
     --accent-color: #4d2588;
     --text-color: 17, 17, 17;
-    --background-color: inherit;
+    --background-color: 255, 255, 255;
     --padding: 0 0 3rem 0;
     --backdrop-color: rgba(0,0,0,0.5);
 }
@@ -40,7 +40,7 @@ hamburgerMenu.innerHTML = `
         overflow-y: auto;  
         width: calc(100% - 4rem);
         transition: transform 0.3s;
-        background-color: var(--background-color);
+        background-color: rgba(var(--background-color), 1);
         box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);
         z-index: 1;
     }
diff --git a/components/dist/hamburger-menu.min.js b/components/dist/hamburger-menu.min.js
index 6fedc5c..dc783f2 100644
--- a/components/dist/hamburger-menu.min.js
+++ b/components/dist/hamburger-menu.min.js
@@ -1 +1 @@
-const hamburgerMenu=document.createElement("template");hamburgerMenu.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow-y: auto;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: inherit;\n    --padding: 0 0 3rem 0;\n    --backdrop-color: rgba(0,0,0,0.5);\n}\n.backdrop{\n    position: fixed;\n}\n.side-nav{\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n.hide{\n    display: none !important;\n}\n@media screen and (max-width: 640px){\n    :host{\n        position: fixed;\n        z-index: 10;\n    }\n    .side-nav{\n        height: 100%;\n        overflow-y: auto;  \n        width: calc(100% - 4rem);\n        transition: transform 0.3s;\n        background-color: var(--background-color);\n        box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);\n        z-index: 1;\n    }\n    .side-nav:not(.reveal){\n        transform: translateX(-100%);\n    }\n    .reveal{\n        transform: none;\n    }\n    .backdrop{\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background-color: var(--backdrop-color);\n        -webkit-transition: opacity 0.3s;\n        -o-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n    }\n}\n@media screen and (min-width: 640px){\n    .backdrop{\n        pointer-events: none;\n    }\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n    }\n    \n    ::-webkit-scrollbar-thumb{\n        border-radius: 1rem;\n        background: rgba(var(--text-color), 0.3);\n        &:hover{\n            background: rgba(var(--text-color), 0.5);\n        }\n    }\n}\n</style>\n<section class="backdrop hide"></section>\n<nav class="side-nav">\n    <slot></slot>\n</nav>\n';class HamburgerMenu extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(hamburgerMenu.content.cloneNode(!0)),this.resumeScrolling=this.resumeScrolling.bind(this),this.open=this.open.bind(this),this.close=this.close.bind(this),this.sideNav=this.shadowRoot.querySelector(".side-nav"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.isOpen=!1,this.animeOptions={duration:300,easing:"ease"}}static get observedAttributes(){return["open"]}resumeScrolling(){const n=document.body.style.top;window.scrollTo(0,-1*parseInt(n||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}open(){this.isOpen||(document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.classList.remove("hide"),this.sideNav.classList.add("reveal"),this.backdrop.classList.remove("hide"),this.backdrop.animate([{opacity:0},{opacity:1}],this.animeOptions).onfinish=(()=>{this.isOpen=!0,this.setAttribute("open","")}))}close(){this.isOpen&&(this.sideNav.classList.remove("reveal"),this.backdrop.animate([{opacity:1},{opacity:0}],this.animeOptions).onfinish=(()=>{this.backdrop.classList.add("hide"),this.classList.add("hide"),this.isOpen=!1,this.removeAttribute("open")}))}connectedCallback(){this.backdrop.addEventListener("click",this.close);const n=new ResizeObserver(n=>{window.innerWidth<640&&this.isOpen?this.classList.remove("hide"):this.classList.add("hide"),window.innerWidth>640&&this.classList.remove("hide")});n.observe(this)}disconnectedCallback(){this.backdrop.removeEventListener("click",this.close)}attributeChangedCallback(n,e,t){"open"===n&&this.hasAttribute("open")&&this.open()}}window.customElements.define("hamburger-menu",HamburgerMenu);
\ No newline at end of file
+const hamburgerMenu=document.createElement("template");hamburgerMenu.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow-y: auto;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0 0 3rem 0;\n    --backdrop-color: rgba(0,0,0,0.5);\n}\n.backdrop{\n    position: fixed;\n}\n.side-nav{\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n.hide{\n    display: none !important;\n}\n@media screen and (max-width: 640px){\n    :host{\n        position: fixed;\n        z-index: 10;\n    }\n    .side-nav{\n        height: 100%;\n        overflow-y: auto;  \n        width: calc(100% - 4rem);\n        transition: transform 0.3s;\n        background-color: rgba(var(--background-color), 1);\n        box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);\n        z-index: 1;\n    }\n    .side-nav:not(.reveal){\n        transform: translateX(-100%);\n    }\n    .reveal{\n        transform: none;\n    }\n    .backdrop{\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background-color: var(--backdrop-color);\n        -webkit-transition: opacity 0.3s;\n        -o-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n    }\n}\n@media screen and (min-width: 640px){\n    .backdrop{\n        pointer-events: none;\n    }\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n    }\n    \n    ::-webkit-scrollbar-thumb{\n        border-radius: 1rem;\n        background: rgba(var(--text-color), 0.3);\n        &:hover{\n            background: rgba(var(--text-color), 0.5);\n        }\n    }\n}\n</style>\n<section class="backdrop hide"></section>\n<nav class="side-nav">\n    <slot></slot>\n</nav>\n';class HamburgerMenu extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(hamburgerMenu.content.cloneNode(!0)),this.resumeScrolling=this.resumeScrolling.bind(this),this.open=this.open.bind(this),this.close=this.close.bind(this),this.sideNav=this.shadowRoot.querySelector(".side-nav"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.isOpen=!1,this.animeOptions={duration:300,easing:"ease"}}static get observedAttributes(){return["open"]}resumeScrolling(){const n=document.body.style.top;window.scrollTo(0,-1*parseInt(n||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}open(){this.isOpen||(document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.classList.remove("hide"),this.sideNav.classList.add("reveal"),this.backdrop.classList.remove("hide"),this.backdrop.animate([{opacity:0},{opacity:1}],this.animeOptions).onfinish=(()=>{this.isOpen=!0,this.setAttribute("open","")}))}close(){this.isOpen&&(this.sideNav.classList.remove("reveal"),this.backdrop.animate([{opacity:1},{opacity:0}],this.animeOptions).onfinish=(()=>{this.backdrop.classList.add("hide"),this.classList.add("hide"),this.isOpen=!1,this.removeAttribute("open")}))}connectedCallback(){this.backdrop.addEventListener("click",this.close);const n=new ResizeObserver(n=>{window.innerWidth<640&&this.isOpen?this.classList.remove("hide"):this.classList.add("hide"),window.innerWidth>640&&this.classList.remove("hide")});n.observe(this)}disconnectedCallback(){this.backdrop.removeEventListener("click",this.close)}attributeChangedCallback(n,e,t){"open"===n&&this.hasAttribute("open")&&this.open()}}window.customElements.define("hamburger-menu",HamburgerMenu);
\ No newline at end of file
diff --git a/components/index.html b/components/index.html
index 792e434..3ae560f 100644
--- a/components/index.html
+++ b/components/index.html
@@ -77,10 +77,14 @@
                 <div>
                     <h1 class="page__title">Overview</h1>
                     <p>
-                        Component-based design is the cornerstone of the modern UI development process. With rise of more UI frameworks every day, the web platform has a serious issue of fragmentation and portability.
+                        Component-based design is the cornerstone of the modern UI development process. With rise of
+                        more UI frameworks every day, the web platform has a serious issue of fragmentation and
+                        portability.
                     </p>
                     <p>
-                        Web components to the rescue! This is the collection of web components (WC here forward) that we use at RanchiMall, especially since we are a framework-less development environment so this was a logical choice.
+                        Web components to the rescue! This is the collection of web components (WC here forward) that we
+                        use at RanchiMall, especially since we are a framework-less development environment so this was
+                        a logical choice.
                     </p>
                     <p>
                         Just download the components you like, link them with a script tag and drop it in HTML done!
@@ -99,17 +103,20 @@
                 <h1 class="page__title">Quick Start</h1>
                 <ol>
                     <li>
-                        To start using these components, Select the ones you want to add to your project. You can un-check 'get minified' to get the readable code.
+                        To start using these components, Select the ones you want to add to your project. You can
+                        un-check 'get minified' to get the readable code.
                     </li>
                     <li>
-                        Now you can download or copy the source code for selected components. 
+                        Now you can download or copy the source code for selected components.
                         <strong class="important">
                             You might get a warning while downloading like this file is not safe,
-                             please allow the download as this is caused when downloading files with '.js' extension. These components are 100% safe to use. 
+                            please allow the download as this is caused when downloading files with '.js' extension.
+                            These components are 100% safe to use.
                         </strong>
                     </li>
                     <li>
-                        Link the downloaded js with <code>&lt;script src=".../components.js"&gt;&lt;/script&gt;</code> at bottom of your HTML file just before <span class="highlight">&lt;/body&gt;</span> tag.
+                        Link the downloaded js with <code>&lt;script src=".../components.js"&gt;&lt;/script&gt;</code>
+                        at bottom of your HTML file just before <span class="highlight">&lt;/body&gt;</span> tag.
                     </li>
                 </ol>
                 <div class="grid grid-3 gap-0-5 align-center">
@@ -130,72 +137,66 @@
 
             <section id="global_styling_page" class="page hide-completely">
                 <h1 class="page__title">Global styling</h1>
-                <p>These components use <strong>CSS variables</strong> to customize styling. they share some CSS variables that make global styling easier.</p>
+                <p>These components use <strong>CSS variables</strong> to customize styling. they share some CSS
+                    variables that make global styling easier.</p>
                 <h4>Some common CSS variables and their use</h4>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Variable</th>
-                            <th>Use</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><span class="highlight">--accent-color</span></td>
-                            <td>Color which will be used for denoting active state</td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">--text-color</span></td>
-                            <td>
-                                default text color for all components. <br>
-                                ( Use comma separated rgb values. e.g 17, 17, 17 )
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">--background-color</span></td>
-                            <td>
-                                default background color for all components. <br>
-                                ( Use comma separated rgb values. e.g 255, 255, 255 )
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">--danger-color</span></td>
-                            <td>Used for error/invalid state</td>
-                        </tr>
-                    </tbody>
-                </table>                
+                <section class="table">
+                    <div class="tr">
+                        <h4 class="table__heading">Variable</h4>
+                        <h4 class="table__heading">Use</h4>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--accent-color</span></div>
+                        <p>Color which will be used for denoting active state</p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--text-color</span></div>
+                        <p>
+                            default text color for all components. <br>
+                            ( Use comma separated rgb values. e.g 17, 17, 17 )
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--background-color</span></div>
+                        <p>
+                            default background color for all components. <br>
+                            ( Use comma separated rgb values. e.g 255, 255, 255 )
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--danger-color</span></div>
+                        <p>Used for error/invalid state</p>
+                    </div>
+                </section>
             </section>
             <section id="button_page" class="page hide-completely">
                 <h1 class="page__title">Buttons</h1>
+                <sm-button>Default button</sm-button>
                 <p><span class="highlight">sm-button</span> has 3 variants that define how the button looks.</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Variant type</th>
-                            <th>Example</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><span class="highlight">primary</span></td>
-                            <td>
-                                <sm-button variant="primary">Primary</sm-button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">outlined</span></td>
-                            <td>
-                                <sm-button variant="outlined">Outlined</sm-button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">no--outline</span></td>
-                            <td>
-                                <sm-button variant="no-outline">No outline</sm-button>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>  
+                <section class="table">
+                    <div class="tr">
+                        <h4 class="table__heading">Variant type</h4>
+                        <h4 class="table__heading">Example</h4>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">primary</span></div>
+                        <p>
+                            <sm-button variant="primary">Primary</sm-button>
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">outlined</span></div>
+                        <p>
+                            <sm-button variant="outlined">Outlined</sm-button>
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">no--outline</span></div>
+                        <p>
+                            <sm-button variant="no-outline">No outline</sm-button>
+                        </p>
+                    </div>
+                </section>
                 <h4>How to define variant</h4>
                 <pre>
                     <code class="prettyprint">
@@ -204,11 +205,11 @@
                         &lt;sm-button variant="no-outline"&gt;no-outline&lt;/sm-button&gt;
                     </code>
                 </pre>
-                
+
                 <h2>States</h2>
                 <h4>Disabled</h4>
-                <p>To  disable the button add <span class="highlight">disabled</span> attribute.</p>
-                <sm-button  disabled>Disabled</sm-button>
+                <p>To disable the button add <span class="highlight">disabled</span> attribute.</p>
+                <sm-button disabled>Disabled</sm-button>
                 <pre>
                     <code class="prettyprint">
                         &lt;sm-button disabled&gt;Disabled&lt;/sm-button&gt;
@@ -216,67 +217,60 @@
                 </pre>
                 <h2>Attributes</h2>
                 <p>All the native HTML checkbox attributes are valid</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Attribute</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><span class="highlight">disabled</span> (boolean)</td>
-                            <td>
-                                Button is disabled by default. all the interactions are disabled
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">type</span> (string)</td>
-                            <td>
-                               Has values <span class="highlight">submit</span> <span class="highlight">reset</span> <br>
-                               Can only used withing <spna class="highlight">sm-form</spna> to submit or reset the form.
-                            </td>
-                        </tr>
-                    </tbody>
-                </table> 
+                <section class="table">
+                    <div class="tr">
+                        <h4 class="table__heading">Attribute</h4>
+                        <h4 class="table__heading">Description</h4>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">disabled</span> (boolean)</div>
+                        <p>
+                            Button is disabled by default. all the interactions are disabled
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">type</span> (string)</div>
+                        <p>
+                            Has values <span class="highlight">submit</span> <span class="highlight">reset</span> <br>
+                            Can only used withing <spna class="highlight">sm-form</spna> to submit or reset the form.
+                        </p>
+                    </div>
+                </section>
 
                 <h2>Styling</h2>
                 <p>CSS variables used to style this component</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Variable</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><span class="highlight">--background</span></td>
-                            <td>
-                                Define background of button. accepts all values of CSS background property
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">--border-radius</span></td>
-                            <td>
-                                Set curvature at button corners
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">--padding</span></td>
-                            <td>
-                                Specify padding of button
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>  
+                <section class="table">
+                    <div class="tr">
+                        <h4 class="table__heading">Variable</h4>
+                        <h4 class="table__heading">Description</h4>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--background</span></div>
+                        <p>
+                            Define background of button. accepts all values of CSS background property
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--border-radius</span></div>
+                        <p>
+                            Set curvature at button corners
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--padding</span></div>
+                        <p>
+                            Specify padding of button
+                        </p>
+                    </div>
+                </section>
             </section>
 
             <section id="carousel_page" class="page hide-completely">
                 <h1 class="page__title">Carousel</h1>
                 <p>
                     Carousel is a very common UI component primarily used to display images or slides.
-                    This carousel switches user interactions based on type of input devices present. For hover capable devices slides can be scrolled with buttons and on 
+                    This carousel switches user interactions based on type of input devices present. For hover capable
+                    devices slides can be scrolled with buttons and on
                     touch enabled devices swipe can be used.
                 </p>
                 <h2>Interactive demo</h2>
@@ -306,74 +300,67 @@
                 </pre>
                 <h2>Custom attributes</h2>
                 <p>These attributes cane used to customize carousel behaviour and features</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Attribute</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><span class="highlight">align-items</span></td>
-                            <td>
-                                Has values <span class="highlight">start</span>
-                                <span class="highlight">center</span> <span class="highlight">end</span>
-                                Specifies how carousel items should align. default is <span class="highlight">center</span>.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">indicator</span> (boolean)</td>
-                            <td>
-                                if added carousel shows dot indicators of carousel items. 
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>  
+                <section class="table">
+                    <div class="tr">
+                        <h4 class="table__heading">Attribute</h4>
+                        <h4 class="table__heading">Description</h4>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">align-items</span></div>
+                        <p>
+                            Has values <span class="highlight">start</span>
+                            <span class="highlight">center</span> <span class="highlight">end</span>
+                            Specifies how carousel items should align. default is <span class="highlight">center</span>.
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">indicator</span> (boolean)</div>
+                        <p>
+                            if added carousel shows dot indicators of carousel items.
+                        </p>
+                    </div>
+                </section>
 
                 <h2>Styling</h2>
                 <p>CSS variables used to style this component</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Variable</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><span class="highlight">--active-indicator-color</span></td>
-                            <td>
-                                Defines background color of active slide indicator
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">--nav-background-color</td>
-                            <td>
-                               Defines background color of carousel navigation buttons
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">--nav-box-shadow</td>
-                            <td>
-                                Defines box shadow of carousel navigation buttons
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">--nav-icon-fill</td>
-                                <td>
-                                Defines fill of arrow icon on carousel navigation buttons
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>  
+                <section class="table">
+                    <div class="tr">
+                        <h4 class="table__heading">Variable</h4>
+                        <h4 class="table__heading">Description</h4>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--active-indicator-color</span></div>
+                        <p>
+                            Defines background color of active slide indicator
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--nav-background-color</div>
+                        <p>
+                            Defines background color of carousel navigation buttons
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--nav-box-shadow</div>
+                        <p>
+                            Defines box shadow of carousel navigation buttons
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--nav-icon-fill</div>
+                        <p>
+                            Defines fill of arrow icon on carousel navigation buttons
+                        </p>
+                    </div>
+                </section>
             </section>
 
             <section id="checkbox_page" class="page hide-completely">
                 <h1 class="page__title">Checkbox</h1>
                 <p><span class="highlight">sm-checkbox</span> supports all the attributes of native HTML5 checkbox</p>
                 <strong>
-                    linking some HTML element with <span class="highlght">sm-checbox</span> using <span class="highlight">label</span> tag won't work. <br>
+                    linking some HTML element with <span class="highlght">sm-checbox</span> using <span
+                        class="highlight">label</span> tag won't work. <br>
                     Add the element inside the opening and closing checkbox tag.
                 </strong>
                 <h2>Interactive demo</h2>
@@ -386,7 +373,7 @@
                 <h2>States</h2>
                 <h4>Disabled</h4>
                 <p>To disable the checkbox add <span class="highlight">disabled</span> attribute.</p>
-                <sm-checkbox  disabled>
+                <sm-checkbox disabled>
                     <div style="margin-left: 0.5rem;">
                         Disabled checkbox
                     </div>
@@ -416,65 +403,57 @@
 
                 <h2>Attributes</h2>
                 <p>All the native HTML checkbox attributes are valid</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Attribute</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><span class="highlight">checked</span> (boolean)</td>
-                            <td>
-                                Sets checked state as default if added
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">disabled</span> (boolean)</td>
-                            <td>
-                                Checkbox is disabled by default. all the interactions are disabled
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">value</span> (string)</td>
-                            <td>
-                               Sets value of checkbox which can be accessed by value property with JS
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>  
+                <section class="table">
+                    <div class="tr">
+                        <h4 class="table__heading">Attribute</h4>
+                        <h4 class="table__heading">Description</h4>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">checked</span> (boolean)</div>
+                        <p>
+                            Sets checked state as default if added
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">disabled</span> (boolean)</div>
+                        <p>
+                            Checkbox is disabled by default. all the interactions are disabled
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">value</span> (string)</div>
+                        <p>
+                            Sets value of checkbox which can be accessed by value property with JS
+                        </p>
+                    </div>
+                </section>
 
                 <h2>Styling</h2>
                 <p>CSS variables used to style this component</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Variable</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><span class="highlight">--border-radius</span></td>
-                            <td>
-                                Defines border-radius of checkbox square
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">--height</td>
-                            <td>
-                               Defines height of checkbox
-                            </td>
-                        </tr>
-                        <tr>
-                            <td><span class="highlight">--width</td>
-                            <td>
-                               Defines width of checkbox
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>  
+                <section class="table">
+                    <div class="tr">
+                        <h4 class="table__heading">Variable</h4>
+                        <h4 class="table__heading">Description</h4>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--border-radius</span></div>
+                        <p>
+                            Defines border-radius of checkbox square
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--height</div>
+                        <p>
+                            Defines height of checkbox
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--width</div>
+                        <p>
+                            Defines width of checkbox
+                        </p>
+                    </div>
+                </section>
             </section>
 
             <section id="copy_page" class="page hide-completely">
@@ -499,7 +478,8 @@
                     To start using SM Components
                 </p>
                 <sm-form>
-                    <sm-input placeholder="Email" type="email" error-text="please enter correct email" required animate></sm-input>
+                    <sm-input placeholder="Email" type="email" error-text="please enter correct email" required animate>
+                    </sm-input>
                     <sm-input placeholder="Password" type="password" required animate></sm-input>
                     <sm-button variant="primary" disabled>Submit</sm-button>
                 </sm-form>
@@ -515,8 +495,8 @@
                 <p>
                     To start using SM Components
                 </p>
-                <sm-input placeholder="something" type="email" error-text="please enter correct email"
-                    animate></sm-input>
+                <sm-input placeholder="something" type="email" error-text="please enter correct email" animate>
+                </sm-input>
                 <p id="insert_text"></p>
             </section>
 
@@ -540,8 +520,7 @@
                 </p>
                 <h4>Example</h4>
 
-                <sm-button
-                    onclick="notify('Lorem ipsum dolor, consectetur adipisicing elit.', 'success')">
+                <sm-button onclick="notify('Lorem ipsum dolor, consectetur adipisicing elit.', 'success')">
                     push success notification</sm-button>
                 <sm-button onclick="notify('Lorem ipsum dolor, sit amet.', 'error')">
                     push error notification</sm-button>
@@ -603,7 +582,8 @@
             <section id="select_page" class="page hide-completely">
                 <h1 class="page__title">Select</h1>
                 <p>
-                    <span class="highlight">&lt;sm-select&gt;</span> is very similar to starndatd HTML5 select and it's markup stucture is
+                    <span class="highlight">&lt;sm-select&gt;</span> is very similar to starndatd HTML5 select and it's
+                    markup stucture is
                     also identical.
                 </p>
                 <sm-select>
@@ -615,7 +595,8 @@
             <section id="spinner_page" class="page hide-completely">
                 <h1 class="page__title">Spinner</h1>
                 <p>
-                    <span class="highlight">&lt;sm-select&gt;</span> is very similar to starndatd HTML5 select and it's markup stucture is
+                    <span class="highlight">&lt;sm-select&gt;</span> is very similar to starndatd HTML5 select and it's
+                    markup stucture is
                     also identical.
                 </p>
                 <sm-spinner></sm-spinner>
@@ -748,9 +729,9 @@
         }
 
         function createElement(tagName, obj) {
-            const { className, textContent, innerHTML, attributes = {}} = obj
+            const { className, textContent, innerHTML, attributes = {} } = obj
             const elem = document.createElement(tagName)
-            for(let attribute in attributes){
+            for (let attribute in attributes) {
                 elem.setAttribute(attribute, attributes[attribute])
             }
             if (className)
@@ -792,13 +773,13 @@
             notify(
                 "There seems to be a problem connecting to the internet, Please check you internet connection.",
                 "error",
-               {sound: true}
+                { sound: true }
             );
         window.addEventListener("offline", () => {
             notify(
                 "There seems to be a problem connecting to the internet, Please check you internet connection.",
                 "error",
-                {pinned: true, sound: true}
+                { pinned: true, sound: true }
             );
         });
         window.addEventListener("online", () => {
@@ -925,18 +906,18 @@
 
         //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
         function notify(message, mode, options = {}) {
-            const {pinned = false, sound} = options
+            const { pinned = false, sound } = options
             if (mode === "error") console.error(message);
             let icon
-            switch(mode){
+            switch (mode) {
                 case 'success':
                     icon = `<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="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`
-                break;
+                    break;
                 case 'error':
                     icon = `<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="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
-                break;
+                    break;
             }
-            getRef("notification_drawer").push(message, {pinned, icon});
+            getRef("notification_drawer").push(message, { pinned, icon });
             if (navigator.onLine && sound) {
                 getRef("notification_sound").currentTime = 0;
                 getRef("notification_sound").play();
@@ -1028,8 +1009,8 @@
                 itemLink.href = `#${pageId}`
                 return item
             },
-            compCheckbox(obj){
-                const {name} = obj
+            compCheckbox(obj) {
+                const { name } = obj
                 const checkbox = getRef('comp_checkbox_template').content.cloneNode(true).firstElementChild
                 checkbox.setAttribute('value', name.toLowerCase().replaceAll(' ', '-'))
                 checkbox.firstElementChild.textContent = name
@@ -1074,7 +1055,7 @@
                 })
             const targetListItem = document.querySelector(`.list__item[href="#${pageId}"]`)
             targetListItem.classList.add('list__item--active')
-            if (firstLoad && window.innerWidth > 640 && targetListItem.getBoundingClientRect().top > getRef('side_nav').getBoundingClientRect().height){
+            if (firstLoad && window.innerWidth > 640 && targetListItem.getBoundingClientRect().top > getRef('side_nav').getBoundingClientRect().height) {
                 getRef('side_nav').scrollTo({
                     top: (targetListItem.getBoundingClientRect().top - getRef('side_nav').getBoundingClientRect().top + getRef('side_nav').scrollTop),
                     behavior: 'smooth'
@@ -1173,7 +1154,7 @@
             const checkboxFrag = document.createDocumentFragment()
             componentsList.forEach((component, index) => {
                 itemsFrag.append(render.navListItem(component))
-                checkboxFrag.append(render.compCheckbox({...component, index}))
+                checkboxFrag.append(render.compCheckbox({ ...component, index }))
             })
             getRef('components_list').innerHTML = ''
             getRef('components_selection_list').innerHTML = ''
@@ -1187,14 +1168,14 @@
         function clearAll() {
             getRef('components_selection_list').querySelectorAll('sm-checkbox').forEach(elem => elem.checked = false)
         }
-        async function getSelectedComponents(){
+        async function getSelectedComponents() {
             const selectedComponents = [...getRef('components_selection_list').querySelectorAll('sm-checkbox[checked]')].map(v => v.value)
             const extension = getRef('get_minified').checked ? '.min.js' : '.js'
             const filesList = []
             selectedComponents.forEach(async component => {
                 for (let compObj in allComponentsObj) {
-                    const {name, download_url} = allComponentsObj[compObj]
-                    if(name === `${component}${extension}`){
+                    const { name, download_url } = allComponentsObj[compObj]
+                    if (name === `${component}${extension}`) {
                         filesList.push(fetch(download_url).then(async res => await res.text()))
                     }
                 }
@@ -1204,23 +1185,23 @@
 
         async function downloadComponents() {
             const selectedComponents = await getSelectedComponents()
-            if(selectedComponents.length){
-                downloadJs(selectedComponents, {minified: getRef('get_minified').checked})
+            if (selectedComponents.length) {
+                downloadJs(selectedComponents, { minified: getRef('get_minified').checked })
             }
-            else{
+            else {
                 notify('Please select atleast one component', 'error')
             }
         }
-        
-        async function copySourceCode(){
+
+        async function copySourceCode() {
             const selectedComponents = await getSelectedComponents()
-            if(selectedComponents.length){
+            if (selectedComponents.length) {
                 const sourceCode = selectedComponents.join("\n")
                 window.navigator.clipboard.writeText(sourceCode).then(success => {
                     notify('Copied components source code')
                 }).catch(err => console.error(error))
             }
-            else{
+            else {
                 notify('Please select atleast one component', 'error')
             }
         }
@@ -1230,9 +1211,9 @@
             const files = await fetch('https://api.github.com/repos/ranchimall/standard-visual-design-system/contents/components/dist')
             allComponentsObj = await files.json()
         }
-        function downloadJs(componentsArray, options = {minified: true}){
-            const {minified} = options  
-            const extension = minified ? '.min.js': '.js'
+        function downloadJs(componentsArray, options = { minified: true }) {
+            const { minified } = options
+            const extension = minified ? '.min.js' : '.js'
             const element = createElement('a', {
                 attributes: {
                     'href': 'data:application/javascript;charset=utf-8,' + encodeURIComponent(componentsArray.join("\n")),
@@ -1240,11 +1221,11 @@
                     'style': 'display:none'
                 }
             });
-        
+
             document.body.appendChild(element);
-        
+
             element.click();
-        
+
             document.body.removeChild(element);
         }
     </script>