diff --git a/static/components/direct-messages.js b/static/components/direct-messages.js
index b9dee13..3bb1aa0 100644
--- a/static/components/direct-messages.js
+++ b/static/components/direct-messages.js
@@ -50,13 +50,16 @@ window.app.component('direct-messages', {
   methods: {
     sendMessage: async function () {},
     buildCustomerLabel: function (c) {
-      let label = `${c.profile.name || 'unknown'} ${c.profile.about || ''}`
-      if (c.unread_messages) {
-        label += `[new: ${c.unread_messages}]`
+      if (!c) return ''
+      let label = c.profile.name || 'unknown'
+      if (c.profile.about) {
+        label += ` - ${c.profile.about.substring(0, 30)}`
+        if (c.profile.about.length > 30) label += '...'
       }
-      label += `  (${c.public_key.slice(0, 16)}...${c.public_key.slice(
-        c.public_key.length - 16
-      )}`
+      if (c.unread_messages) {
+        label = `[${c.unread_messages} new] ${label}`
+      }
+      label += ` (${c.public_key.slice(0, 8)}...${c.public_key.slice(-8)})`
       return label
     },
     getDirectMessages: async function (pubkey) {
diff --git a/templates/nostrmarket/components/direct-messages.html b/templates/nostrmarket/components/direct-messages.html
index 8950923..9f68511 100644
--- a/templates/nostrmarket/components/direct-messages.html
+++ b/templates/nostrmarket/components/direct-messages.html
@@ -1,22 +1,22 @@
 <div>
   <q-card>
     <q-card-section>
-      <div class="row">
-        <div class="col-2">
+      <div class="row items-center q-col-gutter-sm">
+        <div class="col-auto">
           <h6 class="text-subtitle1 q-my-none">Messages</h6>
         </div>
-        <div class="col-4">
+        <div class="col-auto">
           <q-badge v-if="unreadMessages" color="primary" outline
             ><span v-text="unreadMessages"></span>&nbsp; new</q-badge
           >
         </div>
-        <div class="col-6">
+        <div class="col-auto q-ml-auto">
           <q-btn
             v-if="activePublicKey"
             @click="showClientOrders"
             unelevated
             outline
-            class="float-right"
+            size="sm"
             >Client Orders</q-btn
           >
         </div>
@@ -26,22 +26,40 @@
       <q-separator></q-separator>
     </q-card-section>
     <q-card-section>
-      <div class="row">
-        <div class="col-10">
+      <div class="row q-col-gutter-sm items-end">
+        <div class="col" style="min-width: 0">
           <q-select
             v-model="activePublicKey"
             :options="customers.map(c => ({label: buildCustomerLabel(c), value: c.public_key}))"
             label="Select Customer"
             emit-value
             @input="selectActiveCustomer()"
+            :display-value="activePublicKey ? buildCustomerLabel(customers.find(c => c.public_key === activePublicKey)) : ''"
+            class="ellipsis"
           >
+            <template v-slot:option="scope">
+              <q-item v-bind="scope.itemProps">
+                <q-item-section>
+                  <q-item-label>
+                    <span v-text="scope.opt.label.split('(')[0]"></span>
+                  </q-item-label>
+                  <q-item-label
+                    caption
+                    class="text-mono"
+                    style="word-break: break-all"
+                  >
+                    <span v-text="scope.opt.value"></span>
+                  </q-item-label>
+                </q-item-section>
+              </q-item>
+            </template>
           </q-select>
         </div>
-        <div class="col-2">
+        <div class="col-auto">
           <q-btn
-            label="Add"
+            label="ADD"
             color="primary"
-            class="float-right q-mt-md"
+            unelevated
             @click="showAddPublicKey = true"
           >
             <q-tooltip> Add a public key to chat with </q-tooltip>
diff --git a/templates/nostrmarket/components/key-pair.html b/templates/nostrmarket/components/key-pair.html
index 2b65737..911e057 100644
--- a/templates/nostrmarket/components/key-pair.html
+++ b/templates/nostrmarket/components/key-pair.html
@@ -1,40 +1,93 @@
 <div>
   <q-separator></q-separator>
-  <div class="row q-mt-md">
-    <div class="col-6 q-pl-xl">Public Key</div>
-    <div class="col-6">
-      <q-toggle v-model="showPrivateKey" class="q-pl-xl" color="secodary">
-        Show Private Key
-      </q-toggle>
-    </div>
+
+  <!-- Header with toggle -->
+  <div class="row items-center justify-between q-mt-md q-px-md">
+    <div class="text-subtitle2">Keys</div>
+    <q-toggle
+      v-model="showPrivateKey"
+      color="primary"
+      label="Show Private Key"
+    />
   </div>
 
-  <div class="row">
-    <div class="col-6">
-      <div class="text-center q-mb-lg cursor-pointer">
-        <q-responsive :ratio="1" class="q-mx-xl" @click="copyText(publicKey)">
-          <lnbits-qrcode
-            :value="publicKey"
-            :options="{width: 250}"
-            class="rounded-borders"
-          ></lnbits-qrcode>
-        </q-responsive>
-        <small><span v-text="publicKey"></span><br />Click to copy</small>
-      </div>
+  <!-- QR Codes Container -->
+  <div class="row q-col-gutter-md q-pa-md">
+    <!-- Public Key QR -->
+    <div class="col-12" :class="showPrivateKey ? 'col-sm-6' : ''">
+      <q-card flat bordered>
+        <q-card-section class="text-center">
+          <div class="text-subtitle2 q-mb-sm">Public Key</div>
+          <div
+            class="cursor-pointer q-mx-auto"
+            style="max-width: 200px"
+            @click="copyText(publicKey)"
+          >
+            <q-responsive :ratio="1">
+              <lnbits-qrcode
+                :value="publicKey"
+                :options="{width: 200}"
+                :show-buttons="false"
+                class="rounded-borders"
+              ></lnbits-qrcode>
+            </q-responsive>
+          </div>
+          <div class="q-mt-md text-caption text-mono" style="padding: 0 16px">
+            <span v-text="publicKey.substring(0, 8)"></span>...<span
+              v-text="publicKey.substring(publicKey.length - 8)"
+            ></span>
+          </div>
+          <q-btn
+            flat
+            dense
+            size="sm"
+            icon="content_copy"
+            label="Click to copy"
+            @click="copyText(publicKey)"
+            class="q-mt-xs"
+          />
+        </q-card-section>
+      </q-card>
     </div>
-    <div class="col-6 cursor-pointer">
-      <div v-if="showPrivateKey">
-        <div class="text-center q-mb-lg">
-          <q-responsive
-            :ratio="1"
-            class="q-mx-xl"
+
+    <!-- Private Key QR (conditional) -->
+    <div v-if="showPrivateKey" class="col-12 col-sm-6">
+      <q-card flat bordered>
+        <q-card-section class="text-center">
+          <div class="text-subtitle2 q-mb-sm text-warning">
+            <q-icon name="warning"></q-icon>
+            Private Key (Keep Secret!)
+          </div>
+          <div
+            class="cursor-pointer q-mx-auto"
+            style="max-width: 200px"
             @click="copyText(privateKey)"
           >
-            <lnbits-qrcode :value="privateKey"></lnbits-qrcode>
-          </q-responsive>
-          <small><span v-text="privateKey"></span><br />Click to copy</small>
-        </div>
-      </div>
+            <q-responsive :ratio="1">
+              <lnbits-qrcode
+                :value="privateKey"
+                :options="{width: 200}"
+                :show-buttons="false"
+                class="rounded-borders"
+              ></lnbits-qrcode>
+            </q-responsive>
+          </div>
+          <div class="q-mt-md text-caption text-mono" style="padding: 0 16px">
+            <span v-text="privateKey.substring(0, 8)"></span>...<span
+              v-text="privateKey.substring(privateKey.length - 8)"
+            ></span>
+          </div>
+          <q-btn
+            flat
+            dense
+            size="sm"
+            icon="content_copy"
+            label="Click to copy"
+            @click="copyText(privateKey)"
+            class="q-mt-xs"
+          />
+        </q-card-section>
+      </q-card>
     </div>
   </div>
 </div>
diff --git a/templates/nostrmarket/components/stall-list.html b/templates/nostrmarket/components/stall-list.html
index 632eeaa..673e8a7 100644
--- a/templates/nostrmarket/components/stall-list.html
+++ b/templates/nostrmarket/components/stall-list.html
@@ -62,7 +62,6 @@
           />
         </q-td>
 
-     
         <q-td key="id" :props="props"
           ><span v-text="shortLabel(props.row.name)"></span
         ></q-td>
diff --git a/templates/nostrmarket/index.html b/templates/nostrmarket/index.html
index 9b1cafc..d95d965 100644
--- a/templates/nostrmarket/index.html
+++ b/templates/nostrmarket/index.html
@@ -5,8 +5,8 @@
     <div v-if="merchant && merchant.id">
       <q-card>
         <q-card-section>
-          <div class="row">
-            <div class="col-4">
+          <div class="row items-center q-col-gutter-sm">
+            <div class="col-12 col-sm-auto">
               <merchant-details
                 :merchant-id="merchant.id"
                 :inkey="g.user.wallets[0].inkey"
@@ -16,25 +16,26 @@
                 @merchant-deleted="handleMerchantDeleted"
               ></merchant-details>
             </div>
-            <div class="col-6">
-              <q-toggle
-                @update:model-value="toggleMerchantState()"
-                size="md"
-                checked-icon="check"
-                v-model="merchant.config.active"
-                color="primary"
-                unchecked-icon="clear"
-                class="float-left"
-              />
-              <span
-                v-text="merchant.config.active ? 'Accepting Orders': 'Orders Paused'"
-              ></span>
+            <div class="col-12 col-sm-auto q-mx-sm">
+              <div class="row items-center no-wrap">
+                <q-toggle
+                  @update:model-value="toggleMerchantState()"
+                  size="md"
+                  checked-icon="check"
+                  v-model="merchant.config.active"
+                  color="primary"
+                  unchecked-icon="clear"
+                />
+                <span
+                  class="q-ml-sm"
+                  v-text="merchant.config.active ? 'Accepting Orders': 'Orders Paused'"
+                ></span>
+              </div>
             </div>
-            <div class="col-2">
+            <div class="col-12 col-sm-auto q-ml-sm-auto">
               <shipping-zones
                 :inkey="g.user.wallets[0].inkey"
                 :adminkey="g.user.wallets[0].adminkey"
-                class="float-right"
               ></shipping-zones>
             </div>
           </div>