diff --git a/ui/README.md b/ui/README.md
index 27bbd266..5b458d5e 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -106,6 +106,7 @@
 - 修复了 demo 候选窗预览里的中文候选词乱码问题：示例候选词改为稳定的 Unicode 码点写法，同时 `CandidateList` 的主词排版切到 `textInputFontFamily`，更贴近真实输入法文字渲染路径
 - 收紧了 demo 候选窗预览的体积：去掉底部分页提示区，把弹层宽度压到原来约一半，并通过减小候选项高度与内边距把整体高度进一步缩到更接近紧凑候选框的形态
 - 继续修正了紧凑候选窗预览的内部排版：重新分配了序号/主词/注解三列宽度，避免主词区被挤到几乎不可见；同时把顶部拼音改为非粗体并大幅收窄上下留白
+- 继续把 demo 候选窗预览往现有 HTML 候选框样式靠拢：非选中项现在不再绘制背景高亮或边框，仅保留选中项的深灰底和左侧细蓝条，同时进一步压缩了候选项之间的纵向间距
 
 ## 构建
 
diff --git a/ui/demos/msimeui-demo/DemoScene.cpp b/ui/demos/msimeui-demo/DemoScene.cpp
index 7106f156..9dec5b21 100644
--- a/ui/demos/msimeui-demo/DemoScene.cpp
+++ b/ui/demos/msimeui-demo/DemoScene.cpp
@@ -460,13 +460,13 @@ std::unique_ptr<Scene> CreateDemoScene()
     auto candidateTrigger = std::make_shared<Button>(L"Open Candidate Preview", 44.0f);
     candidateTrigger->SetWidth(220.0f);
 
-    auto candidatePopupStack = std::make_shared<StackPanel>(2.0f);
+    auto candidatePopupStack = std::make_shared<StackPanel>(0.0f);
     candidatePopupStack->SetHorizontalContentAlignment(HorizontalAlignment::Leading);
-    auto candidatePinyin = std::make_shared<TextBlock>(L"ni", 18.0f, D2D1::ColorF(0xFFFFFF), false);
-    candidatePinyin->SetMargin({0.0f, 0.0f, 0.0f, 0.0f});
+    auto candidatePinyin = std::make_shared<TextBlock>(L"ni", 17.0f, D2D1::ColorF(0xFFFFFF), false);
+    candidatePinyin->SetMargin({0.0f, 0.0f, 0.0f, 1.0f});
     candidatePopupStack->AddChild(candidatePinyin);
 
-    auto candidateList = std::make_shared<CandidateList>(30.0f);
+    auto candidateList = std::make_shared<CandidateList>(28.0f);
     candidateList->SetWidth(124.0f);
     candidateList->AddItem({L"1", L"\x4F60", L"(rX)"});
     candidateList->AddItem({L"2", L"\x5C3C", L"(uV)"});
@@ -491,7 +491,7 @@ std::unique_ptr<Scene> CreateDemoScene()
     auto candidatePopup = std::make_shared<Popup>(candidatePopupStack);
     candidatePopup->SetMatchAnchorWidth(false);
     candidatePopup->SetWidth(136.0f);
-    candidatePopup->SetPadding({8.0f, 4.0f, 8.0f, 4.0f});
+    candidatePopup->SetPadding({8.0f, 2.0f, 8.0f, 4.0f});
     candidatePopup->SetBackgroundFill(D2D1::ColorF(0x242424));
     candidatePopup->SetBorderColor(D2D1::ColorF(0x474747));
     candidatePopup->SetCornerRadius(12.0f);
diff --git a/ui/src/Controls.cpp b/ui/src/Controls.cpp
index 918f533a..ecd87810 100644
--- a/ui/src/Controls.cpp
+++ b/ui/src/Controls.cpp
@@ -44,7 +44,7 @@ constexpr float kTabCornerRadius = 12.0f;
 constexpr float kAccordionCornerRadius = 14.0f;
 constexpr float kAccordionHeaderHorizontalPadding = 20.0f;
 constexpr float kComboBoxItemGap = 6.0f;
-constexpr float kCandidateItemGap = 4.0f;
+constexpr float kCandidateItemGap = 1.0f;
 
 RectF MakeInsetRect(const RectF &rect, float insetX, float insetY)
 {
@@ -2045,15 +2045,12 @@ void CandidateList::Render(DeviceResources &deviceResources)
     }
 
     const Theme &theme = ThemeManager::GetCurrent();
-    const D2D1_COLOR_F rowFill = D2D1::ColorF(0x2E2E2E);
-    const D2D1_COLOR_F rowFillPressed = D2D1::ColorF(0x3D3D3D);
-    const D2D1_COLOR_F rowStroke = D2D1::ColorF(0x3A3A3A);
-    const D2D1_COLOR_F rowStrokeSelected = D2D1::ColorF(0x4F8EF7);
-    const D2D1_COLOR_F rowFillSelected = D2D1::ColorF(0x3B3B3B);
-    const D2D1_COLOR_F labelColor = D2D1::ColorF(0xA8A8A8);
-    const D2D1_COLOR_F labelColorSelected = D2D1::ColorF(0x7EA8FF);
+    const D2D1_COLOR_F rowFillPressed = D2D1::ColorF(0x323232);
+    const D2D1_COLOR_F rowFillSelected = D2D1::ColorF(0x3A3A3A);
+    const D2D1_COLOR_F selectedBarColor = D2D1::ColorF(0x7C83FF);
+    const D2D1_COLOR_F labelColor = D2D1::ColorF(0x9C9C9C);
     const D2D1_COLOR_F textColor = D2D1::ColorF(0xF3F4F6);
-    const D2D1_COLOR_F annotationColor = D2D1::ColorF(0xD1D5DB);
+    const D2D1_COLOR_F annotationColor = D2D1::ColorF(0xD7D7D7);
 
     for (size_t index = 0; index < items_.size(); ++index)
     {
@@ -2062,9 +2059,14 @@ void CandidateList::Render(DeviceResources &deviceResources)
         const bool selected = index == selectedIndex_;
         const bool pressed = pressed_ && index == pressedIndex_;
 
-        FillRoundedRect(deviceResources, itemRect, 10.0f,
-                        pressed ? rowFillPressed : (selected ? rowFillSelected : rowFill),
-                        selected ? rowStrokeSelected : rowStroke, selected ? 1.5f : 1.0f);
+        if (selected || pressed)
+        {
+            const D2D1_COLOR_F fill = pressed ? rowFillPressed : rowFillSelected;
+            FillRoundedRect(deviceResources, itemRect, 8.0f, fill, fill, 0.0f);
+
+            const RectF selectedBar = {itemRect.x + 3.0f, itemRect.y + 6.0f, 3.0f, std::max(itemRect.height - 12.0f, 0.0f)};
+            FillRoundedRect(deviceResources, selectedBar, 1.5f, selectedBarColor, selectedBarColor, 0.0f);
+        }
 
         const float labelWidth = 18.0f;
         const float labelLeading = 10.0f;
@@ -2111,7 +2113,7 @@ void CandidateList::Render(DeviceResources &deviceResources)
         }
 
         ID2D1SolidColorBrush *labelBrush =
-            deviceResources.GetSolidColorBrush(selected ? labelColorSelected : labelColor);
+            deviceResources.GetSolidColorBrush(labelColor);
         ID2D1SolidColorBrush *textBrush = deviceResources.GetSolidColorBrush(textColor);
         ID2D1SolidColorBrush *annotationBrush = deviceResources.GetSolidColorBrush(annotationColor);
         if (cache.labelLayout && labelBrush)