diff --git a/src/application/types.ts b/src/application/types.ts
index 9c8edbd69..413313f8e 100644
--- a/src/application/types.ts
+++ b/src/application/types.ts
@@ -33,6 +33,8 @@ export enum BlockType {
   DividerBlock = 'divider',
   ImageBlock = 'image',
   VideoBlock = 'video',
+  AudioBlock = 'audio',
+  GoogleDriveBlock = 'google_drive',
   GridBlock = 'grid',
   BoardBlock = 'board',
   CalendarBlock = 'calendar',
@@ -172,6 +174,32 @@ export interface VideoBlockData extends BlockData {
   name?: string;
 }
 
+export enum AudioUrlType {
+  Local = 'local',
+  Network = 'network',
+  Cloud = 'cloud',
+}
+
+export interface AudioBlockData extends BlockData {
+  url?: string;
+  url_type?: AudioUrlType | string;
+  name?: string;
+  uploaded_at?: number;
+  uploaded_by?: string;
+  duration_in_second?: number;
+  retry_local_url?: string;
+  pending_upload_id?: string;
+}
+
+export interface GoogleDriveBlockData extends BlockData {
+  url?: string;
+  name?: string;
+  email?: string;
+  uploaded_at?: number;
+  width_factor?: number;
+  height_factor?: number;
+}
+
 export interface AIMeetingBlockData extends BlockData {
   title?: string;
   date?: string | number;
diff --git a/src/components/editor/components/block-popover/AudioBlockPopoverContent.tsx b/src/components/editor/components/block-popover/AudioBlockPopoverContent.tsx
new file mode 100644
index 000000000..d1300c25d
--- /dev/null
+++ b/src/components/editor/components/block-popover/AudioBlockPopoverContent.tsx
@@ -0,0 +1,221 @@
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSlateStatic } from 'slate-react';
+
+import { YjsEditor } from '@/application/slate-yjs';
+import { CustomEditor } from '@/application/slate-yjs/command';
+import { findSlateEntryByBlockId } from '@/application/slate-yjs/utils/editor';
+import { AudioBlockData, AudioUrlType, BlockType } from '@/application/types';
+import FileDropzone from '@/components/_shared/file-dropzone/FileDropzone';
+import EmbedLink from '@/components/_shared/image-upload/EmbedLink';
+import { TabPanel, ViewTab, ViewTabs } from '@/components/_shared/tabs/ViewTabs';
+import { useEditorContext } from '@/components/editor/EditorContext';
+import { FileHandler } from '@/utils/file';
+import { createPendingUploadId } from '@/utils/pending-upload';
+import { processUrl } from '@/utils/url';
+
+const AUDIO_EXTENSIONS = ['.mp3', '.wav', '.ogg', '.flac', '.aac', '.wma', '.alac', '.aiff', '.m4a'];
+const AUDIO_EXTENSION_REGEX = /\.(mp3|wav|ogg|flac|aac|wma|alac|aiff|m4a)($|\?)/i;
+
+function getAudioName(rawUrl: string) {
+  try {
+    const url = new URL(rawUrl);
+    const name = url.pathname.split('/').filter(Boolean).pop();
+
+    return name || rawUrl;
+  } catch {
+    return rawUrl;
+  }
+}
+
+function isAudioUrl(rawUrl: string) {
+  const url = processUrl(rawUrl) || rawUrl;
+
+  return AUDIO_EXTENSION_REGEX.test(url);
+}
+
+function AudioBlockPopoverContent({ blockId, onClose }: { blockId: string; onClose: () => void }) {
+  const editor = useSlateStatic() as YjsEditor;
+  const { uploadFile } = useEditorContext();
+  const { t } = useTranslation();
+  const [tabValue, setTabValue] = React.useState('upload');
+  const [uploading, setUploading] = React.useState(false);
+  const entry = useMemo(() => {
+    try {
+      return findSlateEntryByBlockId(editor, blockId);
+    } catch {
+      return null;
+    }
+  }, [blockId, editor]);
+
+  const handleTabChange = useCallback((_event: React.SyntheticEvent, newValue: string) => {
+    setTabValue(newValue);
+  }, []);
+
+  const handleInsertEmbedLink = useCallback(
+    (rawUrl: string) => {
+      const url = processUrl(rawUrl) || rawUrl;
+
+      CustomEditor.setBlockData(editor, blockId, {
+        url,
+        name: getAudioName(url),
+        uploaded_at: Date.now(),
+        url_type: AudioUrlType.Network,
+      } as AudioBlockData);
+      onClose();
+    },
+    [blockId, editor, onClose]
+  );
+
+  const uploadFileRemote = useCallback(
+    async (file: File) => {
+      try {
+        return await uploadFile?.(file);
+      } catch {
+        return undefined;
+      }
+    },
+    [uploadFile]
+  );
+
+  const createPendingAudioData = useCallback(async (file: File): Promise<AudioBlockData> => {
+    const data: AudioBlockData = {
+      url: undefined,
+      name: file.name,
+      uploaded_at: Date.now(),
+      url_type: AudioUrlType.Cloud,
+      pending_upload_id: createPendingUploadId(),
+    };
+
+    try {
+      const fileHandler = new FileHandler();
+      const res = await fileHandler.handleFileUpload(file);
+
+      URL.revokeObjectURL(res.url);
+      data.retry_local_url = res.id;
+    } catch {
+      data.retry_local_url = '';
+    }
+
+    return data;
+  }, []);
+
+  const cleanupLocalFile = useCallback(async (retryLocalUrl?: string) => {
+    if (!retryLocalUrl) return;
+
+    const fileHandler = new FileHandler();
+
+    await fileHandler.cleanup(retryLocalUrl).catch(() => undefined);
+  }, []);
+
+  const uploadIntoAudioBlock = useCallback(
+    async (targetBlockId: string, file: File, pendingData: AudioBlockData) => {
+      const url = await uploadFileRemote(file);
+
+      if (!url) return;
+
+      await cleanupLocalFile(pendingData.retry_local_url);
+
+      let currentData: AudioBlockData | undefined;
+
+      try {
+        const entry = findSlateEntryByBlockId(editor, targetBlockId);
+
+        currentData = entry ? (entry[0] as { data?: AudioBlockData }).data ?? undefined : undefined;
+      } catch {
+        return;
+      }
+
+      if (!currentData) return;
+      if (currentData.url) return;
+      if (!pendingData.pending_upload_id || currentData.pending_upload_id !== pendingData.pending_upload_id) return;
+
+      CustomEditor.setBlockData(editor, targetBlockId, {
+        url,
+        name: file.name,
+        uploaded_at: Date.now(),
+        url_type: AudioUrlType.Cloud,
+        retry_local_url: '',
+        pending_upload_id: '',
+      } as AudioBlockData);
+    },
+    [cleanupLocalFile, editor, uploadFileRemote]
+  );
+
+  const handleChangeUploadFiles = useCallback(
+    async (files: File[]) => {
+      if (!files.length) return;
+
+      setUploading(true);
+      try {
+        const [primaryData, ...otherDatas] = await Promise.all(files.map((file) => createPendingAudioData(file)));
+        const [file, ...otherFiles] = files;
+
+        CustomEditor.setBlockData(editor, blockId, primaryData);
+
+        const pendingUploads: Promise<void>[] = [uploadIntoAudioBlock(blockId, file, primaryData)];
+        const reversedPairs = otherFiles.map((f, i) => [f, otherDatas[i]] as const).reverse();
+
+        for (const [f, data] of reversedPairs) {
+          const newId = CustomEditor.addBelowBlock(editor, blockId, BlockType.AudioBlock, data);
+
+          if (newId) {
+            pendingUploads.push(uploadIntoAudioBlock(newId, f, data));
+          }
+        }
+
+        onClose();
+        await Promise.all(pendingUploads);
+      } finally {
+        setUploading(false);
+      }
+    },
+    [blockId, createPendingAudioData, editor, onClose, uploadIntoAudioBlock]
+  );
+
+  const defaultLink = useMemo(() => {
+    return (entry?.[0]?.data as AudioBlockData | undefined)?.url;
+  }, [entry]);
+  const selectedIndex = tabValue === 'upload' ? 0 : 1;
+
+  return (
+    <div className={'flex flex-col gap-2 p-2'}>
+      <ViewTabs
+        value={tabValue}
+        onChange={handleTabChange}
+        className={'min-h-[38px] w-[560px] max-w-[964px] border-b border-border-primary px-2'}
+      >
+        <ViewTab iconPosition='start' color='inherit' label={t('button.upload')} value='upload' />
+        <ViewTab iconPosition='start' color='inherit' label={t('document.plugins.file.networkTab')} value='embed' />
+      </ViewTabs>
+      <div className={'appflowy-scroller max-h-[400px] overflow-y-auto p-2'}>
+        <TabPanel className={'flex h-full w-full flex-col'} index={0} value={selectedIndex}>
+          <FileDropzone
+            accept={AUDIO_EXTENSIONS.join(',')}
+            multiple={true}
+            placeholder={
+              <span>
+                {t('document.plugins.audio.uploadHint', {
+                  defaultValue: 'Click to upload or drag and drop audio files',
+                })}
+                <span className={'text-text-action'}> {t('document.plugins.file.fileUploadHintSuffix')}</span>
+              </span>
+            }
+            onChange={handleChangeUploadFiles}
+            loading={uploading}
+          />
+        </TabPanel>
+        <TabPanel className={'flex h-full w-full flex-col'} index={1} value={selectedIndex}>
+          <EmbedLink
+            onDone={handleInsertEmbedLink}
+            defaultLink={defaultLink}
+            placeholder={t('document.plugins.audio.embedPlaceholder', { defaultValue: 'Paste an audio link' })}
+            validator={isAudioUrl}
+          />
+        </TabPanel>
+      </div>
+    </div>
+  );
+}
+
+export default AudioBlockPopoverContent;
diff --git a/src/components/editor/components/block-popover/BlockPopoverContext.tsx b/src/components/editor/components/block-popover/BlockPopoverContext.tsx
index c94318348..8e11eda25 100644
--- a/src/components/editor/components/block-popover/BlockPopoverContext.tsx
+++ b/src/components/editor/components/block-popover/BlockPopoverContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useState, useCallback, useContext, useMemo } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { ReactEditor } from 'slate-react';
 
 import { findSlateEntryByBlockId } from '@/application/slate-yjs/utils/editor';
@@ -10,7 +10,8 @@ export interface BlockPopoverContextType {
   anchorEl?: HTMLElement | null;
   open: boolean;
   close: () => void;
-  openPopover: (blockId: string, type: BlockType, anchorEl: HTMLElement) => void;
+  openPopover: (blockId: string, type: BlockType, anchorEl?: HTMLElement | null) => void;
+  notifyMount: (blockId: string) => void;
   isOpen: (type: BlockType) => boolean;
 }
 
@@ -26,47 +27,90 @@ export function usePopoverContext() {
   return context;
 }
 
+export function usePopoverMountSignal(blockId: string | undefined) {
+  const { notifyMount } = usePopoverContext();
+
+  useEffect(() => {
+    if (!blockId) return;
+    notifyMount(blockId);
+  }, [blockId, notifyMount]);
+}
+
 export const BlockPopoverProvider = ({ children, editor }: { children: React.ReactNode; editor: ReactEditor }) => {
   const [type, setType] = useState<BlockType | undefined>();
   const [blockId, setBlockId] = useState<string | undefined>();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const pendingRef = useRef<{ blockId: string; type: BlockType } | null>(null);
   const open = Boolean(anchorEl);
 
   const close = useCallback(() => {
     setAnchorEl(null);
     setBlockId(undefined);
     setType(undefined);
+    pendingRef.current = null;
   }, []);
 
-  const openPopover = useCallback((blockId: string, type: BlockType) => {
-    const entry = findSlateEntryByBlockId(editor, blockId);
+  const resolveAnchor = useCallback(
+    (targetBlockId: string): HTMLElement | null => {
+      const entry = findSlateEntryByBlockId(editor, targetBlockId);
 
-    if (!entry) {
-      console.error('Block not found');
-      return;
-    }
+      if (!entry) return null;
 
-    const [node] = entry;
-    const dom = ReactEditor.toDOMNode(editor, node);
+      try {
+        return ReactEditor.toDOMNode(editor, entry[0]);
+      } catch {
+        return null;
+      }
+    },
+    [editor]
+  );
 
-    setBlockId(blockId);
-    setType(type);
-    setAnchorEl(dom);
-  }, [editor]);
+  const openPopover = useCallback(
+    (targetBlockId: string, targetType: BlockType) => {
+      const dom = resolveAnchor(targetBlockId);
+
+      if (dom) {
+        pendingRef.current = null;
+        setBlockId(targetBlockId);
+        setType(targetType);
+        setAnchorEl(dom);
+        return;
+      }
+
+      pendingRef.current = { blockId: targetBlockId, type: targetType };
+    },
+    [resolveAnchor]
+  );
 
-  const isOpen = useCallback((popover: BlockType) => {
-    return popover === type;
-  }, [type]);
+  const notifyMount = useCallback(
+    (mountedBlockId: string) => {
+      const pending = pendingRef.current;
 
-  const contextValue = useMemo(
-    () => ({ blockId, type, anchorEl, open, close, openPopover, isOpen }),
-    [blockId, type, anchorEl, open, close, openPopover, isOpen]
+      if (!pending || pending.blockId !== mountedBlockId) return;
+
+      const dom = resolveAnchor(pending.blockId);
+
+      if (!dom) return;
+
+      pendingRef.current = null;
+      setBlockId(pending.blockId);
+      setType(pending.type);
+      setAnchorEl(dom);
+    },
+    [resolveAnchor]
   );
 
-  return (
-    <BlockPopoverContext.Provider value={contextValue}>
-      {children}
-    </BlockPopoverContext.Provider>
+  const isOpen = useCallback(
+    (popover: BlockType) => {
+      return popover === type;
+    },
+    [type]
+  );
+
+  const contextValue = useMemo(
+    () => ({ blockId, type, anchorEl, open, close, openPopover, notifyMount, isOpen }),
+    [blockId, type, anchorEl, open, close, openPopover, notifyMount, isOpen]
   );
 
+  return <BlockPopoverContext.Provider value={contextValue}>{children}</BlockPopoverContext.Provider>;
 };
diff --git a/src/components/editor/components/block-popover/GalleryBlockPopoverContent.tsx b/src/components/editor/components/block-popover/GalleryBlockPopoverContent.tsx
new file mode 100644
index 000000000..31fbdbf03
--- /dev/null
+++ b/src/components/editor/components/block-popover/GalleryBlockPopoverContent.tsx
@@ -0,0 +1,124 @@
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSlateStatic } from 'slate-react';
+
+import { YjsEditor } from '@/application/slate-yjs';
+import { CustomEditor } from '@/application/slate-yjs/command';
+import { findSlateEntryByBlockId } from '@/application/slate-yjs/utils/editor';
+import { GalleryBlockData, GalleryLayout, ImageType } from '@/application/types';
+import FileDropzone from '@/components/_shared/file-dropzone/FileDropzone';
+import { ALLOWED_IMAGE_EXTENSIONS, Unsplash } from '@/components/_shared/image-upload';
+import EmbedLink from '@/components/_shared/image-upload/EmbedLink';
+import { TabPanel, ViewTab, ViewTabs } from '@/components/_shared/tabs/ViewTabs';
+import { useEditorContext } from '@/components/editor/EditorContext';
+import { processUrl } from '@/utils/url';
+
+function GalleryBlockPopoverContent({ blockId, onClose }: { blockId: string; onClose: () => void }) {
+  const editor = useSlateStatic() as YjsEditor;
+  const { uploadFile } = useEditorContext();
+  const { t } = useTranslation();
+  const [tabValue, setTabValue] = React.useState('upload');
+  const [uploading, setUploading] = React.useState(false);
+  const entry = useMemo(() => {
+    try {
+      return findSlateEntryByBlockId(editor, blockId);
+    } catch {
+      return null;
+    }
+  }, [blockId, editor]);
+  const data = entry?.[0]?.data as GalleryBlockData | undefined;
+
+  const handleTabChange = useCallback((_event: React.SyntheticEvent, newValue: string) => {
+    setTabValue(newValue);
+  }, []);
+
+  const appendImages = useCallback(
+    (images: GalleryBlockData['images']) => {
+      if (!images.length) return;
+
+      CustomEditor.setBlockData(editor, blockId, {
+        images: [...(data?.images ?? []), ...images],
+        layout: data?.layout ?? GalleryLayout.Carousel,
+      } as GalleryBlockData);
+      onClose();
+    },
+    [blockId, data?.images, data?.layout, editor, onClose]
+  );
+
+  const handleChangeUploadFiles = useCallback(
+    async (files: File[]) => {
+      if (!files.length) return;
+
+      setUploading(true);
+      try {
+        const uploadedImages = (
+          await Promise.all(
+            files.map(async (file) => {
+              try {
+                const url = await uploadFile?.(file);
+
+                return url
+                  ? {
+                      url,
+                      type: ImageType.External,
+                    }
+                  : null;
+              } catch {
+                return null;
+              }
+            })
+          )
+        ).filter(Boolean) as GalleryBlockData['images'];
+
+        appendImages(uploadedImages);
+      } finally {
+        setUploading(false);
+      }
+    },
+    [appendImages, uploadFile]
+  );
+
+  const handleInsertEmbedLink = useCallback(
+    (url: string, type?: ImageType) => {
+      const resolvedType = type ?? ImageType.External;
+      const normalizedUrl = resolvedType === ImageType.External ? processUrl(url) || url : url;
+
+      appendImages([{ url: normalizedUrl, type: resolvedType }]);
+    },
+    [appendImages]
+  );
+
+  const selectedIndex = tabValue === 'upload' ? 0 : tabValue === 'embed' ? 1 : 2;
+
+  return (
+    <div className={'flex flex-col p-2'}>
+      <ViewTabs
+        value={tabValue}
+        onChange={handleTabChange}
+        className={'min-h-[38px] w-[560px] max-w-[964px] border-b border-border-primary px-2'}
+      >
+        <ViewTab iconPosition='start' color='inherit' label={t('button.upload')} value='upload' />
+        <ViewTab iconPosition='start' color='inherit' label={t('document.plugins.file.networkTab')} value='embed' />
+        <ViewTab iconPosition='start' color='inherit' label={t('pageStyle.unsplash')} value='unsplash' />
+      </ViewTabs>
+      <div className={'appflowy-scroller max-h-[400px] overflow-y-auto p-2'}>
+        <TabPanel className={'flex h-full w-full flex-col'} index={0} value={selectedIndex}>
+          <FileDropzone
+            multiple={true}
+            onChange={handleChangeUploadFiles}
+            accept={ALLOWED_IMAGE_EXTENSIONS.join(',')}
+            loading={uploading}
+          />
+        </TabPanel>
+        <TabPanel className={'flex h-full w-full flex-col'} index={1} value={selectedIndex}>
+          <EmbedLink onDone={handleInsertEmbedLink} placeholder={t('document.imageBlock.embedLink.placeholder')} />
+        </TabPanel>
+        <TabPanel className={'flex h-full w-full flex-col'} index={2} value={selectedIndex}>
+          <Unsplash onDone={handleInsertEmbedLink} />
+        </TabPanel>
+      </div>
+    </div>
+  );
+}
+
+export default GalleryBlockPopoverContent;
diff --git a/src/components/editor/components/block-popover/GoogleDriveBlockPopoverContent.tsx b/src/components/editor/components/block-popover/GoogleDriveBlockPopoverContent.tsx
new file mode 100644
index 000000000..e5f9b5d04
--- /dev/null
+++ b/src/components/editor/components/block-popover/GoogleDriveBlockPopoverContent.tsx
@@ -0,0 +1,63 @@
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSlateStatic } from 'slate-react';
+
+import { YjsEditor } from '@/application/slate-yjs';
+import { CustomEditor } from '@/application/slate-yjs/command';
+import { findSlateEntryByBlockId } from '@/application/slate-yjs/utils/editor';
+import { GoogleDriveBlockData } from '@/application/types';
+import EmbedLink from '@/components/_shared/image-upload/EmbedLink';
+import {
+  isGoogleDriveUrl,
+  resolveGoogleDriveName,
+} from '@/components/editor/components/blocks/google-drive/google-drive-utils';
+import { processUrl } from '@/utils/url';
+
+function GoogleDriveBlockPopoverContent({ blockId, onClose }: { blockId: string; onClose: () => void }) {
+  const editor = useSlateStatic() as YjsEditor;
+  const { t } = useTranslation();
+  const entry = useMemo(() => {
+    try {
+      return findSlateEntryByBlockId(editor, blockId);
+    } catch {
+      return null;
+    }
+  }, [blockId, editor]);
+  const data = entry?.[0]?.data as GoogleDriveBlockData | undefined;
+
+  const handleInsertEmbedLink = useCallback(
+    (rawUrl: string) => {
+      const url = processUrl(rawUrl) || rawUrl;
+
+      CustomEditor.setBlockData(editor, blockId, {
+        url,
+        name: resolveGoogleDriveName(url),
+        uploaded_at: Date.now(),
+        width_factor: data?.width_factor ?? 1,
+        height_factor: data?.height_factor ?? 1,
+      } as GoogleDriveBlockData);
+      onClose();
+    },
+    [blockId, data?.height_factor, data?.width_factor, editor, onClose]
+  );
+
+  return (
+    <div className={'flex flex-col gap-2 p-4'}>
+      <EmbedLink
+        onDone={handleInsertEmbedLink}
+        defaultLink={data?.url}
+        placeholder={t('document.plugins.googleDrive.embedPlaceholder', {
+          defaultValue: 'Paste a Google Drive link',
+        })}
+        validator={isGoogleDriveUrl}
+      />
+      <div className={'w-full text-center text-sm text-text-secondary'}>
+        {t('document.plugins.googleDrive.worksWithLinksOfGoogleDrive', {
+          defaultValue: 'Works with Google Docs, Sheets, Slides, Forms, files, and folders.',
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default GoogleDriveBlockPopoverContent;
diff --git a/src/components/editor/components/block-popover/LinkPreviewPopoverContent.tsx b/src/components/editor/components/block-popover/LinkPreviewPopoverContent.tsx
new file mode 100644
index 000000000..5560c879e
--- /dev/null
+++ b/src/components/editor/components/block-popover/LinkPreviewPopoverContent.tsx
@@ -0,0 +1,48 @@
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSlateStatic } from 'slate-react';
+
+import { YjsEditor } from '@/application/slate-yjs';
+import { CustomEditor } from '@/application/slate-yjs/command';
+import { findSlateEntryByBlockId } from '@/application/slate-yjs/utils/editor';
+import { LinkPreviewBlockData, LinkPreviewType } from '@/application/types';
+import EmbedLink from '@/components/_shared/image-upload/EmbedLink';
+import { processUrl } from '@/utils/url';
+
+function LinkPreviewPopoverContent({ blockId, onClose }: { blockId: string; onClose: () => void }) {
+  const editor = useSlateStatic() as YjsEditor;
+  const { t } = useTranslation();
+  const entry = useMemo(() => {
+    try {
+      return findSlateEntryByBlockId(editor, blockId);
+    } catch {
+      return null;
+    }
+  }, [blockId, editor]);
+  const data = entry?.[0]?.data as LinkPreviewBlockData | undefined;
+
+  const handleInsertEmbedLink = useCallback(
+    (rawUrl: string) => {
+      const url = processUrl(rawUrl) || rawUrl;
+
+      CustomEditor.setBlockData(editor, blockId, {
+        url,
+        preview_type: data?.preview_type ?? LinkPreviewType.Bookmark,
+      } as LinkPreviewBlockData);
+      onClose();
+    },
+    [blockId, data?.preview_type, editor, onClose]
+  );
+
+  return (
+    <div className={'flex flex-col gap-2 p-4'}>
+      <EmbedLink
+        onDone={handleInsertEmbedLink}
+        defaultLink={data?.url}
+        placeholder={t('document.plugins.urlPreview.placeholder', { defaultValue: 'Paste a link' })}
+      />
+    </div>
+  );
+}
+
+export default LinkPreviewPopoverContent;
diff --git a/src/components/editor/components/block-popover/index.tsx b/src/components/editor/components/block-popover/index.tsx
index 1d1227f80..23d411b04 100644
--- a/src/components/editor/components/block-popover/index.tsx
+++ b/src/components/editor/components/block-popover/index.tsx
@@ -5,9 +5,13 @@ import { YjsEditor } from '@/application/slate-yjs';
 import { findSlateEntryByBlockId } from '@/application/slate-yjs/utils/editor';
 import { BlockType } from '@/application/types';
 import { calculateOptimalOrigins, Origins, Popover } from '@/components/_shared/popover';
+import AudioBlockPopoverContent from '@/components/editor/components/block-popover/AudioBlockPopoverContent';
 import { usePopoverContext } from '@/components/editor/components/block-popover/BlockPopoverContext';
 import FileBlockPopoverContent from '@/components/editor/components/block-popover/FileBlockPopoverContent';
+import GalleryBlockPopoverContent from '@/components/editor/components/block-popover/GalleryBlockPopoverContent';
+import GoogleDriveBlockPopoverContent from '@/components/editor/components/block-popover/GoogleDriveBlockPopoverContent';
 import ImageBlockPopoverContent from '@/components/editor/components/block-popover/ImageBlockPopoverContent';
+import LinkPreviewPopoverContent from '@/components/editor/components/block-popover/LinkPreviewPopoverContent';
 import PDFBlockPopoverContent from '@/components/editor/components/block-popover/PDFBlockPopoverContent';
 import { useEditorLocalState } from '@/components/editor/EditorContext';
 
@@ -37,7 +41,7 @@ function BlockPopover() {
 
     const entry = findSlateEntryByBlockId(editor, blockId);
 
-    if(!entry) return;
+    if (!entry) return;
 
     const [, path] = entry;
 
@@ -59,6 +63,14 @@ function BlockPopover() {
         return <MathEquationPopoverContent blockId={blockId} onClose={handleClose} />;
       case BlockType.VideoBlock:
         return <VideoBlockPopoverContent blockId={blockId} onClose={handleClose} />;
+      case BlockType.LinkPreview:
+        return <LinkPreviewPopoverContent blockId={blockId} onClose={handleClose} />;
+      case BlockType.GalleryBlock:
+        return <GalleryBlockPopoverContent blockId={blockId} onClose={handleClose} />;
+      case BlockType.AudioBlock:
+        return <AudioBlockPopoverContent blockId={blockId} onClose={handleClose} />;
+      case BlockType.GoogleDriveBlock:
+        return <GoogleDriveBlockPopoverContent blockId={blockId} onClose={handleClose} />;
       default:
         return null;
     }
@@ -89,7 +101,15 @@ function BlockPopover() {
           left: panelPosition.left,
         },
         400,
-        type === BlockType.ImageBlock || type === BlockType.VideoBlock ? 366 : 200,
+        [
+          BlockType.ImageBlock,
+          BlockType.VideoBlock,
+          BlockType.GalleryBlock,
+          BlockType.AudioBlock,
+          BlockType.GoogleDriveBlock,
+        ].includes(type as BlockType)
+          ? 366
+          : 200,
         defaultOrigins,
         16
       );
diff --git a/src/components/editor/components/blocks/audio/AudioBlock.tsx b/src/components/editor/components/blocks/audio/AudioBlock.tsx
new file mode 100644
index 000000000..052d6b6b9
--- /dev/null
+++ b/src/components/editor/components/blocks/audio/AudioBlock.tsx
@@ -0,0 +1,217 @@
+import { CircularProgress, IconButton, Tooltip } from '@mui/material';
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Element } from 'slate';
+import { useReadOnly, useSlateStatic } from 'slate-react';
+
+import { YjsEditor } from '@/application/slate-yjs';
+import { CustomEditor } from '@/application/slate-yjs/command';
+import { AudioBlockData, AudioUrlType, BlockType } from '@/application/types';
+import { ReactComponent as AudioIcon } from '@/assets/icons/audio.svg';
+import { ReactComponent as ReloadIcon } from '@/assets/icons/regenerate.svg';
+import { notify } from '@/components/_shared/notify';
+import { usePopoverContext } from '@/components/editor/components/block-popover/BlockPopoverContext';
+import FileToolbar from '@/components/editor/components/blocks/file/FileToolbar';
+import { AudioBlockNode, EditorElementProps, FileNode } from '@/components/editor/editor.type';
+import { useEditorContext } from '@/components/editor/EditorContext';
+import { constructFileUrl } from '@/components/editor/utils/file-url';
+import { FileHandler } from '@/utils/file';
+
+export const AudioBlock = memo(
+  forwardRef<HTMLDivElement, EditorElementProps<AudioBlockNode>>(({ node, children, ...attributes }, ref) => {
+    const { t } = useTranslation();
+    const { blockId, data } = node;
+    const { uploadFile, workspaceId, viewId } = useEditorContext();
+    const editor = useSlateStatic() as YjsEditor;
+    const readOnly = useReadOnly() || editor.isElementReadOnly(node as unknown as Element);
+    const { openPopover } = usePopoverContext();
+    const emptyRef = useRef<HTMLDivElement>(null);
+    const fileHandlerRef = useRef(new FileHandler());
+    const [localUrl, setLocalUrl] = useState<string | undefined>();
+    const [needRetry, setNeedRetry] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [showToolbar, setShowToolbar] = useState(false);
+
+    const { url: dataUrl, name, retry_local_url, duration_in_second } = data || {};
+    const remoteUrl = useMemo(
+      () => (dataUrl ? constructFileUrl(dataUrl, workspaceId, viewId) : ''),
+      [dataUrl, workspaceId, viewId]
+    );
+    const sourceUrl = remoteUrl || localUrl || '';
+    const hasContent = Boolean(sourceUrl);
+
+    useEffect(() => {
+      if (readOnly) return;
+      void (async () => {
+        if (!retry_local_url || dataUrl) {
+          setLocalUrl(undefined);
+          setNeedRetry(false);
+          return;
+        }
+
+        const fileData = await fileHandlerRef.current.getStoredFile(retry_local_url);
+
+        setLocalUrl(fileData?.url);
+        setNeedRetry(!!fileData);
+      })();
+    }, [dataUrl, readOnly, retry_local_url]);
+
+    const openUploadPopover = useCallback(() => {
+      if (emptyRef.current && !readOnly) {
+        openPopover(blockId, BlockType.AudioBlock, emptyRef.current);
+      }
+    }, [blockId, openPopover, readOnly]);
+
+    const uploadFileRemote = useCallback(
+      async (file: File) => {
+        try {
+          return await uploadFile?.(file);
+        } catch {
+          return undefined;
+        }
+      },
+      [uploadFile]
+    );
+
+    const handleRetry = useCallback(
+      async (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (!retry_local_url) return;
+
+        setLoading(true);
+        try {
+          const fileData = await fileHandlerRef.current.getStoredFile(retry_local_url);
+          const file = fileData?.file;
+
+          if (!file) {
+            notify.error(t('web.fileBlock.uploadFailed'));
+            return;
+          }
+
+          const url = await uploadFileRemote(file);
+
+          if (!url) {
+            notify.error(t('web.fileBlock.uploadFailed'));
+            return;
+          }
+
+          await fileHandlerRef.current.cleanup(retry_local_url);
+          CustomEditor.setBlockData(editor, blockId, {
+            url,
+            name,
+            uploaded_at: Date.now(),
+            url_type: AudioUrlType.Cloud,
+            retry_local_url: '',
+            pending_upload_id: '',
+          } as AudioBlockData);
+        } finally {
+          setLoading(false);
+        }
+      },
+      [blockId, editor, name, retry_local_url, t, uploadFileRemote]
+    );
+
+    const handleLoadedMetadata = useCallback(
+      (event: React.SyntheticEvent<HTMLAudioElement>) => {
+        if (readOnly) return;
+
+        const seconds = Math.round(event.currentTarget.duration);
+
+        if (!Number.isFinite(seconds) || seconds <= 0 || seconds === duration_in_second) return;
+
+        CustomEditor.setBlockData(editor, blockId, {
+          duration_in_second: seconds,
+        } as AudioBlockData);
+      },
+      [blockId, duration_in_second, editor, readOnly]
+    );
+
+    const className = [
+      'w-full',
+      !readOnly || hasContent ? 'cursor-pointer' : 'text-text-secondary',
+      attributes.className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <div
+        {...attributes}
+        contentEditable={readOnly ? false : undefined}
+        className={className}
+        onClick={() => {
+          if (!hasContent) {
+            openUploadPopover();
+          }
+        }}
+        onMouseEnter={() => {
+          if (hasContent) setShowToolbar(true);
+        }}
+        onMouseLeave={() => setShowToolbar(false)}
+      >
+        <div contentEditable={false} className={'embed-block flex-col p-4'}>
+          <div className={'flex w-full items-center gap-3'}>
+            <AudioIcon className={'h-6 w-6 flex-none'} />
+            <div ref={emptyRef} className={'min-w-0 flex-1 text-base font-medium'}>
+              {hasContent ? (
+                <div className={'truncate'}>
+                  {name?.trim() || t('document.selectionMenu.audio', { defaultValue: 'Audio' })}
+                </div>
+              ) : (
+                <div className={'text-text-secondary'}>
+                  {t('document.plugins.audio.addAudio', { defaultValue: 'Upload or embed audio' })}
+                </div>
+              )}
+              {needRetry && (
+                <div className={'text-sm font-normal text-function-error'}>{t('web.fileBlock.uploadFailed')}</div>
+              )}
+            </div>
+            {needRetry &&
+              (loading ? (
+                <CircularProgress size={16} />
+              ) : (
+                <Tooltip placement={'top'} title={t('web.fileBlock.retry')}>
+                  <IconButton onClick={handleRetry} size={'small'} color={'error'}>
+                    <ReloadIcon />
+                  </IconButton>
+                </Tooltip>
+              ))}
+          </div>
+
+          {hasContent && (
+            <audio
+              controls
+              preload='metadata'
+              src={sourceUrl}
+              className={'w-full min-w-0'}
+              onClick={(e) => e.stopPropagation()}
+              onMouseDown={(e) => e.stopPropagation()}
+              onLoadedMetadata={handleLoadedMetadata}
+            />
+          )}
+
+          {showToolbar && remoteUrl && (
+            <FileToolbar
+              node={
+                {
+                  ...node,
+                  data: {
+                    ...data,
+                    url: remoteUrl,
+                  },
+                } as unknown as FileNode
+              }
+            />
+          )}
+        </div>
+        <div ref={ref} className={'pointer-events-none absolute h-full w-full text-transparent caret-transparent'}>
+          {children}
+        </div>
+      </div>
+    );
+  })
+);
+
+AudioBlock.displayName = 'AudioBlock';
+
+export default AudioBlock;
diff --git a/src/components/editor/components/blocks/audio/index.ts b/src/components/editor/components/blocks/audio/index.ts
new file mode 100644
index 000000000..aa87bfc5a
--- /dev/null
+++ b/src/components/editor/components/blocks/audio/index.ts
@@ -0,0 +1 @@
+export * from './AudioBlock';
diff --git a/src/components/editor/components/blocks/gallery/GalleryBlock.tsx b/src/components/editor/components/blocks/gallery/GalleryBlock.tsx
index f250f3c4f..c1eba592c 100644
--- a/src/components/editor/components/blocks/gallery/GalleryBlock.tsx
+++ b/src/components/editor/components/blocks/gallery/GalleryBlock.tsx
@@ -1,11 +1,14 @@
 import React, { forwardRef, memo, Suspense, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useReadOnly } from 'slate-react';
+import { Element } from 'slate';
+import { useReadOnly, useSlateStatic } from 'slate-react';
 
-import { GalleryLayout } from '@/application/types';
+import { YjsEditor } from '@/application/slate-yjs';
+import { BlockType, GalleryLayout } from '@/application/types';
 import { ReactComponent as GalleryIcon } from '@/assets/icons/gallery.svg';
 import { GalleryPreview } from '@/components/_shared/gallery-preview';
 import { notify } from '@/components/_shared/notify';
+import { usePopoverContext } from '@/components/editor/components/block-popover/BlockPopoverContext';
 import Carousel from '@/components/editor/components/blocks/gallery/Carousel';
 import GalleryToolbar from '@/components/editor/components/blocks/gallery/GalleryToolbar';
 import ImageGallery from '@/components/editor/components/blocks/gallery/ImageGallery';
@@ -18,10 +21,14 @@ const GalleryBlock = memo(
   forwardRef<HTMLDivElement, EditorElementProps<GalleryBlockNode>>(({ node, children, ...attributes }, ref) => {
     const { t } = useTranslation();
     const { workspaceId, viewId } = useEditorContext();
-    const { images, layout } = useMemo(() => node.data || {}, [node.data]);
+    const { images = [], layout = GalleryLayout.Carousel } = useMemo(() => node.data || {}, [node.data]);
     const [openPreview, setOpenPreview] = React.useState(false);
     const previewIndexRef = React.useRef(0);
     const [hovered, setHovered] = useState(false);
+    const editor = useSlateStatic() as YjsEditor;
+    const readOnly = useReadOnly() || editor.isElementReadOnly(node as unknown as Element);
+    const emptyRef = React.useRef<HTMLDivElement>(null);
+    const { openPopover } = usePopoverContext();
 
     const className = useMemo(() => {
       const classList = ['gallery-block', 'relative', 'w-full', 'cursor-default', attributes.className || ''];
@@ -47,10 +54,10 @@ const GalleryBlock = memo(
           };
         })
         .filter(Boolean) as {
-          src: string;
-          thumb: string;
-          responsive: string;
-        }[];
+        src: string;
+        thumb: string;
+        responsive: string;
+      }[];
     }, [images, workspaceId, viewId]);
 
     const handleOpenPreview = useCallback(() => {
@@ -81,7 +88,11 @@ const GalleryBlock = memo(
     const handlePreviewIndex = useCallback((index: number) => {
       previewIndexRef.current = index;
     }, []);
-    const readOnly = useReadOnly();
+    const handleOpenUploadPopover = useCallback(() => {
+      if (readOnly || !emptyRef.current) return;
+
+      openPopover(node.blockId, BlockType.GalleryBlock, emptyRef.current);
+    }, [node.blockId, openPopover, readOnly]);
 
     return (
       <div
@@ -93,6 +104,11 @@ const GalleryBlock = memo(
           setHovered(true);
         }}
         onMouseLeave={() => setHovered(false)}
+        onClick={() => {
+          if (!photos.length) {
+            handleOpenUploadPopover();
+          }
+        }}
       >
         <div ref={ref} className={'absolute left-0 top-0 h-full w-full caret-transparent'}>
           {children}
@@ -114,7 +130,7 @@ const GalleryBlock = memo(
               />
             )
           ) : (
-            <div className={'flex w-full select-none items-center gap-4 text-text-secondary'}>
+            <div ref={emptyRef} className={'flex w-full select-none items-center gap-4 text-text-secondary'}>
               <GalleryIcon />
               {t('document.plugins.image.addAnImageMobile')}
             </div>
diff --git a/src/components/editor/components/blocks/google-drive/GoogleDriveBlock.tsx b/src/components/editor/components/blocks/google-drive/GoogleDriveBlock.tsx
new file mode 100644
index 000000000..b9ca4aa70
--- /dev/null
+++ b/src/components/editor/components/blocks/google-drive/GoogleDriveBlock.tsx
@@ -0,0 +1,134 @@
+import { Divider } from '@mui/material';
+import { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Element } from 'slate';
+import { useReadOnly, useSlateStatic } from 'slate-react';
+
+import { YjsEditor } from '@/application/slate-yjs';
+import { CustomEditor } from '@/application/slate-yjs/command';
+import { BlockType } from '@/application/types';
+import { ReactComponent as CopyIcon } from '@/assets/icons/copy.svg';
+import { ReactComponent as DeleteIcon } from '@/assets/icons/delete.svg';
+import { ReactComponent as OpenIcon } from '@/assets/icons/link_arrow.svg';
+import { ReactComponent as GoogleIcon } from '@/assets/login/google.svg';
+import { notify } from '@/components/_shared/notify';
+import { usePopoverContext } from '@/components/editor/components/block-popover/BlockPopoverContext';
+import ActionButton from '@/components/editor/components/toolbar/selection-toolbar/actions/ActionButton';
+import { EditorElementProps, GoogleDriveBlockNode } from '@/components/editor/editor.type';
+import { copyTextToClipboard } from '@/utils/copy';
+import { openUrl } from '@/utils/url';
+
+import { buildGoogleDriveEmbeddedUrl } from './google-drive-utils';
+
+export const GoogleDriveBlock = memo(
+  forwardRef<HTMLDivElement, EditorElementProps<GoogleDriveBlockNode>>(({ node, children, ...attributes }, ref) => {
+    const { t } = useTranslation();
+    const { blockId, data } = node;
+    const { url, name } = data || {};
+    const editor = useSlateStatic() as YjsEditor;
+    const readOnly = useReadOnly() || editor.isElementReadOnly(node as unknown as Element);
+    const { openPopover } = usePopoverContext();
+    const emptyRef = useRef<HTMLDivElement>(null);
+    const [showToolbar, setShowToolbar] = useState(false);
+    const embeddedUrl = useMemo(() => (url ? buildGoogleDriveEmbeddedUrl(url) : ''), [url]);
+
+    const openEditPopover = useCallback(() => {
+      if (emptyRef.current && !readOnly) {
+        openPopover(blockId, BlockType.GoogleDriveBlock, emptyRef.current);
+      }
+    }, [blockId, openPopover, readOnly]);
+
+    const onCopy = useCallback(async () => {
+      if (!url) return;
+
+      await copyTextToClipboard(url);
+      notify.success(t('button.copyLinkOriginal'));
+    }, [t, url]);
+
+    const onOpen = useCallback(() => {
+      if (!url) return;
+      void openUrl(url, '_blank');
+    }, [url]);
+
+    const onDelete = useCallback(() => {
+      CustomEditor.deleteBlock(editor, blockId);
+    }, [blockId, editor]);
+
+    return (
+      <div
+        {...attributes}
+        contentEditable={readOnly ? false : undefined}
+        className={['w-full', !readOnly || embeddedUrl ? 'cursor-pointer' : 'text-text-secondary', attributes.className]
+          .filter(Boolean)
+          .join(' ')}
+        onClick={() => {
+          if (!embeddedUrl) {
+            openEditPopover();
+          }
+        }}
+        onMouseEnter={() => {
+          if (embeddedUrl) setShowToolbar(true);
+        }}
+        onMouseLeave={() => setShowToolbar(false)}
+      >
+        <div
+          contentEditable={false}
+          className={`embed-block flex-col p-4 ${embeddedUrl ? '!border-none !bg-transparent !p-0' : ''}`}
+        >
+          {embeddedUrl ? (
+            <div
+              className={
+                'relative w-full overflow-hidden rounded-[8px] border border-border-primary bg-fill-list-active'
+              }
+            >
+              <iframe
+                title={name || t('document.slashMenu.name.googleDrive', { defaultValue: 'Google Drive' })}
+                src={embeddedUrl}
+                className={'h-[420px] w-full bg-white'}
+                loading='lazy'
+                allow='autoplay; clipboard-read; clipboard-write'
+                sandbox='allow-same-origin allow-scripts allow-popups allow-forms allow-downloads'
+              />
+              {showToolbar && (
+                <div onClick={(e) => e.stopPropagation()} className={'absolute right-2 top-2 z-10'}>
+                  <div
+                    className={'flex space-x-1 rounded-[8px] border border-border-primary bg-fill-toolbar p-1 shadow'}
+                  >
+                    <ActionButton onClick={onCopy} tooltip={t('button.copyLinkOriginal')}>
+                      <CopyIcon />
+                    </ActionButton>
+                    <ActionButton onClick={onOpen} tooltip={'Open'}>
+                      <OpenIcon />
+                    </ActionButton>
+                    {!readOnly && (
+                      <>
+                        <Divider className={'my-1.5 bg-line-on-toolbar'} orientation={'vertical'} flexItem={true} />
+                        <ActionButton onClick={onDelete} tooltip={t('button.delete')}>
+                          <DeleteIcon />
+                        </ActionButton>
+                      </>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div ref={emptyRef} className={'flex w-full select-none items-center gap-4 text-text-secondary'}>
+              <GoogleIcon className={'h-6 w-6 flex-none'} />
+              {t('document.plugins.googleDrive.worksWithLinksOfGoogleDrive', {
+                defaultValue: 'Embed a Google Drive link',
+              })}
+            </div>
+          )}
+        </div>
+        <div ref={ref} className={'pointer-events-none absolute h-full w-full text-transparent caret-transparent'}>
+          {children}
+        </div>
+      </div>
+    );
+  })
+);
+
+GoogleDriveBlock.displayName = 'GoogleDriveBlock';
+
+export default GoogleDriveBlock;
diff --git a/src/components/editor/components/blocks/google-drive/__tests__/google-drive-utils.test.ts b/src/components/editor/components/blocks/google-drive/__tests__/google-drive-utils.test.ts
new file mode 100644
index 000000000..e42a502cf
--- /dev/null
+++ b/src/components/editor/components/blocks/google-drive/__tests__/google-drive-utils.test.ts
@@ -0,0 +1,154 @@
+/// <reference types="jest" />
+import { buildGoogleDriveEmbeddedUrl, isGoogleDriveUrl, resolveGoogleDriveName } from '../google-drive-utils';
+
+describe('isGoogleDriveUrl', () => {
+  it('accepts supported Google hosts', () => {
+    expect(isGoogleDriveUrl('https://drive.google.com/file/d/abc123/view')).toBe(true);
+    expect(isGoogleDriveUrl('https://docs.google.com/document/d/abc123/edit')).toBe(true);
+    expect(isGoogleDriveUrl('https://docs.google.com/spreadsheets/d/abc123/edit')).toBe(true);
+    expect(isGoogleDriveUrl('https://docs.google.com/presentation/d/abc123/edit')).toBe(true);
+    expect(isGoogleDriveUrl('https://docs.google.com/forms/d/abc123/viewform')).toBe(true);
+  });
+
+  it('accepts Drive URLs with file ids in query parameters', () => {
+    expect(isGoogleDriveUrl('https://drive.google.com/open?id=abc123')).toBe(true);
+    expect(isGoogleDriveUrl('https://drive.google.com/uc?id=abc123')).toBe(true);
+  });
+
+  it('rejects look-alike hosts (regression: open-redirect via endsWith)', () => {
+    expect(isGoogleDriveUrl('https://evilgoogle.com/file/d/abc123/view')).toBe(false);
+    expect(isGoogleDriveUrl('https://notgoogle.com/file/d/abc123/view')).toBe(false);
+    expect(isGoogleDriveUrl('https://fake-drive.google.com.attacker.com/file/d/abc123')).toBe(false);
+    expect(isGoogleDriveUrl('https://drive.google.com.attacker.com/file/d/abc123')).toBe(false);
+  });
+
+  it('rejects unrelated hosts', () => {
+    expect(isGoogleDriveUrl('https://example.com/file/d/abc123')).toBe(false);
+    expect(isGoogleDriveUrl('https://dropbox.com/s/abc123/file')).toBe(false);
+  });
+
+  it('rejects supported host with unsupported path', () => {
+    expect(isGoogleDriveUrl('https://drive.google.com/about')).toBe(false);
+    expect(isGoogleDriveUrl('https://docs.google.com/random/path')).toBe(false);
+  });
+
+  it('accepts bare-domain inputs by normalizing via processUrl', () => {
+    expect(isGoogleDriveUrl('drive.google.com/file/d/abc123/view')).toBe(true);
+    expect(isGoogleDriveUrl('docs.google.com/document/d/abc123')).toBe(true);
+  });
+
+  it('returns false for malformed inputs', () => {
+    expect(isGoogleDriveUrl('not a url')).toBe(false);
+    expect(isGoogleDriveUrl('')).toBe(false);
+  });
+});
+
+describe('buildGoogleDriveEmbeddedUrl', () => {
+  it('builds Drive file preview URL', () => {
+    expect(buildGoogleDriveEmbeddedUrl('https://drive.google.com/file/d/abc123/view')).toBe(
+      'https://drive.google.com/file/d/abc123/preview'
+    );
+  });
+
+  it('builds Drive folder embed URL', () => {
+    expect(buildGoogleDriveEmbeddedUrl('https://drive.google.com/drive/folders/folder123')).toBe(
+      'https://drive.google.com/embeddedfolderview?id=folder123#grid'
+    );
+  });
+
+  it('builds Drive file preview URL from query id links', () => {
+    expect(buildGoogleDriveEmbeddedUrl('https://drive.google.com/open?id=abc123')).toBe(
+      'https://drive.google.com/file/d/abc123/preview'
+    );
+    expect(buildGoogleDriveEmbeddedUrl('https://drive.google.com/uc?id=abc123')).toBe(
+      'https://drive.google.com/file/d/abc123/preview'
+    );
+  });
+
+  it('builds Docs document preview URL', () => {
+    expect(buildGoogleDriveEmbeddedUrl('https://docs.google.com/document/d/doc123/edit')).toBe(
+      'https://docs.google.com/document/d/doc123/preview'
+    );
+  });
+
+  it('builds Docs spreadsheets preview URL', () => {
+    expect(buildGoogleDriveEmbeddedUrl('https://docs.google.com/spreadsheets/d/sheet123/edit')).toBe(
+      'https://docs.google.com/spreadsheets/d/sheet123/preview'
+    );
+  });
+
+  it('builds Docs presentation embed URL', () => {
+    expect(buildGoogleDriveEmbeddedUrl('https://docs.google.com/presentation/d/slide123/edit')).toBe(
+      'https://docs.google.com/presentation/d/slide123/embed?start=false&loop=false'
+    );
+  });
+
+  it('builds Docs forms viewform URL using /d/e/ id resolution', () => {
+    expect(buildGoogleDriveEmbeddedUrl('https://docs.google.com/forms/d/e/form123/viewform')).toBe(
+      'https://docs.google.com/forms/d/e/form123/viewform?embedded=true'
+    );
+  });
+
+  describe('preserves resourcekey query parameter', () => {
+    it('on Drive file URL', () => {
+      expect(buildGoogleDriveEmbeddedUrl('https://drive.google.com/file/d/abc123/view?resourcekey=key-xyz')).toBe(
+        'https://drive.google.com/file/d/abc123/preview?resourcekey=key-xyz'
+      );
+    });
+
+    it('on Drive folder URL — placed before #grid fragment', () => {
+      const result = buildGoogleDriveEmbeddedUrl(
+        'https://drive.google.com/drive/folders/folder123?resourcekey=key-xyz'
+      );
+
+      expect(result).toBe('https://drive.google.com/embeddedfolderview?id=folder123&resourcekey=key-xyz#grid');
+      // Make absolutely sure the key is not after the fragment (would be ignored by browser)
+      expect(result.indexOf('resourcekey')).toBeLessThan(result.indexOf('#'));
+    });
+
+    it('on Docs document URL', () => {
+      expect(buildGoogleDriveEmbeddedUrl('https://docs.google.com/document/d/doc123/edit?resourcekey=key-xyz')).toBe(
+        'https://docs.google.com/document/d/doc123/preview?resourcekey=key-xyz'
+      );
+    });
+
+    it('on Docs presentation URL — merged with existing query string', () => {
+      expect(
+        buildGoogleDriveEmbeddedUrl('https://docs.google.com/presentation/d/slide123/edit?resourcekey=key-xyz')
+      ).toBe('https://docs.google.com/presentation/d/slide123/embed?start=false&loop=false&resourcekey=key-xyz');
+    });
+
+    it('url-encodes resourcekey values that contain special characters', () => {
+      const result = buildGoogleDriveEmbeddedUrl(
+        'https://drive.google.com/file/d/abc123/view?resourcekey=a+b%2Fc'
+      );
+
+      // The original raw value (decoded by URL parser) is "a b/c"; output must re-encode.
+      expect(result).toBe('https://drive.google.com/file/d/abc123/preview?resourcekey=a%20b%2Fc');
+    });
+  });
+
+  it('returns the original URL when no Drive id can be extracted', () => {
+    const input = 'https://drive.google.com/file/preview';
+
+    expect(buildGoogleDriveEmbeddedUrl(input)).toBe(input);
+  });
+
+  it('returns the raw input when URL parsing fails', () => {
+    expect(buildGoogleDriveEmbeddedUrl('not a url')).toBe('not a url');
+  });
+});
+
+describe('resolveGoogleDriveName', () => {
+  it('returns the resource id for file URLs', () => {
+    expect(resolveGoogleDriveName('https://drive.google.com/file/d/abc123/view')).toBe('abc123');
+  });
+
+  it('returns the folder id for folder URLs', () => {
+    expect(resolveGoogleDriveName('https://drive.google.com/drive/folders/folder123')).toBe('folder123');
+  });
+
+  it('falls back to the raw input for malformed URLs', () => {
+    expect(resolveGoogleDriveName('not a url')).toBe('not a url');
+  });
+});
diff --git a/src/components/editor/components/blocks/google-drive/google-drive-utils.ts b/src/components/editor/components/blocks/google-drive/google-drive-utils.ts
new file mode 100644
index 000000000..82ee84166
--- /dev/null
+++ b/src/components/editor/components/blocks/google-drive/google-drive-utils.ts
@@ -0,0 +1,141 @@
+import { processUrl } from '@/utils/url';
+
+const supportedGoogleDriveHosts = [
+  'drive.google.com',
+  'docs.google.com',
+  'sheets.google.com',
+  'slides.google.com',
+  'forms.google.com',
+];
+
+function parseGoogleDriveUrl(rawUrl: string) {
+  const processedUrl = processUrl(rawUrl) || rawUrl;
+
+  try {
+    return new URL(processedUrl);
+  } catch {
+    return null;
+  }
+}
+
+export function isGoogleDriveUrl(rawUrl: string) {
+  const url = parseGoogleDriveUrl(rawUrl);
+
+  if (!url) return false;
+
+  const host = url.hostname.toLowerCase();
+  const matchesHost = supportedGoogleDriveHosts.some((supportedHost) => host === supportedHost);
+
+  if (!matchesHost) return false;
+
+  const path = url.pathname.toLowerCase();
+  const hasDriveQueryId = host === 'drive.google.com' && Boolean(url.searchParams.get('id'));
+
+  return (
+    path.includes('/document/') ||
+    path.includes('/spreadsheets/') ||
+    path.includes('/presentation/') ||
+    path.includes('/forms/') ||
+    path.includes('/file/') ||
+    path.includes('/folders/') ||
+    hasDriveQueryId
+  );
+}
+
+function extractGoogleDriveId(url: URL, segments: string[]) {
+  for (let i = 0; i < segments.length; i += 1) {
+    const current = segments[i];
+
+    if (current === 'd' && i + 1 < segments.length) {
+      const next = segments[i + 1];
+
+      if (next === 'e' && i + 2 < segments.length) {
+        return segments[i + 2];
+      }
+
+      return next;
+    }
+
+    if (current === 'folders' && i + 1 < segments.length) {
+      return segments[i + 1];
+    }
+  }
+
+  return url.searchParams.get('id') || url.searchParams.get('mid') || url.searchParams.get('resourcekey');
+}
+
+export function resolveGoogleDriveName(rawUrl: string) {
+  const url = parseGoogleDriveUrl(rawUrl);
+
+  if (!url) return rawUrl;
+
+  const segments = url.pathname.split('/').filter(Boolean);
+
+  if (!segments.length) return url.host;
+
+  const ignored = new Set(['edit', 'view', 'preview']);
+  let candidate: string | undefined;
+
+  for (let i = 0; i < segments.length; i += 1) {
+    const segment = segments[i];
+
+    if ((segment === 'd' || segment === 'folders') && i + 1 < segments.length && !ignored.has(segments[i + 1])) {
+      candidate = segments[i + 1];
+      break;
+    }
+  }
+
+  return candidate || [...segments].reverse().find((segment) => !ignored.has(segment)) || url.host;
+}
+
+export function buildGoogleDriveEmbeddedUrl(rawUrl: string) {
+  const url = parseGoogleDriveUrl(rawUrl);
+
+  if (!url) return rawUrl;
+
+  const host = url.hostname.toLowerCase();
+  const segments = url.pathname.split('/').filter(Boolean);
+  const id = extractGoogleDriveId(url, segments);
+
+  if (!id) return processUrl(rawUrl) || rawUrl;
+
+  const base = `${url.protocol}//${url.host}`;
+  const resourcekey = url.searchParams.get('resourcekey');
+  const resourceKeyQuery = resourcekey ? `resourcekey=${encodeURIComponent(resourcekey)}` : '';
+  const appendResourceKey = (target: string) => {
+    if (!resourceKeyQuery) return target;
+
+    const hashIndex = target.indexOf('#');
+    const head = hashIndex === -1 ? target : target.slice(0, hashIndex);
+    const tail = hashIndex === -1 ? '' : target.slice(hashIndex);
+    const separator = head.includes('?') ? '&' : '?';
+
+    return `${head}${separator}${resourceKeyQuery}${tail}`;
+  };
+
+  if (host === 'docs.google.com') {
+    const type = segments[0] || '';
+
+    switch (type) {
+      case 'document':
+      case 'spreadsheets':
+        return appendResourceKey(`${base}/${type}/d/${id}/preview`);
+      case 'presentation':
+        return appendResourceKey(`${base}/presentation/d/${id}/embed?start=false&loop=false`);
+      case 'forms':
+        return appendResourceKey(`${base}/forms/d/e/${id}/viewform?embedded=true`);
+      default:
+        return appendResourceKey(`https://drive.google.com/file/d/${id}/preview`);
+    }
+  }
+
+  if (host === 'drive.google.com') {
+    if (segments.includes('folders')) {
+      return appendResourceKey(`https://drive.google.com/embeddedfolderview?id=${id}#grid`);
+    }
+
+    return appendResourceKey(`https://drive.google.com/file/d/${id}/preview`);
+  }
+
+  return processUrl(rawUrl) || rawUrl;
+}
diff --git a/src/components/editor/components/blocks/google-drive/index.ts b/src/components/editor/components/blocks/google-drive/index.ts
new file mode 100644
index 000000000..5887ebaa7
--- /dev/null
+++ b/src/components/editor/components/blocks/google-drive/index.ts
@@ -0,0 +1,2 @@
+export * from './GoogleDriveBlock';
+export * from './google-drive-utils';
diff --git a/src/components/editor/components/blocks/link-preview/LinkPreview.tsx b/src/components/editor/components/blocks/link-preview/LinkPreview.tsx
index 4c14e6732..aa96e4b0c 100644
--- a/src/components/editor/components/blocks/link-preview/LinkPreview.tsx
+++ b/src/components/editor/components/blocks/link-preview/LinkPreview.tsx
@@ -1,10 +1,15 @@
 import axios from 'axios';
-import { forwardRef, memo, useEffect, useState } from 'react';
-import { useReadOnly } from 'slate-react';
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
+import { Element } from 'slate';
+import { useReadOnly, useSlateStatic } from 'slate-react';
 
-import { LinkPreviewType } from '@/application/types';
+import { YjsEditor } from '@/application/slate-yjs';
+import { BlockType, LinkPreviewType } from '@/application/types';
+import { ReactComponent as LinkIcon } from '@/assets/icons/link.svg';
 import emptyImageSrc from '@/assets/images/empty.png';
+import { usePopoverContext } from '@/components/editor/components/block-popover/BlockPopoverContext';
 import { EditorElementProps, LinkPreviewNode } from '@/components/editor/editor.type';
+import { openUrl } from '@/utils/url';
 
 export const LinkPreview = memo(
   forwardRef<HTMLDivElement, EditorElementProps<LinkPreviewNode>>(({ node, children, ...attributes }, ref) => {
@@ -17,6 +22,10 @@ export const LinkPreview = memo(
     const url = node.data.url;
     const previewType = node.data.preview_type ?? LinkPreviewType.Bookmark;
     const isEmbed = previewType === LinkPreviewType.Embed;
+    const editor = useSlateStatic() as YjsEditor;
+    const readOnly = useReadOnly() || editor.isElementReadOnly(node as unknown as Element);
+    const emptyRef = useRef<HTMLDivElement>(null);
+    const { openPopover } = usePopoverContext();
 
     useEffect(() => {
       if (!url) return;
@@ -40,14 +49,22 @@ export const LinkPreview = memo(
         }
       })();
     }, [url]);
-    const readOnly = useReadOnly();
     const imageUrl = data?.image?.url;
+    const handleClick = useCallback(() => {
+      if (!url) {
+        if (!readOnly && emptyRef.current) {
+          openPopover(node.blockId, BlockType.LinkPreview, emptyRef.current);
+        }
+
+        return;
+      }
+
+      void openUrl(url, '_blank');
+    }, [node.blockId, openPopover, readOnly, url]);
 
     return (
       <div
-        onClick={() => {
-          window.open(url, '_blank');
-        }}
+        onClick={handleClick}
         contentEditable={readOnly ? false : undefined}
         {...attributes}
         ref={ref}
@@ -59,7 +76,12 @@ export const LinkPreview = memo(
           }`}
           contentEditable={false}
         >
-          {notFound ? (
+          {!url ? (
+            <div ref={emptyRef} className={'flex w-full min-w-0 items-center gap-3 text-text-secondary'}>
+              <LinkIcon className={'h-6 w-6 flex-none'} />
+              <div className={'truncate'}>{isEmbed ? 'Paste a link to embed' : 'Paste a link to create a bookmark'}</div>
+            </div>
+          ) : notFound ? (
             <div className={`link-preview-not-found flex w-full min-w-0 ${isEmbed ? 'flex-col' : 'items-center'}`}>
               {!isEmbed && (
                 <div
diff --git a/src/components/editor/components/element/Element.tsx b/src/components/editor/components/element/Element.tsx
index 7b41f1ba8..dddb54ce9 100644
--- a/src/components/editor/components/element/Element.tsx
+++ b/src/components/editor/components/element/Element.tsx
@@ -7,7 +7,12 @@ import { ReactEditor, RenderElementProps, useSelected, useSlateStatic } from 'sl
 import { YjsEditor } from '@/application/slate-yjs';
 import { CONTAINER_BLOCK_TYPES, SOFT_BREAK_TYPES } from '@/application/slate-yjs/command/const';
 import { BlockData, BlockType, ColumnNodeData, YjsEditorKey } from '@/application/types';
-import { AIMeetingBlock, AIMeetingSection, AIMeetingSpeakerBlock } from '@/components/editor/components/blocks/ai-meeting';
+import {
+  AIMeetingBlock,
+  AIMeetingSection,
+  AIMeetingSpeakerBlock,
+} from '@/components/editor/components/blocks/ai-meeting';
+import { AudioBlock } from '@/components/editor/components/blocks/audio';
 import { BulletedList } from '@/components/editor/components/blocks/bulleted-list';
 import { Callout } from '@/components/editor/components/blocks/callout';
 import { CodeBlock } from '@/components/editor/components/blocks/code';
@@ -16,6 +21,7 @@ import { DatabaseBlock } from '@/components/editor/components/blocks/database';
 import { DividerNode } from '@/components/editor/components/blocks/divider';
 import { FileBlock } from '@/components/editor/components/blocks/file';
 import { GalleryBlock } from '@/components/editor/components/blocks/gallery';
+import { GoogleDriveBlock } from '@/components/editor/components/blocks/google-drive';
 import { Heading } from '@/components/editor/components/blocks/heading';
 import { ImageBlock } from '@/components/editor/components/blocks/image';
 import { LinkPreview } from '@/components/editor/components/blocks/link-preview';
@@ -34,6 +40,7 @@ import { Text } from '@/components/editor/components/blocks/text';
 import { VideoBlock } from '@/components/editor/components/blocks/video';
 import { handleBlockDrop } from '@/components/editor/components/drag-drop/handleBlockDrop';
 import { useBlockDrop } from '@/components/editor/components/drag-drop/useBlockDrop';
+import { usePopoverMountSignal } from '@/components/editor/components/block-popover/BlockPopoverContext';
 import { BlockNotFound } from '@/components/editor/components/element/BlockNotFound';
 import { EditorElementProps, TextNode } from '@/components/editor/editor.type';
 import { useEditorContext, useEditorLocalState } from '@/components/editor/EditorContext';
@@ -51,28 +58,28 @@ export const Element = ({
 }: RenderElementProps & {
   element: EditorElementProps['node'];
 }) => {
-  const {
-    jumpBlockId,
-    onJumpedBlockId,
-    readOnly,
-  } = useEditorContext();
+  const { jumpBlockId, onJumpedBlockId, readOnly } = useEditorContext();
   const { selectedBlockIds } = useEditorLocalState();
 
   const { blockId, type } = node;
+
+  usePopoverMountSignal(blockId);
   const isSelected = useSelected();
   const selected = useMemo(() => {
     if (blockId && selectedBlockIds?.includes(blockId)) {
       return true;
     }
 
-    if ([
-      ...CONTAINER_BLOCK_TYPES,
-      ...SOFT_BREAK_TYPES,
-      BlockType.HeadingBlock,
-      BlockType.TableBlock,
-      BlockType.TableCell,
-      BlockType.SimpleTableBlock,
-    ].includes(type as BlockType)) {
+    if (
+      [
+        ...CONTAINER_BLOCK_TYPES,
+        ...SOFT_BREAK_TYPES,
+        BlockType.HeadingBlock,
+        BlockType.TableBlock,
+        BlockType.TableCell,
+        BlockType.SimpleTableBlock,
+      ].includes(type as BlockType)
+    ) {
       return false;
     }
 
@@ -92,14 +99,17 @@ export const Element = ({
     return ![BlockType.SimpleTableRowBlock, BlockType.SimpleTableCellBlock].includes(blockType);
   }, [node.type, readOnly, type]);
 
-  const scrollAndHighlight = useCallback(async (element: HTMLElement) => {
-    element.scrollIntoView({ block: 'start' });
-    element.className += ' highlight-block';
-    highlightTimeoutRef.current = setTimeout(() => {
-      element.className = element.className.replace('highlight-block', '');
-    }, 5000);
-    onJumpedBlockId?.();
-  }, [onJumpedBlockId]);
+  const scrollAndHighlight = useCallback(
+    async (element: HTMLElement) => {
+      element.scrollIntoView({ block: 'start' });
+      element.className += ' highlight-block';
+      highlightTimeoutRef.current = setTimeout(() => {
+        element.className = element.className.replace('highlight-block', '');
+      }, 5000);
+      onJumpedBlockId?.();
+    },
+    [onJumpedBlockId]
+  );
 
   useLayoutEffect(() => {
     if (!jumpBlockId || node.blockId !== jumpBlockId) {
@@ -153,7 +163,7 @@ export const Element = ({
   );
 
   const { isDraggingOver, dropEdge } = useBlockDrop({
-    blockId: allowBlockDrop ? (blockId ?? undefined) : undefined,
+    blockId: allowBlockDrop ? blockId ?? undefined : undefined,
     element: allowBlockDrop ? blockElement : null,
     onDrop: onDropBlock,
   });
@@ -212,6 +222,10 @@ export const Element = ({
         return SimpleTableCell;
       case BlockType.VideoBlock:
         return VideoBlock;
+      case BlockType.AudioBlock:
+        return AudioBlock;
+      case BlockType.GoogleDriveBlock:
+        return GoogleDriveBlock;
       case BlockType.ColumnsBlock:
         return Columns;
       case BlockType.ColumnBlock:
@@ -288,9 +302,7 @@ export const Element = ({
 
   const fallbackRender = useMemo(() => {
     return (props: FallbackProps) => {
-      return (
-        <ElementFallbackRender {...props} description={JSON.stringify(node)} />
-      );
+      return <ElementFallbackRender {...props} description={JSON.stringify(node)} />;
     };
   }, [node]);
 
@@ -304,10 +316,7 @@ export const Element = ({
 
   if ([BlockType.SimpleTableRowBlock, BlockType.SimpleTableCellBlock].includes(node.type as BlockType)) {
     return (
-      <Component
-        node={node}
-        {...attributes}
-      >
+      <Component node={node} {...attributes}>
         {children}
       </Component>
     );
@@ -321,19 +330,11 @@ export const Element = ({
         className={`${className} ${allowBlockDrop && isDraggingOver ? 'block-drop-target' : ''}`}
         style={blockStyle}
       >
-        {allowBlockDrop && isDraggingOver && dropEdge === 'top' && (
-          <DropIndicator edge="top" gap="8px" />
-        )}
-        <Component
-          style={style}
-          className={`flex w-full flex-col`}
-          node={node}
-        >
+        {allowBlockDrop && isDraggingOver && dropEdge === 'top' && <DropIndicator edge='top' gap='8px' />}
+        <Component style={style} className={`flex w-full flex-col`} node={node}>
           {children}
         </Component>
-        {allowBlockDrop && isDraggingOver && dropEdge === 'bottom' && (
-          <DropIndicator edge="bottom" gap="8px" />
-        )}
+        {allowBlockDrop && isDraggingOver && dropEdge === 'bottom' && <DropIndicator edge='bottom' gap='8px' />}
       </div>
     </ErrorBoundary>
   );
diff --git a/src/components/editor/components/panels/slash-panel/SlashPanel.tsx b/src/components/editor/components/panels/slash-panel/SlashPanel.tsx
index e96d1c762..803d4c586 100644
--- a/src/components/editor/components/panels/slash-panel/SlashPanel.tsx
+++ b/src/components/editor/components/panels/slash-panel/SlashPanel.tsx
@@ -16,12 +16,19 @@ import {
 import { getBlockIndex, getParent } from '@/application/slate-yjs/utils/yjs';
 import {
   AlignType,
+  AudioBlockData,
+  AudioUrlType,
   BlockData,
   BlockType,
   CalloutBlockData,
   CodeBlockData,
+  GalleryBlockData,
+  GalleryLayout,
+  GoogleDriveBlockData,
   HeadingBlockData,
   ImageBlockData,
+  LinkPreviewBlockData,
+  LinkPreviewType,
   SubpageNodeData,
   ToggleListBlockData,
   VideoBlockData,
@@ -33,6 +40,7 @@ import {
 import { ReactComponent as EmojiIcon } from '@/assets/icons/add_emoji.svg';
 import { ReactComponent as AddPageIcon } from '@/assets/icons/add_to_page.svg';
 import { ReactComponent as AskAIIcon } from '@/assets/icons/ai.svg';
+import { ReactComponent as AudioIcon } from '@/assets/icons/audio.svg';
 import { ReactComponent as BoardIcon } from '@/assets/icons/board.svg';
 import { ReactComponent as BulletedListIcon } from '@/assets/icons/bulleted_list.svg';
 import { ReactComponent as CalendarIcon } from '@/assets/icons/calendar.svg';
@@ -44,6 +52,7 @@ import { ReactComponent as DividerIcon } from '@/assets/icons/divider.svg';
 import { ReactComponent as OutlineIcon } from '@/assets/icons/doc.svg';
 import { ReactComponent as FileIcon } from '@/assets/icons/file.svg';
 import { ReactComponent as FormulaIcon } from '@/assets/icons/formula.svg';
+import { ReactComponent as GalleryIcon } from '@/assets/icons/gallery.svg';
 import { ReactComponent as GridIcon } from '@/assets/icons/grid.svg';
 import { ReactComponent as SimpleTableIcon } from '@/assets/icons/table.svg';
 import { ReactComponent as Heading1Icon } from '@/assets/icons/h1.svg';
@@ -51,6 +60,7 @@ import { ReactComponent as Heading2Icon } from '@/assets/icons/h2.svg';
 import { ReactComponent as Heading3Icon } from '@/assets/icons/h3.svg';
 import { ReactComponent as ImageIcon } from '@/assets/icons/image.svg';
 import { ReactComponent as CodeIcon } from '@/assets/icons/inline_code.svg';
+import { ReactComponent as LinkIcon } from '@/assets/icons/link.svg';
 import { ReactComponent as NumberedListIcon } from '@/assets/icons/numbered_list.svg';
 import { ReactComponent as DocumentIcon } from '@/assets/icons/page.svg';
 import { ReactComponent as PDFIcon } from '@/assets/icons/pdf.svg';
@@ -63,6 +73,7 @@ import { ReactComponent as ToggleHeading2Icon } from '@/assets/icons/toggle_h2.s
 import { ReactComponent as ToggleHeading3Icon } from '@/assets/icons/toggle_h3.svg';
 import { ReactComponent as ChevronRight, ReactComponent as ToggleListIcon } from '@/assets/icons/toggle_list.svg';
 import { ReactComponent as VideoIcon } from '@/assets/icons/video.svg';
+import { ReactComponent as GoogleIcon } from '@/assets/login/google.svg';
 import { notify } from '@/components/_shared/notify';
 import { calculateOptimalOrigins, Popover } from '@/components/_shared/popover';
 import PageIcon from '@/components/_shared/view-icon/PageIcon';
@@ -402,24 +413,20 @@ export function SlashPanel({
       }
 
       if (
+        newBlockId &&
         [
           BlockType.FileBlock,
+          BlockType.AudioBlock,
           BlockType.ImageBlock,
+          BlockType.LinkPreview,
+          BlockType.GalleryBlock,
+          BlockType.GoogleDriveBlock,
           BlockType.EquationBlock,
           BlockType.VideoBlock,
           BlockType.PDFBlock,
         ].includes(type)
       ) {
-        setTimeout(() => {
-          if (!newBlockId) return;
-          const entry = findSlateEntryByBlockId(editor, newBlockId);
-
-          if (!entry) return;
-          const [node] = entry;
-          const dom = ReactEditor.toDOMNode(editor, node);
-
-          openPopover(newBlockId, type, dom);
-        }, 50);
+        openPopover(newBlockId, type);
       }
     },
     [editor, openPopover]
@@ -815,6 +822,19 @@ export function SlashPanel({
           } as ImageBlockData);
         },
       },
+      {
+        label: t('document.slashMenu.name.photoGallery', { defaultValue: 'Photo gallery' }),
+        key: 'photoGallery',
+        icon: <GalleryIcon />,
+        group: SlashMenuGroupKey.Media,
+        keywords: ['photo', 'gallery', 'image gallery', 'photo gallery', 'browser'],
+        onClick: () => {
+          turnInto(BlockType.GalleryBlock, {
+            images: [],
+            layout: GalleryLayout.Carousel,
+          } as GalleryBlockData);
+        },
+      },
       {
         label: t('embedVideo'),
         key: 'video',
@@ -828,6 +848,19 @@ export function SlashPanel({
           } as VideoBlockData);
         },
       },
+      {
+        label: t('document.slashMenu.name.audio', { defaultValue: 'Audio' }),
+        key: 'audio',
+        icon: <AudioIcon />,
+        group: SlashMenuGroupKey.Media,
+        keywords: ['audio', 'music', 'sound', 'media'],
+        onClick: () => {
+          turnInto(BlockType.AudioBlock, {
+            url: '',
+            url_type: AudioUrlType.Network,
+          } as AudioBlockData);
+        },
+      },
       {
         label: t('document.slashMenu.name.pdf', { defaultValue: 'PDF' }),
         key: 'pdf',
@@ -838,6 +871,34 @@ export function SlashPanel({
           turnInto(BlockType.PDFBlock, {});
         },
       },
+      {
+        label: t('document.slashMenu.name.googleDrive', { defaultValue: 'Google Drive' }),
+        key: 'googleDrive',
+        icon: <GoogleIcon />,
+        group: SlashMenuGroupKey.Media,
+        keywords: ['drive', 'google drive', 'google', 'docs', 'sheets', 'slides'],
+        onClick: () => {
+          turnInto(BlockType.GoogleDriveBlock, {
+            url: '',
+            uploaded_at: Date.now(),
+            width_factor: 1,
+            height_factor: 1,
+          } as GoogleDriveBlockData);
+        },
+      },
+      {
+        label: t('document.slashMenu.name.bookmark', { defaultValue: 'Web bookmark' }),
+        key: 'bookmark',
+        icon: <LinkIcon />,
+        group: SlashMenuGroupKey.Media,
+        keywords: ['bookmark', 'web bookmark', 'link card', 'url card', 'link', 'bm'],
+        onClick: () => {
+          turnInto(BlockType.LinkPreview, {
+            url: '',
+            preview_type: LinkPreviewType.Bookmark,
+          } as LinkPreviewBlockData);
+        },
+      },
       {
         label: t('document.slashMenu.name.bulletedList'),
         key: 'bulletedList',
diff --git a/src/components/editor/editor.type.ts b/src/components/editor/editor.type.ts
index a741beacb..1875e2a01 100644
--- a/src/components/editor/editor.type.ts
+++ b/src/components/editor/editor.type.ts
@@ -28,6 +28,8 @@ import {
   SimpleTableData,
   VideoBlockData,
   ColumnNodeData,
+  AudioBlockData,
+  GoogleDriveBlockData,
 } from '@/application/types';
 
 export interface BlockNode extends Element {
@@ -130,6 +132,18 @@ export interface VideoBlockNode extends BlockNode {
   data: VideoBlockData;
 }
 
+export interface AudioBlockNode extends BlockNode {
+  type: BlockType.AudioBlock;
+  blockId: string;
+  data: AudioBlockData;
+}
+
+export interface GoogleDriveBlockNode extends BlockNode {
+  type: BlockType.GoogleDriveBlock;
+  blockId: string;
+  data: GoogleDriveBlockData;
+}
+
 export interface GalleryBlockNode extends BlockNode {
   type: BlockType.GalleryBlock;
   blockId: string;