diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index c09cb26c..93727452 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -40,3 +40,11 @@ jobs:
             file: ./token-server/Dockerfile
             push: true
             tags: commerceblockx/token-server:latest
+        -
+          name: Build and push
+          uses: docker/build-push-action@v5
+          with:
+            context: .
+            file: ./explorer/Dockerfile
+            push: true
+            tags: commerceblockx/mercury-explorer:latest
diff --git a/explorer/Dockerfile b/explorer/Dockerfile
new file mode 100644
index 00000000..f7bb0e60
--- /dev/null
+++ b/explorer/Dockerfile
@@ -0,0 +1,14 @@
+# Use the official nginx image as the base
+FROM nginx:latest
+
+# Define a working directory for the container
+WORKDIR /usr/share/nginx/html
+
+# Copy the contents of your local /explorer folder to the container's working directory
+COPY ./. .
+
+# Expose port 80 for web traffic
+EXPOSE 80
+
+# Use the default nginx configuration (serves content from the working directory)
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/explorer/index.html b/explorer/index.html
new file mode 100644
index 00000000..87e3afea
--- /dev/null
+++ b/explorer/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JSON Data Display</title>
+    <style>
+        body {
+font-family: 'Arial', sans-serif;
+            background-color: #e6f7ff; /* Light blue background color */
+        }
+
+        h1 {
+                font-family: 'Arial', sans-serif;
+            color: #0073e6; /* Dark blue color for the heading */
+        }
+
+        table {
+            border-collapse: collapse;
+            width: 100%;
+            margin-top: 20px; /* Add some space between the heading and the table */
+        }
+
+        th, td {
+                font-family: 'Courier New', monospace;
+            border: 1px solid #dddddd;
+            text-align: left;
+            padding: 8px;
+        }
+
+        th {
+                font-family: 'Courier New', monospace;
+            background-color: #f2f2f2;
+        }
+
+        p {
+                font-family: 'Courier New', monospace;
+            color: #333333; /* Dark text color for the message */
+        }
+    </style>
+</head>
+<body>
+
+<h1>Mercury layer lockbox status</h1>
+
+<div id="data-container"></div>
+
+<script>
+    // Specify the endpoint URL
+    const endpointUrl = 'https://api.mercurywallet.io/info/keylist';
+
+    // Function to fetch data from the specified endpoint
+    async function fetchData() {
+        try {
+            const response = await fetch(endpointUrl);
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+
+            const responseData = await response.json();
+            const data = responseData.list_keyinfo || [];
+
+            displayData(data);
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    }
+
+    // Function to display data in a table
+    function displayData(data) {
+        const dataContainer = document.getElementById('data-container');
+        dataContainer.innerHTML = '<h2>Current key share data:</h2>';
+
+        if (data.length > 0) {
+            const table = document.createElement('table');
+            const thead = document.createElement('thead');
+            const headerRow = thead.insertRow();
+
+            for (const key in data[0]) {
+                if (data[0].hasOwnProperty(key)) {
+                    const th = document.createElement('th');
+                    th.textContent = key;
+                    headerRow.appendChild(th);
+                }
+            }
+
+            table.appendChild(thead);
+
+            const tbody = document.createElement('tbody');
+            for (const item of data) {
+                const row = tbody.insertRow();
+                for (const key in item) {
+                    if (item.hasOwnProperty(key)) {
+                        const cell = row.insertCell();
+                        cell.textContent = item[key];
+                    }
+                }
+            }
+
+            table.appendChild(tbody);
+            dataContainer.appendChild(table);
+        } else {
+            dataContainer.innerHTML += '<p>No data available.</p>';
+        }
+    }
+
+    window.onload = fetchData;
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/explorer/main.js b/explorer/main.js
new file mode 100644
index 00000000..09a7e0dd
--- /dev/null
+++ b/explorer/main.js
@@ -0,0 +1,10 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Fetch JSON data
+    fetch('https://api.mercurywallet.io/info/keylist')
+        .then(response => response.json())
+        .then(data => {
+            // Display JSON data in a <pre> tag
+            document.getElementById('json-display').textContent = JSON.stringify(data, null, 2);
+        })
+        .catch(error => console.error('Error fetching data:', error));
+});
\ No newline at end of file
