diff --git a/lnbits/extensions/example/__init__.py b/lnbits/extensions/example/__init__.py
index f90fa4907..8cd9211b3 100644
--- a/lnbits/extensions/example/__init__.py
+++ b/lnbits/extensions/example/__init__.py
@@ -1,4 +1,5 @@
 import asyncio
+
 from fastapi import APIRouter
 from fastapi.staticfiles import StaticFiles
 
@@ -22,10 +23,12 @@ example_static_files = [
 def example_renderer():
     return template_renderer(["lnbits/extensions/example/templates"])
 
+
 from .tasks import wait_for_paid_invoices
 from .views import *
 from .views_api import *
 
+
 def tpos_start():
     loop = asyncio.get_event_loop()
-    loop.create_task(catch_everything_and_restart(wait_for_paid_invoices))
\ No newline at end of file
+    loop.create_task(catch_everything_and_restart(wait_for_paid_invoices))
diff --git a/lnbits/extensions/example/crud.py b/lnbits/extensions/example/crud.py
index 5540c5ec1..8e5508fb5 100644
--- a/lnbits/extensions/example/crud.py
+++ b/lnbits/extensions/example/crud.py
@@ -2,4 +2,4 @@
 
 # add your dependencies here
 
-# add your fnctions here
\ No newline at end of file
+# add your fnctions here
diff --git a/lnbits/extensions/example/static/conversion-example.png b/lnbits/extensions/example/static/conversion-example.png
new file mode 100644
index 000000000..544e6335c
Binary files /dev/null and b/lnbits/extensions/example/static/conversion-example.png differ
diff --git a/lnbits/extensions/example/static/conversion-example2.png b/lnbits/extensions/example/static/conversion-example2.png
new file mode 100644
index 000000000..7543fdc9e
Binary files /dev/null and b/lnbits/extensions/example/static/conversion-example2.png differ
diff --git a/lnbits/extensions/example/static/vuejslogo.png b/lnbits/extensions/example/static/vuejslogo.png
index fe23ad992..065c4a897 100644
Binary files a/lnbits/extensions/example/static/vuejslogo.png and b/lnbits/extensions/example/static/vuejslogo.png differ
diff --git a/lnbits/extensions/example/tasks.py b/lnbits/extensions/example/tasks.py
index 677b3cff2..923194212 100644
--- a/lnbits/extensions/example/tasks.py
+++ b/lnbits/extensions/example/tasks.py
@@ -3,11 +3,14 @@
 # add your dependencies here
 
 import asyncio
+
 from loguru import logger
+
 from lnbits.core.models import Payment
 from lnbits.helpers import get_current_extension_name
 from lnbits.tasks import register_invoice_listener
 
+
 async def wait_for_paid_invoices():
     invoice_queue = asyncio.Queue()
     register_invoice_listener(invoice_queue, get_current_extension_name())
@@ -16,8 +19,11 @@ async def wait_for_paid_invoices():
         payment = await invoice_queue.get()
         await on_invoice_paid(payment)
 
+
 async def on_invoice_paid(payment: Payment) -> None:
-    if payment.extra.get("tag") != "example": # Will grab any payment with the tag "example"
+    if (
+        payment.extra.get("tag") != "example"
+    ):  # Will grab any payment with the tag "example"
         logger.debug(payment)
         # Do something
-    return
\ No newline at end of file
+    return
diff --git a/lnbits/extensions/example/templates/example/index.html b/lnbits/extensions/example/templates/example/index.html
index fd95ee31b..c2891b2fa 100644
--- a/lnbits/extensions/example/templates/example/index.html
+++ b/lnbits/extensions/example/templates/example/index.html
@@ -4,12 +4,44 @@
 <q-dialog v-model="thingDialog.show" position="top">
   <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
     <q-form @submit="sendThingDialog" class="q-gutter-md">
-      <q-input filled dense v-model.trim="thingDialog.data.name" type="text" label="Name *"></q-input>
-      <q-input filled dense v-model.trim="thingDialog.data.email" type="email" label="Name *"></q-input>
-      <q-select filled dense emit-value v-model="thingDialog.data.wallet" :options="g.user.walletOptions" label="Wallet *"></q-select>
+      <q-input
+        filled
+        dense
+        v-model.trim="thingDialog.data.name"
+        type="text"
+        label="Name *"
+      ></q-input>
+      <q-input
+        filled
+        dense
+        v-model.trim="thingDialog.data.email"
+        type="email"
+        label="Name *"
+      ></q-input>
+      <q-select
+        filled
+        dense
+        emit-value
+        v-model="thingDialog.data.wallet"
+        :options="g.user.walletOptions"
+        label="Wallet *"
+      ></q-select>
       <div class="row q-mt-lg">
-        <q-btn v-if="thingDialog.data.id" unelevated color="primary" type="submit">Update thing</q-btn>
-        <q-btn v-else unelevated color="primary" :disable="thingDialog.data.name == null" type="submit">Create thing</q-btn>
+        <q-btn
+          v-if="thingDialog.data.id"
+          unelevated
+          color="primary"
+          type="submit"
+          >Update thing</q-btn
+        >
+        <q-btn
+          v-else
+          unelevated
+          color="primary"
+          :disable="thingDialog.data.name == null"
+          type="submit"
+          >Create thing</q-btn
+        >
         <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
       </div>
     </q-form>
@@ -19,7 +51,8 @@
 <q-card flat>
   <q-card-section>
     <div class="text-h5 q-mb-md">
-      {{SITE_TITLE}} Extension Development Guide <small>(Collection of resources for extension developers)</small>
+      {{SITE_TITLE}} Extension Development Guide
+      <small>(Collection of resources for extension developers)</small>
     </div>
 
     <q-card unelevated flat>
@@ -32,11 +65,11 @@
         align="justify"
         narrow-indicator
       >
-        <q-tab name="frameworks" label="Frameworks" ></q-tab>
-        <q-tab name="tools" label="Useful Tools" ></q-tab>
-        <q-tab name="structure" label="File Structure" ></q-tab>
-        <q-tab name="enviroment" label="Dev Enviroment" ></q-tab>
-        <q-tab name="submission" label="Submisson to LNbits repo" ></q-tab>
+        <q-tab name="frameworks" label="Frameworks"></q-tab>
+        <q-tab name="tools" label="Useful Tools"></q-tab>
+        <q-tab name="structure" label="File Structure"></q-tab>
+        <q-tab name="enviroment" label="Dev Enviroment"></q-tab>
+        <q-tab name="submission" label="Submisson to LNbits repo"></q-tab>
       </q-tabs>
 
       <q-separator></q-separator>
@@ -46,58 +79,129 @@
           <div class="text-h6">Frameworks</div>
 
           <div>
-            <q-splitter
-              v-model="splitterModel"
-            >
-        
+            <q-splitter v-model="splitterModel">
               <template v-slot:before>
-                <q-tabs
-                  v-model="framworktab"
-                  vertical
-                >
-                  <q-tab name="fastapi"><img src="./static/fastapi-framework.png">FASTAPI</q-tab>
-                  <q-tab name="quasar"><img src="./static/quasar-framework.png">QUASAR</q-tab>
-                  <q-tab name="vuejs"><img src="./static/vuejs-framework.png">VUE-JS</q-tab>
+                <q-tabs v-model="framworktab" vertical>
+                  <q-tab name="fastapi"
+                    ><img src="./static/fastapi-framework.png" />FASTAPI</q-tab
+                  >
+                  <q-tab name="quasar"
+                    ><img src="./static/quasar-framework.png" />QUASAR</q-tab
+                  >
+                  <q-tab name="vuejs"
+                    ><img src="./static/vuejs-framework.png" />VUE-JS</q-tab
+                  >
                 </q-tabs>
               </template>
-        
+
               <template v-slot:after>
-                <q-tab-panels
-                  v-model="framworktab"
-                >
-                <q-tab-panel name="fastapi" class="text-body1">
-                <img src="./static/fastapilogo.png">
-                  <p>LNbits API is built using FastAPI, a high-performance, easy to code API framework.<br/><br/>
-                  FastAPI auto-generates swagger UI docs for testing endpoints <a class="text-primary" href="../docs">/docs</a></p>
-                  <code class="bg-grey-3 text-black">views.py</code> is used for setting application routes:
-                  <img src="./static/fastapi-example.png">
-                  <code class="bg-grey-3 text-black">views_api.py</code> is used for setting application API endpoints:
-                  <img src="./static/fastapi-example2.png">
-                </q-tab-panel>
-                
-                  <q-tab-panel name="quasar" class="text-body1">
-                    <img src="./static/quasarlogo.png">
-                    <p>LNbits uses Quasar for frontend deisgn elements. Quasar Framework is an open-source Vue.js based framework for building apps.</p>
-
-                    <p class="text-weight-bold">TIP: Look through <code class="bg-grey-3 text-black">/template</code> files in other extensions for examples.</p>
-
-                    <p>In the below example we make a dialogue popup box (box can be triggered <q-btn size="sm" color="primary" @click="thingDialog.show = true">here</q-btn>):
-                    <q-tooltip>Exmple of a tooltip!</q-tooltip></p>
-                    <img src="./static/quasar-example.png"><br/><br/>
-                    <div class="text-h6">Useful links:</div>
-                    <q-btn color="primary" type="a" href="https://quasar.dev/style/">Style (typography, spacing, etc)</q-btn>
-                    <q-btn color="primary" type="a" href="https://quasar.dev/vue-components/">Genral components (cards, buttons, popup dialogs, etc)</q-btn>
-                    <q-btn color="primary" type="a" href="https://quasar.dev/layout/grid">Layouts (rows/columns, flexbox)</q-btn>
-                  
+                <q-tab-panels v-model="framworktab">
+                  <q-tab-panel name="fastapi" class="text-body1">
+                    <a href="https://fastapi.tiangolo.com/"
+                      ><img src="./static/fastapilogo.png"
+                    /></a>
+                    <p>
+                      LNbits API is built using
+                      <a
+                        href="https://fastapi.tiangolo.com/"
+                        class="text-primary"
+                        >FastAPI</a
+                      >, a high-performance, easy to code API framework.<br /><br />
+                      FastAPI auto-generates swagger UI docs for testing
+                      endpoints <a class="text-primary" href="../docs">/docs</a>
+                    </p>
+                    <code class="bg-grey-3 text-black">views.py</code> is used
+                    for setting application routes:
+                    <img src="./static/fastapi-example.png" />
+                    <code class="bg-grey-3 text-black">views_api.py</code> is
+                    used for setting application API endpoints:
+                    <img src="./static/fastapi-example2.png" />
                   </q-tab-panel>
-        
-                  <q-tab-panel v-if="someBool == true" name="vuejs" class="text-body1">
-                    <img src="./static/vuejslogo.png">
-                    <p>Quasar is built on Vue-JS, so LNbits uses Vue-JS for rendering page elements, organising JS functions and declaring modles and elements.</p>
-                    <p><code class="bg-grey-3 text-black">v-if</code> can be used to render elements:</p>
-                    <img src="./static/vif-example.png" style="max-width:800px">
-                    <p>Typical example of a frontend page JS:</p>
-                    <img src="./static/script-example.png" style="max-width:800px">
+
+                  <q-tab-panel name="quasar" class="text-body1">
+                    <a href="https://quasar.dev/"
+                      ><img src="./static/quasarlogo.png"
+                    /></a>
+                    <p>
+                      LNbits uses
+                      <a class="text-primary" href="https://quasar.dev/"
+                        >Quasar Framework</a
+                      >
+                      for frontend deisgn elements. Quasar Framework is an
+                      open-source Vue.js based framework for building apps.
+                    </p>
+
+                    <p class="text-weight-bold">
+                      TIP: Look through
+                      <code class="bg-grey-3 text-black">/template</code> files
+                      in other extensions for examples.
+                    </p>
+
+                    <p>
+                      In the below example we make a dialogue popup box (box can
+                      be triggered
+                      <q-btn
+                        size="sm"
+                        color="primary"
+                        @click="thingDialog.show = true"
+                        >here</q-btn
+                      >): <q-tooltip>Exmple of a tooltip!</q-tooltip>
+                    </p>
+                    <img src="./static/quasar-example.png" /><br /><br />
+                    <div class="text-h6">Useful links:</div>
+                    <q-btn
+                      color="primary"
+                      type="a"
+                      href="https://quasar.dev/style/"
+                      >Style (typography, spacing, etc)</q-btn
+                    >
+                    <q-btn
+                      color="primary"
+                      type="a"
+                      href="https://quasar.dev/vue-components/"
+                      >Genral components (cards, buttons, popup dialogs,
+                      etc)</q-btn
+                    >
+                    <q-btn
+                      color="primary"
+                      type="a"
+                      href="https://quasar.dev/layout/grid"
+                      >Layouts (rows/columns, flexbox)</q-btn
+                    >
+                  </q-tab-panel>
+
+                  <q-tab-panel
+                    v-if="someBool == true"
+                    name="vuejs"
+                    class="text-body1"
+                  >
+                    <a href="https://vuejs.org/">
+                      <img src="./static/vuejslogo.png"
+                    /></a>
+                    <p>
+                      LNbits uses
+                      <a href="https://vuejs.org/" class="text-primary">Vue</a>
+                      components for best-in-class high-performance and
+                      responsive performance.
+                    </p>
+
+                    <p>
+                      Typical example of Vue components in a frontend script:
+                    </p>
+                    <img
+                      src="./static/script-example.png"
+                      style="max-width: 800px"
+                    /><br /><br />
+
+                    <p>
+                      In a page body, models can be called. <br />Content can be
+                      conditionally rendered using Vue's
+                      <code class="bg-grey-3 text-black">v-if</code>:
+                    </p>
+                    <img
+                      src="./static/vif-example.png"
+                      style="max-width: 800px"
+                    />
                   </q-tab-panel>
                 </q-tab-panels>
               </template>
@@ -105,7 +209,56 @@
           </div>
         </q-tab-panel>
 
-        <!--FILE STRUCTURE-->
+        <q-tab-panel name="tools">
+          <div class="text-h6">Useful Tools</div>
+          <div>
+            <q-splitter v-model="splitterModel">
+              <template v-slot:before>
+                <q-tabs v-model="usefultab" vertical>
+                  <q-tab name="magicalg">MAGICAL G</q-tab>
+                  <q-tab name="exchange">EXCHANGE RATES</q-tab>
+                </q-tabs>
+              </template>
+
+              <template v-slot:after>
+                <q-tab-panels v-model="usefultab">
+                  <q-tab-panel name="magicalg" class="text-body1">
+                    <div class="text-h5 q-mb-md">Magical G</div>
+                    <p>
+                      A magical "g" (ie
+                      <code class="bg-grey-3 text-black"
+                        >this.g.user.wallets[0].inkey</code
+                      >) is always available, with info about the user, wallets
+                      and extensions:
+                    </p>
+                    <code class="text-caption"
+                      >{% raw %}{{ g }}{% endraw %}</code
+                    >
+                  </q-tab-panel>
+                  <q-tab-panel name="exchange">
+                    <div class="text-h6">Exchange rates</div>
+                    <p>
+                      LNbits includes a handy
+                      <a
+                        href="../docs#/default/api_fiat_as_sats_api_v1_conversion_post"
+                        class="text-primary"
+                        >exchange rate function</a
+                      >, that streams rates from 6 different sources.
+                    </p>
+                    Exchange rate API:<br />
+                    <img src="./static/conversion-example.png" /><br /><br />
+                    Exchange rate functions, included using
+                    <code class="bg-grey-3 text-black"
+                      >from lnbits.utils.exchange_rates import
+                      fiat_amount_as_satoshis</code
+                    >:<br />
+                    <img src="./static/conversion-example2.png" />
+                  </q-tab-panel>
+                </q-tab-panels>
+              </template>
+            </q-splitter>
+          </div>
+        </q-tab-panel>
 
         <q-tab-panel name="structure">
           <div class="text-h6">File Structure</div>
@@ -121,46 +274,6 @@
           <div class="text-h6">Submission</div>
           Coming soon...
         </q-tab-panel>
-
-        <q-tab-panel name="tools">
-          <div class="text-h6">Useful Tools</div>
-          <div>
-            <q-splitter
-              v-model="splitterModel"
-            >
-        
-              <template v-slot:before>
-                <q-tabs
-                  v-model="usefultab"
-                  vertical
-                >
-                  <q-tab name="magicalg">MAGICAL G</q-tab>
-                  <q-tab name="conversion">CONVERSION</q-tab>
-                </q-tabs>
-              </template>
-        
-              <template v-slot:after>
-                <q-tab-panels
-                  v-model="usefultab"
-                >
-                  <q-tab-panel name="magicalg" class="text-body1">
-                    <div class="text-h5 q-mb-md">Magical G</div>
-                    <p>
-                      A magical "g" (ie <code class="bg-grey-3 text-black">this.g.user.wallets[0].inkey</code>) is always available, with info about the user, wallets and
-                      extensions:
-                    </p>
-                    <code class="text-caption">{% raw %}{{ g }}{% endraw %}</code>
-                  </q-tab-panel>
-                  <q-tab-panel name="conversion">
-                    <div class="text-h6">Conversion </div>
-                    Coming soon...
-                  </q-tab-panel>
-                </q-tab-panels>
-              </template>
-        
-            </q-splitter>
-          </div>
-        </q-tab-panel>
       </q-tab-panels>
     </q-card>
   </q-card-section>
@@ -168,41 +281,41 @@
 {% endblock %} {% block scripts %} {{ window_vars(user) }}
 
 <script>
-var someMapObject = obj => {
-  obj._data = _.clone(obj)
-  obj.date = Quasar.utils.date.formatDate(
-    new Date(obj.time * 1000),
-    'YYYY-MM-DD HH:mm'
-  )
-  // here you can do something with the mapped data
-  return obj
-}
+  var someMapObject = obj => {
+    obj._data = _.clone(obj)
+    obj.date = Quasar.utils.date.formatDate(
+      new Date(obj.time * 1000),
+      'YYYY-MM-DD HH:mm'
+    )
+    // here you can do something with the mapped data
+    return obj
+  }
   new Vue({
     el: '#vue',
     mixins: [windowMixin],
     data: function () {
       return {
         ///// Declare models/variables /////
-        thingDialog:{
+        thingDialog: {
           show: false,
           data: {}
         },
         someBool: true,
-        splitterModel: 20, 
+        splitterModel: 20,
         exampleData: [],
-        tab: "frameworks",
-        framworktab: "fastapi",
-        usefultab: "magicalg"
+        tab: 'frameworks',
+        framworktab: 'fastapi',
+        usefultab: 'magicalg'
       }
     },
     ///// Where functions live /////
-    methods: { 
-      exampleFunction(data){
+    methods: {
+      exampleFunction(data) {
         var theData = data
         LNbits.api
           .request(
             'GET', // Type of request
-            '/example/api/v1/test/'+ theData, // URL of the endpoint
+            '/example/api/v1/test/' + theData, // URL of the endpoint
             this.g.user.wallets[0].inkey // Often endpoints require a key
           )
           .then(response => {
@@ -212,14 +325,14 @@ var someMapObject = obj => {
             LNbits.utils.notifyApiError(error) // Error will be passed to the frontend
           })
       },
-      sendThingDialog(){
+      sendThingDialog() {
         console.log(this.thingDialog)
       }
     },
     ///// To run on startup /////
     created: function () {
       self = this // Often used to run a real object, rather than the event (all a bit confusing really)
-      self.exampleFunction("lorum")
+      self.exampleFunction('lorum')
     }
   })
 </script>
diff --git a/lnbits/extensions/example/views_api.py b/lnbits/extensions/example/views_api.py
index 9d56a6410..556096ce2 100644
--- a/lnbits/extensions/example/views_api.py
+++ b/lnbits/extensions/example/views_api.py
@@ -6,6 +6,7 @@ from . import example_ext
 
 # add your endpoints here
 
+
 @example_ext.get("/api/v1/test/{test_data}")
 async def api_example(test_data):
     # Do some python things and return the data