diff --git a/web/src/components/ManualDivinationPage.tsx b/web/src/components/ManualDivinationPage.tsx
index 88282ea..8b0cb0f 100644
--- a/web/src/components/ManualDivinationPage.tsx
+++ b/web/src/components/ManualDivinationPage.tsx
@@ -47,9 +47,11 @@ function CoinImage({ face, selected }: { face: CoinFace; selected?: boolean }) {
   );
 }
 
-function YaoGlyph({ type, active }: { type?: YaoType; active?: boolean }) {
-  const color = active || type ? 'bg-violet-700' : 'bg-slate-200';
+function YaoGlyph({ type, confirmed }: { type?: YaoType; confirmed?: boolean }) {
+  // Gray for unconfirmed, violet for confirmed
+  const color = confirmed ? 'bg-violet-700' : 'bg-slate-200';
 
+  // Yang: solid line, Yin: split line
   if (!type || type === 'youngYang' || type === 'oldYang') {
     return <div className={`h-2.5 w-full rounded-full ${color}`} />;
   }
@@ -62,6 +64,12 @@ function YaoGlyph({ type, active }: { type?: YaoType; active?: boolean }) {
   );
 }
 
+function YaoChangeMark({ type }: { type?: YaoType }) {
+  if (type === 'oldYang') return <span className="text-violet-700 font-bold">○</span>;
+  if (type === 'oldYin') return <span className="text-violet-700 font-bold">×</span>;
+  return null;
+}
+
 const copy = {
   zh: {
     title: '手动起卦',
@@ -250,17 +258,18 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
             {[5, 4, 3, 2, 1, 0].map((index) => {
               const result = yaoResults[index];
               const active = index === progress && progress < TOTAL_YAO_COUNT;
+              const confirmed = !!result;
               return (
                 <div
                   key={index}
-                  className={`flex h-[62px] items-center gap-4 rounded-[10px] px-3.5 ${active ? 'border border-violet-600 bg-violet-50' : result ? 'border border-slate-200 bg-white' : 'bg-slate-50'}`}
+                  className={`flex h-[62px] items-center gap-4 rounded-[10px] px-3.5 ${active ? 'border border-violet-600 bg-violet-50' : confirmed ? 'border border-slate-200 bg-white' : 'bg-slate-50'}`}
                 >
-                  <span className={`w-16 text-sm font-bold ${active || result ? 'text-violet-700' : 'text-slate-400'}`}>{text.lineNames[index]}</span>
+                  <span className={`w-16 text-sm font-bold ${active || confirmed ? 'text-violet-700' : 'text-slate-400'}`}>{text.lineNames[index]}</span>
                   <div className="min-w-0 flex-1">
-                    <YaoGlyph type={result} active={active} />
+                    <YaoGlyph type={result} confirmed={confirmed} />
                   </div>
-                  <span className={`w-20 text-right text-[13px] font-bold ${result ? 'text-violet-700' : 'text-slate-400'}`}>
-                    {result ? text.yaoTypeNames[result] : text.pending}
+                  <span className="w-6 text-center">
+                    <YaoChangeMark type={result} />
                   </span>
                 </div>
               );
@@ -285,10 +294,6 @@ export default function ManualDivinationPage({ locale, divination: d }: Props) {
                 </div>
               </div>
 
-              <div className="rounded-xl border border-violet-100 bg-violet-50 px-4 py-3 text-center text-[13px] font-semibold text-violet-800">
-                {text.yaoTypeNames[currentYaoType]}
-              </div>
-
               <button
                 type="button"
                 onClick={confirmYao}