diff --git a/resources/web/guide/21/21.css b/resources/web/guide/21/21.css
index b370a94879..6ed2682533 100644
--- a/resources/web/guide/21/21.css
+++ b/resources/web/guide/21/21.css
@@ -1,20 +1,34 @@
 #Content
 {
 	overflow-y:auto;
-	padding: 32px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
+	padding: 0 10px 0 20px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
+	height: 100%;
+}
+
+.OneVendorBlock {
+	position: relative;
+	margin-bottom: 7px;
+}
+
+.OneVendorBlock:last-of-type {
+	margin-bottom: 36px;
 }
 
 .BlockBanner
 {
+	position: sticky;
+	top: 0;
+	left: 0;
 	padding: 0px;
-	border-bottom:#009688 1px solid;
+	border-bottom: 2px solid var(--main-color);
 	width: 100%;
 	display: flex;
-	justify-content:space-between;
 	align-items: center;
+	z-index: 100;
+	background-color: var(--bg-color-secondary);
+	box-sizing: border-box;
 }
 
-
 .BannerBtns
 {
 	display: flex;
@@ -22,53 +36,137 @@
 	justify-content: space-around;
 	align-items: center;
 	text-align: center;
-	margin-right: 0px; /* ORCA align buttons with end of horizontal separator/line */
+	margin-right: 5px; /* ORCA align buttons with end of horizontal separator/line */
+	margin-left: auto;
 }
 
 .BlockBanner  a
 {
-	display: inline-block;
-	background-color:#009688;
-	line-height: 40px;
-	height: 40px;
-	padding: 0px 24px;
-	color: #fff;
+	line-height: 30px;
+	height: 30px;
+	font-size: 17px;
+	font-weight: 600;
+	padding: 0px 10px;
+	color: var(--fg-color-text);
+}
+
+.BlockBanner .modelCount {
+	margin: 0 15px 0 auto;
+	font-size: 14px;
+	line-height: 14px;
+	height: 15px;
+	color: var(--fg-color-label);
+}
+
+.VendorCheckbox {
+	transform: scale(1.3);
 }
 
 .PrinterArea
 {
-	padding: 10px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
-	display: flex;
-	flex-wrap: wrap;
+	padding: 7px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 7px;
 }
 
 .PrinterBlock
 {
-	width: 160px;
+	display: flex;
+	align-items: center;
 	text-align: center;
-	padding: 10px;
+	flex-direction: column;
+	gap:10px;
+	padding: 15px 10px 10px 10px;
+	background-color: var(--bg-color-secondary);
+	position: relative;
+	border: 1px solid transparent
 }
 
-.PImg
-{
+.PrinterBlock:hover {
+	background-color: var(--focus-bg-item);
+	border-color:var(--main-color);
+}
+
+.PImg {
 	width:120px;      /* ORCA use covers as 120x120px but use source file as 240x240 for better quality on hidpi */
 	height:120px;	  /* ORCA fit image to fill frame */
-	padding:10px 20px /* ORCA use less vertical padding */
+}
+
+.PrinterInfo,
+.PrinterInfoMark {
+	position: absolute;
+	right: 4px;
+	top: 4px;
+	opacity: 0;
+	border-radius: 11px;
+	line-height: 19px;
+	font-size: 14px;
+}
+
+.PrinterInfo {
+	--card-animation-delay: .8s; /* open info with delay on list / compact view to prevent them appear while mouse movements */
+	--card-info-height: fit-content;
+	left: 4px;
+	width: auto;
+	z-index: 9998;
+	height: var(--card-info-height);
+	border-color: var(--border-color);
+	background: var(--bg-color);
+	padding: 10px;
+	text-align: left;
+	color: var(--fg-color-text);
+	pointer-events: none;
+}
+
+#Content[layout="2"] .PrinterInfo {
+	--card-animation-delay: .3s;
+	--card-info-height: 116px;
+}
+
+.PrinterInfo .title {font-weight: 700}
+.PrinterInfo .value {font-weight: 400}
+
+.PrinterInfoMark:hover + .PrinterInfo {
+	animation: infoCard 0s forwards var(--card-animation-delay);
+}
+
+@keyframes infoCard {100% {
+	opacity: 1;
+	box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}}
+
+.PrinterInfoMark {
+	width: 20px;
+	height: 20px;
+	background: var(--main-color);
+	border: 1px solid var(--main-color);
+	z-index: 9999;
+	color: #FFF;
+	text-align: center;
+}
+
+.PrinterBlock:hover .PrinterInfoMark {
+	opacity: 1;
+}
+
+.PrinterBlock:hover .PrinterInfoMark:hover {
+	background: var(--main-color-hover);
 }
 
 .ModelCheckBox
 {
-	flex: 0 0 18px;			/* ORCA match checkbox style and size */
-	margin: 10px 5px 0 0;
-	width: 18px;
-	height: 18px;
-	background-image: url("../img/emptycheck.svg");
-	background-size: cover;
+	position: absolute;
+	height: 6px;
+	bottom: 0;
+	left: 10%;
+	width: 80%;
+	background: var(--button-bg-hover)
 }
 
 .ModelCheckBox.ModelCheckBoxSelected
 {
-	background-image: url("../img/greencheck.svg");
+	background: var(--main-color-fixed)
 }
 
 img.ModelThumbnail
@@ -79,8 +177,11 @@ img.ModelThumbnail
 
 .PName
 {
-	font-weight: 700;
-	text-align:left;
+	font-weight: 600;
+	line-height: 20px; /* ORCA */
+	text-align: center;
+	width: 100%;
+	color: var(--fg-color-text);
 }
 
 .pNozzel
@@ -98,6 +199,79 @@ img.ModelThumbnail
 	margin-right: 5px;
 }
 
+.LayoutSelector {
+	position: absolute;
+	right:21px;
+	top:14px;
+}
+
+.LayoutSelector .TabGroup {
+	display: flex;
+	padding: 2px;
+	gap: 2px;
+	border-radius: 6px;
+	background-color: var(--bg-color-alt);
+}
+
+.LayoutSelector .icon16 {
+	opacity: .8;
+}
+
+.LayoutSelector .TabButton {
+	padding: 7px;
+	border-radius: 4px;
+}
+
+.LayoutSelector .TabButton.selected         {background: var(--main-color)}
+.LayoutSelector .TabButton.selected:hover   {background: var(--main-color-hover)}
+.LayoutSelector .TabButton.selected .icon16 {background: #FFF}
+
+.LayoutSelector .TabButton:nth-of-type(1) .icon16 {--icon-url: var(--icon-layout-list)}
+.LayoutSelector .TabButton:nth-of-type(2) .icon16 {--icon-url: var(--icon-layout-compact)}
+.LayoutSelector .TabButton:nth-of-type(3) .icon16 {--icon-url: var(--icon-layout-cover)}
+
+/* LAYOUT */
+#Content[layout="compact-list"] .PrinterArea {
+	grid-template-columns: repeat(4, 1fr);
+}
+
+#Content[layout="compact-list"] .PImg {
+	display: none;
+}
+
+#Content[layout="compact-list"] .OneVendorBlock {
+	margin-bottom: 15px;
+}
+
+#Content[layout="compact-cover"] .PrinterArea {
+	grid-template-columns: repeat(3, 1fr);
+}
+
+#Content[layout="compact-cover"] .PImg {
+	width: 60px;
+	min-width: 60px;
+	height: 60px;
+}
+
+#Content[layout|="compact"] .PName {
+	text-align: left;
+}
+
+#Content[layout|="compact"] .PrinterBlock {
+	flex-direction: row;
+	padding: 5px 5px 5px 18px;
+}
+
+#Content[layout|="compact"] .ModelCheckBox {
+	width: 6px;
+	height: 80%;
+	left:0;
+	top:10%
+}
+
+#Content[layout|="compact"] .OneVendorBlock:last-of-type {
+	margin-bottom: 0px;
+}
 
 /*-----Notice-----*/
 #NoticeMask
@@ -148,51 +322,149 @@ img.ModelThumbnail
 	justify-content:flex-end;
 }
 
+
 .search {
-	width: 100%;
-	position: relative;
-	display: flex;
+	position: absolute;
+	left:66px;
+	top: 14px;
+	width: 34px;
+	height: 34px;
+	z-index: 99;
+	overflow: hidden;
 }
-  
+
+.search:focus-within,
+.search[hasvalue="1"] {
+	width: calc(100% - 194px);
+}
+
 .searchTerm {
 	width: 100%;
-	border: 1px solid #DBDBDB; /* ORCA Searchbox > match border style */
-	/*border-right: none;*/
-	padding: 5px;
-	padding-left:32px;
-	height: 20px;      /* ORCA match height */
-	line-height: 20px; /* ORCA center text vertically */
-	border-radius: 5px 5px 5px 5px;
+	height: 100%;
+	padding: 4px 5px;
+	border-radius: 6px;
 	outline: none;
-	color: #9DBFAF;
-}
-@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
-	.searchTerm {border: 1px solid #4A4A51;}
+	box-sizing: border-box;
+	background: var(--button-bg-normal);
+	border: 1px solid var(--button-bg-normal);
 }
 
-.searchTerm:focus{
-	color: #363636;       /* ORCA Searchbox > use normal text color */
-	border-color:#009688; /* ORCA Searchbox > highlight border color when focused. like on normal UI */
-}
-@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
-	.searchTerm:focus{color: #FFFFFF}
+@media (prefers-reduced-motion: no-preference) {
+	.searchTerm {
+		transition: background-color .2s
+	}
 }
 
-#search-icon{ /* ORCA */
-	position:absolute;
-    top: 50%;
-    transform: translateY(-50%);
-	left:8px;
-	margin:0px auto;
-	fill:#7C8282
-}
-@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
-	#search-icon{fill:#949494}
+.searchTerm,
+.search-placeholder {
+	line-height: 24px; /* ORCA center text vertically */
+	font-size: 14px;
 }
 
-/*Resize the wrap to see the search bar change!*/
-.wrap{
-	width: 30%;
-	padding-bottom: 5px;
-	padding-left: 32px; /* ORCA Align with content */
+.search:focus-within .searchTerm,
+.search[hasvalue="1"] .searchTerm {
+	padding-left:33px;
+	background: var(--bg-color);
+	border-color: var(--main-color);
+}
+
+.search[hasvalue="1"]:not(:focus-within, :hover) .searchTerm {
+	border-color: var(--border-color);
+}
+
+.search:not(:focus-within, [hasvalue="1"]) .searchTerm {
+	cursor: default;
+}
+
+.search:not(:focus-within, [hasvalue="1"]) .searchTerm:hover {
+	background: var(--button-bg-hover);
+}
+
+.search-placeholder {
+	color: var(--fg-color-disabled);
+	left: 33px;
+}
+
+.searchTerm:not(:placeholder-shown) + .search-placeholder {
+	opacity: 0;
+}
+
+.search-icon,
+.search-placeholder {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	pointer-events: none;
+}
+
+.search-icon {
+	left: 9px;
+	--icon-url: var(--icon-search);
+}
+
+.SidebarBtn {
+	position: absolute;
+	left: 20px;
+	top: 14px;
+	padding: 9px;
+	border-radius: 6px;
+}
+
+.SidebarBtn .icon16 {
+	--icon-url: var(--icon-sidebar);
+}
+
+#SidebarContainer {
+	position: absolute;
+	top: 0;
+	left: -240px;
+	right: 0;
+	height: 100%;
+	z-index: 999999;
+	display: flex;
+	pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	#SidebarContainer {
+		transition: background-color .2s, left .2s
+	}
+}
+
+#SidebarContainer[open="1"] {
+	left: 0px;
+	pointer-events: all;
+	background: rgba(0,0,0,.3);
+}
+
+#Sidebar {
+	flex: 0 0 220px;
+	background: var(--bg-color);
+	box-shadow: 5px 0 20px rgba(0,0,0,.2);
+	padding: 15px 0;
+	overflow-y: auto;
+}
+
+#Sidebar .title {
+	font-size: 17px;
+	line-height: 17px;
+	font-weight: 600;
+	padding: 0 0 5px 20px;
+}
+
+#Sidebar .SidebarItem {
+	width: 100%;
+	padding: 2px 10px 2px 20px;
+	color:var(--fg-color-text);
+	font-size: 14px;
+	border: 1px solid transparent;
+	box-sizing: border-box;
+}
+
+#Sidebar .SidebarItem:hover {
+	border-color: var(--main-color);
+}
+
+#SidebarContainer .back {
+	flex: 1;
 }
diff --git a/resources/web/guide/21/21.js b/resources/web/guide/21/21.js
index 53cef68b7e..5ad3a8b219 100644
--- a/resources/web/guide/21/21.js
+++ b/resources/web/guide/21/21.js
@@ -67,6 +67,13 @@ function HandleModelList( pVal )
 		return;
 
     pModel=pVal['model'];
+
+	// ORCA ensure list correctly ordered
+	pModel = pModel.sort((a, b)=>(a["vendor"].localeCompare(b["vendor"])))
+	pModel = [ // move custom printers to top
+		...pModel.filter(i=>i.vendor === "Custom"),
+		...pModel.filter(i=>i.vendor !== "Custom")
+	];
 	
 	let nTotal=pModel.length;
 	let ModelHtml={};
@@ -89,11 +96,15 @@ function HandleModelList( pVal )
 
 			let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'">'+
 '<div class="BlockBanner">'+
-'	<a>'+sVV+'</a>'+				
-'	<div class="BannerBtns">'+
-'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
-'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone('+"\'"+strVendor+"\'"+')">none</div>'+
-'	</div>'+
+'	<a>'+sVV+'</a>'+
+'	<div class="BannerBtns" onClick="ChooseVendor('+"\'"+strVendor+"\'"+')">'+
+'		<div class="modelCount"></div>' +
+'		<input type="checkbox" class="VendorCheckbox"/>'+
+'	</div>'+		
+//'	<div class="BannerBtns">'+
+//'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
+//'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone('+"\'"+strVendor+"\'"+')">none</div>'+
+//'	</div>'+
 '</div>'+
 '<div class="PrinterArea">	'+
 '</div>'+
@@ -130,6 +141,14 @@ function HandleModelList( pVal )
 		}
 	}	
 
+	const $SidebarVendors = $('#SidebarVendors');
+	let SidebarHTML = "";
+	$(`.OneVendorBlock`).each((i, el)=>{
+		UpdateVendorCheckbox(el.getAttribute("vendor"));
+		SidebarHTML +=`<div class="SidebarItem" onclick="scrollToVendor(this.textContent)">${el.getAttribute('vendor')}</div>`;
+	});
+	$SidebarVendors.html(SidebarHTML)
+
 	// let AlreadySelect=$(".ModelCheckBoxSelected");
 	// let nSelect=AlreadySelect.length;
 	// if(nSelect==0)
@@ -140,6 +159,14 @@ function HandleModelList( pVal )
 	TranslatePage();
 }
 
+function scrollToVendor(vendor) {
+	const el = $(".OneVendorBlock[vendor='"+vendor+"']")[0];
+	if (el){
+		document.getElementById('SidebarContainer').setAttribute('open', '0');
+		document.getElementById('Content').scrollTo({top: el.offsetTop, behavior: "smooth"});
+	}
+}
+
 function SetModelSelect(vendor, model, checked) {
 	if (!ModelNozzleSelected.hasOwnProperty(vendor) && !checked) {
 		return;
@@ -153,6 +180,8 @@ function SetModelSelect(vendor, model, checked) {
 	if (oVendor.hasOwnProperty(model) || checked) {
 		oVendor[model] = checked;
 	}
+
+	UpdateVendorCheckbox(vendor)
 }
 
 function GetModelSelect(vendor, model) {
@@ -182,6 +211,8 @@ function FilterModelList(keyword) {
 		SetModelSelect(strVendor, strModel, $(OneItem).hasClass('ModelCheckBoxSelected'));
 	}
 
+	$('.search')[0].setAttribute("hasvalue", keyword ? "1" : "0")
+
 	let nTotal = pModel.length;
 	let ModelHtml = {};
 	let kwSplit = keyword.toLowerCase().match(/\S+/g) || [];
@@ -209,10 +240,14 @@ function FilterModelList(keyword) {
 			let HtmlNewVendor = '<div class="OneVendorBlock" Vendor="' + strVendor + '">' +
 				'<div class="BlockBanner">' +
 				'	<a>' + sVV + '</a>' +
-				'	<div class="BannerBtns">' +
-				'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
-				'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
-				'	</div>' +
+				'	<div class="BannerBtns" onClick="ChooseVendor('+"\'"+strVendor+"\'"+')">'+
+				'		<div class="modelCount"></div>' +
+				'		<input type="checkbox" class="VendorCheckbox"/>'+
+				'	</div>'+	
+				//'	<div class="BannerBtns">' +
+				//'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
+				//'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
+				//'	</div>' +
 				'</div>' +
 				'<div class="PrinterArea">	' +
 				'</div>' +
@@ -252,6 +287,17 @@ function FilterModelList(keyword) {
 			$(OneItem).removeClass('ModelCheckBoxSelected');
 	}
 
+	const $SidebarVendors = $('#SidebarVendors');
+	let SidebarHTML = "";
+	$(`.OneVendorBlock`).each((i, el)=>{
+		UpdateVendorCheckbox(el.getAttribute("vendor"));
+		SidebarHTML +=`<div class="SidebarItem" onclick="scrollToVendor(this.textContent)">${el.getAttribute('vendor')}</div>`;
+	});
+	$SidebarVendors.html(SidebarHTML)
+
+	const $content = $('#Content');
+	$content.css("padding-right",  $content[0].scrollHeight > $content[0].clientHeight ? "10px" : "20px");
+
 	// let AlreadySelect=$(".ModelCheckBoxSelected");
 	// let nSelect=AlreadySelect.length;
 	// if(nSelect==0)
@@ -287,9 +333,16 @@ function CreatePrinterBlock(OneModel)
 	'<div class="PImg">'+
 	'<img class="ModelThumbnail" src="' + OneModel['cover'] + '" />'+
 	'</div>'+
+	'<div class="PrinterInfoMark">?</div>'+
+	'<div class="PrinterInfo">'+
+	//'	<div class="title trans">Print volume</div>'+
+	//'	<div class="value">' + OneModel['printable_height'] + '</div>'+
+	'	<div class="title trans">Nozzle</div>'+
+	'	<div class="value">' + OneModel['nozzle_diameter'].replaceAll(";", " · ") + '</div>'+
+	'</div>'+
 	'<div style="display: flex;">'+
 	'	<div class="ModelCheckBox" vendor="' +vendor+ '" model="'+OneModel['model']+'"></div>'+
-	'	<div class="PName"><p>'+ vendorName +'</p><p>' + modelName +'</p></div>'+
+	'	<div class="PName">'+ modelName +'</div>'+ // ><p>'+ vendorName +'</p>
 	'</div>'+
 	'</div>';
 }
@@ -313,6 +366,29 @@ function SelectPrinterNone( sVendor )
 	});
 }
 
+function ChooseVendor(sVendor) {
+	const $cbs = $(`.OneVendorBlock[vendor='${sVendor}'] .ModelCheckBox`);
+	const sel  = $cbs.length && $cbs.not('.ModelCheckBoxSelected').length;
+
+	sel ? $cbs.addClass('ModelCheckBoxSelected')
+		: $cbs.removeClass('ModelCheckBoxSelected');
+
+	$cbs.each((i, el)=>{SetModelSelect(sVendor, el.getAttribute('model'), sel)});
+}
+
+function UpdateVendorCheckbox(sVendor) {
+	const $vb  = $(`.OneVendorBlock[vendor='${sVendor}']`);
+	const $cbs = $vb.find(`.ModelCheckBox`);
+	const $vcb = $vb.find(`.VendorCheckbox`);
+
+	const selCount = $cbs.filter('.ModelCheckBoxSelected').length;
+	const allSel   = selCount === $cbs.length && selCount > 0;
+	const nonSel   = selCount === 0;
+
+	$vcb.prop({checked: allSel , indeterminate: !allSel && !nonSel});
+
+	$vb.find(".modelCount").text(selCount + " / " + $cbs.length);
+}
 
 function GotoFilamentPage()
 {
diff --git a/resources/web/guide/21/index.html b/resources/web/guide/21/index.html
index 6a929c9eec..a0fe7d0072 100644
--- a/resources/web/guide/21/index.html
+++ b/resources/web/guide/21/index.html
@@ -20,16 +20,34 @@
 <div id="Title">
 	<div class="trans" tid="t10">Printer Selection</div>
 </div>
-<div class="wrap">
-	<div class="search">
-		<input type="text" class="searchTerm" placeholder="Device keyword" oninput="textInput(this)">
-		<svg id="search-icon" width="16px" height="16px"> <!-- ORCA -->
-			<path d="M6.5,2A4.505,4.505,0,0,0,2,6.5a.5.5,0,0,0,1,0A3.5,3.5,0,0,1,6.5,3a.5.5,0,0,0,0-1Z"/>
-			<path d="M14.854,14.146l-3.423-3.422a6.518,6.518,0,1,0-.707.707l3.422,3.423a.5.5,0,0,0,.708-.708ZM1,6.5A5.5,5.5,0,1,1,6.5,12,5.507,5.507,0,0,1,1,6.5Z"/>
-		</svg>
+
+<div id="SidebarContainer">
+	<div id="Sidebar" class="thin-scroll">
+		<div class="title">Vendors</div>
+		<div class="area" id="SidebarVendors">
+			<!-- <div class="SidebarItem"></div> -->
+		</div>
+	</div>
+	<div class="back" onclick="document.getElementById('SidebarContainer').setAttribute('open', '0')"></div>
+</div>
+<div class="SidebarBtn ButtonStyleRegular" onclick="document.getElementById('SidebarContainer').setAttribute('open', '1')">
+	<div class="icon16"></div>
+</div>
+
+<div class="search" hasvalue="0">
+	<div class="search-icon icon16"></div>
+	<input type="text" class="searchTerm" placeholder=" " oninput="textInput(this)">
+	<span class="search-placeholder trans">Search...</span>
+</div>
+<div class="LayoutSelector">
+	<div class="TabGroup">
+		<div class="TabButton" onclick="LayoutMode('compact-list')" ><div class="icon16"></div></div>
+		<div class="TabButton" onclick="LayoutMode('compact-cover')"><div class="icon16"></div></div>
+		<div class="TabButton" onclick="LayoutMode('large-cover')"  ><div class="icon16"></div></div>
 	</div>
 </div>
-<div id="Content"  class="ZScrol">
+
+<div id="Content"  class="thin-scroll">
 
 <!--<div class="OneVendorBlock" Vendor="BBL">	
 <div class="BlockBanner">
@@ -139,18 +157,208 @@
 	
 </body>
 <script>
+	const SearchBox = document.querySelector('.searchTerm');
+
 	document.onkeydown = function (event) {
 		var e = event || window.event || arguments.callee.caller.arguments[0];
 
-		if (window.event) {
-			try { e.keyCode = 0; } catch (e) { }
-			e.returnValue = true;
+		// ORCA focus search bar on key input
+		// SearchBox not in focus && writable character && non modifier
+		if (document.activeElement != SearchBox && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+			SearchBox.focus();
 		}
+
+		// Close sidebar
+		document.getElementById('SidebarContainer').setAttribute('open', '0')
+
+		//if (window.event) {
+		//	try { e.keyCode = 0; } catch (e) { }
+		//	e.returnValue = true;
+		//}
 	};
 	let pModel = {};
 	let ModelNozzleSelected = {};
 	function textInput(obj) {
 		FilterModelList(obj.value);
 	}
+
+	const $content  = $('#Content');
+
+	// SNAPPY SCROLLING WITHOUT LAGS
+	const SNAP_DELAY			= 600;
+	const SNAP_DURATION			= 200;
+	const SNAP_CORR             = 8; // error correction / tolerance
+
+	let scrollTimer				= null;
+	let lastScrollTop			= 0;
+	let scrollDir				= 'down';
+	let isSnapping				= false;
+	let snapRafId				= null;
+	let lastSnapTarget			= null;
+	let waitingForUserScroll	= false;
+
+	function findSnap(cur, dir) {
+		if (lastSnapTarget !== null && Math.abs(cur - lastSnapTarget) < SNAP_CORR) return null;
+
+		const savedScroll = cur;
+
+		$content[0].scrollTop = 0; // Temporarily scroll to 0 so getBoundingClientRect can get absolute positions
+
+		let bcTop = el=>(el.getBoundingClientRect().top);
+
+		const contentTop = bcTop($content[0]);
+		const bannerH    = ($content.find('.BlockBanner')[0] || {}).offsetHeight || 0;
+
+		const firstCard  = $content.find('.PrinterBlock')[0];
+		const firstArea  = $content.find('.PrinterArea')[0];
+		const cardGap    = (firstCard && firstArea) ? (bcTop(firstCard) - bcTop(firstArea)) : 0;
+
+		const candidates = $content.find('.BlockBanner, .PrinterBlock').get();
+		if (dir === 'up') candidates.reverse();
+
+		let result = lastSeen = null;
+
+		for (const el of candidates) {
+			const snapTo = Math.round(
+				el.classList.contains('BlockBanner')
+					? (bcTop(el.closest('.OneVendorBlock')) - contentTop)
+					: Math.max(0, bcTop(el) - contentTop - bannerH - cardGap)
+			);
+			if (snapTo != lastSeen){
+				lastSeen = snapTo;
+				if (dir === 'down' && snapTo > cur + SNAP_CORR) { result = snapTo; break; }
+				if (dir === 'up'   && snapTo < cur - SNAP_CORR) { result = snapTo; break; }
+			}
+		}
+
+		$content[0].scrollTop = savedScroll; // Restore scroll position
+
+		return result;
+	}
+
+	function smoothScrollTo(target) {
+		if (snapRafId) {
+			cancelAnimationFrame(snapRafId);
+			snapRafId = null;
+		}
+
+		const el   = $content[0];
+		const from = el.scrollTop;
+		const dist = target - from;
+		const t0   = performance.now();
+		const ease = t => t < 0.5 ? 2*t*t : -1 + (4 - 2*t)*t;
+	
+		function onDone() {
+			el.scrollTop         = target;
+			lastScrollTop        = lastSnapTarget = target;
+			waitingForUserScroll = true;
+			clearTimeout(scrollTimer);
+			scrollTimer = null;
+			snapRafId   = null;
+			isSnapping  = false;
+		}
+
+		if (Math.abs(dist) < 2)
+			return onDone();
+
+		snapRafId = requestAnimationFrame(function step(now) {
+			const p = Math.min((now - t0) / SNAP_DURATION, 1);
+			el.scrollTop = from + dist * ease(p);
+			if (p < 1)
+				snapRafId = requestAnimationFrame(step);
+			else
+				onDone();
+		});
+	}
+
+	function armSnap() {
+		waitingForUserScroll = false;
+		lastSnapTarget       = null;
+	}
+
+	$content.on('scroll', function() {
+		if (isSnapping) return;
+
+		if      (this.scrollTop > lastScrollTop + 1) scrollDir = 'down';
+		else if (this.scrollTop < lastScrollTop - 1) scrollDir = 'up';
+		lastScrollTop = this.scrollTop;
+
+		if (waitingForUserScroll) return;
+
+		clearTimeout(scrollTimer);
+		scrollTimer = setTimeout(()=>{
+			if (isSnapping) return;
+
+			const target = findSnap($content[0].scrollTop, scrollDir);
+			if (target){
+				isSnapping = true;
+				smoothScrollTo(target);
+			}
+		}, SNAP_DELAY);
+	});
+
+	let touchY = 0;
+	$content[0].addEventListener('touchstart', e => {
+		touchY = e.touches[0].clientY;
+		armSnap();
+	}, { passive: true });
+
+	$content[0].addEventListener('touchmove', e => {
+		const dy = touchY - e.touches[0].clientY;
+		if (Math.abs(dy) > 3)
+			scrollDir = dy > 0 ? 'down' : 'up';
+	}, { passive: true });
+
+	// Re-arm snap system on user scroll
+	$content[0].addEventListener('wheel', armSnap, { passive: true });
+
+	// Re-arm on after scrollbar usage
+	$content[0].addEventListener('pointerdown', e => {
+		if (e.target === $content[0])
+			armSnap();
+	});
+
+	// Re-arm on keyboard scroll or focus changes
+	document.addEventListener('keydown', e => {
+		if (document.activeElement != SearchBox){
+			let scrollKeys = ['ArrowUp','ArrowDown','PageUp','PageDown',' '];
+			let hasFocus    = $content[0].contains(document.activeElement);
+			if(scrollKeys.includes(e.key) || (hasFocus && e.which == 9))
+				armSnap();
+		}
+	});
+
+	// ORCA unfocus search bar while scrolling and its content empty
+	$content[0].addEventListener("scroll", () => {
+		if (document.activeElement === SearchBox && SearchBox.value == "")
+			SearchBox.blur();
+	});
+
+	// LAYOUT SELECTOR
+	const LayoutSelector = document.querySelector('.LayoutSelector > .TabGroup');
+	const LayoutBtns     = Array.from(LayoutSelector.children);
+	const LayoutTypes    = ["compact-list","compact-cover","large-cover"];
+
+	function LayoutMode(value) {
+		if($content[0].getAttribute("layout") === value)
+			return;
+
+		// find current visible vendor and scroll to it after layout change
+		let target = null;
+		for (const el of $content.find('.OneVendorBlock')) {
+			if (el.getBoundingClientRect().bottom - $content[0].getBoundingClientRect().top >= -1) {
+				target = el.getAttribute("vendor");
+				break;
+			}
+		}
+
+		LayoutBtns.forEach(el => el.classList.remove('selected'));
+		LayoutBtns[LayoutTypes.indexOf(value)].classList.add('selected');
+		$content[0].setAttribute("layout", value);
+
+		if (target) scrollToVendor(target);
+	}
+
+	LayoutMode("large-cover");
 </script>
 </html>
diff --git a/resources/web/guide/24/24.css b/resources/web/guide/24/24.css
index b460e8e0ae..a635ff7847 100644
--- a/resources/web/guide/24/24.css
+++ b/resources/web/guide/24/24.css
@@ -1,17 +1,32 @@
 #Content
 {
 	overflow-y:auto;
-	padding: 32px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
+	padding: 0 10px 0 20px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
+	height: 100%;
+}
+
+.OneVendorBlock {
+	position: relative;
+	margin-bottom: 7px;
+}
+
+.OneVendorBlock:last-of-type {
+	margin-bottom: 36px;
 }
 
 .BlockBanner
 {
+	position: sticky;
+	top: 0;
+	left: 0;
 	padding: 0px;
-	border-bottom:#009688 1px solid;
+	border-bottom: 2px solid var(--main-color);
 	width: 100%;
 	display: flex;
-	justify-content:space-between;
 	align-items: center;
+	z-index: 100;
+	background-color: var(--bg-color-secondary);
+	box-sizing: border-box;
 }
 
 .BannerBtns
@@ -21,78 +36,137 @@
 	justify-content: space-around;
 	align-items: center;
 	text-align: center;
-	margin-right: 0px; /* ORCA align buttons with end of horizontal separator/line */
+	margin-right: 5px; /* ORCA align buttons with end of horizontal separator/line */
+	margin-left: auto;
 }
 
-/*.Banner-Btn
-{
-	background-color: #C0C0C0;
-	color: #000;
-	padding: 0px 6px;
-	min-width: 50px;
-	border-radius: 4px;
-	height: 32px;
-	line-height: 32px;
-	cursor: pointer;
-}
-
-.Banner-Btn-green
-{
-	background-color: #009688;
-	color: #fff;
-	padding: 0px 6px;
-	min-width: 50px;
-	border-radius: 8px;
-	height: 32px;
-	line-height: 32px;
-	cursor: pointer;
-}*/
-
 .BlockBanner  a
 {
-	display: inline-block;
-	background-color:#009688;
-	line-height: 40px;
-	height: 40px;
-	padding: 0px 24px;
-	color: #fff;
+	line-height: 30px;
+	height: 30px;
+	font-size: 17px;
+	font-weight: 600;
+	padding: 0px 10px;
+	color: var(--fg-color-text);
+}
+
+.BlockBanner .modelCount {
+	margin: 0 15px 0 auto;
+	font-size: 14px;
+	line-height: 14px;
+	height: 15px;
+	color: var(--fg-color-label);
+}
+
+.VendorCheckbox {
+	transform: scale(1.3);
 }
 
 .PrinterArea
 {
-	padding: 10px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
-	display: flex;
-	flex-wrap: wrap;
+	padding: 7px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 7px;
 }
 
 .PrinterBlock
 {
-	width: 160px;
+	display: flex;
+	align-items: center;
 	text-align: center;
-	padding: 10px;
+	flex-direction: column;
+	gap:10px;
+	padding: 15px 10px 10px 10px;
+	background-color: var(--bg-color-secondary);
+	position: relative;
+	border: 1px solid transparent
 }
 
-.PImg
-{
-	position:relative;
+.PrinterBlock:hover {
+	background-color: var(--focus-bg-item);
+	border-color:var(--main-color);
+}
+
+.PImg {
 	width:120px;      /* ORCA use covers as 120x120px but use source file as 240x240 for better quality on hidpi */
 	height:120px;	  /* ORCA fit image to fill frame */
-	padding:10px 20px /* ORCA use less vertical padding */
+}
+
+.PrinterInfo,
+.PrinterInfoMark {
+	position: absolute;
+	right: 4px;
+	top: 4px;
+	opacity: 0;
+	border-radius: 11px;
+	line-height: 19px;
+	font-size: 14px;
+}
+
+.PrinterInfo {
+	--card-animation-delay: .8s; /* open info with delay on list / compact view to prevent them appear while mouse movements */
+	--card-info-height: fit-content;
+	left: 4px;
+	width: auto;
+	z-index: 9998;
+	height: var(--card-info-height);
+	border-color: var(--border-color);
+	background: var(--bg-color);
+	padding: 10px;
+	text-align: left;
+	color: var(--fg-color-text);
+	pointer-events: none;
+}
+
+#Content[layout="2"] .PrinterInfo {
+	--card-animation-delay: .3s;
+	--card-info-height: 116px;
+}
+
+.PrinterInfo .title {font-weight: 700}
+.PrinterInfo .value {font-weight: 400}
+
+.PrinterInfoMark:hover + .PrinterInfo {
+	animation: infoCard 0s forwards var(--card-animation-delay);
+}
+
+@keyframes infoCard {100% {
+	opacity: 1;
+	box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}}
+
+.PrinterInfoMark {
+	width: 20px;
+	height: 20px;
+	background: var(--main-color);
+	border: 1px solid var(--main-color);
+	z-index: 9999;
+	color: #FFF;
+	text-align: center;
+}
+
+.PrinterBlock:hover .PrinterInfoMark {
+	opacity: 1;
+}
+
+.PrinterBlock:hover .PrinterInfoMark:hover {
+	background: var(--main-color-hover);
 }
 
 .ModelCheckBox
 {
-	flex: 0 0 18px;			/* ORCA match checkbox style and size */
-	margin: 10px 5px 0 0;
-	width: 18px;
-	height: 18px;
-	background-image: url("../img/emptycheck.svg");
-	background-size: cover;
+	position: absolute;
+	height: 6px;
+	bottom: 0;
+	left: 10%;
+	width: 80%;
+	background: var(--button-bg-hover)
 }
 
 .ModelCheckBox.ModelCheckBoxSelected
 {
-	background-image: url("../img/greencheck.svg");
+	background: var(--main-color-fixed)
 }
 
 img.ModelThumbnail
@@ -103,9 +177,11 @@ img.ModelThumbnail
 
 .PName
 {
-	font-weight: 700;
+	font-weight: 600;
 	line-height: 20px; /* ORCA */
-	text-align: left;
+	text-align: center;
+	width: 100%;
+	color: var(--fg-color-text);
 }
 
 .pNozzel
@@ -123,6 +199,83 @@ img.ModelThumbnail
 	margin-right: 5px;
 }
 
+.LayoutSelector {
+	position: absolute;
+	right:21px;
+	top:14px;
+}
+
+.LayoutSelector .TabGroup {
+	display: flex;
+	padding: 2px;
+	gap: 2px;
+	border-radius: 6px;
+	background-color: var(--bg-color-alt);
+}
+
+.LayoutSelector .icon16 {
+	opacity: .8;
+}
+
+.LayoutSelector .TabButton {
+	padding: 7px;
+	border-radius: 4px;
+}
+
+.LayoutSelector .TabButton.selected         {background: var(--main-color)}
+.LayoutSelector .TabButton.selected:hover   {background: var(--main-color-hover)}
+.LayoutSelector .TabButton.selected .icon16 {background: #FFF}
+
+.LayoutSelector .TabButton:nth-of-type(1) .icon16 {--icon-url: var(--icon-layout-list)}
+.LayoutSelector .TabButton:nth-of-type(2) .icon16 {--icon-url: var(--icon-layout-compact)}
+.LayoutSelector .TabButton:nth-of-type(3) .icon16 {--icon-url: var(--icon-layout-cover)}
+
+#CreateBtn {
+	margin: 0 auto 0 0;
+}
+
+/* LAYOUT */
+#Content[layout="compact-list"] .PrinterArea {
+	grid-template-columns: repeat(4, 1fr);
+}
+
+#Content[layout="compact-list"] .PImg {
+	display: none;
+}
+
+#Content[layout="compact-list"] .OneVendorBlock {
+	margin-bottom: 15px;
+}
+
+#Content[layout="compact-cover"] .PrinterArea {
+	grid-template-columns: repeat(3, 1fr);
+}
+
+#Content[layout="compact-cover"] .PImg {
+	width: 60px;
+	min-width: 60px;
+	height: 60px;
+}
+
+#Content[layout|="compact"] .PName {
+	text-align: left;
+}
+
+#Content[layout|="compact"] .PrinterBlock {
+	flex-direction: row;
+	padding: 5px 5px 5px 18px;
+}
+
+#Content[layout|="compact"] .ModelCheckBox {
+	width: 6px;
+	height: 80%;
+	left:0;
+	top:10%
+}
+
+#Content[layout|="compact"] .OneVendorBlock:last-of-type {
+	margin-bottom: 0px;
+}
 
 /*-----Notice-----*/
 #NoticeMask
@@ -174,50 +327,147 @@ img.ModelThumbnail
 }
 
 .search {
-	width: 100%;
-	position: relative;
-	display: flex;
+	position: absolute;
+	left:66px;
+	top: 14px;
+	width: 34px;
+	height: 34px;
+	z-index: 99;
+	overflow: hidden;
 }
-  
+
+.search:focus-within,
+.search[hasvalue="1"] {
+	width: calc(100% - 194px);
+}
+
 .searchTerm {
 	width: 100%;
-	border: 1px solid #DBDBDB; /* ORCA Searchbox > match border style */
-	/*border-right: none;*/
-	padding: 5px;
-	padding-left:32px;
-	height: 20px;      /* ORCA match height */
-	line-height: 20px; /* ORCA center text vertically */
-	border-radius: 5px 5px 5px 5px;
+	height: 100%;
+	padding: 4px 5px;
+	border-radius: 6px;
 	outline: none;
-	color: #9DBFAF;
-}
-@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
-	.searchTerm {border: 1px solid #4A4A51;}
+	box-sizing: border-box;
+	background: var(--button-bg-normal);
+	border: 1px solid var(--button-bg-normal);
 }
 
-.searchTerm:focus{
-	color: #363636;       /* ORCA Searchbox > use normal text color */
-	border-color:#009688; /* ORCA Searchbox > highlight border color when focused. like on normal UI */
-}
-@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
-	.searchTerm:focus{color: #FFFFFF}
+@media (prefers-reduced-motion: no-preference) {
+	.searchTerm {
+		transition: background-color .2s
+	}
 }
 
-#search-icon{ /* ORCA */
-	position:absolute;
-    top: 50%;
-    transform: translateY(-50%);
-	left:8px;
-	margin:0px auto;
-	fill:#7C8282
-}
-@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
-	#search-icon{fill:#949494}
+.searchTerm,
+.search-placeholder {
+	line-height: 24px; /* ORCA center text vertically */
+	font-size: 14px;
 }
 
-/*Resize the wrap to see the search bar change!*/
-.wrap{
-	width: 30%;
-	padding-bottom: 5px;
-	padding-left: 32px; /* ORCA Align with content */
+.search:focus-within .searchTerm,
+.search[hasvalue="1"] .searchTerm {
+	padding-left:33px;
+	background: var(--bg-color);
+	border-color: var(--main-color);
 }
+
+.search[hasvalue="1"]:not(:focus-within, :hover) .searchTerm {
+	border-color: var(--border-color);
+}
+
+.search:not(:focus-within, [hasvalue="1"]) .searchTerm {
+	cursor: default;
+}
+
+.search:not(:focus-within, [hasvalue="1"]) .searchTerm:hover {
+	background: var(--button-bg-hover);
+}
+
+.search-placeholder {
+	color: var(--fg-color-disabled);
+	left: 33px;
+}
+
+.searchTerm:not(:placeholder-shown) + .search-placeholder {
+	opacity: 0;
+}
+
+.search-icon,
+.search-placeholder {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	pointer-events: none;
+}
+
+.search-icon {
+	left: 9px;
+	--icon-url: var(--icon-search);
+}
+
+.SidebarBtn {
+	position: absolute;
+	left: 20px;
+	top: 14px;
+	padding: 9px;
+	border-radius: 6px;
+}
+
+.SidebarBtn .icon16 {
+	--icon-url: var(--icon-sidebar);
+}
+
+#SidebarContainer {
+	position: absolute;
+	top: 0;
+	left: -240px;
+	right: 0;
+	height: 100%;
+	z-index: 999999;
+	display: flex;
+	pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	#SidebarContainer {
+		transition: background-color .2s, left .2s
+	}
+}
+
+#SidebarContainer[open="1"] {
+	left: 0px;
+	pointer-events: all;
+	background: rgba(0,0,0,.3);
+}
+
+#Sidebar {
+	flex: 0 0 220px;
+	background: var(--bg-color);
+	box-shadow: 5px 0 20px rgba(0,0,0,.2);
+	padding: 15px 0;
+	overflow-y: auto;
+}
+
+#Sidebar .title {
+	font-size: 17px;
+	line-height: 17px;
+	font-weight: 600;
+	padding: 0 0 5px 20px;
+}
+
+#Sidebar .SidebarItem {
+	width: 100%;
+	padding: 2px 10px 2px 20px;
+	color:var(--fg-color-text);
+	font-size: 14px;
+	border: 1px solid transparent;
+	box-sizing: border-box;
+}
+
+#Sidebar .SidebarItem:hover {
+	border-color: var(--main-color);
+}
+
+#SidebarContainer .back {
+	flex: 1;
+}
\ No newline at end of file
diff --git a/resources/web/guide/24/24.js b/resources/web/guide/24/24.js
index 16f34cae44..5ec0c60197 100644
--- a/resources/web/guide/24/24.js
+++ b/resources/web/guide/24/24.js
@@ -67,6 +67,13 @@ function HandleModelList( pVal )
 		return;
 
     pModel=pVal['model'];
+
+	// ORCA ensure list correctly ordered
+	pModel = pModel.sort((a, b)=>(a["vendor"].localeCompare(b["vendor"])))
+	pModel = [ // move custom printers to top
+		...pModel.filter(i=>i.vendor === "Custom"),
+		...pModel.filter(i=>i.vendor !== "Custom")
+	];
 	
 	let nTotal=pModel.length;
 	let ModelHtml={};
@@ -89,11 +96,15 @@ function HandleModelList( pVal )
 
 			let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'">'+
 '<div class="BlockBanner">'+
-'	<a>'+sVV+'</a>'+				
-'	<div class="BannerBtns">'+
-'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
-'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone('+"\'"+strVendor+"\'"+')">none</div>'+
-'	</div>'+
+'	<a>'+sVV+'</a>'+
+'	<div class="BannerBtns" onClick="ChooseVendor('+"\'"+strVendor+"\'"+')">'+
+'		<div class="modelCount"></div>' +
+'		<input type="checkbox" class="VendorCheckbox"/>'+
+'	</div>'+		
+//'	<div class="BannerBtns">'+
+//'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
+//'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone('+"\'"+strVendor+"\'"+')">none</div>'+
+//'	</div>'+
 '</div>'+
 '<div class="PrinterArea">	'+
 '</div>'+
@@ -130,6 +141,14 @@ function HandleModelList( pVal )
 		}
 	}	
 
+	const $SidebarVendors = $('#SidebarVendors');
+	let SidebarHTML = "";
+	$(`.OneVendorBlock`).each((i, el)=>{
+		UpdateVendorCheckbox(el.getAttribute("vendor"));
+		SidebarHTML +=`<div class="SidebarItem" onclick="scrollToVendor(this.textContent)">${el.getAttribute('vendor')}</div>`;
+	});
+	$SidebarVendors.html(SidebarHTML)
+
 	// let AlreadySelect=$(".ModelCheckBoxSelected");
 	// let nSelect=AlreadySelect.length;
 	// if(nSelect==0)
@@ -140,6 +159,14 @@ function HandleModelList( pVal )
 	TranslatePage();
 }
 
+function scrollToVendor(vendor) {
+	const el = $(".OneVendorBlock[vendor='"+vendor+"']")[0];
+	if (el){
+		document.getElementById('SidebarContainer').setAttribute('open', '0');
+		document.getElementById('Content').scrollTo({top: el.offsetTop, behavior: "smooth"});
+	}
+}
+
 function SetModelSelect(vendor, model, checked) {
 	if (!ModelNozzleSelected.hasOwnProperty(vendor) && !checked) {
 		return;
@@ -153,6 +180,8 @@ function SetModelSelect(vendor, model, checked) {
 	if (oVendor.hasOwnProperty(model) || checked) {
 		oVendor[model] = checked;
 	}
+
+	UpdateVendorCheckbox(vendor)
 }
 
 function GetModelSelect(vendor, model) {
@@ -182,6 +211,8 @@ function FilterModelList(keyword) {
 		SetModelSelect(strVendor, strModel, $(OneItem).hasClass('ModelCheckBoxSelected'));
 	}
 
+	$('.search')[0].setAttribute("hasvalue", keyword ? "1" : "0")
+
 	let nTotal = pModel.length;
 	let ModelHtml = {};
 	let kwSplit = keyword.toLowerCase().match(/\S+/g) || [];
@@ -209,10 +240,14 @@ function FilterModelList(keyword) {
 			let HtmlNewVendor = '<div class="OneVendorBlock" Vendor="' + strVendor + '">' +
 				'<div class="BlockBanner">' +
 				'	<a>' + sVV + '</a>' +
-				'	<div class="BannerBtns">' +
-				'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
-				'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
-				'	</div>' +
+				'	<div class="BannerBtns" onClick="ChooseVendor('+"\'"+strVendor+"\'"+')">'+
+				'		<div class="modelCount"></div>' +
+				'		<input type="checkbox" class="VendorCheckbox"/>'+
+				'	</div>'+	
+				//'	<div class="BannerBtns">' +
+				//'		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
+				//'		<div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
+				//'	</div>' +
 				'</div>' +
 				'<div class="PrinterArea">	' +
 				'</div>' +
@@ -252,6 +287,17 @@ function FilterModelList(keyword) {
 			$(OneItem).removeClass('ModelCheckBoxSelected');
 	}
 
+	const $SidebarVendors = $('#SidebarVendors');
+	let SidebarHTML = "";
+	$(`.OneVendorBlock`).each((i, el)=>{
+		UpdateVendorCheckbox(el.getAttribute("vendor"));
+		SidebarHTML +=`<div class="SidebarItem" onclick="scrollToVendor(this.textContent)">${el.getAttribute('vendor')}</div>`;
+	});
+	$SidebarVendors.html(SidebarHTML)
+
+	const $content = $('#Content');
+	$content.css("padding-right",  $content[0].scrollHeight > $content[0].clientHeight ? "10px" : "20px");
+
 	// let AlreadySelect=$(".ModelCheckBoxSelected");
 	// let nSelect=AlreadySelect.length;
 	// if(nSelect==0)
@@ -287,9 +333,16 @@ function CreatePrinterBlock(OneModel)
 	'<div class="PImg">'+
 	'<img class="ModelThumbnail" src="' + OneModel['cover'] + '" />'+
 	'</div>'+
+	'<div class="PrinterInfoMark">?</div>'+
+	'<div class="PrinterInfo">'+
+	//'	<div class="title trans">Print volume</div>'+
+	//'	<div class="value">' + OneModel['printable_height'] + '</div>'+
+	'	<div class="title trans">Nozzle</div>'+
+	'	<div class="value">' + OneModel['nozzle_diameter'].replaceAll(";", " · ") + '</div>'+
+	'</div>'+
 	'<div style="display: flex;">'+
 	'	<div class="ModelCheckBox" vendor="' +vendor+ '" model="'+OneModel['model']+'"></div>'+
-	'	<div class="PName"><p>'+ vendorName +'</p><p>' + modelName +'</p></div>'+
+	'	<div class="PName">'+ modelName +'</div>'+ // ><p>'+ vendorName +'</p>
 	'</div>'+
 	'</div>';
 }
@@ -313,6 +366,30 @@ function SelectPrinterNone( sVendor )
 	});
 }
 
+function ChooseVendor(sVendor) {
+	const $cbs = $(`.OneVendorBlock[vendor='${sVendor}'] .ModelCheckBox`);
+	const sel  = $cbs.length && $cbs.not('.ModelCheckBoxSelected').length;
+
+	sel ? $cbs.addClass('ModelCheckBoxSelected')
+		: $cbs.removeClass('ModelCheckBoxSelected');
+
+	$cbs.each((i, el)=>{SetModelSelect(sVendor, el.getAttribute('model'), sel)});
+}
+
+function UpdateVendorCheckbox(sVendor) {
+	const $vb  = $(`.OneVendorBlock[vendor='${sVendor}']`);
+	const $cbs = $vb.find(`.ModelCheckBox`);
+	const $vcb = $vb.find(`.VendorCheckbox`);
+
+	const selCount = $cbs.filter('.ModelCheckBoxSelected').length;
+	const allSel   = selCount === $cbs.length && selCount > 0;
+	const nonSel   = selCount === 0;
+
+	$vcb.prop({checked: allSel , indeterminate: !allSel && !nonSel});
+
+	$vb.find(".modelCount").text(selCount + " / " + $cbs.length);
+}
+
 function OnExitFilter() {
 
 	let nTotal = 0;
@@ -430,6 +507,16 @@ function ConfirmSelect()
 	}
 }
 
+function CreateNewPrinter()
+{
+	var tSend={};
+	tSend['sequence_id']=Math.round(new Date() / 1000);
+	tSend['command']="user_guide_create_printer";
+	tSend['data']={};
+		
+	SendWXMessage( JSON.stringify(tSend) );			
+}
+
 
 
 
diff --git a/resources/web/guide/24/index.html b/resources/web/guide/24/index.html
index a658cdd9af..072c8dddb2 100644
--- a/resources/web/guide/24/index.html
+++ b/resources/web/guide/24/index.html
@@ -20,16 +20,34 @@
 <div id="Title">
 	<div class="trans" tid="t10">Printer Selection</div>
 </div>
-<div class="wrap">
-	<div class="search">
-		<input type="text" class="searchTerm" placeholder="Device keyword" oninput="textInput(this)">
-		<svg id="search-icon" width="16px" height="16px"> <!-- ORCA -->
-			<path d="M6.5,2A4.505,4.505,0,0,0,2,6.5a.5.5,0,0,0,1,0A3.5,3.5,0,0,1,6.5,3a.5.5,0,0,0,0-1Z"/>
-			<path d="M14.854,14.146l-3.423-3.422a6.518,6.518,0,1,0-.707.707l3.422,3.423a.5.5,0,0,0,.708-.708ZM1,6.5A5.5,5.5,0,1,1,6.5,12,5.507,5.507,0,0,1,1,6.5Z"/>
-		</svg>
+
+<div id="SidebarContainer">
+	<div id="Sidebar" class="thin-scroll">
+		<div class="title">Vendors</div>
+		<div class="area" id="SidebarVendors">
+			<!-- <div class="SidebarItem"></div> -->
+		</div>
+	</div>
+	<div class="back" onclick="document.getElementById('SidebarContainer').setAttribute('open', '0')"></div>
+</div>
+<div class="SidebarBtn ButtonStyleRegular" onclick="document.getElementById('SidebarContainer').setAttribute('open', '1')">
+	<div class="icon16"></div>
+</div>
+
+<div class="search" hasvalue="0">
+	<div class="search-icon icon16"></div>
+	<input type="text" class="searchTerm" placeholder=" " oninput="textInput(this)">
+	<span class="search-placeholder trans">Search...</span>
+</div>
+<div class="LayoutSelector">
+	<div class="TabGroup">
+		<div class="TabButton" onclick="LayoutMode('compact-list')" ><div class="icon16"></div></div>
+		<div class="TabButton" onclick="LayoutMode('compact-cover')"><div class="icon16"></div></div>
+		<div class="TabButton" onclick="LayoutMode('large-cover')"  ><div class="icon16"></div></div>
 	</div>
 </div>
-<div id="Content"  class="ZScrol"s>
+
+<div id="Content"  class="thin-scroll">
 
 <!--<div class="OneVendorBlock" Vendor="BBL">	
 <div class="BlockBanner">
@@ -93,6 +111,7 @@
 	
 </div>
 <div id="AcceptArea">
+	<div class="ButtonStyleRegular ButtonTypeChoice trans"           id="CreateBtn"  onclick="CreateNewPrinter()">Create</div>
 	<div class="ButtonStyleConfirm ButtonTypeChoice trans" tid="t39" id="AcceptBtn"  onclick="ConfirmSelect()">Confirm</div>	
 	<div class="ButtonStyleRegular ButtonTypeChoice trans" tid="t38" id="PreBtn"  onclick="CancelSelect()">Cancel</div>
 </div>
@@ -111,21 +130,211 @@
 	
 </body>
 <script>
+	const SearchBox = document.querySelector('.searchTerm');
+
 	document.onkeydown = function (event) {
 		var e = event || window.event || arguments.callee.caller.arguments[0];
 
 		if (e.keyCode == 27)
 			ClosePage();
 
-		if (window.event) {
-			try { e.keyCode = 0; } catch (e) { }
-			e.returnValue = true;
+		// ORCA focus search bar on key input
+		// SearchBox not in focus && writable character && non modifier
+		if (document.activeElement != SearchBox && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+			SearchBox.focus();
 		}
+
+		// Close sidebar
+		document.getElementById('SidebarContainer').setAttribute('open', '0')
+
+		//if (window.event) {
+		//	try { e.keyCode = 0; } catch (e) { }
+		//	e.returnValue = true;
+		//}
 	};
 	let pModel = {};
 	let ModelNozzleSelected = {};
 	function textInput(obj) {
 		FilterModelList(obj.value);
 	}
+
+	const $content  = $('#Content');
+
+	// SNAPPY SCROLLING WITHOUT LAGS
+	const SNAP_DELAY			= 600;
+	const SNAP_DURATION			= 200;
+	const SNAP_CORR             = 8; // error correction / tolerance
+
+	let scrollTimer				= null;
+	let lastScrollTop			= 0;
+	let scrollDir				= 'down';
+	let isSnapping				= false;
+	let snapRafId				= null;
+	let lastSnapTarget			= null;
+	let waitingForUserScroll	= false;
+
+	function findSnap(cur, dir) {
+		if (lastSnapTarget !== null && Math.abs(cur - lastSnapTarget) < SNAP_CORR) return null;
+
+		const savedScroll = cur;
+
+		$content[0].scrollTop = 0; // Temporarily scroll to 0 so getBoundingClientRect can get absolute positions
+
+		let bcTop = el=>(el.getBoundingClientRect().top);
+
+		const contentTop = bcTop($content[0]);
+		const bannerH    = ($content.find('.BlockBanner')[0] || {}).offsetHeight || 0;
+
+		const firstCard  = $content.find('.PrinterBlock')[0];
+		const firstArea  = $content.find('.PrinterArea')[0];
+		const cardGap    = (firstCard && firstArea) ? (bcTop(firstCard) - bcTop(firstArea)) : 0;
+
+		const candidates = $content.find('.BlockBanner, .PrinterBlock').get();
+		if (dir === 'up') candidates.reverse();
+
+		let result = lastSeen = null;
+
+		for (const el of candidates) {
+			const snapTo = Math.round(
+				el.classList.contains('BlockBanner')
+					? (bcTop(el.closest('.OneVendorBlock')) - contentTop)
+					: Math.max(0, bcTop(el) - contentTop - bannerH - cardGap)
+			);
+			if (snapTo != lastSeen){
+				lastSeen = snapTo;
+				if (dir === 'down' && snapTo > cur + SNAP_CORR) { result = snapTo; break; }
+				if (dir === 'up'   && snapTo < cur - SNAP_CORR) { result = snapTo; break; }
+			}
+		}
+
+		$content[0].scrollTop = savedScroll; // Restore scroll position
+
+		return result;
+	}
+
+	function smoothScrollTo(target) {
+		if (snapRafId) {
+			cancelAnimationFrame(snapRafId);
+			snapRafId = null;
+		}
+
+		const el   = $content[0];
+		const from = el.scrollTop;
+		const dist = target - from;
+		const t0   = performance.now();
+		const ease = t => t < 0.5 ? 2*t*t : -1 + (4 - 2*t)*t;
+	
+		function onDone() {
+			el.scrollTop         = target;
+			lastScrollTop        = lastSnapTarget = target;
+			waitingForUserScroll = true;
+			clearTimeout(scrollTimer);
+			scrollTimer = null;
+			snapRafId   = null;
+			isSnapping  = false;
+		}
+
+		if (Math.abs(dist) < 2)
+			return onDone();
+
+		snapRafId = requestAnimationFrame(function step(now) {
+			const p = Math.min((now - t0) / SNAP_DURATION, 1);
+			el.scrollTop = from + dist * ease(p);
+			if (p < 1)
+				snapRafId = requestAnimationFrame(step);
+			else
+				onDone();
+		});
+	}
+
+	function armSnap() {
+		waitingForUserScroll = false;
+		lastSnapTarget       = null;
+	}
+
+	$content.on('scroll', function() {
+		if (isSnapping) return;
+
+		if      (this.scrollTop > lastScrollTop + 1) scrollDir = 'down';
+		else if (this.scrollTop < lastScrollTop - 1) scrollDir = 'up';
+		lastScrollTop = this.scrollTop;
+
+		if (waitingForUserScroll) return;
+
+		clearTimeout(scrollTimer);
+		scrollTimer = setTimeout(()=>{
+			if (isSnapping) return;
+
+			const target = findSnap($content[0].scrollTop, scrollDir);
+			if (target){
+				isSnapping = true;
+				smoothScrollTo(target);
+			}
+		}, SNAP_DELAY);
+	});
+
+	let touchY = 0;
+	$content[0].addEventListener('touchstart', e => {
+		touchY = e.touches[0].clientY;
+		armSnap();
+	}, { passive: true });
+
+	$content[0].addEventListener('touchmove', e => {
+		const dy = touchY - e.touches[0].clientY;
+		if (Math.abs(dy) > 3)
+			scrollDir = dy > 0 ? 'down' : 'up';
+	}, { passive: true });
+
+	// Re-arm snap system on user scroll
+	$content[0].addEventListener('wheel', armSnap, { passive: true });
+
+	// Re-arm on after scrollbar usage
+	$content[0].addEventListener('pointerdown', e => {
+		if (e.target === $content[0])
+			armSnap();
+	});
+
+	// Re-arm on keyboard scroll or focus changes
+	document.addEventListener('keydown', e => {
+		if (document.activeElement != SearchBox){
+			let scrollKeys = ['ArrowUp','ArrowDown','PageUp','PageDown',' '];
+			let hasFocus    = $content[0].contains(document.activeElement);
+			if(scrollKeys.includes(e.key) || (hasFocus && e.which == 9))
+				armSnap();
+		}
+	});
+
+	// ORCA unfocus search bar while scrolling and its content empty
+	$content[0].addEventListener("scroll", () => {
+		if (document.activeElement === SearchBox && SearchBox.value == "")
+			SearchBox.blur();
+	});
+
+	// LAYOUT SELECTOR
+	const LayoutSelector = document.querySelector('.LayoutSelector > .TabGroup');
+	const LayoutBtns     = Array.from(LayoutSelector.children);
+	const LayoutTypes    = ["compact-list","compact-cover","large-cover"];
+
+	function LayoutMode(value) {
+		if($content[0].getAttribute("layout") === value)
+			return;
+
+		// find current visible vendor and scroll to it after layout change
+		let target = null;
+		for (const el of $content.find('.OneVendorBlock')) {
+			if (el.getBoundingClientRect().bottom - $content[0].getBoundingClientRect().top >= -1) {
+				target = el.getAttribute("vendor");
+				break;
+			}
+		}
+
+		LayoutBtns.forEach(el => el.classList.remove('selected'));
+		LayoutBtns[LayoutTypes.indexOf(value)].classList.add('selected');
+		$content[0].setAttribute("layout", value);
+
+		if (target) scrollToVendor(target);
+	}
+
+	LayoutMode("large-cover");
 </script>
 </html>
diff --git a/resources/web/guide/css/common.css b/resources/web/guide/css/common.css
index b1bd1c2d72..8e6798dc38 100644
--- a/resources/web/guide/css/common.css
+++ b/resources/web/guide/css/common.css
@@ -137,16 +137,15 @@ label:has(input[type="checkbox"])>span{
 input[type="checkbox"] {
 	-webkit-appearance: none;
 	appearance: none;
-	background-color:#FFFFFF;
 	margin:0;
 	margin-right: 6px;
 	width: 1em;
 	height: 1em;
-	border: 0.1em solid #DBDBDB;
+	border: 0.1em solid var(--border-color);;
 	border-radius: 0.15em;
 	display: inline-flex;
 	place-content: center;
-	background-color:#FFFFFF;
+	background-color: var(--bg-color);;
 }
 
 input[type="checkbox"]::before {
@@ -155,16 +154,26 @@ input[type="checkbox"]::before {
 	height: 0.8em;
 	transform: scale(0);
 	box-shadow: inset 1em 1em #FFFFFF;
-	clip-path: polygon(7% 37%, 0 45%, 33% 78%, 100% 30%, 95% 21%, 33% 64%);
 }
 
-input[type="checkbox"]:checked {
-	border-color:#009688;
-	background-color:#009688;
+input[type="checkbox"]:is(:checked, :indeterminate) {
+	border-color:    var(--main-color);
+	background-color:var(--main-color);
+}
+
+input[type="checkbox"]:is(:checked, :indeterminate):hover {
+	border-color:    var(--main-color-hover);
+	background-color:var(--main-color-hover);
 }
 
 input[type="checkbox"]:checked::before {
-    transform: scale(1);
+	transform: scale(1);
+	clip-path: polygon(7% 37%, 0 45%, 33% 78%, 100% 30%, 95% 21%, 33% 64%);
+}
+
+input[type="checkbox"]:indeterminate::before {
+	transform: scale(1);
+	clip-path: polygon(7% 44%, 93% 44%, 93% 56%, 7% 56%);
 }
 
 /*----------------Light Mode-------------------*/
diff --git a/resources/web/guide/css/dark.css b/resources/web/guide/css/dark.css
index 63b0689e79..0cbb395bad 100644
--- a/resources/web/guide/css/dark.css
+++ b/resources/web/guide/css/dark.css
@@ -23,20 +23,6 @@ body
 	color: #009688;
 }
 
-.search>input[type=text]{
-	background-color:#2D2D31;
-}
-
-/*---Checkboxes ORCA---*/
-input[type=checkbox]{
-	background-color:#2D2D31;
-	border-color:#4A4A51;
-}
-
-input[type=checkbox]:checked{
-	background-color:#009688;
-}
-
 /*-------Text------*/
 
 .TextS1
diff --git a/resources/web/include/global.css b/resources/web/include/global.css
index 2b9d2da142..7448cfd249 100644
--- a/resources/web/include/global.css
+++ b/resources/web/include/global.css
@@ -63,6 +63,15 @@
 /*           ICONS            */
 /*////////////////////////////*/
 
+.icon16 {
+	-webkit-mask-image: var(--icon-url);
+	mask-image: var(--icon-url);
+	width:  16px;
+  	height: 16px;
+	background-color: var(--icon-color);
+	pointer-events: none;
+}
+
 :root {
 --icon-filter:
 	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round"><polygon points=".5 .5 5.5 7.5 5.5 13.5 9.5 15.5 9.5 7.5 14.5 .5 .5 .5"/><line x1="8.64" y1="4.5" x2="10.19" y2="2.34"/></g></svg>');
@@ -72,6 +81,14 @@
 	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round"><path d="M.76,7.32L4.91,2.82c.19-.21.46-.32.74-.32h8.86c.55,0,1,.45,1,1v9c0,.55-.45,1-1,1H5.64c-.28,0-.55-.12-.74-.32L.76,8.68c-.35-.38-.35-.97,0-1.35Z"/><line x1="12.5" y1="5.5" x2="7.5" y2="10.5"/><line x1="12.5" y1="10.5" x2="7.5" y2="5.5"/></g></svg>');
 --icon-combo-arrow:
 	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><polyline points="11.5 6.5 6.5 9.5 1.5 6.5" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round"/></svg>'); 
+--icon-sidebar:
+	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M14.5,15.5H1.5c-.55,0-1-.45-1-1V1.5C.5.95.95.5,1.5.5h13c.55,0,1,.45,1,1v13c0,.55-.45,1-1,1ZM6.5.5v15M2.5,3.5h2M2.5,6.5h2M2.5,9.5h2M2.5,12.5h2" style="fill:none;stroke:currentColor;stroke-linecap:square"/></svg>');
+--icon-layout-list:
+	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M.5,3.5h6M.5.5h6M.5,6.5h6M.5,9.5h6M.5,12.5h6M.5,15.5h6M9.5,3.5h6M9.5.5h6M9.5,6.5h6M9.5,9.5h6M9.5,12.5h6M9.5,15.5h6" style="fill:none; stroke:currentColor; stroke-linecap:square"/></svg>');
+--icon-layout-compact:
+	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M2.83,3.5h-1.67c-.37,0-.67-.3-.67-.67v-1.67c0-.37.3-.67.67-.67h1.67c.37,0,.67.3.67.67v1.67c0,.37-.3.67-.67.67ZM8.83,3.5h-1.67c-.37,0-.67-.3-.67-.67v-1.67c0-.37.3-.67.67-.67h1.67c.37,0,.67.3.67.67v1.67c0,.37-.3.67-.67.67ZM14.83,3.5h-1.67c-.37,0-.67-.3-.67-.67v-1.67c0-.37.3-.67.67-.67h1.67c.37,0,.67.3.67.67v1.67c0,.37-.3.67-.67.67ZM2.83,9.5h-1.67c-.37,0-.67-.3-.67-.67v-1.67c0-.37.3-.67.67-.67h1.67c.37,0,.67.3.67.67v1.67c0,.37-.3.67-.67.67ZM8.83,9.5h-1.67c-.37,0-.67-.3-.67-.67v-1.67c0-.37.3-.67.67-.67h1.67c.37,0,.67.3.67.67v1.67c0,.37-.3.67-.67.67ZM14.83,9.5h-1.67c-.37,0-.67-.3-.67-.67v-1.67c0-.37.3-.67.67-.67h1.67c.37,0,.67.3.67.67v1.67c0,.37-.3.67-.67.67ZM2.83,15.5h-1.67c-.37,0-.67-.3-.67-.67v-1.67c0-.37.3-.67.67-.67h1.67c.37,0,.67.3.67.67v1.67c0,.37-.3.67-.67.67ZM8.83,15.5h-1.67c-.37,0-.67-.3-.67-.67v-1.67c0-.37.3-.67.67-.67h1.67c.37,0,.67.3.67.67v1.67c0,.37-.3.67-.67.67ZM14.83,15.5h-1.67c-.37,0-.67-.3-.67-.67v-1.67c0-.37.3-.67.67-.67h1.67c.37,0,.67.3.67.67v1.67c0,.37-.3.67-.67.67Z" style="fill:none; stroke:currentColor"/></svg>');
+--icon-layout-cover:
+	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M5.5,6.5H1.5c-.55,0-1-.45-1-1V1.5C.5.95.95.5,1.5.5h4c.55,0,1,.45,1,1v4c0,.55-.45,1-1,1ZM15.5,5.5V1.5c0-.55-.45-1-1-1h-4c-.55,0-1,.45-1,1v4c0,.55.45,1,1,1h4c.55,0,1-.45,1-1ZM5.5,15.5H1.5c-.55,0-1-.45-1-1v-4c0-.55.45-1,1-1h4c.55,0,1,.45,1,1v4c0,.55-.45,1-1,1ZM15.5,14.5v-4c0-.55-.45-1-1-1h-4c-.55,0-1,.45-1,1v4c0,.55.45,1,1,1h4c.55,0,1-.45,1-1Z" style="fill:none; stroke:currentColor"/></svg>');
 }
 
 /*////////////////////////////*/
@@ -190,10 +207,7 @@ OPTIONS
 /*/// SCROLL BARS ///*/
 .thin-scroll::-webkit-scrollbar {
 	width: 10px;
-	height: 10px
-}
-
-.thin-scroll::-webkit-scrollbar-track {
+	height: 10px;
 	background:  var(--bg-color-alt);
 }
 
diff --git a/src/slic3r/GUI/WebGuideDialog.cpp b/src/slic3r/GUI/WebGuideDialog.cpp
index 01ec0d78c5..575748fce0 100644
--- a/src/slic3r/GUI/WebGuideDialog.cpp
+++ b/src/slic3r/GUI/WebGuideDialog.cpp
@@ -526,6 +526,11 @@ void GuideFrame::OnScriptMessage(wxWebViewEvent &evt)
             if (InstallNetplugin)
                 GUI::wxGetApp().CallAfter([] { GUI::wxGetApp().ShowDownNetPluginDlg(); });
         }
+        else if (strCmd == "user_guide_create_printer") {
+            this->EndModal(wxID_CANCEL);
+            this->Close();
+            GUI::wxGetApp().CallAfter([this] {GUI::wxGetApp().sidebar().create_printer_preset();});
+        }
         else if (strCmd == "user_guide_cancel") {
             this->EndModal(wxID_CANCEL);
             this->Close();