diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6c3517fee..9a60a69f2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.76.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.75.0...v0.76.0)
+
+- fix: update manifest [`#1802`](https://github.com/isomerpages/isomercms-frontend/pull/1802)
+- feat(cards): make the card link optional [`#1801`](https://github.com/isomerpages/isomercms-frontend/pull/1801)
+- chore: fix broken edit link button [`#1800`](https://github.com/isomerpages/isomercms-frontend/pull/1800)
+- fix: mediasselectmodal breadcrumb [`#1799`](https://github.com/isomerpages/isomercms-frontend/pull/1799)
+- fix(modals): set motion preset to none [`#1783`](https://github.com/isomerpages/isomercms-frontend/pull/1783)
+- release(0.75.0): merge to dev [`#1797`](https://github.com/isomerpages/isomercms-frontend/pull/1797)
+
 #### [v0.75.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.74.0...v0.75.0)
 
+> 30 January 2024
+
 - fix(tiptap): correctly parse linked image node if it is first [`#1794`](https://github.com/isomerpages/isomercms-frontend/pull/1794)
 - 0.74.0 [`#1793`](https://github.com/isomerpages/isomercms-frontend/pull/1793)
 
@@ -91,12 +102,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: warning modals [`#1744`](https://github.com/isomerpages/isomercms-frontend/pull/1744)
 - IS-734 Add delete icon to table control and other minor UI fixes [`#1743`](https://github.com/isomerpages/isomercms-frontend/pull/1743)
 - 0.64.0 [`#1741`](https://github.com/isomerpages/isomercms-frontend/pull/1741)
-- fix(preview): update overflow behaviour [`#1742`](https://github.com/isomerpages/isomercms-frontend/pull/1742)
 
 #### [v0.64.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.63.2...v0.64.0)
 
 > 12 December 2023
 
+- fix(preview): update overflow behaviour [`#1742`](https://github.com/isomerpages/isomercms-frontend/pull/1742)
 - IS-807 Fixed duplicating issue when setting hyperlink & alt text for image in RTE [`#1738`](https://github.com/isomerpages/isomercms-frontend/pull/1738)
 - refactor(legacy/markdown-editpae): update width [`#1739`](https://github.com/isomerpages/isomercms-frontend/pull/1739)
 - IS-712 Fixed image resizing issue in RTE [`#1736`](https://github.com/isomerpages/isomercms-frontend/pull/1736)
diff --git a/package-lock.json b/package-lock.json
index c893bdda1..34c9c5a45 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.75.0",
+  "version": "0.76.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "isomercms-frontend",
-      "version": "0.75.0",
+      "version": "0.76.0",
       "hasInstallScript": true,
       "dependencies": {
         "@braintree/sanitize-url": "^6.0.1",
diff --git a/package.json b/package.json
index 34dc87576..3fc7b622c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.75.0",
+  "version": "0.76.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"
diff --git a/public/index.html b/public/index.html
index 5191c7907..65e9c92c1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,13 +7,13 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Rapidly build & launch informational sites"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/boxicons@2.0.4/css/boxicons.min.css"
       rel="stylesheet"
     />
-    <link rel="apple-touch-icon" href="logo192.png" />
+    <link rel="apple-touch-icon" href="img/favicon.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c77a..f1ee4d2a2 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,19 +1,19 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "IsomerCMS",
+  "name": "IsomerCMS",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "img/favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "img/favicon.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "img/favicon.png",
       "type": "image/png",
       "sizes": "512x512"
     }
diff --git a/src/components/CollaboratorModal/components/MainSubmodal.tsx b/src/components/CollaboratorModal/components/MainSubmodal.tsx
index 3ed9e59d4..3d8a79780 100644
--- a/src/components/CollaboratorModal/components/MainSubmodal.tsx
+++ b/src/components/CollaboratorModal/components/MainSubmodal.tsx
@@ -8,7 +8,6 @@ import {
   Divider,
   FormControl,
   Input,
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalProps,
@@ -29,6 +28,8 @@ import { FormProvider, useForm } from "react-hook-form"
 import { BiTrash } from "react-icons/bi"
 import { useParams } from "react-router-dom"
 
+import { Modal } from "components/Modal"
+
 import { useLoginContext } from "contexts/LoginContext"
 
 import * as CollaboratorHooks from "hooks/collaboratorHooks"
diff --git a/src/components/CollaboratorModal/components/RemoveCollaboratorSubmodal.tsx b/src/components/CollaboratorModal/components/RemoveCollaboratorSubmodal.tsx
index b15677661..104612b8f 100644
--- a/src/components/CollaboratorModal/components/RemoveCollaboratorSubmodal.tsx
+++ b/src/components/CollaboratorModal/components/RemoveCollaboratorSubmodal.tsx
@@ -5,12 +5,13 @@ import {
   Stack,
   ModalProps,
   ModalOverlay,
-  Modal,
   ModalContent,
 } from "@chakra-ui/react"
 import { Button, ModalCloseButton } from "@opengovsg/design-system-react"
 import { useParams } from "react-router-dom"
 
+import { Modal } from "components/Modal"
+
 import { useLoginContext } from "contexts/LoginContext"
 
 import { useDeleteCollaboratorHook } from "hooks/collaboratorHooks"
diff --git a/src/components/CreateMediaFolderModal/CreateMediaFolderModal.tsx b/src/components/CreateMediaFolderModal/CreateMediaFolderModal.tsx
index 085b2350b..317dfb2b8 100644
--- a/src/components/CreateMediaFolderModal/CreateMediaFolderModal.tsx
+++ b/src/components/CreateMediaFolderModal/CreateMediaFolderModal.tsx
@@ -3,7 +3,6 @@ import {
   Center,
   FormControl,
   HStack,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -31,6 +30,7 @@ import { useRouteMatch } from "react-router-dom"
 
 import { DirectorySettingsSchema } from "components/DirectorySettingsModal"
 import { ImagePreviewCard } from "components/ImagePreviewCard"
+import { Modal } from "components/Modal"
 
 import { MEDIA_PAGINATION_SIZE } from "constants/media"
 
diff --git a/src/components/DeleteMediaModal/DeleteMediaModal.tsx b/src/components/DeleteMediaModal/DeleteMediaModal.tsx
index 320ba4c1c..6a856de14 100644
--- a/src/components/DeleteMediaModal/DeleteMediaModal.tsx
+++ b/src/components/DeleteMediaModal/DeleteMediaModal.tsx
@@ -2,7 +2,6 @@ import {
   Box,
   HStack,
   Icon,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -25,6 +24,8 @@ import {
 import { useState } from "react"
 import { BiImage } from "react-icons/bi"
 
+import { Modal } from "components/Modal"
+
 import { MediaLabels, SelectedMediaDto } from "types/media"
 import { getReadableFileSize } from "utils"
 
diff --git a/src/components/EditorCardsDrawer/EditorCardItem.tsx b/src/components/EditorCardsDrawer/EditorCardItem.tsx
index dffb83306..10816934f 100644
--- a/src/components/EditorCardsDrawer/EditorCardItem.tsx
+++ b/src/components/EditorCardsDrawer/EditorCardItem.tsx
@@ -2,7 +2,6 @@ import {
   Box,
   FormControl,
   HStack,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -27,6 +26,7 @@ import { UseFormReturn } from "react-hook-form"
 import { Editable } from "components/Editable"
 import { FormContext } from "components/Form"
 import FormFieldMedia from "components/FormFieldMedia"
+import { Modal } from "components/Modal"
 
 import { TIPTAP_CARDS_DESCRIPTION_CHAR_LIMIT } from "constants/tiptap"
 
@@ -196,12 +196,15 @@ export const EditorCardItem = ({
           </FormControl>
 
           {/* Card link URL */}
-          <FormControl isRequired isInvalid={!!errors.cards?.[index]?.linkUrl}>
+          <FormControl 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 })}
+              {...methods.register(`cards.${index}.linkUrl`, {
+                onChange,
+                onBlur: () => methods.trigger(),
+              })}
             />
             <FormErrorMessage>
               {errors.cards?.[index]?.linkUrl?.message}
@@ -209,12 +212,18 @@ export const EditorCardItem = ({
           </FormControl>
 
           {/* Card link text */}
-          <FormControl isRequired isInvalid={!!errors.cards?.[index]?.linkText}>
+          <FormControl
+            isRequired={methods.watch(`cards.${index}.linkUrl`)?.length > 0}
+            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 })}
+              {...methods.register(`cards.${index}.linkText`, {
+                onChange,
+                onBlur: () => methods.trigger(),
+              })}
             />
             <FormErrorMessage>
               {errors.cards?.[index]?.linkText?.message}
diff --git a/src/components/EditorCardsDrawer/EditorCardsDrawer.tsx b/src/components/EditorCardsDrawer/EditorCardsDrawer.tsx
index 97aa765ef..9481be454 100644
--- a/src/components/EditorCardsDrawer/EditorCardsDrawer.tsx
+++ b/src/components/EditorCardsDrawer/EditorCardsDrawer.tsx
@@ -34,6 +34,25 @@ import { LINK_URL_REGEX } from "utils"
 
 import { EditorCardItem } from "./EditorCardItem"
 
+const editorCardsInfoBasicShape = {
+  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().matches(
+    new RegExp(LINK_URL_REGEX),
+    "Please enter a valid link URL"
+  ),
+  linkText: Yup.string().when("linkUrl", {
+    is: (value: string) => value.length > 0,
+    then: Yup.string().required(
+      "Link text is required when link URL is present"
+    ),
+    otherwise: Yup.string(),
+  }),
+}
+
 const editorCardsInfoSchema = Yup.object().shape({
   isDisplayImage: Yup.boolean(),
   cards: Yup.array()
@@ -43,34 +62,12 @@ const editorCardsInfoSchema = Yup.object().shape({
         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"),
+          ...editorCardsInfoBasicShape,
         })
       ),
       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"),
+          ...editorCardsInfoBasicShape,
         })
       ),
     })
diff --git a/src/components/EditorDrawerCloseWarningModal/EditorDrawerCloseWarningModal.tsx b/src/components/EditorDrawerCloseWarningModal/EditorDrawerCloseWarningModal.tsx
index 90c944edb..757ad9c7a 100644
--- a/src/components/EditorDrawerCloseWarningModal/EditorDrawerCloseWarningModal.tsx
+++ b/src/components/EditorDrawerCloseWarningModal/EditorDrawerCloseWarningModal.tsx
@@ -1,6 +1,5 @@
 import {
   HStack,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -10,6 +9,8 @@ import {
 } from "@chakra-ui/react"
 import { Button, ModalCloseButton } from "@opengovsg/design-system-react"
 
+import { Modal } from "components/Modal"
+
 interface EditorDrawerCloseWarningModalProps {
   name: string
   isOpen: boolean
diff --git a/src/components/EditorEmbedModal/EditorEmbedModal.tsx b/src/components/EditorEmbedModal/EditorEmbedModal.tsx
index 360b761ea..e7963f44a 100644
--- a/src/components/EditorEmbedModal/EditorEmbedModal.tsx
+++ b/src/components/EditorEmbedModal/EditorEmbedModal.tsx
@@ -1,7 +1,6 @@
 import {
   FormControl,
   HStack,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -22,6 +21,8 @@ import { useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import * as Yup from "yup"
 
+import { Modal } from "components/Modal"
+
 import { useCspHook } from "hooks/settingsHooks"
 
 import { isEmbedCodeValid } from "utils/allowedHTML"
diff --git a/src/components/FeedbackModal/FeedbackModal.tsx b/src/components/FeedbackModal/FeedbackModal.tsx
index d569849eb..621e03368 100644
--- a/src/components/FeedbackModal/FeedbackModal.tsx
+++ b/src/components/FeedbackModal/FeedbackModal.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -19,6 +18,7 @@ import {
 import { useState } from "react"
 import { useForm } from "react-hook-form"
 
+import { Modal } from "components/Modal"
 import { Rating } from "components/Rating/Rating"
 
 import { useLoginContext } from "contexts/LoginContext"
diff --git a/src/components/Header/ContactModal/ContactVerificationModal.tsx b/src/components/Header/ContactModal/ContactVerificationModal.tsx
index fb4345f28..716c82936 100644
--- a/src/components/Header/ContactModal/ContactVerificationModal.tsx
+++ b/src/components/Header/ContactModal/ContactVerificationModal.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalBody,
   ModalContent,
   ModalHeader,
@@ -9,6 +8,8 @@ import {
 import { ModalCloseButton } from "@opengovsg/design-system-react"
 import { useState } from "react"
 
+import { Modal } from "components/Modal"
+
 import { useLoginContext } from "contexts/LoginContext"
 
 import { useUpdateContact, useVerifyContact } from "hooks/miscHooks"
diff --git a/src/components/HyperlinkModal.jsx b/src/components/HyperlinkModal.jsx
index 07e805bf9..7976a8204 100644
--- a/src/components/HyperlinkModal.jsx
+++ b/src/components/HyperlinkModal.jsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -16,6 +15,7 @@ import PropTypes from "prop-types"
 import { useState } from "react"
 
 import FormField from "components/FormField"
+import { Modal } from "components/Modal"
 
 import FormContext from "./Form/FormContext"
 import FormTitle from "./Form/FormTitle"
diff --git a/src/components/MediaCreationModal/MediaCreationModal.tsx b/src/components/MediaCreationModal/MediaCreationModal.tsx
index 03e8fde48..747f072c7 100644
--- a/src/components/MediaCreationModal/MediaCreationModal.tsx
+++ b/src/components/MediaCreationModal/MediaCreationModal.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -23,6 +22,7 @@ import { FileRejection } from "react-dropzone"
 import { BiCheckCircle, BiSolidErrorCircle } from "react-icons/bi"
 
 import { Attachment } from "components/Attachment"
+import { Modal } from "components/Modal"
 
 import { useCreateMultipleMedia } from "hooks/mediaHooks/useCreateMultipleMedia"
 
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
new file mode 100644
index 000000000..5297db80e
--- /dev/null
+++ b/src/components/Modal/Modal.tsx
@@ -0,0 +1,10 @@
+import { Modal as ChakraModal, ModalProps } from "@chakra-ui/react"
+
+/**
+ * NOTE: We are wrapping the Modal component from Chakra UI by enforcing the
+ * motion preset to be "none" by default. This is because having animations
+ * makes the CMS appear very slow on GSIBs.
+ */
+export const Modal = ({ motionPreset, ...rest }: ModalProps) => {
+  return <ChakraModal motionPreset={motionPreset || "none"} {...rest} />
+}
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
new file mode 100644
index 000000000..655552102
--- /dev/null
+++ b/src/components/Modal/index.ts
@@ -0,0 +1 @@
+export * from "./Modal"
diff --git a/src/components/MoveMediaModal/MoveMediaModal.tsx b/src/components/MoveMediaModal/MoveMediaModal.tsx
index afcf5b8d6..72129b18a 100644
--- a/src/components/MoveMediaModal/MoveMediaModal.tsx
+++ b/src/components/MoveMediaModal/MoveMediaModal.tsx
@@ -2,7 +2,6 @@ import {
   Box,
   HStack,
   Icon,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -25,6 +24,7 @@ import { UseMutateFunction } from "react-query"
 import { useParams } from "react-router-dom"
 
 import { Breadcrumbs } from "components/Breadcrumbs"
+import { Modal } from "components/Modal"
 import { DirMenuItem, FileMenuItem } from "components/move/MoveMenuItem"
 
 import {
diff --git a/src/components/PageSettingsModal/PageSettingsModal.tsx b/src/components/PageSettingsModal/PageSettingsModal.tsx
index 521c4ab7c..14fe98706 100644
--- a/src/components/PageSettingsModal/PageSettingsModal.tsx
+++ b/src/components/PageSettingsModal/PageSettingsModal.tsx
@@ -1,6 +1,5 @@
 import {
   Input,
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -36,6 +35,7 @@ import {
 } from "components/Form"
 import FormFieldMedia from "components/FormFieldMedia"
 import { LoadingButton } from "components/LoadingButton"
+import { Modal } from "components/Modal"
 
 import { isWriteActionsDisabled } from "utils/reviewRequests"
 
diff --git a/src/components/PageSettingsModal/ResourcePageSettingsModal.tsx b/src/components/PageSettingsModal/ResourcePageSettingsModal.tsx
index 53c00c74a..07e16894d 100644
--- a/src/components/PageSettingsModal/ResourcePageSettingsModal.tsx
+++ b/src/components/PageSettingsModal/ResourcePageSettingsModal.tsx
@@ -1,6 +1,5 @@
 import {
   Input,
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -42,6 +41,7 @@ import {
 } from "components/Form"
 import FormFieldMedia from "components/FormFieldMedia"
 import { LoadingButton } from "components/LoadingButton"
+import { Modal } from "components/Modal"
 
 import { isWriteActionsDisabled } from "utils/reviewRequests"
 
diff --git a/src/components/ViewStagingSiteModal/ViewStagingSiteModal.tsx b/src/components/ViewStagingSiteModal/ViewStagingSiteModal.tsx
index cb4f69972..ceab2006a 100644
--- a/src/components/ViewStagingSiteModal/ViewStagingSiteModal.tsx
+++ b/src/components/ViewStagingSiteModal/ViewStagingSiteModal.tsx
@@ -1,6 +1,5 @@
 import {
   HStack,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -15,7 +14,8 @@ import { Button, ModalCloseButton } from "@opengovsg/design-system-react"
 import QRCode from "qrcode"
 import { useEffect, useState } from "react"
 
-import { ButtonLink } from "../ButtonLink"
+import { ButtonLink } from "components/ButtonLink"
+import { Modal } from "components/Modal"
 
 export interface ViewStagingSiteModalProps {
   isOpen: boolean
diff --git a/src/components/WarningModal/WarningModal.tsx b/src/components/WarningModal/WarningModal.tsx
index 4f7d3d67a..830659c21 100644
--- a/src/components/WarningModal/WarningModal.tsx
+++ b/src/components/WarningModal/WarningModal.tsx
@@ -1,7 +1,6 @@
 import {
   Text,
   HStack,
-  Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
@@ -12,6 +11,8 @@ import {
 import { ModalCloseButton } from "@opengovsg/design-system-react"
 import { PropsWithChildren } from "react"
 
+import { Modal } from "components/Modal"
+
 interface WarningModalProps extends ModalProps {
   displayTitle: string
   displayText: JSX.Element
diff --git a/src/components/media/MediasSelectModal.jsx b/src/components/media/MediasSelectModal.jsx
index b07ebeccd..0af2e4fa5 100644
--- a/src/components/media/MediasSelectModal.jsx
+++ b/src/components/media/MediasSelectModal.jsx
@@ -6,7 +6,6 @@ import {
   Center,
   SimpleGrid,
   Text,
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -46,6 +45,7 @@ import { useRouteMatch } from "react-router-dom"
 
 import { ImagePreviewCard } from "components/ImagePreviewCard"
 import { LoadingButton } from "components/LoadingButton"
+import { Modal } from "components/Modal"
 
 import { MEDIA_PAGINATION_SIZE } from "constants/media"
 
@@ -600,6 +600,7 @@ const MediasSelectModal = ({
                 </Text>
                 <FolderBreadcrumb
                   mediaDirectoryName={queryParams.mediaDirectoryName}
+                  setQueryParams={setQueryParams}
                 />
               </VStack>
             </ModalHeader>
diff --git a/src/features/AnnouncementModal/AnnouncementModal.tsx b/src/features/AnnouncementModal/AnnouncementModal.tsx
index d84258d7f..9be1151a1 100644
--- a/src/features/AnnouncementModal/AnnouncementModal.tsx
+++ b/src/features/AnnouncementModal/AnnouncementModal.tsx
@@ -1,7 +1,6 @@
 import {
   Flex,
   Image,
-  Modal,
   ModalCloseButton,
   ModalContent,
   ModalFooter,
@@ -17,6 +16,7 @@ import { Button } from "@opengovsg/design-system-react"
 import { useMemo, useState } from "react"
 import { BiRightArrowAlt } from "react-icons/bi"
 
+import { Modal } from "components/Modal"
 import { ProgressIndicator } from "components/ProgressIndicator"
 
 import { useAnnouncements } from "hooks/useAnnouncement"
diff --git a/src/layouts/EditPage/MarkdownEditPage.tsx b/src/layouts/EditPage/MarkdownEditPage.tsx
index ee874f7a8..9c6296051 100644
--- a/src/layouts/EditPage/MarkdownEditPage.tsx
+++ b/src/layouts/EditPage/MarkdownEditPage.tsx
@@ -2,7 +2,6 @@ import {
   useDisclosure,
   Text,
   Box,
-  Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
@@ -21,6 +20,7 @@ import { useCallback, useEffect, useState } from "react"
 import { BiLinkExternal } from "react-icons/bi"
 import { useParams } from "react-router-dom"
 
+import { Modal } from "components/Modal"
 import MarkdownEditor from "components/pages/MarkdownEditor"
 import PagePreview from "components/pages/PagePreview"
 
diff --git a/src/layouts/ResourceRoom/ResourceRoom.tsx b/src/layouts/ResourceRoom/ResourceRoom.tsx
index 37db458fa..c1d0b2281 100644
--- a/src/layouts/ResourceRoom/ResourceRoom.tsx
+++ b/src/layouts/ResourceRoom/ResourceRoom.tsx
@@ -4,7 +4,6 @@ import {
   FormControl,
   FormErrorMessage,
   Icon,
-  Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
@@ -35,6 +34,7 @@ import {
 import { ContextMenu } from "components/ContextMenu"
 import { EmptyArea } from "components/EmptyArea"
 import { Greyscale } from "components/Greyscale"
+import { Modal } from "components/Modal"
 
 import {
   useCreateResourceDirectory,
diff --git a/src/layouts/ReviewRequest/components/ApprovedModal/ApprovedModal.tsx b/src/layouts/ReviewRequest/components/ApprovedModal/ApprovedModal.tsx
index 534d5a1dc..66da4ddbc 100644
--- a/src/layouts/ReviewRequest/components/ApprovedModal/ApprovedModal.tsx
+++ b/src/layouts/ReviewRequest/components/ApprovedModal/ApprovedModal.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -12,6 +11,8 @@ import {
 } from "@chakra-ui/react"
 import { Button, ModalCloseButton } from "@opengovsg/design-system-react"
 
+import { Modal } from "components/Modal"
+
 import { ToastImage } from "assets"
 
 interface ApprovedModalProps extends Omit<ModalProps, "children"> {
diff --git a/src/layouts/ReviewRequest/components/CancelRequestModal/CancelRequestModal.tsx b/src/layouts/ReviewRequest/components/CancelRequestModal/CancelRequestModal.tsx
index 3a2eb27fa..9db0f2f15 100644
--- a/src/layouts/ReviewRequest/components/CancelRequestModal/CancelRequestModal.tsx
+++ b/src/layouts/ReviewRequest/components/CancelRequestModal/CancelRequestModal.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -12,6 +11,8 @@ import { Button, ModalCloseButton } from "@opengovsg/design-system-react"
 import { useEffect } from "react"
 import { useParams } from "react-router-dom"
 
+import { Modal } from "components/Modal"
+
 import { useCancelReviewRequest } from "hooks/reviewHooks/useCancelReviewRequest"
 
 import { getAxiosErrorMessage } from "utils/axios"
diff --git a/src/layouts/ReviewRequest/components/EditingBlockedModal/EditingBlockedModal.tsx b/src/layouts/ReviewRequest/components/EditingBlockedModal/EditingBlockedModal.tsx
index 99c18d0b3..3bb18850a 100644
--- a/src/layouts/ReviewRequest/components/EditingBlockedModal/EditingBlockedModal.tsx
+++ b/src/layouts/ReviewRequest/components/EditingBlockedModal/EditingBlockedModal.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -10,6 +9,8 @@ import {
 } from "@chakra-ui/react"
 import { Button, ModalCloseButton } from "@opengovsg/design-system-react"
 
+import { Modal } from "components/Modal"
+
 export const EditingBlockedModal = (
   props: Omit<ModalProps, "children">
 ): JSX.Element => {
diff --git a/src/layouts/ReviewRequest/components/ManageReviewerModal/ManageReviewerModal.tsx b/src/layouts/ReviewRequest/components/ManageReviewerModal/ManageReviewerModal.tsx
index 340563e81..60eb6fdfc 100644
--- a/src/layouts/ReviewRequest/components/ManageReviewerModal/ManageReviewerModal.tsx
+++ b/src/layouts/ReviewRequest/components/ManageReviewerModal/ManageReviewerModal.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -16,6 +15,8 @@ import { Controller, FormProvider, useForm } from "react-hook-form"
 import { useParams } from "react-router-dom"
 import Select from "react-select"
 
+import { Modal } from "components/Modal"
+
 import { useReviewRequestRoleContext } from "contexts/ReviewRequestRoleContext"
 
 import { useUpdateReviewRequest } from "hooks/reviewHooks/useUpdateReviewRequest"
diff --git a/src/layouts/ReviewRequest/components/PendingApprovalModal/PendingApprovalModal.tsx b/src/layouts/ReviewRequest/components/PendingApprovalModal/PendingApprovalModal.tsx
index 1841e7fc9..0140b8b2e 100644
--- a/src/layouts/ReviewRequest/components/PendingApprovalModal/PendingApprovalModal.tsx
+++ b/src/layouts/ReviewRequest/components/PendingApprovalModal/PendingApprovalModal.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -10,6 +9,8 @@ import {
 } from "@chakra-ui/react"
 import { Button, ModalCloseButton } from "@opengovsg/design-system-react"
 
+import { Modal } from "components/Modal"
+
 export const PendingApprovalModal = (
   props: Omit<ModalProps, "children">
 ): JSX.Element => {
diff --git a/src/layouts/ReviewRequest/components/PublishedModal/PublishedModal.tsx b/src/layouts/ReviewRequest/components/PublishedModal/PublishedModal.tsx
index 18188e3ac..136c5512a 100644
--- a/src/layouts/ReviewRequest/components/PublishedModal/PublishedModal.tsx
+++ b/src/layouts/ReviewRequest/components/PublishedModal/PublishedModal.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -14,6 +13,8 @@ import { Button, ModalCloseButton, Link } from "@opengovsg/design-system-react"
 import { useQueryClient } from "react-query"
 import { useParams } from "react-router-dom"
 
+import { Modal } from "components/Modal"
+
 import { invalidateMergeRelatedQueries } from "hooks/reviewHooks"
 import { useGetSiteUrl } from "hooks/siteDashboardHooks"
 
diff --git a/src/layouts/ReviewRequest/components/RequestOverview/RequestOverview.stories.tsx b/src/layouts/ReviewRequest/components/RequestOverview/RequestOverview.stories.tsx
index 50491ae03..71b53ee05 100644
--- a/src/layouts/ReviewRequest/components/RequestOverview/RequestOverview.stories.tsx
+++ b/src/layouts/ReviewRequest/components/RequestOverview/RequestOverview.stories.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -19,6 +18,8 @@ import { ModalCloseButton, Button, Tab } from "@opengovsg/design-system-react"
 import { Story, ComponentMeta } from "@storybook/react"
 import _ from "lodash"
 
+import { Modal } from "components/Modal"
+
 import { MOCK_ITEMS } from "mocks/constants"
 
 import { RequestOverview, RequestOverviewProps } from "./RequestOverview"
@@ -34,7 +35,7 @@ const Template: Story<RequestOverviewProps> = ({ items }) => {
     <Modal {...props} size="full">
       <ModalOverlay />
       <ModalContent>
-        {/* 
+        {/*
             NOTE: padding has to be used as the base component from Chakra uses it to set padding.
             Not using it (and using pt etc) would result in the property being overwritten to the default.
             The format is top, left + right, bottom.
@@ -54,10 +55,10 @@ const Template: Story<RequestOverviewProps> = ({ items }) => {
         <ModalBody px="16.5rem" pt="1.5rem" pb="2.5rem">
           <Tabs defaultIndex={1}>
             <TabList>
-              {/* 
+              {/*
                   NOTE: The design system tab has inbuilt left-margin.
                   However, the figma design requires that the tabs be aligned with the content.
-                  Hence, margin is set to 0 here 
+                  Hence, margin is set to 0 here
                   */}
               <Tab ml={0}>Add Details</Tab>
               <Tab>Edited Items</Tab>
diff --git a/src/layouts/ReviewRequest/components/ReviewRequestForm/ReviewRequestForm.stories.tsx b/src/layouts/ReviewRequest/components/ReviewRequestForm/ReviewRequestForm.stories.tsx
index 46a57ea61..c62bd2e68 100644
--- a/src/layouts/ReviewRequest/components/ReviewRequestForm/ReviewRequestForm.stories.tsx
+++ b/src/layouts/ReviewRequest/components/ReviewRequestForm/ReviewRequestForm.stories.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -20,6 +19,8 @@ import { Story, ComponentMeta } from "@storybook/react"
 import _ from "lodash"
 import { useForm, FormProvider } from "react-hook-form"
 
+import { Modal } from "components/Modal"
+
 import { MOCK_ADMINS } from "mocks/constants"
 import { ReviewRequestInfo } from "types/reviewRequest"
 
@@ -39,7 +40,7 @@ const Template: Story<ReviewRequestFormProps> = ({ admins }) => {
     <Modal {...props} size="full">
       <ModalOverlay />
       <ModalContent>
-        {/* 
+        {/*
           NOTE: padding has to be used as the base component from Chakra uses it to set padding.
           Not using it (and using pt etc) would result in the property being overwritten to the default.
           The format is top, left + right, bottom.
@@ -59,10 +60,10 @@ const Template: Story<ReviewRequestFormProps> = ({ admins }) => {
         <ModalBody px="16.5rem" pt="1.5rem" pb="2.5rem">
           <Tabs>
             <TabList>
-              {/* 
+              {/*
                 NOTE: The design system tab has inbuilt left-margin.
                 However, the figma design requires that the tabs be aligned with the content.
-                Hence, margin is set to 0 here 
+                Hence, margin is set to 0 here
                 */}
               <Tab ml={0}>Add Details</Tab>
               <Tab>Edited Items</Tab>
diff --git a/src/layouts/ReviewRequest/components/ReviewRequestModal/ReviewRequestModal.tsx b/src/layouts/ReviewRequest/components/ReviewRequestModal/ReviewRequestModal.tsx
index 69bd807ff..d770016c0 100644
--- a/src/layouts/ReviewRequest/components/ReviewRequestModal/ReviewRequestModal.tsx
+++ b/src/layouts/ReviewRequest/components/ReviewRequestModal/ReviewRequestModal.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -20,6 +19,8 @@ import { useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useParams } from "react-router-dom"
 
+import { Modal } from "components/Modal"
+
 import { useLoginContext } from "contexts/LoginContext"
 
 import { useListCollaborators } from "hooks/collaboratorHooks"
@@ -94,7 +95,7 @@ export const ReviewRequestModal = (
       <ModalOverlay />
       <ModalContent>
         <form onSubmit={onSubmit}>
-          {/* 
+          {/*
           NOTE: padding has to be used as the base component from Chakra uses it to set padding.
           Not using it (and using pt etc) would result in the property being overwritten to the default.
           The format is top, left + right, bottom.
@@ -114,10 +115,10 @@ export const ReviewRequestModal = (
           <ModalBody px="16.5rem" pt="1.5rem" pb="2.5rem">
             <Tabs>
               <TabList>
-                {/* 
+                {/*
                 NOTE: The design system tab has inbuilt left-margin.
                 However, the figma design requires that the tabs be aligned with the content.
-                Hence, margin is set to 0 here 
+                Hence, margin is set to 0 here
                 */}
                 <Tab ml={0}>Add Details</Tab>
                 <Tab>Edited Items</Tab>
diff --git a/src/layouts/ReviewRequest/components/SendRequestModal/SendRequestModal.tsx b/src/layouts/ReviewRequest/components/SendRequestModal/SendRequestModal.tsx
index e2413b73e..319deaf09 100644
--- a/src/layouts/ReviewRequest/components/SendRequestModal/SendRequestModal.tsx
+++ b/src/layouts/ReviewRequest/components/SendRequestModal/SendRequestModal.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -22,6 +21,7 @@ import { BiCopy, BiMailSend } from "react-icons/bi"
 import Select from "react-select"
 
 import { ButtonLink } from "components/ButtonLink"
+import { Modal } from "components/Modal"
 
 import { User } from "types/reviewRequest"
 
diff --git a/src/layouts/Settings/ColourSettings.tsx b/src/layouts/Settings/ColourSettings.tsx
index a593b9905..c9918496b 100644
--- a/src/layouts/Settings/ColourSettings.tsx
+++ b/src/layouts/Settings/ColourSettings.tsx
@@ -5,7 +5,6 @@ import {
   forwardRef,
   Flex,
   FormControl,
-  Modal,
   ModalContent,
 } from "@chakra-ui/react"
 import {
@@ -19,6 +18,8 @@ import { useState } from "react"
 import { SketchPicker } from "react-color"
 import { useFormContext, Controller } from "react-hook-form"
 
+import { Modal } from "components/Modal"
+
 import { Section, SectionHeader } from "layouts/components"
 
 import { varyHexColor } from "utils/colours"
diff --git a/src/layouts/SiteLaunchPad/SiteLaunchPad.tsx b/src/layouts/SiteLaunchPad/SiteLaunchPad.tsx
index 68b28e05a..1949fe417 100644
--- a/src/layouts/SiteLaunchPad/SiteLaunchPad.tsx
+++ b/src/layouts/SiteLaunchPad/SiteLaunchPad.tsx
@@ -1,5 +1,4 @@
 import {
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalFooter,
@@ -19,6 +18,8 @@ import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 import { Redirect, useParams } from "react-router-dom"
 
+import { Modal } from "components/Modal"
+
 import { useSiteLaunchContext } from "contexts/SiteLaunchContext"
 
 import { useGetCollaboratorRoleHook } from "hooks/collaboratorHooks"
diff --git a/src/layouts/components/Editor/components/LinkBubbleMenu.tsx b/src/layouts/components/Editor/components/LinkBubbleMenu.tsx
index 031a0cb16..64a619caa 100644
--- a/src/layouts/components/Editor/components/LinkBubbleMenu.tsx
+++ b/src/layouts/components/Editor/components/LinkBubbleMenu.tsx
@@ -1,6 +1,5 @@
 import {
   useDisclosure,
-  Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
@@ -14,6 +13,8 @@ import { BubbleMenu } from "@tiptap/react"
 import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 
+import { Modal } from "components/Modal"
+
 import { useEditorContext } from "contexts/EditorContext"
 import { useEditorModal } from "contexts/EditorModalContext"
 
@@ -72,7 +73,9 @@ const LinkButton = () => {
           const { href: _linkHref } = editor.getAttributes("link")
           const linkHref = _linkHref as string
           const isLinkRelativeFilePath =
-            linkHref.startsWith("/") && linkHref.split("/").at(1) === "files"
+            linkHref &&
+            linkHref.startsWith("/") &&
+            linkHref.split("/").at(1) === "files"
           if (isLinkRelativeFilePath) {
             showModal("files")
           } else {