diff --git a/src/dashboard/DatabaseProfiler/DatabaseProfiler.react.js b/src/dashboard/DatabaseProfiler/DatabaseProfiler.react.js
index 350e2b019..bbe96374a 100644
--- a/src/dashboard/DatabaseProfiler/DatabaseProfiler.react.js
+++ b/src/dashboard/DatabaseProfiler/DatabaseProfiler.react.js
@@ -113,16 +113,16 @@ class DatabaseProfile extends DashboardView {
 
   renderHeaders() {
     return [
-      <TableHeader key="Operation Type" width={25}>
+      <TableHeader key="OperationType" width={25}>
         Operation Type
       </TableHeader>,
       <TableHeader key="Class" width={25}>
         Class
       </TableHeader>,
-      <TableHeader key="Time" width={25}>
+      <TableHeader key="ExecutionTime" width={25}>
         Execution Time (ms)
       </TableHeader>,
-      <TableHeader key="Time" width={25}>
+      <TableHeader key="ExecutedAt" width={25}>
         Executed At (UTC)
       </TableHeader>
     ];
diff --git a/src/dashboard/DatabaseProfiler/DatabaseProfiler.scss b/src/dashboard/DatabaseProfiler/DatabaseProfiler.scss
index e26ee17d0..ac3a8f745 100644
--- a/src/dashboard/DatabaseProfiler/DatabaseProfiler.scss
+++ b/src/dashboard/DatabaseProfiler/DatabaseProfiler.scss
@@ -2,13 +2,27 @@
   z-index: 1000 !important;
 }
 
+code[class*="language-"], pre[class*="language-"] {
+  background: #111214 !important;
+}
+
+.pre-wrap {
+  max-height: auto;
+}
+
 .pageContainer {
   position: relative;
   height: 100vh;
   display: flex;
   flex-direction: column;
-  padding-top: 64px; /* Account for header */
-  overflow: hidden; /* Prevent double scrollbars */
+  padding-top: 64px;
+  /* Account for header */
+  overflow: hidden;
+  /* Prevent double scrollbars */
+}
+
+.marginTopContent {
+  margin-top: 80px;
 }
 
 .mainContent {
@@ -21,18 +35,19 @@
   margin-left: 10px;
   cursor: pointer;
   color: #ffffff;
-  
+
   &:hover {
     opacity: 0.8;
   }
 
   svg {
-    fill: currentColor;  // Make SVG icon inherit the text color
+    fill: currentColor; // Make SVG icon inherit the text color
   }
 }
 
 .row {
   transition: all 0.3s ease;
+
   &:hover {
     cursor: pointer;
     box-shadow: 0px 1px 0px 0px rgba(193, 226, 255, 0.16);
@@ -43,7 +58,8 @@
 .detailView {
   padding: 20px;
   background: #0c1e35;
-  margin-top: 0px; /* Account for toolbar height */
+  margin-top: 0px;
+  /* Account for toolbar height */
   box-sizing: border-box;
 }
 
@@ -93,11 +109,15 @@
 
 .detailSection {
   margin-bottom: 24px;
+  border-radius: 7px;
+  border: 0.1px solid #ffffff29;
+  padding: 20px 20px 10px 20px;
+  background-color: #10203a;
 
   h3 {
     color: #ffffff;
-    font-size: 14px;
-    margin-bottom: 12px;
+    font-size: 17px;
+    margin-bottom: 20px;
     font-weight: 600;
   }
 }
@@ -105,28 +125,17 @@
 .detailGrid {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 16px;
+  gap: 5px;
   margin-bottom: 12px;
-
-  &.twoColumns {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media (max-width: 1200px) {
-    &.twoColumns {
-      grid-template-columns: 1fr;
-    }
-  }
 }
 
 .detailRow {
   display: flex;
+  padding: 5px;
   align-items: center;
-  padding: 12px 16px;
-  background: rgba(255, 255, 255, 0.05);
   border-radius: 6px;
+  font-size: 15px;
   transition: all 0.2s ease;
-  min-height: 48px;
   box-sizing: border-box;
 
   &:hover {
@@ -135,12 +144,13 @@
 }
 
 .detailLabel {
-  color: rgba(255, 255, 255, 0.7);
-  font-weight: 500;
-  margin-right: 24px;
-  width: 160px;
+  color: #ffffff9c;
+  margin-right: 10px;
   flex-shrink: 0;
-  font-size: 13px;
+
+  &::after {
+    content: ":";
+  }
 }
 
 .detailValue {
@@ -151,17 +161,18 @@
 }
 
 .queryContainer {
-  background: rgba(255, 255, 255, 0.05);
-  padding: 12px;
+  margin-top: 20px;
   border-radius: 6px;
   font-size: 13px;
   width: 100%;
   line-height: 1.5;
   box-sizing: border-box;
-  max-height: 200px;
+  min-height: 200px;
   display: flex;
   flex-direction: column;
-  
+  margin-bottom: 20px;
+  position: relative;
+
   h4 {
     margin: 0 0 8px 0;
     font-size: 13px;
@@ -171,54 +182,40 @@
   pre {
     width: 100%;
     flex: 1;
-    overflow: auto;
     margin: 0;
-    padding: 8px;
-    background: rgba(0, 0, 0, 0.2);
+    background: #111214 !important;
+    margin: 0 !important;
     border-radius: 4px;
     font-size: 12px;
     white-space: pre-wrap;
-    word-break: break-all;
-    max-height: 150px;
-
-    &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: rgba(255, 255, 255, 0.05);
-      border-radius: 3px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 3px;
-      
-      &:hover {
-        background: rgba(255, 255, 255, 0.3);
-      }
-    }
+    min-height: 200px;
+    border-radius: 4px;
+    padding: 0rem 1.5rem 1.5rem 0 !important;
+    overflow-x: auto;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    font-family: 'Roboto Mono', monospace !important;
+    padding-left: 3.5em !important;
   }
 }
 
-.title {
+.contentTitle {
+  background: #345070;
   color: #ffffff;
   font-size: 14px;
   font-weight: 500;
-  margin-bottom: 12px;
-}
+  padding: 8px 30px;
+  border-radius: 5px 5px 0px 0px;
 
-.code {
-  background: rgba(255, 255, 255, 0.02);
-  border-radius: 4px;
-  padding: 12px;
+  button {
+    float: right;
+  }
 }
 
 .booleanTag {
   display: inline-flex;
   align-items: center;
-  padding: 4px 8px;
+  padding: 4px 12px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
diff --git a/src/dashboard/DatabaseProfiler/DatabaseProfilerDetail.react.js b/src/dashboard/DatabaseProfiler/DatabaseProfilerDetail.react.js
index f98ac6271..687cc85f8 100644
--- a/src/dashboard/DatabaseProfiler/DatabaseProfilerDetail.react.js
+++ b/src/dashboard/DatabaseProfiler/DatabaseProfilerDetail.react.js
@@ -5,9 +5,42 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import React from 'react';
+
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import ReactMarkdown from 'react-markdown';
 import styles from './DatabaseProfiler.scss';
 
+import Prism from 'prismjs';
+import 'prismjs/plugins/line-numbers/prism-line-numbers';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
+import 'prismjs/components/prism-json';
+// eslint-disable-next-line no-unused-vars
+import 'stylesheets/b4a-prisma.css';
+
+const handleCopy = async (value) => {
+  try {
+    await navigator.clipboard.writeText(value.trim());
+  } catch (err) {
+    console.error('Failed to copy text: ', err);
+  }
+};
+
+const CodeBlock = ({ language, value }) => {
+  useEffect(() => {
+    if (typeof Prism !== 'undefined') {
+      Prism.highlightAll();
+    }
+  }, [value, language]);
+
+  return (
+    <div className={styles.codeBlockContainer}>
+      <pre className="line-numbers"><code className={`language-${language}`}>{value.trim()}</code></pre>
+    </div>
+  );
+};
+
+
 const DatabaseProfilerDetail = ({ data }) => {
   if (!data) {
     return <div className={styles.detailContent}>No data available</div>;
@@ -27,6 +60,7 @@ const DatabaseProfilerDetail = ({ data }) => {
     responseLength = 0,
     hasSort = false,
     hasIndex = false,
+    executionStats,
     command = op || 'unknown',  // Fallback to op if command is not present
     limit = 0,
     update,
@@ -47,7 +81,7 @@ const DatabaseProfilerDetail = ({ data }) => {
   };
 
   const renderDetailRow = (label, value) => (
-    <div className={styles.detailRow}>
+    <div key={`detail-${label}`} className={styles.detailRow}>
       <span className={styles.detailLabel}>{label}</span>
       <span className={styles.detailValue}>{value}</span>
     </div>
@@ -59,204 +93,123 @@ const DatabaseProfilerDetail = ({ data }) => {
     </span>
   );
 
-  const renderOperationSpecificDetails = () => {
-    if (!command || command === 'unknown') {
-      return (
-        <div className={styles.detailSection}>
-          <h3>Operation Details</h3>
-          <div className={styles.queryContainer}>
-            <pre className="language-javascript">{JSON.stringify(data, null, 2)}</pre>
+  const JsonCodeBlock = React.memo(({ title, data }) => {
+    const memoizedJson = React.useMemo(() => JSON.stringify(data, null, 2), [data]);
+    return (
+    <div className={styles.queryContainer}>
+      {title && 
+        <> 
+          <div className={styles.contentTitle}>
+            <span>{title}</span>
+            <button
+              onClick={() => handleCopy(memoizedJson)}
+              className={styles.copyButton}
+              title="Copy to clipboard"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+              </svg>
+            </button>
           </div>
-        </div>
-      );
-    }
+        </>
+      }
+      <div className={styles.code}>
+        <ReactMarkdown
+          renderers={{
+            code: CodeBlock
+          }}
+        >{`~~~json
+${JSON.stringify(data, null, 2)}
+~~~`}</ReactMarkdown>
+      </div>
+    </div>
+  );
+});
+
+JsonCodeBlock.propTypes = {
+  title: PropTypes.string,
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired
+};
+
+const DetailSection = React.memo(({ title, children }) => (
+    <div className={styles.detailSection}>
+      <h3>{title}</h3>
+      <div className={styles.detailGrid}>
+        {children}
+      </div>
+    </div>
+  ));
+
+DetailSection.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired
+};
+
+  const renderOperationSpecificDetails = () => {
+    let sectionTitle = 'Operation Details', subTitle = '', json, sortJson, updateJson;
 
     switch (command) {
+      case 'unknown':
+        subTitle = 'Command Details';
+        json = data;
+        break;
       case 'aggregate':
-        return (
-          <div className={styles.detailSection}>
-            <h3>Aggregation Pipeline</h3>
-            <div className={styles.queryContainer}>
-              <pre className="language-javascript">{JSON.stringify(pipeline, null, 2)}</pre>
-            </div>
-          </div>
-        );
-
+        subTitle = 'Pipeline';
+        json = pipeline;
+        break;
       case 'count':
-        return (
-          <div className={styles.detailSection}>
-            <h3>Count Query</h3>
-            <div className={styles.queryContainer}>
-              <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-            </div>
-          </div>
-        );
-
+        subTitle = 'Query';
+        json = query;
+        sortJson = sort;
+        break;
       case 'delete':
-        return (
-          <div className={styles.detailSection}>
-            <h3>Delete Operation</h3>
-            <div className={styles.detailGrid}>
-              {renderDetailRow('Documents Removed', nRemoved || 0)}
-              <div className={styles.queryContainer}>
-                <h4>Delete Query</h4>
-                <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-              </div>
-            </div>
-          </div>
-        );
-
+      case 'remove':
+        subTitle = 'Query';
+        json = query;
+        break;
       case 'distinct':
-        return (
-          <div className={styles.detailSection}>
-            <h3>Distinct Operation</h3>
-            <div className={styles.detailGrid}>
-              {renderDetailRow('Distinct Key', distinct?.key || '')}
-              <div className={styles.queryContainer}>
-                <h4>Distinct Query</h4>
-                <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-              </div>
-            </div>
-          </div>
-        );
-
+        subTitle = 'Query';
+        json = query;
+        break;
       case 'find':
       case 'query':
-        return (
-          <div className={styles.detailSection}>
-            <h3>Query Details</h3>
-            <div style={{ display: Object.keys(sort).length > 0 ? 'flex' : 'flow', gap: '20px' }}>
-              <div className={styles.queryContainer}>
-                <div className={styles.title}>Find Query</div>
-                <div className={styles.code}>
-                  <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-                </div>
-              </div>
-
-              {Object.keys(sort).length > 0 && (
-                <div className={styles.queryContainer}>
-                  <div className={styles.title}>Sort Criteria</div>
-                  <div className={styles.code}>
-                    <pre className="language-javascript">{JSON.stringify(sort, null, 2)}</pre>
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        );
-
+        subTitle = 'Query';
+        json = query;
+        sortJson = sort;
+        break;
       case 'findAndModify':
-        return (
-          <div className={styles.detailSection}>
-            <h3>Find and Modify Operation</h3>
-            <div className={styles.detailGrid}>
-              {limit > 0 && renderDetailRow('Limit', limit)}
-              <div className={styles.queryContainer}>
-                <h4>Query Document</h4>
-                <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-              </div>
-              {Object.keys(sort).length > 0 && (
-                <div className={styles.queryContainer}>
-                  <h4>Sort Criteria</h4>
-                  <pre className="language-javascript">{JSON.stringify(sort, null, 2)}</pre>
-                </div>
-              )}
-              {update && (
-                <div className={styles.queryContainer}>
-                  <h4>Update Operations</h4>
-                  <pre className="language-javascript">{JSON.stringify(update, null, 2)}</pre>
-                </div>
-              )}
-            </div>
-          </div>
-        );
-
-      case 'getMore':
-        return (
-          <div className={styles.detailSection}>
-            <h3>Get More Operation</h3>
-            <div className={styles.detailGrid}>
-              {renderDetailRow('Documents Returned', docsReturned)}
-            </div>
-          </div>
-        );
-
-      case 'insert':
-        return (
-          <div className={styles.detailSection}>
-            <h3>Insert Operation</h3>
-            <div className={styles.detailGrid}>
-              {renderDetailRow('Documents Inserted', nInserted || 0)}
-            </div>
-          </div>
-        );
-
+        subTitle = 'Query';
+        json = query;
+        sortJson = sort;
+        updateJson = update;
+        break;
       case 'mapReduce':
-        return (
-          <div className={styles.detailSection}>
-            <h3>Map-Reduce Operation</h3>
-            <div className={styles.detailGrid}>
-              {mapReduce && (
-                <>
-                  <div className={styles.queryContainer}>
-                    <h4>Map Function</h4>
-                    <pre className="language-javascript">{mapReduce.map}</pre>
-                  </div>
-                  <div className={styles.queryContainer}>
-                    <h4>Reduce Function</h4>
-                    <pre className="language-javascript">{mapReduce.reduce}</pre>
-                  </div>
-                  {mapReduce.finalize && (
-                    <div className={styles.queryContainer}>
-                      <h4>Finalize Function</h4>
-                      <pre className="language-javascript">{mapReduce.finalize}</pre>
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-          </div>
-        );
-
+        subTitle = 'Map-Reduce Operation';
+        json = {
+          map: mapReduce?.map,
+          reduce: mapReduce?.reduce,
+          finalize: mapReduce?.finalize
+        };
+        break;
       case 'update':
-        return (
-          <div className={styles.detailSection}>
-            <h3>Update Operation</h3>
-            <div className={styles.detailGrid}>
-              {renderDetailRow('Documents Modified', nModified || 0)}
-              <div className={styles.queryContainer}>
-                <h4>Query</h4>
-                <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-              </div>
-              <div className={styles.queryContainer}>
-                <h4>Update</h4>
-                <pre className="language-javascript">{JSON.stringify(update, null, 2)}</pre>
-              </div>
-            </div>
-          </div>
-        );
-
-      case 'remove':
-        return (
-          <>
-            <div className={styles.detailSection}>
-              <h3>Remove Operation</h3>
-              <div className={styles.detailGrid}>
-                {renderDetailRow('Documents Removed', nRemoved || 0)}
-                {renderDetailRow('Limit', limit || 0)}
-              </div>
-            </div>
-            <div className={styles.detailSection}>
-              <h3>Query Details</h3>
-              <div className={styles.queryContainer}>
-                <pre className="language-javascript">{JSON.stringify(query, null, 2)}</pre>
-              </div>
-            </div>
-          </>
-        );
+        subTitle = 'Query';
+        json = query;
+        sortJson = sort;
+        updateJson = update;
+        break;
       default:
         return null;
     }
+
+    return (
+      <DetailSection title={sectionTitle}>
+        {json && Object.keys(json).length > 0 && <JsonCodeBlock title={subTitle} data={json} />}
+        {sortJson && Object.keys(sortJson).length > 0 && <JsonCodeBlock title="Sort Criteria" data={sortJson} />}
+        {updateJson && Object.keys(updateJson).length > 0 && <JsonCodeBlock title="Update Operations" data={updateJson} />}
+        {distinct && Object.keys(distinct).length > 0 && <JsonCodeBlock title="Distinct" data={distinct} />}
+      </DetailSection>
+    );
   };
 
   const shouldShowPerformanceMetrics = () => {
@@ -265,21 +218,49 @@ const DatabaseProfilerDetail = ({ data }) => {
     return commandsWithMetrics.includes(command);
   };
 
-  const renderOverview = () => (
-    <div className={styles.detailSection}>
-      <h3>Operation Overview</h3>
-      <div className={styles.detailGrid}>
-        {renderDetailRow('Command Type', command)}
-        {renderDetailRow('Class', className)}
-        {(command === 'find' || command === 'query') && renderDetailRow('Limit', limit || 0)}
-        {renderDetailRow('Total Execution Time', `${duration}ms`)}
-        {renderDetailRow('Last Execution Time', formatDate(ts))}
+  const getOperationDetails = () => {
+    switch (command) {
+      case 'find':
+      case 'query':
+        const queryTotal = executionStats?.nReturned || docsReturned;
+        return queryTotal !== undefined ? { title: 'Documents Returned', value: queryTotal } : null;
+      case 'count':
+        const countTotal = docsReturned || executionStats?.nReturned;
+        return countTotal !== undefined ? { title: 'Documents Counted', value: countTotal } : null;
+      case 'delete':
+      case 'remove':
+        return nRemoved ? { title: 'Documents Removed', value: nRemoved } : null;
+      case 'insert':
+        return nInserted ? { title: 'Documents Inserted', value: nInserted } : null;
+      case 'update':
+        return nModified ? { title: 'Documents Modified', value: nModified } : null;
+      case 'distinct':
+        return distinct?.key ? { title: 'Distinct Key', value: distinct.key } : null;
+      default:
+        return null;
+    }
+  };
+
+  const renderOverview = () => {
+
+    return (
+      <div key="overview-section" className={styles.detailSection}>
+        <h3>Operation Overview</h3>
+        <div className={styles.detailGrid}>
+          {renderDetailRow('Command Type', command)}
+          {renderDetailRow('Class', className)}
+          {(command === 'find' || command === 'query') && renderDetailRow('Limit', limit || 0)}
+          {renderDetailRow('Duration', `${duration}ms`)}
+          {renderDetailRow('Timestamp', formatDate(ts))}
+        </div>
       </div>
-    </div>
-  );
+    );
+  };
+
+  const operationDetails = getOperationDetails();
 
   return (
-    <div style={{ padding: '20px' }}>
+    <div style={{ paddingTop: '0px', paddingLeft: '80px', paddingRight: '80px' }}>
       {renderOverview()}
 
       {shouldShowPerformanceMetrics() && (
@@ -289,6 +270,7 @@ const DatabaseProfilerDetail = ({ data }) => {
             {renderDetailRow('Keys Examined', keysExamined)}
             {renderDetailRow('Docs Examined', docsExamined)}
             {renderDetailRow('Response Length', responseLength)}
+            {operationDetails && renderDetailRow(operationDetails.title, operationDetails.value)}
           </div>
         </div>
       )}