diff --git a/src/mqueryfront/src/App.css b/src/mqueryfront/src/App.css
index 1d67e328..361a8bc4 100644
--- a/src/mqueryfront/src/App.css
+++ b/src/mqueryfront/src/App.css
@@ -87,3 +87,20 @@
 .cursor-pointer {
     cursor: pointer;
 }
+
+.modal-container {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-block {
+    position: relative;
+}
+
+.modal-table {
+    max-height: 40vh;
+    max-width: 50vw;
+    overflow: scroll;
+}
diff --git a/src/mqueryfront/src/components/ActionShowMatchContext.js b/src/mqueryfront/src/components/ActionShowMatchContext.js
new file mode 100644
index 00000000..3b2953eb
--- /dev/null
+++ b/src/mqueryfront/src/components/ActionShowMatchContext.js
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLightbulb } from "@fortawesome/free-solid-svg-icons";
+
+const ActionShowMatchContext = (props) => {
+    const [showModal, setShowModal] = useState(false);
+
+    const modalHeader = (
+        <div className="modal-header d-flex justify-content-between">
+            <h6 className="modal-title">Match context</h6>
+            <button
+                type="button"
+                className="close "
+                onClick={() => setShowModal(false)}
+            >
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+    );
+
+    const tableRows = Object.entries(props.context).map(
+        (contextItem, index) => (
+            <tr key={index}>
+                <th scope="row fit-content">
+                    <span className="badge rounded-pill bg-primary ms-1 mt-1">
+                        {contextItem[0]}
+                    </span>
+                </th>
+                <th scope="row">{contextItem[1]}</th>
+            </tr>
+        )
+    );
+
+    const modalBody = (
+        <div className="modal-body modal-table">
+            {!props.context ? (
+                "No context available"
+            ) : (
+                <table className="table">
+                    <tbody>{tableRows}</tbody>
+                </table>
+            )}
+        </div>
+    );
+
+    return (
+        <>
+            <button
+                title="Show match context"
+                className="text-secondary"
+                style={{ border: 0, background: 0 }}
+                onClick={() => setShowModal(!showModal)}
+            >
+                <FontAwesomeIcon icon={faLightbulb} size="sm" />
+            </button>
+            <div className="modal-container">
+                <div
+                    className="modal modal-block"
+                    style={{
+                        display: showModal ? "block" : "none",
+                        blockSize: "fit-content",
+                        width: "fit-content",
+                        position: "center",
+                    }}
+                >
+                    <div className="modal-dialog">
+                        <div className="modal-content">
+                            {modalHeader}
+                            {modalBody}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default ActionShowMatchContext;
diff --git a/src/mqueryfront/src/query/QueryMatchesItem.js b/src/mqueryfront/src/query/QueryMatchesItem.js
index 1cbf4525..1f03ed37 100644
--- a/src/mqueryfront/src/query/QueryMatchesItem.js
+++ b/src/mqueryfront/src/query/QueryMatchesItem.js
@@ -2,10 +2,22 @@ import React from "react";
 import path from "path-browserify";
 import ActionDownload from "../components/ActionDownload";
 import ActionCopyToClipboard from "../components/ActionCopyToClipboard";
+import ActionShowMatchContext from "../components/ActionShowMatchContext";
 
 const QueryMatchesItem = (props) => {
     const { match, download_url } = props;
-    const { matches, meta, file } = match;
+    const { matches, meta, file, context } = match; // NOTE: presuming new field in Match schema context which would be dict with 'matches' as keys
+
+    const stubContext = context
+        ? context
+        : {
+              key1:
+                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+              key2:
+                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+              key3:
+                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+          };
 
     const fileBasename = path.basename(file);
 
@@ -68,6 +80,12 @@ const QueryMatchesItem = (props) => {
                             tooltipMessage="Copy file name to clipboard"
                         />
                     </small>
+                    <small className="text-secondary ms-2 me-1 mt-1">
+                        <ActionShowMatchContext
+                            filename={fileBasename}
+                            context={stubContext}
+                        />
+                    </small>
                     {matchBadges}
                     {metadataBadges}
                 </div>