diff --git a/frontend/components/JsonDisplay.tsx b/frontend/components/JsonDisplay.tsx
index 79a859c..42a3ac3 100644
--- a/frontend/components/JsonDisplay.tsx
+++ b/frontend/components/JsonDisplay.tsx
@@ -1,6 +1,6 @@
 
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { CheckIcon, ChevronDownIcon, ClipboardIcon, SearchIcon, XIcon, ArrowUpwardIcon, ArrowDownwardIcon } from './icons/material-icons-imports';
+import { CheckIcon, ChevronDownIcon, ClipboardIcon, SearchIcon, XIcon, ArrowUpwardIcon, ArrowDownwardIcon, CaseSensitiveIcon, WholeWordIcon, RegexIcon, ImageIcon } from './icons/material-icons-imports';
 
 // Search context for highlighting and navigation
 interface SearchState {
@@ -11,29 +11,55 @@ interface SearchState {
 }
 
 // Helper function to highlight search matches in text
-const highlightText = (text: string, searchQuery: string, isCurrentMatch: boolean = false): React.ReactNode => {
-  if (!searchQuery || !text.includes(searchQuery)) {
+// Helper function to highlight search matches in text
+const highlightText = (text: string, searchRegex: RegExp | null): React.ReactNode => {
+  if (!searchRegex || !text) {
     return text;
   }
 
-  const parts = text.split(new RegExp(`(${searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi'));
-  let matchIndex = 0;
-  
-  return parts.map((part, index) => {
-    if (part.toLowerCase() === searchQuery.toLowerCase()) {
-      const currentMatch = matchIndex++;
-      return (
-        <mark
-          key={index}
-          className={`px-1 py-0.5 rounded text-black ${isCurrentMatch ? 'bg-yellow-300 ring-2 ring-yellow-400' : 'bg-yellow-200'}`}
-          data-search-match={currentMatch}
-        >
-          {part}
-        </mark>
-      );
+  // Create a local regex with 'g' flag to find all matches in this string
+  let localRegex: RegExp;
+  try {
+    localRegex = new RegExp(searchRegex.source, searchRegex.flags.includes('g') ? searchRegex.flags : searchRegex.flags + 'g');
+  } catch (e) {
+    return text;
+  }
+
+  const matches: { start: number; end: number; text: string }[] = [];
+  let match;
+  localRegex.lastIndex = 0;
+
+  while ((match = localRegex.exec(text)) !== null) {
+    matches.push({ start: match.index, end: match.index + match[0].length, text: match[0] });
+    if (match[0].length === 0) localRegex.lastIndex++; // Avoid infinite loop
+  }
+
+  if (matches.length === 0) return text;
+
+  const nodes: React.ReactNode[] = [];
+  let lastIndex = 0;
+
+  matches.forEach((m, index) => {
+    if (m.start > lastIndex) {
+      nodes.push(text.substring(lastIndex, m.start));
     }
-    return part;
+    nodes.push(
+      <mark
+        key={`match-${index}`}
+        className="px-0.5 rounded text-black bg-yellow-200"
+        data-search-match="true"
+      >
+        {m.text}
+      </mark>
+    );
+    lastIndex = m.end;
   });
+
+  if (lastIndex < text.length) {
+    nodes.push(text.substring(lastIndex));
+  }
+
+  return <>{nodes}</>;
 };
 
 // Component to render ObjectId with both click navigation and copy functionality
@@ -129,10 +155,10 @@ const ObjectIdDisplay: React.FC<{
 
       {/* Context Menu */}
       {showContextMenu && (
-        <div 
+        <div
           className="fixed z-50 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-md shadow-lg py-1 min-w-[180px]"
-          style={{ 
-            left: `${contextMenuPosition.x}px`, 
+          style={{
+            left: `${contextMenuPosition.x}px`,
             top: `${contextMenuPosition.y}px`,
             transform: 'translate(-50%, 0)'
           }}
@@ -175,6 +201,96 @@ const ObjectIdDisplay: React.FC<{
   );
 };
 
+const Base64ImagePreview: React.FC<{
+  base64String: string;
+  searchRegex: RegExp | null;
+}> = ({ base64String, searchRegex }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [previewPos, setPreviewPos] = useState<{ x: number; y: number } | null>(null);
+  const iconRef = useRef<HTMLSpanElement>(null);
+
+  const handleMouseEnter = () => {
+    if (iconRef.current) {
+      const rect = iconRef.current.getBoundingClientRect();
+      const previewHeight = 220; // Approx max height
+      const previewWidth = 220; // Approx max width
+
+      // Default to showing above
+      let top = rect.top - previewHeight - 8;
+      let left = rect.left;
+
+      // If not enough space on top, show below
+      if (top < 10) {
+        top = rect.bottom + 8;
+      }
+
+      // Prevent right overflow
+      if (left + previewWidth > window.innerWidth) {
+        left = window.innerWidth - previewWidth - 10;
+      }
+
+      // Prevent left overflow
+      if (left < 10) left = 10;
+
+      setPreviewPos({ x: left, y: top });
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setPreviewPos(null);
+  };
+
+  if (isExpanded) {
+    return (
+      <span
+        className="cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700 rounded px-1 -ml-1 transition-colors"
+        onClick={() => setIsExpanded(false)}
+        title="Click to collapse back to icon"
+      >
+        <span className="text-emerald-700 dark:text-emerald-300">"
+          {searchRegex ? highlightText(base64String, searchRegex) : base64String}"
+        </span>
+      </span>
+    );
+  }
+
+  return (
+    <span
+      className="inline-flex items-center gap-2 group relative select-none"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <span
+        ref={iconRef}
+        className="cursor-pointer"
+        onClick={() => {
+          setIsExpanded(true);
+          setPreviewPos(null);
+        }}
+      >
+        <ImageIcon className="w-5 h-5 text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 transition-colors" />
+      </span>
+
+      {/* Tooltip Image Preview - Uses fixed positioning to escape container clipping */}
+      {previewPos && (
+        <div
+          className="fixed z-[9999] bg-white dark:bg-slate-800 p-2 rounded-lg shadow-xl border border-slate-200 dark:border-slate-600 pointer-events-none"
+          style={{
+            left: `${previewPos.x}px`,
+            top: `${previewPos.y}px`
+          }}
+        >
+          <img
+            src={base64String}
+            alt="Preview"
+            className="max-w-[200px] max-h-[200px] object-contain rounded bg-slate-100 dark:bg-slate-900"
+          />
+        </div>
+      )}
+    </span>
+  );
+};
+
 // A single, recursive component to render all parts of the JSON object.
 const JsonNode: React.FC<{
   nodeValue: any;
@@ -182,9 +298,9 @@ const JsonNode: React.FC<{
   isRoot?: boolean; // The top-level object is not collapsible
   onObjectIdClick?: (id: string, keyContext?: string, openInNewTab?: boolean) => void;
   parentKeyContext?: string; // The key of the parent, used for context in clicks
-  searchQuery?: string; // Search query for highlighting
+  searchRegex?: RegExp | null; // Regex for highlighting
   currentMatchIndex?: number; // Current match index for highlighting
-}> = ({ nodeValue, nodeKey, isRoot = false, onObjectIdClick, parentKeyContext, searchQuery = '', currentMatchIndex = -1 }) => {
+}> = ({ nodeValue, nodeKey, isRoot = false, onObjectIdClick, parentKeyContext, searchRegex = null, currentMatchIndex = -1 }) => {
   // All nodes are expanded by default.
   const [isExpanded, setIsExpanded] = useState(true);
 
@@ -194,7 +310,7 @@ const JsonNode: React.FC<{
     return (
       <span onClick={() => canCollapse && setIsExpanded(!isExpanded)} className={canCollapse ? 'cursor-pointer' : ''}>
         {nodeKey && <span className="text-purple-600 dark:text-purple-400">"
-          {searchQuery ? highlightText(nodeKey, searchQuery) : nodeKey}"
+          {searchRegex ? highlightText(nodeKey, searchRegex) : nodeKey}"
         </span>}
         {nodeKey && <span className="mr-1">:</span>}
         {canCollapse && (
@@ -219,47 +335,47 @@ const JsonNode: React.FC<{
     return (
       <div className="inline-block">
         {nodeKey && <span className="text-purple-600 dark:text-purple-400">"
-          {searchQuery ? highlightText(nodeKey, searchQuery) : nodeKey}": 
+          {searchRegex ? highlightText(nodeKey, searchRegex) : nodeKey}":
         </span>}
         <span className="text-rose-500 dark:text-rose-400">null</span>
       </div>
     );
   }
-  
+
   // BSON Types: ObjectId, Date
   if (typeof nodeValue === 'object' && nodeValue !== null) {
     if (nodeValue.$oid && Object.keys(nodeValue).length === 1 && typeof nodeValue.$oid === 'string') {
       const objectId = nodeValue.$oid;
       return (
         <div className="inline-block">
-            {nodeKey && <span className="text-purple-600 dark:text-purple-400">"
-              {searchQuery ? highlightText(nodeKey, searchQuery) : nodeKey}": 
-            </span>}
-            <span className="text-slate-700 dark:text-slate-300">
-              <span className="text-purple-600 dark:text-purple-400">ObjectId</span>(
-              <ObjectIdDisplay 
-                objectId={objectId} 
-                onObjectIdClick={onObjectIdClick} 
-                keyContext={parentKeyContext}
-                showAsLink={!!onObjectIdClick}
-              />
-              )
-            </span>
+          {nodeKey && <span className="text-purple-600 dark:text-purple-400">"
+            {searchRegex ? highlightText(nodeKey, searchRegex) : nodeKey}":
+          </span>}
+          <span className="text-slate-700 dark:text-slate-300">
+            <span className="text-purple-600 dark:text-purple-400">ObjectId</span>(
+            <ObjectIdDisplay
+              objectId={objectId}
+              onObjectIdClick={onObjectIdClick}
+              keyContext={parentKeyContext}
+              showAsLink={!!onObjectIdClick}
+            />
+            )
+          </span>
         </div>
       );
     }
     if (nodeValue.$date && Object.keys(nodeValue).length === 1) {
-        return (
-            <div className="inline-block">
-                {nodeKey && <span className="text-purple-600 dark:text-purple-400">"
-                  {searchQuery ? highlightText(nodeKey, searchQuery) : nodeKey}": 
-                </span>}
-                <span className="text-slate-700 dark:text-slate-300">
-                    <span className="text-purple-600 dark:text-purple-400">ISODate</span>("
-                    {searchQuery ? highlightText(new Date(nodeValue.$date).toISOString(), searchQuery) : new Date(nodeValue.$date).toISOString()}")
-                </span>
-            </div>
-        );
+      return (
+        <div className="inline-block">
+          {nodeKey && <span className="text-purple-600 dark:text-purple-400">"
+            {searchRegex ? highlightText(nodeKey, searchRegex) : nodeKey}":
+          </span>}
+          <span className="text-slate-700 dark:text-slate-300">
+            <span className="text-purple-600 dark:text-purple-400">ISODate</span>("
+            {searchRegex ? highlightText(new Date(nodeValue.$date).toISOString(), searchRegex) : new Date(nodeValue.$date).toISOString()}")
+          </span>
+        </div>
+      );
     }
   }
 
@@ -269,7 +385,7 @@ const JsonNode: React.FC<{
       return (
         <span>
           {nodeKey && <span className="text-purple-600 dark:text-purple-400">"
-            {searchQuery ? highlightText(nodeKey, searchQuery) : nodeKey}": 
+            {searchRegex ? highlightText(nodeKey, searchRegex) : nodeKey}":
           </span>}
           []
         </span>
@@ -283,11 +399,11 @@ const JsonNode: React.FC<{
             <div className="pl-6 border-l border-slate-200 dark:border-slate-700 ml-2">
               {nodeValue.map((item, index) => (
                 <div key={index}>
-                  <JsonNode 
-                    nodeValue={item} 
-                    onObjectIdClick={onObjectIdClick} 
+                  <JsonNode
+                    nodeValue={item}
+                    onObjectIdClick={onObjectIdClick}
                     parentKeyContext={parentKeyContext}
-                    searchQuery={searchQuery}
+                    searchRegex={searchRegex}
                     currentMatchIndex={currentMatchIndex}
                   />
                   {index < nodeValue.length - 1 && ','}
@@ -305,14 +421,14 @@ const JsonNode: React.FC<{
   if (typeof nodeValue === 'object') {
     const keys = Object.keys(nodeValue);
     if (keys.length === 0) {
-        return (
-            <span>
-              {nodeKey && <span className="text-purple-600 dark:text-purple-400">"
-                {searchQuery ? highlightText(nodeKey, searchQuery) : nodeKey}": 
-              </span>}
-              {`{}`}
-            </span>
-          );
+      return (
+        <span>
+          {nodeKey && <span className="text-purple-600 dark:text-purple-400">"
+            {searchRegex ? highlightText(nodeKey, searchRegex) : nodeKey}":
+          </span>}
+          {`{}`}
+        </span>
+      );
     }
     return (
       <div>
@@ -322,12 +438,12 @@ const JsonNode: React.FC<{
             <div className="pl-6 border-l border-slate-200 dark:border-slate-700 ml-2">
               {keys.map((key, index) => (
                 <div key={key}>
-                  <JsonNode 
-                    nodeValue={nodeValue[key]} 
-                    nodeKey={key} 
-                    onObjectIdClick={onObjectIdClick} 
+                  <JsonNode
+                    nodeValue={nodeValue[key]}
+                    nodeKey={key}
+                    onObjectIdClick={onObjectIdClick}
                     parentKeyContext={key}
-                    searchQuery={searchQuery}
+                    searchRegex={searchRegex}
                     currentMatchIndex={currentMatchIndex}
                   />
                   {index < keys.length - 1 && ','}
@@ -340,52 +456,57 @@ const JsonNode: React.FC<{
       </div>
     );
   }
-  
+
   // Primitives
   const renderPrimitive = () => {
     switch (typeof nodeValue) {
-        case 'string': {
-          const isObjectIdLike = /^[0-9a-fA-F]{24}$/.test(nodeValue);
-          if (isObjectIdLike && onObjectIdClick) {
-            return (
-              <span className="text-emerald-700 dark:text-emerald-300">
-                <ObjectIdDisplay 
-                  objectId={nodeValue} 
-                  onObjectIdClick={onObjectIdClick} 
-                  keyContext={parentKeyContext}
-                  showAsLink={true}
-                />
-              </span>
-            );
-          }
-          return <span className="text-emerald-700 dark:text-emerald-300">"
-            {searchQuery ? highlightText(nodeValue, searchQuery) : nodeValue}"
-          </span>;
+      case 'string': {
+        const isObjectIdLike = /^[0-9a-fA-F]{24}$/.test(nodeValue);
+        if (isObjectIdLike && onObjectIdClick) {
+          return (
+            <span className="text-emerald-700 dark:text-emerald-300">
+              <ObjectIdDisplay
+                objectId={nodeValue}
+                onObjectIdClick={onObjectIdClick}
+                keyContext={parentKeyContext}
+                showAsLink={true}
+              />
+            </span>
+          );
         }
-        case 'number':
-          const numberStr = String(nodeValue);
-          return <span className="text-amber-600 dark:text-amber-400">
-            {searchQuery ? highlightText(numberStr, searchQuery) : numberStr}
-          </span>;
-        case 'boolean':
-          const boolStr = String(nodeValue);
-          return <span className="text-sky-600 dark:text-sky-400">
-            {searchQuery ? highlightText(boolStr, searchQuery) : boolStr}
-          </span>;
-        default:
-          const defaultStr = String(nodeValue);
-          return <span>
-            {searchQuery ? highlightText(defaultStr, searchQuery) : defaultStr}
-          </span>;
+
+        if (nodeValue.startsWith("data:image/png;base64,")) {
+          return <Base64ImagePreview base64String={nodeValue} searchRegex={searchRegex} />;
+        }
+
+        return <span className="text-emerald-700 dark:text-emerald-300">"
+          {searchRegex ? highlightText(nodeValue, searchRegex) : nodeValue}"
+        </span>;
       }
+      case 'number':
+        const numberStr = String(nodeValue);
+        return <span className="text-amber-600 dark:text-amber-400">
+          {searchRegex ? highlightText(numberStr, searchRegex) : numberStr}
+        </span>;
+      case 'boolean':
+        const boolStr = String(nodeValue);
+        return <span className="text-sky-600 dark:text-sky-400">
+          {searchRegex ? highlightText(boolStr, searchRegex) : boolStr}
+        </span>;
+      default:
+        const defaultStr = String(nodeValue);
+        return <span>
+          {searchRegex ? highlightText(defaultStr, searchRegex) : defaultStr}
+        </span>;
+    }
   };
 
   return (
     <div className="inline-block">
-        {nodeKey && <span className="text-purple-600 dark:text-purple-400">"
-          {searchQuery ? highlightText(nodeKey, searchQuery) : nodeKey}": 
-        </span>}
-        {renderPrimitive()}
+      {nodeKey && <span className="text-purple-600 dark:text-purple-400">"
+        {searchRegex ? highlightText(nodeKey, searchRegex) : nodeKey}":
+      </span>}
+      {renderPrimitive()}
     </div>
   );
 };
@@ -398,35 +519,69 @@ interface JsonDisplayProps {
 const JsonDisplay: React.FC<JsonDisplayProps> = ({ data, onObjectIdClick }) => {
   const [copied, setCopied] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
+  const [matchCase, setMatchCase] = useState(false);
+  const [matchWholeWord, setMatchWholeWord] = useState(false);
+  const [useRegex, setUseRegex] = useState(false);
+  const [searchRegex, setSearchRegex] = useState<RegExp | null>(null);
+
   const [currentMatchIndex, setCurrentMatchIndex] = useState(0);
   const [totalMatches, setTotalMatches] = useState(0);
   const [isSearchVisible, setIsSearchVisible] = useState(false);
   const containerRef = useRef<HTMLPreElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
-  // Count total matches in the JSON string
-  const countMatches = useCallback((query: string) => {
-    if (!query) return 0;
-    const jsonString = JSON.stringify(data, null, 2);
-    const matches = jsonString.match(new RegExp(query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'));
-    return matches ? matches.length : 0;
-  }, [data]);
-
-  // Update match count when search query changes
+  // Update regex and count matches when inputs change
   useEffect(() => {
-    const matches = countMatches(searchQuery);
-    setTotalMatches(matches);
-    if (matches === 0) {
-      setCurrentMatchIndex(0);
-    } else if (currentMatchIndex >= matches) {
+    if (!searchQuery) {
+      setSearchRegex(null);
+      setTotalMatches(0);
       setCurrentMatchIndex(0);
+      return;
+    }
+
+    try {
+      let pattern = searchQuery;
+      let flags = 'g';
+
+      if (!useRegex) {
+        pattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      }
+
+      if (matchWholeWord) {
+        pattern = `\\b${pattern}\\b`;
+      }
+
+      if (!matchCase) {
+        flags += 'i';
+      }
+
+      const regex = new RegExp(pattern, flags);
+      setSearchRegex(regex);
+
+      const jsonString = JSON.stringify(data, null, 2);
+      const matches = jsonString.match(regex);
+      const count = matches ? matches.length : 0;
+
+      setTotalMatches(count);
+      if (count === 0) {
+        setCurrentMatchIndex(0);
+      } else if (currentMatchIndex >= count) {
+        setCurrentMatchIndex(0);
+      }
+    } catch (e) {
+      setSearchRegex(null);
+      setTotalMatches(0);
     }
-  }, [searchQuery, countMatches, currentMatchIndex]);
+  }, [searchQuery, matchCase, matchWholeWord, useRegex, data]); // removed currentMatchIndex dependency to prevent loop, added data
 
   // Navigate to current match
   const scrollToMatch = useCallback(() => {
     if (!containerRef.current || totalMatches === 0) return;
-    
+
+    // allow a tick for DOM to update with highlights
+    // but useEffect is post-render, so DOM should be ready if nodes rendered.
+    // However, JsonNode is recursive, might take time? No, sync render.
+
     const matches = containerRef.current.querySelectorAll('[data-search-match]');
     if (matches.length === 0) return;
 
@@ -485,7 +640,7 @@ const JsonDisplay: React.FC<JsonDisplayProps> = ({ data, onObjectIdClick }) => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     }).catch(err => {
-        console.error("Failed to copy JSON:", err);
+      console.error("Failed to copy JSON:", err);
     });
   };
 
@@ -534,9 +689,33 @@ const JsonDisplay: React.FC<JsonDisplayProps> = ({ data, onObjectIdClick }) => {
               }
             }}
           />
+          <div className="flex items-center gap-0.5 border-r border-slate-300 dark:border-slate-600 pr-2 mr-2">
+            <button
+              onClick={() => setMatchCase(!matchCase)}
+              className={`p-1 rounded ${matchCase ? 'bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400' : 'text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300'}`}
+              title="Match Case"
+            >
+              <CaseSensitiveIcon className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setMatchWholeWord(!matchWholeWord)}
+              className={`p-1 rounded ${matchWholeWord ? 'bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400' : 'text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300'}`}
+              title="Match Whole Word"
+            >
+              <WholeWordIcon className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setUseRegex(!useRegex)}
+              className={`p-1 rounded ${useRegex ? 'bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400' : 'text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300'}`}
+              title="Use Regular Expression"
+            >
+              <RegexIcon className="w-4 h-4" />
+            </button>
+          </div>
+
           {searchQuery && (
             <div className="flex items-center gap-1">
-              <span className="text-xs text-slate-500 dark:text-slate-400">
+              <span className="text-xs text-slate-500 dark:text-slate-400 whitespace-nowrap">
                 {totalMatches > 0 ? `${currentMatchIndex + 1}/${totalMatches}` : 'No matches'}
               </span>
               <button
@@ -566,19 +745,19 @@ const JsonDisplay: React.FC<JsonDisplayProps> = ({ data, onObjectIdClick }) => {
           </button>
         </div>
       )}
-      
+
       <pre className="text-sm p-4 overflow-x-auto font-mono text-slate-900 dark:text-slate-100" ref={containerRef}>
         <code>
-          <JsonNode 
-            nodeValue={data} 
-            isRoot 
+          <JsonNode
+            nodeValue={data}
+            isRoot
             onObjectIdClick={onObjectIdClick}
-            searchQuery={searchQuery}
+            searchRegex={searchRegex}
             currentMatchIndex={currentMatchIndex}
           />
         </code>
       </pre>
-      
+
       <div className="absolute top-2 right-2 flex items-center gap-1">
         {!isSearchVisible && (
           <button
diff --git a/frontend/components/icons/material-icons-imports.tsx b/frontend/components/icons/material-icons-imports.tsx
index f29134b..b30da47 100644
--- a/frontend/components/icons/material-icons-imports.tsx
+++ b/frontend/components/icons/material-icons-imports.tsx
@@ -61,4 +61,8 @@ export { default as NoteAddIcon } from '@mui/icons-material/NoteAdd';
 export { default as HistoryIcon } from '@mui/icons-material/History';
 export { default as AccessTimeIcon } from '@mui/icons-material/AccessTime';
 export { default as AddIcon } from '@mui/icons-material/Add';
+export { default as CaseSensitiveIcon } from '@mui/icons-material/Abc';
+export { default as WholeWordIcon } from '@mui/icons-material/ShortText';
+export { default as RegexIcon } from '@mui/icons-material/Code';
 export { default as DeleteIcon } from '@mui/icons-material/Delete';
+export { default as ImageIcon } from '@mui/icons-material/Image';