diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx
index fb5c4ab7b..5f225db5a 100644
--- a/src/components/Drawer.jsx
+++ b/src/components/Drawer.jsx
@@ -1,7 +1,7 @@
 import { Dialog, Transition } from "@headlessui/react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React, { Fragment } from "react";
+import React, { Fragment, forwardRef } from "react";
 import { CloseIcon } from "../icons";
 import { Button } from "./Buttons/Button";
 
@@ -13,77 +13,78 @@ const sizes = {
     "2xl": "w-screen md:max-w-screen-md 2xl:max-w-screen-lg", // This was the old size
 };
 
-export const Drawer = ({
-    isOpen = false,
-    title,
-    size = "medium",
-    content,
-    onClose,
-    classNames = {},
-    position = "right",
-}) => {
-    return (
-        <Transition.Root show={isOpen} as={Fragment}>
-            <Dialog
-                as="div"
-                className={clsx("ui-drawer fixed inset-0 z-10 overflow-hidden", classNames.dialog)}
-                open={isOpen}
-                onClose={onClose}
-            >
-                <div className="flex h-screen w-full">
-                    <Transition.Child
-                        as={Fragment}
-                        enter="ease-in-out duration-500"
-                        enterFrom="opacity-0"
-                        enterTo="opacity-100"
-                        leave="ease-in-out duration-500"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0"
-                    >
-                        <Dialog.Overlay className="absolute inset-0 bg-gray bg-opacity-75 transition-opacity" />
-                    </Transition.Child>
-                    <div
-                        className={clsx(
-                            "fixed inset-y-0 flex max-w-full",
-                            position === "right" ? "right-0" : "left-0",
-                            classNames.dialogContent,
-                        )}
-                    >
+export const Drawer = forwardRef(
+    ({ isOpen = false, title, size = "medium", content, onClose, classNames = {}, position = "right" }, ref) => {
+        return (
+            <Transition.Root ref={ref} show={isOpen} as={Fragment}>
+                <Dialog
+                    as="div"
+                    className={clsx("ui-drawer fixed inset-0 z-10 overflow-hidden", classNames.dialog)}
+                    open={isOpen}
+                    onClose={onClose}
+                >
+                    <div className="flex h-screen w-full">
                         <Transition.Child
                             as={Fragment}
-                            enter="transform transition ease-in-out duration-500 sm:duration-700"
-                            enterFrom={position === "right" ? "translate-x-full" : "-translate-x-full"}
-                            enterTo="translate-x-0"
-                            leave="transform transition ease-out-in duration-500 sm:duration-700"
-                            leaveFrom="translate-x-0"
-                            leaveTo={position === "right" ? "translate-x-full" : "-translate-x-full"}
+                            enter="ease-in-out duration-500"
+                            enterFrom="opacity-0"
+                            enterTo="opacity-100"
+                            leave="ease-in-out duration-500"
+                            leaveFrom="opacity-100"
+                            leaveTo="opacity-0"
+                        >
+                            <Dialog.Overlay
+                                className={clsx(
+                                    "absolute inset-0 bg-black bg-opacity-80 transition-opacity",
+                                    classNames.overlay,
+                                )}
+                            />
+                        </Transition.Child>
+                        <div
+                            className={clsx(
+                                "fixed inset-y-0 flex max-w-full",
+                                position === "right" ? "right-0" : "left-0",
+                                classNames.dialogContent,
+                            )}
                         >
-                            <div className="flex">
-                                {position === "right" ? <CloseButton onClose={onClose} /> : null}
+                            <Transition.Child
+                                as={Fragment}
+                                enter="transform transition ease-in-out duration-500 sm:duration-700"
+                                enterFrom={position === "right" ? "translate-x-full" : "-translate-x-full"}
+                                enterTo="translate-x-0"
+                                leave="transform transition ease-out-in duration-500 sm:duration-700"
+                                leaveFrom="translate-x-0"
+                                leaveTo={position === "right" ? "translate-x-full" : "-translate-x-full"}
+                            >
+                                <div className="flex">
+                                    {position === "right" ? <CloseButton onClose={onClose} /> : null}
 
-                                <div
-                                    className={clsx(
-                                        "flex h-full w-full flex-col overflow-y-auto bg-white px-4 py-8 shadow-xl sm:px-6",
-                                        sizes[size],
-                                        classNames.children,
-                                    )}
-                                >
-                                    <div className="w-full">
-                                        {/* eslint-disable-next-line react/jsx-max-depth */}
-                                        <Dialog.Title>{title}</Dialog.Title>
+                                    <div
+                                        className={clsx(
+                                            "flex h-full w-full flex-col overflow-y-auto bg-white px-4 py-8 shadow-xl sm:px-6",
+                                            sizes[size],
+                                            classNames.children,
+                                        )}
+                                    >
+                                        <div className="w-full">
+                                            {/* eslint-disable-next-line react/jsx-max-depth */}
+                                            <Dialog.Title>{title}</Dialog.Title>
+                                        </div>
+                                        <div className={clsx("relative mt-3 flex-1", classNames.content)}>
+                                            {content}
+                                        </div>
                                     </div>
-                                    <div className={clsx("relative mt-3 flex-1", classNames.content)}>{content}</div>
-                                </div>
 
-                                {position === "left" ? <CloseButton onClose={onClose} /> : null}
-                            </div>
-                        </Transition.Child>
+                                    {position === "left" ? <CloseButton onClose={onClose} /> : null}
+                                </div>
+                            </Transition.Child>
+                        </div>
                     </div>
-                </div>
-            </Dialog>
-        </Transition.Root>
-    );
-};
+                </Dialog>
+            </Transition.Root>
+        );
+    },
+);
 
 const CloseButton = ({ onClose }) => {
     return (
@@ -91,21 +92,27 @@ const CloseButton = ({ onClose }) => {
             size="small"
             variant="link"
             className={clsx(
-                "m-1 inline-flex !h-6 !w-6 items-center justify-center !rounded-full bg-gray !px-1.5",
-                "!text-white focus:hidden",
+                "m-2.5 inline-flex !h-10 !w-10 items-center justify-center !rounded-full bg-white !px-1.5",
+                "!text-black focus:hidden",
             )}
             onClick={onClose}
         >
-            <CloseIcon size="tiny" />
+            <CloseIcon size="medium" />
         </Button>
     );
 };
 
 Drawer.propTypes = {
-    isOpen: PropTypes.bool,
+    isOpen: PropTypes.bool.isRequired,
     title: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-    content: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    content: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     onClose: PropTypes.func.isRequired,
     classNames: PropTypes.object,
     position: PropTypes.string,
 };
+
+Drawer.defaultProps = {
+    title: "",
+    classNames: {},
+    position: "right",
+};
diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index a582ab3e0..7daa04d0a 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -80,7 +80,7 @@ export const Modal = ({
                         leaveFrom="opacity-100"
                         leaveTo="opacity-0"
                     >
-                        <Dialog.Overlay className="ui-modal-overlay fixed inset-0 bg-gray-dark bg-opacity-75 transition-opacity" />
+                        <Dialog.Overlay className="ui-modal-overlay fixed inset-0 bg-black bg-opacity-80 transition-opacity" />
                     </Transition.Child>
 
                     {/* This element is to trick the browser into centering the modal contents. */}
@@ -110,7 +110,7 @@ export const Modal = ({
                             {onClose ? (
                                 <button
                                     type="button"
-                                    className="absolute right-0 top-0 m-4 hidden p-2 text-gray hover:text-gray-darker sm:block"
+                                    className="absolute right-0 top-0 m-4 hidden p-2 text-black hover:text-gray-darker sm:block"
                                     onClick={onClose}
                                 >
                                     <CloseIcon />