diff --git a/.clasp.json b/.clasp.json
index 93e6d50..304a7d0 100644
--- a/.clasp.json
+++ b/.clasp.json
@@ -1,7 +1,7 @@
 {
+  "scriptId": "1IzIEW1uGP4WWdowrlYyNEwhasdXObby_Lik-xwRXn3uWFUitm19SHAhU",
   "rootDir": "dist",
-  "scriptId": "1EBKJNiPs_XxntcBHxMKJgfBr7089AHhT3boz7_Lkc6AD0hjsQavkIjxz",
   "parentId": [
-    "1UAVn7sP1pTutyOM2i95jxQz6sjVr2ZrxhG82uLIdd70"
+    "1NVNWs4Wdj2ib6hhPgq1kzA-BMtydvk_SnxoK1K2yX5o"
   ]
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 37b4a80..60c26ac 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "google-plugin",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "lint": "eslint .",
-    "login": "clasp login",
-    "setup": "rimraf .clasp.json && mkdirp dist && clasp create --type sheets --title \"My React Project\" --rootDir ./dist && mv ./dist/.clasp.json ./.clasp.json && rimraf dist",
-    "open": "clasp open --addon",
-    "push": "clasp push",
+    "login": "npx clasp login",
+    "setup": "rimraf .clasp.json && mkdirp dist && npx clasp create --type sheets --title \"My React Project\" --rootDir ./dist && mv ./dist/.clasp.json ./.clasp.json && rimraf dist",
+    "open": "npx clasp open --addon",
+    "push": "npx clasp push",
     "setup:https": "mkdirp certs && mkcert -key-file ./certs/key.pem -cert-file ./certs/cert.pem localhost 127.0.0.1",
     "build:dev": "tsc && vite build --mode development",
     "build:test": "tsc && NODE_ENV=test vite build --mode test",
diff --git a/src/analytics/analytics.ts b/src/analytics/analytics.ts
new file mode 100644
index 0000000..d7d0515
--- /dev/null
+++ b/src/analytics/analytics.ts
@@ -0,0 +1,79 @@
+class Analytics {
+
+  private async getServerFunctions() {
+    try {
+      // Dynamic import to avoid circular dependency issues
+      const { serverFunctions } = await import('../client/utils/serverFunctions');
+      return serverFunctions;
+    } catch (error) {
+      console.warn('Failed to import serverFunctions:', error);
+      return null;
+    }
+  }
+
+  public sendEvent(eventName: string, eventID:string, errorMessage?: string, diagramType?:string, userLoginState: boolean = true) {
+    const analyticsID = getAnalyticsID();
+    const pluginID= "google-docs-plugin";
+    const pluginSource = 'googledocs';
+    const payload = {
+      analyticsID,
+      pluginID,
+      eventName,
+      eventID,
+      userLoginState,
+      pluginSource,
+      errorMessage,
+      diagramType
+    };
+
+    this.getServerFunctions().then(serverFunctions => {
+      if (serverFunctions && serverFunctions.sendAnalyticsEvent) {
+        serverFunctions.sendAnalyticsEvent(payload).catch(error => {
+          console.error('Failed to send analytics event:', error);
+        });
+      } else {
+        console.warn('Analytics service unavailable - serverFunctions not available');
+      }
+    }).catch(error => {
+      console.error('Failed to send analytics event:', error);
+    });
+  }
+
+
+  public trackLogin() {
+    this.sendEvent('Google Docs Plugin Logged In','GOOGLE_DOCS_PLUGIN_LOGIN');
+  }
+
+  public trackLogout() {
+    this.sendEvent('Google Docs Logged Out','GOOGLE_DOCS_PLUGIN_LOGOUT', undefined, undefined, false);
+  }
+
+  public trackBrowseDiagram() {
+    this.sendEvent('Google Docs Browse Diagram','GOOGLE_DOCS_PLUGIN_BROWSE_DIAGRAM');
+  }
+  
+  public trackNewDiagram() {
+    this.sendEvent('Google Docs New Diagram', 'GOOGLE_DOCS_PLUGIN_NEW_DIAGRAM');
+  }
+
+  public trackEditDiagram() {
+    this.sendEvent('Google Docs Edit Diagram', 'GOOGLE_DOCS_PLUGIN_EDIT_DIAGRAM');
+  }
+
+  public trackUpdateAllDiagrams() {
+    this.sendEvent('Google Docs Update All Diagrams', 'GOOGLE_DOCS_PLUGIN_UPDATE_ALL_DIAGRAMS');
+  }
+}
+
+function getAnalyticsID() {
+  const STORAGE_KEY = 'MERMAIDCHART_ANALYTICS_ID';
+
+  let id = localStorage.getItem(STORAGE_KEY);
+  if (!id) {
+    id = crypto.randomUUID();
+    localStorage.setItem(STORAGE_KEY, id);
+  }
+  return id;
+}
+
+export default new Analytics(); 
\ No newline at end of file
diff --git a/src/analytics/httpClient.ts b/src/analytics/httpClient.ts
new file mode 100644
index 0000000..82847d1
--- /dev/null
+++ b/src/analytics/httpClient.ts
@@ -0,0 +1,26 @@
+import axios, { AxiosInstance, AxiosResponse, AxiosError } from 'axios';
+import { prodUrl } from '../config/urls';
+
+const ANALYTICS_BASE_URL = prodUrl;
+
+const httpClient: AxiosInstance = axios.create({
+  baseURL: ANALYTICS_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  timeout: 10000, // 10 second timeout
+});
+
+httpClient.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  (error: AxiosError) => {
+    if (error.code === 'ERR_NETWORK') {
+      console.warn('Analytics endpoint unreachable - continuing without tracking');
+      return Promise.resolve({ data: null, status: 200, statusText: 'OK', headers: {}, config: error.config });
+    }
+    console.error('HTTP Client error:', error);
+    return Promise.reject(error);
+  }
+);
+
+export default httpClient; 
\ No newline at end of file
diff --git a/src/client/components/button.module.css b/src/client/components/button.module.css
index 3557db1..4143a3b 100644
--- a/src/client/components/button.module.css
+++ b/src/client/components/button.module.css
@@ -5,13 +5,14 @@
   padding: 0.5rem;
   outline: none;
   border-radius: 0.375rem;
-  border: 1px solid rgb(207, 207, 211);
-  background-color: white;
+  border: none;
+  background-color: #E80962;
   cursor: pointer;
+   color: white;
 }
 
 .button:hover {
-  background-color: rgb(0, 66, 235);
+  background-color: #B20E45;
   color: white;
   transition: all 0.2s;
 }
diff --git a/src/client/components/toast.tsx b/src/client/components/toast.tsx
new file mode 100644
index 0000000..f062cb4
--- /dev/null
+++ b/src/client/components/toast.tsx
@@ -0,0 +1,30 @@
+import { Snackbar, Alert, AlertColor } from '@mui/material';
+
+interface ToastProps {
+  open: boolean;
+  message: string;
+  severity: AlertColor;
+  onClose: () => void;
+  autoHideDuration?: number;
+}
+
+const Toast = ({
+  open,
+  message,
+  severity,
+  onClose,
+  autoHideDuration = 4000,
+}: ToastProps) => (
+  <Snackbar
+    open={open}
+    autoHideDuration={autoHideDuration}
+    onClose={onClose}
+    anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+  >
+    <Alert onClose={onClose} severity={severity} sx={{ width: '100%' }}>
+      {message}
+    </Alert>
+  </Snackbar>
+);
+
+export default Toast;
diff --git a/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx b/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
index 9e42d87..e8dee98 100644
--- a/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
+++ b/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
@@ -1,13 +1,18 @@
 import { useEffect, useState } from 'react';
-import { buildUrl, handleDialogClose } from '../../utils/helpers';
-import { serverFunctions } from '../../utils/serverFunctions';
+import {
+  buildUrl,
+  handleDialogClose,
+  compressBase64Image,
+} from '../../utils/helpers';
+
 import useAuth from '../../hooks/useAuth';
-import { CircularProgress, Container, Typography } from '@mui/material';
+import { CircularProgress, Container, Typography, Box } from '@mui/material';
 import { showAlertDialog } from '../../utils/alert';
 
 const CreateDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
+  const [iframeLoading, setIframeLoading] = useState(true);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -31,14 +36,23 @@ const CreateDiagramDialog = () => {
         });
 
         try {
-          await serverFunctions.insertBase64ImageWithMetadata(
-            data.diagramImage,
-            metadata.toString()
-          );
+          const compressedImage = await compressBase64Image(data.diagramImage);
+
+          // Pass data to sidebar via BroadcastChannel and close immediately
+          const channel = new BroadcastChannel('diagram_channel');
+          channel.postMessage({
+            type: 'pendingInsertion',
+            payload: {
+              image: compressedImage,
+              metadata: metadata.toString(),
+              operation: 'insert',
+            },
+          });
+          channel.close();
           handleDialogClose();
         } catch (error) {
-          console.error('Error inserting image with metadata', error);
-          showAlertDialog('Error inserting image, please try again');
+          console.error('Error preparing diagram insertion', error);
+          showAlertDialog('Error preparing diagram, please try again');
         }
       }
     };
@@ -50,18 +64,21 @@ const CreateDiagramDialog = () => {
     };
   }, []);
 
+  const handleIframeLoad = () => {
+    setIframeLoading(false);
+  };
+
   if (authStatus === 'idle' || authStatus === 'loading') {
     return (
       <Container
         sx={{
           display: 'flex',
-          flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
           height: '96.5vh',
         }}
       >
-        <CircularProgress />
+        <CircularProgress size={40} />
       </Container>
     );
   }
@@ -77,28 +94,65 @@ const CreateDiagramDialog = () => {
           height: '96.5vh',
         }}
       >
-        <Typography variant="h5" gutterBottom my={2} textAlign="center">
+        <Typography variant="h6" gutterBottom textAlign="center">
           Error
         </Typography>
-        <Typography paragraph textAlign="center">
+        <Typography variant="body2" textAlign="center">
           Something went wrong. Please try again later.
         </Typography>
       </Container>
     );
   }
 
-  return (
-    <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
-      <iframe
-        src={diagramsUrl}
-        title="diagrams"
-        style={{
-          border: 'none',
-          width: '100%',
+  if (!diagramsUrl) {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
           height: '96.5vh',
         }}
-      />
-    </div>
+      >
+        <CircularProgress size={40} />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      {iframeLoading && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            zIndex: 1000,
+          }}
+        >
+          <CircularProgress size={40} />
+        </Box>
+      )}
+      <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
+        <iframe
+          src={diagramsUrl}
+          title="diagrams"
+          style={{
+            border: 'none',
+            width: '100%',
+            height: '96.5vh',
+            opacity: 1,
+          }}
+          onLoad={handleIframeLoad}
+        />
+      </div>
+    </>
   );
 };
 
diff --git a/src/client/create-diagram-dialog/index.html b/src/client/create-diagram-dialog/index.html
index 20bd2dd..bc2245b 100644
--- a/src/client/create-diagram-dialog/index.html
+++ b/src/client/create-diagram-dialog/index.html
@@ -26,6 +26,39 @@
   </head>
   <body>
     <section id="index">
+      <style>
+        .loading-container {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100vh;
+          flex-direction: column;
+          font-family: sans-serif;
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          background: white;
+          z-index: 9999;
+        }
+        .spinner {
+          border: 4px solid #f3f3f3;
+          border-top: 4px solid #3498db;
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+          animation: spin 1s linear infinite;
+          margin-bottom: 16px;
+        }
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      </style>
+      <div class="loading-container">
+        <div class="spinner"></div>
+        <div>Loading...</div>
+      </div>
       <script type="module" src="./index.jsx"></script>
       <!-- bundled js and css will get inlined here during build-->
     </section>
diff --git a/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx b/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
index 0dec079..511772a 100644
--- a/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
+++ b/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
@@ -1,12 +1,18 @@
 import { useEffect, useState } from 'react';
 import { serverFunctions } from '../../utils/serverFunctions';
-import { buildUrl, handleDialogClose } from '../../utils/helpers';
+import {
+  buildUrl,
+  handleDialogClose,
+  compressBase64Image,
+} from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
 import { showAlertDialog } from '../../utils/alert';
+import { CircularProgress, Container, Typography, Box } from '@mui/material';
 
 const EditDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
+  const [iframeLoading, setIframeLoading] = useState(true);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -23,7 +29,7 @@ const EditDiagramDialog = () => {
         const minor = params.get('minor');
         if (projectID && documentID && major && minor) {
           const iframeUrl = buildUrl(
-            `/app/projects/${projectID}/diagrams/${documentID}/version/v.${major}.${minor}/edit`,
+            `/app/projects/${projectID}/diagrams/${documentID}/version/v${major}.${minor}/edit?pluginSource=googledocs`,
             authState.token
           );
           setDiagramsUrl(iframeUrl);
@@ -49,14 +55,23 @@ const EditDiagramDialog = () => {
           minor: data.minor,
         });
         try {
-          await serverFunctions.replaceSelectedImageWithBase64AndSize(
-            data.diagramImage,
-            metadata.toString()
-          );
+          const compressedImage = await compressBase64Image(data.diagramImage);
+
+          // Pass data to sidebar via BroadcastChannel and close immediately
+          const channel = new BroadcastChannel('diagram_channel');
+          channel.postMessage({
+            type: 'pendingInsertion',
+            payload: {
+              image: compressedImage,
+              metadata: metadata.toString(),
+              operation: 'replace',
+            },
+          });
+          channel.close();
           handleDialogClose();
         } catch (error) {
-          console.error('Error updating image with metadata', error);
-          showAlertDialog('Error updating image, please try again');
+          console.error('Error preparing diagram update', error);
+          showAlertDialog('Error preparing diagram update, please try again');
         }
       }
     };
@@ -68,22 +83,95 @@ const EditDiagramDialog = () => {
     };
   }, []);
 
-  if (authStatus !== 'success' || !diagramsUrl) {
-    return null;
+  const handleIframeLoad = () => {
+    setIframeLoading(false);
+  };
+
+  if (authStatus === 'idle' || authStatus === 'loading') {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '96.5vh',
+        }}
+      >
+        <CircularProgress size={40} />
+      </Container>
+    );
   }
 
-  return (
-    <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
-      <iframe
-        src={diagramsUrl}
-        title="diagrams"
-        style={{
-          border: 'none',
-          width: '100%',
+  if (authStatus === 'error') {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
           height: '96.5vh',
         }}
-      />
-    </div>
+      >
+        <Typography variant="h6" gutterBottom textAlign="center">
+          Error
+        </Typography>
+        <Typography variant="body2" textAlign="center">
+          Something went wrong. Please try again later.
+        </Typography>
+      </Container>
+    );
+  }
+
+  if (!diagramsUrl) {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '96.5vh',
+        }}
+      >
+        <CircularProgress size={40} />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      {iframeLoading && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            zIndex: 1000,
+          }}
+        >
+          <CircularProgress size={40} />
+        </Box>
+      )}
+      <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
+        <iframe
+          src={diagramsUrl}
+          title="diagrams"
+          style={{
+            border: 'none',
+            width: '100%',
+            height: '96.5vh',
+            opacity: 1,
+          }}
+          onLoad={handleIframeLoad}
+        />
+      </div>
+    </>
   );
 };
 
diff --git a/src/client/edit-diagram-dialog/index.html b/src/client/edit-diagram-dialog/index.html
index 20bd2dd..95af56e 100644
--- a/src/client/edit-diagram-dialog/index.html
+++ b/src/client/edit-diagram-dialog/index.html
@@ -24,10 +24,50 @@
       src="https://unpkg.com/@types/react@18.2.66/index.d.ts"
     ></script>
   </head>
-  <body>
-    <section id="index">
-      <script type="module" src="./index.jsx"></script>
-      <!-- bundled js and css will get inlined here during build-->
-    </section>
-  </body>
+<body>
+  <section id="index">
+    <style>
+      .loading-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        flex-direction: column;
+        font-family: sans-serif;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background: white;
+        z-index: 9999;
+      }
+
+      .spinner {
+        border: 4px solid #f3f3f3;
+        border-top: 4px solid #3498db;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        animation: spin 1s linear infinite;
+        margin-bottom: 16px;
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+    <div class="loading-container">
+      <div class="spinner"></div>
+      <div>Loading...</div>
+    </div>
+    <script type="module" src="./index.jsx"></script>
+    <!-- bundled js and css will get inlined here during build-->
+  </section>
+</body>
 </html>
diff --git a/src/client/hooks/useAuth.ts b/src/client/hooks/useAuth.ts
index 492fa6a..313a047 100644
--- a/src/client/hooks/useAuth.ts
+++ b/src/client/hooks/useAuth.ts
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { serverFunctions } from '../utils/serverFunctions';
 import { baseURL } from '../../config/urls';
+import analytics from '../../analytics/analytics';
 
 type Status = 'idle' | 'loading' | 'success' | 'error';
 
@@ -37,6 +38,7 @@ const useAuth = () => {
   }, [getAuth]);
 
   const signOut = async () => {
+    analytics.trackLogout();
     try {
       await serverFunctions.resetOAuth();
       setTimeout(getAuth, 500);
diff --git a/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx b/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
index dbe9f6c..c613671 100644
--- a/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
+++ b/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
@@ -1,8 +1,12 @@
 import { useEffect, useState } from 'react';
-import { buildUrl, handleDialogClose } from '../../utils/helpers';
-import { serverFunctions } from '../../utils/serverFunctions';
+import {
+  buildUrl,
+  handleDialogClose,
+  compressBase64Image,
+} from '../../utils/helpers';
+
 import useAuth from '../../hooks/useAuth';
-import { CircularProgress, Container, Typography } from '@mui/material';
+import { CircularProgress, Container, Typography, Box } from '@mui/material';
 import { showAlertDialog } from '../../utils/alert';
 
 const editUrl = localStorage.getItem('editUrl');
@@ -10,6 +14,7 @@ const editUrl = localStorage.getItem('editUrl');
 const SelectDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
+  const [iframeLoading, setIframeLoading] = useState(true);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -40,14 +45,23 @@ const SelectDiagramDialog = () => {
         });
 
         try {
-          await serverFunctions.insertBase64ImageWithMetadata(
-            data.diagramImage,
-            metadata.toString()
-          );
+          const compressedImage = await compressBase64Image(data.diagramImage);
+
+          // Pass data to sidebar via BroadcastChannel and close immediately
+          const channel = new BroadcastChannel('diagram_channel');
+          channel.postMessage({
+            type: 'pendingInsertion',
+            payload: {
+              image: compressedImage,
+              metadata: metadata.toString(),
+              operation: 'insert',
+            },
+          });
+          channel.close();
           handleDialogClose();
         } catch (error) {
-          showAlertDialog('Error inserting image, please try again');
-          console.error('Error inserting image with metadata', error);
+          showAlertDialog('Error preparing diagram, please try again');
+          console.error('Error preparing diagram insertion', error);
         }
       }
     };
@@ -59,18 +73,21 @@ const SelectDiagramDialog = () => {
     };
   }, []);
 
+  const handleIframeLoad = () => {
+    setIframeLoading(false);
+  };
+
   if (authStatus === 'idle' || authStatus === 'loading') {
     return (
       <Container
         sx={{
           display: 'flex',
-          flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
           height: '96.5vh',
         }}
       >
-        <CircularProgress />
+        <CircularProgress size={40} />
       </Container>
     );
   }
@@ -86,28 +103,65 @@ const SelectDiagramDialog = () => {
           height: '96.5vh',
         }}
       >
-        <Typography variant="h5" gutterBottom my={2} textAlign="center">
+        <Typography variant="h6" gutterBottom textAlign="center">
           Error
         </Typography>
-        <Typography paragraph textAlign="center">
+        <Typography variant="body2" textAlign="center">
           Something went wrong. Please try again later.
         </Typography>
       </Container>
     );
   }
 
-  return (
-    <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
-      <iframe
-        src={diagramsUrl}
-        title="diagrams"
-        style={{
-          border: 'none',
-          width: '100%',
+  if (!diagramsUrl) {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
           height: '96.5vh',
         }}
-      />
-    </div>
+      >
+        <CircularProgress size={40} />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      {iframeLoading && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            zIndex: 1000,
+          }}
+        >
+          <CircularProgress size={40} />
+        </Box>
+      )}
+      <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
+        <iframe
+          src={diagramsUrl}
+          title="diagrams"
+          style={{
+            border: 'none',
+            width: '100%',
+            height: '96.5vh',
+            opacity: 1,
+          }}
+          onLoad={handleIframeLoad}
+        />
+      </div>
+    </>
   );
 };
 
diff --git a/src/client/select-diagram-dialog/index.html b/src/client/select-diagram-dialog/index.html
index 20bd2dd..34c6c46 100644
--- a/src/client/select-diagram-dialog/index.html
+++ b/src/client/select-diagram-dialog/index.html
@@ -25,9 +25,49 @@
     ></script>
   </head>
   <body>
-    <section id="index">
-      <script type="module" src="./index.jsx"></script>
-      <!-- bundled js and css will get inlined here during build-->
-    </section>
-  </body>
+  <section id="index">
+    <style>
+      .loading-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        flex-direction: column;
+        font-family: sans-serif;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background: white;
+        z-index: 9999;
+      }
+
+      .spinner {
+        border: 4px solid #f3f3f3;
+        border-top: 4px solid #3498db;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        animation: spin 1s linear infinite;
+        margin-bottom: 16px;
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+    <div class="loading-container">
+      <div class="spinner"></div>
+      <div>Loading...</div>
+    </div>
+    <script type="module" src="./index.jsx"></script>
+    <!-- bundled js and css will get inlined here during build-->
+  </section>
+</body>
 </html>
diff --git a/src/client/sidebar/components/Sidebar.tsx b/src/client/sidebar/components/Sidebar.tsx
index 6a54a52..c5109b7 100644
--- a/src/client/sidebar/components/Sidebar.tsx
+++ b/src/client/sidebar/components/Sidebar.tsx
@@ -8,13 +8,17 @@ import {
   Box,
   Tabs,
   Tab,
+  AlertColor,
 } from '@mui/material';
 import { serverFunctions } from '../../utils/serverFunctions';
-import LoadingOverlay from '../../components/loading-overlay';
 import { buildUrl } from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
 import Button from '../../components/button';
 import { showAlertDialog } from '../../utils/alert';
+import analytics from '../../../analytics/analytics';
+import Toast from '../../components/toast';
+
+
 
 interface ChartImage {
   altDescription: string;
@@ -33,6 +37,13 @@ const Sidebar = () => {
   const [updateDiagramsState, setUpdateDiagramsState] = useState('idle');
   const { authState, authStatus, getAuth, signOut } = useAuth();
 
+  // State for background insertion processing
+  const [isProcessingInsertion, setIsProcessingInsertion] = useState(false);
+  const [toastOpen, setToastOpen] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+  const [toastSeverity, setToastSeverity] = useState<AlertColor>('success');
+  const insertionPollingRef = useRef<number | null>(null);
+
   useEffect(() => {
     if (!authState?.authorized) return;
     const url = buildUrl(
@@ -64,6 +75,105 @@ const Sidebar = () => {
     getImages();
   }, [getImages]);
 
+  // Check for pending insertions and process them
+  const checkAndProcessPendingInsertion = useCallback(async () => {
+    if (isProcessingInsertion) return;
+
+    try {
+      const pending = await serverFunctions.getPendingInsertion();
+      if (pending) {
+        setIsProcessingInsertion(true);
+        const result = (await serverFunctions.processPendingInsertion()) as {
+          success: boolean;
+          message: string;
+        };
+
+        if (result.success) {
+          setToastMessage('Diagram inserted successfully!');
+          setToastSeverity('success');
+          getImages(); 
+        } else {
+          setToastMessage(result.message || 'Error inserting diagram');
+          setToastSeverity('error');
+        }
+        setToastOpen(true);
+        setIsProcessingInsertion(false);
+      }
+    } catch (error) {
+      console.error('Error processing pending insertion', error);
+      setToastMessage('Error inserting diagram, please try again');
+      setToastSeverity('error');
+      setToastOpen(true);
+      setIsProcessingInsertion(false);
+      try {
+        await serverFunctions.clearPendingInsertion();
+      } catch (clearError) {
+        console.error('Error clearing pending insertion', clearError);
+      }
+    }
+  }, [isProcessingInsertion, getImages]);
+
+  // Listen for pending insertions from dialogs via BroadcastChannel
+  useEffect(() => {
+    const channel = new BroadcastChannel('diagram_channel');
+
+    channel.onmessage = async (e) => {
+      if (e.data?.type === 'pendingInsertion') {
+        try {
+          const data = e.data.payload;
+
+          setIsProcessingInsertion(true);
+          setToastMessage('Inserting diagram...');
+          setToastSeverity('info');
+          setToastOpen(true);
+
+          if (data.operation === 'replace') {
+            await serverFunctions.replaceSelectedImageWithBase64AndSize(data.image, data.metadata);
+            setToastMessage('Diagram updated successfully!');
+          } else {
+            await serverFunctions.insertBase64ImageWithMetadata(data.image, data.metadata);
+            setToastMessage('Diagram inserted successfully!');
+          }
+
+          setToastSeverity('success');
+          getImages();
+        } catch (error) {
+          console.error('Error processing insertion from channel', error);
+          setToastMessage('Error inserting diagram');
+          setToastSeverity('error');
+        } finally {
+          setIsProcessingInsertion(false);
+        }
+      }
+    };
+
+    return () => channel.close();
+  }, [getImages]);
+
+  // Poll for pending insertions (Backup mechanism)
+  useEffect(() => {
+    if (!authState?.authorized) return;
+
+    // Check immediately on mount
+    checkAndProcessPendingInsertion();
+
+    // Set up polling interval (check every 2 seconds)
+    insertionPollingRef.current = window.setInterval(() => {
+      checkAndProcessPendingInsertion();
+    }, 2000);
+
+    return () => {
+      if (insertionPollingRef.current !== null) {
+        clearInterval(insertionPollingRef.current);
+        insertionPollingRef.current = null;
+      }
+    };
+  }, [authState?.authorized, checkAndProcessPendingInsertion]);
+
+  const handleToastClose = () => {
+    setToastOpen(false);
+  };
+
   useEffect(() => {
     const handleMessage = async (e: MessageEvent) => {
       const action = e.data.action;
@@ -138,6 +248,7 @@ const Sidebar = () => {
     options += ',left=' + left;
 
     try {
+      analytics.trackLogin(); 
       const authUrl = await serverFunctions.getOAuthURL();
       const windowObjectReference = window.open(
         authUrl,
@@ -153,6 +264,7 @@ const Sidebar = () => {
   };
 
   const handleDiagramsUpdate = async () => {
+    analytics.trackUpdateAllDiagrams();
     try {
       setUpdateDiagramsState('loading');
       await serverFunctions.syncImages();
@@ -165,6 +277,7 @@ const Sidebar = () => {
   };
 
   const handleSelectDiagram = async () => {
+    analytics.trackBrowseDiagram(); 
     try {
       setSelectDiagramState('loading');
       await serverFunctions.openSelectDiagramDialog();
@@ -177,6 +290,7 @@ const Sidebar = () => {
   };
 
   const handleCreateDiagram = async () => {
+    analytics.trackNewDiagram();
     try {
       setCreateDiagramState('loading');
       await serverFunctions.openCreateDiagramDialog();
@@ -196,18 +310,45 @@ const Sidebar = () => {
     }
   };
 
+  const handleEditDiagram = async (altDescription: string) => {
+    analytics.trackEditDiagram();
+    try {
+      await serverFunctions.selectChartImage(altDescription);
+      await serverFunctions.openEditDiagramDialog();
+    } catch (error) {
+      console.error('Error editing diagram', error);
+      showAlertDialog('Error editing diagram, please try again');
+    }
+  };
+
+  const handleRemoveDiagram = async (altDescription: string) => {
+    try {
+      const result = await serverFunctions.removeDiagramByAltDescription(
+        altDescription
+      );
+      if (result.success) {
+        // Refresh the diagrams list after successful removal
+        getImages();
+      } else {
+        showAlertDialog(result.message || 'Failed to remove diagram');
+      }
+    } catch (error) {
+      console.error('Error removing diagram', error);
+      showAlertDialog('Error removing diagram, please try again');
+    }
+  };
+
   if (authStatus === 'idle' || authStatus === 'loading') {
     return (
       <Container
         sx={{
           display: 'flex',
-          flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
           height: 'calc(100vh - 114px)',
         }}
       >
-        <CircularProgress />
+        <CircularProgress size={40} />
       </Container>
     );
   }
@@ -223,10 +364,10 @@ const Sidebar = () => {
           height: 'calc(100vh - 114px)',
         }}
       >
-        <Typography variant="h5" gutterBottom my={2} textAlign="center">
+        <Typography variant="h6" gutterBottom textAlign="center">
           Error
         </Typography>
-        <Typography paragraph textAlign="center">
+        <Typography variant="body2" textAlign="center">
           Something went wrong. Please try again later.
         </Typography>
       </Container>
@@ -235,7 +376,30 @@ const Sidebar = () => {
 
   return (
     <>
-      {overlayEnabled && <LoadingOverlay />}
+      {(overlayEnabled || isProcessingInsertion) && (
+        <Box
+          sx={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'rgba(255, 255, 255, 0.8)',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 9999,
+          }}
+        >
+          <CircularProgress size={40} />
+          {isProcessingInsertion && (
+            <Typography sx={{ mt: 2 }} variant="body2" color="textSecondary">
+              Inserting diagram...
+            </Typography>
+          )}
+        </Box>
+      )}
       <Container
         sx={{
           display: 'flex',
@@ -243,61 +407,174 @@ const Sidebar = () => {
           alignItems: 'center',
           padding: '15px 20px',
         }}
-      >
-        <img
-          src="https://jiratest.mermaidchart.com/icon_80x80.png"
-          alt="mc"
-          width={30}
-          height={30}
-        />
-        <>
-          {authState?.authorized ? (
-            <Button onClick={signOut}>Logout</Button>
-          ) : (
-            <Button onClick={handleLoginClick}>Login</Button>
-          )}
-        </>
-      </Container>
+      ></Container>
+
       <Divider />
+
       <Container
         sx={{
           display: 'flex',
           flexDirection: 'column',
           justifyContent: 'space-between',
           alignItems: 'center',
-          padding: '20px',
           height: 'calc(100vh - 69px)',
         }}
       >
         <div>
-          {authState?.authorized ? (
+          {!authState?.authorized ? (
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: 'calc(100vh - 80px)',
+                textAlign: 'center',
+              }}
+            >
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  textAlign: 'center',
+                  gap: 20,
+                }}
+              >
+                <img
+                  src="https://jiratest.mermaidchart.com/icon_80x80.png"
+                  alt="logo"
+                  width={80}
+                  height={80}
+                />
+              </Box>
+              <Typography
+                sx={{
+                  maxWidth: '344px',
+                  fontFamily: 'Recursive',
+                  fontSize: '20px',
+                  marginTop: '12px',
+                  fontWeight: 420,
+                  color: '#1E1A2E',
+                  marginBottom: '14px',
+                  lineHeight: '28px',
+                  letterSpacing: 'normal',
+                }}
+              >
+                Welcome to <br />
+                the Mermaid
+              </Typography>
+
+              <Typography
+                sx={{
+                  fontFamily: 'Recursive',
+                  fontWeight: 400,
+                  fontSize: '16px',
+                  color: '#1E1A2E',
+                  lineHeight: '24px',
+                  marginBottom: '28px',
+                }}
+              >
+                Create and edit diagrams in Mermaid Chart and easily synchronize
+                documents with Google Docs.
+              </Typography>
+
+              <MuiButton
+                onClick={handleLoginClick}
+                sx={{
+                  fontFamily: 'Recursive',
+                  width: '100%',
+                  maxWidth: '240px',
+                  backgroundColor: '#E80962',
+                  color: '#fff',
+                  fontSize: '16px',
+                  fontWeight: 600,
+                  height: '46px',
+                  borderRadius: '10px',
+                  textTransform: 'none',
+                  '&:hover': {
+                    backgroundColor: '#B20E45',
+                  },
+                }}
+              >
+                Login
+              </MuiButton>
+
+              <Typography
+                sx={{
+                  fontFamily: 'Recursive',
+                  marginTop: '22px',
+                  fontSize: '14px',
+                  color: '#343434',
+                }}
+              >
+                Don’t have an account?
+              </Typography>
+
+              <MuiButton
+                onClick={() =>
+                  window.open(
+                    'https://mermaidchart.com/app/sign-up',
+                    '_blank'
+                  )
+                }
+                sx={{
+                  textTransform: 'none',
+                  color: '#0071e3',
+                  padding: 0,
+                  minWidth: 'auto',
+                  fontSize: '14px',
+                  marginTop: '4px',
+                  fontFamily:
+                    'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                  '&:hover': {
+                    textDecoration: 'underline',
+                    background: 'none',
+                  },
+                }}
+              >
+                Sign up
+              </MuiButton>
+            </Box>
+          ) : (
             <>
-              <Typography title="h3" color={'#883a79'} mb={1}>
+              <Typography
+                title="h3"
+                color={'#1E1A2E'}
+                mb={1}
+                sx={{
+                  fontFamily:
+                    'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                }}
+              >
                 Create a new diagram
               </Typography>
               <Button
                 style={{ marginBottom: '16px' }}
                 onClick={handleCreateDiagram}
                 loading={createDiagramState === 'loading'}
+                disabled={isProcessingInsertion}
               >
                 New diagram
               </Button>
-              <Typography title="h3" color={'#883a79'} mb={1}>
+              <Typography title="h3" color={'#1E1A2E'} mb={1}>
                 Insert a diagram from Mermaid Chart
               </Typography>
               <Button
                 style={{ marginBottom: '16px' }}
                 onClick={handleSelectDiagram}
                 loading={selectDiagramState === 'loading'}
+                disabled={isProcessingInsertion}
               >
                 Browse diagrams
               </Button>
-              <Typography title="h3" color={'#883a79'} mb={1}>
+              <Typography title="h3" color={'#1E1A2E'} mb={1}>
                 Update all diagrams in document to most recent version
               </Typography>
               <Button
                 onClick={handleDiagramsUpdate}
                 loading={updateDiagramsState === 'loading'}
+                disabled={isProcessingInsertion}
               >
                 Update all diagrams
               </Button>
@@ -306,21 +583,14 @@ const Sidebar = () => {
                   <Tabs
                     value={tab}
                     onChange={(_, newValue) => handleTabSwitch(newValue)}
-                    aria-label="basic tabs example"
                   >
                     <Tab
                       label="Recent diagrams"
-                      sx={{
-                        textTransform: 'initial',
-                        padding: '12px 6px',
-                      }}
+                      sx={{ textTransform: 'initial' }}
                     />
                     <Tab
                       label="In this document"
-                      sx={{
-                        textTransform: 'initial',
-                        padding: '12px',
-                      }}
+                      sx={{ textTransform: 'initial' }}
                     />
                   </Tabs>
                 </Box>
@@ -331,10 +601,11 @@ const Sidebar = () => {
                     border: 'none',
                     marginTop: '20px',
                     width: '260px',
-                    height: 'calc(100vh - 520px)',
+                    height: 'calc(100vh - 440px)',
                     display: tab === 0 ? 'block' : 'none',
                   }}
                 />
+
                 <Container
                   sx={{
                     display: tab === 1 ? 'grid' : 'none',
@@ -342,91 +613,143 @@ const Sidebar = () => {
                     alignItems: 'center',
                     gap: '20px',
                     marginTop: '20px',
-                    height: 'calc(100vh - 520px)',
+                    height: 'calc(100vh - 440px)',
                     overflowY: 'auto',
+                    padding: 0,
                   }}
                 >
                   {chartImagesState === 'loading' &&
                     chartImages.length === 0 && (
-                      <CircularProgress sx={{ justifySelf: 'center' }} />
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          justifyContent: 'center',
+                          alignItems: 'center',
+                          height: '100px',
+                        }}
+                      >
+                        <CircularProgress size={40} />
+                      </Box>
                     )}
+
                   {chartImages.length > 0 &&
                     chartImages.map((image) => (
-                      <div
+                      <Box
                         key={image.altDescription}
-                        onClick={() =>
-                          handleSelectedImage(image.altDescription)
-                        }
+                        sx={{
+                          display: 'flex',
+                          flexDirection: 'column',
+                          alignItems: 'center',
+                          gap: '8px',
+                          padding: '10px',
+                          border: '1px solid #e0e0e0',
+                          borderRadius: '8px',
+                          backgroundColor: '#fafafa',
+                          width: '100%',
+                        }}
                       >
                         <img
                           src={image.image}
                           alt={image.altDescription}
                           style={{
-                            width: '200px',
-                            height: 'auto',
-                            marginBottom: '10px',
+                            width: '100%',
+                            borderRadius: '4px',
                             cursor: 'pointer',
                           }}
+                          onClick={() =>
+                            handleSelectedImage(image.altDescription)
+                          }
                         />
-                      </div>
+
+                        <Box sx={{ display: 'flex', gap: '8px' }}>
+                          <Button
+                            style={{
+                              fontSize: '12px',
+                              padding: '4px 12px',
+                            }}
+                            onClick={() =>
+                              handleEditDiagram(image.altDescription)
+                            }
+                          >
+                            Edit
+                          </Button>
+
+                          <Button
+                            style={{
+                              fontSize: '12px',
+                              padding: '4px 12px',
+                              backgroundColor: '#d32f2f',
+                              color: 'white',
+                            }}
+                            onClick={() =>
+                              handleRemoveDiagram(image.altDescription)
+                            }
+                          >
+                            Remove
+                          </Button>
+                        </Box>
+                      </Box>
                     ))}
+
                   {chartImagesState === 'success' &&
                     chartImages.length === 0 && (
-                      <Typography title="h4" textAlign="center">
-                        No selected diagrams
+                      <Typography
+                        title="h4"
+                        textAlign="center"
+                        sx={{
+                          fontFamily:
+                            'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                        }}
+                      >
+                        No diagrams found in this document
                       </Typography>
                     )}
                 </Container>
               </Box>
-            </>
-          ) : (
-            <>
-              <Typography title="h3" textAlign="center" color={'#883a79'}>
-                Create and edit diagrams in Mermaid Chart and easily synchronize
-                documents with Google Docs.
-              </Typography>
-              <Typography paragraph textAlign="center" mt={4} color={'#883a79'}>
-                Don't have an account?{' '}
-                <MuiButton
-                  onClick={() => {}}
-                  sx={{
-                    textTransform: 'initial',
-                    color: 'inherit',
-                    padding: 0,
-                    minWidth: 'auto',
-                    fontSize: 'inherit',
-                    '&:hover': {
-                      textDecoration: 'underline',
-                      backgroundColor: 'white',
-                    },
-                  }}
-                >
-                  Sign up
-                </MuiButton>{' '}
-              </Typography>
+
+              {authState?.authorized && (
+                <Box sx={{ marginTop: '20px', textAlign: 'left' }}>
+                  <Button onClick={signOut}>Logout</Button>
+                </Box>
+              )}
             </>
           )}
         </div>
-        <Container
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            padding: '0',
-          }}
-        >
-          <Typography paragraph textAlign="center" mb={0}>
-            <a
-              href="https://mermaidchart.com"
-              target="_blank"
-              rel="noreferrer"
-              style={{ color: '#883a79' }}
+        {!authState?.authorized && (
+          <Container
+            sx={{
+              textAlign: 'center',
+              paddingBottom: '20px',
+            }}
+          >
+            <Typography
+              paragraph
+              textAlign="center"
+              mb={0}
+              sx={{
+                fontFamily:
+                  'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                fontSize: '14px',
+              }}
             >
-              Copyright © 2024 Mermaid Chart
-            </a>
-          </Typography>
-        </Container>
+              <a
+                href="https://mermaidchart.com"
+                target="_blank"
+                rel="noreferrer"
+                style={{ color: '#1E1A2E' }}
+              >
+                Copyright © 2025 Mermaid Chart
+              </a>
+            </Typography>
+          </Container>
+        )}
       </Container>
+      <Toast
+        open={toastOpen}
+        message={toastMessage}
+        severity={toastSeverity}
+        onClose={handleToastClose}
+      />
     </>
   );
 };
diff --git a/src/client/sidebar/index.html b/src/client/sidebar/index.html
index 1667f41..c1fa837 100644
--- a/src/client/sidebar/index.html
+++ b/src/client/sidebar/index.html
@@ -2,6 +2,8 @@
 <html>
   <head>
     <base target="_top" />
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap" rel="stylesheet">
     <!-- Add any external scripts and stylesheets here -->
     <script
       crossorigin
diff --git a/src/client/sidebar/index.jsx b/src/client/sidebar/index.jsx
index 11d6e2e..78ceb14 100644
--- a/src/client/sidebar/index.jsx
+++ b/src/client/sidebar/index.jsx
@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import Sidebar from './components/sidebar';
+import Sidebar from './components/Sidebar';
 import './styles.css';
 
 const container = document.getElementById('index');
diff --git a/src/client/utils/helpers.ts b/src/client/utils/helpers.ts
index a2025ff..d2e004c 100644
--- a/src/client/utils/helpers.ts
+++ b/src/client/utils/helpers.ts
@@ -11,3 +11,62 @@ export const handleDialogClose = () => {
     window.parent?.postMessage('closeDialog', '*');
   }
 };
+
+/**
+ * Resizes a base64 image if it exceeds the maximum dimension limit.
+ * Enforces a maximum dimension of 4000px to prevent canvas issues.
+ * @param base64Image - The base64 encoded image string (with or without data URI prefix)
+ * @returns Promise<string> - The processed base64 image string (without data URI prefix)
+ */
+export const compressBase64Image = async (
+  base64Image: string
+): Promise<string> => {
+  try {
+    const base64Data = base64Image.replace(/^data:image\/\w+;base64,/, '');
+
+    const img = new Image();
+    const loadPromise = new Promise<HTMLImageElement>((resolve, reject) => {
+      img.onload = () => resolve(img);
+      img.onerror = reject;
+    });
+
+    img.src = `data:image/png;base64,${base64Data}`;
+    await loadPromise;
+
+    const maxDimension = 4000;
+
+    if (img.width <= maxDimension && img.height <= maxDimension) {
+      return base64Data;
+    }
+
+    const scale = maxDimension / Math.max(img.width, img.height);
+    const newWidth = Math.floor(img.width * scale);
+    const newHeight = Math.floor(img.height * scale);
+    const canvas = document.createElement('canvas');
+    canvas.width = newWidth;
+    canvas.height = newHeight;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      throw new Error('Could not get canvas context');
+    }
+
+    ctx.drawImage(img, 0, 0, newWidth, newHeight);
+
+    const resizedDataUrl = canvas.toDataURL('image/png');
+    let resizedBase64 = resizedDataUrl.replace(/^data:image\/\w+;base64,/, '');
+
+    while (resizedBase64.length % 4 !== 0) {
+      resizedBase64 += '=';
+    }
+
+    return resizedBase64;
+  } catch (error) {
+    console.error('Error processing image:', error);
+    let original = base64Image.replace(/^data:image\/\w+;base64,/, '');
+    while (original.length % 4 !== 0) {
+      original += '=';
+    }
+    return original;
+  }
+};
diff --git a/src/config/urls.ts b/src/config/urls.ts
index 683f077..51f415c 100644
--- a/src/config/urls.ts
+++ b/src/config/urls.ts
@@ -1,3 +1,3 @@
 export const devUrl = 'https://test.mermaidchart.com';
-export const prodUrl = 'https://mermaidchart.com';
+export const prodUrl = 'https://mermaid.ai';
 export const baseURL = import.meta.env.PROD ? prodUrl : devUrl;
diff --git a/src/server/index.ts b/src/server/index.ts
index d4b83ea..4525ecd 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -20,6 +20,12 @@ import {
   selectChartImage,
   getChartImages,
   showAlertDialog,
+  removeDiagramByAltDescription,
+  queueDiagramInsertion,
+  getPendingInsertion,
+  processPendingInsertion,
+  clearPendingInsertion,
+  sendAnalyticsEvent,
 } from './ui';
 
 // Public functions must be exported as named exports
@@ -45,4 +51,11 @@ export {
   selectChartImage,
   getChartImages,
   showAlertDialog,
+  removeDiagramByAltDescription,
+  queueDiagramInsertion,
+  getPendingInsertion,
+  processPendingInsertion,
+  clearPendingInsertion,
+  sendAnalyticsEvent,
 };
+
diff --git a/src/server/ui.js b/src/server/ui.js
index 9c138c8..2735b9b 100644
--- a/src/server/ui.js
+++ b/src/server/ui.js
@@ -44,8 +44,8 @@ export function openCreateDiagramDialog() {
       }, false);
     </script>`
     )
-    .setWidth(1366)
-    .setHeight(768);
+    .setWidth(1600)
+    .setHeight(900);
   DocumentApp.getUi().showModalDialog(html, 'Create new diagram');
 }
 
@@ -68,8 +68,8 @@ export function openEditDiagramDialog() {
       }, false);
     </script>`
     )
-    .setWidth(1366)
-    .setHeight(768);
+    .setWidth(1600)
+    .setHeight(900);
 
   DocumentApp.getUi().showModalDialog(html, 'Edit Diagram');
 }
@@ -85,8 +85,8 @@ export function openPreviewDiagramDialog() {
       }, false);
     </script>`
     )
-    .setWidth(1366)
-    .setHeight(768);
+    .setWidth(1600)
+    .setHeight(900);
 
   DocumentApp.getUi().showModalDialog(html, 'Preview Diagram');
 }
@@ -102,8 +102,8 @@ export function openEditDiagramDialogWithUrl() {
       }, false);
     </script>`
     )
-    .setWidth(1366)
-    .setHeight(768);
+    .setWidth(1600)
+    .setHeight(900);
 
   DocumentApp.getUi().showModalDialog(html, 'Edit Diagram');
 }
@@ -119,8 +119,8 @@ export function openSelectDiagramDialog() {
       }, false);
     </script>`
     )
-    .setWidth(1366)
-    .setHeight(768);
+    .setWidth(1600)
+    .setHeight(900);
   DocumentApp.getUi().showModalDialog(html, 'Select Diagram');
 }
 
@@ -188,7 +188,10 @@ function getOAuthService() {
     })
     .setParam('response_type', 'code')
     .setParam('code_challenge_method', 'S256')
-    .setParam('code_challenge', userProps.getProperty('code_challenge') ?? '');
+    .setParam('code_challenge', userProps.getProperty('code_challenge') ?? '')
+    .setParam('utm_source', 'google_addon')
+    .setParam('utm_medium', 'docs')
+    .setParam('utm_campaign', 'plugin_usage');
 }
 
 export function getOAuthURL() {
@@ -497,6 +500,150 @@ export function selectChartImage(altDescription) {
   DocumentApp.getActiveDocument().setSelection(range);
 }
 
+export function removeDiagramByAltDescription(altDescription) {
+  if (!altDescription) {
+    return { success: false, message: 'No diagram identifier provided.' };
+  }
+
+  const body = DocumentApp.getActiveDocument().getBody();
+  const images = body.getImages();
+  const imageToRemove = images.find(
+    (image) => image.getAltDescription() === altDescription
+  );
+
+  if (!imageToRemove) {
+    return { success: false, message: 'Diagram not found in document.' };
+  }
+
+  try {
+    imageToRemove.removeFromParent();
+    return { success: true, message: 'Diagram removed successfully.' };
+  } catch (error) {
+    return { success: false, message: 'Failed to remove diagram.' };
+  }
+}
+
+/**
+ * Queues a diagram insertion to be processed in the background.
+ * @param {string} imageData - The compressed base64 image string.
+ * @param {string} metadata - A string containing metadata to store with the image.
+ * @param {string} operationType - Either 'insert' for new diagrams or 'replace' for editing existing ones.
+ * @returns {boolean} - Returns true if queued successfully.
+ */
+export function queueDiagramInsertion(imageData, metadata, operationType) {
+  try {
+    const userProps = PropertiesService.getUserProperties();
+    const pendingInsertion = {
+      imageData: imageData,
+      metadata: metadata,
+      operationType: operationType,
+      timestamp: new Date().toISOString(),
+    };
+    userProps.setProperty(
+      'pendingDiagramInsertion',
+      JSON.stringify(pendingInsertion)
+    );
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+/**
+ * Gets the pending diagram insertion from the queue.
+ * @returns {Object | null} - The pending insertion data or null if none exists.
+ */
+export function getPendingInsertion() {
+  try {
+    const userProps = PropertiesService.getUserProperties();
+    const pendingData = userProps.getProperty('pendingDiagramInsertion');
+    if (!pendingData) {
+      return null;
+    }
+    return JSON.parse(pendingData);
+  } catch (error) {
+    return null;
+  }
+}
+
+/**
+ * Processes the pending diagram insertion and inserts/replaces the image in the document.
+ * @returns {Object} - Result object with success status and message.
+ */
+export function processPendingInsertion() {
+  try {
+    const pendingInsertion = getPendingInsertion();
+    if (!pendingInsertion) {
+      return { success: false, message: 'No pending insertion found.' };
+    }
+
+    const { imageData, metadata, operationType } = pendingInsertion;
+
+    if (operationType === 'insert') {
+      insertBase64ImageWithMetadata(imageData, metadata);
+    } else if (operationType === 'replace') {
+      replaceSelectedImageWithBase64AndSize(imageData, metadata);
+    } else {
+      return { success: false, message: 'Invalid operation type.' };
+    }
+
+    // Clear the pending insertion after successful processing
+    clearPendingInsertion();
+
+    return { success: true, message: 'Diagram inserted successfully.' };
+  } catch (error) {
+    // Clear the pending insertion even on error to prevent infinite retries
+    clearPendingInsertion();
+    return { success: false, message: 'Error inserting diagram: ' + error.message };
+  }
+}
+
+/**
+ * Clears the pending diagram insertion from the queue.
+ */
+export function clearPendingInsertion() {
+  try {
+    const userProps = PropertiesService.getUserProperties();
+    userProps.deleteProperty('pendingDiagramInsertion');
+  } catch (error) {
+    Logger.log('Error clearing pending insertion: ' + error.message);
+  }
+}
+
 export function showAlertDialog(errorText) {
   DocumentApp.getUi().alert(errorText);
 }
+
+/**
+ * Sends analytics data to the Mermaid Chart analytics endpoint
+ * This function acts as a proxy to avoid CORS issues
+ * @param {Object} payload - The analytics payload to send
+ * @returns {Object} - Result object with success status
+ */
+export function sendAnalyticsEvent(payload) {
+  try {
+    const baseURL = getBaseUrl();
+    if (!baseURL) {
+      throw new Error('Base URL is not defined.');
+    }
+
+    const analyticsUrl = `${baseURL}/rest-api/plugins/pulse`;
+    
+    const response = UrlFetchApp.fetch(analyticsUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      payload: JSON.stringify(payload),
+      muteHttpExceptions: true,
+    });
+
+    if (response.getResponseCode() >= 200 && response.getResponseCode() < 300) {
+      return { success: true };
+    } else {
+      return { success: false, error: `HTTP ${response.getResponseCode()}` };
+    }
+  } catch (error) {
+    return { success: false, error: error.message };
+  }
+}