diff --git a/css/editor.css b/css/editor.css
index 8988e906..8c48d3cc 100755
--- a/css/editor.css
+++ b/css/editor.css
@@ -8486,8 +8486,8 @@ i[class^='icon-'] {
   content: "\ee33"; }
 
 /*!
-   * Bootstrap  v5.3.2 (https://getbootstrap.com/)
-   * Copyright 2011-2023 The Bootstrap Authors
+   * Bootstrap  v5.3.3 (https://getbootstrap.com/)
+   * Copyright 2011-2024 The Bootstrap Authors
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    */
 :root,
@@ -10866,6 +10866,8 @@ textarea.form-control-lg {
     .btn-check:checked + .btn:focus-visible,
     :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
       box-shadow: var(--bs-btn-focus-box-shadow); }
+  .btn-check:checked:focus-visible + .btn {
+    box-shadow: var(--bs-btn-focus-box-shadow); }
   .btn:disabled, .btn.disabled,
   fieldset:disabled .btn {
     color: var(--bs-btn-disabled-color);
@@ -12165,12 +12167,11 @@ textarea.form-control-lg {
   --bs-accordion-btn-padding-y: 1rem;
   --bs-accordion-btn-color: var(--bs-body-color);
   --bs-accordion-btn-bg: var(--bs-accordion-bg);
-  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
   --bs-accordion-btn-icon-width: 1.25rem;
   --bs-accordion-btn-icon-transform: rotate(-180deg);
   --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --bs-accordion-btn-focus-border-color: #86b7fe;
+  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
   --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
   --bs-accordion-body-padding-x: 1.25rem;
   --bs-accordion-body-padding-y: 1rem;
@@ -12218,7 +12219,6 @@ textarea.form-control-lg {
     z-index: 2; }
   .accordion-button:focus {
     z-index: 3;
-    border-color: var(--bs-accordion-btn-focus-border-color);
     outline: 0;
     box-shadow: var(--bs-accordion-btn-focus-box-shadow); }
 
@@ -12232,7 +12232,7 @@ textarea.form-control-lg {
   .accordion-item:first-of-type {
     border-top-left-radius: var(--bs-accordion-border-radius);
     border-top-right-radius: var(--bs-accordion-border-radius); }
-    .accordion-item:first-of-type .accordion-button {
+    .accordion-item:first-of-type > .accordion-header .accordion-button {
       border-top-left-radius: var(--bs-accordion-inner-border-radius);
       border-top-right-radius: var(--bs-accordion-inner-border-radius); }
   .accordion-item:not(:first-of-type) {
@@ -12240,28 +12240,27 @@ textarea.form-control-lg {
   .accordion-item:last-of-type {
     border-bottom-right-radius: var(--bs-accordion-border-radius);
     border-bottom-left-radius: var(--bs-accordion-border-radius); }
-    .accordion-item:last-of-type .accordion-button.collapsed {
+    .accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
       border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
       border-bottom-left-radius: var(--bs-accordion-inner-border-radius); }
-    .accordion-item:last-of-type .accordion-collapse {
+    .accordion-item:last-of-type > .accordion-collapse {
       border-bottom-right-radius: var(--bs-accordion-border-radius);
       border-bottom-left-radius: var(--bs-accordion-border-radius); }
 
 .accordion-body {
   padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x); }
 
-.accordion-flush .accordion-collapse {
-  border-width: 0; }
-
-.accordion-flush .accordion-item {
+.accordion-flush > .accordion-item {
   border-right: 0;
   border-left: 0;
   border-radius: 0; }
-  .accordion-flush .accordion-item:first-child {
+  .accordion-flush > .accordion-item:first-child {
     border-top: 0; }
-  .accordion-flush .accordion-item:last-child {
+  .accordion-flush > .accordion-item:last-child {
     border-bottom: 0; }
-  .accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
+  .accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
+    border-radius: 0; }
+  .accordion-flush > .accordion-item > .accordion-collapse {
     border-radius: 0; }
 
 [data-bs-theme="dark"] .accordion-button::after {
@@ -13011,7 +13010,6 @@ textarea.form-control-lg {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-modal-header-padding);
   border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
   border-top-left-radius: var(--bs-modal-inner-border-radius);
@@ -13486,19 +13484,11 @@ textarea.form-control-lg {
   background-position: 50%;
   background-size: 100% 100%; }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); }
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/; }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/; }
 
 .carousel-indicators {
   position: absolute;
@@ -14022,13 +14012,10 @@ textarea.form-control-lg {
 .offcanvas-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x); }
   .offcanvas-header .btn-close {
     padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);
-    margin-top: calc(-.5 * var(--bs-offcanvas-padding-y));
-    margin-right: calc(-.5 * var(--bs-offcanvas-padding-x));
-    margin-bottom: calc(-.5 * var(--bs-offcanvas-padding-y)); }
+    margin: calc(-.5 * var(--bs-offcanvas-padding-y)) calc(-.5 * var(--bs-offcanvas-padding-x)) calc(-.5 * var(--bs-offcanvas-padding-y)) auto; }
 
 .offcanvas-title {
   margin-bottom: 0;
@@ -18031,14 +18018,20 @@ body {
     overflow: hidden;
     width: 100%; }
     #vvveb-builder #top-panel .btn-group .btn.btn-light {
-      font-size: 1.25rem;
       padding: 0.25rem 0.5rem;
       --bs-btn-active-bg: var(--bs-primary-bg-subtle);
-      --bs-btn-active-border-color: transparent; }
+      --bs-btn-hover-bg: var(--bs-primary-bg-subtle);
+      --bs-btn-active-border-color: transparent;
+      --bs-btn-hover-color: var(--bs-body-bg);
+      --bs-btn-bg:transparent;
+      border-color: transparent;
+      color: var(--bs-body-color); }
+      #vvveb-builder #top-panel .btn-group .btn.btn-light i {
+        font-size: 1.25rem; }
     #vvveb-builder #top-panel .btn-group .btn.btn-primary {
       margin-top: 0.2rem; }
       #vvveb-builder #top-panel .btn-group .btn.btn-primary i {
-        font-size: 21px;
+        font-size: 18px;
         line-height: 21px; }
     #vvveb-builder #top-panel .btn-group .btn span {
       font-size: 14px; }
@@ -18089,15 +18082,14 @@ body {
       border-radius: 0px;
       min-width: 4.5rem;
       color: var(--bs-body-color);
-      line-height: 1.2rem; }
+      line-height: 1.4; }
       #vvveb-builder .drag-elements .nav-item .nav-link div {
         margin-top: .2rem; }
       #vvveb-builder .drag-elements .nav-item .nav-link i {
         font-size: 21px;
         vertical-align: bottom; }
       #vvveb-builder .drag-elements .nav-item .nav-link small, #vvveb-builder .drag-elements .nav-item .nav-link .small {
-        font-size: 0.8rem;
-        padding: 0 0.5rem; }
+        font-size: 0.8rem; }
       #vvveb-builder .drag-elements .nav-item .nav-link.active, #vvveb-builder .drag-elements .nav-item .nav-link:hover {
         color: var(--bs-link-color); }
     #vvveb-builder .drag-elements#add-section-box .nav-item:first-child .nav-link {
@@ -18145,7 +18137,7 @@ body {
       right: 56px; }
   #vvveb-builder .components-list, #vvveb-builder .blocks-list, #vvveb-builder .component-properties, #vvveb-builder .sections-list {
     list-style: none;
-    background: rgba(var(--bs-secondary-color-rgb), 0.03); }
+    background: rgba(var(--bs-secondary-color-rgb), 0.025); }
   #vvveb-builder #add-section-box {
     animation: popup-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
     animation-fill-mode: forwards; }
@@ -18609,8 +18601,8 @@ body {
       border: none;
       padding: 0.3rem 0.2rem 0.4rem; }
       #vvveb-builder #elements-tabs a i {
-        padding: 0.4rem 0rem;
-        font-size: 1.3rem;
+        padding: 0.3rem 0rem;
+        font-size: 1.2rem;
         border-radius: 3px;
         display: block;
         border: 1px solid transparent; }
@@ -18631,11 +18623,11 @@ body {
     border-left: none; }
   #vvveb-builder .nav-tabs .nav-link {
     padding: 0.8rem 0 0.5rem;
-    padding: 0.8rem 0 0.8rem;
+    padding: 0.5rem 0 0.5rem;
     text-align: center; }
     #vvveb-builder .nav-tabs .nav-link i {
       font-size: 1.4rem;
-      line-height: 1.2rem; }
+      line-height: 1; }
   #vvveb-builder .nav-tabs .nav-link.active,
   #vvveb-builder .nav-tabs .nav-item.show .nav-link {
     background-color: var(--bs-body-bg);
@@ -19507,6 +19499,57 @@ img.preview {
   font-size: 1rem;
   min-height: 1rem; }
 
+#tree-list {
+  position: absolute;
+  top: 10%;
+  left: 80%;
+  left: calc(100% - 300px);
+  border-radius: 2px;
+  z-index: 100;
+  width: 250px;
+  min-width: 250px;
+  min-height: 250px;
+  height: 500px;
+  resize: both;
+  overflow: hidden;
+  box-shadow: 0px 1px 5px 0px rgba(var(--bs-body-color-rgb), 0.15);
+  background: var(--bs-body-bg); }
+  #tree-list .header {
+    height: 30px;
+    font-size: 12px;
+    padding: 0.4rem 1rem;
+    color: rgba(var(--bs-body-color-rgb), 0.7);
+    background: rgba(var(--bs-primary-rgb), 0.15);
+    cursor: grabbing; }
+    #tree-list .header:before {
+      content: "....";
+      opacity: 0.5;
+      width: 15px;
+      top: 0;
+      font-size: 28px;
+      word-wrap: break-word;
+      line-height: 7px;
+      vertical-align: middle;
+      display: inline-block;
+      margin-right: 10px;
+      margin-top: -1rem; }
+  #tree-list .tree {
+    padding: 1rem;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+    height: calc(100% - 30px); }
+    #tree-list .tree label.active {
+      border: 1px solid rgba(var(--bs-primary-rgb), 0.15);
+      background-color: rgba(var(--bs-primary-rgb), 0.05); }
+    #tree-list .tree > ol li input {
+      height: 2.4em;
+      width: 4em; }
+    #tree-list .tree > ol li input:checked + ol {
+      padding: 2rem 0 0 1.5rem; }
+    #tree-list .tree > ol li.file > label {
+      margin-left: 18px; }
+
 /* theme specific styes needed by section component */
 body > section, body > footer, body > header {
   position: relative;
@@ -19523,7 +19566,7 @@ body > section, body > footer, body > header {
 				bottom: 0;
 				top: 0;
 				content: "";
-				background: rgba(0,0,0, 0.4);
+				background: rgba(var(--bs-body-color-rgb), 0.4);
 			}
 		}*/ }
   body > section .background-container, body > section .overlay, body > footer .background-container, body > footer .overlay, body > header .background-container, body > header .overlay {
@@ -19534,12 +19577,34 @@ body > section, body > footer, body > header {
     width: 100%;
     height: 100%;
     overflow: hidden; }
+    body > section .background-container img, body > section .background-container video, body > section .overlay img, body > section .overlay video, body > footer .background-container img, body > footer .background-container video, body > footer .overlay img, body > footer .overlay video, body > header .background-container img, body > header .background-container video, body > header .overlay img, body > header .overlay video {
+      width: auto;
+      height: auto;
+      max-width: initial;
+      min-height: 100%;
+      min-width: 100%;
+      /*
+				@include media-breakpoint-down(md) { 
+					margin: 0 0 0 -25%;
+				}
+				
+				@include media-breakpoint-down(sm) {
+					margin: 0 0 0 -50%;	
+				}
+				*/ }
     body > section .background-container img, body > section .overlay img, body > footer .background-container img, body > footer .overlay img, body > header .background-container img, body > header .overlay img {
-      width: 100%; }
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      height: 100%;
+      width: auto;
+      -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%); }
   body > section .overlay, body > footer .overlay, body > header .overlay {
     z-index: -1;
-    background: #000;
-    opacity: 0.6; }
+    background: var(--bs-black);
+    opacity: 0.7; }
   body > section .separator, body > footer .separator, body > header .separator {
     z-index: 2;
     position: absolute;
diff --git a/demo/landing b/demo/landing
index 86e57c06..75768e06 160000
--- a/demo/landing
+++ b/demo/landing
@@ -1 +1 @@
-Subproject commit 86e57c06eb6732dd0feb7cf590e87b6140ea4804
+Subproject commit 75768e06a1dc2e93d23cf44271e4289484727e5b
diff --git a/editor.html b/editor.html
index 1ccd8b07..60c58ac1 100644
--- a/editor.html
+++ b/editor.html
@@ -45,7 +45,7 @@
 										
 					
 					<div class="btn-group me-3" role="group">
-					  <button class="btn btn-light" title="Designer Mode (Free component dragging)" id="designer-mode-btn" data-bs-toggle="button" aria-pressed="false" data-vvveb-action="setDesignerMode">
+					  <button class="btn btn-light" title="Designer Mode (Free dragging)" id="designer-mode-btn" data-bs-toggle="button" aria-pressed="false" data-vvveb-action="setDesignerMode">
 						  <i class="la la-hand-rock"></i>
 					  </button>
 
@@ -57,6 +57,10 @@
 						  <i class="icon-expand-outline"></i>
 					  </button>
 
+					  <button class="btn btn-light active" title="Toggle navigator" id="toggle-tree-list" data-bs-toggle="button" data-vvveb-action="toggleTreeList" aria-pressed="true">
+						  <i class="icon-layers-outline"></i>
+					  </button>
+
 					  <button class="btn btn-light" title="Download" id="download-btn" data-vvveb-action="download" data-v-download="index.html">
 						  <i class="la la-download"></i>
 					  </button>
@@ -183,7 +187,7 @@
 							  <div class="tab-pane show active sections" id="sections" role="tabpanel" aria-labelledby="sections-tab">
 								  
 
-										<ul class="nav nav-tabs nav-fill sections-tabs" id="properties-tabs" role="tablist">
+										<ul class="nav nav-tabs nav-fill sections-tabs" id="sections-tabs" role="tablist">
 										  <li class="nav-item content-tab">
 											<a class="nav-link active" data-bs-toggle="tab" href="#sections-new-tab" role="tab" aria-controls="components" aria-selected="false">
 												<i class="icon-albums-outline"></i> <div><span>Sections</span></div></a>
@@ -380,7 +384,7 @@
 													  </li>
 													</ul>
 											
-													<div class="tab-content">
+													<div class="tab-content" data-offset="20">
 														 <div class="tab-pane show active" id="content-left-panel-tab" data-section="content" role="tabpanel" aria-labelledby="content-tab">
 															<div class="alert alert-dismissible fade show alert-light m-3" role="alert" style="">		  
 																<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>		  
@@ -402,7 +406,7 @@
 								<div class="tab-pane" id="configuration" role="tabpanel" aria-labelledby="configuration-tab">
 									
 									<div class="drag-elements-sidepane sidepane">
-									<div>
+									<div data-offset="80">
 										<div class="component-properties">
 											<!-- color palette -->
 											<!--
@@ -976,7 +980,6 @@ <h6 class="header">{%=header%}</h6>
 	<div class="input-html-list-select">
 		
 		<div class="current-element">
-		
 		</div>
 		
 		<div class="popup">
@@ -1001,7 +1004,6 @@ <h6 class="header">{%=header%}</h6>
 			
 			<div class="elements">
 					{%=elements%}
-				</div>
 			</div>
 		</div>
 	</div>
@@ -1038,7 +1040,6 @@ <h6 class="header">{%=header%}</h6>
 			
 			<div class="elements">
 					{%=elements%}
-				</div>
 			</div>
 		</div>
 	</div>
@@ -1170,7 +1171,7 @@ <h6 class="header">{%=header%}</h6>
 				
 				<option value="">None</option>
 				{% for ( var i = 1; i <= 12; i++ ) { %}
-				<option value="{%=i%}" {% if ((typeof col_xl !== 'undefined') && col_lg == i) { %} selected {% } %}>{%=i%}</option>
+				<option value="{%=i%}" {% if ((typeof col_xl !== 'undefined') && col_xl == i) { %} selected {% } %}>{%=i%}</option>
 				{% } %}
 				
 			</select>
@@ -1182,7 +1183,7 @@ <h6 class="header">{%=header%}</h6>
 				
 				<option value="">None</option>
 				{% for ( var i = 1; i <= 12; i++ ) { %}
-				<option value="{%=i%}" {% if ((typeof col_xxl !== 'undefined') && col_lg == i) { %} selected {% } %}>{%=i%}</option>
+				<option value="{%=i%}" {% if ((typeof col_xxl !== 'undefined') && col_xxl == i) { %} selected {% } %}>{%=i%}</option>
 				{% } %}
 				
 			</select>
@@ -1367,11 +1368,12 @@ <h6 class="header">{%=header%}</h6>
 </script>
 
 <script id="vvveb-input-sectioninput" type="text/html">
-
-		<label class="header" data-header="{%=key%}" for="header_{%=key%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}><span>{%=header%}</span> <div class="header-arrow"></div></label> 
-		<input class="header_check" type="checkbox" {% if (typeof expanded !== 'undefined' && expanded == false) { %} {% } else { %}checked="true"{% } %} id="header_{%=key%}"> 
+	<div>
+		{% var namespace = '-' + Math.floor(Math.random() * 1000); %}
+		<label class="header" data-header="{%=key%}" for="header_{%=key%}{%=namespace%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}><span>{%=header%}</span> <div class="header-arrow"></div></label> 
+		<input class="header_check" type="checkbox" {% if (typeof expanded !== 'undefined' && expanded == false) { %} {% } else { %}checked="true"{% } %} id="header_{%=key%}{%=namespace%}"> 
 		<div class="section row" data-section="{%=key%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}></div>		
-	
+	</div>
 </script>
 
 
@@ -1450,7 +1452,8 @@ <h6><b>{%=title%}</b></h6>
 		</label>
 		
 		<div class="tree">
-			<ol >
+			<ol>
+				<!--
 				<li data-component="Products" class="file">							
 					<label for="idNaN" style="background-image:url(/js/vvvebjs/icons/products.svg)"><span>Products</span></label>							
 					<input type="checkbox" id="idNaN">
@@ -1459,6 +1462,7 @@ <h6><b>{%=title%}</b></h6>
 					<label for="idNaN" style="background-image:url(/js/vvvebjs/icons/posts.svg)"><span>Posts</span></label>							
 					<input type="checkbox" id="idNaN">
 				</li>
+				-->
 			</ol>
 		</div>
 	</div>
@@ -1468,6 +1472,25 @@ <h6><b>{%=title%}</b></h6>
 
 <!--// end templates -->
 
+
+        <div id="tree-list">
+          <div class="header">Navigator</div>
+          <div class="tree">
+            <ol>
+              <!--
+			<li data-component="Products" class="file">							
+				<label for="idNaN" style="background-image:url(/js/vvvebjs/icons/products.svg)"><span>Products</span></label>							
+				<input type="checkbox" id="idNaN">
+			</li>
+			<li data-component="Posts" class="file">							
+				<label for="idNaN" style="background-image:url(/js/vvvebjs/icons/posts.svg)"><span>Posts</span></label>							
+				<input type="checkbox" id="idNaN">
+			</li>
+			-->
+            </ol>
+          </div>
+        </div>
+
 <!-- code editor modal -->
 <div class="modal modal-full fade" id="codeEditorModal" tabindex="-1" aria-labelledby="codeEditorModal" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
@@ -2188,10 +2211,12 @@ <h6 class="modal-title text-primary fw-normal"><i class="la la-lg la-file"></i>
 	Vvveb.Gui.init();
 	Vvveb.FileManager.init();
 	Vvveb.SectionList.init();
+	Vvveb.TreeList.init();
 	Vvveb.Breadcrumb.init();
 	
 	Vvveb.FileManager.addPages(pages);
 	Vvveb.FileManager.loadPage(pages[firstPage]["name"]);
+	Vvveb.Gui.toggleRightColumn(false);
 	Vvveb.Breadcrumb.init();
 
 	//if url has #no-right-panel set one panel demo
diff --git a/libs/builder/builder.js b/libs/builder/builder.js
index c07f0c64..6d6b0c6f 100644
--- a/libs/builder/builder.js
+++ b/libs/builder/builder.js
@@ -971,22 +971,28 @@ Vvveb.Builder = {
 	 },
 	 
 	 adjustListsHeight: function () {
-		 let lists = $(".drag-elements-sidepane > div:not(.block-preview)");
-		 let properties = $(".component-properties > .tab-content");
+		 let left = $("#left-panel .drag-elements-sidepane > div:not(.block-preview), #left-panel .component-properties > .tab-content");
+		 let right = $("#right-panel .drag-elements-sidepane > div:not(.block-preview), #right-panel .component-properties > .tab-content");
 		 let wHeight = $(window).height();
-
 		let maxOffset = 0;
 			 
 		 function adjust(elements) {	
 			 elements.each(function (i,e) {
 			 e.style.height = "";
-			 maxOffset = Math.max(0, e.getBoundingClientRect()["top"]);
-			 e.style.height = (wHeight -  maxOffset) + "px";
+				 let offset =  Math.floor(e.getBoundingClientRect()["top"]);
+				 if (offset >= wHeight) return;
+				 maxOffset = Math.max(maxOffset, offset);
+				 let height = wHeight - maxOffset;
+				 if (!offset) {
+				 height += parseInt(e.dataset.offset ?? 0);
+				 }
+				 e.style.height = height + "px";
 			});
 		}
 		
-		adjust(lists);
-		adjust(properties);
+		adjust(left);
+		maxOffset = 0;
+		adjust(right);
 	},
 	 
 	
@@ -1503,6 +1509,8 @@ Vvveb.Builder = {
 				
 				node = self.dragElement.get(0);
 				self.selectNode(node);
+				Vvveb.TreeList.loadComponents();
+				Vvveb.TreeList.selectComponent(node);
 				self.loadNodeComponent(node);
 				//if component properties is loaded in left panel tab instead of right panel show tab
 				if ($(".component-properties-tab").is(":visible"))//if properites tab is enabled/visible 
@@ -1572,6 +1580,7 @@ Vvveb.Builder = {
 						$('.component-properties-tab a').show().tab('show'); 
 					
 					self.selectNode(event.target);
+					Vvveb.TreeList.selectComponent(event.target);
 					self.loadNodeComponent(event.target);
 
 					if (Vvveb.component.resizable) {
@@ -1595,6 +1604,7 @@ Vvveb.Builder = {
 		
 		$("#drag-btn").on("mousedown", function(event) {
 			//self.dragElement = self.selectedEl.attr("style",Vvveb.dragElementStyle);
+			if (event.which == 1) {//left click
 			self.isDragging = true;
 			$("#section-actions, #highlight-name, #select-box").hide();
 			
@@ -1617,9 +1627,11 @@ Vvveb.Builder = {
 			//self.selectNode(false);
 			event.preventDefault();
 			return false;
+			}
 		});
 		
 		$(".resize > div").on("mousedown", function(event) {
+			if (event.which == 1) {//left click
 			$("#section-actions, #highlight-name, #highlight-box").hide();
 			
 			self.isResize = true;
@@ -1629,6 +1641,7 @@ Vvveb.Builder = {
 
 			event.preventDefault();
 			return false;
+			}
 		});
 		
 		$("#down-btn").on("click", function(event) {
@@ -1664,6 +1677,7 @@ Vvveb.Builder = {
 			
 			self.selectNode(node);
 			self.loadNodeComponent(node);
+			Vvveb.TreeList.selectComponent(node);
 			
 			event.preventDefault();
 			return false;
@@ -1779,6 +1793,8 @@ Vvveb.Builder = {
 			node = node.get(0);
 			self.selectNode(node);
 			self.loadNodeComponent(node);
+			Vvveb.TreeList.loadComponents();
+			Vvveb.TreeList.selectComponent(node);
 			
 			Vvveb.Undo.addMutation({type: 'childList', 
 									target: node.parentNode, 
@@ -1820,7 +1836,7 @@ Vvveb.Builder = {
 		self.isDragging = false;	
 		
 		$("body").on("mousedown touchstart", ".drag-elements-sidepane ul > li > ol > li[data-drag-type]", function(event) {
-			
+			if (event.which == 1) {//left click
 			$this = $(this);
 			
 			$("#component-clone").remove();
@@ -1864,6 +1880,7 @@ Vvveb.Builder = {
 			
 			event.preventDefault();
 			return false;
+			}
 		});
 		
 		$('body').on('mouseup dragend touchend', function(event) {
@@ -2418,7 +2435,6 @@ Vvveb.Gui = {
 		Vvveb.Gui.togglePanel("#left-panel", "--builder-left-panel-width");
 	},
 
-	
 	toggleRightColumn: function (rightColumnEnabled = null) {
 		rightColumnEnabled = Vvveb.Gui.togglePanel("#right-panel", "--builder-right-panel-width");
 
@@ -2431,6 +2447,10 @@ Vvveb.Gui = {
 		Vvveb.Builder.adjustListsHeight();
 	},
 
+	toggleTreeList: function () {
+		$("#tree-list").toggle();
+	},
+
 	darkMode: function () {
 		let theme = $("html").attr("data-bs-theme");
 		
@@ -2698,9 +2718,9 @@ Vvveb.ContentManager = {
 	},
 };
 
-function getNodeTree (node, parent, allowedComponents) {
+function getNodeTree (node, parent, allowedComponents, idToNode = {}) {
 	
-	function getNodeTreeTraverse (node, parent) {
+	function getNodeTreeTraverse (node, parent, id = '') {
 		
 		if (node.hasChildNodes()) {
 			for (var j = 0; j < node.childNodes.length; j++) {
@@ -2727,16 +2747,18 @@ function getNodeTree (node, parent, allowedComponents) {
 						image: matchChild.image,
 						type: matchChild.type,
 						node: child,
+						id: id + '-' + j,
 						children: []
 					};
 					
 					element.children = [];
 					parent.push(element);
+					idToNode[id + '-' + j] = child;
 					
-					element = getNodeTreeTraverse(child, element.children);
+					element = getNodeTreeTraverse(child, element.children, id + '-' + j);
 				} else
 				{
-					element = getNodeTreeTraverse(child, parent);	
+					element = getNodeTreeTraverse(child, parent, id + '-' + j);	
 				}
 			}
 		}
@@ -2744,7 +2766,7 @@ function getNodeTree (node, parent, allowedComponents) {
 		return false;
 	}
 	
-	getNodeTreeTraverse(node, parent);
+	getNodeTreeTraverse(node, parent, '1');
 }
 
 function drawComponentsTree(tree) {
@@ -2758,7 +2780,10 @@ function drawComponentsTree(tree) {
 		for (i in tree)
 		{
 			var node = tree[i];
-			var id = prefix + '-' + j + '-' + i; 
+			var id = node.id;
+			if (!id) {
+				id = prefix + '-' + j + '-' + i; 
+			}
 			
 			if (tree[i].children.length > 0) 
 			{
@@ -2802,13 +2827,7 @@ Vvveb.SectionList = {
 		$(this.selector).on("click", "> div .controls", function (e) {
 			var node = $(e.currentTarget.parentNode).data("node");
 			if (node) {
-				
-			delay(
-				() => Vvveb.Builder.frameHtml.animate({
-					scrollTop: $(node).offset().top - ($(node).height() / 2)
-				}, 500), 
-			300);				
-
+				node.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
 				//node.click();
 				Vvveb.Builder.selectNode(node);
 				Vvveb.Builder.loadNodeComponent(node);
@@ -2821,26 +2840,13 @@ Vvveb.SectionList = {
 		
 		$(this.selector).on("click", "li[data-component] label ", function (e) {
 			node = $(e.currentTarget.parentNode).data("node");
-			
-			delay(
-				() => Vvveb.Builder.frameHtml.animate({
-					scrollTop: $(node).offset().top - ($(node).height() / 2)
-				}, 1000), 
-			300);
-
+			if (node) {
+			node.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
 			node.click();
+			}
 		}).on("mouseenter", "li[data-component] label", function (e) {
 			node = $($(e.currentTarget.parentNode).data("node"));
 			node.css("outline","1px dashed blue");
-			/*
-			delay(
-				() => Vvveb.Builder.frameHtml.animate({
-					scrollTop: $(node).offset().top - ($(node).height() / 2)
-				}, 500), 
-			1000);
-
-			$(node).trigger("mousemove");
-			*/ 
 		}).on("mouseleave",  "li[data-component] label",  function (e){
 			node = $($(e.currentTarget.parentNode).data("node"));
 			node.css("outline","");
@@ -2920,11 +2926,16 @@ Vvveb.SectionList = {
 				}
 			}
 
+			node[0].scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
+			node.click();
+			/*
 			Vvveb.Builder.frameHtml.animate({
 				scrollTop: $(node).offset().top
 			}, 1000);
 			
 			delay(() => node.click(), 1000);
+			*/
+			
 			
 			node = node.get(0);
 			Vvveb.Undo.addMutation({type: 'childList', 
@@ -2934,6 +2945,9 @@ Vvveb.SectionList = {
 
 
 			self.loadSections();
+			Vvveb.TreeList.loadComponents(); 
+			Vvveb.TreeList.selectComponent(node);
+
 			e.preventDefault();
 		});
 		
@@ -2984,7 +2998,7 @@ Vvveb.SectionList = {
 		section.data("node", data.node);
 		$(this.selector).append(section);
 
-		this.loadComponents(section, data.node, this.allowedComponents);
+		//this.loadComponents(section, data.node, this.allowedComponents);
 	},
 
 	loadSections: function() {
@@ -3049,6 +3063,133 @@ Vvveb.SectionList = {
 	},
 }
 
+Vvveb.TreeList = {
+	selector: '#tree-list',
+	
+	tree: [],
+	
+	idToNode : {},
+	
+	init: function() {
+		// header move
+		let div = document.querySelector(this.selector);
+		let header = document.querySelector(this.selector + " .header");
+		let isDown = false;
+		let offset = [0,0];
+
+		header.addEventListener('mousedown', function(e) {
+			if (e.which == 1) {//left click
+				isDown = true;
+				offset = [
+					div.offsetLeft - e.clientX,
+					div.offsetTop - e.clientY
+				];
+			}
+		}, true);
+
+		document.addEventListener('mouseup', function() {
+			isDown = false;
+		}, true);
+
+		document.addEventListener('mousemove', function(event) {
+			if (isDown) {
+				event.preventDefault();
+				div.style.left = (event.clientX + offset[0]) + 'px';
+				div.style.top  = (event.clientY + offset[1]) + 'px';
+			}
+		}, true);
+		
+		
+		//components click
+		$(this.selector).on("click", "> div .controls", function (e) {
+			var node = $(e.currentTarget.parentNode).data("node");
+			if (node) {
+				node.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
+				//node.click();
+				Vvveb.Builder.selectNode(node);
+				Vvveb.Builder.loadNodeComponent(node);
+			}
+		}).on("dblclick", "> div", function (e) {
+			node = $(e.currentTarget).data("node");
+			//node.click();
+			Vvveb.Builder.selectNode(node);
+			Vvveb.Builder.loadNodeComponent(node);
+		});
+		
+		
+		$(this.selector).on("click", "li[data-component] label ", function (e) {
+			node = $(e.currentTarget.parentNode).data("node");
+			node.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
+			node.click();
+		}).on("mouseenter", "li[data-component] label", function (e) {
+			node = $($(e.currentTarget.parentNode).data("node"));
+			node.css("outline","1px dashed blue");
+		}).on("mouseleave",  "li[data-component] label",  function (e){
+			node = $($(e.currentTarget.parentNode).data("node"));
+			node.css("outline","");
+			if (node.attr("style") == "") node.removeAttr("style");
+		});
+		
+	},
+	
+	selectComponent: function(node) {
+		let id;
+		for (i in this.idToNode) {
+			if (node == this.idToNode[i]) {
+				id = i;
+				break;
+			}
+		}
+
+		if (id) {
+			let element = document.getElementById("id" + id);
+
+			$(this.selector + " .active").removeClass("active");	
+			//collapse all 
+			let checkboxes = document.querySelectorAll(this.selector + " input[type=checkbox]:checked");
+			for (var i = 0, len = checkboxes.length; i < len; i++) {
+				checkboxes[i].checked = false;
+				let label = checkboxes[i].labels[0];
+				if (label) {
+					label.classList.remove("active");
+				}
+			}
+
+			//expand parents
+			if (element) {
+				let parent = element;
+				let current = element;
+				while (parent = current.closest("li")) {
+					current = parent.parentNode; 
+					let input = parent.querySelector("input");
+					if (input && input.hasAttribute("type") && input.type == "checkbox") {
+						input.checked = true;
+					}
+				}
+				
+				element.checked = true;
+				element.labels[0].classList.add("active");
+				element.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
+			}
+		}
+		
+		return false;
+	},
+	
+	loadComponents: function() {
+		let list = $(this.selector + " .tree > ol");
+		//if navigator not visible don't load
+		if (list[0].offsetParent === null) return;
+		
+		this.tree     = [];
+		this.idToNode = {};
+		getNodeTree(window.FrameDocument.body, this.tree, {}, this.idToNode);
+		
+		var html = drawComponentsTree(this.tree);
+		$(this.selector + " .tree > ol").replaceWith(html);
+	},	
+}
+
 Vvveb.FileManager = {
 	tree:false,
 	pages:{},
@@ -3094,25 +3235,13 @@ Vvveb.FileManager = {
 		
 		$(this.tree).on("click", "li[data-component] label ", function (e) {
 			node = $(e.currentTarget.parentNode).data("node");
-
-			delay(
-				() => Vvveb.Builder.frameHtml.animate({
-					scrollTop: $(node).offset().top - ($(node).height() / 2)
-				}, 500),
-			500);
-			
-
+			node.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
 			node.click();
 
 		}).on("mouseenter", "li[data-component] label", function (e) {
 
 			node = $(e.currentTarget.parentNode).data("node");
-
-			delay(
-				() => Vvveb.Builder.frameHtml.animate({
-					scrollTop: $(node).offset().top - ($(node).height() / 2)
-				}, 500),
-			 1000);
+			node.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
 
 			$(node).trigger("mousemove");
 			
@@ -3319,6 +3448,7 @@ Vvveb.FileManager = {
 				function () { 
 					if (loadComponents) { Vvveb.FileManager.loadComponents(allowedComponents); }
 					Vvveb.SectionList.loadSections(allowedComponents); 
+					Vvveb.TreeList.loadComponents(); 
 					Vvveb.StyleManager.init(); 
 				});
 		}
@@ -3340,12 +3470,7 @@ Vvveb.Breadcrumb = {
 			let node = $(this).data("node");
 			if (node) {
 				node.click();
-
-				delay(
-					() => Vvveb.Builder.frameHtml.animate({
-						scrollTop: $(node).offset().top - ($(node).height() / 2)
-					}, 500),
-				 100);
+				node.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
 			}
 			
 			$(window).triggerHandler("vvveb.Breadcrumb.click", node);
@@ -3361,12 +3486,6 @@ Vvveb.Breadcrumb = {
 			$(window).triggerHandler("vvveb.Breadcrumb.hover", node);
 			//node.css("outline","1px dashed blue");
 			/*
-			delay(
-				() => Vvveb.Builder.frameHtml.animate({
-					scrollTop: $(node).offset().top - ($(node).height() / 2)
-				}, 500),
-			 1000);
-
 			$(node).trigger("mousemove");
 			*/
 			
diff --git a/libs/builder/components-common.js b/libs/builder/components-common.js
index 6302abcb..6c169584 100644
--- a/libs/builder/components-common.js
+++ b/libs/builder/components-common.js
@@ -860,7 +860,8 @@ Vvveb.Components.extend("_base", "_base", {
 
 		onChange: function(node, value) {
 			
-			$(node).css('background-image', 'url(' + value + ')');
+			Vvveb.StyleManager.setStyle($(node), "background-image", 'url(' + value + ')');
+			//$(node).css('background-image', 'url(' + value + ')');
 			
 			return node;
 		}        
diff --git a/libs/builder/components-elements.js b/libs/builder/components-elements.js
index 7f10d6f7..9e3d36d0 100644
--- a/libs/builder/components-elements.js
+++ b/libs/builder/components-elements.js
@@ -940,12 +940,17 @@ function carouselAfterDrop(node) {
 		function initSwiper(onlyNew = false) {
 			var list = document.querySelectorAll('.swiper' + (onlyNew ? ":not(.swiper-initialized)" : "") );
 			list.forEach(el => {
-				//el.dataset
-				let params = {};
+				let params = {      
+					navigation: {
+						nextEl: ".swiper-button-next",
+						prevEl: ".swiper-button-prev",
+					},      
+					pagination: {
+						el: ".swiper-pagination",
+				  },
+				};
 				for (i in el.dataset) {
 					let param = el.dataset[i];
-					console.log(i);
-					console.log(param);
 					if (param[0] = '{') {
 						param = JSON.parse(param);
 					}
diff --git a/scss/_builder.scss b/scss/_builder.scss
index 9909e6a2..a380762f 100644
--- a/scss/_builder.scss
+++ b/scss/_builder.scss
@@ -459,10 +459,18 @@ body
 			.btn {
 				
 				&.btn-light {
-					font-size: 1.25rem;
 					padding: 0.25rem 0.5rem;
 					--bs-btn-active-bg: var(--bs-primary-bg-subtle);
+					--bs-btn-hover-bg: var(--bs-primary-bg-subtle);
 					--bs-btn-active-border-color: transparent;
+					--bs-btn-hover-color: var(--bs-body-bg); 
+					--bs-btn-bg:transparent;
+					border-color:transparent;
+					color: var(--bs-body-color);
+					
+					i {
+						font-size: 1.25rem;
+					}
 				}
 				
 				&.btn-primary {
@@ -470,7 +478,7 @@ body
 					margin-top: 0.2rem;
 					
 					i {
-						font-size:21px;
+						font-size:18px;
 						line-height:21px;
 					}
 				}
@@ -570,7 +578,7 @@ body
 				border-radius:0px;
 				min-width:4.5rem;
 				color:var(--bs-body-color);
-				line-height:1.2rem;
+				line-height:1.4;
 				//font-size:0.9rem;
 
 				div {
@@ -585,7 +593,6 @@ body
 				small
 				{
 					font-size:0.8rem;
-					padding:0 0.5rem;
 					//display:none;
 				}
 				
@@ -681,7 +688,7 @@ body
 	.components-list, .blocks-list, .component-properties, .sections-list
 	{
 		list-style:none;
-		background: rgba(var(--bs-secondary-color-rgb), 0.03);
+		background: rgba(var(--bs-secondary-color-rgb), 0.025);
 		//scrollbar on hover
 	}
 	
@@ -1354,8 +1361,8 @@ body
 				padding:0.3rem 0.2rem 0.4rem;
 				
 				i {
-					padding: 0.4rem 0rem;
-					font-size:1.3rem;
+					padding: 0.3rem 0rem;
+					font-size:1.2rem;
 					border-radius: 3px;
 					display:block;
 					border:1px solid transparent;
@@ -1397,11 +1404,11 @@ body
 	.nav-tabs .nav-link
 	{
 		padding:0.8rem 0 0.5rem;
-		padding:0.8rem 0 0.8rem;
+		padding:0.5rem 0 0.5rem;
 		text-align:center;
 		i {
 			font-size:1.4rem;
-			line-height:1.2rem;
+			line-height:1;
 		}
 	}
 
@@ -2451,6 +2458,75 @@ img.preview {
     min-height: 1rem;
 }
 
+#tree-list {
+    position: absolute;
+    top: 10%;
+    left: 80%;
+	left:calc(100% - 300px);
+    //border: 1px solid var(--bs-border-color);
+	border-radius:2px;
+    z-index: 100;
+    width: 250px;
+    min-width: 250px;
+    min-height: 250px;
+    height: 500px;
+    resize: both;
+	overflow: hidden;
+    box-shadow: 0px 1px 5px 0px rgba(var(--bs-body-color-rgb), 0.15);
+    background: var(--bs-body-bg);
+	
+	.header {
+		height:30px;
+		font-size: 12px;
+		padding: 0.4rem 1rem;
+		color: rgba(var(--bs-body-color-rgb), 0.7);
+		background: rgba(var(--bs-primary-rgb), 0.15);	
+		cursor:grabbing;
+		
+		&:before {
+			content: "....";
+			opacity:0.5;
+			width: 15px;
+			top: 0;
+			font-size: 28px;
+			word-wrap: break-word;
+			line-height: 7px;
+			vertical-align: middle;
+			display: inline-block;
+			margin-right: 10px;
+			margin-top: -1rem;
+		}
+	}
+	
+	.tree {
+	    padding: 1rem;
+		overflow: auto;
+		width: 100%;
+		height: 100%;
+		height: calc(100% - 30px);
+		
+		label {
+			
+			&.active {
+				border: 1px solid rgba(var(--bs-primary-rgb), 0.15);
+				background-color: rgba(var(--bs-primary-rgb), 0.05);			
+			}			
+		}
+		
+		> ol li input {
+			height: 2.4em;
+			width: 4em;			
+		}
+		
+		> ol li input:checked + ol {
+			padding:2rem 0 0 1.5rem;
+		}
+		
+		> ol li.file > label {
+			margin-left:18px;
+		}
+	}
+}
 
 /* theme specific styes needed by section component */
 body {
@@ -2458,6 +2534,10 @@ body {
 		position:relative;
 		//padding:5rem 0;
 		
+		&.bg-alternate:nth-child(even) {
+			//background-color:rgba(var(--bs-body-color-rgb), 0.05);
+		}
+		
 		.background-container, .overlay {
 			position:absolute;
 			top:0;
@@ -2470,15 +2550,43 @@ body {
 			&::before {
 			}
 			
+			img, video {
+				width:auto;
+				height:auto;
+				max-width: initial;
+				min-height: 100%;
+				min-width: 100%;
+
+			
+				//center hero image on mobile
+				/*
+				@include media-breakpoint-down(md) { 
+					margin: 0 0 0 -25%;
+				}
+				
+				@include media-breakpoint-down(sm) {
+					margin: 0 0 0 -50%;	
+				}
+				*/
+			}
+			
 			img {
-				width:100%;
+			  position: absolute;
+			  left: 50%;
+			  top: 50%;
+			  height: 100%;
+			  width: auto;
+			  -webkit-transform: translate(-50%,-50%);
+				  -ms-transform: translate(-50%,-50%);
+					  transform: translate(-50%,-50%);
 			}
 		}
 
 		.overlay {
 			z-index:-1;
-			background: #000;
-			opacity: 0.6;
+			//background: var(--bs-body-color);
+			background: var(--bs-black);
+			opacity: 0.7;
 		}
 
 		.separator {
@@ -2515,7 +2623,7 @@ body {
 				bottom: 0;
 				top: 0;
 				content: "";
-				background: rgba(0,0,0, 0.4);
+				background: rgba(var(--bs-body-color-rgb), 0.4);
 			}
 		}*/
 	}