diff --git a/web/apps/admin/package.json b/web/apps/admin/package.json
index c14ad262f..827704ac2 100644
--- a/web/apps/admin/package.json
+++ b/web/apps/admin/package.json
@@ -17,7 +17,7 @@
     "@hookform/resolvers": "^3.0.1",
     "@radix-ui/react-form": "^0.1.8",
     "@radix-ui/react-icons": "^1.3.0",
-    "@raystack/apsara": "1.0.0-rc.12",
+    "@raystack/apsara": "^1.1.0",
     "@raystack/frontier": "workspace:^",
     "@raystack/proton": "0.1.0-859ba765e6cfd44736ddcf42664b742fe7fd916e",
     "@stitches/react": "^1.2.8",
diff --git a/web/apps/client-demo/package.json b/web/apps/client-demo/package.json
index 6e75128d0..a61dbd239 100644
--- a/web/apps/client-demo/package.json
+++ b/web/apps/client-demo/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
-    "@raystack/apsara": "1.0.0-rc.12",
+    "@raystack/apsara": "^1.1.0",
     "@raystack/frontier": "workspace:^",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index a7c941447..c0b79320f 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -55,8 +55,8 @@ importers:
         specifier: ^1.3.0
         version: 1.3.2(react@19.2.4)
       '@raystack/apsara':
-        specifier: 1.0.0-rc.12
-        version: 1.0.0-rc.12(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        specifier: ^1.1.0
+        version: 1.1.0(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@raystack/frontier':
         specifier: workspace:^
         version: link:../../sdk
@@ -161,8 +161,8 @@ importers:
         specifier: ^1.3.0
         version: 1.3.2(react@19.2.4)
       '@raystack/apsara':
-        specifier: 1.0.0-rc.12
-        version: 1.0.0-rc.12(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        specifier: ^1.1.0
+        version: 1.1.0(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@raystack/frontier':
         specifier: workspace:^
         version: link:../../sdk
@@ -283,8 +283,8 @@ importers:
         specifier: ^1.3.2
         version: 1.3.2(react@19.2.4)
       '@raystack/apsara':
-        specifier: 1.0.0-rc.12
-        version: 1.0.0-rc.12(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        specifier: ^1.1.0
+        version: 1.1.0(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@raystack/eslint-config':
         specifier: workspace:^
         version: link:../tools/eslint-config
@@ -1576,8 +1576,8 @@ packages:
       '@types/react':
         optional: true
 
-  '@raystack/apsara@1.0.0-rc.12':
-    resolution: {integrity: sha512-WzL7HD8YMyyhs7zM80V3wm/bxxHTmhNYsi563nPddMtASi51KyyeT0G2CLLTl0mw89XppHp9fjeEM5WsHSOE/g==}
+  '@raystack/apsara@1.1.0':
+    resolution: {integrity: sha512-yOec44QXYEy8RBzyPbNhmPVYYOzSaHcf1lVrsnOOMMdhZ3psw0KgH1M29RrAH6p2cUicbhna47Gipssf1VZV5A==}
     engines: {node: '>=22'}
     peerDependencies:
       '@types/react': ^19
@@ -8043,7 +8043,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
-  '@raystack/apsara@1.0.0-rc.12(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@raystack/apsara@1.1.0(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
       '@base-ui/react': 1.4.1(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@base-ui/utils': 0.2.8(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
diff --git a/web/sdk/admin/views/audit-logs/audit-logs.module.css b/web/sdk/admin/views/audit-logs/audit-logs.module.css
index 3f96b462c..d74cd53ae 100644
--- a/web/sdk/admin/views/audit-logs/audit-logs.module.css
+++ b/web/sdk/admin/views/audit-logs/audit-logs.module.css
@@ -90,3 +90,7 @@
 .sidepanel-list-link a {
   text-decoration: none;
 }
+
+.sidepanel-list{
+  min-width: 120px;
+}
\ No newline at end of file
diff --git a/web/sdk/admin/views/audit-logs/sidepanel-details.tsx b/web/sdk/admin/views/audit-logs/sidepanel-details.tsx
index 2f6fe46d5..48835a68b 100644
--- a/web/sdk/admin/views/audit-logs/sidepanel-details.tsx
+++ b/web/sdk/admin/views/audit-logs/sidepanel-details.tsx
@@ -87,37 +87,37 @@ export default function SidePanelDetails({
             {orgName || "-"}
           </SidepanelListItemLink>
           <List.Item>
-            <List.Label minWidth="120px">Action</List.Label>
+            <List.Label className={styles["sidepanel-list"]}>Action</List.Label>
             <List.Value>{event}</List.Value>
           </List.Item>
           <List.Item>
-            <List.Label minWidth="120px">Resource</List.Label>
+            <List.Label className={styles["sidepanel-list"]}>Resource</List.Label>
             <List.Value>{resource?.name || "-"}</List.Value>
           </List.Item>
           <List.Item>
-            <List.Label minWidth="120px">Type</List.Label>
+            <List.Label className={styles["sidepanel-list"]}>Type</List.Label>
             <List.Value>{resource?.type || "-"}</List.Value>
           </List.Item>
           <List.Item>
-            <List.Label minWidth="120px">Date</List.Label>
+            <List.Label className={styles["sidepanel-list"]}>Date</List.Label>
             <List.Value>{date.format("DD MMM YYYY")}</List.Value>
           </List.Item>
           <List.Item>
-            <List.Label minWidth="120px">Time</List.Label>
+            <List.Label className={styles["sidepanel-list"]}>Time</List.Label>
             <List.Value>{date.format("hh:mm A")}</List.Value>
           </List.Item>
           <List.Item>
-            <List.Label minWidth="120px">ID</List.Label>
+            <List.Label className={styles["sidepanel-list"]}>ID</List.Label>
             <SidepanelListId id={id} />
           </List.Item>
           {target && (
             <>
               <List.Item>
-                <List.Label minWidth="120px">Target ID</List.Label>
+                <List.Label className={styles["sidepanel-list"]}>Target ID</List.Label>
                 <SidepanelListId id={target?.id} />
               </List.Item>
               <List.Item>
-                <List.Label minWidth="120px">Target Type</List.Label>
+                <List.Label className={styles["sidepanel-list"]}>Target Type</List.Label>
                 <List.Value>{target?.type || "-"}</List.Value>
               </List.Item>
             </>
@@ -129,7 +129,7 @@ export default function SidePanelDetails({
           <List>
             <List.Header>Session</List.Header>
             <List.Item>
-              <List.Label minWidth="120px">IP Address</List.Label>
+              <List.Label className={styles["sidepanel-list"]}>IP Address</List.Label>
               <List.Value>
                 <Flex gap={3} align="center">
                   <GlobeIcon width={16} height={16} />
@@ -138,7 +138,7 @@ export default function SidePanelDetails({
               </List.Value>
             </List.Item>
             <List.Item>
-              <List.Label minWidth="120px">Location</List.Label>
+              <List.Label className={styles["sidepanel-list"]}>Location</List.Label>
               <List.Value>
                 <Flex gap={3} align="center">
                   <MapIcon width={16} height={16} />
@@ -147,7 +147,7 @@ export default function SidePanelDetails({
               </List.Value>
             </List.Item>
             <List.Item>
-              <List.Label minWidth="120px">Browser</List.Label>
+              <List.Label className={styles["sidepanel-list"]}>Browser</List.Label>
               <List.Value>
                 <Flex gap={3} align="center">
                   <DesktopIcon width={16} height={16} />
@@ -156,7 +156,7 @@ export default function SidePanelDetails({
               </List.Value>
             </List.Item>
             <List.Item>
-              <List.Label minWidth="120px">Operating System</List.Label>
+              <List.Label className={styles["sidepanel-list"]}>Operating System</List.Label>
               <List.Value>
                 <Flex gap={3} align="center">
                   <TransformIcon width={16} height={16} />
diff --git a/web/sdk/admin/views/audit-logs/sidepanel-list-id.tsx b/web/sdk/admin/views/audit-logs/sidepanel-list-id.tsx
index d2641ff25..10986f3f9 100644
--- a/web/sdk/admin/views/audit-logs/sidepanel-list-id.tsx
+++ b/web/sdk/admin/views/audit-logs/sidepanel-list-id.tsx
@@ -4,7 +4,7 @@ import styles from "./audit-logs.module.css";
 export default function SidepanelListId({ id = "-" }: { id?: string }) {
   return (
     <List.Value>
-      <Flex gap={3} width="full">
+      <Flex gap={3} style={{ width: "100%" }}>
         <CopyButton text={id || ""} data-test-id="copy-button" />
         <Tooltip>
           <Tooltip.Trigger
diff --git a/web/sdk/admin/views/audit-logs/sidepanel-list-link.tsx b/web/sdk/admin/views/audit-logs/sidepanel-list-link.tsx
index 5b491e785..b9089e3d1 100644
--- a/web/sdk/admin/views/audit-logs/sidepanel-list-link.tsx
+++ b/web/sdk/admin/views/audit-logs/sidepanel-list-link.tsx
@@ -22,7 +22,7 @@ export default function SidepanelListItemLink({
   if (isLink && onNavigate) {
     return (
       <List.Item className={styles["sidepanel-list-link"]}>
-        <List.Label minWidth="112px">{label}</List.Label>
+        <List.Label style={{ minWidth: "112px" }}>{label}</List.Label>
         <List.Value className={styles["text-overflow"]}>
           <Button
             variant="text"
@@ -38,7 +38,7 @@ export default function SidepanelListItemLink({
   }
   return (
     <List.Item>
-      <List.Label minWidth="120px">{label}</List.Label>
+      <List.Label className={styles["sidepanel-list"]}>{label}</List.Label>
       <List.Value>{children}</List.Value>
     </List.Item>
   );
diff --git a/web/sdk/admin/views/products/prices/index.tsx b/web/sdk/admin/views/products/prices/index.tsx
index d68371e55..24782c7a2 100644
--- a/web/sdk/admin/views/products/prices/index.tsx
+++ b/web/sdk/admin/views/products/prices/index.tsx
@@ -74,7 +74,7 @@ export default function ProductPricesView({
           isLoading={isProductLoading}
           defaultSort={{ name: "createdAt", order: "desc" }}
         >
-          <Flex direction="column" width="full">
+          <Flex direction="column" style={{ width: "100%" }}>
             <PageHeader
               title={pageHeader.title}
               breadcrumb={pageHeader.breadcrumb}
diff --git a/web/sdk/admin/views/users/details/layout/side-panel-details.tsx b/web/sdk/admin/views/users/details/layout/side-panel-details.tsx
index 5c4711b96..d378c5eb1 100644
--- a/web/sdk/admin/views/users/details/layout/side-panel-details.tsx
+++ b/web/sdk/admin/views/users/details/layout/side-panel-details.tsx
@@ -12,7 +12,7 @@ export const SidePanelDetails = () => {
     <List>
       <List.Header>User Details</List.Header>
       <List.Item>
-        <List.Label minWidth="120px">ID</List.Label>
+        <List.Label className={styles.listLabel}>ID</List.Label>
         <List.Value>
           <Flex gap={3} style={{ width: "100%" }}>
             <CopyButton text={user?.id || ""} data-test-id="copy-button" />
@@ -26,13 +26,13 @@ export const SidePanelDetails = () => {
         </List.Value>
       </List.Item>
       <List.Item>
-        <List.Label minWidth="120px">Email</List.Label>
+        <List.Label className={styles.listLabel}>Email</List.Label>
         <List.Value>
           <Text>{user?.email}</Text>
         </List.Value>
       </List.Item>
       <List.Item>
-        <List.Label minWidth="120px">Created on</List.Label>
+        <List.Label className={styles.listLabel}>Created on</List.Label>
         <List.Value>
           <Flex gap={3}>
             <CalendarIcon />
@@ -43,7 +43,7 @@ export const SidePanelDetails = () => {
         </List.Value>
       </List.Item>
       <List.Item>
-        <List.Label minWidth="120px">Status</List.Label>
+        <List.Label className={styles.listLabel}>Status</List.Label>
         <List.Value>
           {user?.state ? USER_STATES?.[user.state as UserState] : "-"}
         </List.Value>
diff --git a/web/sdk/admin/views/users/details/layout/side-panel-membership.tsx b/web/sdk/admin/views/users/details/layout/side-panel-membership.tsx
index 3dc0831c3..3b66894d9 100644
--- a/web/sdk/admin/views/users/details/layout/side-panel-membership.tsx
+++ b/web/sdk/admin/views/users/details/layout/side-panel-membership.tsx
@@ -44,7 +44,7 @@ export const SidePanelMembership = ({
     <List>
       {showTitle && <List.Header>Membership</List.Header>}
       <List.Item>
-        <List.Label minWidth="120px">Name</List.Label>
+        <List.Label className={styles.listLabel}>Name</List.Label>
         <List.Value>
           <Flex gap={3} align="center">
             <Avatar
@@ -58,13 +58,13 @@ export const SidePanelMembership = ({
         </List.Value>
       </List.Item>
       <List.Item className={styles["dropdown-item"]}>
-        <List.Label minWidth="112px">Role</List.Label>
+        <List.Label style={{minWidth: "112px" }}>Role</List.Label>
         <List.Value>
           <MembershipDropdown data={data} onReset={onReset} />
         </List.Value>
       </List.Item>
       <List.Item>
-        <List.Label minWidth="120px">Joined on</List.Label>
+        <List.Label className={styles.listLabel}>Joined on</List.Label>
         <List.Value>
           <Flex gap={3}>
             <CalendarIcon />
@@ -77,7 +77,7 @@ export const SidePanelMembership = ({
         </List.Value>
       </List.Item>
       <List.Item>
-        <List.Label minWidth="120px">Projects</List.Label>
+        <List.Label className={styles.listLabel}>Projects</List.Label>
         <List.Value>
           {data?.projectCount ? Number(data.projectCount) : "-"}
         </List.Value>
diff --git a/web/sdk/admin/views/users/details/layout/side-panel.module.css b/web/sdk/admin/views/users/details/layout/side-panel.module.css
index 99f486c8b..086259291 100644
--- a/web/sdk/admin/views/users/details/layout/side-panel.module.css
+++ b/web/sdk/admin/views/users/details/layout/side-panel.module.css
@@ -43,3 +43,6 @@
 .dropdown-menu-trigger:focus-visible {
   background-color: var(--rs-color-background-base-primary-hover);
 }
+.listLabel{
+  min-width: 120px;
+}
\ No newline at end of file
diff --git a/web/sdk/admin/views/users/details/security/sessions/revoke-session-confirm.tsx b/web/sdk/admin/views/users/details/security/sessions/revoke-session-confirm.tsx
index 4f121f096..98f92838f 100644
--- a/web/sdk/admin/views/users/details/security/sessions/revoke-session-confirm.tsx
+++ b/web/sdk/admin/views/users/details/security/sessions/revoke-session-confirm.tsx
@@ -47,19 +47,19 @@ export const RevokeSessionConfirm = ({ isOpen, onOpenChange, sessionInfo, onRevo
         <Dialog.Body className={styles.revokeSessionConfirmBody}>
             <List className={styles.listRoot}>
               <List.Item className={styles.listItem}>
-                <List.Label minWidth="120px">Device</List.Label>
+                <List.Label className={styles.listLabel}>Device</List.Label>
                 <List.Value>{sessionInfo ? formatDeviceDisplay(sessionInfo.browser, sessionInfo.operatingSystem) : "Unknown"}</List.Value>
               </List.Item>
               <List.Item className={styles.listItem}>
-                <List.Label minWidth="120px">IP Address</List.Label>
+                <List.Label className={styles.listLabel}>IP Address</List.Label>
                 <List.Value>{sessionInfo?.ipAddress || "Unknown"}</List.Value>
               </List.Item>
               <List.Item className={styles.listItem}>
-                <List.Label minWidth="120px">Last Location</List.Label>
+                <List.Label className={styles.listLabel}>Last Location</List.Label>
                 <List.Value>{sessionInfo?.location || "Unknown"}</List.Value>
               </List.Item>
               <List.Item className={styles.listItem}>
-                <List.Label minWidth="120px">Last Active</List.Label>
+                <List.Label className={styles.listLabel}>Last Active</List.Label>
                 <List.Value>{sessionInfo?.lastActive || "Unknown"}</List.Value>
               </List.Item>
             </List>
diff --git a/web/sdk/admin/views/users/details/security/sessions/sessions.module.css b/web/sdk/admin/views/users/details/security/sessions/sessions.module.css
index b04d55ce0..510100a6c 100644
--- a/web/sdk/admin/views/users/details/security/sessions/sessions.module.css
+++ b/web/sdk/admin/views/users/details/security/sessions/sessions.module.css
@@ -25,6 +25,9 @@
   padding-top: var(--rs-space-5);
   padding-bottom: var(--rs-space-5);
 }
+.listLabel{
+  min-width: 120px;
+}
 
 .listItem:last-child {
   border-bottom: none;
diff --git a/web/sdk/client/index.ts b/web/sdk/client/index.ts
index 787cebd89..11a299ef5 100644
--- a/web/sdk/client/index.ts
+++ b/web/sdk/client/index.ts
@@ -1,6 +1,3 @@
-import '@raystack/apsara/style.css';
-import '@raystack/apsara/normalize.css';
-
 export { ImageUpload } from './components/image-upload';
 export { ViewContainer } from './components/view-container';
 export { ViewHeader } from './components/view-header';
diff --git a/web/sdk/client/views/auth/sign-in/sign-in-view.tsx b/web/sdk/client/views/auth/sign-in/sign-in-view.tsx
index 51e8e68f0..da51a1942 100644
--- a/web/sdk/client/views/auth/sign-in/sign-in-view.tsx
+++ b/web/sdk/client/views/auth/sign-in/sign-in-view.tsx
@@ -64,7 +64,7 @@ export const SignInView = ({
   return (
     <AuthContainer {...props}>
       <AuthHeader logo={logo} title={title} />
-      <Flex direction="column" width="full" gap={5}>
+      <Flex direction="column" gap={5} style={{ width: "100%" }}>
         {filteredOIDC.map((s, index) => {
           return (
             <AuthOIDCButton
diff --git a/web/sdk/client/views/auth/sign-up/sign-up-view.tsx b/web/sdk/client/views/auth/sign-up/sign-up-view.tsx
index 676135078..5377bc304 100644
--- a/web/sdk/client/views/auth/sign-up/sign-up-view.tsx
+++ b/web/sdk/client/views/auth/sign-up/sign-up-view.tsx
@@ -62,7 +62,7 @@ export const SignUpView = ({
   return (
     <AuthContainer {...props}>
       <AuthHeader logo={logo} title={title} />
-      <Flex direction="column" gap={3} width="full">
+      <Flex direction="column" gap={3} style={{ height: "100%", width: "100%" }}>
         {filteredOIDC.map((s, index) => {
           return (
             <AuthOIDCButton
diff --git a/web/sdk/client/views/pat/components/pat-created-dialog.tsx b/web/sdk/client/views/pat/components/pat-created-dialog.tsx
index e88e11006..5c27fc8be 100644
--- a/web/sdk/client/views/pat/components/pat-created-dialog.tsx
+++ b/web/sdk/client/views/pat/components/pat-created-dialog.tsx
@@ -58,9 +58,9 @@ export function PATCreatedDialog({ handle, onClose }: PATCreatedDialogProps) {
                 />
                 <Callout
                   type="attention"
-                  outline
+                  variant="outline"
                   icon={<ExclamationTriangleIcon />}
-                  width="100%"
+                  style={{ width: "100%" }}
                 >
                   Warning: Make sure you copy the above token now. This token
                   will only be shown once. Store it securely.
diff --git a/web/sdk/client/views/projects/components/add-member-menu.tsx b/web/sdk/client/views/projects/components/add-member-menu.tsx
index bd644e8a1..25848c092 100644
--- a/web/sdk/client/views/projects/components/add-member-menu.tsx
+++ b/web/sdk/client/views/projects/components/add-member-menu.tsx
@@ -230,7 +230,6 @@ export function AddMemberMenuContent({
       <Flex direction="column" align="center" className={styles.addMemberFooter}>
         <Separator className={styles.addMemberSeparator} />
         <Button
-          width="100%"
           variant="text"
           color="neutral"
           className={styles.addMemberToggleBtn}
diff --git a/web/sdk/client/views/projects/project-details-view.module.css b/web/sdk/client/views/projects/project-details-view.module.css
index a9a2e35eb..62b8a7c22 100644
--- a/web/sdk/client/views/projects/project-details-view.module.css
+++ b/web/sdk/client/views/projects/project-details-view.module.css
@@ -51,6 +51,7 @@
 
 .addMemberToggleBtn {
   justify-content: flex-start;
+  width: 100%;
 }
 
 .addMemberContent:has(input[value]:not([value=''])):not(:has([role='option']))
diff --git a/web/sdk/package.json b/web/sdk/package.json
index 2f3dc37a3..95ac2b8ae 100644
--- a/web/sdk/package.json
+++ b/web/sdk/package.json
@@ -68,7 +68,7 @@
     "@jest/globals": "^29.7.0",
     "@radix-ui/react-form": "^0.1.8",
     "@radix-ui/react-icons": "^1.3.2",
-    "@raystack/apsara": "1.0.0-rc.12",
+    "@raystack/apsara": "^1.1.0",
     "@raystack/eslint-config": "workspace:^",
     "@raystack/frontier-tsconfig": "workspace:^",
     "@size-limit/preset-small-lib": "^8.2.6",
diff --git a/web/sdk/react/views/tokens/components/add-tokens-dialog.tsx b/web/sdk/react/views/tokens/components/add-tokens-dialog.tsx
deleted file mode 100644
index e502c456a..000000000
--- a/web/sdk/react/views/tokens/components/add-tokens-dialog.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import { ClipboardEvent, KeyboardEvent, useMemo } from 'react';
-import { Button, Dialog, Flex, Field, Input, Skeleton, toastManager } from '@raystack/apsara';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { useMutation, useQuery } from '@connectrpc/connect-query';
-import { useForm } from 'react-hook-form';
-import * as yup from 'yup';
-import { useFrontier } from '~/client/contexts/FrontierContext';
-import { DEFAULT_TOKEN_PRODUCT_NAME } from '~/client/utils/constants';
-import { CreateCheckoutRequestSchema, FrontierServiceQueries } from '@raystack/proton/frontier';
-import { create } from '@bufbuild/protobuf';
-import qs from 'query-string';
-
-type DialogHandle = ReturnType<typeof Dialog.createHandle>;
-
-export interface AddTokensDialogProps {
-  handle: DialogHandle;
-}
-
-export function AddTokensDialog({ handle }: AddTokensDialogProps) {
-  const { config, activeOrganization } = useFrontier();
-
-  const tokenProductId =
-    config?.billing?.tokenProductId || DEFAULT_TOKEN_PRODUCT_NAME;
-
-  const { data: product, isLoading } = useQuery(
-    FrontierServiceQueries.getProduct,
-    { id: tokenProductId },
-    {
-      enabled: !!tokenProductId,
-      select: data => data?.product
-    }
-  );
-
-  const { productDescription, minQuantity, maxQuantity } = useMemo(() => {
-    let productDescription = '';
-    let minQuantity = 1;
-    let maxQuantity = 1000000;
-    if (product) {
-      const productPrice = product?.prices?.[0];
-      const price = Number(productPrice?.amount || '100') / 100;
-      const currency = productPrice?.currency || 'USD';
-      productDescription = `1 token = ${currency} ${price}`;
-    }
-    const behaviorConfig = product?.behaviorConfig;
-    if (behaviorConfig?.minQuantity) {
-      minQuantity = Number(behaviorConfig?.minQuantity);
-    }
-    if (behaviorConfig?.maxQuantity) {
-      maxQuantity = Number(behaviorConfig?.maxQuantity);
-    }
-    return { productDescription, minQuantity, maxQuantity };
-  }, [product]);
-
-  const tokensSchema = yup
-    .object({
-      tokens: yup
-        .number()
-        .required('Please enter valid number')
-        .min(minQuantity, `Minimum ${minQuantity} token is required`)
-        .max(maxQuantity, `Maximum ${maxQuantity} tokens are allowed`)
-        .typeError('Please enter valid number of tokens')
-    })
-    .required();
-
-  type FormData = yup.InferType<typeof tokensSchema>;
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-    setValue
-  } = useForm({
-    resolver: yupResolver(tokensSchema)
-  });
-
-  const { mutateAsync: createCheckout, isPending: isCreatingCheckout } =
-    useMutation(FrontierServiceQueries.createCheckout, {
-      onSuccess: data => {
-        const checkoutUrl = data?.checkoutSession?.checkoutUrl;
-        if (checkoutUrl) window.location.href = checkoutUrl;
-      },
-      onError: (error: Error) => {
-        toastManager.add({
-          title: 'Something went wrong',
-          description: error?.message,
-          type: 'error'
-        });
-      }
-    });
-
-  const onSubmit = async (data: FormData) => {
-    try {
-      if (!activeOrganization?.id) return;
-      const query = qs.stringify(
-        {
-          details: btoa(
-            qs.stringify({
-              organization_id: activeOrganization?.id,
-              type: 'tokens'
-            })
-          ),
-          checkout_id: '{{.CheckoutID}}'
-        },
-        { encode: false }
-      );
-      const cancelUrl = `${config?.billing?.cancelUrl}?${query}`;
-      const successUrl = `${config?.billing?.successUrl}?${query}`;
-
-      await createCheckout(
-        create(CreateCheckoutRequestSchema, {
-          orgId: activeOrganization?.id || '',
-          cancelUrl: cancelUrl,
-          successUrl: successUrl,
-          productBody: {
-            product: tokenProductId,
-            quantity: BigInt(data.tokens)
-          }
-        })
-      );
-    } catch (error: unknown) {
-      const message = error instanceof Error ? error.message : 'Unknown error';
-      toastManager.add({
-        title: 'Something went wrong',
-        description: message,
-        type: 'error'
-      });
-    }
-  };
-
-  const isFormSubmitting = isSubmitting || isCreatingCheckout;
-
-  return (
-    <Dialog handle={handle}>
-      <Dialog.Content showCloseButton={false}>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <Dialog.Header>
-            <Dialog.Title>Add tokens</Dialog.Title>
-          </Dialog.Header>
-          <Dialog.Body>
-            <Flex direction="column" gap={5}>
-              {isLoading ? (
-                <Skeleton height="60px" width="100%" />
-              ) : (
-                <Field
-                  label="Add tokens"
-                  description={productDescription}
-                  error={errors.tokens && String(errors.tokens.message)}
-                >
-                  <Input
-                    size="large"
-                    type="number"
-                    {...register('tokens', { valueAsNumber: true })}
-                    placeholder="Enter no. of tokens"
-                    onKeyDown={(e: KeyboardEvent) =>
-                      ['e', 'E', '+', '-', '.'].includes(e.key) &&
-                      e.preventDefault()
-                    }
-                    onPaste={(e: ClipboardEvent) => {
-                      const pastedText = e.clipboardData.getData('text/plain');
-                      const parsedValue = parseInt(pastedText);
-                      e.preventDefault();
-                      if (
-                        !isNaN(parsedValue) &&
-                        parsedValue >= minQuantity &&
-                        parsedValue <= maxQuantity
-                      ) {
-                        setValue('tokens', parsedValue, { shouldDirty: true });
-                      }
-                    }}
-                    data-test-id="frontier-sdk-add-tokens-input"
-                  />
-                </Field>
-              )}
-            </Flex>
-          </Dialog.Body>
-          <Dialog.Footer>
-            <Flex gap={4} justify="end">
-              <Button
-                variant="outline"
-                color="neutral"
-                onClick={() => handle.close()}
-                data-test-id="frontier-sdk-add-tokens-cancel-btn"
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                variant="solid"
-                color="accent"
-                loading={isFormSubmitting}
-                disabled={!!errors.tokens || isFormSubmitting || isLoading}
-                loaderText="Adding..."
-                data-test-id="frontier-sdk-add-tokens-btn"
-              >
-                Continue
-              </Button>
-            </Flex>
-          </Dialog.Footer>
-        </form>
-      </Dialog.Content>
-    </Dialog>
-  );
-}