diff --git a/lnbits/extensions/diagonalley/crud.py b/lnbits/extensions/diagonalley/crud.py
index 18207888..f093ba69 100644
--- a/lnbits/extensions/diagonalley/crud.py
+++ b/lnbits/extensions/diagonalley/crud.py
@@ -408,6 +408,7 @@ async def create_diagonalley_market_stalls(
 async def update_diagonalley_market(market_id):
     pass
 
+### CHAT / MESSAGES
 
 async def create_chat_message(data: CreateChatMessage):
     print("DATA", data)
diff --git a/lnbits/extensions/diagonalley/models.py b/lnbits/extensions/diagonalley/models.py
index b1bfdc9c..e3ea2cc6 100644
--- a/lnbits/extensions/diagonalley/models.py
+++ b/lnbits/extensions/diagonalley/models.py
@@ -70,6 +70,7 @@ class createOrderDetails(BaseModel):
 
 class createOrder(BaseModel):
     wallet: str = Query(...)
+    username: str = Query(None)
     pubkey: str = Query(None)
     shippingzone: str = Query(...)
     address: str = Query(...)
diff --git a/lnbits/extensions/diagonalley/templates/diagonalley/chat.html b/lnbits/extensions/diagonalley/templates/diagonalley/chat.html
deleted file mode 100644
index adbdb047..00000000
--- a/lnbits/extensions/diagonalley/templates/diagonalley/chat.html
+++ /dev/null
@@ -1,317 +0,0 @@
-{% extends "public.html" %} {% block page %}
-<div class="row q-col-gutter-md flex">
-  <div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
-    <q-card>
-      <div class="chat-container q-pa-md">
-        <div class="chat-box">
-          <!-- <p v-if="Object.keys(messages).length === 0">No messages yet</p> -->
-          <div class="chat-messages">
-            <q-chat-message
-              :key="index"
-              v-for="(message, index) in messages"
-              :name="message.pubkey == user.keys.publickey ? 'me' : 'merchant'"
-              :text="[message.msg]"
-              :sent="message.pubkey == user.keys.publickey ? true : false"
-              :bg-color="message.pubkey == user.keys.publickey ? 'white' : 'light-green-2'"
-            />
-          </div>
-        </div>
-        <q-form @submit="sendMessage" class="full-width chat-input">
-          <q-input
-            ref="newMessage"
-            v-model="newMessage"
-            placeholder="Message"
-            class="full-width"
-            dense
-            outlined
-          >
-            <template>
-              <q-btn
-                round
-                dense
-                flat
-                type="submit"
-                icon="send"
-                color="primary"
-              />
-            </template>
-          </q-input>
-        </q-form>
-      </div>
-    </q-card>
-  </div>
-  <div class="col-12 col-md-5 col-lg-6 q-gutter-y-md">
-    <q-card>
-      <q-card-section>
-        {% raw %}
-        <h6 class="text-subtitle1 q-my-none">{{ stall.name }}</h6>
-        <p @click="copyText(stall.publickey)" style="width: max-content">
-          Public Key: {{ sliceKey(stall.publickey) }}
-          <q-tooltip>Click to copy</q-tooltip>
-        </p>
-        {% endraw %}
-      </q-card-section>
-      <q-card-section v-if="user">
-        <q-form @submit="" class="q-gutter-md">
-          <!-- <q-select
-            filled
-            dense
-            emit-value
-            v-model="model"
-            :options="mockMerch"
-            label="Merchant"
-            hint="Select a merchant you've opened an order to"
-          ></q-select>
-          <br /> -->
-          <q-select
-            filled
-            dense
-            emit-value
-            v-model="selectedOrder"
-            :options="user.orders"
-            label="Order"
-            hint="Select an order from this merchant"
-            @input="val => { changeOrder() }"
-          ></q-select>
-        </q-form>
-      </q-card-section>
-      <q-card-section>
-        <q-separator></q-separator>
-        <p>
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore,
-          quasi.
-        </p>
-        <div v-if="user?.keys" class="row">
-          <div
-            class="col-6"
-            v-for="type in ['publickey', 'privatekey']"
-            v-bind:key="type"
-          >
-            <div class="text-center q-mb-lg">
-              {% raw %}
-              <q-responsive :ratio="1" class="q-mx-xl">
-                <qrcode
-                  :value="user.keys[type]"
-                  :options="{width: 250}"
-                  class="rounded-borders"
-                ></qrcode>
-                <q-tooltip>{{ user.keys[type] }}</q-tooltip>
-              </q-responsive>
-              <p>{{ type == 'publickey' ? 'Public Key' : 'Private Key' }}</p>
-              {% endraw %}
-            </div>
-          </div>
-        </div>
-        <p>
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore,
-          quasi.
-        </p>
-      </q-card-section>
-      <q-card-section>
-        <q-separator></q-separator>
-        <div class="row q-mt-lg">
-          <q-btn outline color="grey" @click=""
-            >Backup keys
-            <q-tooltip>Download your keys</q-tooltip>
-          </q-btn>
-          <q-btn @click="" v-close-popup flat color="grey" class="q-ml-auto"
-            >Delete data
-            <q-tooltip>Delete all data from browser</q-tooltip>
-          </q-btn>
-        </div>
-      </q-card-section>
-    </q-card>
-  </div>
-</div>
-{% endblock %} {% block scripts %}
-<script>
-  const mapChatMsg = msg => {
-    let obj = {}
-    obj.timestamp = {
-      msg: msg,
-      pubkey: pubkey
-    }
-    return obj
-  }
-  Vue.component(VueQrcode.name, VueQrcode)
-  new Vue({
-    el: '#vue',
-    mixins: [windowMixin],
-    data: function () {
-      return {
-        newMessage: '',
-        showMessages: false,
-        messages: {},
-        stall: null,
-        selectedOrder: null,
-        orders: [],
-        user: null,
-        // Mock data
-        model: null,
-        mockMerch: ['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'],
-        mockOrder: ['1', '2', '3']
-      }
-    },
-    computed: {},
-    methods: {
-      clearMessage() {
-        this.newMessage = ''
-        this.$refs.newMessage.focus()
-      },
-      sendMessage() {
-        let message = {
-          msg: this.newMessage,
-          pubkey: this.user.keys.publickey
-        }
-        ws.send(JSON.stringify(message))
-
-        this.clearMessage()
-      },
-      sliceKey(key) {
-        if (!key) return ''
-        return `${key.slice(0, 4)}...${key.slice(-4)}`
-      },
-      async generateKeys() {
-        await LNbits.api
-          .request('GET', '/diagonalley/api/v1/keys', null)
-          .then(response => {
-            if (response.data) {
-              let data = {
-                keys: {
-                  privatekey: response.data.privkey,
-                  publickey: response.data.pubkey
-                }
-              }
-              this.user = data
-              console.log('Keys done', this.user)
-              return
-            }
-          })
-          .catch(function (error) {
-            LNbits.utils.notifyApiError(error)
-          })
-      },
-      async getMessages(room_name, all = false) {
-        await LNbits.api
-          .request(
-            'GET',
-            `/diagonalley/api/v1/chat/messages/${room_name}${
-              all ? '?all_messages=true' : ''
-            }`
-          )
-          .then(response => {
-            if (response.data) {
-              console.log(response.data)
-              response.data.reverse().map(m => {
-                this.$set(this.messages, m.timestamp * 1000, {
-                  msg: m.msg,
-                  pubkey: m.pubkey
-                })
-              })
-            }
-          })
-          .catch(function (error) {
-            LNbits.utils.notifyApiError(error)
-          })
-      },
-      changeOrder() {
-        console.log(this.selectedOrder)
-      },
-      startChat(room_name) {
-        if (location.protocol == 'https:') {
-          ws_scheme = 'wss://'
-        } else {
-          ws_scheme = 'ws://'
-        }
-        ws = new WebSocket(
-          ws_scheme + location.host + '/diagonalley/ws/' + room_name
-        )
-
-        function checkWebSocket(event) {
-          if (ws.readyState === WebSocket.CLOSED) {
-            console.log('WebSocket CLOSED: Reopening')
-            ws = new WebSocket(
-              ws_scheme + location.host + '/diagonalley/ws/' + room_name
-            )
-          }
-        }
-
-        ws.onmessage = event => {
-          let event_data = JSON.parse(event.data)
-
-          this.$set(this.messages, Date.now(), event_data)
-        }
-
-        this.ws = ws
-      }
-    },
-    async created() {
-      this.stall = JSON.parse('{{ stall | tojson }}')
-
-      let order_details = JSON.parse('{{ order | tojson }}')
-      let order_id = order_details[0].order_id
-
-      let data = this.$q.localStorage.getItem(`lnbits.diagonalley.data`)
-
-      try {
-        if (data) {
-          this.user = data
-          //add chat key (merchant pubkey) if not set
-          if (!this.user.chats[`${order_id}`]) {
-            this.$set(this.user.chats, order_id, [])
-          }
-          //this.$q.localStorage.set(`lnbits.diagonalley.data`, this.user)
-        } else {
-          // generate keys
-          await this.generateKeys()
-          // populate user data
-          this.user.chats = {
-            [`${order_id}`]: []
-          }
-          this.user.orders = []
-        }
-
-        this.order_details = order_details
-        this.user.orders = [...new Set([...this.user.orders, order_id])]
-        this.selectedOrder = order_id
-
-        await this.getMessages(order_id)
-
-        this.$q.localStorage.set(`lnbits.diagonalley.data`, this.user)
-        this.startChat(order_id)
-      } catch (e) {
-        console.error(e)
-      }
-    }
-  })
-</script>
-<style scoped>
-  .chat-container {
-    position: relative;
-    display: grid;
-    grid-template-rows: 1fr auto;
-    height: calc(100vh - 133px);
-  }
-
-  .chat-box {
-    display: flex;
-    flex-direction: column-reverse;
-    padding: 1rem;
-    overflow-y: auto;
-  }
-
-  .chat-messages {
-    width: auto;
-  }
-
-  .chat-other {
-  }
-
-  .chat-input {
-    position: relative;
-    display: flex;
-    align-items: end;
-    margin-top: 1rem;
-  }
-</style>
-{% endblock %}
diff --git a/lnbits/extensions/diagonalley/views.py b/lnbits/extensions/diagonalley/views.py
index 1addb8a7..27875287 100644
--- a/lnbits/extensions/diagonalley/views.py
+++ b/lnbits/extensions/diagonalley/views.py
@@ -20,6 +20,7 @@ from .crud import (
     get_diagonalley_market,
     get_diagonalley_market_stalls,
     get_diagonalley_order_details,
+    get_diagonalley_order_invoiceid,
     get_diagonalley_products,
     get_diagonalley_stall,
     get_diagonalley_zone,
@@ -92,13 +93,15 @@ async def display(request: Request, market_id):
     )
 
 
-@diagonalley_ext.get("/chat", response_class=HTMLResponse)
-async def chat_page(request: Request, merch: str = Query(...), order: str = Query(...)):
+@diagonalley_ext.get("/order", response_class=HTMLResponse)
+async def chat_page(request: Request, merch: str = Query(...), invoice_id: str = Query(...)):
     stall = await get_diagonalley_stall(merch)
-    _order = await get_diagonalley_order_details(order)
+    order = await get_diagonalley_order_invoiceid(invoice_id)
+    _order = await get_diagonalley_order_details(order.id)
+    products = await get_diagonalley_products(stall.id)
 
     return diagonalley_renderer().TemplateResponse(
-        "diagonalley/chat.html",
+        "diagonalley/order.html",
         {
             "request": request,
             "stall": {
@@ -107,7 +110,9 @@ async def chat_page(request: Request, merch: str = Query(...), order: str = Quer
                 "publickey": stall.publickey,
                 "wallet": stall.wallet,
             },
+            "order_id": order.id,
             "order": [details.dict() for details in _order],
+            "products": [product.dict() for product in products]
         },
     )