diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6eeacf2aa..708a31715 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.59.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.58.0...v0.59.0)
+
+- feat(tiptap): allow inserting of embed code using a modal [`#1658`](https://github.com/isomerpages/isomercms-frontend/pull/1658)
+- feat(tiptap): rm redundant logos [`#1679`](https://github.com/isomerpages/isomercms-frontend/pull/1679)
+- Fix/is 689 reuse image/album tiles [`#1678`](https://github.com/isomerpages/isomercms-frontend/pull/1678)
+- Fix/is724-apply-styles [`#1677`](https://github.com/isomerpages/isomercms-frontend/pull/1677)
+- fix(editor): refactor to use `tooltip`  [`#1669`](https://github.com/isomerpages/isomercms-frontend/pull/1669)
+- release/0.58.0 [`#1675`](https://github.com/isomerpages/isomercms-frontend/pull/1675)
+
 #### [v0.58.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.57.0...v0.58.0)
 
+> 14 November 2023
+
 - fix(markdown): update styling to remove overflow [`#1671`](https://github.com/isomerpages/isomercms-frontend/pull/1671)
 - feat/addReportingBUtton [`#1674`](https://github.com/isomerpages/isomercms-frontend/pull/1674)
 - feat(media): add announcements and feature tour for media enhancements [`#1632`](https://github.com/isomerpages/isomercms-frontend/pull/1632)
diff --git a/package-lock.json b/package-lock.json
index 9d4768f6c..a28ded033 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.58.0",
+  "version": "0.59.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "isomercms-frontend",
-      "version": "0.58.0",
+      "version": "0.59.0",
       "hasInstallScript": true,
       "dependencies": {
         "@braintree/sanitize-url": "^6.0.1",
diff --git a/package.json b/package.json
index 046dd4543..e37f58c10 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.58.0",
+  "version": "0.59.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"
diff --git a/src/components/EditorEmbedModal/EditorEmbedModal.stories.tsx b/src/components/EditorEmbedModal/EditorEmbedModal.stories.tsx
new file mode 100644
index 000000000..a93e34b6d
--- /dev/null
+++ b/src/components/EditorEmbedModal/EditorEmbedModal.stories.tsx
@@ -0,0 +1,41 @@
+import { useDisclosure } from "@chakra-ui/react"
+import { Button } from "@opengovsg/design-system-react"
+import type { Meta, StoryFn } from "@storybook/react"
+
+import { useSuccessToast } from "utils"
+
+import { EditorEmbedModal } from "./EditorEmbedModal"
+
+const editorEmbedModalMeta = {
+  title: "Components/Editor/Embed Modal",
+  component: EditorEmbedModal,
+} as Meta<typeof EditorEmbedModal>
+
+const editorEmbedModalTemplate: StoryFn<typeof EditorEmbedModal> = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure({ defaultIsOpen: true })
+  const successToast = useSuccessToast()
+  const onProceed = () => {
+    successToast({
+      id: "storybook-editor-embed-success",
+      description: "STORYBOOK: Embed has been successfully added",
+    })
+    onClose()
+  }
+
+  return (
+    <>
+      <Button onClick={onOpen}>Open editor embed modal</Button>
+      <EditorEmbedModal
+        isOpen={isOpen}
+        onClose={onClose}
+        onProceed={onProceed}
+        cursorValue=""
+      />
+    </>
+  )
+}
+
+export const Default = editorEmbedModalTemplate.bind({})
+Default.args = {}
+
+export default editorEmbedModalMeta
diff --git a/src/components/EditorEmbedModal/EditorEmbedModal.tsx b/src/components/EditorEmbedModal/EditorEmbedModal.tsx
new file mode 100644
index 000000000..fcfe809ea
--- /dev/null
+++ b/src/components/EditorEmbedModal/EditorEmbedModal.tsx
@@ -0,0 +1,185 @@
+import {
+  FormControl,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react"
+import { yupResolver } from "@hookform/resolvers/yup"
+import {
+  Button,
+  FormErrorMessage,
+  FormLabel,
+  Link,
+  ModalCloseButton,
+} from "@opengovsg/design-system-react"
+import * as Cheerio from "cheerio"
+import { useEffect } from "react"
+import { FormProvider, useForm } from "react-hook-form"
+import * as Yup from "yup"
+
+import { useCspHook } from "hooks/settingsHooks"
+
+import { isEmbedCodeValid } from "utils/allowedHTML"
+
+import { EditorEmbedContents } from "types/editPage"
+
+interface EditorEmbedModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onProceed: (embedCode: EditorEmbedContents) => void
+  cursorValue: string
+}
+
+export const EditorEmbedModal = ({
+  isOpen,
+  onClose,
+  onProceed,
+  cursorValue,
+}: EditorEmbedModalProps): JSX.Element => {
+  const { data: csp } = useCspHook()
+
+  const handleSubmit = (embedCode: EditorEmbedContents) => {
+    const { value } = embedCode
+    const $ = Cheerio.load(value)
+
+    if ($("blockquote").hasClass("instagram-media")) {
+      const postUrl = $(".instagram-media").attr("data-instgrm-permalink")
+      const url = document.createElement("a")
+      url.href = postUrl || ""
+      const code = `<iframe src="https://${url.host}${url.pathname}embed/" frameborder="0" allowfullscreen="true" width="320" height="440"></iframe>`
+      onProceed({ value: code })
+    } else if ($('iframe[src^="https://form.gov.sg"]').length > 0) {
+      // We only want to keep the <iframe> part, the rest is filled in by Tiptap
+      onProceed({ value: $('iframe[src^="https://form.gov.sg"]').toString() })
+    } else {
+      onProceed(embedCode)
+    }
+  }
+
+  const methods = useForm<EditorEmbedContents>({
+    mode: "onTouched",
+    resolver: yupResolver(
+      Yup.object().shape({
+        value: Yup.string()
+          .required(
+            "Content to embed cannot be empty. Please enter valid HTML code."
+          )
+          .matches(
+            // Blockquote is to allow for Instagram embeds
+            /^(<iframe |<blockquote |<div)(.*)$/s,
+            "Please enter a valid embed code"
+          )
+          .test({
+            name: "isEmbedCodeValid",
+            message:
+              "This content is not supported yet, or there is unauthorised Javascript in your code. Ensure that you have valid HTML code and try again.",
+            test: (value) => isEmbedCodeValid(csp, value),
+          }),
+      })
+    ),
+    defaultValues: {
+      value: "",
+    },
+  })
+
+  useEffect(() => {
+    if (isOpen) {
+      methods.setValue(
+        "value",
+        cursorValue
+          .replace('<div class="iframe-wrapper">', "")
+          // Remove the closing div tag
+          .slice(0, -6)
+      )
+    } else {
+      methods.reset()
+    }
+  }, [cursorValue, isOpen, methods])
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit(handleSubmit)}>
+          <ModalContent>
+            <ModalCloseButton />
+            <ModalHeader>
+              {cursorValue === ""
+                ? "Embed new content"
+                : "Edit embedded content"}
+            </ModalHeader>
+
+            <ModalBody>
+              <Text textStyle="body-1" mt="1rem">
+                You can embed selected external content on your page.{" "}
+                <Link
+                  target="_blank"
+                  href="https://guide.isomer.gov.sg/guide/integration#embedding"
+                >
+                  Click here
+                </Link>{" "}
+                to learn more about embedding content onto your Isomer site.
+              </Text>
+              <FormControl
+                isRequired
+                isInvalid={!!methods.formState.errors.value}
+              >
+                <FormLabel textStyle="subhead-1" mt="1.5rem" mb="0.5rem">
+                  Code to embed
+                </FormLabel>
+
+                <Textarea
+                  placeholder="Paste your code in here. It might start with a <iframe> or <blockquote> tag."
+                  mt={0}
+                  fontFamily="monospace"
+                  size="md"
+                  height="9rem"
+                  color="green.400"
+                  {...methods.register("value")}
+                />
+
+                {methods.formState.errors.value ? (
+                  <FormErrorMessage mb={0}>
+                    {methods.formState.errors.value.message}
+                  </FormErrorMessage>
+                ) : (
+                  <Text textStyle="body-2" mt="0.5rem">
+                    Isomer does not support any unauthorised content that
+                    violates the Content Security Policy (CSP).
+                  </Text>
+                )}
+              </FormControl>
+            </ModalBody>
+
+            <ModalFooter mt="0.5rem">
+              <HStack w="100%" spacing={4} justifyContent="flex-end">
+                {cursorValue !== "" && (
+                  <Button
+                    variant="clear"
+                    colorScheme="neutral"
+                    onClick={() => {
+                      methods.reset()
+                      onClose()
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                )}
+                <Button type="submit" isDisabled={!methods.formState.isValid}>
+                  {cursorValue === "" ? "Add to page" : "Save"}
+                </Button>
+              </HStack>
+            </ModalFooter>
+          </ModalContent>
+        </form>
+      </FormProvider>
+    </Modal>
+  )
+}
diff --git a/src/components/EditorEmbedModal/index.ts b/src/components/EditorEmbedModal/index.ts
new file mode 100644
index 000000000..6f6f5a8f4
--- /dev/null
+++ b/src/components/EditorEmbedModal/index.ts
@@ -0,0 +1 @@
+export * from "./EditorEmbedModal"
diff --git a/src/components/ImagePreviewCard/ImagePreviewCard.tsx b/src/components/ImagePreviewCard/ImagePreviewCard.tsx
index bb8774356..b07e74d59 100644
--- a/src/components/ImagePreviewCard/ImagePreviewCard.tsx
+++ b/src/components/ImagePreviewCard/ImagePreviewCard.tsx
@@ -60,29 +60,29 @@ export const ImagePreviewCard = ({
   return (
     <Box position="relative" h="100%" data-group>
       {/* Checkbox overlay over image */}
-      <Checkbox
-        position="absolute"
-        left="0"
-        top="0"
-        h="3.25rem"
-        w="3.25rem"
-        size="md"
-        p="1rem"
-        variant="transparent"
-        display={isSelected ? "inline-block" : "none"}
-        _groupHover={{
-          bg: "transparent",
-          display: "inline-block",
-        }}
-        _focusWithin={{
-          outline: "none",
-        }}
-        zIndex={1}
-        isChecked={isSelected}
-        onChange={() => {
-          if (onCheck) onCheck()
-        }}
-      />
+      {onCheck && (
+        <Checkbox
+          position="absolute"
+          left="0"
+          top="0"
+          h="3.25rem"
+          w="3.25rem"
+          size="md"
+          p="1rem"
+          variant="transparent"
+          display={isSelected ? "inline-block" : "none"}
+          _groupHover={{
+            bg: "transparent",
+            display: "inline-block",
+          }}
+          _focusWithin={{
+            outline: "none",
+          }}
+          zIndex={1}
+          isChecked={isSelected}
+          onChange={onCheck}
+        />
+      )}
 
       <Grid
         as={chakra.button}
diff --git a/src/components/media/MediaModal.jsx b/src/components/media/MediaModal.jsx
index ec3f7ebcd..71efeccf6 100644
--- a/src/components/media/MediaModal.jsx
+++ b/src/components/media/MediaModal.jsx
@@ -91,6 +91,7 @@ const MediaModal = ({ onClose, onProceed, type, showAltTextModal = false }) => {
           }
           onMediaSelect={onMediaSelect}
           onClose={onClose}
+          mediaType={type}
         />
       )
     }
diff --git a/src/components/media/MediasSelectModal.jsx b/src/components/media/MediasSelectModal.jsx
index df6b3f2a5..b3d3cf57c 100644
--- a/src/components/media/MediasSelectModal.jsx
+++ b/src/components/media/MediasSelectModal.jsx
@@ -27,9 +27,8 @@ import { useState, useEffect } from "react"
 import { useFormContext } from "react-hook-form"
 import { useRouteMatch } from "react-router-dom"
 
-import { FolderCard } from "components/FolderCard"
+import { ImagePreviewCard } from "components/ImagePreviewCard"
 import { LoadingButton } from "components/LoadingButton"
-import MediaCard from "components/media/MediaCard"
 
 import { MEDIA_PAGINATION_SIZE } from "constants/media"
 
@@ -38,9 +37,12 @@ import { useListMediaFolderFiles } from "hooks/directoryHooks/useListMediaFolder
 import { useListMediaFolderSubdirectories } from "hooks/directoryHooks/useListMediaFolderSubdirectories"
 import { usePaginate } from "hooks/usePaginate"
 
-import contentStyles from "styles/isomer-cms/pages/Content.module.scss"
+import { FilePreviewCard, MediaDirectoryCard } from "layouts/Media/components"
+
 import mediaStyles from "styles/isomer-cms/pages/Media.module.scss"
 
+import { getMediaLabels } from "utils/media"
+
 import { deslugifyDirectory, getMediaDirectoryName } from "utils"
 
 const filterMediaByFileName = (medias, filterTerm) =>
@@ -48,6 +50,10 @@ const filterMediaByFileName = (medias, filterTerm) =>
     media.name.toLowerCase().includes(filterTerm.toLowerCase())
   )
 
+const titleCase = (str) => {
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
+}
+
 const MediasSelectModal = ({
   onProceed,
   onClose,
@@ -55,9 +61,12 @@ const MediasSelectModal = ({
   onUpload,
   queryParams,
   setQueryParams,
+  mediaType,
 }) => {
   const { params } = useRouteMatch()
-  const { siteName, fileName } = params
+  const { fileName } = params
+
+  const { singularMediaLabel, pluralMediaLabel } = getMediaLabels(mediaType)
 
   const { mediaRoom, mediaDirectoryName } = queryParams
 
@@ -138,8 +147,9 @@ const MediasSelectModal = ({
               <ModalCloseButton onClick={onClose} position="static" />
             </HStack>
             <Text textStyle="body-1">
-              Choose from your images or upload a new image. You can organise
-              your images in Workspace &gt; Images.
+              Choose from your {pluralMediaLabel} or upload a new{" "}
+              {singularMediaLabel}. You can organise your {pluralMediaLabel} in
+              Workspace &gt; {titleCase(pluralMediaLabel)}.
             </Text>
             <Flex w="100%" justifyContent="space-between">
               {/* Search medias */}
@@ -156,7 +166,7 @@ const MediasSelectModal = ({
                 color="interaction.main.default"
                 onClick={onUpload}
               >
-                Upload new image
+                Upload new {singularMediaLabel}
               </Button>
             </Flex>
           </VStack>
@@ -200,28 +210,26 @@ const MediasSelectModal = ({
                   : "fit-content"
               }
               isLoaded={!isListMediaFolderSubdirectoriesLoading}
+              pb="2.25rem"
             >
-              <div className={contentStyles.folderContainerBoxes}>
-                <div className={contentStyles.boxesContainer}>
-                  {/* Directories */}
-                  {filteredDirectories.map((dir) => (
-                    <FolderCard
-                      displayText={dir.name}
-                      siteName={siteName}
-                      onClick={() =>
-                        setQueryParams((prevState) => {
-                          return {
-                            ...prevState,
-                            mediaDirectoryName: `${prevState.mediaDirectoryName}%2F${dir.name}`,
-                          }
-                        })
-                      }
-                      key={dir.path}
-                      hideSettings
-                    />
-                  ))}
-                </div>
-              </div>
+              <SimpleGrid w="100%" columns={3} spacing="1.5rem">
+                {/* Directories */}
+                {filteredDirectories.map((dir) => (
+                  <MediaDirectoryCard
+                    title={dir.name}
+                    onClick={() => {
+                      onMediaSelect("")
+                      setQueryParams((prevState) => {
+                        return {
+                          ...prevState,
+                          mediaDirectoryName: `${prevState.mediaDirectoryName}%2F${dir.name}`,
+                        }
+                      })
+                    }}
+                    isMenuNeeded={false}
+                  />
+                ))}
+              </SimpleGrid>
             </Skeleton>
 
             <Skeleton
@@ -233,23 +241,36 @@ const MediasSelectModal = ({
                 {files &&
                   files
                     .filter(({ data }) => filteredMedias.includes(data?.name))
-                    .map(({ data, isLoading }, mediaItemIndex) => (
+                    .map(({ data, isLoading }) => (
                       <Skeleton
                         w="100%"
                         h={isLoading ? "4.5rem" : "fit-content"}
                         isLoaded={!isLoading}
                         key={data.name}
                       >
-                        <MediaCard
-                          type={mediaRoom}
-                          media={data}
-                          mediaItemIndex={mediaItemIndex}
-                          onClick={() => onMediaSelect(data)}
-                          isSelected={
-                            data.name === watch("selectedMedia")?.name
-                          }
-                          showSettings={false}
-                        />
+                        {mediaType === "images" ? (
+                          <ImagePreviewCard
+                            name={data.name}
+                            addedTime={data.addedTime}
+                            mediaUrl={data.mediaUrl}
+                            isSelected={
+                              data.name === watch("selectedMedia")?.name
+                            }
+                            onClick={() => onMediaSelect(data)}
+                            isMenuNeeded={false}
+                          />
+                        ) : (
+                          <FilePreviewCard
+                            name={data.name}
+                            addedTime={data.addedTime}
+                            mediaUrl={data.mediaUrl}
+                            isSelected={
+                              data.name === watch("selectedMedia")?.name
+                            }
+                            onClick={() => onMediaSelect(data)}
+                            isMenuNeeded={false}
+                          />
+                        )}
                       </Skeleton>
                     ))}
               </SimpleGrid>
diff --git a/src/contexts/EditorModalContext.tsx b/src/contexts/EditorModalContext.tsx
index 090e62b13..72620ced3 100644
--- a/src/contexts/EditorModalContext.tsx
+++ b/src/contexts/EditorModalContext.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren, createContext, useContext } from "react"
 
 interface EditorModalContextProps {
-  showModal: (modalVariant: "images" | "files" | "hyperlink") => void
+  showModal: (modalVariant: "images" | "files" | "hyperlink" | "embed") => void
 }
 
 const EditorModalContext = createContext<null | EditorModalContextProps>(null)
diff --git a/src/layouts/EditPage/EditPage.tsx b/src/layouts/EditPage/EditPage.tsx
index 4cf3a3827..9873c30a8 100644
--- a/src/layouts/EditPage/EditPage.tsx
+++ b/src/layouts/EditPage/EditPage.tsx
@@ -11,12 +11,13 @@ import TableHeader from "@tiptap/extension-table-header"
 import TableRow from "@tiptap/extension-table-row"
 import TaskItem from "@tiptap/extension-task-item"
 import TaskList from "@tiptap/extension-task-list"
-import { useEditor } from "@tiptap/react"
+import { getHTMLFromFragment, useEditor } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import { Context, useContext, useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
 import { Markdown } from "tiptap-markdown"
 
+import { EditorEmbedModal } from "components/EditorEmbedModal"
 import HyperlinkModal from "components/HyperlinkModal"
 import MediaModal from "components/media/MediaModal"
 
@@ -25,10 +26,14 @@ import { EditorModalContextProvider } from "contexts/EditorModalContext"
 import { ServicesContext } from "contexts/ServicesContext"
 
 import { useGetPageHook } from "hooks/pageHooks"
+import { useCspHook } from "hooks/settingsHooks"
 
 import { Iframe } from "layouts/components/Editor/extensions"
 
+import { isEmbedCodeValid } from "utils/allowedHTML"
+
 import { MediaService } from "services"
+import { EditorEmbedContents } from "types/editPage"
 import { getDecodedParams, getImageDetails } from "utils"
 
 import { MarkdownEditPage } from "./MarkdownEditPage"
@@ -40,6 +45,7 @@ export const EditPage = () => {
   const { data: initialPageData, isLoading: isLoadingPage } = useGetPageHook(
     params
   )
+  const { data: csp } = useCspHook()
   const [variant, setVariant] = useState(
     initialPageData?.content?.frontMatter?.variant || "markdown"
   )
@@ -70,7 +76,7 @@ export const EditPage = () => {
         pluginKey: "tableBubble",
       }),
       Table.configure({
-        resizable: true,
+        resizable: false,
       }),
       TableRow,
       TableHeader,
@@ -92,12 +98,20 @@ export const EditPage = () => {
     onClose: onHyperlinkModalClose,
   } = useDisclosure()
 
+  const {
+    isOpen: isEmbedModalOpen,
+    onOpen: onEmbedModalOpen,
+    onClose: onEmbedModalClose,
+  } = useDisclosure()
+
   const { siteName } = decodedParams
 
   const { mediaService } = useContext<{ mediaService: MediaService }>(
     (ServicesContext as unknown) as Context<{ mediaService: MediaService }>
   )
 
+  if (!editor) return null
+
   const getImageSrc = async (src: string) => {
     const { fileName, imageDirectory } = getImageDetails(src)
     return mediaService.get({
@@ -107,7 +121,13 @@ export const EditPage = () => {
     })
   }
 
-  if (!editor) return null
+  const handleEmbedInsert = ({ value }: EditorEmbedContents) => {
+    if (isEmbedCodeValid(csp, value)) {
+      editor.chain().focus().insertContent(value.replaceAll("\n", "")).run()
+    }
+
+    onEmbedModalClose()
+  }
 
   return (
     <EditorContextProvider editor={editor}>
@@ -115,6 +135,8 @@ export const EditPage = () => {
         showModal={(modalType) => {
           if (modalType === "hyperlink") {
             onHyperlinkModalOpen()
+          } else if (modalType === "embed") {
+            onEmbedModalOpen()
           } else {
             setMediaType(modalType)
             onMediaModalOpen()
@@ -173,6 +195,21 @@ export const EditPage = () => {
             }}
           />
         )}
+        {isEmbedModalOpen && (
+          <EditorEmbedModal
+            isOpen={isEmbedModalOpen}
+            onClose={onEmbedModalClose}
+            onProceed={handleEmbedInsert}
+            cursorValue={
+              editor.state.selection.empty
+                ? ""
+                : getHTMLFromFragment(
+                    editor.state.selection.content().content,
+                    editor.schema
+                  )
+            }
+          />
+        )}
 
         {variant === "markdown" ? (
           <MarkdownEditPage
diff --git a/src/layouts/EditPage/TiptapEditPage.tsx b/src/layouts/EditPage/TiptapEditPage.tsx
index 0b0e95fa7..fd3387307 100644
--- a/src/layouts/EditPage/TiptapEditPage.tsx
+++ b/src/layouts/EditPage/TiptapEditPage.tsx
@@ -61,8 +61,9 @@ export const TiptapEditPage = ({
       <Editor h="80vh" w="45vw" />
       {/* Preview */}
       <PagePreview
+        // NOTE: Reserve 45vw for editor
+        w="calc(100% - 45vw)"
         h="calc(100vh - 160px - 1rem)"
-        w="100%"
         chunk={editor.getHTML()}
         title={initialPageData?.content?.frontMatter?.title || ""}
       />
diff --git a/src/layouts/EditPage/utils.ts b/src/layouts/EditPage/utils.ts
index dadd38f30..a6e791674 100644
--- a/src/layouts/EditPage/utils.ts
+++ b/src/layouts/EditPage/utils.ts
@@ -17,6 +17,8 @@ DOMPurify.setConfig({
     "marginwidth",
     "target",
     "async",
+    "mozallowfullscreen",
+    "webkitallowfullscreen",
   ],
   // required in case <script> tag appears as the first line of the markdown
   FORCE_BODY: true,
diff --git a/src/layouts/Media/components/FilePreviewCard.tsx b/src/layouts/Media/components/FilePreviewCard.tsx
index 70ffadb31..c2b655018 100644
--- a/src/layouts/Media/components/FilePreviewCard.tsx
+++ b/src/layouts/Media/components/FilePreviewCard.tsx
@@ -36,31 +36,40 @@ export const FilePreviewCard = ({
   const encodedName = encodeURIComponent(name)
 
   return (
-    <Box position="relative" h="100%" data-group>
+    <Box
+      position="relative"
+      h="100%"
+      borderRadius="0.25rem"
+      borderWidth="0px"
+      // Note: Outline is required to avoid the card from shifting when selected
+      outline={isSelected ? "solid 2px" : "solid 1px"}
+      outlineColor={isSelected ? "base.divider.brand" : "base.divider.medium"}
+      data-group
+    >
       {/* Checkbox overlay */}
-      <Checkbox
-        position="absolute"
-        left="1rem"
-        top="0.5rem"
-        h="3.25rem"
-        w="3.25rem"
-        size="md"
-        p="1rem"
-        variant="transparent"
-        display={isSelected ? "inline-block" : "none"}
-        _groupHover={{
-          bg: "transparent",
-          display: "inline-block",
-        }}
-        _focusWithin={{
-          outline: "none",
-        }}
-        zIndex={1}
-        isChecked={isSelected}
-        onChange={() => {
-          if (onCheck) onCheck()
-        }}
-      />
+      {onCheck && (
+        <Checkbox
+          position="absolute"
+          left="1rem"
+          top="0.5rem"
+          h="3.25rem"
+          w="3.25rem"
+          size="md"
+          p="1rem"
+          variant="transparent"
+          display={isSelected ? "inline-block" : "none"}
+          _groupHover={{
+            bg: "transparent",
+            display: "inline-block",
+          }}
+          _focusWithin={{
+            outline: "none",
+          }}
+          zIndex={1}
+          isChecked={isSelected}
+          onChange={onCheck}
+        />
+      )}
 
       <Box
         position="relative"
@@ -80,13 +89,14 @@ export const FilePreviewCard = ({
       >
         <Card variant="multi" _hover={{ bg: undefined }}>
           <CardBody>
-            {!isSelected && (
+            {!(isSelected && onCheck) && (
+              // Icon is hidden only if checkbox exists
               <Icon
                 as={BxFileArchiveSolid}
                 fontSize="1.5rem"
                 fill="icon.alt"
                 _groupHover={{
-                  display: "none",
+                  display: `${onCheck && "none"}`,
                 }}
               />
             )}
@@ -94,8 +104,8 @@ export const FilePreviewCard = ({
               textStyle="body-1"
               color="text.label"
               noOfLines={3}
-              ml={isSelected ? "2.5rem" : 0}
-              _groupHover={{ marginLeft: "2.5rem" }}
+              ml={isSelected && onCheck ? "2.5rem" : 0}
+              _groupHover={{ marginLeft: `${onCheck && "2.5rem"}` }}
             >
               {name}
             </Text>
diff --git a/src/layouts/Media/components/MediaDirectoryCard.tsx b/src/layouts/Media/components/MediaDirectoryCard.tsx
index 99201c094..8c860fcd1 100644
--- a/src/layouts/Media/components/MediaDirectoryCard.tsx
+++ b/src/layouts/Media/components/MediaDirectoryCard.tsx
@@ -1,18 +1,24 @@
-import { LinkOverlay, LinkBox, Divider, Text, Icon } from "@chakra-ui/react"
-import { BiEdit, BiFolder, BiTrash, BiWrench } from "react-icons/bi"
+import { LinkOverlay, LinkBox, Text, Icon } from "@chakra-ui/react"
+import { BiEdit, BiFolder, BiTrash } from "react-icons/bi"
 import { Link as RouterLink, useRouteMatch } from "react-router-dom"
 
 import { Card, CardBody } from "components/Card"
 import { ContextMenu } from "components/ContextMenu"
 
+import { getMediaLabels } from "utils/media"
+
 import { prettifyPageFileName } from "utils"
 
 interface MediaDirectoryCardProps {
   title: string
+  onClick?: () => void
+  isMenuNeeded?: boolean
 }
 
 export const MediaDirectoryCard = ({
   title,
+  onClick,
+  isMenuNeeded = true,
 }: MediaDirectoryCardProps): JSX.Element => {
   const {
     params: { siteName, mediaRoom: mediaType, mediaDirectoryName },
@@ -25,44 +31,64 @@ export const MediaDirectoryCard = ({
   const encodedDirectoryPath = `${mediaDirectoryName}%2F${encodeURIComponent(
     title
   )}`
+  const { singularDirectoryLabel } = getMediaLabels(mediaType)
 
   return (
-    <Card variant="single">
-      <LinkBox position="relative">
-        <LinkOverlay
-          as={RouterLink}
-          to={`/sites/${siteName}/media/${mediaType}/mediaDirectory/${encodedDirectoryPath}`}
-        >
-          <CardBody>
-            <Icon as={BiFolder} fontSize="1.5rem" fill="icon.alt" />
-            <Text textStyle="subhead-1" color="text.label" noOfLines={1}>
-              {prettifyPageFileName(title)}
-            </Text>
-          </CardBody>
-        </LinkOverlay>
-      </LinkBox>
-      <ContextMenu>
-        <ContextMenu.Button pos="absolute" />
-        <ContextMenu.List>
-          <ContextMenu.Item
-            icon={<BiEdit />}
+    <Card
+      variant="single"
+      onClick={(e) => {
+        if (onClick) {
+          e.preventDefault()
+          onClick()
+        }
+      }}
+    >
+      {onClick ? (
+        <CardBody>
+          <Icon as={BiFolder} fontSize="1.5rem" fill="icon.alt" />
+          <Text textStyle="subhead-1" color="text.label" noOfLines={1}>
+            {prettifyPageFileName(title)}
+          </Text>
+        </CardBody>
+      ) : (
+        <LinkBox position="relative">
+          <LinkOverlay
             as={RouterLink}
-            to={`${url}/editDirectorySettings/${encodedDirectoryPath}`}
+            to={`/sites/${siteName}/media/${mediaType}/mediaDirectory/${encodedDirectoryPath}`}
           >
-            Rename {mediaType === "images" ? "album" : "directory"}
-          </ContextMenu.Item>
-          <>
+            <CardBody>
+              <Icon as={BiFolder} fontSize="1.5rem" fill="icon.alt" />
+              <Text textStyle="subhead-1" color="text.label" noOfLines={1}>
+                {prettifyPageFileName(title)}
+              </Text>
+            </CardBody>
+          </LinkOverlay>
+        </LinkBox>
+      )}
+      {isMenuNeeded && (
+        <ContextMenu>
+          <ContextMenu.Button pos="absolute" />
+          <ContextMenu.List>
             <ContextMenu.Item
-              icon={<BiTrash />}
+              icon={<BiEdit />}
               as={RouterLink}
-              to={`${url}/deleteDirectory/${encodedDirectoryPath}`}
-              color="text.danger"
+              to={`${url}/editDirectorySettings/${encodedDirectoryPath}`}
             >
-              Delete {mediaType === "images" ? "album" : "directory"}
+              Rename {singularDirectoryLabel}
             </ContextMenu.Item>
-          </>
-        </ContextMenu.List>
-      </ContextMenu>
+            <>
+              <ContextMenu.Item
+                icon={<BiTrash />}
+                as={RouterLink}
+                to={`${url}/deleteDirectory/${encodedDirectoryPath}`}
+                color="text.danger"
+              >
+                Delete {singularDirectoryLabel}
+              </ContextMenu.Item>
+            </>
+          </ContextMenu.List>
+        </ContextMenu>
+      )}
     </Card>
   )
 }
diff --git a/src/layouts/components/Editor/Editor.tsx b/src/layouts/components/Editor/Editor.tsx
index 07b68ac95..e0a46a9e5 100644
--- a/src/layouts/components/Editor/Editor.tsx
+++ b/src/layouts/components/Editor/Editor.tsx
@@ -11,7 +11,7 @@ export const Editor = (props: BoxProps) => {
   const { editor } = useEditorContext()
 
   return (
-    <Box p="1.25rem" h="100%" maxW="50%" {...props}>
+    <Box p="1.25rem" h="100%" maxW="50%" minW="40%" {...props}>
       <Flex
         bg="white"
         border="1px solid"
diff --git a/src/layouts/components/Editor/components/MenuBar.tsx b/src/layouts/components/Editor/components/MenuBar.tsx
index 26cfaa895..e67fa34e7 100644
--- a/src/layouts/components/Editor/components/MenuBar.tsx
+++ b/src/layouts/components/Editor/components/MenuBar.tsx
@@ -1,7 +1,5 @@
 import { Divider, HStack } from "@chakra-ui/react"
 import { Editor } from "@tiptap/react"
-import { Fragment } from "react"
-import { v4 as uuid } from "uuid"
 
 import { useEditorModal } from "contexts/EditorModalContext"
 
@@ -11,39 +9,6 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
   const { showModal } = useEditorModal()
 
   const items = [
-    {
-      icon: "bold",
-      title: "Bold",
-      action: () => editor.chain().focus().toggleBold().run(),
-      isActive: () => editor.isActive("bold"),
-    },
-    {
-      icon: "italic",
-      title: "Italic",
-      action: () => editor.chain().focus().toggleItalic().run(),
-      isActive: () => editor.isActive("italic"),
-    },
-    {
-      icon: "strikethrough",
-      title: "Strike",
-      action: () => editor.chain().focus().toggleStrike().run(),
-      isActive: () => editor.isActive("strike"),
-    },
-    {
-      icon: "code-view",
-      title: "Code",
-      action: () => editor.chain().focus().toggleCode().run(),
-      isActive: () => editor.isActive("code"),
-    },
-    {
-      icon: "mark-pen-line",
-      title: "Highlight",
-      action: () => editor.chain().focus().toggleHighlight().run(),
-      isActive: () => editor.isActive("highlight"),
-    },
-    {
-      type: "divider",
-    },
     {
       icon: "h-1",
       title: "Heading 1",
@@ -63,37 +28,25 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
       isActive: () => editor.isActive("heading", { level: 3 }),
     },
     {
-      icon: "paragraph",
-      title: "Paragraph",
-      action: () => editor.chain().focus().setParagraph().run(),
-      isActive: () => editor.isActive("paragraph"),
-    },
-    {
-      icon: "list-unordered",
-      title: "Bullet List",
-      action: () => editor.chain().focus().toggleBulletList().run(),
-      isActive: () => editor.isActive("bulletList"),
-    },
-    {
-      icon: "list-ordered",
-      title: "Ordered List",
-      action: () => editor.chain().focus().toggleOrderedList().run(),
-      isActive: () => editor.isActive("orderedList"),
+      type: "divider",
     },
     {
-      icon: "list-check-2",
-      title: "Task List",
-      action: () => editor.chain().focus().toggleTaskList().run(),
-      isActive: () => editor.isActive("taskList"),
+      icon: "bold",
+      title: "Bold",
+      action: () => editor.chain().focus().toggleBold().run(),
+      isActive: () => editor.isActive("bold"),
     },
     {
-      icon: "code-box-line",
-      title: "Code Block",
-      action: () => editor.chain().focus().toggleCodeBlock().run(),
-      isActive: () => editor.isActive("codeBlock"),
+      icon: "italic",
+      title: "Italic",
+      action: () => editor.chain().focus().toggleItalic().run(),
+      isActive: () => editor.isActive("italic"),
     },
     {
-      type: "divider",
+      icon: "strikethrough",
+      title: "Strike",
+      action: () => editor.chain().focus().toggleStrike().run(),
+      isActive: () => editor.isActive("strike"),
     },
     {
       icon: "double-quotes-l",
@@ -101,37 +54,27 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
       action: () => editor.chain().focus().toggleBlockquote().run(),
       isActive: () => editor.isActive("blockquote"),
     },
-    {
-      icon: "separator",
-      title: "Horizontal Rule",
-      action: () => editor.chain().focus().setHorizontalRule().run(),
-    },
+
     {
       type: "divider",
     },
     {
-      icon: "text-wrap",
-      title: "Hard Break",
-      action: () => editor.chain().focus().setHardBreak().run(),
+      icon: "list-ordered",
+      title: "Ordered List",
+      action: () => editor.chain().focus().toggleOrderedList().run(),
+      isActive: () => editor.isActive("orderedList"),
     },
+
     {
-      icon: "format-clear",
-      title: "Clear Format",
-      action: () => editor.chain().focus().clearNodes().unsetAllMarks().run(),
+      icon: "list-unordered",
+      title: "Bullet List",
+      action: () => editor.chain().focus().toggleBulletList().run(),
+      isActive: () => editor.isActive("bulletList"),
     },
+
     {
       type: "divider",
     },
-    {
-      icon: "arrow-go-back-line",
-      title: "Undo",
-      action: () => editor.chain().focus().undo().run(),
-    },
-    {
-      icon: "arrow-go-forward-line",
-      title: "Redo",
-      action: () => editor.chain().focus().redo().run(),
-    },
     {
       icon: "file-image-line",
       title: "Add image",
@@ -152,6 +95,14 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
       title: "Remove link",
       action: () => editor.chain().focus().unsetLink().run(),
     },
+    {
+      icon: "code-s-slash-line",
+      title: "Insert embed",
+      action: () => showModal("embed"),
+    },
+    {
+      type: "divider",
+    },
     {
       icon: "table-line",
       title: "Add table",
@@ -163,6 +114,24 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
           .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
           .run(),
     },
+    {
+      icon: "separator",
+      title: "Horizontal Rule",
+      action: () => editor.chain().focus().setHorizontalRule().run(),
+    },
+    {
+      type: "divider",
+    },
+    {
+      icon: "arrow-go-back-line",
+      title: "Undo",
+      action: () => editor.chain().focus().undo().run(),
+    },
+    {
+      icon: "arrow-go-forward-line",
+      title: "Redo",
+      action: () => editor.chain().focus().redo().run(),
+    },
   ]
 
   return (
diff --git a/src/layouts/components/Editor/components/MenuItem.tsx b/src/layouts/components/Editor/components/MenuItem.tsx
index 82d66d0d7..ed44f377b 100644
--- a/src/layouts/components/Editor/components/MenuItem.tsx
+++ b/src/layouts/components/Editor/components/MenuItem.tsx
@@ -1,3 +1,4 @@
+import { Tooltip } from "@chakra-ui/react"
 import { IconButton } from "@opengovsg/design-system-react"
 import { MouseEventHandler } from "react"
 import remixiconUrl from "remixicon/fonts/remixicon.symbol.svg"
@@ -17,21 +18,23 @@ export const MenuItem = ({
   isRound,
   isActive = null,
 }: MenuItemProps) => (
-  <IconButton
-    _hover={{ bg: "gray.100" }}
-    _active={{ bg: "gray.200" }}
-    onClick={action}
-    title={title}
-    bgColor={isActive && isActive() ? "gray.200" : "transparent"}
-    border="none"
-    h="1.75rem"
-    w="1.75rem"
-    p="0.25rem"
-    aria-label={title || "divider"}
-    isRound={isRound}
-  >
-    <svg className="remix" height="1.25rem" width="1.25rem">
-      <use xlinkHref={`${remixiconUrl}#ri-${icon}`} />
-    </svg>
-  </IconButton>
+  // NOTE: Delay opening by 500ms
+  <Tooltip label={title || "divider"} hasArrow openDelay={500}>
+    <IconButton
+      _hover={{ bg: "gray.100" }}
+      _active={{ bg: "gray.200" }}
+      onClick={action}
+      bgColor={isActive && isActive() ? "gray.200" : "transparent"}
+      border="none"
+      h="1.75rem"
+      w="1.75rem"
+      p="0.25rem"
+      aria-label={title || "divider"}
+      isRound={isRound}
+    >
+      <svg className="remix" height="1.25rem" width="1.25rem">
+        <use xlinkHref={`${remixiconUrl}#ri-${icon}`} />
+      </svg>
+    </IconButton>
+  </Tooltip>
 )
diff --git a/src/layouts/components/Editor/styles.scss b/src/layouts/components/Editor/styles.scss
index bf1759f41..a95aa4a71 100644
--- a/src/layouts/components/Editor/styles.scss
+++ b/src/layouts/components/Editor/styles.scss
@@ -1,12 +1,9 @@
+@use "styles/isomer-cms/pages/Editor.module.scss";
+
 .tiptap:focus {
   outline: none;
 }
 
-.tableWrapper {
-  padding: 1rem 0;
-  overflow-x: auto;
-}
-
 .resize-cursor {
   cursor: ew-resize;
   cursor: col-resize;
@@ -14,6 +11,8 @@
 
 /* Basic editor styles */
 .tiptap {
+  @extend .previewTextStyles;
+
   > * + * {
     margin-top: 0.75em;
   }
@@ -37,10 +36,10 @@
 
     td,
     th {
-      border: 2px solid #ced4da;
+      border: 1px solid #d6d6d6;
       box-sizing: border-box;
       min-width: 1em;
-      padding: 3px 5px;
+      padding: 0.5em 0.75em;
       position: relative;
       vertical-align: top;
 
@@ -50,36 +49,10 @@
     }
 
     th {
-      background-color: #f1f3f5;
+      color: #323232;
       font-weight: bold;
       text-align: left;
     }
-
-    .selectedCell:after {
-      background: rgba(200, 200, 255, 0.4);
-      content: "";
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      pointer-events: none;
-      position: absolute;
-      z-index: 2;
-    }
-
-    .column-resize-handle {
-      background-color: #adf;
-      bottom: -2px;
-      position: absolute;
-      right: -2px;
-      pointer-events: none;
-      top: 0;
-      width: 4px;
-    }
-
-    p {
-      margin: 0;
-    }
   }
 
   a {
@@ -92,15 +65,6 @@
     padding: 0 1rem;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
diff --git a/src/styles/isomer-cms/elements/base.scss b/src/styles/isomer-cms/elements/base.scss
index 4ecd249dc..d8dc44456 100644
--- a/src/styles/isomer-cms/elements/base.scss
+++ b/src/styles/isomer-cms/elements/base.scss
@@ -60,7 +60,7 @@ h4,
 h5,
 h6 {
   font-family: "Inter", sans-serif;
-  font-weight: 700 !important;
+  font-weight: 700;
   margin: 0;
   padding: 0;
   letter-spacing: 0 !important;
diff --git a/src/types/editPage.ts b/src/types/editPage.ts
new file mode 100644
index 000000000..43b6526c6
--- /dev/null
+++ b/src/types/editPage.ts
@@ -0,0 +1,3 @@
+export interface EditorEmbedContents {
+  value: string
+}
diff --git a/src/utils/allowedHTML.ts b/src/utils/allowedHTML.ts
index 15115020e..eadc0c3b9 100644
--- a/src/utils/allowedHTML.ts
+++ b/src/utils/allowedHTML.ts
@@ -1,3 +1,9 @@
+import DOMPurify from "dompurify"
+
+import * as CspService from "services/CspService"
+
+import checkCSP from "./cspUtils"
+
 /**
  * HTML tag that do not count towards the total
  * character limit.
@@ -11,3 +17,27 @@ const IFRAME_TAG_REGEX = new RegExp("(<iframe.*/iframe>)", "gm")
 export const getLengthWithoutTags = (text: string): number => {
   return text.replace(IFRAME_TAG_REGEX, "").length
 }
+
+/**
+ * Utility method for determinign if the given HTML embed code adheres to our
+ * Content Security Policy.
+ */
+export const isEmbedCodeValid = (
+  csp: Awaited<ReturnType<typeof CspService.get>> | undefined,
+  embedCode: string | undefined
+) => {
+  if (!csp || !embedCode) return false
+
+  const {
+    isCspViolation: checkedIsCspViolation,
+    sanitisedHtml: CSPSanitisedHtml,
+  } = checkCSP(csp, embedCode)
+  DOMPurify.sanitize(CSPSanitisedHtml)
+
+  // Using FORCE_BODY adds a fake <remove></remove>
+  DOMPurify.removed = DOMPurify.removed.filter(
+    (el) => el.element?.tagName !== "REMOVE"
+  )
+
+  return !checkedIsCspViolation && DOMPurify.removed.length === 0
+}
diff --git a/src/utils/cspUtils.js b/src/utils/cspUtils.js
index 93ca3a935..9ed5f9ece 100644
--- a/src/utils/cspUtils.js
+++ b/src/utils/cspUtils.js
@@ -5,7 +5,7 @@ import cheerio from "cheerio"
 import escapeStringRegexp from "escape-string-regexp"
 import _ from "lodash"
 
-import { isLinkInternal } from "utils"
+import { isLinkInternal } from "utils/misc"
 
 function toRegExp(string) {
   const strippedString = string.replace(/\/$/, "") // removes ending '/' from domains eg 'abc.com/'