diff --git a/apps/studio/src/constants/formBuilder.ts b/apps/studio/src/constants/formBuilder.ts
index b38aaa31a..98409e334 100644
--- a/apps/studio/src/constants/formBuilder.ts
+++ b/apps/studio/src/constants/formBuilder.ts
@@ -10,6 +10,7 @@ export const JSON_FORMS_RANKING = {
   AnyOfControl: 3,
   ProseControl: 2,
   RadioControl: 3,
+  LinkControl: 3,
   GroupLayoutRenderer: 1,
   VerticalLayoutRenderer: 1,
 }
diff --git a/apps/studio/src/features/editing-experience/components/ComplexEditorStateDrawer.tsx b/apps/studio/src/features/editing-experience/components/ComplexEditorStateDrawer.tsx
index 749c5161a..82b00cb4c 100644
--- a/apps/studio/src/features/editing-experience/components/ComplexEditorStateDrawer.tsx
+++ b/apps/studio/src/features/editing-experience/components/ComplexEditorStateDrawer.tsx
@@ -1,4 +1,4 @@
-import { Box, Heading, HStack, Icon } from "@chakra-ui/react"
+import { Box, Flex, Heading, HStack, Icon } from "@chakra-ui/react"
 import { Button, IconButton } from "@opengovsg/design-system-react"
 import { getComponentSchema } from "@opengovsg/isomer-components"
 import { BiDollar, BiX } from "react-icons/bi"
@@ -29,7 +29,13 @@ export default function ComplexEditorStateDrawer(): JSX.Element {
   const { title } = getComponentSchema(component.type)
 
   return (
-    <Box position="relative" h="100%" w="100%" overflow="auto">
+    <Flex
+      flexDir="column"
+      position="relative"
+      h="100%"
+      w="100%"
+      overflow="auto"
+    >
       <Box
         bgColor="base.canvas.default"
         borderBottomColor="base.divider.medium"
@@ -68,7 +74,14 @@ export default function ComplexEditorStateDrawer(): JSX.Element {
       <Box px="2rem" py="1rem">
         <FormBuilder />
       </Box>
-      <Box px="2rem" pb="1.5rem">
+      <Box
+        pos="sticky"
+        bottom={0}
+        bgColor="base.canvas.default"
+        boxShadow="md"
+        py="1.5rem"
+        px="2rem"
+      >
         <Button
           w="100%"
           onClick={() => {
@@ -79,6 +92,6 @@ export default function ComplexEditorStateDrawer(): JSX.Element {
           Save
         </Button>
       </Box>
-    </Box>
+    </Flex>
   )
 }
diff --git a/apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx b/apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx
index 4c66f189d..81be2ea18 100644
--- a/apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx
+++ b/apps/studio/src/features/editing-experience/components/RootStateDrawer.tsx
@@ -5,7 +5,6 @@ import {
   Divider,
   HStack,
   Icon,
-  Spacer,
   Text,
   VStack,
 } from "@chakra-ui/react"
@@ -148,13 +147,14 @@ export default function RootStateDrawer() {
           </Droppable>
         </DragDropContext>
       </VStack>
-      <Spacer />
-      {/* TODO: Add New Block Section */}
       <Box
         w="100%"
-        bgColor="white"
-        p="1.5rem 2rem 1.5rem 2rem"
-        boxShadow="0px 0px 10px 0px #BFBFBF80"
+        bgColor="base.canvas.default"
+        boxShadow="md"
+        pos="sticky"
+        py="1.5rem"
+        px="2rem"
+        bottom={0}
       >
         <Button
           w="100%"
diff --git a/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx b/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx
index 0f7ba0b87..01a40d8c5 100644
--- a/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx
+++ b/apps/studio/src/features/editing-experience/components/form-builder/FormBuilder.tsx
@@ -20,6 +20,8 @@ import {
   jsonFormsGroupLayoutTester,
   JsonFormsIntegerControl,
   jsonFormsIntegerControlTester,
+  JsonFormsLinkControl,
+  jsonFormsLinkControlTester,
   JsonFormsObjectControl,
   jsonFormsObjectControlTester,
   JsonFormsProseControl,
@@ -41,6 +43,7 @@ const renderers: JsonFormsRendererRegistryEntry[] = [
     renderer: JsonFormsDropdownControl,
   },
   { tester: jsonFormsIntegerControlTester, renderer: JsonFormsIntegerControl },
+  { tester: jsonFormsLinkControlTester, renderer: JsonFormsLinkControl },
   { tester: jsonFormsTextControlTester, renderer: JsonFormsTextControl },
   { tester: jsonFormsAllOfControlTester, renderer: JsonFormsAllOfControl },
   { tester: jsonFormsAnyOfControlTester, renderer: JsonFormsAnyOfControl },
diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsLinkControl.tsx b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsLinkControl.tsx
new file mode 100644
index 000000000..b396d478a
--- /dev/null
+++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/JsonFormsLinkControl.tsx
@@ -0,0 +1,198 @@
+import type { UseRadioProps } from "@chakra-ui/react"
+import type { ControlProps, RankedTester } from "@jsonforms/core"
+import type { PropsWithChildren } from "react"
+import { useState } from "react"
+import {
+  Box,
+  FormControl,
+  HStack,
+  Icon,
+  Text,
+  useRadio,
+  useRadioGroup,
+} from "@chakra-ui/react"
+import { and, isStringControl, rankWith, schemaMatches } from "@jsonforms/core"
+import { withJsonFormsControlProps } from "@jsonforms/react"
+import { FormLabel, Input } from "@opengovsg/design-system-react"
+import { BiEnvelopeOpen, BiFile, BiFileBlank, BiLink } from "react-icons/bi"
+
+import { JSON_FORMS_RANKING } from "~/constants/formBuilder"
+
+const LINK_TYPES = {
+  page: {
+    icon: BiFileBlank,
+    label: "Page",
+  },
+  external: {
+    icon: BiLink,
+    label: "External link",
+  },
+  file: {
+    icon: BiFile,
+    label: "File",
+  },
+  email: {
+    icon: BiEnvelopeOpen,
+    label: "Email",
+  },
+} as const
+
+export const jsonFormsLinkControlTester: RankedTester = rankWith(
+  JSON_FORMS_RANKING.LinkControl,
+  and(
+    isStringControl,
+    schemaMatches((schema) => schema.format === "link"),
+  ),
+)
+
+const RadioCard = ({ children, ...rest }: PropsWithChildren<UseRadioProps>) => {
+  const { getInputProps, getRadioProps } = useRadio(rest)
+
+  return (
+    <Box
+      as="label"
+      _first={{
+        "> div": {
+          borderLeftRadius: "base",
+        },
+      }}
+      _last={{
+        "> div": {
+          borderRightRadius: "base",
+        },
+      }}
+    >
+      <input {...getInputProps()} />
+      <Box
+        {...getRadioProps()}
+        cursor="pointer"
+        border="1px solid"
+        borderColor="base.divider.strong"
+        bgColor="utility.ui"
+        px="1rem"
+        py="0.5rem"
+        mx={0}
+        _checked={{
+          bgColor: "interaction.muted.main.active",
+          color: "interaction.main.default",
+          borderColor: "interaction.main.default",
+        }}
+        textTransform="none"
+        fontWeight={500}
+        lineHeight="1.25rem"
+      >
+        {children}
+      </Box>
+    </Box>
+  )
+}
+
+interface RadioContentProps {
+  selectedLinkType: string
+  data: string
+  handleChange: (value: string) => void
+}
+
+const RadioContent = ({
+  selectedLinkType,
+  data,
+  handleChange,
+}: RadioContentProps): JSX.Element => {
+  switch (selectedLinkType) {
+    case "page":
+      return (
+        <Input
+          type="text"
+          value={data}
+          onChange={(e) => handleChange(e.target.value)}
+          placeholder="Page permalink"
+        />
+      )
+    case "external":
+      return (
+        <Input
+          type="text"
+          value={data}
+          onChange={(e) => handleChange(e.target.value)}
+          placeholder="https://www.isomer.gov.sg"
+        />
+      )
+    case "file":
+      return (
+        <Input
+          type="text"
+          value={data}
+          onChange={(e) => handleChange(e.target.value)}
+          placeholder="File link"
+        />
+      )
+    case "email":
+      return (
+        <Input
+          type="text"
+          value={data.startsWith("mailto:") ? data.slice("mailto:".length) : ""}
+          onChange={(e) => handleChange(`mailto:${e.target.value}`)}
+          placeholder="test@example.com"
+        />
+      )
+    default:
+      return <></>
+  }
+}
+
+export function JsonFormsLinkControl({
+  data,
+  label,
+  handleChange,
+  path,
+  description,
+  required,
+}: ControlProps) {
+  const [selectedLinkType, setSelectedLinkType] = useState("page")
+
+  const handleLinkTypeChange = (value: string) => {
+    setSelectedLinkType(value)
+    handleChange(path, "")
+  }
+
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    name: "link-type",
+    defaultValue: "page",
+    onChange: handleLinkTypeChange,
+  })
+
+  const dataString = data && typeof data === "string" ? data : ""
+
+  return (
+    <Box py="0.5rem">
+      <FormControl isRequired={required}>
+        <FormLabel description={description}>{label}</FormLabel>
+
+        <HStack {...getRootProps()} spacing={0}>
+          {Object.entries(LINK_TYPES).map(([key, { icon, label }]) => {
+            const radio = getRadioProps({ value: key })
+
+            return (
+              <RadioCard key={key} {...radio}>
+                <HStack spacing={2}>
+                  <Icon as={icon} fontSize="1.25rem" />
+                  <Text textStyle="subhead-2">{label}</Text>
+                </HStack>
+              </RadioCard>
+            )
+          })}
+        </HStack>
+
+        <Box my="0.5rem">
+          <RadioContent
+            selectedLinkType={selectedLinkType}
+            data={dataString}
+            handleChange={(value) => handleChange(path, value)}
+          />
+        </Box>
+      </FormControl>
+    </Box>
+  )
+}
+
+export default withJsonFormsControlProps(JsonFormsLinkControl)
diff --git a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts
index b01b7fb55..491d18181 100644
--- a/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts
+++ b/apps/studio/src/features/editing-experience/components/form-builder/renderers/controls/index.ts
@@ -34,6 +34,10 @@ export {
   default as JsonFormsRadioControl,
   jsonFormsRadioControlTester,
 } from "./JsonFormsRadioControl"
+export {
+  default as JsonFormsLinkControl,
+  jsonFormsLinkControlTester,
+} from "./JsonFormsLinkControl"
 export {
   default as JsonFormsTextControl,
   jsonFormsTextControlTester,
diff --git a/packages/components/src/interfaces/complex/Button.ts b/packages/components/src/interfaces/complex/Button.ts
index 4228be6b5..80d4fea12 100644
--- a/packages/components/src/interfaces/complex/Button.ts
+++ b/packages/components/src/interfaces/complex/Button.ts
@@ -18,6 +18,7 @@ export const ButtonSchema = Type.Object(
     href: Type.String({
       title: "Button URL",
       description: "The URL to navigate to when the button is clicked",
+      format: "link",
     }),
     colorScheme: Type.Optional(
       Type.Union(
diff --git a/packages/components/src/interfaces/complex/Infobar.ts b/packages/components/src/interfaces/complex/Infobar.ts
index 95e52c45d..6c2e4a003 100644
--- a/packages/components/src/interfaces/complex/Infobar.ts
+++ b/packages/components/src/interfaces/complex/Infobar.ts
@@ -23,6 +23,7 @@ export const InfobarSchema = Type.Object(
       Type.String({
         title: "Button destination",
         description: "When this is clicked, open:",
+        format: "link",
       }),
     ),
     secondaryButtonLabel: Type.Optional(
@@ -36,6 +37,7 @@ export const InfobarSchema = Type.Object(
       Type.String({
         title: "Secondary button destination",
         description: "When this is clicked, open:",
+        format: "link",
       }),
     ),
   },
diff --git a/packages/components/src/interfaces/complex/Infopic.ts b/packages/components/src/interfaces/complex/Infopic.ts
index 43545391b..85c300c75 100644
--- a/packages/components/src/interfaces/complex/Infopic.ts
+++ b/packages/components/src/interfaces/complex/Infopic.ts
@@ -34,6 +34,7 @@ export const InfopicSchema = Type.Object(
       Type.String({
         title: "Button destination",
         description: "When this is clicked, open:",
+        format: "link",
       }),
     ),
   },
diff --git a/packages/components/src/interfaces/internal/ContentPageHeader.ts b/packages/components/src/interfaces/internal/ContentPageHeader.ts
index 3184d7d4e..fd8b08900 100644
--- a/packages/components/src/interfaces/internal/ContentPageHeader.ts
+++ b/packages/components/src/interfaces/internal/ContentPageHeader.ts
@@ -19,6 +19,7 @@ export const ContentPageHeaderSchema = Type.Object(
       Type.String({
         title: "Button URL",
         description: "The URL the button should link to",
+        format: "link",
       }),
     ),
   },