diff --git a/frontend/src/app/components/api-docs/api-docs.component.html b/frontend/src/app/components/api-docs/api-docs.component.html
index fe5708997..a08c6cffc 100644
--- a/frontend/src/app/components/api-docs/api-docs.component.html
+++ b/frontend/src/app/components/api-docs/api-docs.component.html
@@ -5,8 +5,32 @@
   </div>
 
   <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
-
     <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="0">
+      <a ngbNavLink i18n="api-docs.tab.general|API Docs tab for General">General</a>
+      <ng-template ngbNavContent>
+        <ngb-accordion [closeOthers]="true" animated="true" type="dark">
+          <ngb-panel id="difficultyAdjustment" *ngIf="network.val !== 'liquid'">
+            <ng-template ngbPanelTitle>
+              <span>GET Difficulty Adjustment</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="difficulty">
+                <div class="endpoint">
+                  <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                  <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/difficulty-adjustment" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/difficulty-adjustment</a>
+                </div>
+                <div class="description">
+                  <div class="subtitle" i18n>Description</div>
+                    <div i18n>Returns details about difficulty adjustment.</div>
+                </div> 
+                <app-code-template [code]="code.difficulty" [network]="network.val" ></app-code-template>
+              </div>
+            </ng-template>
+          </ngb-panel>
+        </ngb-accordion>
+      </ng-template>
+    </li>
+    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="1">
       <a ngbNavLink i18n="api-docs.tab.addresses|API Docs tab for Addresses">Addresses</a>
       <ng-template ngbNavContent>
         <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
@@ -107,7 +131,7 @@
       </ng-template>
     </li>
 
-    <li *ngIf="network.val === 'liquid'" [ngbNavItem]="1">
+    <li *ngIf="network.val === 'liquid'" [ngbNavItem]="2">
       <a ngbNavLink i18n="api-docs.tab.assets|API Docs tab for Assets">Assets</a>
       <ng-template ngbNavContent>
         <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
@@ -169,7 +193,7 @@
       </ng-template>
     </li>
 
-    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="2">
+    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="3">
       <a ngbNavLink i18n="api-docs.tab.blocks|API Docs tab for Blocks">Blocks</a>
       <ng-template ngbNavContent>
         <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
@@ -384,6 +408,46 @@
       </ng-template>
     </li>
 
+    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="4">
+      <a ngbNavLink i18n="api-docs.tab.fees|API Docs tab for Fees">Fees</a>
+      <ng-template ngbNavContent>
+        <ngb-accordion [closeOthers]="true" animated="true" type="dark">
+          <ngb-panel id="mempoolBlocks">
+            <ng-template ngbPanelTitle>
+              <span>GET Mempool Blocks</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/mempool-blocks" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/mempool-blocks</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n="api-docs.fees.mempool-blocks|API Docs for /api/v1/fees/mempool-blocks">Returns current mempool as projected blocks.</div>
+              </div>
+              <app-code-template [code]="code.mempoolBlocks" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+          <ngb-panel id="recommendedFees">
+            <ng-template ngbPanelTitle>
+              <span>GET Recommended Fees</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/recommended" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/recommended</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n="api-docs.fees.recommended|API Docs for /api/v1/fees/recommended">Returns our currently suggested fees for new transactions.</div>
+              </div>
+              <app-code-template [code]="code.recommendedFees" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+        </ngb-accordion>
+      </ng-template>
+    </li>
+
     <li *ngIf="network.val === 'bisq'" [ngbNavItem]="0">
       <a ngbNavLink i18n="api-docs.tab.bsq|API Docs tab for BSQ">BSQ</a>
       <ng-template ngbNavContent>
@@ -533,62 +597,6 @@
       </ng-template>
     </li>
 
-    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="4">
-      <a ngbNavLink i18n="api-docs.tab.fees|API Docs tab for Fees">Fees</a>
-      <ng-template ngbNavContent>
-        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
-          <ngb-panel id="recommendedFees">
-            <ng-template ngbPanelTitle>
-              <span>GET Recommended Fees</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
-              <div class="endpoint">
-                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/recommended" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/recommended</a>
-              </div>
-              <div class="description">
-                <div class="subtitle" i18n>Description</div>
-                <div i18n="api-docs.fees.recommended|API Docs for /api/v1/fees/recommended">Returns our currently suggested fees for new transactions.</div>
-              </div>
-              <app-code-template [code]="code.recommendedFees" [network]="network.val" ></app-code-template>
-            </ng-template>
-          </ngb-panel>
-          <ngb-panel id="mempoolBlocks">
-            <ng-template ngbPanelTitle>
-              <span>GET Mempool Blocks</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
-              <div class="endpoint">
-                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/mempool-blocks" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/mempool-blocks</a>
-              </div>
-              <div class="description">
-                <div class="subtitle" i18n>Description</div>
-                <div i18n="api-docs.fees.mempool-blocks|API Docs for /api/v1/fees/mempool-blocks">Returns current mempool as projected blocks.</div>
-              </div>
-              <app-code-template [code]="code.mempoolBlocks" [network]="network.val" ></app-code-template>
-            </ng-template>
-          </ngb-panel>
-          <ngb-panel id="cpfp">
-            <ng-template ngbPanelTitle>
-              <span>GET Children Pay for Parent</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
-              <div class="endpoint">
-                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/cpfp/TXID" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/cpfp/:txid</a>
-              </div>
-              <div class="description">
-                <div class="subtitle" i18n>Description</div>
-                <div i18n="api-docs.fees.cpfp|API Docs for /api/v1/fees/cpfp">Returns the ancestors and the best descendant fees for a transaction.</div>
-              </div>
-              <app-code-template [code]="code.cpfp" [network]="network.val" ></app-code-template>
-            </ng-template>
-          </ngb-panel>
-        </ngb-accordion>
-      </ng-template>
-    </li>
-
     <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="5">
       <a ngbNavLink i18n="api-docs.tab.mempool|API Docs tab for Mempool">Mempool</a>
       <ng-template ngbNavContent>
@@ -653,6 +661,24 @@
       <a ngbNavLink i18n="api-docs.tab.transactions|API Docs tab for Transactions">Transactions</a>
       <ng-template ngbNavContent>
         <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
+
+          <ngb-panel id="cpfp">
+            <ng-template ngbPanelTitle>
+              <span>GET Children Pay for Parent</span>
+            </ng-template>
+            <ng-template ngbPanelContent>
+              <div class="endpoint">
+                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
+                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/cpfp/TXID" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/cpfp/:txid</a>
+              </div>
+              <div class="description">
+                <div class="subtitle" i18n>Description</div>
+                <div i18n="api-docs.fees.cpfp|API Docs for /api/v1/fees/cpfp">Returns the ancestors and the best descendant fees for a transaction.</div>
+              </div>
+              <app-code-template [code]="code.cpfp" [network]="network.val" ></app-code-template>
+            </ng-template>
+          </ngb-panel>
+
           <ngb-panel id="transaction">
             <ng-template ngbPanelTitle>
               <span>GET Transaction</span>
@@ -842,24 +868,6 @@
         </div>
       </ng-template>
     </li>
-
-    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="8">
-      <a ngbNavLink i18n="api-docs.tab.difficulty|API Docs tab for Difficulty">Difficulty</a>
-      <ng-template ngbNavContent >
-        <div class="difficulty">
-          <div class="endpoint">
-            <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-            <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/difficulty-adjustment" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/difficulty-adjustment</a>
-          </div>
-          <div class="description">
-            <div class="subtitle" i18n>Description</div>
-              <div i18n>Returns details about difficulty adjustment.</div>
-          </div> 
-          <app-code-template [code]="code.difficulty" [network]="network.val" ></app-code-template>
-        </div>
-      </ng-template>
-    </li>
-
   </ul>
 
   <div [ngbNavOutlet]="nav" class="mt-2"></div>
diff --git a/frontend/src/app/components/api-docs/api-docs.component.ts b/frontend/src/app/components/api-docs/api-docs.component.ts
index 27f4b0fdf..6be8bc816 100644
--- a/frontend/src/app/components/api-docs/api-docs.component.ts
+++ b/frontend/src/app/components/api-docs/api-docs.component.ts
@@ -178,8 +178,14 @@ export class ApiDocsComponent implements OnInit {
       },
       blockHeader: {
         codeSample: {
-          esModule: `//to be added`,
-          commonJS: `//to be added`,
+          esModule: `const { %{1}: { blocks } } = mempoolJS();
+
+  const blockHeader = await blocks.getBlockHeader({ hash: '0000000000000000000065bda8f8a88f2e1e00d9a6887a43d640e52a4c7660f2' });
+  console.log(blockHeader);`,
+          commonJS: `const { %{1}: { blocks } } = mempoolJS();
+
+        const blockHeight = await blocks.getBlockHeight({ height: 0 });
+        console.log(blockHeight);`,
           curl: `curl -X GET "https://mempool.space/api/block/:hash/header"`,
         },
         responseSample: `040000202c04d4c450187d1da9b1bc23ba47d67fe028d22486fd0c00000000000000000059a3a33d4642c799af9f54a4dd351fff9130e6a89d4e251130c60064878616e906b5ea60ce9813173a25caf3`,
@@ -1137,16 +1143,23 @@ responseSample: `{
 
      difficulty: {
       codeSample: {
-        esModule:``,
-        commonJS:``,
-        curl: `curl -X GET "https://mempool.space/api/difficulty-adjustment"`,
+        esModule:`const { bitcoin: { difficulty } } = mempoolJS();
+
+  const difficultyAdjustment = await difficulty.getDifficultyAdjustment();
+  console.log(difficultyAdjustment);`,
+        commonJS:`const { bitcoin: { difficulty } } = mempoolJS();
+
+        const difficultyAdjustment = await difficulty.getDifficultyAdjustment();
+        console.log(difficultyAdjustment);`,
+        curl: `curl -X GET "https://mempool.space/api/v1/difficulty-adjustment"`,
       },
       responseSample: `{
-        progressPercent: 18.55392610846515,
-        difficultyChange: -1.2440503501069622,
-        estimatedRetargetDate: 1627400849.2000492,
-        remainingBlocks: 1642,
-        remainingTime: 997456.3840492539
+  progressPercent: 44.397234501112074,
+  difficultyChange: 0.9845932018381687,
+  estimatedRetargetDate: 1627762478.9111245,
+  remainingBlocks: 1121,
+  remainingTime: 665977.6261244365,
+  previousRetarget: -4.807005268478962
 }`,
     },
     
diff --git a/frontend/src/app/components/api-docs/code-template.component.html b/frontend/src/app/components/api-docs/code-template.component.html
index 970e228cd..a438dc537 100644
--- a/frontend/src/app/components/api-docs/code-template.component.html
+++ b/frontend/src/app/components/api-docs/code-template.component.html
@@ -12,7 +12,7 @@
       <ng-template ngbNavContent>
         <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapCommonJS(code.codeSample.commonJS)"></app-clipboard></div>
         <div class="links">
-          <a href="https://github.com/mempool/mempool.js">github repository</a>
+          <a href="https://github.com/mempool/mempool.js" target="_blank">github repository</a>
         </div>
         <pre><code [innerText]="wrapCommonJS(code.codeSample.commonJS)"></code></pre>
       </ng-template>
@@ -22,8 +22,8 @@
       <ng-template ngbNavContent>
         <div class="subtitle"><ng-container i18n="API Docs install lib">Install Package</ng-container> <app-clipboard [text]="esModuleInstall"></app-clipboard></div>
         <div class="links">
-          <a href="https://github.com/mempool/mempool.js">github repository</a>
-          <a href="https://www.npmjs.org/package/@mempool/mempool.js">npm package</a>
+          <a href="https://github.com/mempool/mempool.js" target="_blank">github repository</a>
+          <a href="https://www.npmjs.org/package/@mempool/mempool.js" target="_blank">npm package</a>
         </div>
         <pre><code [innerText]="esModuleInstall"></code></pre>
         <div class="subtitle"><ng-container i18n="API Docs code example">Code Example</ng-container> <app-clipboard [text]="wrapESmodule(code.codeSample.esModule)"></app-clipboard></div>