diff --git a/ui-html/webview2/candwnd/assets/ziranma.png b/ui-html/webview2/candwnd/assets/ziranma.png
new file mode 100644
index 00000000..df776f10
Binary files /dev/null and b/ui-html/webview2/candwnd/assets/ziranma.png differ
diff --git a/ui-html/webview2/candwnd/assets/ziranmabak01.png b/ui-html/webview2/candwnd/assets/ziranmabak01.png
new file mode 100644
index 00000000..1a934fc4
Binary files /dev/null and b/ui-html/webview2/candwnd/assets/ziranmabak01.png differ
diff --git a/ui-html/webview2/candwnd/assets/ziranmabak02.png b/ui-html/webview2/candwnd/assets/ziranmabak02.png
new file mode 100644
index 00000000..aaf6d0a6
Binary files /dev/null and b/ui-html/webview2/candwnd/assets/ziranmabak02.png differ
diff --git a/ui-html/webview2/candwnd/body/vertical_candidate_window_dark.html b/ui-html/webview2/candwnd/body/vertical_candidate_window_dark.html
new file mode 100644
index 00000000..ca8cb5ab
--- /dev/null
+++ b/ui-html/webview2/candwnd/body/vertical_candidate_window_dark.html
@@ -0,0 +1,54 @@
+<!--0Anchor-->
+<div class="row pinyin">
+  <div class="text">{0}</div>
+  <div class="hidden-pinyin">n</div>
+</div>
+<!--1Anchor-->
+<div class="row-wrapper">
+  <div class="row cand first">
+    <div class="text">1 {1}</div>
+  </div>
+</div>
+<!--2Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">2 {2}</div>
+  </div>
+</div>
+<!--3Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">3 {3}</div>
+  </div>
+</div>
+<!--4Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">4 {4}</div>
+  </div>
+</div>
+<!--5Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">5 {5}</div>
+  </div>
+</div>
+<!--6Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">6 {6}</div>
+  </div>
+</div>
+<!--7Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">7 {7}</div>
+  </div>
+</div>
+<!--8Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">8 {8}</div>
+  </div>
+</div>
+<!--9Anchor-->
\ No newline at end of file
diff --git a/ui-html/webview2/candwnd/body/vertical_candidate_window_dark_measure.html b/ui-html/webview2/candwnd/body/vertical_candidate_window_dark_measure.html
new file mode 100644
index 00000000..ca8cb5ab
--- /dev/null
+++ b/ui-html/webview2/candwnd/body/vertical_candidate_window_dark_measure.html
@@ -0,0 +1,54 @@
+<!--0Anchor-->
+<div class="row pinyin">
+  <div class="text">{0}</div>
+  <div class="hidden-pinyin">n</div>
+</div>
+<!--1Anchor-->
+<div class="row-wrapper">
+  <div class="row cand first">
+    <div class="text">1 {1}</div>
+  </div>
+</div>
+<!--2Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">2 {2}</div>
+  </div>
+</div>
+<!--3Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">3 {3}</div>
+  </div>
+</div>
+<!--4Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">4 {4}</div>
+  </div>
+</div>
+<!--5Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">5 {5}</div>
+  </div>
+</div>
+<!--6Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">6 {6}</div>
+  </div>
+</div>
+<!--7Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">7 {7}</div>
+  </div>
+</div>
+<!--8Anchor-->
+<div class="row-wrapper">
+  <div class="row cand">
+    <div class="text">8 {8}</div>
+  </div>
+</div>
+<!--9Anchor-->
\ No newline at end of file
diff --git a/ui-html/webview2/candwnd/vertical_candidate_window_dark.html b/ui-html/webview2/candwnd/vertical_candidate_window_dark.html
new file mode 100644
index 00000000..3f26437d
--- /dev/null
+++ b/ui-html/webview2/candwnd/vertical_candidate_window_dark.html
@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>(IME)VCandWnd</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      font-size: 16px;
+      height: 100vh;
+      margin: 0;
+      overflow: hidden;
+      border-radius: 6px;
+      background: transparent;
+    }
+
+    .containerParent {
+      width: fit-content;
+    }
+
+    .container {
+      margin-top: 0px;
+      margin-left: 0px;
+      background: #202020;
+      /* background: url("https://appassets/background.jpg"); */
+      padding: 2px;
+      border-radius: 6px;
+      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+      min-width: 7em;
+      width: fit-content;
+      user-select: none;
+      border: 1.5px solid #9b9b9b2e;
+    }
+
+    .row {
+      justify-content: space-between;
+      padding: 2px;
+      padding-right: 12px;
+      padding-top: 0;
+      padding-bottom: 0;
+      margin-top: 2px;
+    }
+
+    .cand {
+      border-radius: 4px;
+    }
+
+    .hover-active .cand:hover {
+      background-color: #414141;
+    }
+
+    .row-wrapper {
+      position: relative;
+    }
+
+    .first {
+      background-color: #3e3e3eb9;
+      border-radius: 4px;
+    }
+
+    .first::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 0.8em;
+      width: 0.2em;
+      background: #6b69d6;
+      border-radius: 8px;
+    }
+
+    .text {
+      padding-left: 8px;
+      color: #e9e8e8;
+    }
+
+    .pinyin {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .hidden-pinyin {
+      visibility: hidden;
+    }
+
+    .below-img {
+      margin-top: 6px;
+      width: 500px;
+      height: auto;
+    }
+  </style>
+
+  <script>
+    let a = false;
+    document.addEventListener('DOMContentLoaded', function () {
+      document.addEventListener('mousemove', function () {
+        if (a === true) {
+          const container = document.getElementById('container');
+          container.classList.add('hover-active');
+        }
+        a = true;
+      });
+    });
+
+    window.ClearState = function () {
+      a = false;
+      const container = document.getElementById('container');
+      container.classList.remove('hover-active');
+    }
+  </script>
+</head>
+
+<body>
+  <div id="realBody">
+    <div class="containerParent" id="realContainerParent">
+      <div class="container" id="realContainer">
+        <!--0Anchor-->
+        <div class="row pinyin">
+          <div class="text">ni</div>
+          <div class="hidden-pinyin">n</div>
+        </div>
+        <!--1Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand first">
+            <div class="text">1 你你(rX)</div>
+          </div>
+        </div>
+        <!--2Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">2 什么(rP)</div>
+          </div>
+        </div>
+        <!--3Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">3 量(oA)</div>
+          </div>
+        </div>
+        <!--4Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">4 牛(pA)</div>
+          </div>
+        </div>
+        <!--5Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">5 仙(rE)</div>
+          </div>
+        </div>
+        <!--6Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">6 可(dK)</div>
+          </div>
+        </div>
+        <!--7Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">7 木(aN)</div>
+          </div>
+        </div>
+        <!--8Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">8 无(aV)</div>
+          </div>
+        </div>
+        <!--9Anchor-->
+      </div>
+
+      <img src="https://candwnd/assets/ziranma.png" alt="" class="below-img">
+      <!-- <img src="./assets/ziranma.png" alt="" class="below-img"> -->
+    </div>
+  </div>
+
+
+  <div id="measureBody" style="visibility: hidden;">
+    <div class="containerParent" id="measureContainerParent">
+      <div class="container" id="measureContainer">
+        <!--0Anchor-->
+        <div class="row pinyin">
+          <div class="text">{0}</div>
+          <div class="hidden-pinyin">n</div>
+        </div>
+        <!--1Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand first">
+            <div class="text">1 {1} 你</div>
+          </div>
+        </div>
+        <!--2Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">2 {2} 我</div>
+          </div>
+        </div>
+        <!--3Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">3 {3} 什么</div>
+          </div>
+        </div>
+        <!--4Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">4 {4} 量子</div>
+          </div>
+        </div>
+        <!--5Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">5 {5} 可恶</div>
+          </div>
+        </div>
+        <!--6Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">6 {6} 不是</div>
+          </div>
+        </div>
+        <!--7Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">7 {7} 那么</div>
+          </div>
+        </div>
+        <!--8Anchor-->
+        <div class="row-wrapper">
+          <div class="row cand">
+            <div class="text">8 {8} 如果</div>
+          </div>
+        </div>
+        <!--9Anchor-->
+      </div>
+      <img src="https://candwnd/assets/ziranma.png" alt="" class="below-img">
+      <!-- <img src="./assets/ziranma.png" alt="" class="below-img"> -->
+    </div>
+  </div>
+</body>
+
+</html>
\ No newline at end of file