diff --git a/static/components/direct-messages/direct-messages.html b/static/components/direct-messages/direct-messages.html
index 9e6e6f8..188b43c 100644
--- a/static/components/direct-messages/direct-messages.html
+++ b/static/components/direct-messages/direct-messages.html
@@ -45,20 +45,22 @@
               <div v-if="dm.isJson">
                 <div v-if="dm.message.type === 0">
                   <strong>New order:</strong>
-                  <span v-text="dm.message.id"></span>
                 </div>
                 <div v-else-if="dm.message.type === 1">
                   <strong>Invoice sent for order: </strong>
-                  <span v-text="dm.message.id"></span>
                 </div>
                 <div v-else-if="dm.message.type === 2">
                   <q-badge v-if="dm.message.paid" color="green">Paid </q-badge>
                   <q-badge v-if="dm.message.shipped" color="green">Shipped </q-badge>
                   <span v-text="dm.message.message"></span><br>
-                  <span v-text="dm.message.id"></span>
+                  
+                </div>
+                <div>
+                 <span v-text="dm.message.id" @click="showOrderDetails(dm.message.id)"
+                    class="cursor-pointer"></span>
                 </div>
                 <q-badge @click="showMessageRawData(index)" class="cursor-pointer">...</q-badge>
-               
+
               </div>
             </q-chat-message>
           </div>
@@ -89,11 +91,11 @@
     </q-dialog>
     <q-dialog v-model="showRawMessage" position="top">
       <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
-          <q-input filled dense type="textarea" rows="20" v-model.trim="rawMessage" label="Raw Data"></q-input>
-          <div class="row q-mt-lg">
-           
-            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
-          </div>
+        <q-input filled dense type="textarea" rows="20" v-model.trim="rawMessage" label="Raw Data"></q-input>
+        <div class="row q-mt-lg">
+
+          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
+        </div>
         </q-form>
       </q-card>
     </q-dialog>
diff --git a/static/components/direct-messages/direct-messages.js b/static/components/direct-messages/direct-messages.js
index 3248838..4acb063 100644
--- a/static/components/direct-messages/direct-messages.js
+++ b/static/components/direct-messages/direct-messages.js
@@ -136,6 +136,9 @@ async function directMessages(path) {
         }
         this.getCustomersDebounced()
       },
+      showOrderDetails: function (orderId) {
+        this.$emit('order-selected', orderId)
+      },
       showClientOrders: function () {
         this.$emit('customer-selected', this.activePublicKey)
       },
diff --git a/static/components/order-list/order-list.js b/static/components/order-list/order-list.js
index 5bad218..b261de7 100644
--- a/static/components/order-list/order-list.js
+++ b/static/components/order-list/order-list.js
@@ -170,7 +170,6 @@ async function orderList(path) {
             this.inkey
           )
           this.orders = data.map(s => ({ ...s, expanded: false }))
-          console.log("### this.orders", this.orders)
         } catch (error) {
           LNbits.utils.notifyApiError(error)
         }
@@ -238,7 +237,13 @@ async function orderList(path) {
           this.orders.unshift(order)
         }
       },
-
+      orderSelected: async function (orderId) {
+        const order = await this.getOrder(orderId)
+        if (!order) return
+        order.expanded = true
+        order.isNew = false
+        this.orders = [order]
+      },
       showShipOrderDialog: function (order) {
         this.selectedOrder = order
         this.shippingMessage = order.shipped
@@ -274,7 +279,7 @@ async function orderList(path) {
         )}`
         return label
       },
-      orderPaid: function(orderId) {
+      orderPaid: function (orderId) {
         const order = this.orders.find(o => o.id === orderId)
         if (order) {
           order.paid = true
diff --git a/static/js/index.js b/static/js/index.js
index 734ec02..11eeffd 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -152,6 +152,9 @@ const merchant = async () => {
       filterOrdersForCustomer: function (customerPubkey) {
         this.orderPubkey = customerPubkey
       },
+      showOrderDetails: async function (orderId) {
+        await this.$refs.orderListRef.orderSelected(orderId)
+      },
       waitForNotifications: async function () {
         if (!this.merchant) return
         try {
diff --git a/templates/nostrmarket/index.html b/templates/nostrmarket/index.html
index 7e5a097..bb04611 100644
--- a/templates/nostrmarket/index.html
+++ b/templates/nostrmarket/index.html
@@ -179,6 +179,7 @@
         :active-chat-customer="activeChatCustomer"
         :merchant-id="merchant.id"
         @customer-selected="filterOrdersForCustomer"
+        @order-selected="showOrderDetails"
       >
       </direct-messages>
     </div>
diff --git a/views_api.py b/views_api.py
index 2aea3d4..2423389 100644
--- a/views_api.py
+++ b/views_api.py
@@ -5,8 +5,8 @@ from typing import List, Optional
 from fastapi import Depends
 from fastapi.exceptions import HTTPException
 from loguru import logger
-from lnbits.core.services import websocketUpdater
 
+from lnbits.core.services import websocketUpdater
 from lnbits.decorators import (
     WalletTypeInfo,
     check_admin,