diff --git a/static/components/direct-messages/direct-messages.html b/static/components/direct-messages/direct-messages.html
new file mode 100644
index 0000000..159da03
--- /dev/null
+++ b/static/components/direct-messages/direct-messages.html
@@ -0,0 +1 @@
+<div>dmmms</div>
diff --git a/static/components/direct-messages/direct-messages.js b/static/components/direct-messages/direct-messages.js
new file mode 100644
index 0000000..02f3fd9
--- /dev/null
+++ b/static/components/direct-messages/direct-messages.js
@@ -0,0 +1,14 @@
+async function directMessages(path) {
+  const template = await loadTemplateAsync(path)
+  Vue.component('direct-messages', {
+    name: 'direct-messages',
+    props: ['adminkey', 'inkey'],
+    template,
+
+    data: function () {
+      return {}
+    },
+    methods: {},
+    created: async function () {}
+  })
+}
diff --git a/static/js/index.js b/static/js/index.js
index 3eb50ad..cfb214c 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -6,6 +6,7 @@ const merchant = async () => {
   await stallDetails('static/components/stall-details/stall-details.html')
   await stallList('static/components/stall-list/stall-list.html')
   await orderList('static/components/order-list/order-list.html')
+  await directMessages('static/components/direct-messages/direct-messages.html')
 
   const nostr = window.NostrTools
 
diff --git a/templates/nostrmarket/_api_docs.html b/templates/nostrmarket/_api_docs.html
index 07e30eb..772b6fc 100644
--- a/templates/nostrmarket/_api_docs.html
+++ b/templates/nostrmarket/_api_docs.html
@@ -27,8 +27,6 @@
         ></small
       >
     </p>
-    <br />
-    <br />
     <a
       class="text-secondary"
       target="_blank"
diff --git a/templates/nostrmarket/index.html b/templates/nostrmarket/index.html
index b866226..a6fa53d 100644
--- a/templates/nostrmarket/index.html
+++ b/templates/nostrmarket/index.html
@@ -101,18 +101,23 @@
   </div>
 
   <div class="col-12 col-md-5 q-gutter-y-md">
-    <q-card>
-      <q-card-section>
-        <h6 class="text-subtitle1 q-my-none">
-          {{SITE_TITLE}} Nostr Market Extension
-        </h6>
-      </q-card-section>
-      <q-card-section class="q-pa-none">
-        <q-separator></q-separator>
-        <q-list> {% include "nostrmarket/_api_docs.html" %} </q-list>
-      </q-card-section>
-    </q-card>
+    <!-- <div class="row q-col-gutter-md"> -->
+    <div class="col-12">
+      <q-card>
+        <q-card-section>
+          <h6 class="text-subtitle1 q-my-none">
+            {{SITE_TITLE}} Nostr Market Extension
+          </h6>
+        </q-card-section>
+        <q-card-section class="q-pa-none">
+          <q-separator></q-separator>
+          <q-list> {% include "nostrmarket/_api_docs.html" %} </q-list>
+        </q-card-section>
+      </q-card>
+    </div>
+    <div class="col-12">x111</div>
   </div>
+
   <div>
     <q-dialog v-model="importKeyDialog.show" position="top">
       <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
@@ -151,6 +156,7 @@
 <script src="{{ url_for('nostrmarket_static', path='components/stall-details/stall-details.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='components/stall-list/stall-list.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='components/order-list/order-list.js') }}"></script>
+<script src="{{ url_for('nostrmarket_static', path='components/direct-messages/direct-messages.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='js/index.js') }}"></script>
 
 {% endblock %}