diff --git a/apps/web/src/dialogs/announcement-dialog.jsx b/apps/web/src/dialogs/announcement-dialog.jsx
index de16e063a..b9d9e2d13 100644
--- a/apps/web/src/dialogs/announcement-dialog.jsx
+++ b/apps/web/src/dialogs/announcement-dialog.jsx
@@ -72,7 +72,7 @@ function AnnouncementDialog(props) {
         },
         overlay: {
           zIndex: 999,
-          background: theme.colors.overlay
+          background: "var(--backdrop)"
         }
       }}
     >
diff --git a/apps/web/src/dialogs/attachments-dialog.tsx b/apps/web/src/dialogs/attachments-dialog.tsx
index 7922545ff..30ecb286d 100644
--- a/apps/web/src/dialogs/attachments-dialog.tsx
+++ b/apps/web/src/dialogs/attachments-dialog.tsx
@@ -56,8 +56,8 @@ import { Multiselect } from "../common/multi-select";
 import { CustomScrollbarsVirtualList } from "../components/list-container";
 import { Attachment } from "../components/attachment";
 import { isDocument, isImage, isVideo } from "@notesnook/core/utils/filename";
-
 import { alpha } from "@theme-ui/color";
+import { ScopedThemeProvider } from "../components/theme-provider";
 
 type ToolbarAction = {
   title: string;
@@ -389,83 +389,88 @@ const Sidebar = memo(
     const download = useStore((store) => store.download);
 
     return (
-      <Flex
-        sx={{
-          flexDirection: "column",
-          justifyContent: "space-between",
-          width: 240,
-          "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))":
-            {
-              backgroundColor: alpha("background", 0.6),
-              backdropFilter: "blur(8px)"
-            },
-          backgroundColor: "var(--background-secondary)"
-        }}
-      >
-        <Flex sx={{ flexDirection: "column" }}>
-          <Input
-            placeholder="Search"
-            sx={{ m: 2, mb: 0, width: "auto", bg: "background", py: "7px" }}
-            onChange={(e) => {
-              setRoute(e.target.value ? "none" : "all");
-              if (e.target.value) filter(e.target.value);
-            }}
-          />
-          {routes.map((item) => (
-            <NavigationItem
-              key={item.id}
-              icon={item.icon}
-              title={item.title}
-              count={counts[item.id]}
-              onClick={() => {
-                onRouteChange(item.id);
-                setRoute(item.id);
+      <ScopedThemeProvider scope="navigationMenu" injectCssVars={false}>
+        <Flex
+          className="theme-scope-navigationMenu"
+          sx={{
+            flexDirection: "column",
+            justifyContent: "space-between",
+            width: 240,
+            "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))":
+              {
+                backgroundColor: alpha("background", 0.6),
+                backdropFilter: "blur(8px)"
+              },
+            backgroundColor: "var(--background-secondary)"
+          }}
+        >
+          <Flex sx={{ flexDirection: "column" }}>
+            <Input
+              placeholder="Search"
+              sx={{ m: 2, mb: 0, width: "auto", bg: "background", py: "7px" }}
+              onChange={(e) => {
+                setRoute(e.target.value ? "none" : "all");
+                if (e.target.value) filter(e.target.value);
               }}
-              selected={route === item.id}
             />
-          ))}
-        </Flex>
-        <Flex sx={{ flexDirection: "column" }}>
-          <Flex sx={{ pl: 2, m: 2, mt: 1, justifyContent: "space-between" }}>
-            <Flex sx={{ flexDirection: "column" }}>
-              <Text variant="body">{pluralize(counts.all, "file")}</Text>
-              <Text variant="subBody">{formatBytes(totalSize)}</Text>
+            {routes.map((item) => (
+              <NavigationItem
+                key={item.id}
+                icon={item.icon}
+                title={item.title}
+                count={counts[item.id]}
+                onClick={() => {
+                  onRouteChange(item.id);
+                  setRoute(item.id);
+                }}
+                selected={route === item.id}
+              />
+            ))}
+          </Flex>
+          <Flex sx={{ flexDirection: "column" }}>
+            <Flex sx={{ pl: 2, m: 2, mt: 1, justifyContent: "space-between" }}>
+              <Flex sx={{ flexDirection: "column" }}>
+                <Text variant="body">{pluralize(counts.all, "file")}</Text>
+                <Text variant="subBody">{formatBytes(totalSize)}</Text>
+              </Flex>
+              <Button
+                variant="secondary"
+                sx={{
+                  bg: "transparent",
+                  borderRadius: 100,
+                  position: "relative",
+                  width: 38,
+                  height: 38
+                }}
+                title="Download all attachments"
+                onClick={async () => {
+                  if (downloadStatus) {
+                    await cancelDownload();
+                  } else {
+                    await download(db.attachments?.all);
+                  }
+                }}
+              >
+                {downloadStatus ? <Close size={18} /> : <Download size={18} />}
+                {downloadStatus ? (
+                  <Donut
+                    value={
+                      (downloadStatus.current / downloadStatus.total) * 100
+                    }
+                    max={100}
+                    size={38}
+                    sx={{
+                      position: "absolute",
+                      top: 0,
+                      left: 0
+                    }}
+                  />
+                ) : null}
+              </Button>
             </Flex>
-            <Button
-              variant="secondary"
-              sx={{
-                bg: "transparent",
-                borderRadius: 100,
-                position: "relative",
-                width: 38,
-                height: 38
-              }}
-              title="Download all attachments"
-              onClick={async () => {
-                if (downloadStatus) {
-                  await cancelDownload();
-                } else {
-                  await download(db.attachments?.all);
-                }
-              }}
-            >
-              {downloadStatus ? <Close size={18} /> : <Download size={18} />}
-              {downloadStatus ? (
-                <Donut
-                  value={(downloadStatus.current / downloadStatus.total) * 100}
-                  max={100}
-                  size={38}
-                  sx={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0
-                  }}
-                />
-              ) : null}
-            </Button>
           </Flex>
         </Flex>
-      </Flex>
+      </ScopedThemeProvider>
     );
   },
   (prev, next) =>
diff --git a/apps/web/src/dialogs/buy-dialog/buy-dialog.tsx b/apps/web/src/dialogs/buy-dialog/buy-dialog.tsx
index 76c6111dd..c62eaef5c 100644
--- a/apps/web/src/dialogs/buy-dialog/buy-dialog.tsx
+++ b/apps/web/src/dialogs/buy-dialog/buy-dialog.tsx
@@ -22,7 +22,6 @@ import { Text, Flex, Button } from "@theme-ui/components";
 import { Cross, Check, Loading } from "../../components/icons";
 import { useStore as useUserStore } from "../../stores/user-store";
 import { useStore as useThemeStore } from "../../stores/theme-store";
-import Modal from "react-modal";
 import { useTheme } from "@emotion/react";
 import { ReactComponent as Rocket } from "../../assets/rocket.svg";
 import { ReactComponent as WorkAnywhere } from "../../assets/workanywhere.svg";
@@ -45,6 +44,8 @@ import { isUserSubscribed } from "../../hooks/use-is-user-premium";
 import { SUBSCRIPTION_STATUS } from "../../common/constants";
 
 import { alpha } from "@theme-ui/color";
+import BaseDialog from "../../components/dialog";
+import { ScopedThemeProvider } from "../../components/theme-provider";
 
 type BuyDialogProps = {
   couponCode?: string;
@@ -70,89 +71,52 @@ export function BuyDialog(props: BuyDialogProps) {
   }, [couponCode, onApplyCoupon]);
 
   return (
-    <Modal
+    <BaseDialog
       isOpen={true}
-      onRequestClose={props.onClose}
-      shouldCloseOnEsc
-      shouldReturnFocusAfterClose
-      shouldFocusAfterRender
-      onAfterOpen={(e) => {
-        if (!e || !onClose) return;
-        // we need this work around because ReactModal content spreads over the overlay
-        const child = e.contentEl.firstElementChild;
-        if (!child || !(child instanceof HTMLElement)) return;
-
-        e.contentEl.onmousedown = function (e) {
-          if (!e.screenX && !e.screenY) return;
-          if (
-            e.x < child.offsetLeft ||
-            e.x > child.offsetLeft + child.clientWidth ||
-            e.y < child.offsetTop ||
-            e.y > child.offsetTop + child.clientHeight
-          ) {
-            onClose();
-          }
-        };
-      }}
-      style={{
-        content: {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          display: "flex",
-          justifyContent: "center",
-          backgroundColor: undefined,
-          padding: 0,
-          overflowY: "hidden",
-          border: 0,
-          zIndex: 0
-        },
-        overlay: {
-          zIndex: 999,
-          background: theme.colors.backdrop
-        }
+      width={"968px"}
+      onClose={() => props.onClose()}
+      noScroll
+      sx={{
+        bg: "transparent",
+        width: ["95%", "80%", isCheckoutCompleted ? "400px" : "60%"]
       }}
     >
       <Flex
         bg="transparent"
         sx={{
-          position: "relative",
+          height: "80vw",
           overflow: "hidden",
-          boxShadow: "4px 5px 18px 2px #00000038",
-          borderRadius: "dialog",
+          position: "relative",
           flexDirection: ["column", "column", "row"],
-          width: ["95%", "80%", isCheckoutCompleted ? "400px" : "60%"],
-          maxHeight: ["95%", "80%", "80%"],
           alignSelf: "center",
           overflowY: ["scroll", "scroll", "hidden"]
         }}
       >
-        <Flex
+        <ScopedThemeProvider
+          scope="navigationMenu"
           sx={{
-            borderTopLeftRadius: "dialog",
-            borderBottomLeftRadius: [0, 0, "dialog"],
-            overflow: "hidden",
-            bg: "var(--background-secondary)",
+            display: "flex",
+            overflow: ["hidden", "hidden", "auto"],
+            flexDirection: "column",
             "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))":
               {
-                bg: alpha("background", 0.6),
+                backgroundColor: alpha("background", 0.6),
                 backdropFilter: "blur(8px)"
               },
-            flexDirection: "column",
+            backgroundColor: "var(--background-secondary)",
             flexShrink: 0,
             alignItems: "center",
             justifyContent: "center",
-            width: ["100%", "100%", isCheckoutCompleted ? "100%" : 350]
+            width: ["100%", "100%", isCheckoutCompleted ? "100%" : 350],
+            p: 4,
+            py: 50
           }}
-          p={4}
-          py={50}
         >
           <SideBar onClose={onClose} initialPlan={plan} />
-        </Flex>
+        </ScopedThemeProvider>
         <Details />
       </Flex>
-    </Modal>
+    </BaseDialog>
   );
 }
 
diff --git a/apps/web/src/dialogs/buy-dialog/features.tsx b/apps/web/src/dialogs/buy-dialog/features.tsx
index a6cb636bb..2bbe044d1 100644
--- a/apps/web/src/dialogs/buy-dialog/features.tsx
+++ b/apps/web/src/dialogs/buy-dialog/features.tsx
@@ -437,8 +437,9 @@ export function Features() {
         flex: 1,
         flexDirection: "column",
         flexShrink: 0,
-        overflowY: ["hidden", "hidden", "auto"],
-        gap: 50
+        overflowY: ["unset", "unset", "auto"],
+        gap: 50,
+        paddingBottom: [50, 50, 0]
       }}
       pt={4}
       bg="background"
diff --git a/apps/web/src/dialogs/onboarding-dialog.jsx b/apps/web/src/dialogs/onboarding-dialog.jsx
index 66a48c19f..f17a5e6d3 100644
--- a/apps/web/src/dialogs/onboarding-dialog.jsx
+++ b/apps/web/src/dialogs/onboarding-dialog.jsx
@@ -188,6 +188,7 @@ function OnboardingDialog({ onClose: _onClose, type }) {
         {Component && <Component onClose={onClose} onNext={onNext} />}
         {buttonText && (
           <Button
+            variant="accent"
             sx={{ borderRadius: 50, px: 30, mb: 4, mt: Component ? 0 : 4 }}
             onClick={onNext}
           >
@@ -452,6 +453,7 @@ function TrialOffer({ onClose }) {
 
       <Flex mt={2} sx={{ justifyContent: "center", width: "100%" }}>
         <Button
+          variant="accent"
           sx={{ borderRadius: 50, alignSelf: "center", mr: 2, width: "40%" }}
           onClick={() => {
             onClose();
diff --git a/apps/web/src/dialogs/settings/components/subscription-status.tsx b/apps/web/src/dialogs/settings/components/subscription-status.tsx
index 24dd65116..d101d9477 100644
--- a/apps/web/src/dialogs/settings/components/subscription-status.tsx
+++ b/apps/web/src/dialogs/settings/components/subscription-status.tsx
@@ -206,7 +206,11 @@ export function SubscriptionStatus() {
               >
                 Upgrade to Pro
               </Button>
-              <Button variant="secondary" onClick={activateTrial}>
+              <Button
+                variant="secondary"
+                onClick={activateTrial}
+                sx={{ bg: "background" }}
+              >
                 {isActivatingTrial ? (
                   <Loading size={16} />
                 ) : (