diff --git a/web/sdk/admin/views/organizations/details/edit/billing.tsx b/web/sdk/admin/views/organizations/details/edit/billing.tsx
index 24bf5d16f..fa477fa63 100644
--- a/web/sdk/admin/views/organizations/details/edit/billing.tsx
+++ b/web/sdk/admin/views/organizations/details/edit/billing.tsx
@@ -26,6 +26,7 @@ import {
 import { create } from "@bufbuild/protobuf";
 
 interface EditBillingPanelProps {
+  open?: boolean;
   onClose: () => void;
 }
 
@@ -70,7 +71,7 @@ const billingDetailsUpdateSchema = z
 
 type BillingDetailsForm = z.infer<typeof billingDetailsUpdateSchema>;
 
-export function EditBillingPanel({ onClose }: EditBillingPanelProps) {
+export function EditBillingPanel({ open = false, onClose }: EditBillingPanelProps) {
   const { 
     billingAccount,
     billingAccountDetails,
@@ -174,7 +175,7 @@ export function EditBillingPanel({ onClose }: EditBillingPanelProps) {
   const isPrepaid = tokenPaymentType === "prepaid";
 
   return (
-    <Drawer open>
+    <Drawer open={open} onOpenChange={(open) => !open && onClose()}>
       <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-billing-panel"
diff --git a/web/sdk/admin/views/organizations/details/edit/kyc.tsx b/web/sdk/admin/views/organizations/details/edit/kyc.tsx
index df9719167..144d3ec5f 100644
--- a/web/sdk/admin/views/organizations/details/edit/kyc.tsx
+++ b/web/sdk/admin/views/organizations/details/edit/kyc.tsx
@@ -24,6 +24,7 @@ import { AdminServiceQueries, FrontierServiceQueries, SetOrganizationKycRequestS
 import { create } from "@bufbuild/protobuf";
 
 interface EditKYCPanelProps {
+  open?: boolean;
   onClose: () => void;
 }
 
@@ -44,7 +45,7 @@ const kycUpdateSchema = z
 
 type KYCUpdateSchema = z.infer<typeof kycUpdateSchema>;
 
-export function EditKYCPanel({ onClose }: EditKYCPanelProps) {
+export function EditKYCPanel({ open = false, onClose }: EditKYCPanelProps) {
   const { organization, kycDetails, updateKYCDetails } = useContext(OrganizationContext);
   const queryClient = useQueryClient();
   const transport = useTransport();
@@ -104,7 +105,7 @@ export function EditKYCPanel({ onClose }: EditKYCPanelProps) {
   }
 
   return (
-    <Drawer open>
+    <Drawer open={open} onOpenChange={(open) => !open && onClose()}>
       <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-kyc-panel"
diff --git a/web/sdk/admin/views/organizations/details/edit/organization.tsx b/web/sdk/admin/views/organizations/details/edit/organization.tsx
index c6c035581..7ba48e1a0 100644
--- a/web/sdk/admin/views/organizations/details/edit/organization.tsx
+++ b/web/sdk/admin/views/organizations/details/edit/organization.tsx
@@ -78,7 +78,7 @@ function getDefaultValue(organization: Organization, industries: string[]) {
   };
 }
 
-export function EditOrganizationPanel({ onClose }: { onClose: () => void }) {
+export function EditOrganizationPanel({ open = false, onClose }: { open?: boolean; onClose: () => void }) {
   const t = useTerminology();
   const { organization, appUrl, countries: countriesFromContext = [], organizationTypes: industries = [] } = useContext(OrganizationContext);
   const [countries, setCountries] = useState<string[]>(countriesFromContext);
@@ -160,7 +160,7 @@ export function EditOrganizationPanel({ onClose }: { onClose: () => void }) {
   const showOtherTypeField = watch("type", "other") === "other";
 
   return (
-    <Drawer open>
+    <Drawer open={open} onOpenChange={(open) => !open && onClose()}>
       <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-org-panel"
diff --git a/web/sdk/admin/views/organizations/details/layout/index.tsx b/web/sdk/admin/views/organizations/details/layout/index.tsx
index f7e64ef2a..8e074435c 100644
--- a/web/sdk/admin/views/organizations/details/layout/index.tsx
+++ b/web/sdk/admin/views/organizations/details/layout/index.tsx
@@ -97,14 +97,10 @@ export const OrganizationDetailsLayout = ({
         >
           {children}
         </Flex>
-        {showKYCPanel ? <EditKYCPanel onClose={closeKYCPanel} /> : null}
+        <EditKYCPanel open={showKYCPanel} onClose={closeKYCPanel} />
         {showSidePanel ? <OrgSidePanel organization={organization} /> : null}
-        {showEditOrgPanel ? (
-          <EditOrganizationPanel onClose={closeEditOrgPanel} />
-        ) : null}
-        {showEditBillingPanel ? (
-          <EditBillingPanel onClose={closeEditBillingPanel} />
-        ) : null}
+        <EditOrganizationPanel open={showEditOrgPanel} onClose={closeEditOrgPanel} />
+        <EditBillingPanel open={showEditBillingPanel} onClose={closeEditBillingPanel} />
       </Flex>
     </Flex>
   ) : (
diff --git a/web/sdk/admin/views/organizations/list/create.tsx b/web/sdk/admin/views/organizations/list/create.tsx
index 11ffa851e..21721df5c 100644
--- a/web/sdk/admin/views/organizations/list/create.tsx
+++ b/web/sdk/admin/views/organizations/list/create.tsx
@@ -46,6 +46,7 @@ type OrgCreateSchema = z.infer<typeof orgCreateSchema>;
 const otherTypePrefix = "Other - ";
 
 export type CreateOrganizationPanelProps = {
+  open?: boolean;
   onClose: () => void;
   organizationTypes?: string[];
   appUrl?: string;
@@ -54,6 +55,7 @@ export type CreateOrganizationPanelProps = {
 };
 
 export function CreateOrganizationPanel({
+  open = false,
   onClose,
   organizationTypes = [],
   appUrl = "",
@@ -127,7 +129,7 @@ export function CreateOrganizationPanel({
   const showOtherTypeField = watch("type", "other") === "other";
 
   return (
-    <Drawer open>
+    <Drawer open={open} onOpenChange={(open) => !open && onClose()}>
       <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-org-panel"
diff --git a/web/sdk/admin/views/organizations/list/index.tsx b/web/sdk/admin/views/organizations/list/index.tsx
index bd563e53f..5379a4b6d 100644
--- a/web/sdk/admin/views/organizations/list/index.tsx
+++ b/web/sdk/admin/views/organizations/list/index.tsx
@@ -185,18 +185,17 @@ export const OrganizationListView = ({
   }
   return (
     <>
-      {showCreatePanel ? (
-        <CreateOrganizationPanel
-          onClose={closeCreateOrgPanel}
-          organizationTypes={organizationTypes}
-          appUrl={appUrl}
-          countries={countries}
-          onSuccess={(id) => {
-            closeCreateOrgPanel();
-            onNavigateToOrg?.(id);
-          }}
-        />
-      ) : null}
+      <CreateOrganizationPanel
+        open={showCreatePanel}
+        onClose={closeCreateOrgPanel}
+        organizationTypes={organizationTypes}
+        appUrl={appUrl}
+        countries={countries}
+        onSuccess={(id) => {
+          closeCreateOrgPanel();
+          onNavigateToOrg?.(id);
+        }}
+      />
       <PageTitle title={t.organization({ plural: true, case: "capital" })} appName={appName} />
       <DataTable
         query={tableQuery}
diff --git a/web/sdk/admin/views/products/details.tsx b/web/sdk/admin/views/products/details.tsx
index a9d3df443..d9e8f398b 100644
--- a/web/sdk/admin/views/products/details.tsx
+++ b/web/sdk/admin/views/products/details.tsx
@@ -4,20 +4,26 @@ import styles from "./products.module.css";
 import { SheetHeader } from "../../components/SheetHeader";
 
 type ProductDetailsProps = {
-  product: Product;
+  product?: Product;
+  open?: boolean;
   onClose: () => void;
   onNavigateToPrices: (productId: string) => void;
 };
 
 export default function ProductDetails({
   product,
+  open = false,
   onClose,
   onNavigateToPrices,
 }: ProductDetailsProps) {
   return (
-    <Drawer open>
+    <Drawer open={open} onOpenChange={(open) => !open && onClose()}>
       <Drawer.Content showCloseButton={false} className={styles.sheetContent}>
-        <SheetHeader title="Product Details" onClick={onClose} />
+        <SheetHeader
+          title="Product Details"
+          onClick={onClose}
+          data-test-id="frontier-admin-product-details-header"
+        />
         <Flex className={styles.sheetContentBody} direction="column" gap={9}>
           <Text size="regular">{product?.title}</Text>
           <Flex direction="column" gap={9}>
diff --git a/web/sdk/admin/views/products/index.tsx b/web/sdk/admin/views/products/index.tsx
index a2ee1bb1f..92e19ca2f 100644
--- a/web/sdk/admin/views/products/index.tsx
+++ b/web/sdk/admin/views/products/index.tsx
@@ -83,13 +83,12 @@ export default function ProductsView({
             emptyState={noDataChildren}
             classNames={{ root: styles.tableRoot }}
           />
-          {product && (
-            <ProductDetails
-              product={product}
-              onClose={onCloseDetail ?? (() => {})}
-              onNavigateToPrices={onNavigateToPrices ?? (() => {})}
-            />
-          )}
+          <ProductDetails
+            product={product ?? undefined}
+            open={!!product}
+            onClose={onCloseDetail ?? (() => {})}
+            onNavigateToPrices={onNavigateToPrices ?? (() => {})}
+          />
         </Flex>
       </DataTable>
     </>
diff --git a/web/sdk/admin/views/webhooks/webhooks/create/index.tsx b/web/sdk/admin/views/webhooks/webhooks/create/index.tsx
index 0062ef87e..3127492dd 100644
--- a/web/sdk/admin/views/webhooks/webhooks/create/index.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/create/index.tsx
@@ -30,10 +30,11 @@ const NewWebookSchema = z.object({
 export type NewWebhook = z.infer<typeof NewWebookSchema>;
 
 export type CreateWebhooksProps = {
+  open?: boolean;
   onClose?: () => void;
 };
 
-export default function CreateWebhooks({ onClose: onCloseProp }: CreateWebhooksProps = {}) {
+export default function CreateWebhooks({ open = false, onClose: onCloseProp }: CreateWebhooksProps = {}) {
   const { invalidateWebhooksList } = useWebhookQueries();
 
   const onOpenChange = useCallback(() => {
@@ -73,7 +74,7 @@ export default function CreateWebhooks({ onClose: onCloseProp }: CreateWebhooksP
   };
 
   return (
-    <Drawer open={true}>
+    <Drawer open={open} onOpenChange={(open) => !open && onCloseProp?.()}>
       <Drawer.Content
         side="right"
         // @ts-ignore
diff --git a/web/sdk/admin/views/webhooks/webhooks/index.tsx b/web/sdk/admin/views/webhooks/webhooks/index.tsx
index 6ea92337d..463d55c63 100644
--- a/web/sdk/admin/views/webhooks/webhooks/index.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/index.tsx
@@ -86,13 +86,12 @@ export default function WebhooksView({
           />
         </Flex>
       </DataTable>
-      {createOpen && <CreateWebhooks onClose={onCloseDetail} />}
-      {selectedWebhookId && (
-        <UpdateWebhooks
-          webhookId={selectedWebhookId}
-          onClose={onCloseDetail}
-        />
-      )}
+      <CreateWebhooks open={createOpen} onClose={onCloseDetail} />
+      <UpdateWebhooks
+        open={!!selectedWebhookId}
+        webhookId={selectedWebhookId}
+        onClose={onCloseDetail}
+      />
     </>
   );
 }
diff --git a/web/sdk/admin/views/webhooks/webhooks/update/index.tsx b/web/sdk/admin/views/webhooks/webhooks/update/index.tsx
index 5cdecd122..0fa6d16f1 100644
--- a/web/sdk/admin/views/webhooks/webhooks/update/index.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/update/index.tsx
@@ -30,11 +30,12 @@ const UpdateWebhookSchema = z.object({
 export type UpdateWebhook = z.infer<typeof UpdateWebhookSchema>;
 
 export type UpdateWebhooksProps = {
+  open?: boolean;
   webhookId?: string;
   onClose?: () => void;
 };
 
-export default function UpdateWebhooks({ webhookId: webhookIdProp, onClose: onCloseProp }: UpdateWebhooksProps = {}) {
+export default function UpdateWebhooks({ open = false, webhookId: webhookIdProp, onClose: onCloseProp }: UpdateWebhooksProps = {}) {
   const webhookId = webhookIdProp ?? "";
 
   const {
@@ -100,7 +101,7 @@ export default function UpdateWebhooks({ webhookId: webhookIdProp, onClose: onCl
   }, [webhook, methods.reset]);
 
   return (
-    <Drawer open={true}>
+    <Drawer open={open} onOpenChange={(open) => !open && onClose()}>
       <Drawer.Content
         side="right"
         // @ts-ignore