diff --git a/resources/web/guide/22/22.css b/resources/web/guide/22/22.css
index 51b3ec6e52..0a542a4645 100644
--- a/resources/web/guide/22/22.css
+++ b/resources/web/guide/22/22.css
@@ -32,6 +32,7 @@ input
 
 #ItemSelectArea
 {
+	flex: 0 0 40px;
 	height:40px;
 	border-top: 1px solid #009688;
 	display: flex;
@@ -46,7 +47,7 @@ input
 
 #ItemBlockArea
 {
-	flex: 1;
+	flex: 1 0 236px;
 	display:flex;
 	overflow-x:auto;
 	flex-wrap:wrap;
@@ -59,7 +60,7 @@ input
 
 .MItem
 {
-	width: 220px;
+	min-width: 220px;
 	height: 32px;
 }
 
diff --git a/resources/web/guide/22/index.html b/resources/web/guide/22/index.html
index 0b0bd54739..6e379d2a0b 100644
--- a/resources/web/guide/22/index.html
+++ b/resources/web/guide/22/index.html
@@ -19,7 +19,7 @@
 <div id="Title">
 	<div class="trans" tid="t14">Filament Selection</div>
 </div>
-<div id="Content">
+<div id="Content" class="ZScrol">
 
 <div id="MachineList" class="ChooseBlock">
 	<div class="CName"><span class="trans" tid="t15">printer</span>：</div>
@@ -33,7 +33,15 @@
 	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>	
 	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>
 	<div><input type="checkbox" />Bambulab BBL-3DP-001-V5-normal</div>
-	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>	-->		
+	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>
+	<div><input type="checkbox" />Bambulab BBL-3DP-001-V5-normal</div>
+	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>		
+	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>
+	<div><input type="checkbox" />Bambulab BBL-3DP-001-V5-normal</div>
+	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>	
+	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>
+	<div><input type="checkbox" />Bambulab BBL-3DP-001-V5-normal</div>
+	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>	-->	
 	</div>
 </div>	
 	
@@ -46,7 +54,13 @@
 	<div><input type="checkbox" />ABS</div>
 	<div><input type="checkbox" />TPU</div>	
 	<div><input type="checkbox" />PA6+CF</div>
-	<div><input type="checkbox" />N/A</div>-->		
+	<div><input type="checkbox" />N/A</div>	
+	<div><input type="checkbox" filatype="PLA" />PLA</div>
+	<div><input type="checkbox" />PET</div>	
+	<div><input type="checkbox" />ABS</div>
+	<div><input type="checkbox" />TPU</div>	
+	<div><input type="checkbox" />PA6+CF</div>
+	<div><input type="checkbox" />N/A</div>	-->		
 	</div>
 </div>
 	
@@ -58,7 +72,12 @@
 	<div><input type="checkbox" />BBL</div>	
 	<div><input type="checkbox" />eSUN</div>
 	<div><input type="checkbox" />Kexcelled</div>	
-	<div><input type="checkbox" />Polymaker</div>-->
+	<div><input type="checkbox" />Polymaker</div>
+	<div><input type="checkbox" vendor="Unknow" />Unknown</div>
+	<div><input type="checkbox" />BBL</div>	
+	<div><input type="checkbox" />eSUN</div>
+	<div><input type="checkbox" />Kexcelled</div>	
+	<div><input type="checkbox" />Polymaker</div>-->		
     </div>
 </div>
 
diff --git a/resources/web/guide/23/23.css b/resources/web/guide/23/23.css
index 368b61e55e..de2ca9f3e8 100644
--- a/resources/web/guide/23/23.css
+++ b/resources/web/guide/23/23.css
@@ -32,6 +32,7 @@ input
 
 #ItemSelectArea
 {
+	flex: 0 0 40px;
 	height:40px;
 	border-top: 1px solid #009688;
 	display: flex;
@@ -46,7 +47,6 @@ input
 
 #ItemBlockArea
 {
-	flex: 1;
 	display:flex;
 	overflow-x:auto;
 	flex-wrap:wrap;
@@ -55,11 +55,13 @@ input
 	align-items: flex-start;
 	align-content:flex-start;
 	line-height: 32px;
+	height: 100%;
+	flex:1 0 236px;
 }
 
 .MItem
 {
-	width: 220px;
+	min-width: 220px;
 	height: 32px;
 }
 
@@ -111,3 +113,96 @@ input
 	display: flex;
 	justify-content:space-around;
 }
+
+#SystemFilamentsArea
+{
+	display: none;
+	flex-direction: column;
+}
+
+#CFilament_Btn_Area
+{
+	display: flex;
+	align-items: center;
+	height: 30px;
+}
+
+#Title
+{
+	margin: 0px 40px;
+	border-bottom: 1px solid #000;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
+#Title div
+{
+	cursor: pointer;
+	font-size: 24px;
+}
+
+#Title div.TitleSelected
+{
+	height: calc(100% - 6px);
+	display: flex;
+	align-items: center;
+	border-bottom: 6px solid #00AE42;
+}
+
+#Title div.TitleUnselected
+{
+	height: 100%;
+	display: flex;
+	align-items: center;
+	color: #000;
+}
+
+#CustomFilamentsArea
+{
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+#CFilament_List
+{
+	display:flex;
+	overflow-x:auto;
+	flex-wrap:wrap;
+	flex-direction: column;
+	justify-content:flex-start;
+	align-items: flex-start;
+	align-content:flex-start;
+	line-height: 32px;
+
+	height: 100%;
+}
+
+.CFilament_Item
+{
+	display: flex;
+	align-items: center;
+	margin-right: 30px;
+}
+
+.CFilament_Name
+{
+	width: 220px;
+	overflow: hidden;
+    white-space: nowrap; /* ?????? */
+    text-overflow: ellipsis; /* ????????? */
+}
+
+.CFilament_EditBtn
+{
+	cursor: pointer;
+	width: 20px;
+	height: 20px;
+}
+
+.CFilament_EditBtn:hover
+{
+	
+}
\ No newline at end of file
diff --git a/resources/web/guide/23/index.html b/resources/web/guide/23/index.html
index 84d6206481..30a6ef989d 100644
--- a/resources/web/guide/23/index.html
+++ b/resources/web/guide/23/index.html
@@ -7,7 +7,6 @@
 <link rel="stylesheet" type="text/css" href="../css/common.css" />	
 <link rel="stylesheet" type="text/css" href="23.css" />
 <link rel="stylesheet" type="text/css" href="../css/dark.css" />	
-<script type="text/javascript" src="test.js"></script>
 <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
 <script type="text/javascript" src="../js/json2.js"></script>	
 <script type="text/javascript" src="../../data/text.js"></script>	
@@ -17,10 +16,12 @@
 </head>
 <body onLoad="OnInit()">
 <div id="Title">
-	<div class="trans" tid="t14">Filament Selection</div>
+	<div id="SystemFilamentBtn" class="TitleSelected trans" tid="t109" onClick="OnSelectMenu(1)">System Filaments</div>
+	<div id="CustomFilamentBtn" class="TitleUnselected trans" tid="t110" onClick="OnSelectMenu(2)">Custom Filaments</div>
 </div>
-<div id="Content">
-
+<div id="Content" class="ZScrol">
+	
+<div id="SystemFilamentsArea">
 <div id="MachineList" class="ChooseBlock">
 	<div class="CName"><span class="trans" tid="t15">printer</span>：</div>
 	<div class="CValues">
@@ -32,8 +33,7 @@
 	<div><input type="checkbox" />Bambulab BBL-3DP-001-V5-normal</div>
 	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>	
 	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>
-	<div><input type="checkbox" />Bambulab BBL-3DP-001-V5-normal</div>
-	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>-->			
+	<div><input type="checkbox" />Bambulab BBL-3DP-001-V5-normal</div>	-->		
 	</div>
 </div>	
 	
@@ -46,7 +46,7 @@
 	<div><input type="checkbox" />ABS</div>
 	<div><input type="checkbox" />TPU</div>	
 	<div><input type="checkbox" />PA6+CF</div>
-	<div><input type="checkbox" />N/A</div>-->		
+	<div><input type="checkbox" />N/A</div>	-->			
 	</div>
 </div>
 	
@@ -58,7 +58,8 @@
 	<div><input type="checkbox" />BBL</div>	
 	<div><input type="checkbox" />eSUN</div>
 	<div><input type="checkbox" />Kexcelled</div>	
-	<div><input type="checkbox" />Polymaker</div>-->
+	<div><input type="checkbox" />Polymaker</div>
+	<div><input type="checkbox" vendor="Unknow" />Unknown</div>	-->
     </div>
 </div>
 
@@ -126,6 +127,148 @@
 	<div class="MItem"><input type="checkbox" />Geneic TPU83</div>	
 	<div class="MItem"><input type="checkbox" />Geneic TPU87</div>	-->
 </div>
+</div>
+	
+	
+<div id="CustomFilamentsArea">
+	<div id="CFilament_Btn_Area">
+		<div class="SmallBtn_Green trans" tid="t111" onClick="OnClickCustomFilamentAdd()">Create New</div>
+	</div>
+    <div id="CFilament_List" class="ZScrol">
+<!--		<div class="CFilament_Item">
+			<a  class="CFilament_Name" title="New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img onClick="CFEdit()" class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>		
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>	
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>	
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>	
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>	
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>	
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>	
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>	
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>	
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>	
+		<div class="CFilament_Item">
+			<a  class="CFilament_Name">New Custom XXXXXXXXXXXXXXXXXXXXXXXXXX</a><img class="CFilament_EditBtn" src="../../image/edit.svg" />
+		</div>	-->	
+	</div>
+</div>
 	
 </div>
 <div id="AcceptArea">