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..8f34e1f 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "google-plugin",
-  "version": "1.0.0",
+  "version": "1.1.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..693f51b
--- /dev/null
+++ b/src/analytics/analytics.ts
@@ -0,0 +1,63 @@
+import httpClient from './httpClient';
+class Analytics {
+
+  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
+    };
+
+    httpClient.post('/rest-api/plugins/pulse', payload).catch(error => {
+      if (error.code !== 'ERR_NETWORK') {
+        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/create-diagram-dialog/components/create-diagram-dialog.tsx b/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
index 9e42d87..7a02c6e 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,20 @@
 import { useEffect, useState } from 'react';
-import { buildUrl, handleDialogClose } from '../../utils/helpers';
+import {
+  buildUrl,
+  handleDialogClose,
+  compressBase64Image,
+} from '../../utils/helpers';
 import { serverFunctions } from '../../utils/serverFunctions';
 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';
+import LoadingOverlay from '../../components/loading-overlay';
 
 const CreateDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
+  const [isInserting, setIsInserting] = useState(false);
+  const [iframeLoading, setIframeLoading] = useState(true);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -22,6 +29,13 @@ const CreateDiagramDialog = () => {
     const handleMessage = async (e: MessageEvent) => {
       const action = e.data.action;
       if (action === 'save') {
+        if (isInserting) {
+          console.log('Already inserting diagram, ignoring duplicate click');
+          return;
+        }
+
+        setIsInserting(true);
+
         const data = e.data.data;
         const metadata = new URLSearchParams({
           projectID: data.projectID,
@@ -31,14 +45,17 @@ const CreateDiagramDialog = () => {
         });
 
         try {
+          const compressedImage = await compressBase64Image(data.diagramImage);
+
           await serverFunctions.insertBase64ImageWithMetadata(
-            data.diagramImage,
+            compressedImage,
             metadata.toString()
           );
           handleDialogClose();
         } catch (error) {
           console.error('Error inserting image with metadata', error);
           showAlertDialog('Error inserting image, please try again');
+          setIsInserting(false);
         }
       }
     };
@@ -48,20 +65,23 @@ const CreateDiagramDialog = () => {
     return () => {
       window.removeEventListener('message', handleMessage);
     };
-  }, []);
+  }, [isInserting]);
+
+  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 +97,67 @@ 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 (
+    <>
+      {isInserting && <LoadingOverlay />}
+      {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: isInserting ? 0.5 : 1,
+            pointerEvents: isInserting ? 'none' : 'auto',
+          }}
+          onLoad={handleIframeLoad}
+        />
+      </div>
+    </>
   );
 };
 
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..149d837 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,20 @@
 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 LoadingOverlay from '../../components/loading-overlay';
+import { CircularProgress, Container, Typography, Box } from '@mui/material';
 
 const EditDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [iframeLoading, setIframeLoading] = useState(true);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -23,7 +31,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);
@@ -41,6 +49,12 @@ const EditDiagramDialog = () => {
       const action = e.data.action;
       console.log('action', action);
       if (action === 'save') {
+        if (isUpdating) {
+          return;
+        }
+
+        setIsUpdating(true);
+
         const data = e.data.data;
         const metadata = new URLSearchParams({
           projectID: data.projectID,
@@ -49,14 +63,17 @@ const EditDiagramDialog = () => {
           minor: data.minor,
         });
         try {
+          const compressedImage = await compressBase64Image(data.diagramImage);
+
           await serverFunctions.replaceSelectedImageWithBase64AndSize(
-            data.diagramImage,
+            compressedImage,
             metadata.toString()
           );
           handleDialogClose();
         } catch (error) {
           console.error('Error updating image with metadata', error);
           showAlertDialog('Error updating image, please try again');
+          setIsUpdating(false);
         }
       }
     };
@@ -66,24 +83,99 @@ const EditDiagramDialog = () => {
     return () => {
       window.removeEventListener('message', handleMessage);
     };
-  }, []);
+  }, [isUpdating]);
 
-  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 (
+    <>
+      {isUpdating && <LoadingOverlay />}
+      {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: isUpdating ? 0.5 : 1,
+            pointerEvents: isUpdating ? 'none' : 'auto',
+          }}
+          onLoad={handleIframeLoad}
+        />
+      </div>
+    </>
   );
 };
 
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..d54eda5 100644
--- a/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
+++ b/src/client/select-diagram-dialog/components/select-diagram-dialog.tsx
@@ -1,15 +1,22 @@
 import { useEffect, useState } from 'react';
-import { buildUrl, handleDialogClose } from '../../utils/helpers';
+import {
+  buildUrl,
+  handleDialogClose,
+  compressBase64Image,
+} from '../../utils/helpers';
 import { serverFunctions } from '../../utils/serverFunctions';
 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';
+import LoadingOverlay from '../../components/loading-overlay';
 
 const editUrl = localStorage.getItem('editUrl');
 
 const SelectDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
+  const [isInserting, setIsInserting] = useState(false);
+  const [iframeLoading, setIframeLoading] = useState(true);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -31,6 +38,13 @@ const SelectDiagramDialog = () => {
     const handleMessage = async (e: MessageEvent) => {
       const action = e.data.action;
       if (action === 'save') {
+        if (isInserting) {
+          console.log('Already inserting diagram, ignoring duplicate click');
+          return;
+        }
+
+        setIsInserting(true);
+
         const data = e.data.data;
         const metadata = new URLSearchParams({
           projectID: data.projectID,
@@ -40,14 +54,17 @@ const SelectDiagramDialog = () => {
         });
 
         try {
+          const compressedImage = await compressBase64Image(data.diagramImage);
+
           await serverFunctions.insertBase64ImageWithMetadata(
-            data.diagramImage,
+            compressedImage,
             metadata.toString()
           );
           handleDialogClose();
         } catch (error) {
           showAlertDialog('Error inserting image, please try again');
           console.error('Error inserting image with metadata', error);
+          setIsInserting(false);
         }
       }
     };
@@ -57,20 +74,23 @@ const SelectDiagramDialog = () => {
     return () => {
       window.removeEventListener('message', handleMessage);
     };
-  }, []);
+  }, [isInserting]);
+
+  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 +106,67 @@ 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 (
+    <>
+      {isInserting && <LoadingOverlay />}
+      {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: isInserting ? 0.5 : 1,
+            pointerEvents: isInserting ? 'none' : 'auto',
+          }}
+          onLoad={handleIframeLoad}
+        />
+      </div>
+    </>
   );
 };
 
diff --git a/src/client/sidebar/components/Sidebar.tsx b/src/client/sidebar/components/Sidebar.tsx
index 6a54a52..928e01a 100644
--- a/src/client/sidebar/components/Sidebar.tsx
+++ b/src/client/sidebar/components/Sidebar.tsx
@@ -10,11 +10,11 @@ import {
   Tab,
 } 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';
 
 interface ChartImage {
   altDescription: string;
@@ -138,6 +138,7 @@ const Sidebar = () => {
     options += ',left=' + left;
 
     try {
+       analytics.trackLogin();
       const authUrl = await serverFunctions.getOAuthURL();
       const windowObjectReference = window.open(
         authUrl,
@@ -153,6 +154,7 @@ const Sidebar = () => {
   };
 
   const handleDiagramsUpdate = async () => {
+    analytics.trackUpdateAllDiagrams();
     try {
       setUpdateDiagramsState('loading');
       await serverFunctions.syncImages();
@@ -165,6 +167,7 @@ const Sidebar = () => {
   };
 
   const handleSelectDiagram = async () => {
+    analytics.trackBrowseDiagram();
     try {
       setSelectDiagramState('loading');
       await serverFunctions.openSelectDiagramDialog();
@@ -177,6 +180,7 @@ const Sidebar = () => {
   };
 
   const handleCreateDiagram = async () => {
+    analytics.trackNewDiagram();
     try {
       setCreateDiagramState('loading');
       await serverFunctions.openCreateDiagramDialog();
@@ -196,18 +200,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 +254,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 +266,24 @@ const Sidebar = () => {
 
   return (
     <>
-      {overlayEnabled && <LoadingOverlay />}
+      {overlayEnabled && (
+        <Box
+          sx={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'rgba(255, 255, 255, 0.8)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 9999,
+          }}
+        >
+          <CircularProgress size={40} />
+        </Box>
+      )}
       <Container
         sx={{
           display: 'flex',
@@ -243,36 +291,143 @@ 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
@@ -282,7 +437,7 @@ const Sidebar = () => {
               >
                 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
@@ -292,7 +447,7 @@ const Sidebar = () => {
               >
                 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
@@ -306,21 +461,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 +479,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,90 +491,133 @@ const Sidebar = () => {
                     alignItems: 'center',
                     gap: '20px',
                     marginTop: '20px',
-                    height: 'calc(100vh - 520px)',
+                    height: 'calc(100vh - 440px)',
                     overflowY: 'auto',
                   }}
                 >
                   {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',
+                        }}
                       >
                         <img
                           src={image.image}
                           alt={image.altDescription}
                           style={{
                             width: '200px',
-                            height: 'auto',
-                            marginBottom: '10px',
+                            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',
+            }}
+          >
+            <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>
     </>
   );
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/server/index.ts b/src/server/index.ts
index d4b83ea..69503ca 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -20,6 +20,7 @@ import {
   selectChartImage,
   getChartImages,
   showAlertDialog,
+  removeDiagramByAltDescription,
 } from './ui';
 
 // Public functions must be exported as named exports
@@ -45,4 +46,5 @@ export {
   selectChartImage,
   getChartImages,
   showAlertDialog,
+  removeDiagramByAltDescription,
 };
diff --git a/src/server/ui.js b/src/server/ui.js
index 9c138c8..9459309 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,30 @@ 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) {
+    Logger.log('Error removing image: ' + error.message);
+    return { success: false, message: 'Failed to remove diagram.' };
+  }
+}
+
 export function showAlertDialog(errorText) {
   DocumentApp.getUi().alert(errorText);
 }