diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e8895115f..ef2814a83 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -10,6 +10,8 @@ jobs:
     # NOTE: Netlify uses ubuntu 16.08 but Github Actions does not offer it by default.
     # Hence, we default to the latest version.
     runs-on: ubuntu-latest
+    env:
+      TIPTAP_PRO_TOKEN: ${{secrets.TIPTAP_PRO_TOKEN}}
     steps:
       - uses: actions/checkout@v3
       - name: Setup Node.js
@@ -32,6 +34,8 @@ jobs:
   lint:
     needs: install
     runs-on: ubuntu-latest
+    env:
+      TIPTAP_PRO_TOKEN: ${{secrets.TIPTAP_PRO_TOKEN}}
     steps:
       - uses: actions/checkout@v3
       - name: Setup Node.js
@@ -56,6 +60,7 @@ jobs:
     needs: lint
     runs-on: ubuntu-latest
     env:
+      TIPTAP_PRO_TOKEN: ${{secrets.TIPTAP_PRO_TOKEN}}
       CI: false
     steps:
       - uses: actions/checkout@v3
@@ -88,6 +93,7 @@ jobs:
       USERNAME: ${{secrets.USERNAME}}
       PERSONAL_ACCESS_TOKEN: ${{secrets.PERSONAL_ACCESS_TOKEN}}
       E2E_COMMIT_HASH: ${{secrets.E2E_COMMIT_HASH}}
+      TIPTAP_PRO_TOKEN: ${{secrets.TIPTAP_PRO_TOKEN}}
     steps:
       - uses: actions/checkout@v3
       - name: Setup Node.js
diff --git a/.npmrc b/.npmrc
index 521a9f7c0..38a663985 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,3 @@
 legacy-peer-deps=true
+@tiptap-pro:registry=https://registry.tiptap.dev/
+//registry.tiptap.dev/:_authToken=${TIPTAP_PRO_TOKEN}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 297d143cd..eed238b93 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,34 @@ 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.63.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.62.0...v0.63.0)
+
+- fix(embed-views): add a max width [`#1729`](https://github.com/isomerpages/isomercms-frontend/pull/1729)
+- fix(blockwrapper): remove padding [`#1728`](https://github.com/isomerpages/isomercms-frontend/pull/1728)
+- feat(editor): enhance image bubble menu with more functions [`#1721`](https://github.com/isomerpages/isomercms-frontend/pull/1721)
+- feat(editor): feature flag complex blocks [`#1720`](https://github.com/isomerpages/isomercms-frontend/pull/1720)
+- fix(tables): update table behaviour [`#1722`](https://github.com/isomerpages/isomercms-frontend/pull/1722)
+- refactor(tiptap): change embeds view [`#1723`](https://github.com/isomerpages/isomercms-frontend/pull/1723)
+- refactor(tiptap): add placeholder instead of prefill [`#1724`](https://github.com/isomerpages/isomercms-frontend/pull/1724)
+- feat(tiptap): add outline blocks  [`#1718`](https://github.com/isomerpages/isomercms-frontend/pull/1718)
+- feat_background_toggling [`#1713`](https://github.com/isomerpages/isomercms-frontend/pull/1713)
+- feat: basic accordion block [`#1709`](https://github.com/isomerpages/isomercms-frontend/pull/1709)
+- Feat/select media modal for external media [`#1714`](https://github.com/isomerpages/isomercms-frontend/pull/1714)
+- fix(markdowneditpage): fix styling on big screens (1920+) [`#1719`](https://github.com/isomerpages/isomercms-frontend/pull/1719)
+- fix(editor): improve embed functionality [`#1717`](https://github.com/isomerpages/isomercms-frontend/pull/1717)
+- feat(editor): add trailing node at end of document [`#1716`](https://github.com/isomerpages/isomercms-frontend/pull/1716)
+- feat(cards): render preview the same way as template [`#1707`](https://github.com/isomerpages/isomercms-frontend/pull/1707)
+- feat(cards): support undo/redo of cards editing [`#1706`](https://github.com/isomerpages/isomercms-frontend/pull/1706)
+- feat(cards): allow editing of cards within drawer [`#1705`](https://github.com/isomerpages/isomercms-frontend/pull/1705)
+- feat(cards): introduce drawer to support sub-editing [`#1704`](https://github.com/isomerpages/isomercms-frontend/pull/1704)
+- feat(tiptap): add card grid block [`#1701`](https://github.com/isomerpages/isomercms-frontend/pull/1701)
+- feat(tiptap): allow inserting of complex blocks [`#1697`](https://github.com/isomerpages/isomercms-frontend/pull/1697)
+- 0.62.0 to develop [`#1710`](https://github.com/isomerpages/isomercms-frontend/pull/1710)
+
 #### [v0.62.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.61.0...v0.62.0)
 
+> 28 November 2023
+
 - fix(media): fix logic for disabling button in create media folder modal [`#1712`](https://github.com/isomerpages/isomercms-frontend/pull/1712)
 - Chore/update regex [`#1703`](https://github.com/isomerpages/isomercms-frontend/pull/1703)
 - fix(media): allow creating folders in empty folder [`#1702`](https://github.com/isomerpages/isomercms-frontend/pull/1702)
diff --git a/package-lock.json b/package-lock.json
index eb9ba46cc..5e76a4327 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "isomercms-frontend",
-      "version": "0.62.0",
+      "version": "0.63.0",
       "hasInstallScript": true,
       "dependencies": {
         "@braintree/sanitize-url": "^6.0.1",
@@ -29,6 +29,9 @@
         "@sentry/react": "^7.12.1",
         "@sentry/tracing": "^7.12.1",
         "@tanstack/react-table": "^8.5.13",
+        "@tiptap-pro/extension-details": "^2.5.0",
+        "@tiptap-pro/extension-details-content": "^2.5.0",
+        "@tiptap-pro/extension-details-summary": "^2.5.0",
         "@tiptap/core": "^2.1.12",
         "@tiptap/extension-bubble-menu": "^2.1.12",
         "@tiptap/extension-character-count": "^2.1.12",
@@ -10675,6 +10678,47 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/@tiptap-pro/extension-details": {
+      "version": "2.5.0",
+      "resolved": "https://registry.tiptap.dev/@tiptap-pro%2fextension-details/-/extension-details-2.5.0.tgz",
+      "integrity": "sha512-iZi8We+RcDeetssUha4+h5rxqmobTQxGJFB4C77YEStx5Ae3CZTaiS+8J2uOm4Qbi49iv2aHaRwhi84UnCiROg==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap-pro/extension-details-content": {
+      "version": "2.5.0",
+      "resolved": "https://registry.tiptap.dev/@tiptap-pro%2fextension-details-content/-/extension-details-content-2.5.0.tgz",
+      "integrity": "sha512-WUVROUBjzr8WGk/IEvGUI8F1Zh8y2g5kBpOkOglUGhVak6kbzeXx8TWAyRlMDhAEbAzEhgEa6YxJts3ApdpYwQ==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap-pro/extension-details-summary": {
+      "version": "2.5.0",
+      "resolved": "https://registry.tiptap.dev/@tiptap-pro%2fextension-details-summary/-/extension-details-summary-2.5.0.tgz",
+      "integrity": "sha512-BrgQx2ZBcMDDtAq7Nursa/lRd6ikG+08042dNXMJnyTarnxkMPcfL6nrGhUPJKSogr4MdmsFFkvLhCCuoeZeTA==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
     "node_modules/@tiptap/core": {
       "version": "2.1.12",
       "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.1.12.tgz",
diff --git a/package.json b/package.json
index 498ecff1f..64a375eb9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"
@@ -26,6 +26,9 @@
     "@sentry/react": "^7.12.1",
     "@sentry/tracing": "^7.12.1",
     "@tanstack/react-table": "^8.5.13",
+    "@tiptap-pro/extension-details": "^2.5.0",
+    "@tiptap-pro/extension-details-content": "^2.5.0",
+    "@tiptap-pro/extension-details-summary": "^2.5.0",
     "@tiptap/core": "^2.1.12",
     "@tiptap/extension-bubble-menu": "^2.1.12",
     "@tiptap/extension-character-count": "^2.1.12",
diff --git a/src/assets/images/EditorAccordionImage.tsx b/src/assets/images/EditorAccordionImage.tsx
new file mode 100644
index 000000000..f692f552c
--- /dev/null
+++ b/src/assets/images/EditorAccordionImage.tsx
@@ -0,0 +1,31 @@
+export const EditorAccordionImage = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="48" height="48" fill="white" />
+      <rect x="5" y="7" width="38" height="8" fill="#E8E8E8" />
+      <rect x="5" y="24" width="38" height="8" fill="#E8E8E8" />
+      <rect x="5" y="34" width="38" height="8" fill="#E8E8E8" />
+      <path
+        d="M37.0977 11.431L37.569 11.9024L39 10.4714L40.431 11.9024L40.9023 11.431L39 9.52869L37.0977 11.431Z"
+        fill="#666C7A"
+      />
+      <path
+        d="M40.9023 27.569L40.431 27.0976L39 28.5286L37.569 27.0976L37.0977 27.569L39 29.4713L40.9023 27.569Z"
+        fill="#666C7A"
+      />
+      <path
+        d="M40.9023 37.569L40.431 37.0976L39 38.5286L37.569 37.0976L37.0977 37.569L39 39.4713L40.9023 37.569Z"
+        fill="#666C7A"
+      />
+    </svg>
+  )
+}
diff --git a/src/assets/images/EditorCardsImage.tsx b/src/assets/images/EditorCardsImage.tsx
new file mode 100644
index 000000000..a0dfc4311
--- /dev/null
+++ b/src/assets/images/EditorCardsImage.tsx
@@ -0,0 +1,22 @@
+export const EditorCardsImage = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="48" height="48" fill="white" />
+      <rect x="4" y="15" width="12" height="8" fill="#E8E8E8" />
+      <rect x="18" y="15" width="12" height="8" fill="#E8E8E8" />
+      <rect x="32" y="15" width="12" height="8" fill="#E8E8E8" />
+      <rect x="4" y="25" width="12" height="8" fill="#E8E8E8" />
+      <rect x="18" y="25" width="12" height="8" fill="#E8E8E8" />
+      <rect x="32" y="25" width="12" height="8" fill="#E8E8E8" />
+    </svg>
+  )
+}
diff --git a/src/assets/images/EditorCardsPlaceholderImage.tsx b/src/assets/images/EditorCardsPlaceholderImage.tsx
new file mode 100644
index 000000000..898c4a2a8
--- /dev/null
+++ b/src/assets/images/EditorCardsPlaceholderImage.tsx
@@ -0,0 +1,128 @@
+export const EditorCardsPlaceholderImage = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      viewBox="0 0 591 200"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="591" height="200" fill="#F8F9F9" />
+      <line
+        x1="237.666"
+        y1="120.145"
+        x2="256.149"
+        y2="120.145"
+        stroke="#D9D9D9"
+        strokeWidth="1.5"
+      />
+      <line
+        x1="234.817"
+        y1="114.583"
+        x2="258.987"
+        y2="114.583"
+        stroke="#D9D9D9"
+        strokeWidth="1.5"
+      />
+      <path d="M233.398 106.715H260.412" stroke="#A0A0A0" strokeWidth="2" />
+      <rect
+        x="225.368"
+        y="70.5"
+        width="43.0748"
+        height="59"
+        rx="3.5"
+        stroke="#D9D9D9"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M224.868 74V99.2683H268.943V74C268.943 71.7909 267.152 70 264.943 70H228.868C226.659 70 224.868 71.7909 224.868 74Z"
+        fill="#D9D9D9"
+        fillOpacity="0.35"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M239.086 92.683H257.095L249.591 81.8699L245.089 88.0488L243.588 86.5041L239.086 92.683ZM241.246 82.736C241.668 83.1705 242.241 83.4147 242.838 83.4147C243.435 83.4147 244.007 83.1705 244.43 82.736C244.852 82.3015 245.089 81.7121 245.089 81.0976C245.089 80.4831 244.852 79.8937 244.43 79.4592C244.007 79.0246 243.435 78.7805 242.838 78.7805C242.241 78.7805 241.668 79.0246 241.246 79.4592C240.824 79.8937 240.587 80.4831 240.587 81.0976C240.587 81.7121 240.824 82.3015 241.246 82.736Z"
+        fill="#A0A0A0"
+      />
+      <line
+        x1="286.741"
+        y1="120.145"
+        x2="305.224"
+        y2="120.145"
+        stroke="#D9D9D9"
+        strokeWidth="1.5"
+      />
+      <line
+        x1="283.893"
+        y1="114.583"
+        x2="308.063"
+        y2="114.583"
+        stroke="#D9D9D9"
+        strokeWidth="1.5"
+      />
+      <path d="M282.474 106.715H309.487" stroke="#A0A0A0" strokeWidth="2" />
+      <rect
+        x="274.443"
+        y="70.5"
+        width="43.0748"
+        height="59"
+        rx="3.5"
+        stroke="#D9D9D9"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M273.943 74V99.2683H318.018V74C318.018 71.7909 316.227 70 314.018 70H277.943C275.734 70 273.943 71.7909 273.943 74Z"
+        fill="#D9D9D9"
+        fillOpacity="0.35"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M288.161 92.683H306.17L298.666 81.8699L294.164 88.0488L292.663 86.5041L288.161 92.683ZM290.321 82.736C290.743 83.1705 291.316 83.4147 291.913 83.4147C292.51 83.4147 293.083 83.1705 293.505 82.736C293.927 82.3015 294.164 81.7121 294.164 81.0976C294.164 80.4831 293.927 79.8937 293.505 79.4592C293.083 79.0246 292.51 78.7805 291.913 78.7805C291.316 78.7805 290.743 79.0246 290.321 79.4592C289.899 79.8937 289.662 80.4831 289.662 81.0976C289.662 81.7121 289.899 82.3015 290.321 82.736Z"
+        fill="#A0A0A0"
+      />
+      <line
+        x1="335.815"
+        y1="120.145"
+        x2="354.298"
+        y2="120.145"
+        stroke="#D9D9D9"
+        strokeWidth="1.5"
+      />
+      <line
+        x1="332.967"
+        y1="114.583"
+        x2="357.137"
+        y2="114.583"
+        stroke="#D9D9D9"
+        strokeWidth="1.5"
+      />
+      <path d="M331.548 106.715H358.561" stroke="#A0A0A0" strokeWidth="2" />
+      <rect
+        x="323.518"
+        y="70.5"
+        width="43.0748"
+        height="59"
+        rx="3.5"
+        stroke="#D9D9D9"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M323.018 74V99.2683H367.092V74C367.092 71.7909 365.302 70 363.092 70H327.018C324.808 70 323.018 71.7909 323.018 74Z"
+        fill="#D9D9D9"
+        fillOpacity="0.35"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M337.235 92.683H355.244L347.741 81.8699L343.238 88.0488L341.738 86.5041L337.235 92.683ZM339.395 82.736C339.818 83.1705 340.39 83.4147 340.987 83.4147C341.584 83.4147 342.157 83.1705 342.579 82.736C343.001 82.3015 343.238 81.7121 343.238 81.0976C343.238 80.4831 343.001 79.8937 342.579 79.4592C342.157 79.0246 341.584 78.7805 340.987 78.7805C340.39 78.7805 339.818 79.0246 339.395 79.4592C338.973 79.8937 338.736 80.4831 338.736 81.0976C338.736 81.7121 338.973 82.3015 339.395 82.736Z"
+        fill="#A0A0A0"
+      />
+    </svg>
+  )
+}
diff --git a/src/assets/images/EditorDividerImage.tsx b/src/assets/images/EditorDividerImage.tsx
new file mode 100644
index 000000000..2c3bb35e1
--- /dev/null
+++ b/src/assets/images/EditorDividerImage.tsx
@@ -0,0 +1,17 @@
+export const EditorDividerImage = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="48" height="48" fill="white" />
+      <line x1="6" y1="24" x2="42" y2="24" stroke="#BFC2C8" strokeWidth="2" />
+    </svg>
+  )
+}
diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts
index 30ca9f72a..53f98f119 100644
--- a/src/assets/images/index.ts
+++ b/src/assets/images/index.ts
@@ -26,3 +26,7 @@ export * from "./SingpassLogo"
 export * from "./EmptyAlbumImage"
 export * from "./EmptyDirectoryImage"
 export * from "./BulkUploadAnnouncementImage"
+export * from "./EditorAccordionImage"
+export * from "./EditorCardsImage"
+export * from "./EditorDividerImage"
+export * from "./EditorCardsPlaceholderImage"
diff --git a/src/components/Editable/Editable.tsx b/src/components/Editable/Editable.tsx
index cdf39486b..f39a59e87 100644
--- a/src/components/Editable/Editable.tsx
+++ b/src/components/Editable/Editable.tsx
@@ -177,10 +177,13 @@ type ContactUsDroppableZone =
 
 type NavDroppableZone = "link" | `sublink-${number}`
 
+type NormalPageDroppableZone = "cards"
+
 type DroppableZone =
   | HomepageDroppableZone
   | ContactUsDroppableZone
   | NavDroppableZone
+  | NormalPageDroppableZone
 
 type DropInfo = {
   droppableId: DroppableZone
diff --git a/src/components/EditorCardsDrawer/EditorCardItem.tsx b/src/components/EditorCardsDrawer/EditorCardItem.tsx
new file mode 100644
index 000000000..dffb83306
--- /dev/null
+++ b/src/components/EditorCardsDrawer/EditorCardItem.tsx
@@ -0,0 +1,238 @@
+import {
+  Box,
+  FormControl,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react"
+import {
+  Button,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  Input,
+  ModalCloseButton,
+  Textarea,
+} from "@opengovsg/design-system-react"
+import _ from "lodash"
+import { UseFormReturn } from "react-hook-form"
+
+import { Editable } from "components/Editable"
+import { FormContext } from "components/Form"
+import FormFieldMedia from "components/FormFieldMedia"
+
+import { TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT } from "constants/tiptap"
+
+import { useEditableContext } from "contexts/EditableContext"
+
+import { EditorCardsInfo } from "types/editPage"
+
+interface EditorCardItemProps {
+  index: number
+  methods: UseFormReturn<EditorCardsInfo, unknown, undefined>
+}
+
+export const EditorCardItem = ({
+  index,
+  methods,
+}: EditorCardItemProps): JSX.Element => {
+  const { onChange, onDelete } = useEditableContext()
+  const {
+    isOpen: isDeleteWarningModalOpen,
+    onOpen: onDeleteWarningModalOpen,
+    onClose: onDeleteWarningModalClose,
+  } = useDisclosure()
+  const { errors } = methods.formState
+
+  return (
+    <>
+      <Modal
+        isOpen={isDeleteWarningModalOpen}
+        onClose={onDeleteWarningModalClose}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalCloseButton />
+
+          <ModalHeader>
+            <Text as="h4" textStyle="h4">
+              Are you sure you want to delete this card?
+            </Text>
+          </ModalHeader>
+
+          <ModalBody>
+            <Text as="p" textStyle="body-2" mt="0.5rem">
+              This cannot be undone.
+            </Text>
+          </ModalBody>
+
+          <ModalFooter>
+            <HStack w="100%" spacing={4} justifyContent="flex-end" mt="0.5rem">
+              <Button
+                variant="clear"
+                colorScheme="neutral"
+                onClick={onDeleteWarningModalClose}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="critical"
+                onClick={() => {
+                  onDelete(`cards-${index}`, "cards")
+                }}
+              >
+                Delete
+              </Button>
+            </HStack>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
+      <Editable.DraggableAccordionItem
+        index={index}
+        title={methods.watch(`cards.${index}.title`) || `Card #${index + 1}`}
+        draggableId={`cards-${index}`}
+        isInvalid={_.some(errors.cards?.[index])}
+        isNested
+      >
+        <VStack w="100%" spacing="1rem" p="0.5rem">
+          {/* Card image */}
+          {methods.watch("isDisplayImage") && (
+            <>
+              <Box w="100%">
+                <FormContext
+                  hasError={!!errors.cards?.[index]?.image}
+                  onFieldChange={(e) => {
+                    methods.setValue(`cards.${index}.image`, e.target.value)
+                    methods.trigger()
+                    onChange(e)
+                  }}
+                >
+                  <FormLabel mt="0.25rem" mb="0.5rem" isRequired>
+                    Image
+                  </FormLabel>
+                  <FormFieldMedia
+                    id={`cards.${index}.image`}
+                    placeholder="Browse an image"
+                    register={methods.register}
+                    inlineButtonText="Browse"
+                  />
+                  <FormErrorMessage>
+                    {errors.cards?.[index]?.image?.message}
+                  </FormErrorMessage>
+                </FormContext>
+              </Box>
+
+              {/* Card image alt text */}
+              <FormControl
+                isRequired
+                isInvalid={!!errors.cards?.[index]?.altText}
+              >
+                <FormLabel mb={0}>Alt text</FormLabel>
+                <FormLabel.Description>
+                  A short description about the image for accessibility and SEO
+                </FormLabel.Description>
+                <Input
+                  mt="0.75rem"
+                  type="text"
+                  placeholder="Add a descriptive text about the image"
+                  {...methods.register(`cards.${index}.altText`, { onChange })}
+                />
+                <FormErrorMessage>
+                  {errors.cards?.[index]?.altText?.message}
+                </FormErrorMessage>
+              </FormControl>
+            </>
+          )}
+
+          {/* Card title */}
+          <FormControl isRequired isInvalid={!!errors.cards?.[index]?.title}>
+            <FormLabel mb="0.75rem">Title</FormLabel>
+            <Input
+              type="text"
+              placeholder="This is the title of the card"
+              {...methods.register(`cards.${index}.title`, { onChange })}
+            />
+            <FormErrorMessage>
+              {errors.cards?.[index]?.title?.message}
+            </FormErrorMessage>
+          </FormControl>
+
+          {/* Card description */}
+          <FormControl isInvalid={!!errors.cards?.[index]?.description}>
+            <FormLabel mb="0.75rem">Description</FormLabel>
+            <Textarea
+              mb={!errors.cards?.[index]?.description ? "0.5rem" : undefined}
+              placeholder="This is a description for the card"
+              {...methods.register(`cards.${index}.description`, { onChange })}
+            />
+            {!errors.cards?.[index]?.description ? (
+              <FormHelperText>
+                {`${Math.max(
+                  0,
+                  TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT -
+                    (methods.watch(`cards.${index}.description`)?.length || 0)
+                )} ${
+                  TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT -
+                    (methods.watch(`cards.${index}.description`)?.length ||
+                      0) ===
+                  1
+                    ? "character"
+                    : "characters"
+                } left`}
+              </FormHelperText>
+            ) : (
+              <FormErrorMessage>
+                {errors.cards?.[index]?.description?.message}
+              </FormErrorMessage>
+            )}
+          </FormControl>
+
+          {/* Card link URL */}
+          <FormControl isRequired isInvalid={!!errors.cards?.[index]?.linkUrl}>
+            <FormLabel mb="0.75rem">Link URL</FormLabel>
+            <Input
+              type="text"
+              placeholder="Insert /page-url or https://"
+              {...methods.register(`cards.${index}.linkUrl`, { onChange })}
+            />
+            <FormErrorMessage>
+              {errors.cards?.[index]?.linkUrl?.message}
+            </FormErrorMessage>
+          </FormControl>
+
+          {/* Card link text */}
+          <FormControl isRequired isInvalid={!!errors.cards?.[index]?.linkText}>
+            <FormLabel mb="0.75rem">Link text</FormLabel>
+            <Input
+              type="text"
+              placeholder="Enter text to be displayed for the link"
+              {...methods.register(`cards.${index}.linkText`, { onChange })}
+            />
+            <FormErrorMessage>
+              {errors.cards?.[index]?.linkText?.message}
+            </FormErrorMessage>
+          </FormControl>
+
+          {/* Delete card button */}
+          <Button
+            variant="clear"
+            id={`cards-${index}`}
+            onClick={onDeleteWarningModalOpen}
+            alignSelf="center"
+            colorScheme="critical"
+          >
+            Delete card
+          </Button>
+        </VStack>
+      </Editable.DraggableAccordionItem>
+    </>
+  )
+}
diff --git a/src/components/EditorCardsDrawer/EditorCardsDrawer.tsx b/src/components/EditorCardsDrawer/EditorCardsDrawer.tsx
new file mode 100644
index 000000000..97aa765ef
--- /dev/null
+++ b/src/components/EditorCardsDrawer/EditorCardsDrawer.tsx
@@ -0,0 +1,366 @@
+import {
+  Box,
+  Flex,
+  FormControl,
+  HStack,
+  Icon,
+  Text,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react"
+import { DragDropContext, OnDragEndResponder } from "@hello-pangea/dnd"
+import { yupResolver } from "@hookform/resolvers/yup"
+import { Button, FormLabel, Toggle } from "@opengovsg/design-system-react"
+import { Editor } from "@tiptap/core"
+import _ from "lodash"
+import { useEffect, useState } from "react"
+import { FormProvider, useFieldArray, useForm } from "react-hook-form"
+import { BiPlus } from "react-icons/bi"
+import * as Yup from "yup"
+
+import { Editable } from "components/Editable"
+import { EditorDrawer } from "components/EditorDrawer"
+import { EditorDrawerCloseWarningModal } from "components/EditorDrawerCloseWarningModal"
+
+import {
+  TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT,
+  TIPTAP_CARDS_MAXIMUM,
+} from "constants/tiptap"
+
+import { EditableContextProvider } from "contexts/EditableContext"
+
+import { EditorCard, EditorCardsInfo } from "types/editPage"
+import { LINK_URL_REGEX } from "utils"
+
+import { EditorCardItem } from "./EditorCardItem"
+
+const editorCardsInfoSchema = Yup.object().shape({
+  isDisplayImage: Yup.boolean(),
+  cards: Yup.array()
+    .when("isDisplayImage", {
+      is: true,
+      then: Yup.array().of(
+        Yup.object().shape({
+          image: Yup.string().required("An image is required"),
+          altText: Yup.string().required("Alt text is required"),
+          title: Yup.string().required("Title is required"),
+          description: Yup.string().max(
+            TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT,
+            `Description cannot exceed ${TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT} characters`
+          ),
+          linkUrl: Yup.string()
+            .required("Link URL is required")
+            .matches(
+              new RegExp(LINK_URL_REGEX),
+              "Please enter a valid link URL"
+            ),
+          linkText: Yup.string().required("Link text is required"),
+        })
+      ),
+      otherwise: Yup.array().of(
+        Yup.object().shape({
+          title: Yup.string().required("Title is required"),
+          description: Yup.string().max(
+            TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT,
+            `Description cannot exceed ${TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT} characters`
+          ),
+          linkUrl: Yup.string()
+            .required("Link URL is required")
+            .matches(
+              new RegExp(LINK_URL_REGEX),
+              "Please enter a valid link URL"
+            ),
+          linkText: Yup.string().required("Link text is required"),
+        })
+      ),
+    })
+    .min(1, "At least one card is required")
+    .max(TIPTAP_CARDS_MAXIMUM, `Maximum of ${TIPTAP_CARDS_MAXIMUM} cards`),
+})
+
+const getEditorCardsContent = (data: EditorCardsInfo): EditorCard[] => {
+  const { isDisplayImage, cards } = data
+
+  return cards.map((card) => {
+    return {
+      image: isDisplayImage ? card.image : "",
+      altText: isDisplayImage ? card.altText : "",
+      title: card.title,
+      description: card.description,
+      linkUrl: card.linkUrl,
+      linkText: card.linkText,
+    }
+  })
+}
+
+interface EditorCardsDrawerProps {
+  editor: Editor
+  isOpen: boolean
+  onClose: () => void
+  onProceed: () => void
+}
+
+export const EditorCardsDrawer = ({
+  editor,
+  isOpen,
+  onClose,
+  onProceed,
+}: EditorCardsDrawerProps): JSX.Element => {
+  const [initialEditorState, setInitialEditorState] = useState<EditorCard[]>([])
+  const {
+    isOpen: isCloseWarningModalOpen,
+    onOpen: onCloseWarningModalOpen,
+    onClose: onCloseWarningModalClose,
+  } = useDisclosure()
+  const methods = useForm<EditorCardsInfo>({
+    mode: "onChange",
+    resolver: yupResolver(editorCardsInfoSchema),
+    defaultValues: {
+      isDisplayImage: true,
+      cards: [],
+    },
+  })
+  const cardsArray = useFieldArray({
+    control: methods.control,
+    name: "cards",
+  })
+
+  const onDrawerClose = () => {
+    const currentFormState: EditorCardsInfo = {
+      isDisplayImage: methods.getValues("isDisplayImage"),
+      cards: methods.getValues("cards"),
+    }
+
+    if (
+      _.isEqual(getEditorCardsContent(currentFormState), initialEditorState)
+    ) {
+      onClose()
+      return
+    }
+
+    onCloseWarningModalOpen()
+  }
+
+  const handleSubmit = (data: EditorCardsInfo) => {
+    editor.commands.setCardsContent(getEditorCardsContent(data))
+    onProceed()
+  }
+
+  const handleForceClose = () => {
+    editor.commands.setCardsContentWithoutHistory(initialEditorState)
+    onCloseWarningModalClose()
+    onClose()
+  }
+
+  const onChange = () => {
+    const cards = methods.getValues("cards")
+    const isDisplayImage = methods.getValues("isDisplayImage")
+
+    const newState = getEditorCardsContent({ isDisplayImage, cards })
+    editor.commands.setCardsContentWithoutHistory(newState)
+  }
+
+  const onDragEnd: OnDragEndResponder = ({ source, destination }) => {
+    if (!destination) return
+    cardsArray.move(source.index, destination.index)
+    onChange()
+  }
+
+  const onCreate = () => {
+    cardsArray.append({
+      image: "https://placehold.co/600x400",
+      altText: "",
+      title: "This is a title for your card",
+      description: "This is body text for your card. Describe your card.",
+      linkUrl: "https://www.isomer.gov.sg",
+      linkText: "This is a link for your card",
+    })
+    onChange()
+  }
+
+  const onDelete = (id: string, type: string) => {
+    if (type !== "cards") return
+
+    const index = parseInt(id.split("-")[1], 10)
+    cardsArray.remove(index)
+    onChange()
+  }
+
+  const displayHandler = () => {
+    methods.trigger()
+  }
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const selection = editor.state.selection.content().content
+
+    if (
+      selection.childCount === 1 &&
+      selection.child(0).type.name === "isomercards"
+    ) {
+      const cardGrid = selection.child(0)
+
+      const cards = Array(cardGrid.childCount)
+        .fill({})
+        .map((item, index) => cardGrid.child(index))
+        .map((card) => {
+          const output = {
+            image: "",
+            altText: "",
+            title: "",
+            description: "",
+            linkUrl: "",
+            linkText: "",
+          }
+
+          if (card.type.name === "isomerclickablecard") {
+            output.linkUrl = card.attrs.href || ""
+          }
+
+          card.forEach((child) => {
+            if (child.type.name === "isomercardimage") {
+              const grandChild = child.child(0)
+
+              output.image = grandChild.attrs.src || ""
+              output.altText = grandChild.attrs.alt || ""
+            } else if (child.type.name === "isomercardbody") {
+              child.forEach((grandChild) => {
+                switch (grandChild.type.name) {
+                  case "isomercardtitle":
+                    output.title = grandChild.textContent || ""
+                    break
+                  case "isomercarddescription":
+                    output.description = grandChild.textContent || ""
+                    break
+                  case "isomercardlink":
+                    output.linkText = grandChild.textContent || ""
+                    break
+                  default:
+                    break
+                }
+              })
+            }
+          })
+
+          return output
+        })
+
+      const isDisplayImage = _.every(cards, (card) => card.image !== "")
+
+      methods.reset({
+        isDisplayImage,
+        cards,
+      })
+      editor.commands.setCardsContent(cards)
+      setInitialEditorState(cards)
+    }
+  }, [isOpen])
+
+  return (
+    <>
+      <EditorDrawerCloseWarningModal
+        name="card grid"
+        isOpen={isCloseWarningModalOpen}
+        onClose={onCloseWarningModalClose}
+        onProceed={handleForceClose}
+      />
+
+      <form onSubmit={methods.handleSubmit(handleSubmit)}>
+        <FormProvider {...methods}>
+          <EditableContextProvider
+            onDragEnd={onDragEnd}
+            onChange={onChange}
+            onCreate={onCreate}
+            onDelete={onDelete}
+            onDisplay={displayHandler}
+          >
+            <EditorDrawer isOpen={isOpen}>
+              <EditorDrawer.Header onClose={onDrawerClose}>
+                <Text as="h5" textStyle="h5">
+                  Editing card grid
+                </Text>
+              </EditorDrawer.Header>
+
+              <EditorDrawer.Content>
+                {/* Display images setting */}
+                <FormControl isRequired>
+                  <Flex justifyContent="space-between" w="100%">
+                    <Box>
+                      <FormLabel mb={0}>Display image</FormLabel>
+                      <FormLabel.Description>
+                        Applies to all cards in the grid
+                      </FormLabel.Description>
+                    </Box>
+                    <Toggle
+                      isRequired={false}
+                      label=""
+                      isChecked={methods.watch("isDisplayImage")}
+                      {...methods.register("isDisplayImage", {
+                        onChange: () => {
+                          onChange()
+                          methods.trigger()
+                        },
+                      })}
+                    />
+                  </Flex>
+                </FormControl>
+
+                {/* Cards editing section */}
+                <Text as="h6" textStyle="h6" mt="1.5rem">
+                  Edit content
+                </Text>
+                <Editable.Accordion onChange={displayHandler}>
+                  <DragDropContext onDragEnd={onDragEnd}>
+                    <Editable.Droppable width="100%" editableId="cards">
+                      <VStack
+                        spacing="0.75rem"
+                        mt="1rem"
+                        mb="1.25rem"
+                        {...methods.register("cards", {
+                          onChange,
+                        })}
+                      >
+                        {cardsArray.fields.map((card, index) => (
+                          <EditorCardItem
+                            key={card.id}
+                            index={index}
+                            methods={methods}
+                          />
+                        ))}
+                      </VStack>
+                    </Editable.Droppable>
+                  </DragDropContext>
+                </Editable.Accordion>
+
+                {/* Add card button */}
+                <Button
+                  variant="clear"
+                  onClick={onCreate}
+                  ml="-0.5rem"
+                  isDisabled={
+                    methods.getValues("cards").length >= TIPTAP_CARDS_MAXIMUM
+                  }
+                >
+                  <HStack spacing="0.5rem">
+                    <Icon as={BiPlus} fontSize="1.5rem" />
+                    <Text>Add card</Text>
+                  </HStack>
+                </Button>
+              </EditorDrawer.Content>
+
+              <EditorDrawer.Footer>
+                <Button
+                  type="submit"
+                  isDisabled={_.some(methods.formState.errors)}
+                >
+                  Save card grid
+                </Button>
+              </EditorDrawer.Footer>
+            </EditorDrawer>
+          </EditableContextProvider>
+        </FormProvider>
+      </form>
+    </>
+  )
+}
diff --git a/src/components/EditorCardsDrawer/index.ts b/src/components/EditorCardsDrawer/index.ts
new file mode 100644
index 000000000..67daafd10
--- /dev/null
+++ b/src/components/EditorCardsDrawer/index.ts
@@ -0,0 +1,2 @@
+export * from "./EditorCardsDrawer"
+export * from "./EditorCardItem"
diff --git a/src/components/EditorDrawer/EditorDrawer.tsx b/src/components/EditorDrawer/EditorDrawer.tsx
new file mode 100644
index 000000000..cf2c9ba65
--- /dev/null
+++ b/src/components/EditorDrawer/EditorDrawer.tsx
@@ -0,0 +1,96 @@
+import { Grid, GridItem, HStack, Icon, Spacer } from "@chakra-ui/react"
+import { IconButton } from "@opengovsg/design-system-react"
+import React, { PropsWithChildren } from "react"
+import { BiX } from "react-icons/bi"
+
+import { MiniDrawer } from "components/MiniDrawer"
+
+interface EditorDrawerProps {
+  isOpen: boolean
+}
+
+interface EditorDrawerHeaderProps {
+  onClose: () => void
+  children: React.ReactNode
+}
+
+interface EditorDrawerContentProps {
+  children: React.ReactNode
+}
+
+interface EditorDrawerFooterProps {
+  children: React.ReactNode
+}
+
+export const EditorDrawer = ({
+  isOpen,
+  children,
+}: PropsWithChildren<EditorDrawerProps>): JSX.Element => {
+  return (
+    <MiniDrawer isOpen={isOpen} width="45vw">
+      <Grid
+        bgColor="base.canvas.default"
+        w="100%"
+        h="100%"
+        gridTemplateRows="3.25rem 1fr 4rem"
+        gridTemplateAreas="'header' 'content' 'footer'"
+        borderRight="1px solid"
+        borderRightColor="base.divider.medium"
+      >
+        {children}
+      </Grid>
+    </MiniDrawer>
+  )
+}
+
+export const EditorDrawerHeader = ({
+  onClose,
+  children,
+}: EditorDrawerHeaderProps): JSX.Element => {
+  return (
+    <GridItem gridArea="header" pt="1.5rem" pl="1.5rem" pr="0.875rem">
+      <HStack h="1.75rem">
+        {children}
+        <Spacer />
+        <IconButton
+          variant="clear"
+          onClick={onClose}
+          aria-label="close editor drawer"
+        >
+          <Icon as={BiX} fontSize="1.5rem" color="base.content.strong" />
+        </IconButton>
+      </HStack>
+    </GridItem>
+  )
+}
+
+export const EditorDrawerContent = ({
+  children,
+}: EditorDrawerContentProps): JSX.Element => {
+  return (
+    <GridItem gridArea="content" p="1.5rem" overflowY="scroll">
+      {children}
+    </GridItem>
+  )
+}
+
+export const EditorDrawerFooter = ({
+  children,
+}: EditorDrawerFooterProps): JSX.Element => {
+  return (
+    <GridItem
+      gridArea="footer"
+      borderTop="1px solid"
+      borderTopColor="base.divider.medium"
+    >
+      <HStack my="0.625rem" px="2rem">
+        <Spacer />
+        {children}
+      </HStack>
+    </GridItem>
+  )
+}
+
+EditorDrawer.Header = EditorDrawerHeader
+EditorDrawer.Content = EditorDrawerContent
+EditorDrawer.Footer = EditorDrawerFooter
diff --git a/src/components/EditorDrawer/index.ts b/src/components/EditorDrawer/index.ts
new file mode 100644
index 000000000..a92223ca6
--- /dev/null
+++ b/src/components/EditorDrawer/index.ts
@@ -0,0 +1 @@
+export * from "./EditorDrawer"
diff --git a/src/components/EditorDrawerCloseWarningModal/EditorDrawerCloseWarningModal.stories.tsx b/src/components/EditorDrawerCloseWarningModal/EditorDrawerCloseWarningModal.stories.tsx
new file mode 100644
index 000000000..554c96162
--- /dev/null
+++ b/src/components/EditorDrawerCloseWarningModal/EditorDrawerCloseWarningModal.stories.tsx
@@ -0,0 +1,47 @@
+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 { EditorDrawerCloseWarningModal } from "./EditorDrawerCloseWarningModal"
+
+const editorDrawerCloseWarningModalMeta = {
+  title: "Components/Editor/Drawer Close Warning Modal",
+  component: EditorDrawerCloseWarningModal,
+} as Meta<typeof EditorDrawerCloseWarningModal>
+
+interface EditorDrawerCloseWarningModalTemplateArgs {
+  name: string
+}
+
+const editorDrawerCloseWarningModalTemplate: StoryFn<
+  typeof EditorDrawerCloseWarningModal
+> = ({ name }: EditorDrawerCloseWarningModalTemplateArgs) => {
+  const { isOpen, onOpen, onClose } = useDisclosure({ defaultIsOpen: true })
+  const successToast = useSuccessToast()
+  const onProceed = () => {
+    successToast({
+      id: "storybook-editor-drawer-close-warning-success",
+      description: "STORYBOOK: Successfully exited from editor drawer",
+    })
+    onClose()
+  }
+
+  return (
+    <>
+      <Button onClick={onOpen}>Open editor drawer close warning modal</Button>
+      <EditorDrawerCloseWarningModal
+        name={name}
+        isOpen={isOpen}
+        onClose={onClose}
+        onProceed={onProceed}
+      />
+    </>
+  )
+}
+
+export const Default = editorDrawerCloseWarningModalTemplate.bind({})
+Default.args = {}
+
+export default editorDrawerCloseWarningModalMeta
diff --git a/src/components/EditorDrawerCloseWarningModal/EditorDrawerCloseWarningModal.tsx b/src/components/EditorDrawerCloseWarningModal/EditorDrawerCloseWarningModal.tsx
new file mode 100644
index 000000000..90c944edb
--- /dev/null
+++ b/src/components/EditorDrawerCloseWarningModal/EditorDrawerCloseWarningModal.tsx
@@ -0,0 +1,54 @@
+import {
+  HStack,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+} from "@chakra-ui/react"
+import { Button, ModalCloseButton } from "@opengovsg/design-system-react"
+
+interface EditorDrawerCloseWarningModalProps {
+  name: string
+  isOpen: boolean
+  onClose: () => void
+  onProceed: () => void
+}
+
+export const EditorDrawerCloseWarningModal = ({
+  name,
+  isOpen,
+  onClose,
+  onProceed,
+}: EditorDrawerCloseWarningModalProps): JSX.Element => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Are you sure you want to exit {name} editing?</ModalHeader>
+
+        <ModalCloseButton />
+
+        <ModalBody>
+          <Text>
+            You haven’t saved your edits to the {name}. If you exit edit mode,
+            you will lose all your unsaved changes.
+          </Text>
+        </ModalBody>
+
+        <ModalFooter>
+          <HStack w="100%" spacing="1rem" justifyContent="flex-end">
+            <Button variant="clear" colorScheme="neutral" onClick={onClose}>
+              Go back to {name}
+            </Button>
+            <Button colorScheme="critical" onClick={onProceed}>
+              Exit {name} editing
+            </Button>
+          </HStack>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
diff --git a/src/components/EditorDrawerCloseWarningModal/index.ts b/src/components/EditorDrawerCloseWarningModal/index.ts
new file mode 100644
index 000000000..e1c714df6
--- /dev/null
+++ b/src/components/EditorDrawerCloseWarningModal/index.ts
@@ -0,0 +1 @@
+export * from "./EditorDrawerCloseWarningModal"
diff --git a/src/components/EditorEmbedModal/EditorEmbedModal.tsx b/src/components/EditorEmbedModal/EditorEmbedModal.tsx
index ad5bd6df7..360b761ea 100644
--- a/src/components/EditorEmbedModal/EditorEmbedModal.tsx
+++ b/src/components/EditorEmbedModal/EditorEmbedModal.tsx
@@ -57,7 +57,7 @@ export const EditorEmbedModal = ({
           )
           .matches(
             // Blockquote is to allow for Instagram embeds
-            /^(<iframe |<blockquote |<div)(.*)$/s,
+            /^(<iframe|<blockquote|<div)(\s)+(.*)$/s,
             "Please enter a valid embed code"
           )
           .test({
diff --git a/src/components/MiniDrawer/MiniDrawer.tsx b/src/components/MiniDrawer/MiniDrawer.tsx
new file mode 100644
index 000000000..8ce508dfd
--- /dev/null
+++ b/src/components/MiniDrawer/MiniDrawer.tsx
@@ -0,0 +1,30 @@
+import { BoxProps, Slide, SlideProps } from "@chakra-ui/react"
+
+type MiniDrawerProps = SlideProps & {
+  isOpen: boolean
+  width?: BoxProps["width"]
+}
+
+export const MiniDrawer = ({
+  isOpen,
+  width,
+  children,
+  ...rest
+}: MiniDrawerProps): JSX.Element => {
+  return (
+    <Slide
+      direction="left"
+      in={isOpen}
+      style={{
+        zIndex: 10,
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: (width as string) || "100%",
+      }}
+      {...rest}
+    >
+      {children}
+    </Slide>
+  )
+}
diff --git a/src/components/MiniDrawer/index.ts b/src/components/MiniDrawer/index.ts
new file mode 100644
index 000000000..2fdd321d2
--- /dev/null
+++ b/src/components/MiniDrawer/index.ts
@@ -0,0 +1 @@
+export * from "./MiniDrawer"
diff --git a/src/components/media/MediaAltText.jsx b/src/components/media/MediaAltText.jsx
index 27b0d58eb..06eb1e216 100644
--- a/src/components/media/MediaAltText.jsx
+++ b/src/components/media/MediaAltText.jsx
@@ -96,7 +96,13 @@ export const MediaAltText = ({ onProceed, onClose, type }) => {
                      */}
                     <FormField
                       placeholder={formTitle}
-                      {...register("altText")}
+                      {...register("altText", {
+                        maxLength: {
+                          message:
+                            "Alt text should be less than 100 characters",
+                          value: 100,
+                        },
+                      })}
                       id="altText"
                     />
                     <FormError>{errors.altText?.message}</FormError>
diff --git a/src/components/media/MediaModal.jsx b/src/components/media/MediaModal.jsx
index 0bbf6f889..34d5543c8 100644
--- a/src/components/media/MediaModal.jsx
+++ b/src/components/media/MediaModal.jsx
@@ -1,9 +1,7 @@
-import { yupResolver } from "@hookform/resolvers/yup"
 import PropTypes from "prop-types"
 import { useState } from "react"
 import { useForm, FormProvider } from "react-hook-form"
 import { useRouteMatch } from "react-router-dom"
-import * as Yup from "yup"
 
 import { MediaAltText } from "components/media/MediaAltText"
 import MediasSelectModal from "components/media/MediasSelectModal"
@@ -18,13 +16,6 @@ const MediaModal = ({ onClose, onProceed, type, showAltTextModal = false }) => {
 
   const methods = useForm({
     mode: "onTouched",
-    resolver: yupResolver(
-      Yup.object({
-        altText: Yup.string()
-          // .required("Alt text is required")
-          .max(100, "Alt text should be less than 100 characters"),
-      })
-    ),
   })
 
   const [mediaMode, setMediaMode] = useState("select")
@@ -40,6 +31,11 @@ const MediaModal = ({ onClose, onProceed, type, showAltTextModal = false }) => {
     })}`
 
   const onMediaSelect = (media) => {
+    if (!media) {
+      methods.setValue("selectedMedia", undefined)
+      methods.setValue("selectedMediaPath", "")
+      return
+    }
     if (methods.watch("selectedMedia")?.name === media.name) {
       methods.setValue("selectedMedia", undefined)
       methods.setValue("selectedMediaPath", "")
@@ -75,6 +71,8 @@ const MediaModal = ({ onClose, onProceed, type, showAltTextModal = false }) => {
           onProceed={
             showAltTextModal ? () => setMediaMode("details") : onProceed
           }
+          allowExternal={showAltTextModal}
+          onExternalProceed={onProceed}
           onMediaSelect={onMediaSelect}
           onClose={onClose}
           mediaType={type}
@@ -96,4 +94,5 @@ MediaModal.propTypes = {
   onProceed: PropTypes.func.isRequired,
   type: PropTypes.oneOf(["files", "images"]).isRequired,
   showAltTextModal: PropTypes.bool,
+  onExternalProceed: PropTypes.func,
 }
diff --git a/src/components/media/MediasSelectModal.jsx b/src/components/media/MediasSelectModal.jsx
index cc98c1158..b07ebeccd 100644
--- a/src/components/media/MediasSelectModal.jsx
+++ b/src/components/media/MediasSelectModal.jsx
@@ -16,15 +16,32 @@ import {
   HStack,
   BreadcrumbItem,
   BreadcrumbLink,
+  Tab,
+  Tabs,
+  TabList,
+  TabPanels,
+  TabPanel,
+  Grid,
+  GridItem,
+  FormControl,
+  Image,
+  Icon,
 } from "@chakra-ui/react"
 import {
   Button,
   Searchbar,
   Pagination,
   Breadcrumb,
+  FormLabel,
+  Input,
+  SidebarContainer,
+  SidebarItem,
+  FormErrorMessage,
 } from "@opengovsg/design-system-react"
+import _ from "lodash"
 import { useState, useEffect } from "react"
 import { useFormContext } from "react-hook-form"
+import { BiLeftArrowAlt, BiFolder } from "react-icons/bi"
 import { useRouteMatch } from "react-router-dom"
 
 import { ImagePreviewCard } from "components/ImagePreviewCard"
@@ -37,13 +54,15 @@ import { useListMediaFolderFiles } from "hooks/directoryHooks/useListMediaFolder
 import { useListMediaFolderSubdirectories } from "hooks/directoryHooks/useListMediaFolderSubdirectories"
 import { usePaginate } from "hooks/usePaginate"
 
-import { FilePreviewCard, MediaDirectoryCard } from "layouts/Media/components"
+import { FilePreviewCard } from "layouts/Media/components"
 
 import mediaStyles from "styles/isomer-cms/pages/Media.module.scss"
 
 import { getMediaDirectoryName, getMediaLabels } from "utils/media"
 
-import { deslugifyDirectory } from "utils"
+import { deslugifyDirectory, validateExternalImagePermalink } from "utils"
+
+const DEBOUNCE_TIME = 1000
 
 const filterMediaByFileName = (medias, filterTerm) =>
   medias.filter((media) =>
@@ -54,8 +73,38 @@ const titleCase = (str) => {
   return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
 }
 
+const FolderBreadcrumb = ({ mediaDirectoryName, setQueryParams }) => (
+  <VStack>
+    <Breadcrumb alignSelf="start">
+      {mediaDirectoryName &&
+        mediaDirectoryName.split("%2F").map((dir, idx) => (
+          <BreadcrumbItem
+            isCurrentPage={idx === mediaDirectoryName.split("%2F").length - 1}
+          >
+            <BreadcrumbLink
+              onClick={(e) => {
+                e.preventDefault()
+                setQueryParams((prevState) => ({
+                  ...prevState,
+                  mediaDirectoryName: getMediaDirectoryName(
+                    mediaDirectoryName,
+                    { end: idx + 1 }
+                  ),
+                }))
+              }}
+            >
+              {deslugifyDirectory(dir)}
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+        ))}
+    </Breadcrumb>
+  </VStack>
+)
+
 const MediasSelectModal = ({
   onProceed,
+  onExternalProceed,
+  allowExternal,
   onClose,
   onMediaSelect,
   onUpload,
@@ -66,7 +115,20 @@ const MediasSelectModal = ({
   const { params } = useRouteMatch()
   const { fileName } = params
 
-  const { singularMediaLabel, pluralMediaLabel } = getMediaLabels(mediaType)
+  const {
+    watch,
+    handleSubmit,
+    register,
+    formState: { errors },
+    setError,
+    clearErrors,
+  } = useFormContext()
+  const {
+    singularMediaLabel,
+    pluralMediaLabel,
+    articleLabel,
+    singularDirectoryLabel,
+  } = getMediaLabels(mediaType)
 
   const { mediaRoom, mediaDirectoryName } = queryParams
 
@@ -127,38 +189,103 @@ const MediasSelectModal = ({
     searchValue
   ).map(({ name }) => name)
 
-  const { watch, handleSubmit } = useFormContext()
-  return (
-    <Modal
-      isOpen
-      onClose={onClose}
-      size="6xl"
-      scrollBehavior="inside"
-      closeOnOverlayClick={false}
-      isCentered
-    >
-      <ModalOverlay />
-      <ModalContent padding="0.5rem" paddingTop="1rem" maxHeight="90%">
-        <ModalHeader>
-          <VStack alignItems="right" gap="1rem">
-            <HStack justifyContent="space-between">
-              <Text textStyle="h4">{`Add ${mediaRoom.slice(0, -1)}${
-                fileName ? ` to ${decodeURIComponent(fileName)}` : ""
-              }`}</Text>
-              <ModalCloseButton onClick={onClose} position="static" />
-            </HStack>
-            <Text textStyle="body-1">
-              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">
+  const [activeTab, setActiveTab] = useState(0)
+
+  const handleTabChange = (index) => {
+    onMediaSelect("")
+    clearErrors()
+    setActiveTab(index)
+  }
+
+  const debouncedHandleSearch = _.debounce((value) => {
+    setSearchedValue(value)
+    // Perform any other actions you want with the input value
+  }, DEBOUNCE_TIME)
+
+  const internalMediaSelect = (
+    <Grid h="100%" templateColumns="15.25rem 1fr">
+      <GridItem borderColor="base.divider.medium" overflowY="auto" h="50vh">
+        <VStack pr="1.25rem">
+          {queryParams.mediaDirectoryName &&
+            queryParams.mediaDirectoryName !== mediaType && (
+              <Button
+                w="100%"
+                justifyContent="start"
+                variant="clear"
+                alignSelf="start"
+                leftIcon={<Icon as={BiLeftArrowAlt} fontSize="1.25rem" />}
+                color="base.content.default"
+                onClick={() => {
+                  onMediaSelect("")
+                  setQueryParams((prevState) => {
+                    return {
+                      ...prevState,
+                      mediaDirectoryName: getMediaDirectoryName(
+                        queryParams.mediaDirectoryName,
+                        {
+                          end:
+                            queryParams.mediaDirectoryName.split("%2F").length -
+                            1,
+                        }
+                      ),
+                    }
+                  })
+                }}
+              >
+                <Text textStyle="subhead-2" fontSize="1rem">
+                  {deslugifyDirectory(
+                    getMediaDirectoryName(queryParams.mediaDirectoryName, {
+                      start: -2,
+                      end: -1,
+                    })
+                  )}
+                </Text>
+              </Button>
+            )}
+          <Skeleton
+            w="100%"
+            h={
+              isListMediaFolderSubdirectoriesLoading ? "4.5rem" : "fit-content"
+            }
+            isLoaded={!isListMediaFolderSubdirectoriesLoading}
+            pb="2.25rem"
+          >
+            <SidebarContainer>
+              {/* Directories */}
+              {filteredDirectories.map((dir) => (
+                <SidebarItem
+                  icon={BiFolder}
+                  onClick={() => {
+                    onMediaSelect("")
+                    setQueryParams((prevState) => {
+                      return {
+                        ...prevState,
+                        mediaDirectoryName: `${prevState.mediaDirectoryName}%2F${dir.name}`,
+                      }
+                    })
+                  }}
+                >
+                  <Text fontSize="1rem">{dir.name}</Text>
+                </SidebarItem>
+              ))}
+            </SidebarContainer>
+          </Skeleton>
+        </VStack>
+      </GridItem>
+      <GridItem overflowY="auto" h="50vh" pr="0.5rem">
+        <Box pl="1.25rem">
+          <div
+            className={`${mediaStyles.mediaCards} justify-content-center pt-3 pl-2`}
+          >
+            <Flex w="100%" justifyContent="space-between" pb="1.25rem" pt="1px">
               {/* Search medias */}
               <Box>
                 <Searchbar
                   isExpanded
-                  onSearch={(val) => setSearchedValue(val)}
-                  placeholder="Press enter to search"
+                  onChange={({ target }) => {
+                    debouncedHandleSearch(target.value)
+                  }}
+                  placeholder="Start typing to search"
                 />
               </Box>
               {/* Upload medias */}
@@ -170,75 +297,30 @@ const MediasSelectModal = ({
                 Upload new {singularMediaLabel}
               </Button>
             </Flex>
-          </VStack>
-        </ModalHeader>
-        <ModalBody>
-          <Breadcrumb pb="1.25rem">
-            {queryParams.mediaDirectoryName
-              ? queryParams.mediaDirectoryName.split("%2F").map((dir, idx) => (
-                  <BreadcrumbItem
-                    isCurrentPage={
-                      idx ===
-                      queryParams.mediaDirectoryName.split("%2F").length - 1
-                    }
-                  >
-                    <BreadcrumbLink
-                      onClick={(e) => {
-                        e.preventDefault()
-                        setQueryParams((prevState) => ({
-                          ...prevState,
-                          mediaDirectoryName: getMediaDirectoryName(
-                            queryParams.mediaDirectoryName,
-                            { end: idx + 1 }
-                          ),
-                        }))
-                      }}
-                    >
-                      {deslugifyDirectory(dir)}
-                    </BreadcrumbLink>
-                  </BreadcrumbItem>
-                ))
-              : null}
-          </Breadcrumb>
-          <div
-            className={`${mediaStyles.mediaCards} justify-content-center pt-3 pl-2`}
-          >
-            <Skeleton
-              w="100%"
-              h={
-                isListMediaFolderSubdirectoriesLoading
-                  ? "4.5rem"
-                  : "fit-content"
-              }
-              isLoaded={!isListMediaFolderSubdirectoriesLoading}
-              pb="2.25rem"
-            >
-              <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 w="100%" isLoaded={!isListMediaFilesLoading}>
+              {files &&
+                !isListMediaFilesLoading &&
+                (searchValue
+                  ? filteredMedias.length === 0 && (
+                      <VStack
+                        h="100%"
+                        w="100%"
+                        alignItems="center"
+                        justifyContent="center"
+                      >
+                        <Text>
+                          We couldn’t find any {pluralMediaLabel} with “
+                          {searchValue}”.
+                        </Text>
+                      </VStack>
+                    )
+                  : listMediaFilesData.total === 0 && (
+                      <Text>
+                        No {pluralMediaLabel} in this {singularDirectoryLabel}.
+                      </Text>
+                    ))}
 
-            <Skeleton
-              w="100%"
-              h={isListMediaFilesLoading ? "4.5rem" : "fit-content"}
-              isLoaded={!isListMediaFilesLoading}
-            >
-              <SimpleGrid w="100%" columns={3} spacing="2.5%">
+              <SimpleGrid w="100%" columns={3} spacing="1.5rem">
                 {files &&
                   files
                     .filter(({ data }) => filteredMedias.includes(data?.name))
@@ -276,13 +358,8 @@ const MediasSelectModal = ({
                     ))}
               </SimpleGrid>
             </Skeleton>
-          </div>
-        </ModalBody>
-
-        <ModalFooter>
-          <VStack w="100%">
             {files && mediaFolderFiles && total > 0 && (
-              <Center w="100%">
+              <Center w="100%" pt="1rem">
                 <Pagination
                   totalCount={total}
                   pageSize={MEDIA_PAGINATION_SIZE}
@@ -291,16 +368,259 @@ const MediasSelectModal = ({
                 />
               </Center>
             )}
-            <LoadingButton
-              alignSelf="flex-end"
-              id="selectMedia"
-              isDisabled={!watch("selectedMedia")}
-              onClick={handleSubmit((data) => onProceed(data))}
-            >
-              Select
-            </LoadingButton>
-          </VStack>
-        </ModalFooter>
+          </div>
+        </Box>
+      </GridItem>
+    </Grid>
+  )
+
+  return (
+    <Modal
+      isOpen
+      onClose={onClose}
+      size="6xl"
+      scrollBehavior="inside"
+      closeOnOverlayClick={false}
+      isCentered
+      overflowY="hidden"
+    >
+      <ModalOverlay />
+      <ModalContent
+        padding="0.5rem"
+        paddingTop="1rem"
+        maxHeight="90%"
+        overflowY="hidden"
+      >
+        {mediaType === "images" && allowExternal ? (
+          <>
+            <ModalHeader>
+              <VStack alignItems="right" gap="1rem">
+                <HStack justifyContent="space-between">
+                  <Text textStyle="h4">{`Add ${mediaRoom.slice(0, -1)}${
+                    fileName ? ` to ${decodeURIComponent(fileName)}` : ""
+                  }`}</Text>
+                  <ModalCloseButton onClick={onClose} position="static" />
+                </HStack>
+                <Text textStyle="body-1">
+                  You can choose from your {pluralMediaLabel}, upload a new{" "}
+                  {singularMediaLabel}, or add {articleLabel}{" "}
+                  {singularMediaLabel}. You can organise your {pluralMediaLabel}{" "}
+                  in Workspace &gt; {titleCase(pluralMediaLabel)}.
+                </Text>
+                <Tabs width="100%" index={activeTab} onChange={handleTabChange}>
+                  <TabList>
+                    <Tab>Add from {pluralMediaLabel}</Tab>
+                    <Tab>Add by url</Tab>
+                  </TabList>
+                </Tabs>
+                {activeTab === 0 && (
+                  <FolderBreadcrumb
+                    mediaDirectoryName={queryParams.mediaDirectoryName}
+                    setQueryParams={setQueryParams}
+                  />
+                )}
+              </VStack>
+            </ModalHeader>
+            <ModalBody>
+              <Tabs width="100%" index={activeTab} onChange={handleTabChange}>
+                <TabPanels minHeight="16.5rem">
+                  <TabPanel>{internalMediaSelect}</TabPanel>
+                  <TabPanel>
+                    <Grid h="100%" templateColumns="1fr 1fr">
+                      <GridItem
+                        borderRight="1px solid"
+                        borderColor="base.divider.medium"
+                        pr="1.5rem"
+                      >
+                        <Box mb="1.5rem">
+                          <FormControl
+                            isRequired
+                            isInvalid={
+                              !!errors.selectedMediaPath ||
+                              !!errors.externalImageValidation
+                            }
+                          >
+                            <Box mb="0.75rem">
+                              <FormLabel>URL</FormLabel>
+                            </Box>
+                            <Input
+                              w="100%"
+                              id="selectedMediaPath"
+                              type="text"
+                              placeholder="Add a link of the external image"
+                              {...register("selectedMediaPath", {
+                                required: {
+                                  value: true,
+                                  message: "URL is required",
+                                },
+                                validate: (value) => {
+                                  if (activeTab === 0) return undefined
+                                  const errorMessage = validateExternalImagePermalink(
+                                    value
+                                  )
+                                  return errorMessage || true
+                                },
+                              })}
+                            />
+                            <FormErrorMessage>
+                              {(errors.selectedMediaPath &&
+                                errors.selectedMediaPath.message) ||
+                                (errors.externalImageValidation &&
+                                  errors.externalImageValidation.message)}
+                            </FormErrorMessage>
+                          </FormControl>
+                        </Box>
+
+                        <Box>
+                          <FormControl isRequired isInvalid={!!errors.altText}>
+                            <Box mb="0.75rem">
+                              <FormLabel mb="0">Alt text</FormLabel>
+                              <FormLabel.Description color="text.description">
+                                A brief description of your image to improve
+                                accessibility and SEO.
+                              </FormLabel.Description>
+                            </Box>
+
+                            <Input
+                              w="100%"
+                              id="altText"
+                              type="text"
+                              placeholder="Describe your image"
+                              {...register("altText", {
+                                maxLength: {
+                                  value: 100,
+                                  message:
+                                    "Alt text should be less than 100 characters",
+                                },
+                              })}
+                            />
+                            <FormErrorMessage>
+                              {errors.altText && errors.altText.message}
+                            </FormErrorMessage>
+                          </FormControl>
+                        </Box>
+                      </GridItem>
+                      <GridItem pl="1.5rem">
+                        <Text textStyle="subhead-3" alignSelf="start">
+                          Preview
+                        </Text>
+                        <Text textStyle="body-2" alignSelf="start" pb="1rem">
+                          The image may appear differently on your actual page.
+                        </Text>
+                        <Image
+                          alt={watch("altText")}
+                          src={
+                            watch("selectedMediaPath") ||
+                            `data:image/svg+xml;base64,${watch(
+                              "selectedMediaPath"
+                            )}`
+                          }
+                          fallback={
+                            <Flex
+                              background="base.canvas.alt"
+                              h="25rem"
+                              w="40rem"
+                              alignItems="center"
+                              justifyContent="center"
+                            >
+                              <Text color="base.content.medium">
+                                Your image will appear here.
+                              </Text>
+                            </Flex>
+                          }
+                          onLoad={(event) => {
+                            clearErrors("externalImageValidation")
+                            const { naturalWidth, naturalHeight } = event.target
+                            const maxSize = 5 * 1024 * 1024
+                            if (naturalHeight * naturalWidth > maxSize) {
+                              setError("externalImageValidation", {
+                                type: "custom",
+                                message: "The image size exceeds 5MB.",
+                              })
+                            }
+                          }}
+                          onError={() => {
+                            if (activeTab === 0) return
+                            if (!errors.selectedMediaPath)
+                              setError("externalImageValidation", {
+                                type: "custom",
+                                message:
+                                  "The provided URL does not point to a valid image.",
+                              })
+                          }}
+                        />
+                      </GridItem>
+                    </Grid>
+                  </TabPanel>
+                </TabPanels>
+              </Tabs>
+            </ModalBody>
+
+            <ModalFooter>
+              <Flex>
+                <LoadingButton
+                  alignSelf="flex-end"
+                  id="selectMedia"
+                  isDisabled={
+                    !watch("selectedMediaPath") ||
+                    !!errors.selectedMediaPath ||
+                    !!errors.altText ||
+                    !!errors.externalImageValidation
+                  }
+                  onClick={handleSubmit(async (data) => {
+                    if (activeTab === 0) {
+                      onProceed(data)
+                      return
+                    }
+                    onExternalProceed(data)
+                  })}
+                >
+                  Add {singularMediaLabel}
+                  {fileName ? ` to page` : ""}
+                </LoadingButton>
+              </Flex>
+            </ModalFooter>
+          </>
+        ) : (
+          // Files have no external options
+          <>
+            <ModalHeader>
+              <VStack alignItems="right" gap="1rem">
+                <HStack justifyContent="space-between">
+                  <Text textStyle="h4">{`Add ${mediaRoom.slice(0, -1)}${
+                    fileName ? ` to ${decodeURIComponent(fileName)}` : ""
+                  }`}</Text>
+                  <ModalCloseButton onClick={onClose} position="static" />
+                </HStack>
+                <Text textStyle="body-1">
+                  You can choose from your {pluralMediaLabel}, upload a new{" "}
+                  {singularMediaLabel}, or add {articleLabel}{" "}
+                  {singularMediaLabel}. You can organise your {pluralMediaLabel}{" "}
+                  in Workspace &gt; {titleCase(pluralMediaLabel)}.
+                </Text>
+                <FolderBreadcrumb
+                  mediaDirectoryName={queryParams.mediaDirectoryName}
+                />
+              </VStack>
+            </ModalHeader>
+            <ModalBody>{internalMediaSelect}</ModalBody>
+            <ModalFooter>
+              <Flex>
+                <LoadingButton
+                  alignSelf="flex-end"
+                  id="selectMedia"
+                  isDisabled={!watch("selectedMediaPath")}
+                  onClick={handleSubmit((data) => {
+                    onProceed(data)
+                  })}
+                >
+                  Add {singularMediaLabel}
+                  {fileName ? ` to ${decodeURIComponent(fileName)}` : ""}
+                </LoadingButton>
+              </Flex>
+            </ModalFooter>
+          </>
+        )}
       </ModalContent>
     </Modal>
   )
diff --git a/src/constants/featureFlags.ts b/src/constants/featureFlags.ts
index c49cb8259..657cf0d76 100644
--- a/src/constants/featureFlags.ts
+++ b/src/constants/featureFlags.ts
@@ -5,6 +5,7 @@ export const FEATURE_FLAGS = {
   HOMEPAGE_ENABLED_BLOCKS: "homepage_enabled_blocks",
   TIPTAP_EDITOR: "is-tiptap-enabled",
   IS_SHOW_STAGING_BUILD_STATUS_ENABLED: "is_show_staging_build_status_enabled",
+  IS_COMPLEX_BLOCKS_ENABLED: "is_complex_blocks_enabled",
 } as const
 
 export type FeatureFlagsType = typeof FEATURE_FLAGS[keyof typeof FEATURE_FLAGS]
diff --git a/src/constants/tiptap.ts b/src/constants/tiptap.ts
index a4ced59e5..e27e8c39a 100644
--- a/src/constants/tiptap.ts
+++ b/src/constants/tiptap.ts
@@ -1 +1,4 @@
 export const TIPTAP_FORMSG_NODE_PRIORITY = 300
+
+export const TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT = 300
+export const TIPTAP_CARDS_MAXIMUM = 18
diff --git a/src/contexts/EditorDrawerContext.tsx b/src/contexts/EditorDrawerContext.tsx
new file mode 100644
index 000000000..7a63a94dd
--- /dev/null
+++ b/src/contexts/EditorDrawerContext.tsx
@@ -0,0 +1,47 @@
+import { PropsWithChildren, createContext, useContext } from "react"
+
+import { DrawerVariant } from "types/editPage"
+
+interface EditorDrawerContextProps {
+  isAnyDrawerOpen: boolean
+  isDrawerOpen: (drawerVariant: DrawerVariant) => boolean
+  onDrawerOpen: (drawerVariant: DrawerVariant) => () => void
+  onDrawerClose: (drawerVariant: DrawerVariant) => () => void
+  onDrawerProceed: (drawerVariant: DrawerVariant) => () => void
+}
+
+const EditorDrawerContext = createContext<null | EditorDrawerContextProps>(null)
+
+export const useEditorDrawerContext = (): EditorDrawerContextProps => {
+  const editorDrawerContext = useContext(EditorDrawerContext)
+
+  if (!editorDrawerContext) {
+    throw new Error(
+      "useEditorDrawer must be used within an EditorDrawerContextProvider"
+    )
+  }
+
+  return editorDrawerContext
+}
+
+export const EditorDrawerContextProvider = ({
+  isAnyDrawerOpen,
+  isDrawerOpen,
+  onDrawerOpen,
+  onDrawerClose,
+  onDrawerProceed,
+  ...rest
+}: PropsWithChildren<EditorDrawerContextProps>): JSX.Element => {
+  return (
+    <EditorDrawerContext.Provider
+      value={{
+        isAnyDrawerOpen,
+        isDrawerOpen,
+        onDrawerOpen,
+        onDrawerClose,
+        onDrawerProceed,
+      }}
+      {...rest}
+    />
+  )
+}
diff --git a/src/layouts/EditPage/EditPage.tsx b/src/layouts/EditPage/EditPage.tsx
index c89785a09..d7ccdd093 100644
--- a/src/layouts/EditPage/EditPage.tsx
+++ b/src/layouts/EditPage/EditPage.tsx
@@ -1,58 +1,35 @@
 import { useDisclosure } from "@chakra-ui/react"
-import BubbleMenu from "@tiptap/extension-bubble-menu"
-import CharacterCount from "@tiptap/extension-character-count"
-import Highlight from "@tiptap/extension-highlight"
-import Image from "@tiptap/extension-image"
-import Link from "@tiptap/extension-link"
-import Placeholder from "@tiptap/extension-placeholder"
-import Table from "@tiptap/extension-table"
-import TableCell from "@tiptap/extension-table-cell"
-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 Underline from "@tiptap/extension-underline"
-import { getHTMLFromFragment, useEditor } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
+import { getHTMLFromFragment } from "@tiptap/react"
 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"
 
 import { EditorContextProvider } from "contexts/EditorContext"
+import { EditorDrawerContextProvider } from "contexts/EditorDrawerContext"
 import { EditorModalContextProvider } from "contexts/EditorModalContext"
 import { ServicesContext } from "contexts/ServicesContext"
 
 import { useGetPageHook } from "hooks/pageHooks"
 import { useCspHook } from "hooks/settingsHooks"
 
-import {
-  FormSG,
-  FormSGDiv,
-  FormSGIframe,
-  Iframe,
-  IsomerImage,
-  Instagram,
-} from "layouts/components/Editor/extensions"
-
 import { isEmbedCodeValid } from "utils/allowedHTML"
+import { isEmbedActive } from "utils/tiptap"
 
 import { MediaService } from "services"
-import { EditorEmbedContents } from "types/editPage"
+import { DrawerVariant, EditorEmbedContents } from "types/editPage"
 import { getDecodedParams, getImageDetails } from "utils"
 
+import { useTiptapEditor } from "./hooks/useTiptapEditor"
 import { MarkdownEditPage } from "./MarkdownEditPage"
 import { TiptapEditPage } from "./TiptapEditPage"
 
 export const EditPage = () => {
   const params = useParams<{ siteName: string }>()
   const decodedParams = getDecodedParams(params)
-  const { data: initialPageData, isLoading: isLoadingPage } = useGetPageHook(
-    params
-  )
+  const { data: initialPageData } = useGetPageHook(params)
   const { data: csp } = useCspHook()
   const [variant, setVariant] = useState(
     initialPageData?.content?.frontMatter?.variant || "markdown"
@@ -66,41 +43,7 @@ export const EditPage = () => {
       setVariant(initialPageData?.content?.frontMatter?.variant)
   }, [initialPageData?.content?.frontMatter?.variant])
 
-  const editor = useEditor({
-    extensions: [
-      StarterKit,
-      Highlight,
-      TaskList,
-      TaskItem,
-      CharacterCount,
-      IsomerImage,
-      Link.configure({ openOnClick: false, protocols: ["mailto"] }),
-      Iframe,
-      FormSG,
-      FormSGDiv,
-      FormSGIframe,
-      Instagram,
-      Markdown,
-      BubbleMenu.configure({
-        pluginKey: "linkBubble",
-      }),
-      BubbleMenu.configure({
-        pluginKey: "tableBubble",
-      }),
-      BubbleMenu.configure({
-        pluginKey: "imageBubble",
-      }),
-      Table.configure({
-        resizable: false,
-      }),
-      TableRow,
-      TableHeader,
-      TableCell,
-      Underline,
-      Placeholder,
-    ],
-    autofocus: "start",
-  })
+  const editor = useTiptapEditor()
 
   const {
     isOpen: isMediaModalOpen,
@@ -120,6 +63,18 @@ export const EditPage = () => {
     onClose: onEmbedModalClose,
   } = useDisclosure()
 
+  const {
+    isOpen: isCardsDrawerOpen,
+    onOpen: onCardsDrawerOpen,
+    onClose: onCardsDrawerClose,
+  } = useDisclosure()
+
+  const {
+    isOpen: isAccordionDrawerOpen,
+    onOpen: onAccordionDrawerOpen,
+    onClose: onAccordionDrawerClose,
+  } = useDisclosure()
+
   const { siteName } = decodedParams
 
   const { mediaService } = useContext<{ mediaService: MediaService }>(
@@ -129,16 +84,20 @@ export const EditPage = () => {
   if (!editor) return null
 
   const getImageSrc = async (src: string) => {
+    if (src.startsWith("https://")) {
+      // External link, don't modify
+      return { mediaPath: src }
+    }
     const { fileName, imageDirectory } = getImageDetails(src)
-    const { mediaPath, mediaUrl } = await mediaService.get({
+    const { mediaPath } = await mediaService.get({
       siteName,
       mediaDirectoryName: imageDirectory || "images",
       fileName,
     })
-    const nomalisedMediaPath = mediaPath.startsWith("images/")
+    const normalisedMediaPath = mediaPath.startsWith("images/")
       ? `/${mediaPath}`
       : mediaPath
-    return { mediaPath: nomalisedMediaPath, mediaUrl }
+    return { mediaPath: normalisedMediaPath }
   }
 
   const handleEmbedInsert = ({ value }: EditorEmbedContents) => {
@@ -149,6 +108,49 @@ export const EditPage = () => {
     onEmbedModalClose()
   }
 
+  const isDrawerOpen = (drawerType: DrawerVariant) => {
+    if (drawerType === "cards") {
+      return isCardsDrawerOpen
+    }
+    if (drawerType === "accordion") {
+      return isAccordionDrawerOpen
+    }
+    return false
+  }
+
+  const onDrawerOpen = (drawerType: DrawerVariant) => {
+    if (drawerType === "cards") {
+      return onCardsDrawerOpen
+    }
+    if (drawerType === "accordion") {
+      return onAccordionDrawerOpen
+    }
+
+    return () => undefined
+  }
+
+  const onDrawerClose = (drawerType: DrawerVariant) => {
+    if (drawerType === "cards") {
+      return onCardsDrawerClose
+    }
+    if (drawerType === "accordion") {
+      return onAccordionDrawerClose
+    }
+
+    return () => undefined
+  }
+
+  const onDrawerProceed = (drawerType: DrawerVariant) => {
+    if (drawerType === "cards") {
+      return onCardsDrawerClose
+    }
+    if (drawerType === "accordion") {
+      return onAccordionDrawerClose
+    }
+
+    return () => undefined
+  }
+
   return (
     <EditorContextProvider editor={editor}>
       <EditorModalContextProvider
@@ -163,98 +165,106 @@ export const EditPage = () => {
           }
         }}
       >
-        {isHyperlinkModalOpen && (
-          <HyperlinkModal
-            initialText=""
-            onSave={(text, href) => {
-              editor
-                .chain()
-                .focus()
-                .insertContent(
-                  `<a target="_blank" rel="noopener noreferrer nofollow" href="${href}">${text}</a>`
-                )
-                .run()
-              onHyperlinkModalClose()
-            }}
-            onClose={onHyperlinkModalClose}
-          />
-        )}
-        {isMediaModalOpen && (
-          <MediaModal
-            showAltTextModal
-            onClose={onMediaModalClose}
-            type={mediaType}
-            onProceed={async ({ selectedMediaPath, altText }) => {
-              if (mediaType === "images") {
-                const { mediaPath } = await getImageSrc(selectedMediaPath)
-                editor
-                  .chain()
-                  .focus()
-                  .setImage({
-                    src: mediaPath,
-                    alt: altText,
-                  })
-                  .run()
-                // NOTE: If it's a file and there's no selection made, just add a link with default text
-              } else if (editor.state.selection.empty) {
+        <EditorDrawerContextProvider
+          isAnyDrawerOpen={isCardsDrawerOpen || isAccordionDrawerOpen}
+          isDrawerOpen={isDrawerOpen}
+          onDrawerOpen={onDrawerOpen}
+          onDrawerClose={onDrawerClose}
+          onDrawerProceed={onDrawerProceed}
+        >
+          {isHyperlinkModalOpen && (
+            <HyperlinkModal
+              initialText=""
+              onSave={(text, href) => {
                 editor
                   .chain()
                   .focus()
                   .insertContent(
-                    `<a target="_blank" rel="noopener noreferrer nofollow" href="${selectedMediaPath}">${
-                      altText || "file"
-                    }</a>`
+                    `<a target="_blank" rel="noopener noreferrer nofollow" href="${href}">${text}</a>`
                   )
                   .run()
-              } else {
-                editor
-                  .chain()
-                  .focus()
-                  .setLink({ href: selectedMediaPath })
-                  .run()
+                onHyperlinkModalClose()
+              }}
+              onClose={onHyperlinkModalClose}
+            />
+          )}
+          {isMediaModalOpen && (
+            <MediaModal
+              showAltTextModal
+              onClose={onMediaModalClose}
+              type={mediaType}
+              onProceed={async ({ selectedMediaPath, altText }) => {
+                if (mediaType === "images") {
+                  const { mediaPath } = await getImageSrc(selectedMediaPath)
+                  editor
+                    .chain()
+                    .focus()
+                    .setImage({
+                      src: mediaPath,
+                      alt: altText,
+                    })
+                    .run()
+                  // NOTE: If it's a file and there's no selection made, just add a link with default text
+                } else if (editor.state.selection.empty) {
+                  editor
+                    .chain()
+                    .focus()
+                    .insertContent(
+                      `<a target="_blank" rel="noopener noreferrer nofollow" href="${selectedMediaPath}">${
+                        altText || "file"
+                      }</a>`
+                    )
+                    .run()
+                } else {
+                  editor
+                    .chain()
+                    .focus()
+                    .setLink({ href: selectedMediaPath })
+                    .run()
+                }
+                onMediaModalClose()
+              }}
+            />
+          )}
+          {isEmbedModalOpen && (
+            <EditorEmbedModal
+              isOpen={isEmbedModalOpen}
+              onClose={onEmbedModalClose}
+              onProceed={handleEmbedInsert}
+              cursorValue={
+                editor.state.selection.empty || !isEmbedActive(editor)
+                  ? ""
+                  : getHTMLFromFragment(
+                      editor.state.selection.content().content,
+                      editor.schema
+                    )
               }
-              onMediaModalClose()
-            }}
-          />
-        )}
-        {isEmbedModalOpen && (
-          <EditorEmbedModal
-            isOpen={isEmbedModalOpen}
-            onClose={onEmbedModalClose}
-            onProceed={handleEmbedInsert}
-            cursorValue={
-              editor.state.selection.empty
-                ? ""
-                : getHTMLFromFragment(
-                    editor.state.selection.content().content,
-                    editor.schema
-                  )
-            }
-          />
-        )}
+            />
+          )}
 
-        {variant === "markdown" ? (
-          <MarkdownEditPage
-            togglePreview={() => {
-              variant === "markdown"
-                ? setVariant("tiptap")
-                : setVariant("markdown")
-            }}
-          />
-        ) : (
-          <TiptapEditPage
-            // NOTE: We should not use the fetched data if the variant
-            // changed from `markdown` -> `tiptap`.
-            // This is because this implies that the user has
-            // changed the variant from markdown to tiptap.
-            // Hence, there might be changes in either markdown editor content
-            // or in the preview editor that should be persisted.
-            shouldUseFetchedData={
-              variant === "tiptap" &&
-              initialPageData?.content?.frontMatter?.variant === "tiptap"
-            }
-          />
-        )}
+          {variant === "markdown" ? (
+            <MarkdownEditPage
+              togglePreview={() => {
+                variant === "markdown"
+                  ? setVariant("tiptap")
+                  : setVariant("markdown")
+              }}
+            />
+          ) : (
+            <TiptapEditPage
+              // NOTE: We should not use the fetched data if the variant
+              // changed from `markdown` -> `tiptap`.
+              // This is because this implies that the user has
+              // changed the variant from markdown to tiptap.
+              // Hence, there might be changes in either markdown editor content
+              // or in the preview editor that should be persisted.
+              shouldUseFetchedData={
+                variant === "tiptap" &&
+                initialPageData?.content?.frontMatter?.variant === "tiptap"
+              }
+            />
+          )}
+        </EditorDrawerContextProvider>
       </EditorModalContextProvider>
     </EditorContextProvider>
   )
diff --git a/src/layouts/EditPage/EditPageLayout.tsx b/src/layouts/EditPage/EditPageLayout.tsx
index f6f739c92..045a12061 100644
--- a/src/layouts/EditPage/EditPageLayout.tsx
+++ b/src/layouts/EditPage/EditPageLayout.tsx
@@ -20,6 +20,8 @@ import Header from "components/Header"
 import { OverwriteChangesModal } from "components/OverwriteChangesModal"
 import { WarningModal } from "components/WarningModal"
 
+import { useEditorDrawerContext } from "contexts/EditorDrawerContext"
+
 import { useGetMultipleMediaHook } from "hooks/mediaHooks"
 import { useGetPageHook, useUpdatePageHook } from "hooks/pageHooks"
 import { useCspHook, useGetSiteColorsHook } from "hooks/settingsHooks"
@@ -44,6 +46,7 @@ export const EditPageLayout = ({
   variant = "markdown",
   children,
 }: PropsWithChildren<EditPageLayoutProps>) => {
+  const { isAnyDrawerOpen } = useEditorDrawerContext()
   const params = useParams<{ siteName: string }>()
   const decodedParams = getDecodedParams(params)
   const [mediaSrcs, setMediaSrcs] = useState(new Set(""))
@@ -200,7 +203,13 @@ export const EditPageLayout = ({
             isEditPage
             params={decodedParams}
           />
-          <Flex flexDir="row" w="100%" h="100%" alignItems="flex-start">
+          <Flex
+            flexDir="row"
+            w="100%"
+            h="100%"
+            alignItems="flex-start"
+            position="relative"
+          >
             {/* Editor */}
             {children}
           </Flex>
@@ -214,7 +223,7 @@ export const EditPageLayout = ({
               // TODO: Add an alert/modal
               // to warn the user when they violate our csp
               // so they know why + can take action to remedy
-              isDisabled={isContentViolation}
+              isDisabled={isContentViolation || isAnyDrawerOpen}
               isLoading={isSavingPage}
             >
               Save
diff --git a/src/layouts/EditPage/MarkdownEditPage.tsx b/src/layouts/EditPage/MarkdownEditPage.tsx
index 7a66a5462..18ad2651a 100644
--- a/src/layouts/EditPage/MarkdownEditPage.tsx
+++ b/src/layouts/EditPage/MarkdownEditPage.tsx
@@ -10,6 +10,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Spacer,
 } from "@chakra-ui/react"
 import { Button, Infobox } from "@opengovsg/design-system-react"
 import axios from "axios"
@@ -124,7 +125,7 @@ export const MarkdownEditPage = ({ togglePreview }: MarkdownPageProps) => {
       getEditorContent={() => editorValue}
       setEditorContent={(content: string) => setEditorValue(content)}
     >
-      <Box maxW="50%" p="1.25rem">
+      <Box w="100%" p="1.25rem">
         <Flex flexDir="row" bg="gray.100" p="1.38rem" mb="1.38rem">
           <Flex flexDir="column" alignContent="flex-start" mr="1rem">
             <Text textStyle="subhead-1" mb="0.62rem">
@@ -135,6 +136,7 @@ export const MarkdownEditPage = ({ togglePreview }: MarkdownPageProps) => {
               Preview what your page might look like before making the shift.
             </Text>
           </Flex>
+          <Spacer />
           <Button
             variant="outline"
             alignSelf="center"
@@ -159,6 +161,7 @@ export const MarkdownEditPage = ({ togglePreview }: MarkdownPageProps) => {
       <PagePreview
         h="calc(100vh - 0.5rem)"
         w="62.5rem"
+        minW="62.5rem"
         title={initialPageData?.content?.frontMatter?.title || ""}
         chunk={htmlChunk}
       />
diff --git a/src/layouts/EditPage/TiptapEditPage.tsx b/src/layouts/EditPage/TiptapEditPage.tsx
index 685c95852..a36ef85e7 100644
--- a/src/layouts/EditPage/TiptapEditPage.tsx
+++ b/src/layouts/EditPage/TiptapEditPage.tsx
@@ -5,20 +5,23 @@ import { marked } from "marked"
 import { useCallback, useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
 
+import { EditorCardsDrawer } from "components/EditorCardsDrawer"
 import PagePreview from "components/pages/PagePreview"
 
 import { useEditorContext } from "contexts/EditorContext"
+import { useEditorDrawerContext } from "contexts/EditorDrawerContext"
 
 import { useGetMultipleMediaHook } from "hooks/mediaHooks"
 import { useGetPageHook } from "hooks/pageHooks"
 import { useCspHook } from "hooks/settingsHooks"
 
+import { EditorAccordionDrawer } from "layouts/components/EditorAccordionDrawer/EditorAccordionDrawer"
+
 import checkCSP from "utils/cspUtils"
 import { getMediaSrcsFromHtml } from "utils/images"
 
 import { Editor } from "../components/Editor/Editor"
 
-import { DEFAULT_BODY } from "./constants"
 import { EditPageLayout } from "./EditPageLayout"
 import { sanitiseRawHtml, updateHtmlWithMediaData } from "./utils"
 
@@ -31,6 +34,11 @@ interface TiptapEditPageProps {
 export const TiptapEditPage = ({
   shouldUseFetchedData,
 }: TiptapEditPageProps) => {
+  const {
+    isDrawerOpen,
+    onDrawerClose,
+    onDrawerProceed,
+  } = useEditorDrawerContext()
   const params = useParams<{ siteName: string }>()
   const { data: initialPageData, isLoading: isLoadingPage } = useGetPageHook(
     params
@@ -44,9 +52,6 @@ export const TiptapEditPage = ({
       // only if the existing page body has content.
       if (initialPageData?.content?.pageBody) {
         editor?.commands.setContent(initialPageData?.content?.pageBody)
-      } else {
-        // Otherwise, prefill with the default
-        editor?.commands.setContent(DEFAULT_BODY)
       }
     }
     // NOTE: We disable as the editor is a class and holds its own internal state.
@@ -101,8 +106,22 @@ export const TiptapEditPage = ({
       getEditorContent={() => editor.getHTML()}
       variant="tiptap"
     >
+      {/* Editor drawers */}
+      <EditorCardsDrawer
+        editor={editor}
+        isOpen={isDrawerOpen("cards")}
+        onClose={onDrawerClose("cards")}
+        onProceed={onDrawerProceed("cards")}
+      />
+      <EditorAccordionDrawer
+        editor={editor}
+        isOpen={isDrawerOpen("accordion")}
+        onClose={onDrawerClose("accordion")}
+        onProceed={onDrawerProceed("accordion")}
+      />
       {/* Editor */}
       <Editor h="80vh" w="45vw" />
+
       {/* Preview */}
       <PagePreview
         // NOTE: Reserve 45vw for editor
diff --git a/src/layouts/EditPage/constants.ts b/src/layouts/EditPage/constants.ts
deleted file mode 100644
index 949298376..000000000
--- a/src/layouts/EditPage/constants.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export const DEFAULT_BODY = `<h1>Placeholder text</h1>
-
-<h1>This is a heading</h1>
-
-This is a body text.
-
-With the new editor, you can add: 
-
-<ul>
-  <li> Lists </li>
-  <li> Links </li>
-  <li> Tables </li>
-</ul>
-
-and more without using any Markdown.
-
-|  | Header | Header |
-| --- | --- | --- |
-| Content | 123 | 123 |
-| Content | 123 | 123 |
-
-Click on the editor to try it out yourself!`
diff --git a/src/layouts/EditPage/hooks/index.ts b/src/layouts/EditPage/hooks/index.ts
new file mode 100644
index 000000000..b3e138d8e
--- /dev/null
+++ b/src/layouts/EditPage/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./useTiptapEditor"
diff --git a/src/layouts/EditPage/hooks/useTiptapEditor.ts b/src/layouts/EditPage/hooks/useTiptapEditor.ts
new file mode 100644
index 000000000..8efd441e9
--- /dev/null
+++ b/src/layouts/EditPage/hooks/useTiptapEditor.ts
@@ -0,0 +1,110 @@
+import BubbleMenu from "@tiptap/extension-bubble-menu"
+import CharacterCount from "@tiptap/extension-character-count"
+import Highlight from "@tiptap/extension-highlight"
+import Link from "@tiptap/extension-link"
+import Placeholder from "@tiptap/extension-placeholder"
+import TableCell from "@tiptap/extension-table-cell"
+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 Underline from "@tiptap/extension-underline"
+import { useEditor } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import { DetailsContent } from "@tiptap-pro/extension-details-content"
+import { DetailsSummary } from "@tiptap-pro/extension-details-summary"
+import { Markdown } from "tiptap-markdown"
+
+import {
+  Iframe,
+  Instagram,
+  IsomerCard,
+  IsomerCardBody,
+  IsomerCardDescription,
+  IsomerCardImage,
+  IsomerCardLink,
+  IsomerCards,
+  IsomerCardTitle,
+  IsomerClickableCard,
+  IsomerImage,
+  TrailingNode,
+} from "layouts/components/Editor/extensions"
+import { IsomerDetailsGroup } from "layouts/components/Editor/extensions/Details/IsomerDetailGroup"
+import { IsomerDetails } from "layouts/components/Editor/extensions/Details/IsomerDetails"
+import { Table } from "layouts/components/Editor/extensions/Table"
+
+export const useTiptapEditor = () => {
+  return useEditor({
+    extensions: [
+      StarterKit,
+      Highlight,
+      TaskList,
+      TaskItem,
+      CharacterCount,
+      IsomerImage,
+      Link.extend({
+        priority: 100,
+        parseHTML() {
+          return [{ tag: "a:not(.isomer-card)" }]
+        },
+      }).configure({
+        openOnClick: false,
+        protocols: ["mailto"],
+      }),
+      Iframe,
+      Instagram,
+      IsomerCards,
+      IsomerCard,
+      IsomerClickableCard,
+      IsomerCardImage,
+      IsomerCardBody,
+      IsomerCardTitle,
+      IsomerCardDescription,
+      IsomerCardLink,
+      Markdown,
+      BubbleMenu.configure({
+        pluginKey: "linkBubble",
+      }),
+      BubbleMenu.configure({
+        pluginKey: "tableBubble",
+      }),
+      BubbleMenu.configure({
+        pluginKey: "imageBubble",
+      }),
+      BubbleMenu.configure({
+        pluginKey: "cardsBubble",
+      }),
+      Table.configure({
+        resizable: false,
+      }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      Underline,
+      Placeholder.configure({
+        includeChildren: true,
+        placeholder: ({ node }) => {
+          if (node.type.name === "detailsSummary") {
+            return "Summary"
+          }
+
+          return "Start typing here or add content using buttons on the toolbar above."
+        },
+      }),
+      IsomerDetails.configure({
+        HTMLAttributes: {
+          class: "isomer-details",
+        },
+      }),
+      DetailsSummary,
+      DetailsContent.configure({
+        HTMLAttributes: {
+          class: "isomer-details-content",
+        },
+      }),
+      IsomerDetailsGroup,
+      TrailingNode,
+    ],
+    autofocus: "start",
+  })
+}
diff --git a/src/layouts/EditPage/utils.ts b/src/layouts/EditPage/utils.ts
index a6e791674..fbb2f11c0 100644
--- a/src/layouts/EditPage/utils.ts
+++ b/src/layouts/EditPage/utils.ts
@@ -19,6 +19,7 @@ DOMPurify.setConfig({
     "async",
     "mozallowfullscreen",
     "webkitallowfullscreen",
+    "referrerpolicy",
   ],
   // required in case <script> tag appears as the first line of the markdown
   FORCE_BODY: true,
diff --git a/src/layouts/components/Editor/Editor.tsx b/src/layouts/components/Editor/Editor.tsx
index e13f6f81b..9c9b0fd21 100644
--- a/src/layouts/components/Editor/Editor.tsx
+++ b/src/layouts/components/Editor/Editor.tsx
@@ -6,6 +6,8 @@ import { EditorContent } from "@tiptap/react"
 import { useEditorContext } from "contexts/EditorContext"
 
 import { LinkBubbleMenu, MenuBar, TableBubbleMenu } from "./components"
+import { CardsBubbleMenu } from "./components/CardsBubbleMenu"
+import { EmbedBubbleMenu } from "./components/EmbedBubbleMenu"
 import { ImageBubbleMenu } from "./components/ImageBubbleMenu"
 
 export const Editor = (props: BoxProps) => {
@@ -25,13 +27,16 @@ export const Editor = (props: BoxProps) => {
         <LinkBubbleMenu />
         <ImageBubbleMenu />
         <TableBubbleMenu />
+        <CardsBubbleMenu />
+        <EmbedBubbleMenu />
         <Box
           as={EditorContent}
           editor={editor}
           flex="1 1 auto"
           overflowX="hidden"
           overflowY="auto"
-          p="1.25rem 1rem"
+          px="2rem"
+          py="1rem"
           h="100%"
         />
         <Divider borderColor="base.divider.strong" />
diff --git a/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx b/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx
new file mode 100644
index 000000000..95d61bbcc
--- /dev/null
+++ b/src/layouts/components/Editor/components/BlockWrapper/BlockWrapper.tsx
@@ -0,0 +1,54 @@
+import { Box, Text } from "@chakra-ui/react"
+import { NodeViewWrapper } from "@tiptap/react"
+import { PropsWithChildren } from "react"
+
+import "./styles.scss"
+
+interface BlockWrapperProps {
+  name: string
+  isSelected: boolean
+}
+
+export const BlockWrapper = ({
+  name,
+  isSelected,
+  children,
+}: PropsWithChildren<BlockWrapperProps>): JSX.Element => {
+  return (
+    <Box as={NodeViewWrapper}>
+      <Box position="relative" maxW="36.5rem" data-group>
+        <Box
+          _groupHover={{
+            display: "block",
+          }}
+          position="absolute"
+          display={isSelected ? "block" : "none"}
+          top="0px"
+          left="0px"
+          backgroundColor="#055AFF"
+          textColor="white"
+          p="0.25rem"
+        >
+          <Text textStyle="caption-1">{name}</Text>
+        </Box>
+        <Box
+          className="drag-handle"
+          contentEditable="false"
+          draggable="true"
+          data-drag-handle
+        />
+        <Box
+          _hover={{
+            border: "2px solid #055AFF",
+          }}
+          // NOTE: Set transparent border to prevent resize on hover
+          // as border will affect calculated width and height
+          border={isSelected ? "2px solid #055AFF" : "2px solid transparent"}
+          objectFit="contain"
+        >
+          {children}
+        </Box>
+      </Box>
+    </Box>
+  )
+}
diff --git a/src/layouts/components/Editor/components/BlockWrapper/index.ts b/src/layouts/components/Editor/components/BlockWrapper/index.ts
new file mode 100644
index 000000000..9773a9b5d
--- /dev/null
+++ b/src/layouts/components/Editor/components/BlockWrapper/index.ts
@@ -0,0 +1 @@
+export * from "./BlockWrapper"
diff --git a/src/layouts/components/Editor/components/BlockWrapper/styles.scss b/src/layouts/components/Editor/components/BlockWrapper/styles.scss
new file mode 100644
index 000000000..5899b1f3b
--- /dev/null
+++ b/src/layouts/components/Editor/components/BlockWrapper/styles.scss
@@ -0,0 +1,13 @@
+.drag-handle {
+  flex: 0 0 auto;
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  top: 0rem;
+  left: -1.25rem;
+  cursor: grab;
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
diff --git a/src/layouts/components/Editor/components/CardsBubbleMenu.tsx b/src/layouts/components/Editor/components/CardsBubbleMenu.tsx
new file mode 100644
index 000000000..1ed4de0cd
--- /dev/null
+++ b/src/layouts/components/Editor/components/CardsBubbleMenu.tsx
@@ -0,0 +1,88 @@
+import { HStack, Icon } from "@chakra-ui/react"
+import { IconButton, Tooltip } from "@opengovsg/design-system-react"
+import { BubbleMenu } from "@tiptap/react"
+import { BiPencil, BiTrash } from "react-icons/bi"
+
+import { useEditorContext } from "contexts/EditorContext"
+import { useEditorDrawerContext } from "contexts/EditorDrawerContext"
+
+const CardsButton = () => {
+  const { onDrawerOpen } = useEditorDrawerContext()
+  const { editor } = useEditorContext()
+
+  return (
+    <>
+      <HStack
+        bgColor="#fafafa"
+        borderRadius="0.25rem"
+        border="1px solid"
+        borderColor="base.divider.medium"
+        boxShadow="0px 8px 12px 0px rgba(187, 187, 187, 0.50)"
+        px="0.5rem"
+        py="0.25rem"
+      >
+        <Tooltip label="Edit card grid" hasArrow placement="top">
+          <IconButton
+            _hover={{ bg: "gray.100" }}
+            _active={{ bg: "gray.200" }}
+            onClick={onDrawerOpen("cards")}
+            bgColor="transparent"
+            border="none"
+            h="1.75rem"
+            w="1.75rem"
+            minH="1.75rem"
+            minW="1.75rem"
+            p="0.25rem"
+            aria-label="edit cards block"
+          >
+            <Icon
+              as={BiPencil}
+              fontSize="1.25rem"
+              color="base.content.medium"
+            />
+          </IconButton>
+        </Tooltip>
+        <Tooltip label="Delete card grid" hasArrow placement="top">
+          <IconButton
+            _hover={{ bg: "gray.100" }}
+            _active={{ bg: "gray.200" }}
+            onClick={() => editor.chain().focus().deleteCards().run()}
+            bgColor="transparent"
+            border="none"
+            h="1.75rem"
+            w="1.75rem"
+            minH="1.75rem"
+            minW="1.75rem"
+            p="0.25rem"
+            aria-label="delete cards block"
+          >
+            <Icon
+              as={BiTrash}
+              fontSize="1.25rem"
+              color="interaction.critical.default"
+            />
+          </IconButton>
+        </Tooltip>
+      </HStack>
+    </>
+  )
+}
+
+export const CardsBubbleMenu = () => {
+  const { editor } = useEditorContext()
+
+  return (
+    <BubbleMenu
+      shouldShow={() => editor.isActive("isomercards")}
+      editor={editor}
+      tippyOptions={{
+        duration: 100,
+        placement: "top-start",
+        offset: [511, -16],
+        zIndex: 0,
+      }}
+    >
+      <CardsButton />
+    </BubbleMenu>
+  )
+}
diff --git a/src/layouts/components/Editor/components/EmbedBubbleMenu.tsx b/src/layouts/components/Editor/components/EmbedBubbleMenu.tsx
new file mode 100644
index 000000000..8996a6896
--- /dev/null
+++ b/src/layouts/components/Editor/components/EmbedBubbleMenu.tsx
@@ -0,0 +1,123 @@
+import { HStack, Icon, useDisclosure } from "@chakra-ui/react"
+import { IconButton, Tooltip } from "@opengovsg/design-system-react"
+import { BubbleMenu, getHTMLFromFragment } from "@tiptap/react"
+import { BiPencil, BiTrash } from "react-icons/bi"
+
+import { EditorEmbedModal } from "components/EditorEmbedModal"
+
+import { useEditorContext } from "contexts/EditorContext"
+
+import { useCspHook } from "hooks/settingsHooks"
+
+import { isEmbedCodeValid } from "utils/allowedHTML"
+import { isEmbedActive } from "utils/tiptap"
+
+import { EditorEmbedContents } from "types/editPage"
+
+const EmbedButton = () => {
+  const {
+    isOpen: isEmbedModalOpen,
+    onOpen: onEmbedModalOpen,
+    onClose: onEmbedModalClose,
+  } = useDisclosure()
+  const { editor } = useEditorContext()
+  const { data: csp } = useCspHook()
+
+  const handleEmbedInsert = ({ value }: EditorEmbedContents) => {
+    if (isEmbedCodeValid(csp, value)) {
+      editor.chain().focus().insertContent(value.replaceAll("\n", "")).run()
+    }
+
+    onEmbedModalClose()
+  }
+
+  return (
+    <>
+      <EditorEmbedModal
+        isOpen={isEmbedModalOpen}
+        onClose={onEmbedModalClose}
+        onProceed={handleEmbedInsert}
+        cursorValue={
+          editor.state.selection.empty
+            ? ""
+            : getHTMLFromFragment(
+                editor.state.selection.content().content,
+                editor.schema
+              )
+        }
+      />
+
+      <HStack
+        bgColor="#fafafa"
+        borderRadius="0.25rem"
+        border="1px solid"
+        borderColor="base.divider.medium"
+        boxShadow="0px 8px 12px 0px rgba(187, 187, 187, 0.50)"
+        px="0.5rem"
+        py="0.25rem"
+      >
+        <Tooltip label="Edit embed" hasArrow placement="top">
+          <IconButton
+            _hover={{ bg: "gray.100" }}
+            _active={{ bg: "gray.200" }}
+            onClick={onEmbedModalOpen}
+            bgColor="transparent"
+            border="none"
+            h="1.75rem"
+            w="1.75rem"
+            minH="1.75rem"
+            minW="1.75rem"
+            p="0.25rem"
+            aria-label="edit embed code"
+          >
+            <Icon
+              as={BiPencil}
+              fontSize="1.25rem"
+              color="base.content.medium"
+            />
+          </IconButton>
+        </Tooltip>
+        <Tooltip label="Delete embed" hasArrow placement="top">
+          <IconButton
+            _hover={{ bg: "gray.100" }}
+            _active={{ bg: "gray.200" }}
+            onClick={() => editor.chain().focus().deleteIframe().run()}
+            bgColor="transparent"
+            border="none"
+            h="1.75rem"
+            w="1.75rem"
+            minH="1.75rem"
+            minW="1.75rem"
+            p="0.25rem"
+            aria-label="delete embed content"
+          >
+            <Icon
+              as={BiTrash}
+              fontSize="1.25rem"
+              color="interaction.critical.default"
+            />
+          </IconButton>
+        </Tooltip>
+      </HStack>
+    </>
+  )
+}
+
+export const EmbedBubbleMenu = () => {
+  const { editor } = useEditorContext()
+
+  return (
+    <BubbleMenu
+      shouldShow={() => isEmbedActive(editor)}
+      editor={editor}
+      tippyOptions={{
+        duration: 100,
+        placement: "top-end",
+        offset: [0, -16],
+        zIndex: 0,
+      }}
+    >
+      <EmbedButton />
+    </BubbleMenu>
+  )
+}
diff --git a/src/layouts/components/Editor/components/ImageBubbleMenu.tsx b/src/layouts/components/Editor/components/ImageBubbleMenu.tsx
deleted file mode 100644
index eb73644bb..000000000
--- a/src/layouts/components/Editor/components/ImageBubbleMenu.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { BubbleMenu } from "@tiptap/react"
-
-import { useEditorContext } from "contexts/EditorContext"
-import { useEditorModal } from "contexts/EditorModalContext"
-
-const ImageLinkButton = () => {
-  const { showModal } = useEditorModal()
-
-  return (
-    <>
-      <button
-        // TODO: Replace with a nice looking button
-        style={{
-          border: "1px solid black",
-          borderRadius: "5px",
-          padding: "1px 6px",
-          backgroundColor: "white",
-        }}
-        type="button"
-        onClick={() => {
-          showModal("images")
-        }}
-      >
-        Change image
-      </button>
-    </>
-  )
-}
-
-export const ImageBubbleMenu = () => {
-  const { editor } = useEditorContext()
-
-  return (
-    <BubbleMenu
-      shouldShow={() => editor.isActive("image")}
-      editor={editor}
-      tippyOptions={{ duration: 100 }}
-    >
-      <ImageLinkButton />
-    </BubbleMenu>
-  )
-}
diff --git a/src/layouts/components/Editor/components/ImageBubbleMenu/ImageAltTextPopover.tsx b/src/layouts/components/Editor/components/ImageBubbleMenu/ImageAltTextPopover.tsx
new file mode 100644
index 000000000..c7d011624
--- /dev/null
+++ b/src/layouts/components/Editor/components/ImageBubbleMenu/ImageAltTextPopover.tsx
@@ -0,0 +1,105 @@
+import { FormControl, HStack } from "@chakra-ui/react"
+import { yupResolver } from "@hookform/resolvers/yup"
+import {
+  Button,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+} from "@opengovsg/design-system-react"
+import { useEffect } from "react"
+import { FormProvider, useForm } from "react-hook-form"
+import * as Yup from "yup"
+
+import { FormDescription } from "components/Form"
+
+import { useEditorContext } from "contexts/EditorContext"
+
+interface ImageAltTextPopoverProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const ImageAltTextPopover = ({
+  isOpen,
+  onClose,
+}: ImageAltTextPopoverProps): JSX.Element => {
+  const { editor } = useEditorContext()
+  const methods = useForm({
+    mode: "onTouched",
+    resolver: yupResolver(
+      Yup.object().shape({
+        value: Yup.string(),
+      })
+    ),
+    defaultValues: {
+      value: "",
+    },
+  })
+
+  const handleSubmit = (data: { value: string }) => {
+    const node = editor.state.selection.content().content.firstChild
+
+    if (!node) {
+      onClose()
+      return
+    }
+
+    const isomerImageAttrs = {
+      src: node.attrs.src,
+      width: node.attrs.width,
+      href: node.attrs.href,
+    }
+
+    editor
+      .chain()
+      .focus()
+      .setImage({
+        alt: data.value,
+        ...isomerImageAttrs,
+      })
+      .run()
+
+    onClose()
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      methods.setValue(
+        "value",
+        editor.state.selection.content().content.firstChild?.attrs.alt ?? ""
+      )
+    }
+  }, [isOpen])
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(handleSubmit)}>
+        <FormControl isInvalid={!!methods.formState.errors.value}>
+          <FormLabel textStyle="subhead-2" mb={0} isRequired>
+            Alt text
+          </FormLabel>
+          <FormDescription>
+            A short description for accessibility and SEO
+          </FormDescription>
+
+          <HStack mt="0.5rem" gap="0.625rem">
+            <Input
+              placeholder="Describe your image"
+              {...methods.register("value")}
+            />
+
+            <Button type="submit" isDisabled={!!methods.formState.errors.value}>
+              Save
+            </Button>
+          </HStack>
+
+          {methods.formState.errors.value && (
+            <FormErrorMessage mb={0}>
+              {methods.formState.errors.value.message}
+            </FormErrorMessage>
+          )}
+        </FormControl>
+      </form>
+    </FormProvider>
+  )
+}
diff --git a/src/layouts/components/Editor/components/ImageBubbleMenu/ImageBubbleMenu.tsx b/src/layouts/components/Editor/components/ImageBubbleMenu/ImageBubbleMenu.tsx
new file mode 100644
index 000000000..aea0921b7
--- /dev/null
+++ b/src/layouts/components/Editor/components/ImageBubbleMenu/ImageBubbleMenu.tsx
@@ -0,0 +1,196 @@
+import {
+  HStack,
+  Icon,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+} from "@chakra-ui/react"
+import { Button, IconButton, Tooltip } from "@opengovsg/design-system-react"
+import { BubbleMenu } from "@tiptap/react"
+import { BiLink, BiMoveHorizontal, BiTrash, BiUpload } from "react-icons/bi"
+
+import { useEditorContext } from "contexts/EditorContext"
+import { useEditorModal } from "contexts/EditorModalContext"
+
+import { ImageAltTextPopover } from "./ImageAltTextPopover"
+import { ImageHyperlinkPopover } from "./ImageHyperlinkPopover"
+import { ResizeImagePopover } from "./ResizeImagePopover"
+
+const ImageLinkButton = () => {
+  const { showModal } = useEditorModal()
+  const { editor } = useEditorContext()
+
+  return (
+    <>
+      <HStack
+        bgColor="#fafafa"
+        borderRadius="0.25rem"
+        border="1px solid"
+        borderColor="base.divider.medium"
+        boxShadow="0px 8px 12px 0px rgba(187, 187, 187, 0.50)"
+        px="0.5rem"
+        py="0.25rem"
+      >
+        <Tooltip label="Upload new image" hasArrow placement="top">
+          <IconButton
+            _hover={{ bg: "gray.100" }}
+            _active={{ bg: "gray.200" }}
+            onClick={() => showModal("images")}
+            bgColor="transparent"
+            border="none"
+            h="1.75rem"
+            w="1.75rem"
+            minH="1.75rem"
+            minW="1.75rem"
+            p="0.25rem"
+            aria-label="upload new image"
+          >
+            <Icon
+              as={BiUpload}
+              fontSize="1.25rem"
+              color="base.content.medium"
+            />
+          </IconButton>
+        </Tooltip>
+
+        <Popover placement="bottom">
+          {({ isOpen, onClose }) => (
+            <>
+              <PopoverTrigger>
+                <IconButton
+                  _hover={{ bg: "gray.100" }}
+                  _active={{ bg: "gray.200" }}
+                  bgColor={isOpen ? "gray.200" : "transparent"}
+                  border="none"
+                  h="1.75rem"
+                  w="1.75rem"
+                  minH="1.75rem"
+                  minW="1.75rem"
+                  p="0.25rem"
+                  aria-label="upload new image"
+                >
+                  <Tooltip label="Add hyperlink" hasArrow placement="top">
+                    <Icon
+                      as={BiLink}
+                      fontSize="1.25rem"
+                      color="base.content.medium"
+                    />
+                  </Tooltip>
+                </IconButton>
+              </PopoverTrigger>
+              <PopoverContent w="24rem" mx="1rem">
+                <PopoverBody p="1rem">
+                  <ImageHyperlinkPopover isOpen={isOpen} onClose={onClose} />
+                </PopoverBody>
+              </PopoverContent>
+            </>
+          )}
+        </Popover>
+
+        <Popover placement="bottom">
+          {({ isOpen, onClose }) => (
+            <>
+              <PopoverTrigger>
+                <Button
+                  variant="clear"
+                  colorScheme="neutral"
+                  _hover={{ bg: "gray.100" }}
+                  bgColor={isOpen ? "gray.200" : "transparent"}
+                  size="xs"
+                  minH={0}
+                  minW={0}
+                  paddingInline={0}
+                >
+                  <Text as="p" textStyle="caption-1">
+                    Alt text
+                  </Text>
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent w="24rem" mx="1rem">
+                <PopoverBody p="1rem">
+                  <ImageAltTextPopover isOpen={isOpen} onClose={onClose} />
+                </PopoverBody>
+              </PopoverContent>
+            </>
+          )}
+        </Popover>
+
+        {/* <Popover placement="bottom">
+          {({ isOpen, onClose }) => (
+            <>
+              <PopoverTrigger>
+                <IconButton
+                  _hover={{ bg: "gray.100" }}
+                  bgColor={isOpen ? "gray.200" : "transparent"}
+                  border="none"
+                  h="1.75rem"
+                  w="1.75rem"
+                  minH="1.75rem"
+                  minW="1.75rem"
+                  p="0.25rem"
+                  aria-label="resize image"
+                >
+                  <Tooltip label="Resize image" hasArrow placement="top">
+                    <Icon
+                      as={BiMoveHorizontal}
+                      fontSize="1.25rem"
+                      color="base.content.medium"
+                    />
+                  </Tooltip>
+                </IconButton>
+              </PopoverTrigger>
+              <PopoverContent>
+                <PopoverBody p="1rem">
+                  <ResizeImagePopover isOpen={isOpen} onClose={onClose} />
+                </PopoverBody>
+              </PopoverContent>
+            </>
+          )}
+        </Popover> */}
+
+        <Tooltip label="Remove image" hasArrow placement="top">
+          <IconButton
+            _hover={{ bg: "gray.100" }}
+            _active={{ bg: "gray.200" }}
+            onClick={() => editor.chain().focus().deleteImage().run()}
+            bgColor="transparent"
+            border="none"
+            h="1.75rem"
+            w="1.75rem"
+            minH="1.75rem"
+            minW="1.75rem"
+            p="0.25rem"
+            aria-label="delete image"
+          >
+            <Icon
+              as={BiTrash}
+              fontSize="1.25rem"
+              color="interaction.critical.default"
+            />
+          </IconButton>
+        </Tooltip>
+      </HStack>
+    </>
+  )
+}
+
+export const ImageBubbleMenu = () => {
+  const { editor } = useEditorContext()
+
+  return (
+    <BubbleMenu
+      shouldShow={() => editor.isActive("image")}
+      editor={editor}
+      tippyOptions={{
+        duration: 100,
+        placement: "top-end",
+        offset: [0, -16],
+        zIndex: 0,
+      }}
+    >
+      <ImageLinkButton />
+    </BubbleMenu>
+  )
+}
diff --git a/src/layouts/components/Editor/components/ImageBubbleMenu/ImageHyperlinkPopover.tsx b/src/layouts/components/Editor/components/ImageBubbleMenu/ImageHyperlinkPopover.tsx
new file mode 100644
index 000000000..ed4e6a6a2
--- /dev/null
+++ b/src/layouts/components/Editor/components/ImageBubbleMenu/ImageHyperlinkPopover.tsx
@@ -0,0 +1,106 @@
+import { FormControl, HStack } from "@chakra-ui/react"
+import { yupResolver } from "@hookform/resolvers/yup"
+import {
+  Button,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+} from "@opengovsg/design-system-react"
+import { useEffect } from "react"
+import { FormProvider, useForm } from "react-hook-form"
+import * as Yup from "yup"
+
+import { useEditorContext } from "contexts/EditorContext"
+
+import { LINK_URL_REGEX } from "utils"
+
+interface ImageHyperlinkPopoverProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const ImageHyperlinkPopover = ({
+  isOpen,
+  onClose,
+}: ImageHyperlinkPopoverProps): JSX.Element => {
+  const { editor } = useEditorContext()
+
+  const methods = useForm({
+    mode: "onTouched",
+    resolver: yupResolver(
+      Yup.object().shape({
+        value: Yup.string().matches(
+          new RegExp(LINK_URL_REGEX),
+          "Please enter a valid link URL"
+        ),
+      })
+    ),
+    defaultValues: {
+      value: "",
+    },
+  })
+
+  const handleSubmit = (data: { value: string }) => {
+    const node = editor.state.selection.content().content.firstChild
+
+    if (!node) {
+      onClose()
+      return
+    }
+
+    const isomerImageAttrs = {
+      src: node.attrs.src,
+      alt: node.attrs.alt,
+      width: node.attrs.width,
+    }
+
+    editor
+      .chain()
+      .focus()
+      .setImage({
+        href: data.value,
+        ...isomerImageAttrs,
+      })
+      .run()
+
+    onClose()
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      methods.setValue(
+        "value",
+        editor.state.selection.content().content.firstChild?.attrs.href ?? ""
+      )
+    }
+  }, [isOpen])
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(handleSubmit)}>
+        <FormControl isInvalid={!!methods.formState.errors.value}>
+          <FormLabel textStyle="subhead-2" mb={0} isRequired>
+            URL
+          </FormLabel>
+
+          <HStack mt="0.5rem" gap="0.625rem">
+            <Input
+              placeholder="Add a /permalink or https://"
+              {...methods.register("value")}
+            />
+
+            <Button type="submit" isDisabled={!!methods.formState.errors.value}>
+              Save
+            </Button>
+          </HStack>
+
+          {methods.formState.errors.value && (
+            <FormErrorMessage mb={0}>
+              {methods.formState.errors.value.message}
+            </FormErrorMessage>
+          )}
+        </FormControl>
+      </form>
+    </FormProvider>
+  )
+}
diff --git a/src/layouts/components/Editor/components/ImageBubbleMenu/ResizeImagePopover.tsx b/src/layouts/components/Editor/components/ImageBubbleMenu/ResizeImagePopover.tsx
new file mode 100644
index 000000000..3d1f8ac04
--- /dev/null
+++ b/src/layouts/components/Editor/components/ImageBubbleMenu/ResizeImagePopover.tsx
@@ -0,0 +1,127 @@
+import {
+  FormControl,
+  HStack,
+  InputGroup,
+  InputRightAddon,
+} from "@chakra-ui/react"
+import { yupResolver } from "@hookform/resolvers/yup"
+import {
+  Button,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+} from "@opengovsg/design-system-react"
+import { useEffect } from "react"
+import { FormProvider, useForm } from "react-hook-form"
+import * as Yup from "yup"
+
+import { FormDescription } from "components/Form"
+
+import { useEditorContext } from "contexts/EditorContext"
+
+interface ResizeImagePopoverProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const ResizeImagePopover = ({
+  isOpen,
+  onClose,
+}: ResizeImagePopoverProps): JSX.Element => {
+  const { editor } = useEditorContext()
+
+  const methods = useForm({
+    mode: "onTouched",
+    resolver: yupResolver(
+      Yup.object().shape({
+        value: Yup.number()
+          .transform((value) => (Number.isNaN(value) ? null : value))
+          .nullable()
+          .required("Please enter a valid percentage")
+          .integer("Please enter a whole number")
+          .min(1, "Minimum is 1%")
+          .max(100, "Maximum is 100%"),
+      })
+    ),
+    defaultValues: {
+      value: 100,
+    },
+  })
+
+  const handleSubmit = (data: { value: number }) => {
+    const node = editor.state.selection.content().content.firstChild
+
+    if (!node) {
+      onClose()
+      return
+    }
+
+    const isomerImageAttrs = {
+      src: node.attrs.src,
+      alt: node.attrs.alt,
+      href: node.attrs.href,
+    }
+
+    editor
+      .chain()
+      .focus()
+      .setImage({
+        width: `${data.value}%`,
+        ...isomerImageAttrs,
+      })
+      .run()
+
+    onClose()
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      const initialValue: string | number =
+        editor.state.selection.content().content.firstChild?.attrs.width ?? 100
+
+      if (typeof initialValue === "string") {
+        methods.setValue(
+          "value",
+          initialValue.endsWith("%") ? Number(initialValue.slice(0, -1)) : 100
+        )
+      } else {
+        methods.setValue("value", initialValue)
+      }
+    }
+  }, [isOpen])
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(handleSubmit)}>
+        <FormControl isInvalid={!!methods.formState.errors.value}>
+          <FormLabel textStyle="subhead-2" mb={0} isRequired>
+            Image size
+          </FormLabel>
+          <FormDescription>100% is the original size</FormDescription>
+
+          <HStack mt="0.5rem">
+            <InputGroup>
+              <Input {...methods.register("value")} />
+              <InputRightAddon
+                bgColor="transparent"
+                borderColor="base.divider.strong"
+              >
+                %
+              </InputRightAddon>
+            </InputGroup>
+
+            <Button type="submit" isDisabled={!!methods.formState.errors.value}>
+              Save
+            </Button>
+          </HStack>
+
+          {methods.formState.errors.value && (
+            <FormErrorMessage mb={0}>
+              {methods.formState.errors.value.message}
+            </FormErrorMessage>
+          )}
+        </FormControl>
+      </form>
+    </FormProvider>
+  )
+}
diff --git a/src/layouts/components/Editor/components/ImageBubbleMenu/index.ts b/src/layouts/components/Editor/components/ImageBubbleMenu/index.ts
new file mode 100644
index 000000000..36ae26308
--- /dev/null
+++ b/src/layouts/components/Editor/components/ImageBubbleMenu/index.ts
@@ -0,0 +1,4 @@
+export * from "./ImageAltTextPopover"
+export * from "./ImageBubbleMenu"
+export * from "./ImageHyperlinkPopover"
+export * from "./ResizeImagePopover"
diff --git a/src/layouts/components/Editor/components/MenuBar.tsx b/src/layouts/components/Editor/components/MenuBar.tsx
index 966c16707..17742b7fc 100644
--- a/src/layouts/components/Editor/components/MenuBar.tsx
+++ b/src/layouts/components/Editor/components/MenuBar.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Divider,
   HStack,
   Icon,
@@ -9,6 +10,7 @@ import {
   PopoverContent,
   PopoverTrigger,
   Text,
+  VStack,
 } from "@chakra-ui/react"
 import { Button, Menu } from "@opengovsg/design-system-react"
 import { Editor } from "@tiptap/react"
@@ -23,7 +25,7 @@ import {
   BiLink,
   BiListOl,
   BiListUl,
-  BiMinus,
+  BiPlus,
   BiRedo,
   BiStrikethrough,
   BiTable,
@@ -32,8 +34,18 @@ import {
 } from "react-icons/bi"
 import { IconType } from "react-icons/lib"
 
+import { FEATURE_FLAGS } from "constants/featureFlags"
+
 import { useEditorModal } from "contexts/EditorModalContext"
 
+import { useIsIsomerFeatureOn } from "utils/growthbook"
+
+import {
+  EditorAccordionImage,
+  EditorCardsImage,
+  EditorDividerImage,
+} from "assets"
+
 import { MenuItem } from "./MenuItem"
 
 interface MenuBarItem {
@@ -49,14 +61,16 @@ interface MenuBarItem {
 
 interface MenuBarDivider {
   type: "divider"
+  isHidden?: boolean
 }
 
-interface MenuBarVeritcalList {
+interface MenuBarVerticalList {
   type: "vertical-list"
   buttonWidth: MenuButtonProps["width"]
   menuWidth: MenuListProps["width"]
   defaultTitle: string
   items: MenuBarItem[]
+  isHidden?: boolean
 }
 
 interface MenuBarHorizontalList {
@@ -64,12 +78,30 @@ interface MenuBarHorizontalList {
   label: string
   defaultIcon: IconType
   items: MenuBarItem[]
+  isHidden?: boolean
+}
+
+interface MenuBarDetailedItem {
+  name: string
+  description: string
+  icon: IconType
+  action: () => void
+  isHidden?: boolean
+}
+
+interface MenuBarDetailedList {
+  type: "detailed-list"
+  label: string
+  icon: IconType
+  items: MenuBarDetailedItem[]
+  isHidden?: boolean
 }
 
 type MenuBarEntry =
   | MenuBarDivider
-  | MenuBarVeritcalList
+  | MenuBarVerticalList
   | MenuBarHorizontalList
+  | MenuBarDetailedList
   | MenuBarItem
 
 export const MenuBar = ({ editor }: { editor: Editor }) => {
@@ -217,6 +249,18 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
       title: "Add image",
       action: () => showModal("images"),
     },
+    {
+      type: "item",
+      icon: BiTable,
+      title: "Add table",
+      action: () =>
+        editor
+          .chain()
+          .focus()
+          // NOTE: Default to smallest multi table
+          .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+          .run(),
+    },
     {
       type: "item",
       icon: BiFile,
@@ -231,24 +275,34 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
     },
     {
       type: "divider",
+      isHidden: !useIsIsomerFeatureOn(FEATURE_FLAGS.IS_COMPLEX_BLOCKS_ENABLED),
     },
     {
-      type: "item",
-      icon: BiTable,
-      title: "Add table",
-      action: () =>
-        editor
-          .chain()
-          .focus()
-          // NOTE: Default to smallest multi table
-          .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-          .run(),
-    },
-    {
-      type: "item",
-      icon: BiMinus,
-      title: "Divider",
-      action: () => editor.chain().focus().setHorizontalRule().run(),
+      type: "detailed-list",
+      label: "Add complex blocks",
+      icon: BiPlus,
+      isHidden: !useIsIsomerFeatureOn(FEATURE_FLAGS.IS_COMPLEX_BLOCKS_ENABLED),
+      items: [
+        {
+          name: "Accordion",
+          description: "Let users hide or show content.",
+          icon: EditorAccordionImage,
+          action: () => editor.chain().focus().setHorizontalRule().run(),
+        },
+        {
+          name: "Card grid",
+          description:
+            "Lay out content in a card grid. You can add images, links, and/or text.",
+          icon: EditorCardsImage,
+          action: () => editor.chain().focus().addCards().run(),
+        },
+        {
+          name: "Divider",
+          description: "Use a divider to create sections on your page.",
+          icon: EditorDividerImage,
+          action: () => editor.chain().focus().setHorizontalRule().run(),
+        },
+      ],
     },
     {
       type: "divider",
@@ -272,20 +326,23 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
       bgColor="gray.50"
       flex="0 0 auto"
       flexWrap="wrap"
-      p="0.25rem"
+      pl="0.75rem"
+      pr="0.25rem"
+      py="0.25rem"
       borderBottom="1px solid"
       borderColor="base.divider.strong"
       borderTopRadius="0.25rem"
-      spacing="0.125rem"
+      spacing="0.25rem"
     >
       {items.map((item) => (
         <>
-          {item.type === "divider" && (
+          {item.type === "divider" && !item.isHidden && (
             <Divider
               orientation="vertical"
               border="px solid"
               borderColor="base.divider.strong"
               h="1.25rem"
+              mx="0.25rem"
             />
           )}
 
@@ -303,7 +360,9 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
                       colorScheme="grey"
                       isOpen={isOpen}
                       size="lg"
-                      p="0.75rem"
+                      pl="0.375rem"
+                      pr="0.75rem"
+                      py="0.75rem"
                       w={item.buttonWidth}
                     >
                       {activeItem?.title || item.defaultTitle}
@@ -353,11 +412,11 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
                         bgColor="transparent"
                         border="none"
                         h="1.75rem"
-                        px="0.5rem"
+                        px={0}
                         py="0.25rem"
                         aria-label={item.label}
                       >
-                        <HStack spacing="0.5rem">
+                        <HStack spacing={0}>
                           <Icon
                             as={item.defaultIcon}
                             fontSize="1.25rem"
@@ -372,7 +431,7 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
                       </Button>
                     </HStack>
                   </PopoverTrigger>
-                  <PopoverContent w="7.75rem">
+                  <PopoverContent w="5.75rem">
                     <PopoverBody>
                       <HStack>
                         {item.items.map((subItem) => (
@@ -391,6 +450,79 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
             </Popover>
           )}
 
+          {item.type === "detailed-list" && !item.isHidden && (
+            <Popover placement="bottom" offset={[0, 16]}>
+              <PopoverTrigger>
+                <Button
+                  _hover={{ bg: "gray.100" }}
+                  _active={{ bg: "gray.200" }}
+                  bgColor="transparent"
+                  border="none"
+                  h="1.75rem"
+                  w="1.75rem"
+                  minH="1.75rem"
+                  minW="1.75rem"
+                  p={0}
+                  aria-label={item.label}
+                >
+                  <Icon
+                    as={item.icon}
+                    fontSize="1.25rem"
+                    color="base.content.medium"
+                  />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent>
+                <PopoverBody px={0} py="0.75rem">
+                  <VStack spacing="0.75rem">
+                    {item.items.map(
+                      (subItem) =>
+                        !subItem.isHidden && (
+                          <Button
+                            onClick={subItem.action}
+                            variant="clear"
+                            colorScheme="neutral"
+                            border="none"
+                            h="fit-content"
+                            w="100%"
+                            textAlign="left"
+                            px={0}
+                            py="0.25rem"
+                            aria-label={item.label}
+                            borderRadius={0}
+                            _hover={{ bg: "base.canvas.brand-subtle" }}
+                          >
+                            <HStack
+                              w="100%"
+                              px="1rem"
+                              py="0.75rem"
+                              spacing="0.75rem"
+                              alignItems="flex-start"
+                            >
+                              <Icon
+                                as={subItem.icon}
+                                fontSize="3rem"
+                                borderWidth="1px"
+                                borderStyle="solid"
+                              />
+                              <Box>
+                                <Text textStyle="subhead-2" mb="0.25rem">
+                                  {subItem.name}
+                                </Text>
+                                <Text textStyle="body-2">
+                                  {subItem.description}
+                                </Text>
+                              </Box>
+                            </HStack>
+                          </Button>
+                        )
+                    )}
+                  </VStack>
+                </PopoverBody>
+              </PopoverContent>
+            </Popover>
+          )}
+
           {item.type === "item" && <MenuItem {...item} />}
         </>
       ))}
diff --git a/src/layouts/components/Editor/components/MenuItem.tsx b/src/layouts/components/Editor/components/MenuItem.tsx
index 47adf7bb0..f12ccbaba 100644
--- a/src/layouts/components/Editor/components/MenuItem.tsx
+++ b/src/layouts/components/Editor/components/MenuItem.tsx
@@ -28,6 +28,8 @@ export const MenuItem = ({
       border="none"
       h="1.75rem"
       w="1.75rem"
+      minH="1.75rem"
+      minW="1.75rem"
       p="0.25rem"
       aria-label={title || "divider"}
       isRound={isRound}
diff --git a/src/layouts/components/Editor/extensions/Cards/Cards.ts b/src/layouts/components/Editor/extensions/Cards/Cards.ts
new file mode 100644
index 000000000..2e33f1e01
--- /dev/null
+++ b/src/layouts/components/Editor/extensions/Cards/Cards.ts
@@ -0,0 +1,469 @@
+import { Node } from "@tiptap/core"
+import { Node as ProseMirrorNode, Schema } from "@tiptap/pm/model"
+import { Selection } from "@tiptap/pm/state"
+import { ReactNodeViewRenderer } from "@tiptap/react"
+
+import { EditorCard } from "types/editPage"
+
+import { CardsView } from "./CardsView"
+
+export interface CardOptions {
+  HTMLAttributes: {
+    class: string
+  }
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    cards: {
+      // Add a new card grid block
+      addCards: () => ReturnType
+      // Delete the current card grid block
+      deleteCards: () => ReturnType
+      // Set the content of the current card grid block
+      setCardsContent: (cardContent: EditorCard[]) => ReturnType
+      // Set the content of the current card grid block without updating history
+      setCardsContentWithoutHistory: (cardContent: EditorCard[]) => ReturnType
+    }
+  }
+}
+
+interface CreateCardProps {
+  schema: Schema
+  title?: string
+  description?: string
+  footer?: string
+  link?: string
+  image?: string
+  altText?: string
+}
+
+const createCard = ({
+  schema,
+  title,
+  description,
+  footer,
+  link,
+  image,
+  altText,
+}: CreateCardProps): ProseMirrorNode => {
+  const { nodes } = schema
+  const templateCardBody = []
+  const templateCard = []
+
+  if (title && title !== "") {
+    templateCardBody.push(nodes.isomercardtitle.create({}, schema.text(title)))
+  }
+
+  if (description && description !== "") {
+    templateCardBody.push(
+      nodes.isomercarddescription.create({}, schema.text(description))
+    )
+  }
+
+  if (link && link !== "" && footer && footer !== "") {
+    templateCardBody.push(nodes.isomercardlink.create({}, schema.text(footer)))
+  }
+
+  if (image && image !== "") {
+    templateCard.push(
+      nodes.isomercardimage.create(
+        {},
+        nodes.image.create({
+          src: image,
+          alt: altText ?? "Placeholder image",
+        })
+      )
+    )
+  }
+
+  templateCard.push(nodes.isomercardbody.create({}, templateCardBody))
+
+  if (link) {
+    return nodes.isomerclickablecard.create({ href: link }, templateCard)
+  }
+
+  return nodes.isomercard.create({}, templateCard)
+}
+
+const createCardGrid = (
+  schema: Schema,
+  numberOfCards: number
+): ProseMirrorNode => {
+  const { nodes } = schema
+
+  const cards = Array(numberOfCards).fill(
+    createCard({
+      schema,
+      title: "This is a title for your card",
+      description: "This is body text for your card. Describe your card.",
+      footer: "This is a link for your card",
+      link: "https://www.isomer.gov.sg",
+      image: "https://placehold.co/600x400",
+      altText: "Placeholder image",
+    })
+  )
+
+  return nodes.isomercards.create({}, cards)
+}
+
+const createCardGridWithContent = (
+  schema: Schema,
+  content: EditorCard[]
+): ProseMirrorNode => {
+  const { nodes } = schema
+
+  const cards = content.map((card) =>
+    createCard({
+      schema,
+      title: card.title,
+      description: card.description,
+      footer: card.linkText,
+      link: card.linkUrl,
+      image: card.image,
+      altText: card.altText,
+    })
+  )
+
+  return nodes.isomercards.create({}, cards)
+}
+
+export const IsomerCards = Node.create<CardOptions>({
+  name: "isomercards",
+  group: "block",
+  atom: true,
+  draggable: true,
+  defining: true,
+  selectable: true,
+
+  content: "(isomercard | isomerclickablecard)+",
+
+  addAttributes() {
+    return {
+      class: {
+        default: "isomer-card-grid",
+      },
+    }
+  },
+
+  addCommands() {
+    return {
+      addCards: () => ({ tr, dispatch, editor }) => {
+        const node = createCardGrid(editor.schema, 3)
+
+        if (dispatch) {
+          const offset = tr.selection.anchor + 1
+
+          tr.insert(tr.selection.anchor, node)
+            .scrollIntoView()
+            .setSelection(
+              Selection.near(
+                tr.doc.resolve(tr.doc.resolve(offset).parentOffset)
+              )
+            )
+        }
+
+        return true
+      },
+      deleteCards: () => ({ tr, editor }) => {
+        editor.state.selection.replace(tr)
+        return true
+      },
+      setCardsContent: (content) => ({ tr, dispatch, editor }) => {
+        if (dispatch) {
+          const offset = tr.selection.anchor
+          const node = createCardGridWithContent(editor.schema, content)
+
+          // Note: The selection anchor refers to the starting position of the
+          // current selection (i.e. the card grid block). The selection is the
+          // entire card grid block, which we replace with the updated node.
+          // After replacing the node, we then set the selection again to the
+          // new node so that users can continue updating the same card grid block.
+          tr.replaceSelectionWith(node)
+            .scrollIntoView()
+            .setSelection(
+              Selection.near(
+                tr.doc.resolve(tr.doc.resolve(offset).parentOffset)
+              )
+            )
+        }
+
+        return true
+      },
+      setCardsContentWithoutHistory: (content) => ({
+        tr,
+        dispatch,
+        editor,
+      }) => {
+        if (dispatch) {
+          const offset = tr.selection.anchor
+          const node = createCardGridWithContent(editor.schema, content)
+
+          tr.setMeta("addToHistory", false)
+            .replaceSelectionWith(node)
+            .scrollIntoView()
+            .setSelection(
+              Selection.near(
+                tr.doc.resolve(tr.doc.resolve(offset).parentOffset)
+              )
+            )
+        }
+        return true
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div.isomer-card-grid:has(> div.isomer-card)",
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", HTMLAttributes, 0]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(CardsView)
+  },
+})
+
+export const IsomerCard = Node.create<CardOptions>({
+  name: "isomercard",
+  group: "isomercardblock",
+  draggable: false,
+  selectable: false,
+  defining: false,
+
+  content:
+    "(isomercardimage isomercardbody?) | (isomercardimage? isomercardbody)",
+
+  addAttributes() {
+    return {
+      class: {
+        default: "isomer-card",
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div.isomer-card-grid > div.isomer-card",
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", HTMLAttributes, 0]
+  },
+})
+
+export const IsomerClickableCard = Node.create<CardOptions>({
+  name: "isomerclickablecard",
+  group: "isomercardblock",
+  draggable: false,
+  selectable: false,
+
+  content:
+    "(isomercardimage isomercardbody?) | (isomercardimage? isomercardbody)",
+
+  addAttributes() {
+    return {
+      class: {
+        default: "isomer-card",
+      },
+      href: {
+        default: null,
+      },
+      rel: {
+        default: "noopener noreferrer nofollow",
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div.isomer-card-grid > a.isomer-card",
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["a", HTMLAttributes, 0]
+  },
+})
+
+export const IsomerCardImage = Node.create<CardOptions>({
+  name: "isomercardimage",
+  group: "isomercardblock",
+  draggable: false,
+  selectable: false,
+
+  content: "image",
+
+  addAttributes() {
+    return {
+      class: {
+        default: "isomer-card-image",
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div.isomer-card-grid > div.isomer-card > div.isomer-card-image",
+      },
+      {
+        tag: "div.isomer-card-grid > a.isomer-card > div.isomer-card-image",
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", HTMLAttributes, 0]
+  },
+})
+
+export const IsomerCardBody = Node.create<CardOptions>({
+  name: "isomercardbody",
+  group: "isomercardblock",
+  draggable: false,
+  selectable: false,
+
+  content: `(isomercardtitle isomercarddescription? isomercardlink?) |
+  (isomercardtitle? isomercarddescription isomercardlink?) |
+  (isomercardtitle? isomercarddescription? isomercardlink)`,
+
+  addAttributes() {
+    return {
+      class: {
+        default: "isomer-card-body",
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div.isomer-card-grid > div.isomer-card > div.isomer-card-body",
+      },
+      {
+        tag: "div.isomer-card-grid > a.isomer-card > div.isomer-card-body",
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", HTMLAttributes, 0]
+  },
+})
+
+export const IsomerCardTitle = Node.create<CardOptions>({
+  name: "isomercardtitle",
+  group: "isomercardblock",
+  draggable: false,
+  selectable: false,
+  marks: "",
+
+  content: "text?",
+
+  addAttributes() {
+    return {
+      class: {
+        default: "isomer-card-title",
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag:
+          "div.isomer-card-grid > div.isomer-card > div.isomer-card-body > div.isomer-card-title",
+      },
+      {
+        tag:
+          "div.isomer-card-grid > a.isomer-card > div.isomer-card-body > div.isomer-card-title",
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", HTMLAttributes, 0]
+  },
+})
+
+export const IsomerCardDescription = Node.create<CardOptions>({
+  name: "isomercarddescription",
+  group: "isomercardblock",
+  draggable: false,
+  selectable: false,
+  marks: "",
+
+  content: "text?",
+
+  addAttributes() {
+    return {
+      class: {
+        default: "isomer-card-description",
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag:
+          "div.isomer-card-grid > div.isomer-card > div.isomer-card-body > div.isomer-card-description",
+      },
+      {
+        tag:
+          "div.isomer-card-grid > a.isomer-card > div.isomer-card-body > div.isomer-card-description",
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", HTMLAttributes, 0]
+  },
+})
+
+export const IsomerCardLink = Node.create<CardOptions>({
+  name: "isomercardlink",
+  group: "isomercardblock",
+  draggable: false,
+  selectable: false,
+  marks: "",
+
+  content: "text?",
+
+  addAttributes() {
+    return {
+      class: {
+        default: "isomer-card-link",
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag:
+          "div.isomer-card-grid > div.isomer-card > div.isomer-card-body > div.isomer-card-link",
+      },
+      {
+        tag:
+          "div.isomer-card-grid > a.isomer-card > div.isomer-card-body > div.isomer-card-link",
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", HTMLAttributes, 0]
+  },
+})
diff --git a/src/layouts/components/Editor/extensions/Cards/CardsView.tsx b/src/layouts/components/Editor/extensions/Cards/CardsView.tsx
new file mode 100644
index 000000000..c5fbdb076
--- /dev/null
+++ b/src/layouts/components/Editor/extensions/Cards/CardsView.tsx
@@ -0,0 +1,21 @@
+import { Box } from "@chakra-ui/react"
+import { NodeViewProps } from "@tiptap/react"
+
+import { EditorCardsPlaceholderImage } from "assets"
+
+import { BlockWrapper } from "../../components/BlockWrapper"
+
+export const CardsView = ({ selected }: NodeViewProps) => {
+  return (
+    <BlockWrapper name="Cards grid" isSelected={selected}>
+      <Box
+        borderColor="base.divider.strong"
+        borderWidth="1px"
+        h="100%"
+        w="100%"
+      >
+        <EditorCardsPlaceholderImage />
+      </Box>
+    </BlockWrapper>
+  )
+}
diff --git a/src/layouts/components/Editor/extensions/Cards/index.ts b/src/layouts/components/Editor/extensions/Cards/index.ts
new file mode 100644
index 000000000..f56846c5a
--- /dev/null
+++ b/src/layouts/components/Editor/extensions/Cards/index.ts
@@ -0,0 +1,2 @@
+export * from "./Cards"
+export * from "./CardsView"
diff --git a/src/layouts/components/Editor/extensions/Details/IsomerDetailGroup.ts b/src/layouts/components/Editor/extensions/Details/IsomerDetailGroup.ts
new file mode 100644
index 000000000..f0a8ce6c6
--- /dev/null
+++ b/src/layouts/components/Editor/extensions/Details/IsomerDetailGroup.ts
@@ -0,0 +1,269 @@
+import { ChainedCommands, findParentNode, Node } from "@tiptap/core"
+import { NodeRange, Slice } from "@tiptap/pm/model"
+import { EditorState } from "@tiptap/pm/state"
+import { mergeAttributes, ReactNodeViewRenderer } from "@tiptap/react"
+
+import { AccordionBackgroundType } from "types/editPage"
+
+import { IsomerDetailGroupView } from "./IsomerDetailGroupView"
+
+export interface IsomerDetailGroupOptions {
+  allowFullscreen: boolean
+  HTMLAttributes: {
+    [key: string]: string
+  }
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    detailGroup: {
+      setDetailsGroup: () => ReturnType
+      appendDetail: (startPos: number, endPos: number) => ReturnType
+      changeDetailGroupBackground: (
+        backgroundColor: AccordionBackgroundType
+      ) => ReturnType
+    }
+  }
+}
+
+export const IsomerDetailsGroup = Node.create<IsomerDetailGroupOptions>({
+  name: "detailGroup",
+  group: "block",
+  atom: true,
+  draggable: true,
+  content: "details+",
+  defining: true,
+  isolating: true,
+  allowGapCursor: false,
+
+  addCommands() {
+    return {
+      setDetailsGroup: () => ({ chain, state }) => {
+        const { schema, selection } = state
+
+        const currNode = findParentNode((t) => t.type === this.type)(selection)
+
+        const isInsideDetailGroup = currNode !== undefined
+
+        if (isInsideDetailGroup) {
+          // Do not allow inner accordions
+          return false
+        }
+        const { $from: fromPos, $to: toPos } = selection
+        const blockRange: NodeRange | null = fromPos.blockRange(toPos)
+
+        // If there's no block range, return false
+        if (!blockRange) return false
+
+        const docSlice: Slice = state.doc.slice(
+          blockRange.start,
+          blockRange.end
+        )
+
+        // If the content doesn't match the schema, return false
+        if (
+          !schema.nodes.detailsContent.contentMatch.matchFragment(
+            docSlice.content
+          )
+        ) {
+          return false
+        }
+        const jsonContent = docSlice.toJSON()
+        const content = jsonContent?.content ?? []
+
+        // Insert new content and set the text selection
+
+        return chain()
+          .insertContentAt(
+            { from: blockRange.start, to: blockRange.end },
+            {
+              type: this.name,
+              attrs: { class: "isomer-accordion-group" },
+              content: [
+                {
+                  type: "details",
+                  attrs: { class: "isomer-accordion" },
+                  content: [
+                    { type: "detailsSummary" },
+                    { type: "detailsContent", content },
+                  ],
+                },
+              ],
+            }
+          )
+          .setTextSelection(blockRange.start + 2)
+          .run()
+      },
+      appendDetail: (startPos: number, endPos: number) => ({
+        chain,
+        state,
+      }) => {
+        const { schema } = state
+        const start = state.doc.resolve(startPos)
+        const end = state.doc.resolve(endPos)
+        // get block range from start to end pos
+
+        const blockRange: NodeRange | null = start.blockRange(end)
+
+        // If there's no block range, return false
+        if (!blockRange) return false
+
+        const docSlice: Slice = state.doc.slice(
+          blockRange.start,
+          blockRange.end
+        )
+
+        // If the content doesn't match the schema, return false
+        if (
+          !schema.nodes.detailsContent.contentMatch.matchFragment(
+            docSlice.content
+          )
+        ) {
+          return false
+        }
+        const jsonContent = docSlice.toJSON()
+        const existingContent = jsonContent?.content ?? []
+        const { content } = existingContent[0]
+        // Insert new content and set the text selection
+        if (!content) {
+          return false
+        }
+
+        return chain()
+          .insertContentAt(
+            { from: blockRange.start, to: blockRange.end },
+            {
+              type: this.name,
+              content: [
+                ...content,
+                {
+                  type: "details",
+                  attrs: { class: "isomer-accordion" },
+                  content: [
+                    { type: "detailsSummary" },
+                    {
+                      type: "detailsContent",
+                      content: [{ type: "paragraph", content: [] }],
+                    },
+                  ],
+                },
+              ],
+            }
+          )
+          .run()
+      },
+
+      changeDetailGroupBackground: (
+        backgroundColor: AccordionBackgroundType
+      ) => ({ chain, state }) => {
+        const { schema, selection } = state
+        const { $from: start, $to: end } = selection
+
+        // get block range from start to end pos
+        const blockRange: NodeRange | null = start.blockRange(end)
+
+        // If there's no block range, return false
+        if (!blockRange) return false
+
+        const docSlice: Slice = state.doc.slice(
+          blockRange.start,
+          blockRange.end
+        )
+
+        // If the content doesn't match the schema, return false
+        if (
+          !schema.nodes.detailsContent.contentMatch.matchFragment(
+            docSlice.content
+          )
+        ) {
+          return false
+        }
+        const jsonContent = docSlice.toJSON()
+        const existingContent = jsonContent?.content ?? []
+        const { content } = existingContent[0]
+        // Insert new content and set the text selection
+        if (!content) {
+          return false
+        }
+
+        return chain()
+          .insertContentAt(
+            { from: blockRange.start, to: blockRange.end },
+            {
+              type: this.name,
+              attrs: { backgroundColor },
+              content: [...content],
+            }
+          )
+          .run()
+      },
+      unsetDetailsGroup: () => ({
+        chain,
+        state,
+      }: {
+        state: EditorState
+        chain: ChainedCommands
+      }) => {
+        const { selection } = state
+        const currNode = findParentNode((t) => t.type === this.type)(selection)
+        if (!currNode) return false
+        const startPos = currNode.pos
+        const range = { from: startPos, to: startPos + currNode.node.nodeSize }
+
+        // TODO: check type
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        return chain()
+          .insertContentAt(range, [])
+          .setTextSelection(startPos + 1)
+          .run()
+      },
+    }
+  },
+
+  // TODO: add keyboard shortcuts for backspace
+  // addKeyboardShortcuts() {
+  //   return {
+  //     "Backspace": () => this.editor.commands.detailGroup.setDetailsGroup(),
+  //   }
+  // }
+
+  addAttributes() {
+    return {
+      backgroundColor: {
+        default: "white",
+      },
+      class: {
+        default: "isomer-accordion",
+      },
+      "data-type": {
+        default: "details",
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: `div.isomer-accordion` }]
+  },
+
+  renderHTML({ HTMLAttributes, node }) {
+    const variant =
+      node.attrs.backgroundColor === "gray"
+        ? "isomer-accordion-gray"
+        : "isomer-accordion-white"
+
+    delete HTMLAttributes.backgroundColor
+    return [
+      "div",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        "data-type": this.name,
+        class: `isomer-accordion ${variant}`,
+      }),
+      0,
+    ]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(IsomerDetailGroupView)
+  },
+})
diff --git a/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx b/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx
new file mode 100644
index 000000000..87a1c313e
--- /dev/null
+++ b/src/layouts/components/Editor/extensions/Details/IsomerDetailGroupView.tsx
@@ -0,0 +1,106 @@
+import { Box, Icon, IconButton, Text } from "@chakra-ui/react"
+import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react"
+import { BiPencil, BiPlus } from "react-icons/bi"
+
+import { useEditorDrawerContext } from "contexts/EditorDrawerContext"
+
+export const IsomerDetailGroupView = ({
+  node,
+  editor,
+  getPos,
+}: NodeViewProps) => {
+  const startPos = getPos()
+  const endPos = startPos + node.nodeSize
+  const activePos = editor.state.selection.anchor
+  const selected = activePos >= startPos && activePos <= endPos
+  const { onDrawerOpen } = useEditorDrawerContext()
+  return (
+    <NodeViewWrapper data-drag-handle>
+      <Box position="relative">
+        {selected && (
+          <Box
+            position="absolute"
+            top="calc(-1.5rem - 2px)"
+            left="-2px"
+            zIndex="1"
+            backgroundColor="#055AFF"
+            textColor="white"
+            p="0.25rem"
+          >
+            <Text textStyle="caption-1">Accordion</Text>
+          </Box>
+        )}
+        <Box
+          outline={selected ? "2px solid #055AFF" : undefined}
+          py="0.75rem"
+          w="calc(100% - 20px)"
+        >
+          <NodeViewContent />
+          {selected && (
+            <>
+              <Box
+                position="absolute"
+                bottom="0"
+                left="50%"
+                transform="translateX(-50%)"
+                mb="-1.5rem"
+                zIndex={1}
+                background="white"
+                h="2.75rem"
+                w="2.75rem"
+              >
+                <IconButton
+                  variant="outline"
+                  aria-label="Add accordion"
+                  icon={<Icon as={BiPlus} w="1.5rem" h="1.5rem" />}
+                  onClick={() => {
+                    editor.chain().appendDetail(startPos, endPos).run()
+                  }}
+                  position="absolute"
+                  bottom="0"
+                  left="50%"
+                  transform="translateX(-50%)"
+                  zIndex={2}
+                  background="white"
+                />
+              </Box>
+              <Box
+                background="white"
+                zIndex={1}
+                right={0}
+                top={0}
+                mt="-1rem"
+                mr="0.5rem"
+                position="absolute"
+                minH="1.75rem"
+                h="1.75rem"
+                minW="1.75rem"
+                color="base.content.medium"
+                borderColor="base.content.medium"
+              >
+                <IconButton
+                  variant="outline"
+                  aria-label="Edit accordion"
+                  icon={<Icon as={BiPencil} w="1.25rem" h="1.25rem" />}
+                  onClick={() => {
+                    onDrawerOpen("accordion")()
+                  }}
+                  right={0}
+                  top={0}
+                  position="absolute"
+                  zIndex={2}
+                  background="white"
+                  minH="1.75rem"
+                  h="1.75rem"
+                  minW="1.75rem"
+                  color="base.content.medium"
+                  borderColor="base.content.medium"
+                />
+              </Box>
+            </>
+          )}
+        </Box>
+      </Box>
+    </NodeViewWrapper>
+  )
+}
diff --git a/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts b/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts
new file mode 100644
index 000000000..423376272
--- /dev/null
+++ b/src/layouts/components/Editor/extensions/Details/IsomerDetails.ts
@@ -0,0 +1,71 @@
+import { mergeAttributes } from "@tiptap/react"
+import Details from "@tiptap-pro/extension-details"
+
+// NOTE: The reason for not using the default Details extension is because
+// the position of the button is not configurable. We want the button to be
+// on the right side of the summary text, not the left.
+export const IsomerDetails = Details.extend({
+  addNodeView() {
+    return ({ editor, getPos, node, HTMLAttributes }) => {
+      const outerDiv = document.createElement("div")
+      const i = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        "data-type": this.name,
+        class: "isomer-detail",
+      })
+      Object.entries(i).forEach(([key, value]) =>
+        outerDiv.setAttribute(key, value)
+      )
+      const button = document.createElement("button")
+      const content = document.createElement("div")
+
+      outerDiv.append(content)
+      outerDiv.append(button)
+      const eventCallback = () => {
+        outerDiv.classList.toggle(this.options.openClassName)
+        const event = new Event("toggleDetailsContent")
+        const selector = content.querySelector(
+          ':scope > div[data-type="detailsContent"]'
+        )
+        if (selector != null) {
+          selector.dispatchEvent(event)
+        }
+      }
+      return (
+        node.attrs.open && setTimeout(eventCallback),
+        button.addEventListener("click", () => {
+          if ((eventCallback(), this.options.persist)) {
+            if (editor.isEditable && typeof getPos === "function") {
+              const {
+                from: selectionStart,
+                to: selectionEnd,
+              } = editor.state.selection
+              editor
+                .chain()
+                .command(({ tr: t }) => {
+                  const currPos = getPos()
+                  const currNode = t.doc.nodeAt(currPos)
+                  return (
+                    currNode?.type === this.type &&
+                    (t.setNodeMarkup(currPos, undefined, {
+                      open: !currNode?.attrs.open,
+                    }),
+                    !0)
+                  )
+                })
+                .setTextSelection({ from: selectionStart, to: selectionEnd })
+                .focus(undefined, { scrollIntoView: !1 })
+                .run()
+            }
+          } else editor.commands.focus()
+        }),
+        {
+          dom: outerDiv,
+          contentDOM: content,
+          ignoreMutation: (t) =>
+            !outerDiv.contains(t.target) || outerDiv === t.target,
+          update: (t) => t.type === this.type,
+        }
+      )
+    }
+  },
+})
diff --git a/src/layouts/components/Editor/extensions/FormSG/FormSGView.tsx b/src/layouts/components/Editor/extensions/FormSG/FormSGView.tsx
index cea50d5e4..0bc929c89 100644
--- a/src/layouts/components/Editor/extensions/FormSG/FormSGView.tsx
+++ b/src/layouts/components/Editor/extensions/FormSG/FormSGView.tsx
@@ -1,36 +1,16 @@
-import { Box, Text } from "@chakra-ui/react"
-import { NodeViewProps, NodeViewWrapper } from "@tiptap/react"
+import { Code } from "@chakra-ui/react"
+import { NodeViewProps } from "@tiptap/react"
 
-export const FormSGView = ({ node }: NodeViewProps) => {
+import { BlockWrapper } from "../../components/BlockWrapper"
+
+export const FormSGView = ({ node, selected }: NodeViewProps) => {
   const formSrc = node.content.child(1).attrs.src
 
   return (
-    <Box
-      as={NodeViewWrapper}
-      bg="#FAF594"
-      border="3px solid #0d0d0d"
-      borderRadius="0.5rem"
-      margin="1rem 0"
-      position="relative"
-      data-drag-handle
-      contentEditable={false}
-    >
-      <Text
-        ml="1rem"
-        bgColor="#0d0d0d"
-        textStyle="caption-1"
-        fontWeight="bold"
-        color="#fff"
-        position="absolute"
-        top="0"
-        padding="0.25rem 0.75rem"
-        borderRadius="0 0 0.5rem 0.5rem"
-      >
-        FormSG Embed
-      </Text>
-      <Box mt="1.5rem" p="1rem">
+    <BlockWrapper name="Embed" isSelected={selected}>
+      <Code paddingInline="0.75rem" maxW="100%">
         {formSrc}
-      </Box>
-    </Box>
+      </Code>
+    </BlockWrapper>
   )
 }
diff --git a/src/layouts/components/Editor/extensions/Iframe/Iframe.ts b/src/layouts/components/Editor/extensions/Iframe/Iframe.ts
index c742d25bb..a6b99fdb6 100644
--- a/src/layouts/components/Editor/extensions/Iframe/Iframe.ts
+++ b/src/layouts/components/Editor/extensions/Iframe/Iframe.ts
@@ -14,10 +14,10 @@ export interface IframeOptions {
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     iframe: {
-      /**
-       * Add an iframe
-       */
+      // Set the current node as an iframe
       setIframe: (options: { src: string }) => ReturnType
+      // Delete the current node
+      deleteIframe: () => ReturnType
     }
   }
 }
@@ -68,7 +68,7 @@ export const Iframe = Node.create<IframeOptions>({
   parseHTML() {
     return [
       {
-        tag: 'iframe:not([src^="https://form.gov.sg/"])',
+        tag: "iframe",
       },
     ]
   },
@@ -89,6 +89,10 @@ export const Iframe = Node.create<IframeOptions>({
 
         return true
       },
+      deleteIframe: () => ({ tr, editor }) => {
+        editor.state.selection.replace(tr)
+        return true
+      },
     }
   },
 
diff --git a/src/layouts/components/Editor/extensions/Iframe/IframeView.tsx b/src/layouts/components/Editor/extensions/Iframe/IframeView.tsx
index 6d8ec1ca0..846393dca 100644
--- a/src/layouts/components/Editor/extensions/Iframe/IframeView.tsx
+++ b/src/layouts/components/Editor/extensions/Iframe/IframeView.tsx
@@ -1,33 +1,14 @@
-import { Box, Text } from "@chakra-ui/react"
-import { NodeViewProps, NodeViewWrapper } from "@tiptap/react"
+import { Code } from "@chakra-ui/react"
+import { NodeViewProps } from "@tiptap/react"
 
-export const IframeView = ({ node }: NodeViewProps) => {
+import { BlockWrapper } from "../../components/BlockWrapper"
+
+export const IframeView = ({ node, selected }: NodeViewProps) => {
   return (
-    <Box
-      as={NodeViewWrapper}
-      bg="#FAF594"
-      border="3px solid #0d0d0d"
-      borderRadius="0.5rem"
-      margin="1rem 0"
-      position="relative"
-      data-drag-handle
-    >
-      <Text
-        ml="1rem"
-        bgColor="#0d0d0d"
-        textStyle="caption-1"
-        fontWeight="bold"
-        color="#fff"
-        position="absolute"
-        top="0"
-        padding="0.25rem 0.75rem"
-        borderRadius="0 0 0.5rem 0.5rem"
-      >
-        Source
-      </Text>
-      <Box mt="1.5rem" p="1rem">
+    <BlockWrapper name="Embed" isSelected={selected}>
+      <Code paddingInline="0.75rem" maxW="100%">
         {node.attrs.src}
-      </Box>
-    </Box>
+      </Code>
+    </BlockWrapper>
   )
 }
diff --git a/src/layouts/components/Editor/extensions/Image/Image.ts b/src/layouts/components/Editor/extensions/Image/Image.ts
new file mode 100644
index 000000000..63b67ddfc
--- /dev/null
+++ b/src/layouts/components/Editor/extensions/Image/Image.ts
@@ -0,0 +1,123 @@
+import Image from "@tiptap/extension-image"
+import { Selection } from "@tiptap/pm/state"
+import { ReactNodeViewRenderer } from "@tiptap/react"
+
+import { ImageView } from "./ImageView"
+
+interface IsomerImageOptions {
+  src: string
+  alt?: string
+  title?: string
+  width?: string
+  height?: string
+  href?: string
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    isomerImage: {
+      setImage: (options: IsomerImageOptions) => ReturnType
+      deleteImage: () => ReturnType
+    }
+  }
+}
+
+export const IsomerImage = Image.extend({
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      alt: {
+        default: null,
+      },
+      title: {
+        default: null,
+      },
+      width: {
+        default: "100%",
+      },
+      height: {
+        default: "auto",
+      },
+      href: {
+        default: null,
+        parseHTML: (element) =>
+          element.closest("a[href].isomer-image-wrapper")?.getAttribute("href"),
+      },
+    }
+  },
+
+  addCommands() {
+    return {
+      setImage: (options) => ({ tr, dispatch, editor }) => {
+        if (!options.src) {
+          return false
+        }
+
+        if (dispatch) {
+          const node = editor.schema.nodes.image.create(options)
+
+          if (tr.selection.empty) {
+            const offset = tr.selection.to
+
+            tr.insert(offset, node)
+              .scrollIntoView()
+              .setSelection(Selection.near(tr.doc.resolve(offset)))
+          } else {
+            const offset = tr.selection.to + 1
+
+            tr.insert(offset, node)
+              .scrollIntoView()
+              .setSelection(Selection.near(tr.doc.resolve(offset)))
+          }
+        }
+
+        return true
+      },
+
+      deleteImage: () => ({ tr, editor }) => {
+        editor.state.selection.replace(tr)
+        return true
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "img[src]",
+      },
+      {
+        tag: "a[href].isomer-image-wrapper > img[src]",
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const { href, ...rest } = HTMLAttributes
+
+    if (href) {
+      return [
+        "a",
+        {
+          href,
+          class: "isomer-image-wrapper",
+        },
+        ["img", rest],
+      ]
+    }
+
+    return [
+      "div",
+      {
+        class: "isomer-image-wrapper",
+      },
+      ["img", rest],
+    ]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageView)
+  },
+})
diff --git a/src/layouts/components/Editor/extensions/Image/Image.tsx b/src/layouts/components/Editor/extensions/Image/Image.tsx
deleted file mode 100644
index d43b75831..000000000
--- a/src/layouts/components/Editor/extensions/Image/Image.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import Image from "@tiptap/extension-image"
-import { ReactNodeViewRenderer } from "@tiptap/react"
-
-import { ImageView } from "./ImageView"
-
-export const IsomerImage = Image.extend({
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "div",
-      {
-        class: "isomer-image-wrapper",
-      },
-      ["img", HTMLAttributes],
-    ]
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer(ImageView)
-  },
-})
diff --git a/src/layouts/components/Editor/extensions/Image/ImageView.tsx b/src/layouts/components/Editor/extensions/Image/ImageView.tsx
index 8e95cdf23..d501b3c29 100644
--- a/src/layouts/components/Editor/extensions/Image/ImageView.tsx
+++ b/src/layouts/components/Editor/extensions/Image/ImageView.tsx
@@ -4,23 +4,30 @@ import { useParams } from "react-router-dom"
 
 import { useGetMultipleMediaHook } from "hooks/mediaHooks"
 
-export const ImageView = ({ node }: NodeViewProps) => {
+import { BlockWrapper } from "../../components/BlockWrapper"
+
+export const ImageView = ({ node, selected }: NodeViewProps) => {
   const { siteName } = useParams<{ siteName: string }>()
-  const mediaSrcs = new Set<string>([node.attrs.src])
+  const isExternalImage = node.attrs.src.startsWith("https://")
+  const mediaSrcs = isExternalImage
+    ? new Set<string>([])
+    : new Set<string>([node.attrs.src])
 
   const { data: mediaData } = useGetMultipleMediaHook({
     siteName,
     mediaSrcs,
   })
 
-  let imgSrc = "/placeholder_no_image.png"
+  let imgSrc = isExternalImage ? node.attrs.src : "/placeholder_no_image.png"
   if (mediaData && mediaData.length > 0) {
     // Guarenteed to be the first element since we only passed in one mediaSrc
     imgSrc = mediaData[0].mediaUrl
   }
   return (
-    <Box as={NodeViewWrapper} data-drag-handle>
-      <Image src={imgSrc} />
-    </Box>
+    <BlockWrapper name="Image" isSelected={selected} data-drag-handle>
+      <Box as={NodeViewWrapper}>
+        <Image src={imgSrc} />
+      </Box>
+    </BlockWrapper>
   )
 }
diff --git a/src/layouts/components/Editor/extensions/Instagram/InstagramView.tsx b/src/layouts/components/Editor/extensions/Instagram/InstagramView.tsx
index 5e54343fc..a2767598c 100644
--- a/src/layouts/components/Editor/extensions/Instagram/InstagramView.tsx
+++ b/src/layouts/components/Editor/extensions/Instagram/InstagramView.tsx
@@ -1,33 +1,14 @@
-import { Box, Text } from "@chakra-ui/react"
-import { NodeViewProps, NodeViewWrapper } from "@tiptap/react"
+import { Code } from "@chakra-ui/react"
+import { NodeViewProps } from "@tiptap/react"
 
-export const InstagramView = ({ node }: NodeViewProps) => {
+import { BlockWrapper } from "../../components/BlockWrapper"
+
+export const InstagramView = ({ node, selected }: NodeViewProps) => {
   return (
-    <Box
-      as={NodeViewWrapper}
-      bg="#FAF594"
-      border="3px solid #0d0d0d"
-      borderRadius="0.5rem"
-      margin="1rem 0"
-      position="relative"
-      data-drag-handle
-    >
-      <Text
-        ml="1rem"
-        bgColor="#0d0d0d"
-        textStyle="caption-1"
-        fontWeight="bold"
-        color="#fff"
-        position="absolute"
-        top="0"
-        padding="0.25rem 0.75rem"
-        borderRadius="0 0 0.5rem 0.5rem"
-      >
-        Instagram Post
-      </Text>
-      <Box mt="1.5rem" p="1rem">
+    <BlockWrapper name="Embed" isSelected={selected}>
+      <Code paddingInline="0.75rem" maxW="100%">
         {node.attrs.permalink}
-      </Box>
-    </Box>
+      </Code>
+    </BlockWrapper>
   )
 }
diff --git a/src/layouts/components/Editor/extensions/Table/Table.tsx b/src/layouts/components/Editor/extensions/Table/Table.tsx
new file mode 100644
index 000000000..768f3802c
--- /dev/null
+++ b/src/layouts/components/Editor/extensions/Table/Table.tsx
@@ -0,0 +1,46 @@
+import TiptapTable from "@tiptap/extension-table"
+
+import "./styles.scss"
+import "../../components/BlockWrapper/styles.scss"
+
+export const Table = TiptapTable.extend({
+  draggable: true,
+  addNodeView() {
+    return () => {
+      const dom = document.createElement("div")
+      const contentDOM = document.createElement("table")
+
+      // NOTE: Append to `dom` as this should not be editable.
+      const dragWrapper = document.createElement("div")
+      const blockWrapper = document.createElement("div")
+      blockWrapper.setAttribute("data-group", "true")
+      blockWrapper.className = "table-block-wrapper"
+
+      const textBox = document.createElement("div")
+      textBox.className = "table-block-label"
+      const text = document.createElement("p")
+      text.textContent = "Table"
+
+      const borderWrapper = document.createElement("div")
+      borderWrapper.className = "table-block-border"
+      const dragHandle = document.createElement("div")
+      dragHandle.className = "drag-handle"
+      dragHandle.draggable = true
+      dragHandle.contentEditable = "false"
+      dragHandle.setAttribute("data-drag-handle", "")
+
+      dom.appendChild(dragWrapper)
+      dragWrapper.appendChild(blockWrapper)
+      textBox.appendChild(text)
+      blockWrapper.appendChild(textBox)
+      blockWrapper.appendChild(borderWrapper)
+      blockWrapper.appendChild(dragHandle)
+      borderWrapper.append(contentDOM)
+      contentDOM.appendChild(document.createElement("tbody"))
+
+      return { dom, contentDOM }
+    }
+  },
+}).configure({
+  allowTableNodeSelection: true,
+})
diff --git a/src/layouts/components/Editor/extensions/Table/index.ts b/src/layouts/components/Editor/extensions/Table/index.ts
new file mode 100644
index 000000000..e7ae861eb
--- /dev/null
+++ b/src/layouts/components/Editor/extensions/Table/index.ts
@@ -0,0 +1 @@
+export * from "./Table"
diff --git a/src/layouts/components/Editor/extensions/Table/styles.scss b/src/layouts/components/Editor/extensions/Table/styles.scss
new file mode 100644
index 000000000..3a1313fe3
--- /dev/null
+++ b/src/layouts/components/Editor/extensions/Table/styles.scss
@@ -0,0 +1,41 @@
+.table-block-wrapper {
+  position: relative;
+  &:hover {
+    display: block;
+    .table-block-label {
+      display: block;
+    }
+    .table-block-border {
+      border-color: #055aff;
+    }
+  }
+
+  .drag-handle {
+    margin-top: 2px;
+  }
+
+  &:focus {
+    display: block;
+    .table-block-label {
+      display: block;
+    }
+    .table-block-border {
+      border-color: #055aff;
+    }
+  }
+
+  .table-block-label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: #055aff;
+    color: white;
+    padding: 0.25rem;
+    display: none;
+  }
+
+  .table-block-border {
+    border: 2px solid transparent;
+    object-fit: contain;
+  }
+}
diff --git a/src/layouts/components/Editor/extensions/TrailingNode/TrailingNode.ts b/src/layouts/components/Editor/extensions/TrailingNode/TrailingNode.ts
new file mode 100644
index 000000000..5d6e4b54d
--- /dev/null
+++ b/src/layouts/components/Editor/extensions/TrailingNode/TrailingNode.ts
@@ -0,0 +1,78 @@
+import { Extension } from "@tiptap/core"
+import { Node as ProseMirrorNode, NodeType } from "@tiptap/pm/model"
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+
+function isNodeInArray({
+  node,
+  types,
+}: {
+  node: ProseMirrorNode | null
+  types: NodeType[]
+}) {
+  if (!node) return false
+
+  return Array.isArray(types) && types.includes(node.type)
+}
+
+/**
+ * Extension based on:
+ * - https://github.com/ueberdosis/tiptap/blob/v1/packages/tiptap-extensions/src/extensions/TrailingNode.js
+ * - https://github.com/remirror/remirror/blob/e0f1bec4a1e8073ce8f5500d62193e52321155b9/packages/prosemirror-trailing-node/src/trailing-node-plugin.ts
+ */
+
+export interface TrailingNodeOptions {
+  node: string
+  notAfter: string[]
+}
+
+export const TrailingNode = Extension.create<TrailingNodeOptions>({
+  name: "trailingnode",
+
+  addOptions() {
+    return {
+      node: "paragraph",
+      notAfter: ["paragraph"],
+    }
+  },
+
+  addProseMirrorPlugins() {
+    const plugin = new PluginKey(this.name)
+    const disabledNodes = Object.entries(this.editor.schema.nodes)
+      .map(([, value]) => value)
+      .filter((node) => this.options.notAfter.includes(node.name))
+
+    return [
+      new Plugin({
+        key: plugin,
+        appendTransaction: (_, __, state) => {
+          const { doc, tr, schema } = state
+          const shouldInsertNodeAtEnd = plugin.getState(state)
+          const endPosition = doc.content.size
+          const type = schema.nodes[this.options.node]
+
+          if (shouldInsertNodeAtEnd) {
+            return tr.insert(endPosition, type.create())
+          }
+
+          return null
+        },
+        state: {
+          init: (_, state) => {
+            const lastNode = state.tr.doc.lastChild
+
+            return !isNodeInArray({ node: lastNode, types: disabledNodes })
+          },
+          apply: (tr, value) => {
+            if (!tr.docChanged) {
+              return value
+            }
+
+            const lastNode = tr.doc.lastChild
+
+            return !isNodeInArray({ node: lastNode, types: disabledNodes })
+          },
+        },
+      }),
+    ]
+  },
+})
diff --git a/src/layouts/components/Editor/extensions/TrailingNode/index.ts b/src/layouts/components/Editor/extensions/TrailingNode/index.ts
new file mode 100644
index 000000000..7953cfb2b
--- /dev/null
+++ b/src/layouts/components/Editor/extensions/TrailingNode/index.ts
@@ -0,0 +1 @@
+export * from "./TrailingNode"
diff --git a/src/layouts/components/Editor/extensions/index.ts b/src/layouts/components/Editor/extensions/index.ts
index 7abec2abb..125325f24 100644
--- a/src/layouts/components/Editor/extensions/index.ts
+++ b/src/layouts/components/Editor/extensions/index.ts
@@ -1,4 +1,6 @@
+export * from "./Cards"
 export * from "./Iframe"
 export * from "./FormSG"
 export * from "./Image"
 export * from "./Instagram"
+export * from "./TrailingNode"
diff --git a/src/layouts/components/Editor/styles.scss b/src/layouts/components/Editor/styles.scss
index a95aa4a71..68b278cf6 100644
--- a/src/layouts/components/Editor/styles.scss
+++ b/src/layouts/components/Editor/styles.scss
@@ -19,7 +19,7 @@
 
   height: 100%;
 
-  p.is-empty::before {
+  > p.is-empty::before {
     color: #adb5bd;
     content: attr(data-placeholder);
     float: left;
@@ -128,4 +128,71 @@
       }
     }
   }
+
+  .node-detailGroup * [data-type="details"]:first-child {
+    border-top: 1px solid #d4d4d4;
+  }
+
+  summary {
+    color: #4372d6;
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 1.75rem; /* 140% */
+    letter-spacing: -0.0175rem;
+  }
+
+  [data-type="details"] {
+    display: flex;
+
+    border-bottom: 1px solid #d4d4d4;
+    padding: 0.5rem;
+    margin-top: 0;
+    margin-bottom: 0;
+    border-top: 0;
+
+    > button {
+      display: flex;
+      cursor: pointer;
+      background: transparent;
+      border: none;
+      padding: 0;
+      height: 1.5em;
+      width: 1.5em;
+      color: black;
+
+      &::after {
+        content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M16.293%209.29297L12%2013.586L7.70697%209.29297L6.29297%2010.707L12%2016.414L17.707%2010.707L16.293%209.29297Z%22%20fill%3D%22%23484848%22%2F%3E%3C%2Fsvg%3E");
+        justify-content: center;
+        align-items: center;
+        width: 1.5em;
+        height: 1.5em;
+      }
+    }
+
+    > div {
+      flex: 1 1 auto;
+    }
+
+    * summary {
+      list-style: none;
+    }
+
+    &.is-open > button::after {
+      content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.29297%2013.2932L7.70697%2014.7072L12%2010.4142L16.293%2014.7072L17.707%2013.2932L12%207.58618L6.29297%2013.2932Z%22%20fill%3D%22%234372D6%22%2F%3E%3C%2Fsvg%3E");
+    }
+
+    :last-child {
+      margin-bottom: 0;
+    }
+
+    [data-type="detailsContent"] > p {
+      color: #838894;
+      font-size: 1.25rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 2.2rem; /* 176% */
+      letter-spacing: -0.0175rem;
+    }
+  }
 }
diff --git a/src/layouts/components/EditorAccordionDrawer/EditorAccordionDrawer.tsx b/src/layouts/components/EditorAccordionDrawer/EditorAccordionDrawer.tsx
new file mode 100644
index 000000000..68c664522
--- /dev/null
+++ b/src/layouts/components/EditorAccordionDrawer/EditorAccordionDrawer.tsx
@@ -0,0 +1,97 @@
+import { FormControl, Stack, Text } from "@chakra-ui/react"
+import { Button, Radio } from "@opengovsg/design-system-react"
+import { Editor } from "@tiptap/core"
+import { useEffect } from "react"
+import { useForm } from "react-hook-form"
+
+import { AccordionBackgrounds, AccordionBackgroundType } from "types/editPage"
+
+import { EditorDrawer } from "../EditorDrawer"
+
+interface EditorAccordionDrawerProps {
+  editor: Editor
+  isOpen: boolean
+  onClose: () => void
+  onProceed: () => void
+}
+
+function capitalizeFirstLetter(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+export const EditorAccordionDrawer = ({
+  editor,
+  isOpen,
+  onClose,
+  onProceed,
+}: EditorAccordionDrawerProps): JSX.Element => {
+  const options = AccordionBackgrounds
+  const fragment = editor.state.selection.content().content
+  let attrs
+
+  // Not tpp sure why types are wrong here, but this type exists
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  if (fragment.content && fragment.content.length > 0) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    attrs = fragment.content[0].attrs
+  }
+
+  const defaultValue = attrs?.backgroundColor || "white"
+
+  const { register, handleSubmit, watch, setValue } = useForm<{
+    "customise-accordion-color": AccordionBackgroundType
+  }>()
+
+  useEffect(() => {
+    setValue("customise-accordion-color", defaultValue)
+    // This is run every time this component mounts
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen])
+
+  const onSubmit = () => {
+    editor.commands.changeDetailGroupBackground(
+      watch("customise-accordion-color")
+    )
+    onProceed()
+  }
+  return (
+    <EditorDrawer isOpen={isOpen}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <EditorDrawer.Header onClose={onClose}>
+          <Text as="h5" textStyle="h5">
+            Editing accordion
+          </Text>
+        </EditorDrawer.Header>
+
+        <EditorDrawer.Content>
+          <Text>Customise accordion color</Text>
+          <FormControl id="customise-accordion-color" mb={6}>
+            <Radio.RadioGroup
+              name="customise-accordion-color"
+              defaultValue={defaultValue}
+            >
+              <Stack spacing="0.5rem">
+                {options.map((o) => (
+                  <Radio
+                    key={o}
+                    value={o}
+                    allowDeselect={false}
+                    {...register("customise-accordion-color")}
+                  >
+                    {capitalizeFirstLetter(o)}
+                  </Radio>
+                ))}
+              </Stack>
+            </Radio.RadioGroup>
+          </FormControl>
+        </EditorDrawer.Content>
+
+        <EditorDrawer.Footer>
+          <Button type="submit">Save accordion</Button>
+        </EditorDrawer.Footer>
+      </form>
+    </EditorDrawer>
+  )
+}
diff --git a/src/layouts/components/EditorCardsDrawer/EditorCardsDrawer.tsx b/src/layouts/components/EditorCardsDrawer/EditorCardsDrawer.tsx
new file mode 100644
index 000000000..ee9820332
--- /dev/null
+++ b/src/layouts/components/EditorCardsDrawer/EditorCardsDrawer.tsx
@@ -0,0 +1,37 @@
+import { Text } from "@chakra-ui/react"
+import { Button } from "@opengovsg/design-system-react"
+import { Editor } from "@tiptap/core"
+
+import { EditorDrawer } from "../EditorDrawer"
+
+interface EditorAccordionDrawerProps {
+  editor: Editor
+  isOpen: boolean
+  onClose: () => void
+  onProceed: () => void
+}
+
+export const EditorCardsDrawer = ({
+  editor,
+  isOpen,
+  onClose,
+  onProceed,
+}: EditorAccordionDrawerProps): JSX.Element => {
+  return (
+    <EditorDrawer isOpen={isOpen}>
+      <EditorDrawer.Header onClose={onClose}>
+        <Text as="h5" textStyle="h5">
+          Editing card grid
+        </Text>
+      </EditorDrawer.Header>
+
+      <EditorDrawer.Content>
+        <Text>Placeholder content</Text>
+      </EditorDrawer.Content>
+
+      <EditorDrawer.Footer>
+        <Button>Save card grid</Button>
+      </EditorDrawer.Footer>
+    </EditorDrawer>
+  )
+}
diff --git a/src/layouts/components/EditorDrawer/EditorDrawer.tsx b/src/layouts/components/EditorDrawer/EditorDrawer.tsx
new file mode 100644
index 000000000..74d1dde63
--- /dev/null
+++ b/src/layouts/components/EditorDrawer/EditorDrawer.tsx
@@ -0,0 +1,96 @@
+import { Grid, GridItem, HStack, Icon, Spacer } from "@chakra-ui/react"
+import { IconButton } from "@opengovsg/design-system-react"
+import React, { PropsWithChildren } from "react"
+import { BiX } from "react-icons/bi"
+
+import { MiniDrawer } from "../MiniDrawer"
+
+interface EditorDrawerProps {
+  isOpen: boolean
+}
+
+interface EditorDrawerHeaderProps {
+  onClose: () => void
+  children: React.ReactNode
+}
+
+interface EditorDrawerContentProps {
+  children: React.ReactNode
+}
+
+interface EditorDrawerFooterProps {
+  children: React.ReactNode
+}
+
+export const EditorDrawer = ({
+  isOpen,
+  children,
+}: PropsWithChildren<EditorDrawerProps>): JSX.Element => {
+  return (
+    <MiniDrawer isOpen={isOpen} width="45vw">
+      <Grid
+        bgColor="base.canvas.default"
+        w="100%"
+        h="100%"
+        gridTemplateRows="3.25rem 1fr 4rem"
+        gridTemplateAreas="'header' 'content' 'footer'"
+        borderRight="1px solid"
+        borderRightColor="base.divider.medium"
+      >
+        {children}
+      </Grid>
+    </MiniDrawer>
+  )
+}
+
+export const EditorDrawerHeader = ({
+  onClose,
+  children,
+}: EditorDrawerHeaderProps): JSX.Element => {
+  return (
+    <GridItem gridArea="header" pt="1.5rem" pl="1.5rem" pr="0.875rem">
+      <HStack h="1.75rem">
+        {children}
+        <Spacer />
+        <IconButton
+          variant="clear"
+          onClick={onClose}
+          aria-label="close editor drawer"
+        >
+          <Icon as={BiX} fontSize="1.5rem" color="base.content.strong" />
+        </IconButton>
+      </HStack>
+    </GridItem>
+  )
+}
+
+export const EditorDrawerContent = ({
+  children,
+}: EditorDrawerContentProps): JSX.Element => {
+  return (
+    <GridItem gridArea="content" p="1.5rem" overflowY="scroll">
+      {children}
+    </GridItem>
+  )
+}
+
+export const EditorDrawerFooter = ({
+  children,
+}: EditorDrawerFooterProps): JSX.Element => {
+  return (
+    <GridItem
+      gridArea="footer"
+      borderTop="1px solid"
+      borderTopColor="base.divider.medium"
+    >
+      <HStack my="0.625rem" px="2rem">
+        <Spacer />
+        {children}
+      </HStack>
+    </GridItem>
+  )
+}
+
+EditorDrawer.Header = EditorDrawerHeader
+EditorDrawer.Content = EditorDrawerContent
+EditorDrawer.Footer = EditorDrawerFooter
diff --git a/src/layouts/components/EditorDrawer/index.ts b/src/layouts/components/EditorDrawer/index.ts
new file mode 100644
index 000000000..a92223ca6
--- /dev/null
+++ b/src/layouts/components/EditorDrawer/index.ts
@@ -0,0 +1 @@
+export * from "./EditorDrawer"
diff --git a/src/layouts/components/MiniDrawer/MiniDrawer.tsx b/src/layouts/components/MiniDrawer/MiniDrawer.tsx
new file mode 100644
index 000000000..8ce508dfd
--- /dev/null
+++ b/src/layouts/components/MiniDrawer/MiniDrawer.tsx
@@ -0,0 +1,30 @@
+import { BoxProps, Slide, SlideProps } from "@chakra-ui/react"
+
+type MiniDrawerProps = SlideProps & {
+  isOpen: boolean
+  width?: BoxProps["width"]
+}
+
+export const MiniDrawer = ({
+  isOpen,
+  width,
+  children,
+  ...rest
+}: MiniDrawerProps): JSX.Element => {
+  return (
+    <Slide
+      direction="left"
+      in={isOpen}
+      style={{
+        zIndex: 10,
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: (width as string) || "100%",
+      }}
+      {...rest}
+    >
+      {children}
+    </Slide>
+  )
+}
diff --git a/src/layouts/components/MiniDrawer/index.ts b/src/layouts/components/MiniDrawer/index.ts
new file mode 100644
index 000000000..2fdd321d2
--- /dev/null
+++ b/src/layouts/components/MiniDrawer/index.ts
@@ -0,0 +1 @@
+export * from "./MiniDrawer"
diff --git a/src/styles/isomer-cms/pages/Editor.module.scss b/src/styles/isomer-cms/pages/Editor.module.scss
index a340a838c..44eadfbd5 100644
--- a/src/styles/isomer-cms/pages/Editor.module.scss
+++ b/src/styles/isomer-cms/pages/Editor.module.scss
@@ -1,6 +1,9 @@
 @use "sass:meta";
 
 @import "../elements/variable";
+@import "../../isomer-template/theme/breakpoints";
+@import "../../isomer-template/theme/colors";
+@import "../../isomer-template/components/cards";
 
 .preview-styles {
   // NOTE: These css variables all come from sgds.
@@ -167,3 +170,93 @@
     font-family: "Lato";
   }
 }
+
+//! TODO figure out how to put styles at the correct place
+
+details.isomer-details summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+}
+
+details.isomer-details summary::marker {
+  display: none;
+}
+
+details.isomer-details summary::after {
+  content: url("https://raw.githubusercontent.com/atisawd/boxicons/master/svg/solid/bxs-chevron-down.svg");
+  transition: 0.25s transform ease;
+  padding-top: 0.25rem;
+}
+
+details.isomer-details[open] summary::after {
+  transform: rotate(180deg);
+}
+
+@keyframes details-show {
+  from {
+    opacity: 0;
+    transform: var(--details-translate, translateY(-0.5em));
+  }
+}
+
+details.isomer-details[open] > *:not(summary) {
+  animation: details-show 150ms ease-in-out;
+}
+
+details.isomer-details {
+  display: flex;
+  border-top: 1px solid #d4d4d4;
+  border-bottom: 1px solid #d4d4d4;
+
+  > div {
+    flex: 1 1 auto;
+  }
+
+  div.isomer-details-content > p {
+    color: var(--site-secondary-color);
+    margin-left: 1rem;
+    margin-right: 1.25rem;
+    margin-bottom: 1rem;
+  }
+}
+
+details.isomer-details ~ details.isomer-details {
+  margin-top: 0;
+  margin-bottom: 0;
+  border-top: 0;
+}
+
+.isomer-accordion-group {
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+}
+
+.isomer-accordion-group:first-child {
+  margin-top: 0;
+}
+
+.isomer-accordion-group:last-child {
+  margin-bottom: 0;
+}
+
+.isomer-details:last-of-type {
+  margin-bottom: 0;
+  border-bottom: 1px solid #d4d4d4;
+}
+
+.isomer-accordion-white > details.isomer-details > summary {
+  background-color: #fff;
+  color: #4372d6;
+}
+
+.isomer-accordion-gray > details.isomer-details > summary {
+  background-color: #f4f4f4;
+  color: #4372d6;
+}
+
+.isomer-accordion-gray > details.isomer-details > summary:hover {
+  color: #fff;
+  background-color: #4372d6;
+}
diff --git a/src/styles/isomer-template/components/_cards.scss b/src/styles/isomer-template/components/_cards.scss
new file mode 100644
index 000000000..57ecf04f2
--- /dev/null
+++ b/src/styles/isomer-template/components/_cards.scss
@@ -0,0 +1,103 @@
+@use "sass:map";
+
+.isomer-card-grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+
+  &:not(:first-child) {
+    margin-top: 1.5rem;
+  }
+
+  // Add bottom margin unless the card grid is the last item on the page
+  &:not(:has(+ #related-content)) {
+    margin-bottom: 1.5rem;
+  }
+
+  .isomer-card {
+    float: left;
+    flex-basis: calc((100% - 3rem) / 3);
+    flex-shrink: 0;
+    border-width: 1px;
+    border-style: solid;
+    border-color: $border-light;
+    text-decoration: none;
+    margin-bottom: 0;
+
+    &:hover {
+      text-decoration: none;
+
+      .isomer-card-body .isomer-card-link {
+        color: $interaction-link-hover;
+      }
+    }
+
+    // Stretch cards if there are only 2 cards
+    &:nth-child(1):nth-last-child(2),
+    &:nth-child(2):nth-last-child(1) {
+      flex-basis: calc((100% - 1.5rem) / 2);
+    }
+
+    // Stretch the card if there is only 1 card
+    &:only-child {
+      flex-basis: 100%;
+    }
+
+    // Collapse to 2 columns between md and xl
+    @media screen and (max-width: map-get($breakpoints, "xl")) {
+      flex-basis: calc((100% - 1.5rem) / 2);
+    }
+
+    // Collapse to 1 column below md
+    @media screen and (max-width: map-get($breakpoints, "md")) {
+      flex-basis: 100%;
+
+      &:nth-child(1):nth-last-child(2),
+      &:nth-child(2):nth-last-child(1) {
+        flex-basis: 100%;
+      }
+    }
+
+    .isomer-card-image {
+      img {
+        width: 100%;
+        height: 12.5rem;
+        object-fit: cover;
+      }
+    }
+
+    .isomer-card-body {
+      padding: 1.5rem;
+
+      .isomer-card-title {
+        color: var(--site-secondary-color);
+        font-weight: 700;
+        font-size: 1.25rem;
+        line-height: 1.75rem;
+      }
+
+      .isomer-card-description {
+        color: $content-body;
+        font-size: 1rem;
+        line-height: 1.5rem;
+      }
+
+      .isomer-card-link {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        text-decoration: underline;
+        color: $interaction-link-default;
+      }
+
+      .isomer-card-title:has(+ .isomer-card-description) {
+        margin-bottom: 0.75rem;
+      }
+
+      .isomer-card-title:has(+ .isomer-card-link),
+      .isomer-card-description:has(+ .isomer-card-link) {
+        margin-bottom: 1.5rem;
+      }
+    }
+  }
+}
diff --git a/src/styles/isomer-template/components/_index.scss b/src/styles/isomer-template/components/_index.scss
index f7c060ff5..24c54f94c 100644
--- a/src/styles/isomer-template/components/_index.scss
+++ b/src/styles/isomer-template/components/_index.scss
@@ -1 +1,2 @@
 @import "./homepage";
+@import "./cards";
diff --git a/src/styles/isomer-template/theme/_colors.scss b/src/styles/isomer-template/theme/_colors.scss
index eca391ecf..99a72ec2d 100644
--- a/src/styles/isomer-template/theme/_colors.scss
+++ b/src/styles/isomer-template/theme/_colors.scss
@@ -1,10 +1,18 @@
 $canvas-base: #ffffff;
-$content-base: #344054;
-$utility-theme-color: var(--site-primary-color);
 $canvas-inverse: #000000;
+$canvas-translucent-grey: #00000080;
+
+$content-base: #344054;
+$content-body: #484848;
 $content-inverse: #ffffff;
+
+$utility-theme-color: var(--site-primary-color);
 $utility-secondary-color: var(--site-secondary-color);
-$canvas-translucent-grey: #00000080;
+
 $interaction-hover: #f9f9f9;
+$interaction-link-default: #4372d6;
+$interaction-link-hover: #3a79ff;
+
 $stroke-default: #d0d5dd;
+
 $border-light: #d6d6d6;
diff --git a/src/templates/pageComponentsV2/PageBody.jsx b/src/templates/pageComponentsV2/PageBody.jsx
index 507dbbe6a..e2b99cea9 100644
--- a/src/templates/pageComponentsV2/PageBody.jsx
+++ b/src/templates/pageComponentsV2/PageBody.jsx
@@ -1,6 +1,6 @@
 export const PageBody = ({ chunk }) => {
   return (
-    <div className="col is-8 is-offset-1-desktop is-12-touch print-content page-content-body">
+    <div className="col is-offset-1-desktop is-12-touch print-content page-content-body">
       <div className="content" dangerouslySetInnerHTML={{ __html: chunk }} />
     </div>
   )
diff --git a/src/types/editPage.ts b/src/types/editPage.ts
index 43b6526c6..736d7cd3b 100644
--- a/src/types/editPage.ts
+++ b/src/types/editPage.ts
@@ -1,3 +1,22 @@
 export interface EditorEmbedContents {
   value: string
 }
+
+export interface EditorCard {
+  image: string
+  altText: string
+  title: string
+  description?: string
+  linkUrl: string
+  linkText: string
+}
+
+export interface EditorCardsInfo {
+  isDisplayImage: boolean
+  cards: EditorCard[]
+}
+export type DrawerVariant = "cards" | "accordion"
+
+export const AccordionBackgrounds = ["white", "gray"] as const
+
+export type AccordionBackgroundType = typeof AccordionBackgrounds[number]
diff --git a/src/types/featureFlags.ts b/src/types/featureFlags.ts
index 85ff232ef..a6b88a9d7 100644
--- a/src/types/featureFlags.ts
+++ b/src/types/featureFlags.ts
@@ -11,6 +11,7 @@ export interface FeatureFlags {
   [FEATURE_FLAGS.HOMEPAGE_ENABLED_BLOCKS]: string[]
   [FEATURE_FLAGS.TIPTAP_EDITOR]: boolean
   [FEATURE_FLAGS.IS_SHOW_STAGING_BUILD_STATUS_ENABLED]: boolean
+  [FEATURE_FLAGS.IS_COMPLEX_BLOCKS_ENABLED]: boolean
 }
 
 export type GBAttributes = {
diff --git a/src/utils/tiptap.ts b/src/utils/tiptap.ts
new file mode 100644
index 000000000..b8698c7a0
--- /dev/null
+++ b/src/utils/tiptap.ts
@@ -0,0 +1,10 @@
+import { Editor } from "@tiptap/core"
+
+// Utility method to check if the currently active node is a supported embed
+export const isEmbedActive = (editor: Editor) => {
+  return (
+    editor.isActive("iframe") ||
+    editor.isActive("instagram") ||
+    editor.isActive("formsg")
+  )
+}
diff --git a/src/utils/validators.js b/src/utils/validators.js
index b3b64d7fb..af224ba1b 100644
--- a/src/utils/validators.js
+++ b/src/utils/validators.js
@@ -41,6 +41,14 @@ const DATE_REGEX_Y_M_D = "^([0-9]{4}-[0-9]{2}-[0-9]{2})$"
 const DATE_REGEX_D_M_Y = "^([0-9]{2}/[0-9]{2}/[0-9]{4})$"
 const ALPHABETS_ONLY_REGEX = '^[a-zA-Z" "\\._-]+$'
 const ALPHANUMERICS_ONLY_REGEX = '^[a-zA-Z0-9" "\\._\\-:]+$'
+// Matches either a local permalink or an external URL over HTTPS
+export const LINK_URL_REGEX = `^((${PERMALINK_REGEX.slice(
+  1,
+  -1
+)})|(https://(${DOMAIN_NAME_REGEX.slice(1, -1)}${URL_REGEX_SUFFIX.slice(
+  5,
+  -1
+)}))|(?=\\s*)$`
 
 export const permalinkRegexTest = RegExp(PERMALINK_REGEX)
 export const phoneRegexTest = RegExp(PHONE_REGEX)
@@ -58,7 +66,8 @@ export const resourceCategoryRegexTest = RegExp(RESOURCE_CATEGORY_REGEX)
 export const specialCharactersRegexTest = /[~%^*_+\-./\\`;~{}[\]"<>]/
 export const jekyllFirstCharacterRegexTest = /^[._#~]/
 export const mediaSpecialCharactersRegexTest = /[~%^?*+#./\\`;~{}[\]"<>]/
-export const imagesSuffixRegexTest = /^.+\.(svg|jpg|jpeg|png|gif|tif|tiff|bmp|ico)$/
+export const externalMediaRegexTest = /^https:\/\/.+/
+export const imagesSuffixRegexTest = /.+\.(svg|jpg|jpeg|png|gif|tif|tiff|bmp|ico)$/
 export const filesSuffixRegexTest = /^.+\.(pdf)$/
 
 const ISOMER_TEMPLATE_PROTECTED_DIRS = [
@@ -1264,6 +1273,14 @@ const validateSubfolderName = (value, existingNames) => {
   return errorMessage
 }
 
+const validateExternalImagePermalink = (value) => {
+  let errorMessage = ""
+  if (!externalMediaRegexTest.test(value)) {
+    errorMessage = `Enter a valid URL. A URL must start with "https://"`
+  }
+  return errorMessage
+}
+
 export {
   validateContactType,
   validateLocationType,
@@ -1281,4 +1298,5 @@ export {
   validateFileName,
   validateResourceRoomName,
   validateSubfolderName,
+  validateExternalImagePermalink,
 }