diff --git a/frontend/src/lib/components/common/JsonPreview.svelte b/frontend/src/lib/components/common/JsonPreview.svelte
index 05aa8f99d2c..dd0295a4908 100644
--- a/frontend/src/lib/components/common/JsonPreview.svelte
+++ b/frontend/src/lib/components/common/JsonPreview.svelte
@@ -7,6 +7,7 @@
   import RawJson from "$lib/components/common/RawJson.svelte";
   import { fade } from "svelte/transition";
   import { jsonRepresentationModeStore } from "$lib/derived/json-representation.derived";
+  import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
 
   const DEFAULT_EXPANDED_LEVEL = 1;
 
@@ -27,36 +28,38 @@
   };
 </script>
 
-<div class="content-cell-island markdown-container">
-  {#if $jsonRepresentationModeStore === "tree"}
-    <div class="json" data-tid="json-wrapper" in:fade>
-      {#if isExpandedAllVisible}
-        <button class="ghost expand-all" on:click={toggleExpanded}>
-          {#if isAllExpanded}
-            <div in:fade>
-              <IconCollapseAll />
-              <span class="expand-all-label">{$i18n.core.collapse_all}</span>
-            </div>
-          {:else}
-            <div in:fade>
-              <IconExpandAll />
-              <span class="expand-all-label">{$i18n.core.expand_all}</span>
-            </div>
-          {/if}
-        </button>
+<div class="content-cell-island markdown-container" data-tid="json-wrapper">
+  {#if $jsonRepresentationModeStore === "tree" && isExpandedAllVisible}
+    <button class="ghost expand-all" on:click={toggleExpanded}>
+      {#if isAllExpanded}
+        <div in:fade>
+          <IconCollapseAll />
+          <span class="expand-all-label">{$i18n.core.collapse_all}</span>
+        </div>
+      {:else}
+        <div in:fade>
+          <IconExpandAll />
+          <span class="expand-all-label">{$i18n.core.expand_all}</span>
+        </div>
       {/if}
-      <TreeJson
-        json={expandedData}
-        defaultExpandedLevel={isAllExpanded
-          ? Number.MAX_SAFE_INTEGER
-          : DEFAULT_EXPANDED_LEVEL}
-      />
-    </div>
-  {:else}
-    <div in:fade>
-      <RawJson {json} />
-    </div>
+    </button>
   {/if}
+  <div class="json-container">
+    <TestIdWrapper testId="json-wrapper">
+      {#if $jsonRepresentationModeStore === "tree"}
+        <div in:fade>
+          <TreeJson
+            json={expandedData}
+            defaultExpandedLevel={isAllExpanded ? Number.MAX_SAFE_INTEGER : 1}
+          />
+        </div>
+      {:else}
+        <div in:fade>
+          <RawJson {json} />
+        </div>
+      {/if}
+    </TestIdWrapper>
+  </div>
 </div>
 
 <style lang="scss">
@@ -65,8 +68,8 @@
   .expand-all {
     padding: 0;
     position: absolute;
-    right: var(--padding-0_5x);
-    top: var(--padding-0_5x);
+    right: var(--padding-2x);
+    top: var(--padding-2x);
 
     div {
       display: flex;
@@ -83,10 +86,11 @@
     }
   }
 
-  .json {
-    // needs for the expand all button
-    position: relative;
-    word-break: break-word;
+  .json-container {
+    // json content scrolling
+    overflow-x: auto;
+    // same as "content-cell-island"
+    padding: var(--padding-2x);
   }
 
   // TODO(max): rename and move to gix-components
@@ -94,5 +98,10 @@
     // custom island styles
     background: var(--card-background-disabled);
     color: var(--description-color);
+
+    // reset "content-cell-island" padding
+    padding: 0;
+    // to place expand-all button
+    position: relative;
   }
 </style>
diff --git a/frontend/src/lib/components/common/RawJson.svelte b/frontend/src/lib/components/common/RawJson.svelte
index 714cc994e26..f9e5bbf9ed8 100644
--- a/frontend/src/lib/components/common/RawJson.svelte
+++ b/frontend/src/lib/components/common/RawJson.svelte
@@ -17,7 +17,6 @@
 
   pre {
     margin: 0;
-    overflow-x: auto;
     @include fonts.small;
   }
 </style>
diff --git a/frontend/src/lib/components/common/TreeJson.svelte b/frontend/src/lib/components/common/TreeJson.svelte
index 1afafa39c77..1def6e905c3 100644
--- a/frontend/src/lib/components/common/TreeJson.svelte
+++ b/frontend/src/lib/components/common/TreeJson.svelte
@@ -2,13 +2,19 @@
   import { i18n } from "$lib/stores/i18n";
   import { IconExpandMore } from "@dfinity/gix-components";
   import TreeJsonValue from "$lib/components/common/TreeJsonValue.svelte";
-  import { getTreeJsonValueRenderType } from "$lib/utils/json.utils";
+  import {
+    getTreeJsonValueRenderType,
+    type TreeJsonValueType,
+  } from "$lib/utils/json.utils";
   import { fade } from "svelte/transition";
+  import { typeOfLikeANumber } from "$lib/utils/utils";
 
   export let json: unknown | undefined = undefined;
   export let defaultExpandedLevel = Infinity;
   export let _key: string | undefined = undefined;
   export let _level = 0;
+  // because the child doesn't know if its parent type
+  export let _isArrayEntry: boolean | undefined = undefined;
 
   let keyLabel: string;
   let children: [string, unknown][];
@@ -19,8 +25,10 @@
   let root: boolean;
   let keyRoot: boolean;
   let testId: "json" | undefined;
+  let valueType: TreeJsonValueType;
   $: {
-    isExpandable = getTreeJsonValueRenderType(json) === "object";
+    valueType = getTreeJsonValueRenderType(json);
+    isExpandable = valueType === "object";
     keyLabel = `${_key ?? ""}`;
     children = isExpandable ? Object.entries(json as object) : [];
     hasChildren = children.length > 0;
@@ -36,7 +44,7 @@
   $: collapsed = _level >= defaultExpandedLevel;
 
   let keyIsIndex = false;
-  $: keyIsIndex = !isNaN(Number(_key));
+  $: keyIsIndex = typeOfLikeANumber(_key) || (_isArrayEntry ?? false);
 
   const toggle = () => (collapsed = !collapsed);
 </script>
@@ -46,13 +54,13 @@
   {#if _level > 0 && keyLabel}
     <!-- expandable-key-->
     <div
-      class="key key--expandable"
+      class="key expandable"
       class:root={keyRoot}
-      class:key--is-index={keyIsIndex}
+      class:key-is-index={keyIsIndex}
     >
       <button
         class="icon-only expand-button"
-        class:expand-button--expanded={!collapsed}
+        class:is-expandable={!collapsed}
         data-tid={testId}
         aria-label={$i18n.core.toggle}
         tabindex="0"
@@ -67,12 +75,13 @@
     <!-- children of expandable-key -->
     <ul class:root class:is-array={isArray} in:fade>
       {#each children as [key, value]}
-        <li class:root>
+        <li class:root class:key-is-index={keyIsIndex}>
           <svelte:self
             json={value}
             _key={key}
             {defaultExpandedLevel}
             _level={_level + 1}
+            _isArrayEntry={isArray}
           />
         </li>
       {/each}
@@ -80,23 +89,22 @@
   {/if}
 {:else if isExpandable}
   <!-- expandable w/o children - key+{}|[] -->
-  <span data-tid={testId} class="key-value">
+  <span data-tid={testId} class="key-value" class:key-is-index={keyIsIndex}>
     {#if keyLabel !== ""}<span
-        class="key key--no-expand-button"
+        class="key"
         class:root={keyRoot}
-        class:key--is-index={keyIsIndex}>{keyLabel}</span
+        class:key-is-index={_isArrayEntry}>{keyLabel}</span
       >{/if}
     <span class="value">{emptyExpandableValue}</span>
   </span>
 {:else}
   <!-- key+value -->
-  <span class="key-value">
-    {#if keyLabel !== ""}<span
-        class="key key--no-expand-button"
-        class:root={keyRoot}
-        class:key--is-index={keyIsIndex}>{keyLabel}</span
-      >{/if}
-    <TreeJsonValue data={json} key={_key} />
+  <span class={`key-value ${valueType}`} class:key-is-index={keyIsIndex}>
+    {#if keyLabel !== ""}
+      <span class="key" class:key-is-index={keyIsIndex} class:root={keyRoot}>
+        {keyLabel}
+      </span>{/if}
+    <TreeJsonValue data={json} key={_key} {valueType} />
   </span>
 {/if}
 
@@ -124,10 +132,23 @@
     display: flex;
     align-items: center;
 
+    // To improve long lines mobile readability
+    flex-wrap: wrap;
+    row-gap: calc(var(--padding-0_5x) / 2);
+
     // To have at least the same height as IconExpandMore
     min-height: 28px;
     // icon gap compensation
     margin-left: 6px;
+
+    // don't wrap array entries because keys are short (`0: "..."`)
+    &.key-is-index {
+      flex-wrap: nowrap;
+    }
+    // don't wrap images because of broken zoom animation
+    &.base64Encoding {
+      flex-wrap: nowrap;
+    }
   }
 
   .key {
@@ -138,12 +159,12 @@
     @include fonts.standard(true);
     color: var(--content-color);
 
-    &.key--expandable {
+    &.expandable {
       margin-right: 0;
       // no icon gap compensation
       margin-left: 0;
     }
-    &.key--is-index {
+    &.key-is-index {
       // monospace for array indexes to avoid different widths
       font-family: monospace;
     }
@@ -153,7 +174,7 @@
     transform: rotate(-90deg);
     transition: transform ease-out var(--animation-time-normal);
 
-    &--expanded {
+    &.is-expandable {
       transform: rotate(0);
     }
   }
diff --git a/frontend/src/lib/components/common/TreeJsonValue.svelte b/frontend/src/lib/components/common/TreeJsonValue.svelte
index 7c6c7fecfcb..74d0c6a1bd1 100644
--- a/frontend/src/lib/components/common/TreeJsonValue.svelte
+++ b/frontend/src/lib/components/common/TreeJsonValue.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
   import { Html } from "@dfinity/gix-components";
   import type { TreeJsonValueType } from "$lib/utils/json.utils";
-  import { getTreeJsonValueRenderType } from "$lib/utils/json.utils";
-  import { stringifyJson } from "$lib/utils/utils.js";
+  import { splitE8sIntoChunks, stringifyJson } from "$lib/utils/utils.js";
+  import { i18n } from "$lib/stores/i18n";
 
   // To avoid having quotes around all the value types
-  const formatData = (value: unknown) => {
-    const valueType = getTreeJsonValueRenderType(value);
+  const formatE8s = (data: unknown): string[] =>
+    splitE8sIntoChunks((data as Record<"e8s", unknown>)?.e8s);
+  const formatData = (value: unknown): string => {
     if (valueType === "base64Encoding") {
-      return (data as { [key: string]: unknown })["base64Encoding"];
+      return (data as { [key: string]: unknown })["base64Encoding"] as string;
+    }
+    // TODO(max): think about moving to a separate component
+    if (valueType === "basisPoints") {
+      return `${(data as { [basisPoints: string]: unknown }).basisPoints}`;
+    }
+    if (valueType === "seconds") {
+      return `${(data as { [seconds: string]: unknown }).seconds}`;
     }
     if (
       (
@@ -30,11 +38,9 @@
 
   export let data: unknown | undefined = undefined;
   export let key: string | undefined = undefined;
+  export let valueType: TreeJsonValueType;
 
-  let valueType: TreeJsonValueType;
-  $: valueType = getTreeJsonValueRenderType(data);
-
-  let value: unknown;
+  let value: string | undefined;
   $: value = formatData(data);
 
   let title: string | undefined;
@@ -46,6 +52,24 @@
   <Html
     text={`<img class="value ${valueType}" alt="${key}" src="${value}" loading="lazy" />`}
   />
+{:else if valueType === "seconds"}
+  <span class="value {valueType}" {title}
+    >{value}
+    <span class="unit">{$i18n.proposal_detail.json_unit_seconds}</span>
+  </span>
+{:else if valueType === "e8s"}
+  <span class="value {valueType}" {title}>
+    {#each formatE8s(data) as chunk}
+      <span>{chunk}</span>
+    {/each}
+    <span class="unit">{$i18n.proposal_detail.json_unit_e8s}</span>
+  </span>
+{:else if valueType === "basisPoints"}
+  <span class="value {valueType}" {title}
+    >{value}
+    <span class="unit">{$i18n.proposal_detail.json_unit_basis_points}</span
+    ></span
+  >
 {:else}
   <span class="value {valueType}" {title}>{value}</span>
 {/if}
@@ -53,34 +77,21 @@
 <style lang="scss">
   @use "@dfinity/gix-components/dist/styles/mixins/fonts";
 
-  .key {
-    display: flex;
+  .value {
+    color: var(--description-color);
+
+    // for chunks and units
+    display: inline-flex;
     align-items: center;
-    margin-right: var(--padding-2x);
+    gap: var(--padding-0_5x);
 
-    @include fonts.standard(true);
-    color: var(--content-color);
+    // keep lines (scroll horizontally)
+    white-space: nowrap;
 
-    &.root {
-      @include fonts.h4();
+    .unit {
+      margin-left: var(--padding-0_5x);
+      @include fonts.small(false);
     }
-    &.key--expandable {
-      margin-right: 0;
-      // no icon gap compensation
-      margin-left: 0;
-    }
-    &.key--is-index {
-      // monospace for array indexes to avoid different widths
-      font-family: monospace;
-    }
-  }
-
-  .value {
-    // better shrink the value than the key
-    flex: 1 1 0;
-    // We want to break the value, so that the keys stay on the same line.
-    word-break: break-all;
-    color: var(--description-color);
   }
 
   // base64 encoded image
diff --git a/frontend/src/lib/components/proposal-detail/ProposalProposerActionsEntry.svelte b/frontend/src/lib/components/proposal-detail/ProposalProposerActionsEntry.svelte
index c25eb298e5c..fd30ad1ef01 100644
--- a/frontend/src/lib/components/proposal-detail/ProposalProposerActionsEntry.svelte
+++ b/frontend/src/lib/components/proposal-detail/ProposalProposerActionsEntry.svelte
@@ -28,7 +28,9 @@
         </h2>
         <Copy value={copyContent} />
       </div>
-      <TreeRawToggle />
+      <div class="toggle">
+        <TreeRawToggle />
+      </div>
     </div>
 
     <div
@@ -56,11 +58,19 @@
 
 <style lang="scss">
   @use "@dfinity/gix-components/dist/styles/mixins/fonts";
+  @use "@dfinity/gix-components/dist/styles/mixins/text";
 
   .header-text {
     display: flex;
     align-items: center;
     @include fonts.h3;
+
+    @include text.clamp(1);
+  }
+
+  .toggle {
+    // compensate toggle and toggle inner buttons padding. Is important when cols wrap on mobile.
+    margin: 0 calc(var(--padding-0_5x) * -2);
   }
 
   .header {
@@ -68,6 +78,9 @@
     justify-content: space-between;
     align-items: center;
 
+    flex-wrap: wrap;
+    row-gap: var(--padding);
+
     .title-copy {
       display: flex;
       align-items: center;
diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json
index 60e54371b3e..46e13415c62 100644
--- a/frontend/src/lib/i18n/en.json
+++ b/frontend/src/lib/i18n/en.json
@@ -534,6 +534,9 @@
     "toggle_lable": "Switch between user-friendly and raw data representation",
     "toggle_tree": "Tree",
     "toggle_raw": "Raw",
+    "json_unit_basis_points": "basis points",
+    "json_unit_seconds": "seconds",
+    "json_unit_e8s": "e8s",
     "id": "ID"
   },
   "proposal_detail__vote": {
diff --git a/frontend/src/lib/types/i18n.d.ts b/frontend/src/lib/types/i18n.d.ts
index 42c19ecba4a..c2fc6d11dfa 100644
--- a/frontend/src/lib/types/i18n.d.ts
+++ b/frontend/src/lib/types/i18n.d.ts
@@ -554,6 +554,9 @@ interface I18nProposal_detail {
   toggle_lable: string;
   toggle_tree: string;
   toggle_raw: string;
+  json_unit_basis_points: string;
+  json_unit_seconds: string;
+  json_unit_e8s: string;
   id: string;
 }
 
diff --git a/frontend/src/lib/utils/json.utils.ts b/frontend/src/lib/utils/json.utils.ts
index a5a22c864df..d8a7cc8793e 100644
--- a/frontend/src/lib/utils/json.utils.ts
+++ b/frontend/src/lib/utils/json.utils.ts
@@ -1,4 +1,4 @@
-import { isHash, isPrincipal } from "$lib/utils/utils";
+import { isHash, isPrincipal, typeOfLikeANumber } from "$lib/utils/utils";
 
 export type TreeJsonValueType =
   | "bigint"
@@ -12,7 +12,14 @@ export type TreeJsonValueType =
   | "string"
   | "symbol"
   | "base64Encoding"
-  | "undefined";
+  | "undefined"
+  // units-only nodes
+  // sample: { "seconds": 1000000000 }
+  | "seconds"
+  // sample: { "e8s": 1000000000 }
+  | "e8s"
+  // sample: { "basisPoints": 1000000000 }
+  | "basisPoints";
 
 /**
  * Returns the type of the value for the TreeJson&TreeJsonValue components.
@@ -25,10 +32,24 @@ export const getTreeJsonValueRenderType = (
   if (isPrincipal(value)) return "principal";
   if (Array.isArray(value) && isHash(value)) return "hash";
   // not null was already checked above
-  if (
-    typeof value === "object" &&
-    Object.keys(value as object)[0] === "base64Encoding"
-  )
-    return "base64Encoding";
+  if (typeof value === "object") {
+    const keys = Object.keys(value);
+
+    if (keys[0] === "base64Encoding") {
+      return "base64Encoding";
+    }
+
+    // check for unit-only nodes (e.g. { "e8s": 1000000000 })
+    if (keys.length === 1) {
+      const key = keys[0];
+      const keyValue = (value as Record<string, unknown>)[key];
+      if (
+        ["e8s", "seconds", "basisPoints"].includes(key) &&
+        typeOfLikeANumber(keyValue)
+      ) {
+        return key as TreeJsonValueType;
+      }
+    }
+  }
   return typeof value;
 };
diff --git a/frontend/src/lib/utils/utils.ts b/frontend/src/lib/utils/utils.ts
index fe9173bf2df..5c1da060096 100644
--- a/frontend/src/lib/utils/utils.ts
+++ b/frontend/src/lib/utils/utils.ts
@@ -439,3 +439,29 @@ export const getObjMaxDepth = (obj: unknown): number => {
 
   return 1 + childrenMaxDepth; // Add 1 for the current level.
 };
+
+export const typeOfLikeANumber = (value: unknown): boolean =>
+  typeof value === "number" ||
+  typeof value === "bigint" ||
+  (typeof value === "string" && value.length > 0 && !isNaN(Number(value)));
+
+/**
+ * Split a value into 8 characters chunks
+ * @example
+ * 00001111222233334444 --> ["0000", "11112222", "33334444"]
+ */
+export const splitE8sIntoChunks = (value: unknown): string[] => {
+  if (!typeOfLikeANumber(value)) {
+    console.error("splitE8sIntoChunks: value is not a number");
+    return [`${stringifyJson(value)}`];
+  }
+
+  const chars = `${value}`.split("");
+  const chunks: string[] = [];
+  for (let i = chars.length; i > 0; i -= 8) {
+    const chunk = chars.slice(Math.max(i - 8, 0), i);
+    chunks.unshift(chunk.join(""));
+  }
+
+  return chunks;
+};
diff --git a/frontend/src/tests/lib/utils/utils.spec.ts b/frontend/src/tests/lib/utils/utils.spec.ts
index 359d7c3a250..f9139a783a2 100644
--- a/frontend/src/tests/lib/utils/utils.spec.ts
+++ b/frontend/src/tests/lib/utils/utils.spec.ts
@@ -14,7 +14,9 @@ import {
   removeKeys,
   sameBufferData,
   smallerVersion,
+  splitE8sIntoChunks,
   stringifyJson,
+  typeOfLikeANumber,
   uniqueObjects,
 } from "$lib/utils/utils";
 import { mockPrincipal } from "$tests/mocks/auth.store.mock";
@@ -914,4 +916,88 @@ describe("utils", () => {
       expect(getObjMaxDepth(0)).toBe(0);
     });
   });
+
+  describe("typeOfLikeANumber", () => {
+    it("returns true for numbers", () => {
+      expect(typeOfLikeANumber(1)).toBe(true);
+      expect(typeOfLikeANumber(0)).toBe(true);
+      expect(typeOfLikeANumber(0.001)).toBe(true);
+      expect(typeOfLikeANumber(-1)).toBe(true);
+    });
+
+    it("returns true for bigint", () => {
+      expect(
+        typeOfLikeANumber(99999999999999999999999999999999999999999999n)
+      ).toBe(true);
+    });
+
+    it("returns true for stringified number", () => {
+      expect(typeOfLikeANumber("1")).toBe(true);
+      expect(typeOfLikeANumber("0")).toBe(true);
+      expect(typeOfLikeANumber("0.001")).toBe(true);
+      expect(typeOfLikeANumber("-1")).toBe(true);
+      expect(typeOfLikeANumber("+1")).toBe(true);
+    });
+
+    it("returns false for empty string", () => {
+      expect(typeOfLikeANumber("")).toBe(false);
+    });
+
+    it("returns false for not numbers", () => {
+      expect(typeOfLikeANumber("test")).toBe(false);
+      expect(typeOfLikeANumber("123sec")).toBe(false);
+      expect(typeOfLikeANumber([])).toBe(false);
+      expect(typeOfLikeANumber({})).toBe(false);
+    });
+  });
+
+  describe("splitE8sIntoChunks", () => {
+    it("should split strings", () => {
+      expect(splitE8sIntoChunks("12345678")).toStrictEqual(["12345678"]);
+      expect(splitE8sIntoChunks("1234567890")).toStrictEqual([
+        "12",
+        "34567890",
+      ]);
+      expect(splitE8sIntoChunks("12345678901234567890")).toStrictEqual([
+        "1234",
+        "56789012",
+        "34567890",
+      ]);
+    });
+
+    it("should split number", () => {
+      expect(splitE8sIntoChunks(12345678)).toStrictEqual(["12345678"]);
+      expect(splitE8sIntoChunks(1234567890)).toStrictEqual(["12", "34567890"]);
+      expect(splitE8sIntoChunks(45678901234567890)).toStrictEqual([
+        "4",
+        "56789012",
+        "34567890",
+      ]);
+    });
+
+    it("should split bigints", () => {
+      expect(splitE8sIntoChunks(12345678n)).toStrictEqual(["12345678"]);
+      expect(splitE8sIntoChunks(1234567890n)).toStrictEqual(["12", "34567890"]);
+      expect(splitE8sIntoChunks(123456789n)).toStrictEqual(["1", "23456789"]);
+      expect(splitE8sIntoChunks(12345678901234567890n)).toStrictEqual([
+        "1234",
+        "56789012",
+        "34567890",
+      ]);
+    });
+
+    it("should not split short values", () => {
+      expect(splitE8sIntoChunks(0)).toStrictEqual(["0"]);
+      expect(splitE8sIntoChunks(12345678)).toStrictEqual(["12345678"]);
+    });
+
+    it("should not split not numbers", () => {
+      expect(splitE8sIntoChunks(NaN)).toStrictEqual(["NaN"]);
+      expect(splitE8sIntoChunks("")).toStrictEqual([`""`]);
+      expect(splitE8sIntoChunks(null)).toStrictEqual(["null"]);
+      expect(splitE8sIntoChunks(undefined)).toStrictEqual(["undefined"]);
+      expect(splitE8sIntoChunks([])).toStrictEqual(["[]"]);
+      expect(splitE8sIntoChunks({})).toStrictEqual(["{}"]);
+    });
+  });
 });