diff --git a/react/CHANGELOG.md b/react/CHANGELOG.md
index 61100401..dab5a126 100644
--- a/react/CHANGELOG.md
+++ b/react/CHANGELOG.md
@@ -4,8 +4,11 @@ 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).
 
-#### [v1.12.0](https://github.com/opengovsg/design-system/compare/v1.10.0...v1.12.0)
+#### [v1.13.0](https://github.com/opengovsg/design-system/compare/v1.10.0...v1.13.0)
 
+- fix: allow correct toggling of datepicker/daterangepicker with calendar button [`#572`](https://github.com/opengovsg/design-system/pull/572)
+- chore: merge v1.12.0 back to main [`#571`](https://github.com/opengovsg/design-system/pull/571)
+- build: release v1.12.0 [`#570`](https://github.com/opengovsg/design-system/pull/570)
 - chore: merge v1.11.0 back to main [`#568`](https://github.com/opengovsg/design-system/pull/568)
 - fix: date picker mobile custom input [`#569`](https://github.com/opengovsg/design-system/pull/569)
 - build: release v1.11.0 [`#567`](https://github.com/opengovsg/design-system/pull/567)
diff --git a/react/package-lock.json b/react/package-lock.json
index 606ce480..18c61803 100644
--- a/react/package-lock.json
+++ b/react/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@opengovsg/design-system-react",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@opengovsg/design-system-react",
-      "version": "1.12.0",
+      "version": "1.13.0",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "@chakra-ui/utils": "^2.0.12",
diff --git a/react/package.json b/react/package.json
index c93718ce..d6c4c8b2 100644
--- a/react/package.json
+++ b/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/design-system-react",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "React components",
   "homepage": "https://github.com/opengovsg/design-system/react#readme",
   "bugs": "https://github.com/opengovsg/design-system/issues",
diff --git a/react/src/DatePicker/components/CalendarButton.tsx b/react/src/DatePicker/components/CalendarButton.tsx
index 320fb6fc..561715ba 100644
--- a/react/src/DatePicker/components/CalendarButton.tsx
+++ b/react/src/DatePicker/components/CalendarButton.tsx
@@ -18,6 +18,7 @@ export const CalendarButton = (): JSX.Element => {
     <IconButton
       data-group
       size={size}
+      sx={styles.calendarButton}
       aria-invalid={isInvalid}
       onClick={onOpen}
       variant="inputAttached"
diff --git a/react/src/DatePicker/components/DatePickerOverlay.tsx b/react/src/DatePicker/components/DatePickerOverlay.tsx
new file mode 100644
index 00000000..b443a54f
--- /dev/null
+++ b/react/src/DatePicker/components/DatePickerOverlay.tsx
@@ -0,0 +1,22 @@
+import { Box } from '@chakra-ui/react'
+
+import { useDatePicker } from '../DatePickerContext'
+
+export const DatePickerOverlay = () => {
+  const {
+    disclosureProps: { isOpen },
+  } = useDatePicker()
+
+  return (
+    <Box
+      position="fixed"
+      left="0px"
+      top="0px"
+      width="100vw"
+      height="$100vh"
+      display={isOpen ? 'block' : 'none'}
+      aria-hidden
+      bg="transparent"
+    />
+  )
+}
diff --git a/react/src/DatePicker/components/DatePickerWrapper.tsx b/react/src/DatePicker/components/DatePickerWrapper.tsx
index f1ad0f93..110e27ff 100644
--- a/react/src/DatePicker/components/DatePickerWrapper.tsx
+++ b/react/src/DatePicker/components/DatePickerWrapper.tsx
@@ -4,6 +4,7 @@ import { Flex, Popover, PopoverAnchor } from '@chakra-ui/react'
 import { useDatePicker } from '../DatePickerContext'
 
 import { DatePickerInput } from './DatePickerInput'
+import { DatePickerOverlay } from './DatePickerOverlay'
 
 export const DatePickerWrapper = ({ children }: PropsWithChildren) => {
   const {
@@ -40,6 +41,7 @@ export const DatePickerWrapper = ({ children }: PropsWithChildren) => {
         <PopoverAnchor>{inputToRender}</PopoverAnchor>
         {children}
       </Popover>
+      <DatePickerOverlay />
     </Flex>
   )
 }
diff --git a/react/src/DateRangePicker/components/CalendarButton.tsx b/react/src/DateRangePicker/components/CalendarButton.tsx
index 5d391de3..37d99796 100644
--- a/react/src/DateRangePicker/components/CalendarButton.tsx
+++ b/react/src/DateRangePicker/components/CalendarButton.tsx
@@ -21,6 +21,7 @@ export const CalendarButton = (): JSX.Element => {
       aria-invalid={isInvalid}
       onClick={onOpen}
       variant="inputAttached"
+      sx={styles.calendarButton}
       aria-label={calendarButtonAria}
       icon={<Icon as={BxCalendar} sx={styles.inputButton} />}
       isActive={isOpen}
diff --git a/react/src/DateRangePicker/components/DateRangePickerOverlay.tsx b/react/src/DateRangePicker/components/DateRangePickerOverlay.tsx
new file mode 100644
index 00000000..c0cdc7c0
--- /dev/null
+++ b/react/src/DateRangePicker/components/DateRangePickerOverlay.tsx
@@ -0,0 +1,23 @@
+import { Box } from '@chakra-ui/react'
+
+import { useDateRangePicker } from '../DateRangePickerContext'
+
+export const DateRangePickerOverlay = () => {
+  const {
+    disclosureProps: { isOpen },
+  } = useDateRangePicker()
+
+  return (
+    <Box
+      position="fixed"
+      left="0px"
+      top="0px"
+      width="100vw"
+      height="$100vh"
+      display={isOpen ? 'block' : 'none'}
+      aria-hidden
+      bg="transparent"
+      zIndex={1}
+    />
+  )
+}
diff --git a/react/src/DateRangePicker/components/DateRangePickerWrapper.tsx b/react/src/DateRangePicker/components/DateRangePickerWrapper.tsx
index adff6062..d7576bc4 100644
--- a/react/src/DateRangePicker/components/DateRangePickerWrapper.tsx
+++ b/react/src/DateRangePicker/components/DateRangePickerWrapper.tsx
@@ -3,6 +3,7 @@ import { Flex, forwardRef, Popover, PopoverAnchor } from '@chakra-ui/react'
 import { useDateRangePicker } from '../DateRangePickerContext'
 
 import { DateRangePickerInput } from './DateRangePickerInput'
+import { DateRangePickerOverlay } from './DateRangePickerOverlay'
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export const DateRangePickerWrapper = forwardRef<{}, 'input'>(
@@ -58,6 +59,7 @@ export const DateRangePickerWrapper = forwardRef<{}, 'input'>(
           </PopoverAnchor>
           {children}
         </Popover>
+        <DateRangePickerOverlay />
       </Flex>
     )
   },
diff --git a/react/src/theme/components/DatePicker.ts b/react/src/theme/components/DatePicker.ts
index 6451d261..490003b7 100644
--- a/react/src/theme/components/DatePicker.ts
+++ b/react/src/theme/components/DatePicker.ts
@@ -7,6 +7,7 @@ export const datepickerAnatomy = anatomy('datepicker').parts(
   'header',
   'inputButton',
   'container',
+  'calendarButton',
 )
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(datepickerAnatomy.keys)
@@ -34,6 +35,17 @@ export const DatePicker = defineMultiStyleConfig({
     container: {
       bg: 'utility.ui',
     },
+    calendarButton: {
+      _active: {
+        zIndex: '1',
+        borderColor: 'utility.focus-default',
+        bg: 'interaction.muted.main.hover',
+        boxShadow: 'none',
+        _disabled: {
+          bg: 'interaction.support.disabled',
+        },
+      },
+    },
     header: {
       h: '3.5rem',
       display: 'flex',