From 7c97035f71196f6ba2b9e3eeb300de601e277129 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 24 Feb 2022 22:19:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=E5=8F=AF?=
 =?UTF-8?q?=E9=80=89=E8=BE=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/resources/db/migration/V32__1.8.sql  |  15 +-
 frontend/public/board/blue_1.svg              | 158 ++++--------------
 frontend/public/board/blue_2.svg              |  66 ++++----
 frontend/public/board/blue_3.svg              |  49 ++++--
 frontend/public/board/blue_4.svg              | 140 ++--------------
 frontend/public/board/blue_5.svg              | 155 ++---------------
 frontend/public/board/blue_6.svg              |  45 +++++
 frontend/public/board/blue_7.svg              |  25 +++
 frontend/public/board/blue_8.svg              |  53 ++++++
 frontend/public/board/blue_9.svg              |  39 +++++
 frontend/public/board/dark_1.svg              |  21 +++
 11 files changed, 309 insertions(+), 457 deletions(-)
 create mode 100644 frontend/public/board/blue_6.svg
 create mode 100644 frontend/public/board/blue_7.svg
 create mode 100644 frontend/public/board/blue_8.svg
 create mode 100644 frontend/public/board/blue_9.svg
 create mode 100644 frontend/public/board/dark_1.svg

diff --git a/backend/src/main/resources/db/migration/V32__1.8.sql b/backend/src/main/resources/db/migration/V32__1.8.sql
index 86b5d03862..3ffa33fe71 100644
--- a/backend/src/main/resources/db/migration/V32__1.8.sql
+++ b/backend/src/main/resources/db/migration/V32__1.8.sql
@@ -342,11 +342,16 @@ CREATE TABLE `sys_background_image` (
 -- Records of sys_background_image
 -- ----------------------------
 BEGIN;
-INSERT INTO `sys_background_image` VALUES ('blue_1', '边框1', '蓝色调', '', NULL, NULL, NULL, 'img/board', 'board/blue_1.svg');
-INSERT INTO `sys_background_image` VALUES ('blue_2', '边框2', '蓝色调', NULL, NULL, NULL, NULL, 'img/board', 'board/blue_2.svg');
-INSERT INTO `sys_background_image` VALUES ('blue_3', '边框3', '蓝色调', NULL, NULL, NULL, NULL, 'img/board', 'board/blue_3.svg');
-INSERT INTO `sys_background_image` VALUES ('blue_4', '边框4', '蓝色调', NULL, NULL, NULL, NULL, 'img/board', 'board/blue_4.svg');
-INSERT INTO `sys_background_image` VALUES ('blue_5', '边框5', '蓝色调', NULL, NULL, NULL, NULL, 'img/board', 'board/blue_5.svg');
+INSERT INTO `sys_background_image` (`id`, `name`, `classification`, `content`, `remark`, `sort`, `upload_time`, `base_url`, `url`) VALUES ('blue_1', '边框1', '蓝色调', '', NULL, NULL, NULL, 'img/board', 'board/blue_1.svg');
+INSERT INTO `sys_background_image` (`id`, `name`, `classification`, `content`, `remark`, `sort`, `upload_time`, `base_url`, `url`) VALUES ('blue_2', '边框2', '蓝色调', NULL, NULL, NULL, NULL, 'img/board', 'board/blue_2.svg');
+INSERT INTO `sys_background_image` (`id`, `name`, `classification`, `content`, `remark`, `sort`, `upload_time`, `base_url`, `url`) VALUES ('blue_3', '边框3', '蓝色调', NULL, NULL, NULL, NULL, 'img/board', 'board/blue_3.svg');
+INSERT INTO `sys_background_image` (`id`, `name`, `classification`, `content`, `remark`, `sort`, `upload_time`, `base_url`, `url`) VALUES ('blue_4', '边框4', '蓝色调', NULL, NULL, NULL, NULL, 'img/board', 'board/blue_4.svg');
+INSERT INTO `sys_background_image` (`id`, `name`, `classification`, `content`, `remark`, `sort`, `upload_time`, `base_url`, `url`) VALUES ('blue_5', '边框5', '蓝色调', NULL, NULL, NULL, NULL, 'img/board', 'board/blue_5.svg');
+INSERT INTO `sys_background_image` (`id`, `name`, `classification`, `content`, `remark`, `sort`, `upload_time`, `base_url`, `url`) VALUES ('blue_6', '边框6', '蓝色调', NULL, NULL, NULL, NULL, 'img/board', 'board/blue_6.svg');
+INSERT INTO `sys_background_image` (`id`, `name`, `classification`, `content`, `remark`, `sort`, `upload_time`, `base_url`, `url`) VALUES ('blue_7', '边框7', '蓝色调', NULL, NULL, NULL, NULL, 'img/board', 'board/blue_7.svg');
+INSERT INTO `sys_background_image` (`id`, `name`, `classification`, `content`, `remark`, `sort`, `upload_time`, `base_url`, `url`) VALUES ('blue_8', '边框8', '蓝色调', NULL, NULL, NULL, NULL, 'img/board', 'board/blue_8.svg');
+INSERT INTO `sys_background_image` (`id`, `name`, `classification`, `content`, `remark`, `sort`, `upload_time`, `base_url`, `url`) VALUES ('blue_9', '边框9', '蓝色调', NULL, NULL, NULL, NULL, 'img/board', 'board/blue_9.svg');
+INSERT INTO `sys_background_image` (`id`, `name`, `classification`, `content`, `remark`, `sort`, `upload_time`, `base_url`, `url`) VALUES ('dark_1', '边框1', '深色调', NULL, NULL, NULL, NULL, 'img/board', 'board/dark_1.svg');
 COMMIT;
 
 SET FOREIGN_KEY_CHECKS = 1;
diff --git a/frontend/public/board/blue_1.svg b/frontend/public/board/blue_1.svg
index 15cfcc7946..4793d1eb6f 100644
--- a/frontend/public/board/blue_1.svg
+++ b/frontend/public/board/blue_1.svg
@@ -1,151 +1,55 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none meet"
-	 viewBox="0 0 454.2 286.6" style="enable-background:new 0 0 454.2 286.6;" xml:space="preserve">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 480 300" style="enable-background:new 0 0 480 300;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#0B101E;}
-	.st1{opacity:0.1;fill:#006CE2;}
-	.st2{fill:none;stroke:#31ECFF;stroke-width:0.6677;stroke-miterlimit:10;}
-	.st3{fill:#31ECFF;}
-	.st4{opacity:0.75;fill:#31ECFF;}
-	.st5{opacity:0.5;fill:#31ECFF;}
-	.st6{opacity:0.25;fill:#31ECFF;}
-	.st7{opacity:0.25;fill:#006CE2;}
+	.st0{fill:#1094E5;}
+	.st1{opacity:0.75;}
+	.st2{opacity:0.5;}
+	.st3{opacity:0.25;}
 </style>
-<rect x="2743.8" y="-1694.6" class="st0" width="1920" height="1080"/>
 <g>
-	<polygon class="st1" points="63,-472.9 -388.8,-472.9 -388.8,-756.4 -353.3,-756.4 -312.8,-712.4 63,-712.4 	"/>
-	<polygon class="st1" points="-345.9,-756.4 -309,-717 63,-717 63,-756.4 	"/>
-	<polygon class="st2" points="63,-472.9 -388.8,-472.9 -388.8,-756.4 -353.3,-756.4 -312.8,-712.4 63,-712.4 	"/>
-	<polygon class="st2" points="-345.9,-756.4 -309,-717 63,-717 63,-756.4 	"/>
 	<g>
-		<rect x="52.2" y="-474.1" class="st3" width="12" height="2.4"/>
-		
-			<rect x="57" y="-478.9" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -414.7073 -540.6516)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="-394.8" y="-478.9" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -866.4924 -88.8664)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="-390" y="-474.1" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -768.0378 -945.7705)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="56.6" y="-752.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 814.0578 -688.874)" class="st3" width="12" height="2.4"/>
-		<rect x="51.8" y="-757.4" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="-389.7" y="-757.4" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -767.3794 -1512.5201)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="-394.5" y="-752.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 362.9821 -1139.9497)" class="st3" width="12" height="2.4"/>
+		<path class="st0" d="M480.9,299.5H0.6V0.9h353l0.3,0.2l22.2,16.8h104.8V299.5z M2.3,297.8h476.9V19.6H375.6L353,2.6H2.3V297.8z"/>
 	</g>
 </g>
 <g>
-	<polygon class="st1" points="84.6,-1179.5 -367.2,-1179.5 -367.2,-1447.9 -352.5,-1463 84.6,-1463 	"/>
-	<polygon class="st2" points="84.6,-1179.5 -367.2,-1179.5 -367.2,-1447.9 -352.5,-1463 84.6,-1463 	"/>
-	<polyline class="st2" points="-367.2,-1419 63.9,-1419 84.6,-1434.2 	"/>
-	<polygon class="st3" points="20,-1421.6 12,-1421.6 24.3,-1431.5 32.3,-1431.5 	"/>
-	<polygon class="st4" points="34.1,-1421.6 26.1,-1421.6 38.4,-1431.5 46.4,-1431.5 	"/>
-	<polygon class="st5" points="48.2,-1421.6 40.2,-1421.6 52.5,-1431.5 60.5,-1431.5 	"/>
-	<polygon class="st6" points="62.3,-1421.6 54.3,-1421.6 66.6,-1431.5 74.6,-1431.5 	"/>
-	<polygon class="st3" points="-367.5,-1450.9 -367.5,-1463 -355.9,-1463 	"/>
+	<g>
+		<rect x="466.9" y="297.1" class="st0" width="14.7" height="2.9"/>
+	</g>
+	<g>
+		
+			<rect x="472.8" y="291.2" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 772.8039 -187.5366)" class="st0" width="14.7" height="2.9"/>
+	</g>
 </g>
 <g>
-	<polygon class="st1" points="15.6,-844.6 -436.1,-844.6 -436.1,-1128.1 -110.9,-1128.1 -88.4,-1111 15.6,-1111 	"/>
-	<polygon class="st2" points="15.6,-844.6 -436.1,-844.6 -436.1,-1128.1 -110.9,-1128.1 -88.4,-1111 15.6,-1111 	"/>
-	<g>
-		<rect x="4.9" y="-845.7" class="st3" width="12" height="2.4"/>
-		
-			<rect x="9.7" y="-850.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -833.7073 -864.9849)" class="st3" width="12" height="2.4"/>
-	</g>
 	<g>
 		
-			<rect x="-442.1" y="-850.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -1285.4924 -413.1997)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="-437.3" y="-845.7" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -862.7045 -1689.1039)" class="st3" width="12" height="2.4"/>
+			<rect x="-5.9" y="291.3" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 294.2621 291.3384)" class="st0" width="14.7" height="2.9"/>
 	</g>
 	<g>
-		
-			<rect x="-437" y="-1129.1" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -862.0461 -2255.8535)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="-441.8" y="-1124.3" transform="matrix(6.123234e-17 -1 1 6.123234e-17 687.3154 -1558.9497)" class="st3" width="12" height="2.4"/>
+		<rect y="297.1" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 14.7328 597.0763)" class="st0" width="14.7" height="2.9"/>
 	</g>
-	<polygon class="st3" points="-54.9,-1114.3 -76.3,-1114.3 -89.6,-1124.2 -68.2,-1124.2 	"/>
-	<polygon class="st4" points="-28.8,-1114.3 -47.5,-1114.3 -60.8,-1124.2 -42.1,-1124.2 	"/>
-	<polygon class="st5" points="-5.4,-1114.3 -21.4,-1114.3 -34.7,-1124.2 -18.7,-1124.2 	"/>
-	<polygon class="st6" points="15.4,-1114.3 2,-1114.3 -11.2,-1124.2 15.4,-1124.2 	"/>
-	<rect x="-436.1" y="-1081.9" class="st3" width="451.8" height="1.8"/>
 </g>
 <g>
-	<polygon class="st1" points="2182.7,-1069.2 1731,-1069.2 1731,-1337.6 1745.7,-1352.8 2182.7,-1352.8 	"/>
-	<polygon class="st2" points="2182.7,-1069.2 1731,-1069.2 1731,-1337.6 1745.7,-1352.8 2182.7,-1352.8 	"/>
-	<polyline class="st2" points="1731,-1308.7 2162.1,-1308.7 2182.7,-1323.9 	"/>
-	<polygon class="st3" points="2118.2,-1311.3 2110.2,-1311.3 2122.5,-1321.3 2130.5,-1321.3 	"/>
-	<polygon class="st4" points="2132.3,-1311.3 2124.3,-1311.3 2136.6,-1321.3 2144.6,-1321.3 	"/>
-	<polygon class="st5" points="2146.4,-1311.3 2138.4,-1311.3 2150.7,-1321.3 2158.7,-1321.3 	"/>
-	<polygon class="st6" points="2160.5,-1311.3 2152.4,-1311.3 2164.8,-1321.3 2172.8,-1321.3 	"/>
-	<polygon class="st3" points="1730.7,-1340.6 1730.7,-1352.8 1742.3,-1352.8 	"/>
+	<g>
+		
+			<rect x="0" y="0.1" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 14.7328 3.2131)" class="st0" width="14.7" height="2.9"/>
+	</g>
+	<g>
+		<rect x="-5.9" y="6" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -6.0492 8.9729)" class="st0" width="14.7" height="2.9"/>
+	</g>
 </g>
 <g>
-	<polygon class="st1" points="2182.6,-750.6 1730.8,-750.6 1730.8,-1034.2 2056,-1034.2 2078.6,-1017.1 2182.6,-1017.1 	"/>
-	<polygon class="st2" points="2182.6,-750.6 1730.8,-750.6 1730.8,-1034.2 2056,-1034.2 2078.6,-1017.1 2182.6,-1017.1 	"/>
-	<g>
-		<rect x="2171.8" y="-751.8" class="st3" width="12" height="2.4"/>
-		
-			<rect x="2176.6" y="-756.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 1427.1624 -2938.0291)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="1724.8" y="-756.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 975.3772 -2486.2439)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="1729.6" y="-751.8" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 3471.2095 -1501.2784)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="1730" y="-1035.2" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 3471.8679 -2068.0281)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="1725.2" y="-1030.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 2760.3596 701.9199)" class="st3" width="12" height="2.4"/>
-	</g>
-	<polygon class="st3" points="2112,-1020.3 2090.6,-1020.3 2077.4,-1030.3 2098.7,-1030.3 	"/>
-	<polygon class="st4" points="2138.1,-1020.3 2119.4,-1020.3 2106.2,-1030.3 2124.9,-1030.3 	"/>
-	<polygon class="st5" points="2161.6,-1020.3 2145.5,-1020.3 2132.3,-1030.3 2148.3,-1030.3 	"/>
-	<polygon class="st6" points="2182.3,-1020.3 2169,-1020.3 2155.7,-1030.3 2182.3,-1030.3 	"/>
-	<rect x="1730.8" y="-988" class="st3" width="451.8" height="1.8"/>
+	<polygon class="st0" points="409.2,15.9 387.8,15.9 374.5,5.9 395.9,5.9 	"/>
 </g>
-<g>
-	<polygon class="st1" points="1682.5,-750.7 850.3,-750.7 850.3,-1034.3 1555.9,-1034.3 1578.5,-1017.2 1682.5,-1017.2 	"/>
-	<polygon class="st2" points="1682.5,-750.7 850.3,-750.7 850.3,-1034.3 1555.9,-1034.3 1578.5,-1017.2 1682.5,-1017.2 	"/>
-	<g>
-		<rect x="1671.7" y="-751.9" class="st3" width="12" height="2.4"/>
-		
-			<rect x="1676.5" y="-756.7" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 926.9837 -2438.0081)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="844.3" y="-756.7" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 94.7936 -1605.818)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="849.1" y="-751.9" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1710.2 -1501.436)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="849.4" y="-1035.3" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1710.8583 -2068.1858)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="844.7" y="-1030.5" transform="matrix(6.123234e-17 -1 1 6.123234e-17 1879.9337 -178.6637)" class="st3" width="12" height="2.4"/>
-	</g>
-	<polygon class="st3" points="1611.9,-1020.4 1590.5,-1020.4 1577.3,-1030.4 1598.6,-1030.4 	"/>
-	<polygon class="st4" points="1638,-1020.4 1619.3,-1020.4 1606.1,-1030.4 1624.8,-1030.4 	"/>
-	<polygon class="st5" points="1661.5,-1020.4 1645.4,-1020.4 1632.2,-1030.4 1648.2,-1030.4 	"/>
-	<polygon class="st6" points="1682.2,-1020.4 1668.9,-1020.4 1655.6,-1030.4 1682.2,-1030.4 	"/>
-	<rect x="850.2" y="-988.1" class="st3" width="832.3" height="1.8"/>
+<g class="st1">
+	<polygon class="st0" points="435.3,15.9 416.6,15.9 403.3,5.9 422,5.9 	"/>
 </g>
-<g>
-	<polygon class="st1" points="444.4,285.1 2.4,285.1 2.4,11.8 12.1,1.6 454.2,1.6 454.2,275 	"/>
-	<polygon class="st3" points="414.3,3.2 194.9,3.2 191.7,0 417.3,0 	"/>
-	<polyline class="st2" points="454.2,50 454.2,1.6 418.8,1.6 415.3,5.3 193.8,5.3 190.3,1.6 12.4,1.6 2.4,11.9 2.4,18.5 	"/>
-	
-		<rect x="25.5" y="283.4" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 314.9124 570.0419)" class="st3" width="263.9" height="3.2"/>
-	<polyline class="st2" points="2.4,249.9 2.4,285 444.2,285 454.2,274.7 454.2,268.2 	"/>
-	<polygon class="st7" points="454.2,50 454.2,1.6 418.8,1.6 415.3,5.3 193.8,5.3 190.2,1.6 12.1,1.6 2.4,11.8 2.4,50 	"/>
+<g class="st2">
+	<polygon class="st0" points="458.7,15.9 442.7,15.9 429.4,5.9 445.5,5.9 	"/>
+</g>
+<g class="st3">
+	<polygon class="st0" points="479.5,15.9 466.1,15.9 452.9,5.9 479.5,5.9 	"/>
 </g>
 </svg>
diff --git a/frontend/public/board/blue_2.svg b/frontend/public/board/blue_2.svg
index aaee759d4e..ec83ecbde8 100644
--- a/frontend/public/board/blue_2.svg
+++ b/frontend/public/board/blue_2.svg
@@ -1,40 +1,38 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-preserveAspectRatio="none meet"
-	 viewBox="0 0 454.2 285.7" style="enable-background:new 0 0 454.2 285.7;" xml:space="preserve">
+	 viewBox="0 0 480 300" style="enable-background:new 0 0 480 300;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#0B101E;}
-	.st1{opacity:0.1;fill:#006CE2;}
-	.st2{fill:none;stroke:#31ECFF;stroke-width:0.6677;stroke-miterlimit:10;}
-	.st3{fill:#31ECFF;}
-	.st4{opacity:0.75;fill:#31ECFF;}
-	.st5{opacity:0.5;fill:#31ECFF;}
-	.st6{opacity:0.25;fill:#31ECFF;}
-	.st7{opacity:0.25;fill:#006CE2;}
+	.st0{fill:#1094E5;}
+	.st1{opacity:0.8;fill:#1094E5;}
+	.st2{opacity:0.65;fill:#1094E5;}
+	.st3{opacity:0.35;fill:#1094E5;}
 </style>
-<g>
-	<polygon class="st1" points="453,284.6 1.2,284.6 1.2,1 326.4,1 348.9,18.1 453,18.1 	"/>
-	<polygon class="st2" points="453,284.6 1.2,284.6 1.2,1 326.4,1 348.9,18.1 453,18.1 	"/>
-	<g>
-		<rect x="442.2" y="283.4" class="st3" width="12" height="2.4"/>
-		
-			<rect x="447" y="278.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 732.7397 -173.2045)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="-4.8" y="278.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 280.9546 278.5807)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="0" y="283.4" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 11.9622 569.1235)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		<rect x="0.3" y="0" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 12.6206 2.3739)" class="st3" width="12" height="2.4"/>
-		<rect x="-4.5" y="4.8" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -4.465 7.4973)" class="st3" width="12" height="2.4"/>
-	</g>
-	<polygon class="st3" points="382.4,14.9 361,14.9 347.8,4.9 369.1,4.9 	"/>
-	<polygon class="st4" points="408.5,14.9 389.8,14.9 376.5,4.9 395.2,4.9 	"/>
-	<polygon class="st5" points="431.9,14.9 415.9,14.9 402.7,4.9 418.7,4.9 	"/>
-	<polygon class="st6" points="452.7,14.9 439.4,14.9 426.1,4.9 452.7,4.9 	"/>
-	<rect x="1.2" y="47.2" class="st3" width="451.8" height="1.8"/>
-</g>
+<polygon class="st0" points="0,86.7 1.1,87.8 1.1,92.3 0.6,92.7 0.6,134.6 0,134.6 "/>
+<polygon class="st0" points="4.7,31.2 4.7,26.6 8,23.5 8,28.1 "/>
+<polygon class="st1" points="4.7,35.9 4.7,32.2 8,29.1 8,32.8 "/>
+<polygon class="st2" points="4.7,39.7 4.7,37 8,33.9 8,36.6 "/>
+<polygon class="st3" points="4.7,42.8 4.7,40.9 8,37.8 8,44.1 "/>
+<polygon class="st0" points="472.9,7.5 466.1,7.5 458.7,0 345,0 340.5,0 21.3,0 13.9,7.5 7.2,7.5 0,14.6 0,84.9 1.4,86.3 1.4,62.2 
+	3.5,60.1 3.5,22.8 4.1,23.3 4.1,25.6 7.7,22.2 7.7,18.5 22,4.4 37.8,4.4 40.6,1.3 340.5,1.3 345,1.3 439.4,1.3 442.2,4.4 458,4.4 
+	472.3,18.5 472.3,22.2 475.9,25.6 475.9,23.3 476.5,22.8 476.5,60.1 478.6,62.2 478.6,86.3 480,84.9 480,14.6 "/>
+<polygon class="st0" points="480,86.7 478.9,87.8 478.9,92.3 479.4,92.7 479.4,134.6 480,134.6 "/>
+<polygon class="st0" points="475.3,31.2 475.3,26.6 472,23.5 472,28.1 "/>
+<polygon class="st1" points="475.3,35.9 475.3,32.2 472,29.1 472,32.8 "/>
+<polygon class="st2" points="475.3,39.7 475.3,37 472,33.9 472,36.6 "/>
+<polygon class="st3" points="475.3,42.8 475.3,40.9 472,37.8 472,44.1 "/>
+<polygon class="st0" points="480,213.3 478.9,212.2 478.9,207.7 479.4,207.3 479.4,165.4 480,165.4 "/>
+<polygon class="st0" points="475.3,268.8 475.3,273.4 472,276.5 472,271.9 "/>
+<polygon class="st1" points="475.3,264.1 475.3,267.8 472,270.9 472,267.2 "/>
+<polygon class="st2" points="475.3,260.3 475.3,263 472,266.1 472,263.4 "/>
+<polygon class="st3" points="475.3,257.2 475.3,259.1 472,262.2 472,255.9 "/>
+<polygon class="st0" points="478.6,213.7 478.6,237.8 476.5,239.9 476.5,277.2 475.9,276.7 475.9,274.4 472.3,277.8 472.3,281.5 
+	458,295.6 442.2,295.6 439.4,298.7 353.7,298.7 340.5,298.7 40.6,298.7 37.8,295.6 22,295.6 7.7,281.5 7.7,277.8 4.1,274.4 
+	4.1,276.7 3.5,277.2 3.5,239.9 1.4,237.8 1.4,213.7 0,215.1 0,285.4 7.2,292.5 13.9,292.5 21.3,300 340.5,300 353.7,300 458.7,300 
+	466.1,292.5 472.9,292.5 480,285.4 480,215.1 "/>
+<polygon class="st0" points="0,213.3 1.1,212.2 1.1,207.7 0.6,207.3 0.6,165.4 0,165.4 "/>
+<polygon class="st0" points="4.7,268.8 4.7,273.4 8,276.5 8,271.9 "/>
+<polygon class="st1" points="4.7,264.1 4.7,267.8 8,270.9 8,267.2 "/>
+<polygon class="st2" points="4.7,260.3 4.7,263 8,266.1 8,263.4 "/>
+<polygon class="st3" points="4.7,257.2 4.7,259.1 8,262.2 8,255.9 "/>
 </svg>
diff --git a/frontend/public/board/blue_3.svg b/frontend/public/board/blue_3.svg
index 0fb08e6c48..5ed0bafbe5 100644
--- a/frontend/public/board/blue_3.svg
+++ b/frontend/public/board/blue_3.svg
@@ -1,26 +1,39 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-preserveAspectRatio="none meet"
-	 viewBox="0 0 454.2 285.7" style="enable-background:new 0 0 454.2 285.7;" xml:space="preserve">
+	 viewBox="0 0 480 300" style="enable-background:new 0 0 480 300;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#0B101E;}
-	.st1{opacity:0.1;fill:#006CE2;}
-	.st2{fill:none;stroke:#31ECFF;stroke-width:0.6677;stroke-miterlimit:10;}
-	.st3{fill:#31ECFF;}
-	.st4{opacity:0.75;fill:#31ECFF;}
-	.st5{opacity:0.5;fill:#31ECFF;}
-	.st6{opacity:0.25;fill:#31ECFF;}
-	.st7{opacity:0.25;fill:#006CE2;}
+	.st0{fill:#1094E5;}
 </style>
 <g>
-	<polygon class="st1" points="453.1,284.6 1.3,284.6 1.3,16.3 16.1,1.1 453.1,1.1 	"/>
-	<polygon class="st2" points="453.1,284.6 1.3,284.6 1.3,16.3 16.1,1.1 453.1,1.1 	"/>
-	<polyline class="st2" points="1.3,45.2 432.5,45.2 453.1,30 	"/>
-	<polygon class="st3" points="388.6,42.5 380.5,42.5 392.9,32.6 400.9,32.6 	"/>
-	<polygon class="st4" points="402.6,42.5 394.6,42.5 407,32.6 415,32.6 	"/>
-	<polygon class="st5" points="416.7,42.5 408.7,42.5 421,32.6 429.1,32.6 	"/>
-	<polygon class="st6" points="430.8,42.5 422.8,42.5 435.1,32.6 443.2,32.6 	"/>
-	<polygon class="st3" points="1.1,13.3 1.1,1.1 12.7,1.1 	"/>
+	<g>
+		<polygon class="st0" points="426,3.4 206.6,3.4 203.4,0.2 429,0.2 		"/>
+	</g>
+	<g>
+		<polygon class="st0" points="479.9,50.1 479.3,50.1 479.3,2.1 430.6,2.1 427.2,5.8 205.4,5.8 201.8,2.1 10.8,2.1 1,12.2 1,15.8 
+			0.4,15.8 0.4,12 0.4,11.9 10.5,1.4 202.1,1.4 205.7,5.1 426.9,5.1 430.3,1.4 479.9,1.4 		"/>
+	</g>
+	<g>
+		
+			<rect x="37.4" y="296.8" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 338.597 596.8842)" class="st0" width="263.9" height="3.2"/>
+	</g>
+	<g>
+		<polygon class="st0" points="468.8,298.9 0.6,298.9 0.6,263.5 1.3,263.5 1.3,298.2 468.5,298.2 478.3,288.1 478.3,281.8 
+			476.3,277.7 476.3,274.8 479.9,271.2 479.9,272.2 477,275 477,277.6 479,281.7 479,288.4 478.9,288.5 		"/>
+	</g>
+	<g>
+		<polygon class="st0" points="1.1,59.8 0.4,59.8 0.4,23.1 2.8,20.7 2.8,12.6 11.3,4 11.7,4.5 3.5,12.9 3.5,21 1.1,23.4 		"/>
+	</g>
+	<g>
+		<polygon class="st0" points="4.3,18.5 2,18.5 0.9,20.4 2,22.3 4.3,22.3 5.4,20.4 		"/>
+	</g>
+	<g>
+		<polygon class="st0" points="462.8,296.1 342.9,296.1 340.2,293.4 299.1,293.4 295.2,295.7 294.8,295.1 298.9,292.7 340.5,292.7 
+			343.2,295.4 462.5,295.4 473.1,284.9 473.1,274.8 479,268.9 479,252.5 479.6,252.5 479.6,269.1 473.7,275.1 473.7,285.2 
+			473.6,285.3 		"/>
+	</g>
+	<g>
+		<polygon class="st0" points="478.7,283.3 463.5,298.6 468.7,298.6 478.8,288 		"/>
+	</g>
 </g>
 </svg>
diff --git a/frontend/public/board/blue_4.svg b/frontend/public/board/blue_4.svg
index 73b23f98d8..04eb06669d 100644
--- a/frontend/public/board/blue_4.svg
+++ b/frontend/public/board/blue_4.svg
@@ -1,151 +1,33 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-preserveAspectRatio="none meet"
-	 viewBox="0 0 454.2 285.7" style="enable-background:new 0 0 454.2 285.7;" xml:space="preserve">
+	 viewBox="0 0 480 300" style="enable-background:new 0 0 480 300;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#0B101E;}
-	.st1{opacity:0.1;fill:#006CE2;}
-	.st2{fill:none;stroke:#31ECFF;stroke-width:0.6677;stroke-miterlimit:10;}
-	.st3{fill:#31ECFF;}
-	.st4{opacity:0.75;fill:#31ECFF;}
-	.st5{opacity:0.5;fill:#31ECFF;}
-	.st6{opacity:0.25;fill:#31ECFF;}
-	.st7{opacity:0.25;fill:#006CE2;}
+	.st0{fill:#1094E5;}
 </style>
-<rect x="2743.8" y="-1695.4" class="st0" width="1920" height="1080"/>
 <g>
-	<polygon class="st1" points="453,284.6 1.2,284.6 1.2,1 36.7,1 77.2,45.1 453,45.1 	"/>
-	<polygon class="st1" points="44.1,1 81,40.5 453,40.5 453,1 	"/>
-	<polygon class="st2" points="453,284.6 1.2,284.6 1.2,1 36.7,1 77.2,45.1 453,45.1 	"/>
-	<polygon class="st2" points="44.1,1 81,40.5 453,40.5 453,1 	"/>
-	<g>
-		<rect x="442.2" y="283.4" class="st3" width="12" height="2.4"/>
-		
-			<rect x="447" y="278.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 732.7397 -173.2045)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="-4.8" y="278.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 280.9546 278.5807)" class="st3" width="12" height="2.4"/>
-		<rect y="283.4" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 11.9622 569.1235)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="446.6" y="4.8" transform="matrix(6.123234e-17 -1 1 6.123234e-17 446.6108 458.573)" class="st3" width="12" height="2.4"/>
-		<rect x="441.8" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		<rect x="0.3" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 12.6206 2.3739)" class="st3" width="12" height="2.4"/>
-		<rect x="-4.5" y="4.8" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -4.465 7.4973)" class="st3" width="12" height="2.4"/>
-	</g>
+	<polygon class="st0" points="3.1,32 0.1,32 0.1,15.7 15.8,0 35.8,0 35.8,3 17,3 3.1,17 	"/>
 </g>
 <g>
-	<polygon class="st1" points="823,-1070.1 371.2,-1070.1 371.2,-1338.5 386,-1353.6 823,-1353.6 	"/>
-	<polygon class="st2" points="823,-1070.1 371.2,-1070.1 371.2,-1338.5 386,-1353.6 823,-1353.6 	"/>
-	<polyline class="st2" points="371.2,-1309.6 802.4,-1309.6 823,-1324.8 	"/>
-	<polygon class="st3" points="758.4,-1312.2 750.4,-1312.2 762.8,-1322.1 770.8,-1322.1 	"/>
-	<polygon class="st4" points="772.5,-1312.2 764.5,-1312.2 776.8,-1322.1 784.9,-1322.1 	"/>
-	<polygon class="st5" points="786.6,-1312.2 778.6,-1312.2 790.9,-1322.1 799,-1322.1 	"/>
-	<polygon class="st6" points="800.7,-1312.2 792.7,-1312.2 805,-1322.1 813,-1322.1 	"/>
-	<polygon class="st3" points="371,-1341.5 371,-1353.6 382.6,-1353.6 	"/>
+	<polygon class="st0" points="479.9,35.8 476.9,35.8 476.9,17 463,3 447.9,3 447.9,0 464.2,0 479.9,15.7 	"/>
 </g>
 <g>
-	<polygon class="st1" points="822.9,-751.5 371.1,-751.5 371.1,-1035 696.3,-1035 718.8,-1018 822.9,-1018 	"/>
-	<polygon class="st2" points="822.9,-751.5 371.1,-751.5 371.1,-1035 696.3,-1035 718.8,-1018 822.9,-1018 	"/>
-	<g>
-		<rect x="812.1" y="-752.7" class="st3" width="12" height="2.4"/>
-		
-			<rect x="816.9" y="-757.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 66.5642 -1579.1746)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="365.1" y="-757.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -385.2209 -1127.3894)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="369.9" y="-752.7" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 751.7568 -1503.022)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="370.2" y="-1036.1" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 752.4152 -2069.7717)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="365.4" y="-1031.3" transform="matrix(6.123234e-17 -1 1 6.123234e-17 1401.505 -658.6782)" class="st3" width="12" height="2.4"/>
-	</g>
-	<polygon class="st3" points="752.3,-1021.2 730.9,-1021.2 717.7,-1031.2 739,-1031.2 	"/>
-	<polygon class="st4" points="778.4,-1021.2 759.7,-1021.2 746.4,-1031.2 765.1,-1031.2 	"/>
-	<polygon class="st5" points="801.8,-1021.2 785.8,-1021.2 772.6,-1031.2 788.6,-1031.2 	"/>
-	<polygon class="st6" points="822.6,-1021.2 809.3,-1021.2 796,-1031.2 822.6,-1031.2 	"/>
-	<rect x="371.1" y="-988.9" class="st3" width="451.8" height="1.8"/>
+	<polygon class="st0" points="464.2,300 444.2,300 444.2,297 463,297 476.9,283 476.9,268 479.9,268 479.9,284.3 	"/>
 </g>
 <g>
-	<polygon class="st1" points="2182.7,-1070.1 1731,-1070.1 1731,-1338.5 1745.7,-1353.6 2182.7,-1353.6 	"/>
-	<polygon class="st2" points="2182.7,-1070.1 1731,-1070.1 1731,-1338.5 1745.7,-1353.6 2182.7,-1353.6 	"/>
-	<polyline class="st2" points="1731,-1309.6 2162.1,-1309.6 2182.7,-1324.8 	"/>
-	<polygon class="st3" points="2118.2,-1312.2 2110.2,-1312.2 2122.5,-1322.1 2130.5,-1322.1 	"/>
-	<polygon class="st4" points="2132.3,-1312.2 2124.3,-1312.2 2136.6,-1322.1 2144.6,-1322.1 	"/>
-	<polygon class="st5" points="2146.4,-1312.2 2138.4,-1312.2 2150.7,-1322.1 2158.7,-1322.1 	"/>
-	<polygon class="st6" points="2160.5,-1312.2 2152.4,-1312.2 2164.8,-1322.1 2172.8,-1322.1 	"/>
-	<polygon class="st3" points="1730.7,-1341.5 1730.7,-1353.6 1742.3,-1353.6 	"/>
+	<polygon class="st0" points="32.1,300 15.8,300 0.1,284.3 0.1,264.3 3.1,264.3 3.1,283 17,297 32.1,297 	"/>
 </g>
 <g>
-	<polygon class="st1" points="2182.6,-751.5 1730.8,-751.5 1730.8,-1035 2056,-1035 2078.6,-1018 2182.6,-1018 	"/>
-	<polygon class="st2" points="2182.6,-751.5 1730.8,-751.5 1730.8,-1035 2056,-1035 2078.6,-1018 2182.6,-1018 	"/>
-	<g>
-		<rect x="2171.8" y="-752.7" class="st3" width="12" height="2.4"/>
-		
-			<rect x="2176.6" y="-757.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 1426.2906 -2938.9009)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="1724.8" y="-757.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 974.5054 -2487.1157)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="1729.6" y="-752.7" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 3471.2095 -1503.022)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="1730" y="-1036.1" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 3471.8679 -2069.7717)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="1725.2" y="-1031.3" transform="matrix(6.123234e-17 -1 1 6.123234e-17 2761.2314 701.0482)" class="st3" width="12" height="2.4"/>
-	</g>
-	<polygon class="st3" points="2112,-1021.2 2090.6,-1021.2 2077.4,-1031.2 2098.7,-1031.2 	"/>
-	<polygon class="st4" points="2138.1,-1021.2 2119.4,-1021.2 2106.2,-1031.2 2124.9,-1031.2 	"/>
-	<polygon class="st5" points="2161.6,-1021.2 2145.5,-1021.2 2132.3,-1031.2 2148.3,-1031.2 	"/>
-	<polygon class="st6" points="2182.3,-1021.2 2169,-1021.2 2155.7,-1031.2 2182.3,-1031.2 	"/>
-	<rect x="1730.8" y="-988.9" class="st3" width="451.8" height="1.8"/>
+	<path class="st0" d="M459.7,293.4h-98.2L359,289H123l-2.5,4.3h-101L7.2,281.1V20.6L19.5,8.3h101l2.5,4.3H359l2.5-4.3h99.2L472,20.6
+		v260.4L459.7,293.4z M362.1,292.4h97.2l11.7-11.7V21L460.3,9.3h-98.2l-2.5,4.3H122.4l-2.5-4.3h-100L8.2,21v259.6l11.7,11.7h100
+		l2.5-4.3h237.2L362.1,292.4z"/>
 </g>
 <g>
-	<polygon class="st1" points="1682.5,-751.6 850.3,-751.6 850.3,-1035.1 1555.9,-1035.1 1578.5,-1018.1 1682.5,-1018.1 	"/>
-	<polygon class="st2" points="1682.5,-751.6 850.3,-751.6 850.3,-1035.1 1555.9,-1035.1 1578.5,-1018.1 1682.5,-1018.1 	"/>
 	<g>
-		<rect x="1671.7" y="-752.8" class="st3" width="12" height="2.4"/>
-		
-			<rect x="1676.5" y="-757.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 926.1119 -2438.8799)" class="st3" width="12" height="2.4"/>
+		<polygon class="st0" points="122.7,6.1 125.2,10.4 356.8,10.4 359.3,6.1 		"/>
 	</g>
 	<g>
-		
-			<rect x="844.3" y="-757.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 93.9218 -1606.6898)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="849.1" y="-752.8" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1710.2 -1503.1797)" class="st3" width="12" height="2.4"/>
+		<polygon class="st0" points="359.3,295.6 356.8,291.3 125.2,291.3 122.7,295.6 		"/>
 	</g>
-	<g>
-		
-			<rect x="849.4" y="-1036.2" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1710.8583 -2069.9292)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="844.7" y="-1031.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 1880.8054 -179.5355)" class="st3" width="12" height="2.4"/>
-	</g>
-	<polygon class="st3" points="1611.9,-1021.3 1590.5,-1021.3 1577.3,-1031.2 1598.6,-1031.2 	"/>
-	<polygon class="st4" points="1638,-1021.3 1619.3,-1021.3 1606.1,-1031.2 1624.8,-1031.2 	"/>
-	<polygon class="st5" points="1661.5,-1021.3 1645.4,-1021.3 1632.2,-1031.2 1648.2,-1031.2 	"/>
-	<polygon class="st6" points="1682.2,-1021.3 1668.9,-1021.3 1655.6,-1031.2 1682.2,-1031.2 	"/>
-	<rect x="850.2" y="-989" class="st3" width="832.3" height="1.8"/>
-</g>
-<g>
-	<polygon class="st1" points="2172.9,-1379.3 1730.8,-1379.3 1730.8,-1652.7 1740.6,-1662.9 2182.6,-1662.9 2182.6,-1389.5 	"/>
-	<polygon class="st3" points="2142.7,-1661.3 1923.3,-1661.3 1920.1,-1664.5 2145.7,-1664.5 	"/>
-	<polyline class="st2" points="2182.6,-1614.5 2182.6,-1662.9 2147.2,-1662.9 2143.7,-1659.2 1922.2,-1659.2 1918.7,-1662.9 
-		1740.8,-1662.9 1730.8,-1652.5 1730.8,-1646 	"/>
-	
-		<rect x="1753.9" y="-1381" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 3771.7532 -2758.8643)" class="st3" width="263.9" height="3.2"/>
-	<polyline class="st2" points="1730.8,-1414.5 1730.8,-1379.4 2172.6,-1379.4 2182.6,-1389.8 2182.6,-1396.3 	"/>
-	<polygon class="st7" points="2182.6,-1614.5 2182.6,-1662.9 2147.2,-1662.9 2143.7,-1659.2 1922.2,-1659.2 1918.6,-1662.9 
-		1740.6,-1662.9 1730.8,-1652.7 1730.8,-1614.5 	"/>
 </g>
 </svg>
diff --git a/frontend/public/board/blue_5.svg b/frontend/public/board/blue_5.svg
index e1611130d3..a3fb05297c 100644
--- a/frontend/public/board/blue_5.svg
+++ b/frontend/public/board/blue_5.svg
@@ -1,152 +1,19 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-preserveAspectRatio="none meet"
-	 viewBox="0 0 835.4 286.6" style="enable-background:new 0 0 835.4 286.6;" xml:space="preserve">
+	 viewBox="0 0 480 300" style="enable-background:new 0 0 480 300;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#0B101E;}
-	.st1{opacity:0.1;fill:#006CE2;}
-	.st2{fill:none;stroke:#31ECFF;stroke-width:0.6677;stroke-miterlimit:10;}
-	.st3{fill:#31ECFF;}
-	.st4{opacity:0.75;fill:#31ECFF;}
-	.st5{opacity:0.5;fill:#31ECFF;}
-	.st6{opacity:0.25;fill:#31ECFF;}
-	.st7{opacity:0.25;fill:#006CE2;}
+	.st0{fill:#1094E5;}
 </style>
-<rect x="2743.8" y="-1694.6" class="st0" width="1920" height="1080"/>
 <g>
-	<polygon class="st1" points="63,-472.9 -388.8,-472.9 -388.8,-756.4 -353.3,-756.4 -312.8,-712.4 63,-712.4 	"/>
-	<polygon class="st1" points="-345.9,-756.4 -309,-717 63,-717 63,-756.4 	"/>
-	<polygon class="st2" points="63,-472.9 -388.8,-472.9 -388.8,-756.4 -353.3,-756.4 -312.8,-712.4 63,-712.4 	"/>
-	<polygon class="st2" points="-345.9,-756.4 -309,-717 63,-717 63,-756.4 	"/>
-	<g>
-		<rect x="52.2" y="-474.1" class="st3" width="12" height="2.4"/>
-		
-			<rect x="57" y="-478.9" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -414.7073 -540.6516)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="-394.8" y="-478.9" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -866.4924 -88.8664)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="-390" y="-474.1" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -768.0378 -945.7705)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="56.6" y="-752.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 814.0578 -688.874)" class="st3" width="12" height="2.4"/>
-		<rect x="51.8" y="-757.4" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="-389.7" y="-757.4" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -767.3794 -1512.5201)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="-394.5" y="-752.7" transform="matrix(6.123234e-17 -1 1 6.123234e-17 362.9821 -1139.9497)" class="st3" width="12" height="2.4"/>
-	</g>
-</g>
-<g>
-	<polygon class="st1" points="84.6,-1179.5 -367.2,-1179.5 -367.2,-1447.9 -352.5,-1463 84.6,-1463 	"/>
-	<polygon class="st2" points="84.6,-1179.5 -367.2,-1179.5 -367.2,-1447.9 -352.5,-1463 84.6,-1463 	"/>
-	<polyline class="st2" points="-367.2,-1419 63.9,-1419 84.6,-1434.2 	"/>
-	<polygon class="st3" points="20,-1421.6 12,-1421.6 24.3,-1431.5 32.3,-1431.5 	"/>
-	<polygon class="st4" points="34.1,-1421.6 26.1,-1421.6 38.4,-1431.5 46.4,-1431.5 	"/>
-	<polygon class="st5" points="48.2,-1421.6 40.2,-1421.6 52.5,-1431.5 60.5,-1431.5 	"/>
-	<polygon class="st6" points="62.3,-1421.6 54.3,-1421.6 66.6,-1431.5 74.6,-1431.5 	"/>
-	<polygon class="st3" points="-367.5,-1450.9 -367.5,-1463 -355.9,-1463 	"/>
-</g>
-<g>
-	<polygon class="st1" points="15.6,-844.6 -436.1,-844.6 -436.1,-1128.1 -110.9,-1128.1 -88.4,-1111 15.6,-1111 	"/>
-	<polygon class="st2" points="15.6,-844.6 -436.1,-844.6 -436.1,-1128.1 -110.9,-1128.1 -88.4,-1111 15.6,-1111 	"/>
-	<g>
-		<rect x="4.9" y="-845.7" class="st3" width="12" height="2.4"/>
-		
-			<rect x="9.7" y="-850.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -833.7073 -864.9849)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="-442.1" y="-850.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 -1285.4924 -413.1997)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="-437.3" y="-845.7" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -862.7045 -1689.1039)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="-437" y="-1129.1" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -862.0461 -2255.8535)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="-441.8" y="-1124.3" transform="matrix(6.123234e-17 -1 1 6.123234e-17 687.3154 -1558.9497)" class="st3" width="12" height="2.4"/>
-	</g>
-	<polygon class="st3" points="-54.9,-1114.3 -76.3,-1114.3 -89.6,-1124.2 -68.2,-1124.2 	"/>
-	<polygon class="st4" points="-28.8,-1114.3 -47.5,-1114.3 -60.8,-1124.2 -42.1,-1124.2 	"/>
-	<polygon class="st5" points="-5.4,-1114.3 -21.4,-1114.3 -34.7,-1124.2 -18.7,-1124.2 	"/>
-	<polygon class="st6" points="15.4,-1114.3 2,-1114.3 -11.2,-1124.2 15.4,-1124.2 	"/>
-	<rect x="-436.1" y="-1081.9" class="st3" width="451.8" height="1.8"/>
-</g>
-<g>
-	<polygon class="st1" points="2182.7,-1069.2 1731,-1069.2 1731,-1337.6 1745.7,-1352.8 2182.7,-1352.8 	"/>
-	<polygon class="st2" points="2182.7,-1069.2 1731,-1069.2 1731,-1337.6 1745.7,-1352.8 2182.7,-1352.8 	"/>
-	<polyline class="st2" points="1731,-1308.7 2162.1,-1308.7 2182.7,-1323.9 	"/>
-	<polygon class="st3" points="2118.2,-1311.3 2110.2,-1311.3 2122.5,-1321.3 2130.5,-1321.3 	"/>
-	<polygon class="st4" points="2132.3,-1311.3 2124.3,-1311.3 2136.6,-1321.3 2144.6,-1321.3 	"/>
-	<polygon class="st5" points="2146.4,-1311.3 2138.4,-1311.3 2150.7,-1321.3 2158.7,-1321.3 	"/>
-	<polygon class="st6" points="2160.5,-1311.3 2152.4,-1311.3 2164.8,-1321.3 2172.8,-1321.3 	"/>
-	<polygon class="st3" points="1730.7,-1340.6 1730.7,-1352.8 1742.3,-1352.8 	"/>
-</g>
-<g>
-	<polygon class="st1" points="2182.6,-750.6 1730.8,-750.6 1730.8,-1034.2 2056,-1034.2 2078.6,-1017.1 2182.6,-1017.1 	"/>
-	<polygon class="st2" points="2182.6,-750.6 1730.8,-750.6 1730.8,-1034.2 2056,-1034.2 2078.6,-1017.1 2182.6,-1017.1 	"/>
-	<g>
-		<rect x="2171.8" y="-751.8" class="st3" width="12" height="2.4"/>
-		
-			<rect x="2176.6" y="-756.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 1427.1624 -2938.0291)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="1724.8" y="-756.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 975.3772 -2486.2439)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="1729.6" y="-751.8" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 3471.2095 -1501.2784)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="1730" y="-1035.2" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 3471.8679 -2068.0281)" class="st3" width="12" height="2.4"/>
-		
-			<rect x="1725.2" y="-1030.4" transform="matrix(6.123234e-17 -1 1 6.123234e-17 2760.3596 701.9199)" class="st3" width="12" height="2.4"/>
-	</g>
-	<polygon class="st3" points="2112,-1020.3 2090.6,-1020.3 2077.4,-1030.3 2098.7,-1030.3 	"/>
-	<polygon class="st4" points="2138.1,-1020.3 2119.4,-1020.3 2106.2,-1030.3 2124.9,-1030.3 	"/>
-	<polygon class="st5" points="2161.6,-1020.3 2145.5,-1020.3 2132.3,-1030.3 2148.3,-1030.3 	"/>
-	<polygon class="st6" points="2182.3,-1020.3 2169,-1020.3 2155.7,-1030.3 2182.3,-1030.3 	"/>
-	<rect x="1730.8" y="-988" class="st3" width="451.8" height="1.8"/>
-</g>
-<g>
-	<polygon class="st1" points="833.4,285 1.2,285 1.2,1.5 706.8,1.5 729.3,18.5 833.4,18.5 	"/>
-	<polygon class="st2" points="833.4,285 1.2,285 1.2,1.5 706.8,1.5 729.3,18.5 833.4,18.5 	"/>
-	<g>
-		<rect x="822.6" y="283.8" class="st3" width="12" height="2.4"/>
-		
-			<rect x="827.4" y="279" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 1113.5806 -553.1735)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="-4.8" y="279" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 281.3904 279.0165)" class="st3" width="12" height="2.4"/>
-		<rect y="283.8" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 11.9622 569.9953)" class="st3" width="12" height="2.4"/>
-	</g>
-	<g>
-		
-			<rect x="0.3" y="0.4" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 12.6206 3.2457)" class="st3" width="12" height="2.4"/>
-		<rect x="-4.5" y="5.2" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -4.9009 7.9331)" class="st3" width="12" height="2.4"/>
-	</g>
-	<polygon class="st3" points="762.8,15.3 741.4,15.3 728.2,5.4 749.5,5.4 	"/>
-	<polygon class="st4" points="788.9,15.3 770.2,15.3 756.9,5.4 775.6,5.4 	"/>
-	<polygon class="st5" points="812.3,15.3 796.3,15.3 783.1,5.4 799.1,5.4 	"/>
-	<polygon class="st6" points="833.1,15.3 819.8,15.3 806.5,5.4 833.1,5.4 	"/>
-	<rect x="1" y="47.6" class="st3" width="832.3" height="1.8"/>
-</g>
-<g>
-	<polygon class="st1" points="-171.5,-100.6 -613.5,-100.6 -613.5,-374 -603.8,-384.2 -161.7,-384.2 -161.7,-110.8 	"/>
-	<polygon class="st3" points="-201.6,-382.6 -421,-382.6 -424.2,-385.8 -198.6,-385.8 	"/>
-	<polyline class="st2" points="-161.7,-335.8 -161.7,-384.2 -197.1,-384.2 -200.6,-380.5 -422.1,-380.5 -425.6,-384.2 
-		-603.5,-384.2 -613.5,-373.9 -613.5,-367.3 	"/>
-	
-		<rect x="-590.4" y="-102.4" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 -916.9052 -201.5188)" class="st3" width="263.9" height="3.2"/>
-	<polyline class="st2" points="-613.5,-135.8 -613.5,-100.8 -171.7,-100.8 -161.7,-111.1 -161.7,-117.6 	"/>
-	<polygon class="st7" points="-161.7,-335.8 -161.7,-384.2 -197.1,-384.2 -200.6,-380.5 -422.1,-380.5 -425.7,-384.2 -603.8,-384.2 
-		-613.5,-374 -613.5,-335.8 	"/>
+	<path class="st0" d="M475.8,295.8H4.3V5.3h471.5V295.8z M5.8,294.3h468.5V6.8H5.8V294.3z"/>
 </g>
+<polygon class="st0" points="43.5,4.7 27.3,4.7 22.9,4.7 8.4,4.7 3.3,4.7 3.3,9.8 3.3,24.3 3.3,28.7 3.3,44.9 6.5,44.9 6.5,26.6 
+	8.4,25.3 8.4,9.8 23.9,9.8 25.2,7.9 43.5,7.9 "/>
+<polygon class="st0" points="3.3,256.1 3.3,272.3 3.3,276.7 3.3,291.2 3.3,296.3 8.4,296.3 22.9,296.3 27.3,296.3 43.5,296.3 
+	43.5,293.1 25.2,293.1 23.9,291.2 8.4,291.2 8.4,275.7 6.5,274.4 6.5,256.1 "/>
+<polygon class="st0" points="436.7,296.3 452.9,296.3 457.3,296.3 471.7,296.3 476.9,296.3 476.9,291.2 476.9,276.7 476.9,272.3 
+	476.9,256.1 473.7,256.1 473.7,274.4 471.7,275.7 471.7,291.2 456.2,291.2 455,293.1 436.7,293.1 "/>
+<polygon class="st0" points="476.9,44.9 476.9,28.7 476.9,24.3 476.9,9.8 476.9,4.7 471.7,4.7 457.3,4.7 452.9,4.7 436.7,4.7 
+	436.7,7.9 455,7.9 456.2,9.8 471.7,9.8 471.7,25.3 473.7,26.6 473.7,44.9 "/>
 </svg>
diff --git a/frontend/public/board/blue_6.svg b/frontend/public/board/blue_6.svg
new file mode 100644
index 0000000000..58c6e04fb4
--- /dev/null
+++ b/frontend/public/board/blue_6.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 480 300" style="enable-background:new 0 0 480 300;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1094E5;}
+	.st1{fill:#1094E5;stroke:#231815;stroke-miterlimit:10;}
+	.st2{fill:#231815;}
+	.st3{fill:none;stroke:#231815;stroke-miterlimit:10;}
+</style>
+<g>
+	<path class="st0" d="M352.7,7l21.9,19.5l0.6,0.5h0.8H473v258.2l-5.8,6.8H13.1L7,286.1V14.3L13.5,7H352.7 M353.4,5H12.6L5,13.5V287
+		l7.3,7h455.9l6.8-8V25h-99.1L353.4,5L353.4,5z"/>
+</g>
+<g>
+	<g>
+		<polygon class="st0" points="8.9,31.3 3.9,35.4 3.9,11.3 11,4.3 65.4,4.3 59.8,9.3 13,9.3 8.9,13.4 		"/>
+	</g>
+</g>
+<g>
+	<g>
+		<polygon class="st0" points="8.9,268.7 3.9,264.6 3.9,288.6 11,295.7 65.4,295.7 59.8,290.7 13,290.7 8.9,286.5 		"/>
+	</g>
+</g>
+<g>
+	<g>
+		<polygon class="st0" points="471.6,268.7 476.6,264.6 476.6,288.6 469.5,295.7 415.1,295.7 420.7,290.7 467.5,290.7 471.6,286.5 
+					"/>
+	</g>
+</g>
+<g>
+	<polygon class="st0" points="476.3,37.7 462.6,23.9 476.3,23.9 	"/>
+</g>
+<g>
+	<polygon class="st0" points="471.3,31.3 435.3,31.3 422.4,23.5 376.6,23.5 360.3,9.1 47.3,9.1 47.3,8.1 360.7,8.1 377,22.5 
+		422.6,22.5 435.6,30.3 471.3,30.3 	"/>
+</g>
+<g>
+	<polygon class="st0" points="67.9,294 62.6,288.7 15.7,288.7 10.9,283.9 10.9,268.2 9,266.5 9,33.8 12.7,31.3 12.7,14.3 20.8,6.1 
+		21.5,6.8 13.7,14.7 13.7,31.8 10,34.3 10,266 11.9,267.7 11.9,283.5 16.1,287.7 63,287.7 68.6,293.3 	"/>
+</g>
+<g>
+	<rect x="471.3" y="69.7" class="st0" width="5.3" height="165.7"/>
+</g>
+</svg>
diff --git a/frontend/public/board/blue_7.svg b/frontend/public/board/blue_7.svg
new file mode 100644
index 0000000000..cb9bc362a9
--- /dev/null
+++ b/frontend/public/board/blue_7.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 480 300" style="enable-background:new 0 0 480 300;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1094E5;}
+	.st1{fill:none;stroke:#231815;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#231815;stroke-width:3;stroke-miterlimit:10;}
+</style>
+<g>
+	<path class="st0" d="M476.5,296.5H3.5V3.5h473V296.5z M4.5,295.5h471V4.5H4.5V295.5z"/>
+</g>
+<g>
+	<polygon class="st0" points="5.5,13.8 2.5,13.8 2.5,2.5 13.8,2.5 13.8,5.5 5.5,5.5 	"/>
+</g>
+<g>
+	<polygon class="st0" points="13.8,297.5 2.5,297.5 2.5,286.2 5.5,286.2 5.5,294.5 13.8,294.5 	"/>
+</g>
+<g>
+	<polygon class="st0" points="477.5,297.5 466.2,297.5 466.2,294.5 474.5,294.5 474.5,286.2 477.5,286.2 	"/>
+</g>
+<g>
+	<polygon class="st0" points="477.5,13.8 474.5,13.8 474.5,5.5 466.2,5.5 466.2,2.5 477.5,2.5 	"/>
+</g>
+</svg>
diff --git a/frontend/public/board/blue_8.svg b/frontend/public/board/blue_8.svg
new file mode 100644
index 0000000000..eefc3b819b
--- /dev/null
+++ b/frontend/public/board/blue_8.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 480 300" style="enable-background:new 0 0 480 300;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1094E5;}
+	.st1{opacity:0.25;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#1094E5;}
+	.st3{opacity:0.45;}
+	.st4{opacity:0.6;}
+	.st5{opacity:0.75;}
+	.st6{opacity:0.25;fill-rule:evenodd;clip-rule:evenodd;fill:#1094E5;}
+	.st7{opacity:0.45;fill-rule:evenodd;clip-rule:evenodd;fill:#1094E5;}
+	.st8{opacity:0.6;fill-rule:evenodd;clip-rule:evenodd;fill:#1094E5;}
+	.st9{opacity:0.75;fill-rule:evenodd;clip-rule:evenodd;fill:#1094E5;}
+	.st10{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#1094E5;stroke-width:3;stroke-miterlimit:10;}
+</style>
+<g>
+	<g>
+		<g>
+			<path class="st0" d="M467.7,298.5H2.5V25l12.1-13h101l9.8-10h353.1v282.9L467.7,298.5z M3.5,297.5h463.7l10.3-13V3H125.8L116,13
+				h-101L3.5,25.4V297.5z"/>
+		</g>
+	</g>
+</g>
+<g class="st1">
+	<polygon class="st2" points="71.4,1 62.4,10 70.4,10 79.4,1 	"/>
+</g>
+<g class="st3">
+	<polygon class="st2" points="82.4,1 73.4,10 81.4,10 90.4,1 	"/>
+</g>
+<g class="st4">
+	<polygon class="st2" points="93.4,1 84.4,10 92.4,10 101.4,1 	"/>
+</g>
+<g class="st5">
+	<polygon class="st2" points="104.4,1 95.4,10 103.4,10 112.4,1 	"/>
+</g>
+<g>
+	<polygon class="st2" points="115.4,1 106.4,10 114.4,10 123.4,1 	"/>
+</g>
+<g>
+	<polygon class="st0" points="4.4,37.2 1.4,37.2 1.4,24.6 14,10.9 41.2,10.9 41.2,13.9 15.3,13.9 4.4,25.8 	"/>
+</g>
+<g>
+	<polygon class="st0" points="20.8,299.5 1.3,299.5 1.3,282.8 4.3,282.8 4.3,296.5 20.8,296.5 	"/>
+</g>
+<g>
+	<polygon class="st0" points="468.1,299.3 446.2,299.3 446.2,296.3 466.7,296.3 476.5,284 476.5,268.8 479.5,268.8 479.5,285 	"/>
+</g>
+<g>
+	<polygon class="st0" points="479.5,15.2 476.5,15.2 476.5,3.6 464.2,3.6 464.2,0.6 479.5,0.6 	"/>
+</g>
+</svg>
diff --git a/frontend/public/board/blue_9.svg b/frontend/public/board/blue_9.svg
new file mode 100644
index 0000000000..8218886ad3
--- /dev/null
+++ b/frontend/public/board/blue_9.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 480 300" style="enable-background:new 0 0 480 300;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1094E5;}
+	.st1{opacity:0.65;}
+	.st2{fill:none;stroke:#231815;stroke-width:2;stroke-miterlimit:10;}
+	.st3{fill:#231815;}
+</style>
+<g>
+	<polygon class="st0" points="9,35.7 7,35.7 7,6.2 201.7,6.2 201.7,8.2 9,8.2 	"/>
+</g>
+<g>
+	<g>
+		<polygon class="st0" points="13,45.4 7,50.1 7,4.9 64.5,4.9 59,10.9 13,10.9 		"/>
+	</g>
+</g>
+<g>
+	<polygon class="st0" points="407.5,288 6.5,288 6.5,165.3 13.3,159.9 13.3,119.3 10,115.9 10,45.6 12,45.6 12,115 15.3,118.5 
+		15.3,160.9 8.5,166.3 8.5,286 407,286 422,278.8 422.9,280.6 	"/>
+</g>
+<g>
+	<g>
+		<polygon class="st0" points="471.6,288.2 411.2,288.2 426.1,281.2 464.6,281.2 464.6,239.4 471.6,229.4 		"/>
+	</g>
+</g>
+<g class="st1">
+	<polygon class="st0" points="464.4,236.7 462.8,235.6 469.8,225.9 469.8,177.6 465.3,175.1 465.3,57.1 469.8,54.6 469.8,7.1 
+		214.1,7.1 207.4,13.8 150.6,13.8 150.6,11.8 206.6,11.8 213.3,5.1 471.8,5.1 471.8,55.8 467.3,58.3 467.3,174 471.8,176.5 
+		471.8,226.5 	"/>
+</g>
+<g>
+	<rect x="469.8" y="61.3" class="st0" width="2" height="111"/>
+</g>
+<g class="st1">
+	<rect x="8.5" y="120.3" class="st0" width="2" height="38.8"/>
+</g>
+</svg>
diff --git a/frontend/public/board/dark_1.svg b/frontend/public/board/dark_1.svg
new file mode 100644
index 0000000000..1c0731fbb3
--- /dev/null
+++ b/frontend/public/board/dark_1.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 480 300" style="enable-background:new 0 0 480 300;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#15709E;}
+</style>
+<g>
+	<path class="st0" d="M465.1,295.8H14.9L4.3,285.1V197l6.1-3.7v-86.5L4.3,103V14.9L14.9,4.3h450.1l10.7,10.7v87.7l-6.8,4.1v86.5
+		l6.8,4.1v87.7L465.1,295.8z M15.5,294.3h448.9l9.8-9.8v-86.2l-6.8-4.1v-88.2l6.8-4.1V15.6l-9.8-9.8H15.6l-9.8,9.8v86.6l6.1,3.7
+		v88.2l-6.1,3.7v86.7L15.5,294.3z"/>
+</g>
+<g>
+	<polygon class="st0" points="2.3,104.2 2.3,195.8 9.1,191.7 9.1,108.3 	"/>
+	<polygon class="st0" points="477,195.8 477,104.2 470.2,108.3 470.2,191.7 	"/>
+</g>
+<polygon class="st0" points="475.7,13.5 466.7,4.5 475.7,4.5 "/>
+<polygon class="st0" points="466.7,295.7 475.7,286.7 475.7,295.7 "/>
+<polygon class="st0" points="4.3,286.7 13.3,295.7 4.3,295.7 "/>
+<polygon class="st0" points="13.3,4.5 4.3,13.5 4.3,4.5 "/>
+</svg>