diff --git a/public/svg/mcp.svg b/public/svg/mcp.svg
new file mode 100644
index 00000000..979efde5
--- /dev/null
+++ b/public/svg/mcp.svg
@@ -0,0 +1,15 @@
+<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='150' height='150' viewBox='0 0 150 150'>
+  <defs>
+    <clipPath id='clip-Custom_Size_mcp'>
+      <rect width='150' height='150'/>
+    </clipPath>
+  </defs>
+  <g id='Custom_Size_mcp' data-name='Custom Size – mcp' clip-path='url(#clip-Custom_Size_mcp)'>
+    <rect width='150' height='150' fill='#fff'/>
+    <g id='mcp_icon' transform='translate(25.5 34.5) scale(4.125)'>
+      <title>ModelContextProtocol</title>
+      <path fill="currentColor" fill-rule="evenodd" d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"/>
+      <path fill="currentColor" fill-rule="evenodd" d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/dashboard/MainMenu.tsx b/src/components/dashboard/MainMenu.tsx
index a81c88fc..c6170100 100644
--- a/src/components/dashboard/MainMenu.tsx
+++ b/src/components/dashboard/MainMenu.tsx
@@ -40,7 +40,7 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
     color: theme.palette.mode === 'light' ? '#6C6C6C' : 'inherit',
     '&:hover': {
       color: theme.palette.mode === 'light' ? '#6C6C6C' : 'inherit',
-      backgroundColor: theme.palette.mode === 'light' ? '#f5f5f5' : 'rgba(255, 255, 255, 0.08)',
+      backgroundColor: theme.palette.mode === 'light' ? '#f5f5f5' : 'inherit',
     },
   };
 
diff --git a/src/components/dashboard/NavBar.tsx b/src/components/dashboard/NavBar.tsx
index 58a9aaf3..1f36879e 100644
--- a/src/components/dashboard/NavBar.tsx
+++ b/src/components/dashboard/NavBar.tsx
@@ -164,7 +164,7 @@ export const NavBar: React.FC<NavBarProps> = ({
         sx={{
           color: darkMode ? '#ffffff' : '#0000008A',
           '&:hover': {
-            color: '#ff00c3'
+           background: 'inherit'
           }
         }}
       >
@@ -365,6 +365,9 @@ export const NavBar: React.FC<NavBarProps> = ({
                     borderRadius: '5px',
                     padding: '8px',
                     marginRight: '10px',
+                    '&:hover': {
+                        background: 'inherit'
+                    }
                   }}>
                     <AccountCircle sx={{ marginRight: '5px' }} />
                     <Typography variant="body1">{user.email}</Typography>
@@ -595,4 +598,4 @@ const NavBarRight = styled.div`
   align-items: center;
   justify-content: flex-end;
   margin-left: auto;
-`;
\ No newline at end of file
+`;
diff --git a/src/components/integration/IntegrationSettings.tsx b/src/components/integration/IntegrationSettings.tsx
index 17f0ec72..6a7d6ce0 100644
--- a/src/components/integration/IntegrationSettings.tsx
+++ b/src/components/integration/IntegrationSettings.tsx
@@ -730,6 +730,17 @@ export const IntegrationSettingsModal = ({
               <img src="/svg/webhook.svg" alt="Webhook" style={{ margin: "6px" }} />
               Webhooks
             </Button>
+
+            <Button
+              variant="outlined"
+              onClick={() => {
+                window.open("https://docs.maxun.dev/mcp/setup", "_blank" "noopener,noreferrer");
+              }}
+              style={{ display: "flex", flexDirection: "column", alignItems: "center", background: 'white', color: '#ff00c3' }}
+            >
+              <img src="/svg/mcp.svg" alt="MCP" style={{ margin: "6px" }} />
+              MCP
+            </Button>
           </div>
         </div>
       </GenericModal>
@@ -1190,4 +1201,4 @@ export const modalStyle = {
   padding: "20px",
   maxHeight: "90vh",
   overflow: "auto",
-};
\ No newline at end of file
+};
diff --git a/src/components/recorder/DOMBrowserRenderer.tsx b/src/components/recorder/DOMBrowserRenderer.tsx
index 213488fd..03319ac3 100644
--- a/src/components/recorder/DOMBrowserRenderer.tsx
+++ b/src/components/recorder/DOMBrowserRenderer.tsx
@@ -835,13 +835,13 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
 
         if (headTagRegex.test(rebuiltHTML)) {
           rebuiltHTML = rebuiltHTML.replace(
-            headTagRegex,
-            `<head>${cssInjection}`
+            "<head>",
+            `<head><base href="${snapshotData.baseUrl}">${minimalCSS}`
           );
-        } else {
+        } else if (rebuiltHTML.includes("<html>")) {
           rebuiltHTML = rebuiltHTML.replace(
-            /<html[^>]*>/i,
-            `<html><head>${cssInjection}</head>`
+            "<html>",
+            `<html><head><base href="${snapshotData.baseUrl}">${minimalCSS}</head>`
           );
         }