diff --git a/docs/build/build-dapp.md b/docs/build/build-dapp.md
index 7f79e3b8bafa..94115ad53c0d 100644
--- a/docs/build/build-dapp.md
+++ b/docs/build/build-dapp.md
@@ -40,13 +40,18 @@ For front-end applications, several options exist for interfacing with Substrate
 Substrate node:
 
 <!-- prettier-ignore -->
-<Tabs groupId="clients" values={[ {label: 'Polkadot.js', value: 'pjs'}, {label: 'Subxt', value: 'subxt'}, {label: 'React Hooks for ink!', value: 'useink'}, {label: 'ink!athon Boilerplate', value: 'inkathon'}, { label: 'Polkadot Cloud', value: 'pcloud'} ]}>
+<Tabs groupId="clients" values={[ {label: 'Polkadot.js', value: 'pjs'}, { label: 'Polkadot API (under development)', value: 'papi'}, {label: 'Subxt', value: 'subxt'}, {label: 'React Hooks for ink!', value: 'useink'}, {label: 'ink!athon Boilerplate', value: 'inkathon'}, { label: 'Polkadot Cloud', value: 'pcloud'} ]}>
 
 <TabItem value="pjs"> Promise and RxJS APIs around Polkadot and Substrate-based chains via RPC
 calls. It is dynamically generated based on what the Substrate runtime provides regarding metadata.
 Full documentation & examples
 available&nbsp;<a href="https://polkadot.js.org/docs" target="_blank">here</a>. </TabItem>
 
+<TabItem value="papi"> The Polkadot API (formerly known as "CAPI") is currently under development,
+but will serve as a replacement for Polkadot JS. While still under construction, you may view the
+current progress on GitHub
+&nbsp;<a href="https://github.com/paritytech/polkadot-api/" target="_blank">here</a>. </TabItem>
+
 <TabItem value="subxt"> Query and submit extrinsics (transactions) to a Substrate node via RPC using
 Rust. Also referred to as Rust Parity. Full documentation & examples
 available&nbsp;<a href="https://github.com/paritytech/subxt" target="_blank">here</a>. </TabItem>
diff --git a/docs/build/build-guide.md b/docs/build/build-guide.md
index 7e297a20f6d6..c7e0e040dc80 100644
--- a/docs/build/build-guide.md
+++ b/docs/build/build-guide.md
@@ -49,7 +49,7 @@ developmental components. For more inspiration, look at the
     'themeVariables': {
       'fontFamily': 'Unbounded',
       'primaryColor': '#E6007A',
-      'fontSize': '18px',
+      'fontSize': '16px',
       'primaryTextColor': '#fff',
       'primaryBorderColor': '#7C0000',
       'lineColor': '#140523',
@@ -59,24 +59,34 @@ developmental components. For more inspiration, look at the
   }
 }%%
 flowchart TB
-    subgraph PL ["Protocol Side (Parachains, Smart Contracts)"]
-        ST[Build a Blockchain]
-        BSC[Develop a Smart Contract] --> SC[Smart Contract Parachain]
-        SC --> ink!
-        SC --> Solidity
-        ST --> R[WASM Runtime - FRAME]
-        R -->Parachain["Parachain"]-->SSC["Shared Security - Cumulus"]
-        R -->SoloChain[Solo Chain]-->NSS["No Shared Security"]
+    subgraph PL ["Protocol Land (Parachains, Smart Contracts)"]
+
+        subgraph SCD ["Smart Contract Development"]
+          direction LR
+          SC["Use Smart Contract Parachain"]
+          SC --> ink!
+          SC --> Solidity
+        end
+
+        subgraph PSL ["Blockchain Development"]
+           direction LR
+           PS["Polkadot SDK"] --> R[WASM Runtime - Substrate & FRAME]
+           R -->Parachain["Parachain"]-->SSC["Shared Security - Cumulus"]
+           R -->SoloChain[Solo Chain]-->NSS["No Shared Security"]
+        end
     end
 
-    CS-->| Develop apps| PL
+    PL-->| Develop apps| CS
 
-    subgraph CS ["Client Side (dApps/uApps)"]
-        UA[UApp - Smoldot]
-        UA --> CAPI
+    subgraph CS ["Client/User Land (dApps/uApps)"]
+        LC["Light Clients (Smoldot)"]
+        UA[uApp]
+        UA --> PAPI[Polkadot API]
         UA --> PJS[Polkadot JS]
         UA --> SubXT
-        SubXT
+        PAPI --> LC
+        PJS --> LC
+        SubXT --> LC
     end
 ```