diff --git a/src/mqueryfront/src/App.css b/src/mqueryfront/src/App.css
index 4623cc31..1184edcf 100644
--- a/src/mqueryfront/src/App.css
+++ b/src/mqueryfront/src/App.css
@@ -89,10 +89,9 @@
 }
 
 .modal-container {
-    position: fixed;
+    position: absolute;
     offset-distance: 10px;
     z-index: auto;
-    max-width: 50vw;
     right: 5vw;
 }
 
diff --git a/src/mqueryfront/src/components/ActionShowMatchContext.js b/src/mqueryfront/src/components/ActionShowMatchContext.js
index c6a57184..9518f922 100644
--- a/src/mqueryfront/src/components/ActionShowMatchContext.js
+++ b/src/mqueryfront/src/components/ActionShowMatchContext.js
@@ -52,32 +52,48 @@ const ActionShowMatchContext = (props) => {
             </button>
         </div>
     );
-    // Buffer.from(rawData, 'base64');
 
     const tableRows = Object.keys(props.context).map((rulename, index) => {
-        const rulenameRows = props.context[rulename].map((foundSample) => {
-            return (
-                <>
-                    <td scope="row">
-                        {atob(foundSample["before"])}
-                        {<b>{atob(foundSample["matching"])}</b>}
-                        {atob(foundSample["after"])}
-                    </td>
-                    <td scope="row">
-                        {base64ToHex(foundSample["before"])}
-                        {<b>{base64ToHex(foundSample["matching"])}</b>}
-                        {base64ToHex(foundSample["after"])}
-                    </td>
-                </>
-            );
-        });
+        const rulenameRows = Object.keys(props.context[rulename]).map(
+            (identifier) => {
+                const foundSample = props.context[rulename][identifier];
+                return (
+                    <>
+                        <td scope="row" style={{ width: "10%" }}>
+                            <span className="badge rounded-pill bg-info ms-1 mt-1">
+                                {identifier}
+                            </span>
+                        </td>
+                        <td
+                            scope="row"
+                            className="text-monospace"
+                            style={{ width: "25%" }}
+                        >
+                            {atob(foundSample["before"])}
+                            {<b>{atob(foundSample["matching"])}</b>}
+                            {atob(foundSample["after"])}
+                        </td>
+                        <td
+                            scope="row"
+                            className="text-monospace"
+                            style={{ width: "50%" }}
+                        >
+                            {base64ToHex(foundSample["before"])}
+                            {<b>{base64ToHex(foundSample["matching"])}</b>}
+                            {base64ToHex(foundSample["after"])}
+                        </td>
+                    </>
+                );
+            }
+        );
 
         return (
             <>
                 <tr key={index}>
                     <td
                         scope="row fit-content"
-                        rowSpan={props.context[rulename].length}
+                        rowSpan={Object.keys(props.context[rulename]).length}
+                        style={{ width: "15%" }}
                     >
                         <span className="badge rounded-pill bg-primary ms-1 mt-1">
                             {rulename}
@@ -97,7 +113,7 @@ const ActionShowMatchContext = (props) => {
             {!Object.keys(props.context).length ? (
                 "No context available"
             ) : (
-                <table className="table">
+                <table className="table table-bordered">
                     <tbody>{tableRows}</tbody>
                 </table>
             )}
diff --git a/src/mqueryfront/src/query/QueryMatchesItem.js b/src/mqueryfront/src/query/QueryMatchesItem.js
index 8a62ae74..719ecdd3 100644
--- a/src/mqueryfront/src/query/QueryMatchesItem.js
+++ b/src/mqueryfront/src/query/QueryMatchesItem.js
@@ -6,36 +6,7 @@ import ActionShowMatchContext from "../components/ActionShowMatchContext";
 
 const QueryMatchesItem = (props) => {
     const { match, download_url } = props;
-    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
-        : {
-              Multiple_Strings_Match: [
-                  {
-                      before: "",
-                      matching: "ZGVm",
-                      after: "IHRlc3RfcHl0aG9uMygpOgogICAgcHJpbnQoImhlbGw=",
-                  },
-              ],
-              mquery_exceptions4: [
-                  {
-                      before: "",
-                      matching: "ZGVm",
-                      after: "IHRlc3RfcHl0aG9uMygpOgogICAgcHJpbnQoImhlbGw=",
-                  },
-                  {
-                      before: "",
-                      matching: "dGVzdA==",
-                      after: "X3B5dGhvbjMoKToKICAgIHByaW50KCJoZWxsbyEiKQo=",
-                  },
-                  {
-                      before: "ZWxsbyEiKQogICAgYSA9IDQKICAgIHJldHVybiBhCgo=",
-                      matching: "dGVzdA==",
-                      after: "X3B5dGhvbjMoKQoK",
-                  },
-              ],
-          };
+    const { matches, meta, file, context } = match;
 
     const fileBasename = path.basename(file);
 
@@ -101,7 +72,7 @@ const QueryMatchesItem = (props) => {
                     <small className="text-secondary ms-2 me-1 mt-1">
                         <ActionShowMatchContext
                             filename={fileBasename}
-                            context={stubContext}
+                            context={context}
                         />
                     </small>
                     {matchBadges}