diff --git a/animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding-tree-vis.component.ts b/animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding-tree-vis.component.ts
index 3610b68..56ff500 100644
--- a/animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding-tree-vis.component.ts
+++ b/animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding-tree-vis.component.ts
@@ -142,9 +142,7 @@ export class BerkovichEncodingTreeVisComponent {
     if (useRho) {
       return this.biasedValue() ?? this.targetValue();
     }
-    const r = this.currentRationalCenter();
-    const den = Number(r.den);
-    return den > 0 ? Number(r.num) / den : 0.5;
+    return this.targetValue();
   });
 
   readonly bluePinPercentX = computed<number>(() => {
diff --git a/animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding.component.spec.ts b/animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding.component.spec.ts
index 5ab189f..f998424 100644
--- a/animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding.component.spec.ts
+++ b/animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding.component.spec.ts
@@ -65,7 +65,8 @@ describe('BerkovichEncodingComponent', () => {
   });
 
   it('should update both realTarget and reverseReal when digit-display center is edited', () => {
-    component.onDigitDisplayCenterChange({ num: 3n, den: 4n }); // 0.75
+    // 0.75 in real is 1100_2. In reversed p-adic digit display, the digits are 0011_2 = 3/16.
+    component.onDigitDisplayCenterChange({ num: 3n, den: 16n }); // 0.75
     expect(component.realTarget()).toBe(0.75);
     expect(component.reverseReal()).toBe(0.75);
     expect(component.binaryString()).toBe('1100');
@@ -163,7 +164,7 @@ describe('BerkovichEncodingComponent', () => {
   it('should correctly encode x = 0.4160 to 0110 binary digits and 13/32 rational center', () => {
     component.setRealTarget(0.4160);
     expect(component.binaryString()).toBe('0110');
-    expect(component.currentRationalCenter()).toEqual({ num: 13n, den: 32n });
+    expect(component.currentRationalCenter()).toEqual({ num: 3n, den: 8n });
     const steps = component.steps();
     expect(steps.length).toBe(4);
     expect(steps[0].bit).toBe(0);
diff --git a/animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding.component.ts b/animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding.component.ts
index 22fa6be..c0cd183 100644
--- a/animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding.component.ts
+++ b/animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding.component.ts
@@ -30,7 +30,7 @@ import { MarkdownComponent } from 'ngx-markdown';
 
 import { BerkovichHeaderComponent } from '../berkovich-header/berkovich-header.component';
 import { BerkovichEncodingTreeVisComponent } from './berkovich-encoding-tree-vis.component';
-import { Rational, formatRational } from '../../../lib/berkovich/berkovich';
+import { Rational, formatRational, getAlignedDigits, simplify } from '../../../lib/berkovich/berkovich';
 import {
   BkBinarySearchStep as BinarySearchStep,
   computeBkBinarySearchSteps,
@@ -96,10 +96,21 @@ export class BerkovichEncodingComponent {
     return list.length > 0 ? list[list.length - 1] : null;
   });
 
-  // Current Rational Center at selected precision depth K
+  // Current Rational Center in p-adic digit order for digit display
   readonly currentRationalCenter = computed<Rational>(() => {
-    const final = this.finalStep();
-    return final ? final.rationalCenter : { num: 11n, den: 16n };
+    const stepList = this.steps();
+    const N = this.depth() * 2;
+    const p = BigInt(this.prime());
+    if (!stepList || stepList.length === 0) {
+      return { num: 13n, den: 16n };
+    }
+    let num = 0n;
+    const den = p ** BigInt(N);
+    for (let i = 0; i < stepList.length && i < N; i++) {
+      const bit = BigInt(stepList[i].bit);
+      num += bit * (p ** BigInt(i));
+    }
+    return simplify({ num, den });
   });
 
   readonly binaryString = computed<string>(() => {
@@ -161,12 +172,18 @@ When **use rho normalization** is enabled, the Berkovich radius parameter $\\rho
 
   // Reactive updates when user edits digits directly in BerkovichDigitDisplayComponent
   onDigitDisplayCenterChange(newRational: Rational) {
-    const den = Number(newRational.den);
-    if (den > 0) {
-      const newX = Math.max(0, Math.min(1, Number(newRational.num) / den));
-      this.reverseReal.set(newX);
-      this.realTarget.set(newX);
+    const N = this.depth() * 2;
+    const p = BigInt(this.prime());
+    const aligned = getAlignedDigits(newRational, p, -N, -1);
+    let realX = 0;
+    for (let i = 0; i < N; i++) {
+      const d = aligned.find((item) => item.power === -(i + 1))?.digit ?? 0;
+      const realPower = N - i;
+      realX += d * Math.pow(this.prime(), -realPower);
     }
+    const clamped = Math.max(0, Math.min(1, realX));
+    this.reverseReal.set(clamped);
+    this.realTarget.set(clamped);
   }
 
   onDigitDisplayRhoChange(newRho: number) {