diff --git a/web/apps/admin/package.json b/web/apps/admin/package.json
index 805563840..055d5bcf5 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": "0.56.6",
+    "@raystack/apsara-v1": "npm:@raystack/apsara@1.0.0-rc.6",
     "@raystack/frontier": "workspace:^",
     "@raystack/proton": "0.1.0-7523cfd3a676d3fb72d63c8c4f0476738a2217b3",
     "@stitches/react": "^1.2.8",
@@ -37,7 +37,6 @@
     "react-router-dom": "^6.9.0",
     "react-select": "^5.8.0",
     "slugify": "^1.6.6",
-    "sonner": "^1.4.41",
     "swr": "^2.1.2",
     "usehooks-ts": "^3.1.1",
     "vite-tsconfig-paths": "^4.0.7",
diff --git a/web/apps/admin/src/App.tsx b/web/apps/admin/src/App.tsx
index 8372175ba..f72e4cf1f 100644
--- a/web/apps/admin/src/App.tsx
+++ b/web/apps/admin/src/App.tsx
@@ -1,7 +1,7 @@
-import { Flex } from "@raystack/apsara";
+import { Flex } from "@raystack/apsara-v1";
 import { Outlet } from "react-router-dom";
-import "@raystack/apsara/style.css";
-import "@raystack/apsara/normalize.css";
+import "@raystack/apsara-v1/normalize.css";
+import "@raystack/apsara-v1/style.css";
 import "./App.css";
 import IAMSidebar from "./components/Sidebar";
 
diff --git a/web/apps/admin/src/components/Layout.tsx b/web/apps/admin/src/components/Layout.tsx
index 3e3c0d939..6c3ea1214 100644
--- a/web/apps/admin/src/components/Layout.tsx
+++ b/web/apps/admin/src/components/Layout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex } from "@raystack/apsara";
+import { Box, Flex } from "@raystack/apsara-v1";
 
 type Props = {
   header?: React.ReactNode;
diff --git a/web/apps/admin/src/components/Price.tsx b/web/apps/admin/src/components/Price.tsx
index 546843ad4..de1ebdd47 100644
--- a/web/apps/admin/src/components/Price.tsx
+++ b/web/apps/admin/src/components/Price.tsx
@@ -1,4 +1,4 @@
-import { Flex } from "@raystack/apsara";
+import { Flex } from "@raystack/apsara-v1";
 import { getCurrencyValue } from "~/utils/helper";
 
 type PriceProps = {
diff --git a/web/apps/admin/src/components/Sidebar/index.tsx b/web/apps/admin/src/components/Sidebar/index.tsx
index 6190f58bc..e3c58f5c3 100644
--- a/web/apps/admin/src/components/Sidebar/index.tsx
+++ b/web/apps/admin/src/components/Sidebar/index.tsx
@@ -2,17 +2,17 @@ import type React from "react";
 import { useContext } from "react";
 import {
   Avatar,
-  DropdownMenu,
+  Menu,
   Flex,
   Sidebar,
   Text,
   useTheme,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import { useMutation } from "@connectrpc/connect-query";
 import { FrontierServiceQueries } from "@raystack/proton/frontier";
 
 import styles from "./sidebar.module.css";
-import { OrganizationIcon } from "@raystack/apsara/icons";
+import { OrganizationIcon } from "@raystack/apsara-v1/icons";
 import IAMIcon from "~/assets/icons/iam.svg?react";
 import UserIcon from "~/assets/icons/users.svg?react";
 import InvoicesIcon from "~/assets/icons/invoices.svg?react";
@@ -157,7 +157,7 @@ export default function IAMSidebar() {
                   key={subItem.name}
                   active={isActive(subItem.to)}
                   data-test-id={`admin-sidebar-navigation-cell-${subItem.name}`}
-                  as={<Link to={subItem?.to ?? ""} />}>
+                  render={<Link to={subItem?.to ?? ""} />}>
                   {subItem.name}
                 </Sidebar.Item>
               ))}
@@ -168,7 +168,7 @@ export default function IAMSidebar() {
               key={nav.name}
               active={isActive(nav.to)}
               data-test-id={`admin-sidebar-navigation-cell-${nav.name}`}
-              as={<Link to={nav?.to ?? ""} />}>
+              render={<Link to={nav?.to ?? ""} />}>
               {nav.name}
             </Sidebar.Item>
           );
@@ -207,28 +207,30 @@ function UserDropdown() {
       : { icon: <SunIcon />, label: "Light" };
 
   return (
-    <DropdownMenu placement="top">
-      <DropdownMenu.Trigger asChild>
-        <Sidebar.Item
-          leadingIcon={
-            <Avatar src={user?.avatar} fallback={userInital} size={3} />
-          }
-          data-test-id="frontier-sdk-sidebar-logout">
-          {user?.email}
-        </Sidebar.Item>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <DropdownMenu.Item
+    <Menu>
+      <Menu.Trigger
+        render={
+          <Sidebar.Item
+            leadingIcon={
+              <Avatar src={user?.avatar} fallback={userInital} size={3} />
+            }
+            data-test-id="frontier-sdk-sidebar-logout">
+            {user?.email}
+          </Sidebar.Item>
+        }
+      />
+      <Menu.Content side="top">
+        <Menu.Item
           onClick={toggleTheme}
           data-test-id="admin-toggle-theme">
           {themeData.icon} {themeData.label}
-        </DropdownMenu.Item>
-        <DropdownMenu.Item
+        </Menu.Item>
+        <Menu.Item
           onClick={() => logoutMutation.mutate({})}
           data-test-id="admin-logout-btn">
           Logout
-        </DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu>
+        </Menu.Item>
+      </Menu.Content>
+    </Menu>
   );
 }
diff --git a/web/apps/admin/src/components/Sidebar/sidebar.module.css b/web/apps/admin/src/components/Sidebar/sidebar.module.css
index 02bf05c6b..0ae3f445b 100644
--- a/web/apps/admin/src/components/Sidebar/sidebar.module.css
+++ b/web/apps/admin/src/components/Sidebar/sidebar.module.css
@@ -6,6 +6,10 @@
   width: 220px !important;
 }
 
+.sidebar :global(.sidebar-module_main__qDvo4) {
+  gap: var(--rs-space-1);
+}
+
 .sidebar-group {
   margin-top: var(--rs-space-5);
 }
diff --git a/web/apps/admin/src/components/assign-role.tsx b/web/apps/admin/src/components/assign-role.tsx
index 482c6dabf..29fc430f0 100644
--- a/web/apps/admin/src/components/assign-role.tsx
+++ b/web/apps/admin/src/components/assign-role.tsx
@@ -5,8 +5,8 @@ import {
   Flex,
   Label,
   Text,
-  toast,
-} from "@raystack/apsara";
+  toastManager,
+} from "@raystack/apsara-v1";
 import { useCallback } from "react";
 import type {
   SearchOrganizationUsersResponse_OrganizationUser,
@@ -139,9 +139,9 @@ export const AssignRole = ({
         onRoleUpdate();
       }
 
-      toast.success("Role assigned successfully");
+      toastManager.add({ title: "Role assigned successfully", type: "success" });
     } catch (error) {
-      toast.error("Failed to assign role");
+      toastManager.add({ title: "Failed to assign role", type: "error" });
       console.error(error);
     }
   };
@@ -187,16 +187,18 @@ export const AssignRole = ({
             </Flex>
           </Dialog.Body>
           <Dialog.Footer>
-            <Dialog.Close asChild>
-              <Button
-                type="button"
-                variant="outline"
-                color="neutral"
-                data-test-id="assign-role-cancel-button"
-              >
-                Cancel
-              </Button>
-            </Dialog.Close>
+            <Dialog.Close
+              render={
+                <Button
+                  type="button"
+                  variant="outline"
+                  color="neutral"
+                  data-test-id="assign-role-cancel-button"
+                >
+                  Cancel
+                </Button>
+              }
+            />
             <Button
               type="submit"
               data-test-id="assign-role-update-button"
diff --git a/web/apps/admin/src/components/collapsable-search/index.tsx b/web/apps/admin/src/components/collapsable-search/index.tsx
index 3c4e377c6..4e00f6500 100644
--- a/web/apps/admin/src/components/collapsable-search/index.tsx
+++ b/web/apps/admin/src/components/collapsable-search/index.tsx
@@ -1,5 +1,5 @@
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { IconButton, Search } from "@raystack/apsara";
+import { IconButton, Search } from "@raystack/apsara-v1";
 import React, { useState } from "react";
 
 interface CollapsableSearchProps {
diff --git a/web/apps/admin/src/components/dialog/header.tsx b/web/apps/admin/src/components/dialog/header.tsx
index 56086e876..80d13795f 100644
--- a/web/apps/admin/src/components/dialog/header.tsx
+++ b/web/apps/admin/src/components/dialog/header.tsx
@@ -1,4 +1,4 @@
-import { Flex, Image, Text } from "@raystack/apsara";
+import { Flex, Image, Text } from "@raystack/apsara-v1";
 
 type DialogHeaderProps = {
   title?: string;
diff --git a/web/apps/admin/src/components/error-boundary.tsx b/web/apps/admin/src/components/error-boundary.tsx
index ea9d55cf2..604c19be9 100644
--- a/web/apps/admin/src/components/error-boundary.tsx
+++ b/web/apps/admin/src/components/error-boundary.tsx
@@ -1,5 +1,5 @@
 import React, { Component, ReactNode } from "react";
-import { EmptyState } from "@raystack/apsara";
+import { EmptyState } from "@raystack/apsara-v1";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 
 interface Props {
diff --git a/web/apps/admin/src/components/page-header.tsx b/web/apps/admin/src/components/page-header.tsx
index ca4132f58..6cfbdd82f 100644
--- a/web/apps/admin/src/components/page-header.tsx
+++ b/web/apps/admin/src/components/page-header.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Text } from "@raystack/apsara";
+import { Flex, Text } from "@raystack/apsara-v1";
 import { Link } from "react-router-dom";
 import styles from "./page-header.module.css";
 export type PageHeaderTypes = {
@@ -25,8 +25,8 @@ export default function PageHeader({
       style={{ padding: "16px 24px", ...style }}
       {...props}
     >
-      <Flex align="center" gap="medium">
-        <Flex align="center" gap="small" className={styles.breadcrumb}>
+      <Flex align="center" gap={5}>
+        <Flex align="center" gap={3} className={styles.breadcrumb}>
           <Text style={{ fontSize: "14px", fontWeight: "500" }}>{title}</Text>
           {breadcrumb.map((item) => (
             <Link
@@ -35,13 +35,13 @@ export default function PageHeader({
               style={{ display: "flex", flexDirection: "row", gap: "8px" }}
             >
               <Flex align="center">
-                <Text size={1}>{item.name}</Text>
+                <Text size="mini">{item.name}</Text>
               </Flex>
             </Link>
           ))}
         </Flex>
       </Flex>
-      <Flex gap="small">{children}</Flex>
+      <Flex gap={3}>{children}</Flex>
     </Flex>
   );
 }
diff --git a/web/apps/admin/src/components/sheet/header.tsx b/web/apps/admin/src/components/sheet/header.tsx
index 8c15af9d8..558192797 100644
--- a/web/apps/admin/src/components/sheet/header.tsx
+++ b/web/apps/admin/src/components/sheet/header.tsx
@@ -1,5 +1,5 @@
 import { Cross1Icon } from "@radix-ui/react-icons";
-import { Flex, Text } from "@raystack/apsara";
+import { Flex, Text } from "@raystack/apsara-v1";
 
 type SheetHeaderProps = {
   title: string;
@@ -9,7 +9,7 @@ type SheetHeaderProps = {
 export function SheetHeader({ title, onClick }: SheetHeaderProps) {
   return (
     <Flex justify="between" style={styles.header}>
-      <Text size={4} style={{ fontWeight: "500" }}>
+      <Text size="regular" weight="medium">
         {title}
       </Text>
       <Cross1Icon
diff --git a/web/apps/admin/src/components/states/Loading.tsx b/web/apps/admin/src/components/states/Loading.tsx
index c0dd85bc3..e10259b2b 100644
--- a/web/apps/admin/src/components/states/Loading.tsx
+++ b/web/apps/admin/src/components/states/Loading.tsx
@@ -1,4 +1,4 @@
-import { Flex, Spinner } from "@raystack/apsara";
+import { Flex, Spinner } from "@raystack/apsara-v1";
 
 export default function LoadingState() {
   return (
diff --git a/web/apps/admin/src/components/states/Unauthorized.tsx b/web/apps/admin/src/components/states/Unauthorized.tsx
index 571576707..40f79bf09 100644
--- a/web/apps/admin/src/components/states/Unauthorized.tsx
+++ b/web/apps/admin/src/components/states/Unauthorized.tsx
@@ -1,5 +1,5 @@
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
-import { Button, EmptyState, Flex } from "@raystack/apsara";
+import { Button, EmptyState, Flex } from "@raystack/apsara-v1";
 import { useMutation } from "@connectrpc/connect-query";
 import { FrontierServiceQueries } from "@raystack/proton/frontier";
 
diff --git a/web/apps/admin/src/configs/theme.tsx b/web/apps/admin/src/configs/theme.tsx
index c797d9b60..7329f4d83 100644
--- a/web/apps/admin/src/configs/theme.tsx
+++ b/web/apps/admin/src/configs/theme.tsx
@@ -1,4 +1,4 @@
-import { ThemeProviderProps } from "@raystack/apsara";
+import { ThemeProviderProps } from "@raystack/apsara-v1";
 
 export const themeConfig: ThemeProviderProps = {
   defaultTheme: "system",
diff --git a/web/apps/admin/src/containers/login.tsx b/web/apps/admin/src/containers/login.tsx
index d27b12e47..386997782 100644
--- a/web/apps/admin/src/containers/login.tsx
+++ b/web/apps/admin/src/containers/login.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { Box, Flex, Image } from "@raystack/apsara";
-import { Header, MagicLink } from "@raystack/frontier/react";
+import { Box, Flex, Image } from "@raystack/apsara-v1";
+import { AuthHeader, MagicLinkView } from "@raystack/frontier/client";
 import { useContext } from "react";
 import PageTitle from "~/components/page-title";
 import { AppContext } from "~/contexts/App";
@@ -26,7 +26,7 @@ export default function Login() {
           }}
         >
           <Flex direction="column" gap={5} style={{ width: "100%" }}>
-            <Header
+            <AuthHeader
               logo={
                 config?.logo ? (
                   <Image
@@ -42,7 +42,7 @@ export default function Login() {
               }
               title={`Login to ${config?.title || defaultConfig.title}`}
             />
-            <MagicLink open />
+            <MagicLinkView open inline />
           </Flex>
         </Flex>
       </Box>
diff --git a/web/apps/admin/src/containers/magiclink.tsx b/web/apps/admin/src/containers/magiclink.tsx
index 2b257c89c..c15ca7ad5 100644
--- a/web/apps/admin/src/containers/magiclink.tsx
+++ b/web/apps/admin/src/containers/magiclink.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { Flex, Image } from "@raystack/apsara";
-import { MagicLinkVerify } from "@raystack/frontier/react";
+import { Flex, Image } from "@raystack/apsara-v1";
+import { MagicLinkVerifyView } from "@raystack/frontier/client";
 import IAMIcon from "~/assets/icons/iam.svg?react";
 import { AppContext } from "~/contexts/App";
 import { useContext } from "react";
@@ -15,7 +15,7 @@ export default function MagicLink() {
       justify="center"
       style={{ height: "100vh", textAlign: "center" }}
     >
-      <MagicLinkVerify
+      <MagicLinkVerifyView
         logo={
           config?.logo ? (
             <Image
diff --git a/web/apps/admin/src/hooks/useRQL.tsx b/web/apps/admin/src/hooks/useRQL.tsx
index 866ad55d4..183bbe984 100644
--- a/web/apps/admin/src/hooks/useRQL.tsx
+++ b/web/apps/admin/src/hooks/useRQL.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import type { DataTableQuery } from "@raystack/apsara";
+import type { DataTableQuery } from "@raystack/apsara-v1";
 import type {
   RQLQueryGroupResponse,
   RQLQueryPaginationResponse
diff --git a/web/apps/admin/src/layout/auth.tsx b/web/apps/admin/src/layout/auth.tsx
index 524eab9dd..291e7674a 100644
--- a/web/apps/admin/src/layout/auth.tsx
+++ b/web/apps/admin/src/layout/auth.tsx
@@ -1,4 +1,4 @@
-import { FrontierProvider } from "@raystack/frontier/react";
+import { FrontierProvider } from "@raystack/frontier/client";
 import { Outlet } from "react-router-dom";
 import { frontierConfig } from "~/configs/frontier";
 import { themeConfig } from "~/configs/theme";
diff --git a/web/apps/admin/src/main.tsx b/web/apps/admin/src/main.tsx
index 0237e94cc..74fc07c3a 100644
--- a/web/apps/admin/src/main.tsx
+++ b/web/apps/admin/src/main.tsx
@@ -1,4 +1,4 @@
-import { ThemeProvider, ToastContainer } from "@raystack/apsara";
+import { ThemeProvider, Toast } from "@raystack/apsara-v1";
 import { SkeletonTheme } from "react-loading-skeleton";
 import React from "react";
 import ReactDOM from "react-dom/client";
@@ -20,10 +20,11 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
             baseColor="var(--rs-color-background-base-primary-hover)"
           >
             <ConnectProvider>
-              <AppContextProvider>
-                <Routes />
-              </AppContextProvider>
-              <ToastContainer richColors />
+              <Toast.Provider>
+                <AppContextProvider>
+                  <Routes />
+                </AppContextProvider>
+              </Toast.Provider>
             </ConnectProvider>
           </SkeletonTheme>
         </ThemeProvider>
diff --git a/web/apps/admin/src/routes.tsx b/web/apps/admin/src/routes.tsx
index 740a1c28e..e4fd66bb8 100644
--- a/web/apps/admin/src/routes.tsx
+++ b/web/apps/admin/src/routes.tsx
@@ -1,4 +1,3 @@
-// import { MagicLinkVerify } from "@raystack/frontier/react";
 import * as R from "ramda";
 import { memo, useContext } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
diff --git a/web/apps/admin/src/utils/transform-query.ts b/web/apps/admin/src/utils/transform-query.ts
index 3b1289c3f..943b85fd6 100644
--- a/web/apps/admin/src/utils/transform-query.ts
+++ b/web/apps/admin/src/utils/transform-query.ts
@@ -1,4 +1,4 @@
-import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
+import type { DataTableQuery, DataTableSort } from "@raystack/apsara-v1";
 import type { RQLRequest, RQLFilter, RQLSort } from "@raystack/proton/frontier";
 import { RQLRequestSchema, RQLFilterSchema, RQLSortSchema } from "@raystack/proton/frontier";
 import { create } from "@bufbuild/protobuf";
@@ -19,9 +19,7 @@ export interface TransformOptions {
 /**
  * Converts a filter value to the appropriate RQLFilter value format
  */
-function convertFilterValue(
-  value: string | number | boolean | null | undefined,
-): RQLFilter["value"] {
+function convertFilterValue(value: unknown): RQLFilter["value"] {
   switch (typeof value) {
     case "boolean":
       return { case: "boolValue", value };
@@ -30,7 +28,7 @@ function convertFilterValue(
     case "string":
       return { case: "stringValue", value };
     default:
-      return { case: "stringValue", value: value ?? "" };
+      return { case: "stringValue", value: value == null ? "" : String(value) };
   }
 }
 
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index d217ef818..3d3ae8b96 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -54,9 +54,9 @@ importers:
       '@radix-ui/react-icons':
         specifier: ^1.3.0
         version: 1.3.2(react@19.2.4)
-      '@raystack/apsara':
-        specifier: 0.56.6
-        version: 0.56.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@raystack/apsara-v1':
+        specifier: npm:@raystack/apsara@1.0.0-rc.6
+        version: '@raystack/apsara@1.0.0-rc.6(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)'
       '@raystack/frontier':
         specifier: workspace:^
         version: link:../../sdk
@@ -114,9 +114,6 @@ importers:
       slugify:
         specifier: ^1.6.6
         version: 1.6.6
-      sonner:
-        specifier: ^1.4.41
-        version: 1.7.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       swr:
         specifier: ^2.1.2
         version: 2.4.1(react@19.2.4)
diff --git a/web/sdk/admin/components/AssignRole.tsx b/web/sdk/admin/components/AssignRole.tsx
index 3405c44b4..6fdba16d7 100644
--- a/web/sdk/admin/components/AssignRole.tsx
+++ b/web/sdk/admin/components/AssignRole.tsx
@@ -5,8 +5,8 @@ import {
   Flex,
   Label,
   Text,
-  toast,
-} from "@raystack/apsara";
+  toastManager,
+} from "@raystack/apsara-v1";
 import type {
   SearchOrganizationUsersResponse_OrganizationUser,
   Role,
@@ -83,9 +83,12 @@ export const AssignRole = ({
         onRoleUpdate();
       }
 
-      toast.success("Role assigned successfully");
+      toastManager.add({
+        title: "Role assigned successfully",
+        type: "success",
+      });
     } catch (error) {
-      toast.error("Failed to assign role");
+      toastManager.add({ title: "Failed to assign role", type: "error" });
       console.error(error);
     }
   };
@@ -95,7 +98,6 @@ export const AssignRole = ({
       <Dialog.Content width={400}>
         <Dialog.Header>
           <Dialog.Title>Assign Role</Dialog.Title>
-          <Dialog.CloseButton data-test-id="assign-role-close-button" />
         </Dialog.Header>
         <form onSubmit={handleSubmit(onSubmit)} noValidate>
           <Dialog.Body>
@@ -131,16 +133,18 @@ export const AssignRole = ({
             </Flex>
           </Dialog.Body>
           <Dialog.Footer>
-            <Dialog.Close asChild>
-              <Button
-                type="button"
-                variant="outline"
-                color="neutral"
-                data-test-id="assign-role-cancel-button"
-              >
-                Cancel
-              </Button>
-            </Dialog.Close>
+            <Dialog.Close
+              render={
+                <Button
+                  type="button"
+                  variant="outline"
+                  color="neutral"
+                  data-test-id="assign-role-cancel-button"
+                >
+                  Cancel
+                </Button>
+              }
+            />
             <Button
               type="submit"
               disabled={!isDirty}
diff --git a/web/sdk/admin/components/CustomField.tsx b/web/sdk/admin/components/CustomField.tsx
index 336041293..65ad6052c 100644
--- a/web/sdk/admin/components/CustomField.tsx
+++ b/web/sdk/admin/components/CustomField.tsx
@@ -5,7 +5,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@radix-ui/react-form";
-import { Flex, Select, Switch, Text, InputField } from "@raystack/apsara";
+import { Flex, Select, Switch, Text, Input } from "@raystack/apsara-v1";
 import React, { CSSProperties } from "react";
 
 import { Control, Controller, UseFormRegister } from "react-hook-form";
@@ -48,9 +48,9 @@ export const CustomFieldName = ({
       style={{ width: "100%" }}
       asChild
     >
-      <Flex direction="column" gap="small">
+      <Flex direction="column" gap={3}>
         <Flex
-          gap="medium"
+          gap={5}
           style={{
             alignItems: "baseline",
             justifyContent: "space-between",
@@ -140,7 +140,7 @@ export const CustomFieldName = ({
                   default: {
                     const { ref, ...rest } = field;
                     return (
-                      <InputField
+                      <Input
                         {...rest}
                         placeholder={
                           placeholder ||
diff --git a/web/sdk/admin/components/PageHeader.tsx b/web/sdk/admin/components/PageHeader.tsx
index 768c983ec..bd973f61e 100644
--- a/web/sdk/admin/components/PageHeader.tsx
+++ b/web/sdk/admin/components/PageHeader.tsx
@@ -1,5 +1,5 @@
 import type { CSSProperties, PropsWithChildren } from "react";
-import { Flex, Text } from "@raystack/apsara";
+import { Flex, Text } from "@raystack/apsara-v1";
 import styles from "./page-header.module.css";
 
 export type PageHeaderTypes = {
@@ -28,8 +28,8 @@ export function PageHeader({
       style={{ padding: "16px 24px", ...style }}
       {...props}
     >
-      <Flex align="center" gap="medium">
-        <Flex align="center" gap="small" className={styles.breadcrumb}>
+      <Flex align="center" gap={5}>
+        <Flex align="center" gap={3} className={styles.breadcrumb}>
           <Text style={{ fontSize: "14px", fontWeight: "500" }}>{title}</Text>
           {breadcrumb.map((item) =>
             item.href && onBreadcrumbClick ? (
@@ -58,7 +58,7 @@ export function PageHeader({
           )}
         </Flex>
       </Flex>
-      <Flex gap="small">{children}</Flex>
+      <Flex gap={3}>{children}</Flex>
     </Flex>
   );
 }
diff --git a/web/sdk/admin/components/SheetFooter.tsx b/web/sdk/admin/components/SheetFooter.tsx
index 1e59932bb..818100ebc 100644
--- a/web/sdk/admin/components/SheetFooter.tsx
+++ b/web/sdk/admin/components/SheetFooter.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex } from "@raystack/apsara";
+import { Flex } from "@raystack/apsara-v1";
 
 type SheetFooterProps = {
   children?: React.ReactNode;
diff --git a/web/sdk/admin/components/SheetHeader.tsx b/web/sdk/admin/components/SheetHeader.tsx
index e011e4f74..8a8006f8f 100644
--- a/web/sdk/admin/components/SheetHeader.tsx
+++ b/web/sdk/admin/components/SheetHeader.tsx
@@ -1,6 +1,6 @@
 import type { CSSProperties } from "react";
 import { Cross1Icon } from "@radix-ui/react-icons";
-import { Flex, Text } from "@raystack/apsara";
+import { Flex, Text } from "@raystack/apsara-v1";
 
 type SheetHeaderProps = {
   title: string;
@@ -11,7 +11,7 @@ type SheetHeaderProps = {
 export function SheetHeader({ title, onClick, "data-test-id": dataTestId }: SheetHeaderProps) {
   return (
     <Flex justify="between" style={styles.header}>
-      <Text size={4} style={{ fontWeight: "500" }}>
+      <Text size="regular" weight="medium">
         {title}
       </Text>
       <Cross1Icon
diff --git a/web/sdk/admin/components/multiselect/multiselect/index.tsx b/web/sdk/admin/components/multiselect/multiselect/index.tsx
index 2873bf0a8..7cc450cd1 100644
--- a/web/sdk/admin/components/multiselect/multiselect/index.tsx
+++ b/web/sdk/admin/components/multiselect/multiselect/index.tsx
@@ -1,4 +1,5 @@
-import { Button, Checkbox, Command, Flex, Popover } from "@raystack/apsara";
+import { Button, Checkbox, Command, Flex, Popover } from "@raystack/apsara-v1";
+import React from "react";
 
 interface Option<T> {
   value: T;
@@ -35,31 +36,34 @@ export function MultiSelect<T>({
 
   return (
     <Popover>
-      <Popover.Trigger asChild>
-        <Button data-test-id="admin-selected">
-          {selectedValues.size} selected
-        </Button>
-      </Popover.Trigger>
+      <Popover.Trigger
+        render={
+          <Button data-test-id="admin-selected">
+            {selectedValues.size} selected
+          </Button>
+        }
+      />
       <Popover.Content align="start" style={{ padding: 0 }}>
         <Command>
           <Command.Input />
-          <Command.List>
+          <Command.Content>
             <Command.Empty>No results found.</Command.Empty>
             <Command.Group>
               {options.map((option: Option<T>) => {
                 const isSelected = selectedValues.has(option.value);
                 return (
                   <Command.Item
-                    key={option.value}
-                    onSelect={() => handleSelect(option.value)}
+                    key={option.value as React.Key}
+                    onClick={() => handleSelect(option.value)}
+                    data-test-id={`frontier-admin-multiselect-item-${option.value}`}
                   >
                     <Flex
                       justify="start"
-                      gap="small"
+                      gap={3}
                       style={{ padding: "4px 0px", cursor: "pointer" }}
                     >
-                      <Checkbox checked={isSelected} />
-                      <Flex align="center" gap="small">
+                      <Checkbox checked={isSelected} style={{ pointerEvents: "none" }} />
+                      <Flex align="center" gap={3}>
                         <span>{option.label}</span>
                       </Flex>
                     </Flex>
@@ -67,11 +71,11 @@ export function MultiSelect<T>({
                 );
               })}
             </Command.Group>
-          </Command.List>
+          </Command.Content>
           <>
             <Command.Separator />
             <Command.Group>
-              <Command.Item onSelect={onClear}>
+              <Command.Item onClick={onClear} data-test-id="frontier-admin-multiselect-clear">
                 <Flex
                   justify="center"
                   style={{ padding: "4px 0px", cursor: "pointer" }}
diff --git a/web/sdk/admin/views/admins/columns.tsx b/web/sdk/admin/views/admins/columns.tsx
index 297d8b5e5..fd88e2e25 100644
--- a/web/sdk/admin/views/admins/columns.tsx
+++ b/web/sdk/admin/views/admins/columns.tsx
@@ -1,4 +1,4 @@
-import { Text, type DataTableColumnDef } from "@raystack/apsara";
+import { Text, type DataTableColumnDef } from "@raystack/apsara-v1";
 import type { ServiceUser, User } from "@raystack/proton/frontier";
 import { TerminologyEntity } from "../../hooks/useTerminology";
 
diff --git a/web/sdk/admin/views/admins/index.tsx b/web/sdk/admin/views/admins/index.tsx
index aebe1edbc..c30917825 100644
--- a/web/sdk/admin/views/admins/index.tsx
+++ b/web/sdk/admin/views/admins/index.tsx
@@ -1,4 +1,4 @@
-import { DataTable, EmptyState, Flex } from "@raystack/apsara";
+import { DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
 import { getColumns } from "./columns";
 import styles from "./admins.module.css";
 import { useQuery } from "@connectrpc/connect-query";
diff --git a/web/sdk/admin/views/audit-logs/actor-cell.tsx b/web/sdk/admin/views/audit-logs/actor-cell.tsx
index f802b2953..65c1368b1 100644
--- a/web/sdk/admin/views/audit-logs/actor-cell.tsx
+++ b/web/sdk/admin/views/audit-logs/actor-cell.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Flex, getAvatarColor, Text } from "@raystack/apsara";
+import { Avatar, Flex, getAvatarColor, Text } from "@raystack/apsara-v1";
 import { AuditRecordActor } from "@raystack/proton/frontier";
 import { ACTOR_TYPES, getAuditLogActorName } from "./util";
 import systemIcon from "../../assets/images/system.jpg";
diff --git a/web/sdk/admin/views/audit-logs/columns.tsx b/web/sdk/admin/views/audit-logs/columns.tsx
index 600d82c51..a792623c1 100644
--- a/web/sdk/admin/views/audit-logs/columns.tsx
+++ b/web/sdk/admin/views/audit-logs/columns.tsx
@@ -1,4 +1,4 @@
-import { Badge, DataTableColumnDef, Flex, Text } from "@raystack/apsara";
+import { Badge, DataTableColumnDef, Flex, Text } from "@raystack/apsara-v1";
 import dayjs from "dayjs";
 import styles from "./audit-logs.module.css";
 import {
diff --git a/web/sdk/admin/views/audit-logs/index.tsx b/web/sdk/admin/views/audit-logs/index.tsx
index bed2be3a5..650849651 100644
--- a/web/sdk/admin/views/audit-logs/index.tsx
+++ b/web/sdk/admin/views/audit-logs/index.tsx
@@ -4,8 +4,8 @@ import {
   type DataTableSort,
   EmptyState,
   Flex,
-} from "@raystack/apsara";
-import { useDebouncedState } from "@raystack/apsara/hooks";
+} from "@raystack/apsara-v1";
+import { useDebouncedState } from "@raystack/apsara-v1/hooks";
 import { useCallback, useMemo, useState } from "react";
 import Navbar from "./navbar";
 import styles from "./audit-logs.module.css";
diff --git a/web/sdk/admin/views/audit-logs/navbar.tsx b/web/sdk/admin/views/audit-logs/navbar.tsx
index 3f6909e75..3844df8ff 100644
--- a/web/sdk/admin/views/audit-logs/navbar.tsx
+++ b/web/sdk/admin/views/audit-logs/navbar.tsx
@@ -1,4 +1,4 @@
-import { DataTable, Flex, Text, IconButton, Spinner } from "@raystack/apsara";
+import { DataTable, Flex, Text, IconButton, Spinner } from "@raystack/apsara-v1";
 import { CpuChipIcon } from "../../assets/icons/CpuChipIcon";
 import styles from "./audit-logs.module.css";
 import { DownloadIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
@@ -47,7 +47,7 @@ const Navbar = ({ searchQuery, onExportCsv }: NavbarProps) => {
     <nav className={styles.navbar}>
       <Flex gap={2}>
         <CpuChipIcon />
-        <Text size={2} weight={500}>
+        <Text size="small" weight="medium">
           Audit Logs
         </Text>
       </Flex>
diff --git a/web/sdk/admin/views/audit-logs/sidepanel-details.tsx b/web/sdk/admin/views/audit-logs/sidepanel-details.tsx
index 2f6fe46d5..488b7721d 100644
--- a/web/sdk/admin/views/audit-logs/sidepanel-details.tsx
+++ b/web/sdk/admin/views/audit-logs/sidepanel-details.tsx
@@ -1,11 +1,11 @@
-import { Flex, IconButton, SidePanel } from "@raystack/apsara";
+import { Flex, IconButton, SidePanel } from "@raystack/apsara-v1";
 import {
   Cross2Icon,
   DesktopIcon,
   GlobeIcon,
   TransformIcon,
 } from "@radix-ui/react-icons";
-import { List } from "@raystack/apsara";
+import { List } from "@raystack/apsara-v1";
 import styles from "./audit-logs.module.css";
 import { AuditRecord } from "@raystack/proton/frontier";
 import { ACTOR_TYPES } from "./util";
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 9d2f82c7f..724f2bc82 100644
--- a/web/sdk/admin/views/audit-logs/sidepanel-list-id.tsx
+++ b/web/sdk/admin/views/audit-logs/sidepanel-list-id.tsx
@@ -1,4 +1,4 @@
-import { CopyButton, Flex, List, Text, Tooltip } from "@raystack/apsara";
+import { CopyButton, Flex, List, Text, Tooltip } from "@raystack/apsara-v1";
 import styles from "./audit-logs.module.css";
 
 export default function SidepanelListId({ id = "-" }: { id?: string }) {
@@ -6,10 +6,15 @@ export default function SidepanelListId({ id = "-" }: { id?: string }) {
     <List.Value>
       <Flex gap={3} width="full">
         <CopyButton text={id || ""} data-test-id="copy-button" />
-        <Tooltip message={id || ""}>
-          <Text className={styles["text-overflow"]} weight="medium">
-            {id}
-          </Text>
+        <Tooltip>
+          <Tooltip.Trigger
+            render={
+              <Text className={styles["text-overflow"]} weight="medium">
+                {id}
+              </Text>
+            }
+          />
+          <Tooltip.Content>{id || ""}</Tooltip.Content>
         </Tooltip>
       </Flex>
     </List.Value>
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..13217c687 100644
--- a/web/sdk/admin/views/audit-logs/sidepanel-list-link.tsx
+++ b/web/sdk/admin/views/audit-logs/sidepanel-list-link.tsx
@@ -1,4 +1,4 @@
-import { Button, List } from "@raystack/apsara";
+import { Button, List } from "@raystack/apsara-v1";
 import { ReactNode } from "react";
 import styles from "./audit-logs.module.css";
 
diff --git a/web/sdk/admin/views/audit-logs/sidepanel-log-dialog.tsx b/web/sdk/admin/views/audit-logs/sidepanel-log-dialog.tsx
index 4e7f8ed63..b146d1ed7 100644
--- a/web/sdk/admin/views/audit-logs/sidepanel-log-dialog.tsx
+++ b/web/sdk/admin/views/audit-logs/sidepanel-log-dialog.tsx
@@ -1,4 +1,4 @@
-import { Dialog, IconButton, CodeBlock } from "@raystack/apsara";
+import { Dialog, IconButton, CodeBlock } from "@raystack/apsara-v1";
 import styles from "./audit-logs.module.css";
 import { AuditRecord } from "@raystack/proton/frontier";
 import { auditLogToJson } from "./util";
@@ -7,21 +7,21 @@ import { JsonIcon } from "../../assets/icons/JsonIcon";
 export default function SidePanelLogDialog(props: Partial<AuditRecord>) {
   return (
     <Dialog key="show-audit-json-dialog">
-      <Dialog.Trigger asChild>
-        <IconButton
-          size={3}
-          key="show-audit-json-icon"
-          data-test-id="show-audit-json-icon">
-          <JsonIcon />
-        </IconButton>
-      </Dialog.Trigger>
+      <Dialog.Trigger
+        render={
+          <IconButton
+            size={3}
+            key="show-audit-json-icon"
+            data-test-id="show-audit-json-icon">
+            <JsonIcon />
+          </IconButton>
+        }
+      />
       <Dialog.Content
         width={600}
-        ariaLabel="Basic Dialog"
-        ariaDescription="A simple dialog example">
+        aria-label="Basic Dialog">
         <Dialog.Header>
           <Dialog.Title>Log entry</Dialog.Title>
-          <Dialog.CloseButton data-test-id="close-audit-json-dialog-icon" />
         </Dialog.Header>
         <Dialog.Body className={styles["code-block-container"]}>
           <CodeBlock>
diff --git a/web/sdk/admin/views/invoices/columns.tsx b/web/sdk/admin/views/invoices/columns.tsx
index 838520608..e7b409e45 100644
--- a/web/sdk/admin/views/invoices/columns.tsx
+++ b/web/sdk/admin/views/invoices/columns.tsx
@@ -1,4 +1,4 @@
-import { Amount, type DataTableColumnDef, Link, Text } from "@raystack/apsara";
+import { Amount, type DataTableColumnDef, Link, Text } from "@raystack/apsara-v1";
 import dayjs from "dayjs";
 import type { SearchInvoicesResponse_Invoice } from "@raystack/proton/frontier";
 import {
diff --git a/web/sdk/admin/views/invoices/index.tsx b/web/sdk/admin/views/invoices/index.tsx
index e6ac9797b..8c885bee6 100644
--- a/web/sdk/admin/views/invoices/index.tsx
+++ b/web/sdk/admin/views/invoices/index.tsx
@@ -4,7 +4,7 @@ import {
   type DataTableSort,
   EmptyState,
   Flex,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import { useState } from "react";
 import { PageTitle } from "../../components/PageTitle";
 import { InvoicesNavabar } from "./navbar";
diff --git a/web/sdk/admin/views/invoices/navbar.tsx b/web/sdk/admin/views/invoices/navbar.tsx
index d9fab6b07..74a017809 100644
--- a/web/sdk/admin/views/invoices/navbar.tsx
+++ b/web/sdk/admin/views/invoices/navbar.tsx
@@ -1,4 +1,4 @@
-import { DataTable, Flex, IconButton, Text } from "@raystack/apsara";
+import { DataTable, Flex, IconButton, Text } from "@raystack/apsara-v1";
 import styles from "./invoices.module.css";
 import { InvoicesIcon } from "../../assets/icons/InvoicesIcon";
 import { FocusEvent, useState } from "react";
@@ -21,7 +21,7 @@ export const InvoicesNavabar = ({ searchQuery }: { searchQuery: string }) => {
     <nav className={styles.navbar}>
       <Flex gap={2}>
         <InvoicesIcon />
-        <Text size={2} weight={500}>
+        <Text size="small" weight="medium">
           Invoices
         </Text>
       </Flex>
diff --git a/web/sdk/admin/views/organizations/details/apis/columns.tsx b/web/sdk/admin/views/organizations/details/apis/columns.tsx
index 402ba34e8..36858357d 100644
--- a/web/sdk/admin/views/organizations/details/apis/columns.tsx
+++ b/web/sdk/admin/views/organizations/details/apis/columns.tsx
@@ -1,4 +1,4 @@
-import { Text, type DataTableColumnDef } from "@raystack/apsara";
+import { Text, type DataTableColumnDef } from "@raystack/apsara-v1";
 import dayjs from "dayjs";
 import { NULL_DATE } from "../../../../utils/constants";
 import styles from "./apis.module.css";
diff --git a/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx b/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx
index 77ef3f58c..a8b2f2ccd 100644
--- a/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx
+++ b/web/sdk/admin/views/organizations/details/apis/details-dialog.tsx
@@ -1,4 +1,4 @@
-import { Dialog, Flex, Skeleton, Tabs, Text, toast } from "@raystack/apsara";
+import { Dialog, Flex, Skeleton, Tabs, Text, toastManager } from "@raystack/apsara-v1";
 import styles from "./apis.module.css";
 import { useCallback, useEffect, useMemo } from "react";
 import dayjs from "dayjs";
@@ -63,14 +63,18 @@ export const ServiceUserDetailsDialog = ({
 
   useEffect(() => {
     if (projectError) {
-      toast.error("Something went wrong", {
+      toastManager.add({
+        title: "Something went wrong",
         description: "Unable to fetch projects",
+        type: "error",
       });
       console.error("Unable to fetch projects:", projectError);
     }
     if (tokenError) {
-      toast.error("Something went wrong", {
+      toastManager.add({
+        title: "Something went wrong",
         description: "Unable to fetch tokens",
+        type: "error",
       });
       console.error("Unable to fetch tokens:", tokenError);
     }
@@ -90,23 +94,22 @@ export const ServiceUserDetailsDialog = ({
       <Dialog.Content className={styles["details-dialog"]}>
         <Dialog.Header>
           <Dialog.Title>{title}</Dialog.Title>
-          <Dialog.CloseButton />
         </Dialog.Header>
         <Dialog.Body className={styles["dialog-body"]}>
           <Tabs defaultValue="keys" className={styles["tab-root"]}>
             <Tabs.List>
-              <Tabs.Trigger value="keys">
+              <Tabs.Tab value="keys">
                 API keys{" "}
                 {!isTokenLoading && tokens.length > 0
                   ? `(${tokens.length})`
                   : ""}
-              </Tabs.Trigger>
-              <Tabs.Trigger value="projects">
+              </Tabs.Tab>
+              <Tabs.Tab value="projects">
                 {t.project({ plural: true, case: "capital" })}{" "}
                 {!isProjectLoading && projects.length > 0
                   ? `(${projects.length})`
                   : ""}
-              </Tabs.Trigger>
+              </Tabs.Tab>
             </Tabs.List>
             <Tabs.Content value="keys" className={styles["tab-content"]}>
               {isTokenLoading ? (
diff --git a/web/sdk/admin/views/organizations/details/apis/index.tsx b/web/sdk/admin/views/organizations/details/apis/index.tsx
index 55c0ff414..0c68a97c5 100644
--- a/web/sdk/admin/views/organizations/details/apis/index.tsx
+++ b/web/sdk/admin/views/organizations/details/apis/index.tsx
@@ -1,5 +1,5 @@
-import { DataTable, EmptyState, Flex } from "@raystack/apsara";
-import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
+import { DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
+import type { DataTableQuery, DataTableSort } from "@raystack/apsara-v1";
 import styles from "./apis.module.css";
 import { InfoCircledIcon, ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
diff --git a/web/sdk/admin/views/organizations/details/edit/billing.tsx b/web/sdk/admin/views/organizations/details/edit/billing.tsx
index 1231b77fb..24bf5d16f 100644
--- a/web/sdk/admin/views/organizations/details/edit/billing.tsx
+++ b/web/sdk/admin/views/organizations/details/edit/billing.tsx
@@ -1,15 +1,16 @@
 import { Cross1Icon } from "@radix-ui/react-icons";
 import {
   Button,
+  Field,
   Flex,
   IconButton,
-  InputField,
+  Input,
   Text,
   Select,
-  Sheet,
+  Drawer,
   SidePanel,
-  toast,
-} from "@raystack/apsara";
+  toastManager,
+} from "@raystack/apsara-v1";
 import styles from "./edit.module.css";
 import { useCallback, useContext, useEffect, useMemo } from "react";
 import { OrganizationContext } from "../contexts/organization-context";
@@ -113,8 +114,10 @@ export function EditBillingPanel({ onClose }: EditBillingPanelProps) {
     AdminServiceQueries.updateBillingAccountDetails,
     {
       onError: (error) => {
-        toast.error("Something went wrong", {
+        toastManager.add({
+          title: "Something went wrong",
           description: error.message,
+          type: "error",
         });
         console.error("Unable to update billing details:", error);
       },
@@ -144,10 +147,12 @@ export function EditBillingPanel({ onClose }: EditBillingPanelProps) {
       // Refetch current dialog's billing details
       fetchBillingAccountDetails()
 
-      toast.success("Billing details updated");
+      toastManager.add({ title: "Billing details updated", type: "success" });
     } catch (error) {
-      toast.error("Something went wrong", {
+      toastManager.add({
+        title: "Something went wrong",
         description: "Failed to update billing details",
+        type: "error",
       });
       console.error("Failed to update billing details:", error);
     }
@@ -169,8 +174,8 @@ export function EditBillingPanel({ onClose }: EditBillingPanelProps) {
   const isPrepaid = tokenPaymentType === "prepaid";
 
   return (
-    <Sheet open>
-      <Sheet.Content className={styles["drawer-content"]}>
+    <Drawer open>
+      <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-billing-panel"
           className={styles["side-panel"]}
@@ -220,25 +225,28 @@ export function EditBillingPanel({ onClose }: EditBillingPanelProps) {
               {isLoading ? (
                 <Skeleton height={"32px"} />
               ) : (
-                <InputField
-                  disabled={isPrepaid}
-                  label="Credit limit"
-                  type="text"
-                  {...register("creditMin", {})}
-                  error={errors?.creditMin?.message}
-                />
+                <Field label="Credit limit" error={errors?.creditMin?.message}>
+                  <Input
+                    disabled={isPrepaid}
+                    type="text"
+                    {...register("creditMin", {})}
+                  />
+                </Field>
               )}
               {isLoading ? (
                 <Skeleton height={"32px"} />
               ) : (
-                <InputField
-                  disabled={isPrepaid}
+                <Field
                   label="Billing due date"
-                  type="text"
-                  suffix="Days"
-                  {...register("dueInDays", {})}
                   error={errors?.dueInDays?.message}
-                />
+                >
+                  <Input
+                    disabled={isPrepaid}
+                    type="text"
+                    suffix="Days"
+                    {...register("dueInDays", {})}
+                  />
+                </Field>
               )}
             </Flex>
 
@@ -263,7 +271,7 @@ export function EditBillingPanel({ onClose }: EditBillingPanelProps) {
             </Flex>
           </form>
         </SidePanel>
-      </Sheet.Content>
-    </Sheet>
+      </Drawer.Content>
+    </Drawer>
   );
 }
diff --git a/web/sdk/admin/views/organizations/details/edit/edit.module.css b/web/sdk/admin/views/organizations/details/edit/edit.module.css
index 0cb8c0a3b..947b29428 100644
--- a/web/sdk/admin/views/organizations/details/edit/edit.module.css
+++ b/web/sdk/admin/views/organizations/details/edit/edit.module.css
@@ -28,10 +28,6 @@
   padding: var(--rs-space-5) var(--rs-space-7);
 }
 
-.select-value {
-  width: 100%;
-}
-
 .select-content {
   max-height: 400px;
 }
diff --git a/web/sdk/admin/views/organizations/details/edit/kyc.tsx b/web/sdk/admin/views/organizations/details/edit/kyc.tsx
index f78ec1ff4..df9719167 100644
--- a/web/sdk/admin/views/organizations/details/edit/kyc.tsx
+++ b/web/sdk/admin/views/organizations/details/edit/kyc.tsx
@@ -1,16 +1,17 @@
 import { Cross1Icon } from "@radix-ui/react-icons";
 import {
   Button,
+  Field,
   Flex,
   IconButton,
-  InputField,
+  Input,
   Label,
-  Sheet,
+  Drawer,
   SidePanel,
   Switch,
   Text,
-  toast,
-} from "@raystack/apsara";
+  toastManager,
+} from "@raystack/apsara-v1";
 import styles from "./edit.module.css";
 import { z } from "zod";
 import { useContext } from "react";
@@ -80,11 +81,11 @@ export function EditKYCPanel({ onClose }: EditKYCPanelProps) {
           cardinality: "finite",
         })
       });
-      toast.success("KYC details updated successfully");
+      toastManager.add({ title: "KYC details updated successfully", type: "success" });
       onClose();
     },
     onError: (error) => {
-      toast.error(`Failed to update KYC details: ${error.message}`);
+      toastManager.add({ title: `Failed to update KYC details: ${error.message}`, type: "error" });
       console.error("Unable to update KYC details:", error);
     },
   });
@@ -103,8 +104,8 @@ export function EditKYCPanel({ onClose }: EditKYCPanelProps) {
   }
 
   return (
-    <Sheet open>
-      <Sheet.Content className={styles["drawer-content"]}>
+    <Drawer open>
+      <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-kyc-panel"
           className={styles["side-panel"]}
@@ -159,13 +160,9 @@ export function EditKYCPanel({ onClose }: EditKYCPanelProps) {
                 control={control}
                 render={({ field }) => {
                   return (
-                    <>
-                      <InputField
-                        label="Document Link"
-                        {...field}
-                        error={errors.link?.message}
-                      />
-                    </>
+                    <Field label="Document Link" error={errors.link?.message}>
+                      <Input {...field} />
+                    </Field>
                   );
                 }}
               />
@@ -190,7 +187,7 @@ export function EditKYCPanel({ onClose }: EditKYCPanelProps) {
             </Flex>
           </form>
         </SidePanel>
-      </Sheet.Content>
-    </Sheet>
+      </Drawer.Content>
+    </Drawer>
   );
 }
diff --git a/web/sdk/admin/views/organizations/details/edit/organization.tsx b/web/sdk/admin/views/organizations/details/edit/organization.tsx
index ed39789b4..c6c035581 100644
--- a/web/sdk/admin/views/organizations/details/edit/organization.tsx
+++ b/web/sdk/admin/views/organizations/details/edit/organization.tsx
@@ -3,15 +3,16 @@ import { OrganizationContext } from "../contexts/organization-context";
 import styles from "./edit.module.css";
 import {
   Button,
+  Field,
   Flex,
   IconButton,
-  InputField,
+  Input,
   Select,
-  Sheet,
+  Drawer,
   SidePanel,
   Text,
   Label,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import { Cross1Icon } from "@radix-ui/react-icons";
 import { AvatarUpload } from "../../../../../react/components/avatar-upload";
 import { z } from "zod";
@@ -159,8 +160,8 @@ export function EditOrganizationPanel({ onClose }: { onClose: () => void }) {
   const showOtherTypeField = watch("type", "other") === "other";
 
   return (
-    <Sheet open>
-      <Sheet.Content className={styles["drawer-content"]}>
+    <Drawer open>
+      <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-org-panel"
           className={styles["side-panel"]}
@@ -194,7 +195,7 @@ export function EditOrganizationPanel({ onClose }: { onClose: () => void }) {
                     <>
                       <Flex
                         align="center"
-                        gap="medium"
+                        gap={5}
                         style={{ width: "100%" }}
                       >
                         <AvatarUpload {...field} data-test-id="avatar-upload" />
@@ -204,20 +205,22 @@ export function EditOrganizationPanel({ onClose }: { onClose: () => void }) {
                   );
                 }}
               />
-              <InputField {...register("title")} label={`${t.organization({ case: "capital" })} title`} />
-              <InputField
-                {...register("name")}
-                prefix={appUrl}
+              <Field label={`${t.organization({ case: "capital" })} title`}>
+                <Input {...register("title")} />
+              </Field>
+              <Field
                 label={`${t.organization({ case: "capital" })} URL`}
-                helperText={`This will be your ${t.organization({ case: "lower" })} unique web address`}
+                description={`This will be your ${t.organization({ case: "lower" })} unique web address`}
                 error={errors.name?.message}
-              />
-              <InputField
-                {...register("size")}
-                type="number"
+              >
+                <Input {...register("name")} prefix={appUrl} />
+              </Field>
+              <Field
                 label={`${t.organization({ case: "capital" })} size`}
                 error={errors.size?.message}
-              />
+              >
+                <Input {...register("size")} type="number" />
+              </Field>
               <Controller
                 name="type"
                 control={control}
@@ -237,7 +240,6 @@ export function EditOrganizationPanel({ onClose }: { onClose: () => void }) {
                         <Select.Trigger>
                           <Select.Value
                             placeholder="Select an industry"
-                            className={styles["select-value"]}
                             id="org-type-select"
                           />
                         </Select.Trigger>
@@ -255,11 +257,12 @@ export function EditOrganizationPanel({ onClose }: { onClose: () => void }) {
                 }}
               />
               {showOtherTypeField ? (
-                <InputField
+                <Field
                   label={`${t.organization({ case: "capital" })} industry (other)`}
-                  {...register("otherType")}
                   error={errors.otherType?.message}
-                />
+                >
+                  <Input {...register("otherType")} />
+                </Field>
               ) : null}
               <Controller
                 name="country"
@@ -279,7 +282,6 @@ export function EditOrganizationPanel({ onClose }: { onClose: () => void }) {
                         <Select.Trigger>
                           <Select.Value
                             placeholder="Select a country"
-                            className={styles["select-value"]}
                             id="country-select"
                           />
                         </Select.Trigger>
@@ -316,7 +318,7 @@ export function EditOrganizationPanel({ onClose }: { onClose: () => void }) {
             </Flex>
           </form>
         </SidePanel>
-      </Sheet.Content>
-    </Sheet>
+      </Drawer.Content>
+    </Drawer>
   );
 }
diff --git a/web/sdk/admin/views/organizations/details/invoices/columns.tsx b/web/sdk/admin/views/organizations/details/invoices/columns.tsx
index 10f4e15ac..536226461 100644
--- a/web/sdk/admin/views/organizations/details/invoices/columns.tsx
+++ b/web/sdk/admin/views/organizations/details/invoices/columns.tsx
@@ -1,7 +1,7 @@
 import { NULL_DATE } from "../../../../utils/constants";
 import styles from "./invoices.module.css";
 import dayjs from "dayjs";
-import { DataTableColumnDef, Link, Amount } from "@raystack/apsara";
+import { DataTableColumnDef, Link, Amount } from "@raystack/apsara-v1";
 import type {
   SearchOrganizationInvoicesResponse_OrganizationInvoice,
 } from "@raystack/proton/frontier";
diff --git a/web/sdk/admin/views/organizations/details/invoices/index.tsx b/web/sdk/admin/views/organizations/details/invoices/index.tsx
index 01d9cb430..36e203830 100644
--- a/web/sdk/admin/views/organizations/details/invoices/index.tsx
+++ b/web/sdk/admin/views/organizations/details/invoices/index.tsx
@@ -1,5 +1,5 @@
-import { DataTable, EmptyState, Flex } from "@raystack/apsara";
-import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
+import { DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
+import type { DataTableQuery, DataTableSort } from "@raystack/apsara-v1";
 import styles from "./invoices.module.css";
 import { FileTextIcon, ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useContext, useEffect, useMemo, useState } from "react";
diff --git a/web/sdk/admin/views/organizations/details/layout/add-tokens-dialog.tsx b/web/sdk/admin/views/organizations/details/layout/add-tokens-dialog.tsx
index 99080704a..0b608f437 100644
--- a/web/sdk/admin/views/organizations/details/layout/add-tokens-dialog.tsx
+++ b/web/sdk/admin/views/organizations/details/layout/add-tokens-dialog.tsx
@@ -2,12 +2,12 @@ import {
   Button,
   Dialog,
   Flex,
-  InputField,
+  Input,
   Label,
   Text,
-  toast,
-} from "@raystack/apsara";
-import { useContext } from "react";
+  toastManager,
+} from "@raystack/apsara-v1";
+import React, { useContext } from "react";
 import { OrganizationContext } from "../contexts/organization-context";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import styles from "./layout.module.css";
@@ -65,12 +65,14 @@ export const AddTokensDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
           }),
         });
         fetchTokenBalance();
-        toast.success("Tokens added");
+        toastManager.add({ title: "Tokens added", type: "success" });
         onOpenChange(false);
       },
       onError: (error) => {
-        toast.error("Something went wrong", {
+        toastManager.add({
+          title: "Something went wrong",
           description: error.message,
+          type: "error",
         });
         console.error("Unable to add tokens:", error);
       },
@@ -101,7 +103,6 @@ export const AddTokensDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
           <form onSubmit={methods.handleSubmit(onSubmit)}>
             <Dialog.Header>
               <Dialog.Title>Add tokens</Dialog.Title>
-              <Dialog.CloseButton data-test-id="add-tokens-close-button" />
             </Dialog.Header>
             <Dialog.Body>
               <Flex direction="column" gap={7}>
@@ -112,23 +113,23 @@ export const AddTokensDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
                     control={methods.control}
                     render={({ field }) => {
                       return (
-                        <InputField
+                        <Input
                           {...field}
                           type="number"
                           min={0}
                           className={styles["add-token-dialog-tokens-field"]}
-                          onKeyDown={(e) =>
+                          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>
                             ["+", "-", ".", "e", "E"].includes(e.key) &&
                             e.preventDefault()
                           }
-                          onPaste={(e) => e.preventDefault()}
+                          onPaste={(e: React.ClipboardEvent<HTMLInputElement>) => e.preventDefault()}
                         />
                       );
                     }}
                   />
 
                   {errors?.quantity?.message ? (
-                    <Text size={1} className={styles["form-error-message"]}>
+                    <Text size="mini" className={styles["form-error-message"]}>
                       {errors?.quantity?.message}
                     </Text>
                   ) : null}
@@ -136,16 +137,18 @@ export const AddTokensDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
               </Flex>
             </Dialog.Body>
             <Dialog.Footer>
-              <Dialog.Close asChild>
-                <Button
-                  data-test-id="add-tokens-invite-button"
-                  type="reset"
-                  color="neutral"
-                  variant="outline"
-                >
-                  Cancel
-                </Button>
-              </Dialog.Close>
+              <Dialog.Close
+                render={
+                  <Button
+                    data-test-id="add-tokens-invite-button"
+                    type="reset"
+                    color="neutral"
+                    variant="outline"
+                  >
+                    Cancel
+                  </Button>
+                }
+              />
               <Button
                 data-test-id="add-tokens-invite-button"
                 type="submit"
diff --git a/web/sdk/admin/views/organizations/details/layout/index.tsx b/web/sdk/admin/views/organizations/details/layout/index.tsx
index 5652edc4e..f7e64ef2a 100644
--- a/web/sdk/admin/views/organizations/details/layout/index.tsx
+++ b/web/sdk/admin/views/organizations/details/layout/index.tsx
@@ -1,9 +1,9 @@
 import { OrganizationsDetailsNavabar } from "./navbar";
 import styles from "./layout.module.css";
-import { EmptyState, Flex, Spinner } from "@raystack/apsara";
+import { EmptyState, Flex, Spinner } from "@raystack/apsara-v1";
 import { OrgSidePanel } from "../side-panel/";
 import React, { useState } from "react";
-import { OrganizationIcon } from "@raystack/apsara/icons";
+import { OrganizationIcon } from "@raystack/apsara-v1/icons";
 import { PageTitle } from "../../../../components/PageTitle";
 import { EditKYCPanel } from "../edit/kyc";
 import { EditOrganizationPanel } from "../edit/organization";
@@ -87,7 +87,7 @@ export const OrganizationDetailsLayout = ({
         currentPath={currentPath}
         onNavigate={onNavigate}
       />
-      <Flex justify="between" style={{ height: "100%" }}>
+      <Flex justify="between" style={{ flex: 1, minHeight: 0 }}>
         <Flex
           className={
             showSidePanel
diff --git a/web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx b/web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx
index fe7da04c7..f0508a7a2 100644
--- a/web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx
+++ b/web/sdk/admin/views/organizations/details/layout/invite-users-dialog.tsx
@@ -6,8 +6,8 @@ import {
   Select,
   Text,
   TextArea,
-  toast
-} from '@raystack/apsara';
+  toastManager
+} from '@raystack/apsara-v1';
 import { useContext, useMemo } from 'react';
 import styles from './layout.module.css';
 import { OrganizationContext } from '../contexts/organization-context';
@@ -75,9 +75,10 @@ export const InviteUsersDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
           })
         });
         const inviteCount = data?.invitations?.length ?? 0;
-        toast.success(
-          `${t.user({ case: 'capital', plural: inviteCount > 1 })} invited`
-        );
+        toastManager.add({
+          title: `${t.user({ case: 'capital', plural: inviteCount > 1 })} invited`,
+          type: "success",
+        });
         onOpenChange(false);
       }
     }
@@ -95,13 +96,13 @@ export const InviteUsersDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
       );
     } catch (error) {
       handleConnectError(error, {
-        AlreadyExists: () => toast.error('Invitation already exists'),
+        AlreadyExists: () => toastManager.add({ title: 'Invitation already exists', type: "error" }),
         InvalidArgument: err =>
-          toast.error('Invalid input', { description: err.message }),
+          toastManager.add({ title: 'Invalid input', description: err.message, type: "error" }),
         PermissionDenied: () =>
-          toast.error("You don't have permission to perform this action"),
+          toastManager.add({ title: "You don't have permission to perform this action", type: "error" }),
         Default: err =>
-          toast.error('Something went wrong', { description: err.message })
+          toastManager.add({ title: 'Something went wrong', description: err.message, type: "error" })
       });
     }
   };
@@ -115,7 +116,6 @@ export const InviteUsersDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
           <form onSubmit={methods.handleSubmit(onSubmit)}>
             <Dialog.Header>
               <Dialog.Title>Invite {t.user({ case: 'lower' })}</Dialog.Title>
-              <Dialog.CloseButton data-test-id="invite-users-close-button" />
             </Dialog.Header>
             <Dialog.Body className={styles['invite-users-dialog-body']}>
               <Flex direction="column" gap={7}>
@@ -126,17 +126,20 @@ export const InviteUsersDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
                   <Controller
                     name="emails"
                     control={methods.control}
-                    render={({ field }) => (
-                      <TextArea
-                        {...field}
-                        // @ts-expect-error placeholder props not defined in TS
-                        placeholder="abc@example.com, xyz@example.com"
-                        className={styles['invite-users-emails-textarea']}
-                      />
-                    )}
+                    render={({ field }) => {
+                      const { value, ...rest } = field;
+                      return (
+                        <TextArea
+                          {...rest}
+                          value={Array.isArray(value) ? value.join(", ") : (value ?? "") as string}
+                          placeholder="abc@example.com, xyz@example.com"
+                          className={styles['invite-users-emails-textarea']}
+                        />
+                      );
+                    }}
                   />
                   {errors?.emails?.message || errors?.emails?.length ? (
-                    <Text size={1} className={styles['form-error-message']}>
+                    <Text size="mini" className={styles['form-error-message']}>
                       {errors?.emails?.message || errors?.emails?.[0]?.message}
                     </Text>
                   ) : null}
@@ -176,7 +179,7 @@ export const InviteUsersDialog = ({ onOpenChange }: InviteUsersDialogProps) => {
                   />
 
                   {errors?.role?.message && (
-                    <Text size={1} className={styles['form-error-message']}>
+                    <Text size="mini" className={styles['form-error-message']}>
                       {errors?.role?.message}
                     </Text>
                   )}
diff --git a/web/sdk/admin/views/organizations/details/layout/navbar.tsx b/web/sdk/admin/views/organizations/details/layout/navbar.tsx
index 929a490d8..7c5e47248 100644
--- a/web/sdk/admin/views/organizations/details/layout/navbar.tsx
+++ b/web/sdk/admin/views/organizations/details/layout/navbar.tsx
@@ -1,4 +1,4 @@
-import { SidebarIcon, OrganizationIcon } from "@raystack/apsara/icons";
+import { SidebarIcon, OrganizationIcon } from "@raystack/apsara-v1/icons";
 
 import {
   Flex,
@@ -6,13 +6,13 @@ import {
   Breadcrumb,
   Avatar,
   IconButton,
-  DropdownMenu,
+  Menu,
   Chip,
   Spinner,
   getAvatarColor,
-  toast,
+  toastManager,
   Search
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 
 import styles from "./layout.module.css";
 import { DotsHorizontalIcon } from "@radix-ui/react-icons";
@@ -35,7 +35,7 @@ interface navConfig {
 
 const DropdownItem = ({ item }: { item: navConfig }) => {
   return (
-    <DropdownMenu.Item
+    <Menu.Item
       disabled={item.disabled}
       onClick={item?.onClick}
       className={styles["navbar-action-menu-item"]}
@@ -43,7 +43,7 @@ const DropdownItem = ({ item }: { item: navConfig }) => {
     >
       <Text>{item.label}</Text>
       {item.isLoading ? <Spinner size={2} /> : null}
-    </DropdownMenu.Item>
+    </Menu.Item>
   );
 };
 
@@ -90,7 +90,7 @@ const NavbarActionMenu = ({
       setIsMembersDownloading(true);
       await onExportMembers();
     } catch (error) {
-      toast.error("Failed to export members");
+      toastManager.add({ title: "Failed to export members", type: "error" });
       console.error(error);
     } finally {
       setIsMembersDownloading(false);
@@ -104,7 +104,7 @@ const NavbarActionMenu = ({
       setIsProjectsDownloading(true);
       await onExportProjects();
     } catch (error) {
-      toast.error("Failed to export projects");
+      toastManager.add({ title: "Failed to export projects", type: "error" });
       console.error(error);
     } finally {
       setIsProjectsDownloading(false);
@@ -118,7 +118,7 @@ const NavbarActionMenu = ({
       setIsTokensDownloading(true);
       await onExportTokens();
     } catch (error) {
-      toast.error("Failed to export tokens");
+      toastManager.add({ title: "Failed to export tokens", type: "error" });
       console.error(error);
     } finally {
       setIsTokensDownloading(false);
@@ -186,36 +186,36 @@ const NavbarActionMenu = ({
       {isAddTokensDialogOpen ? (
         <AddTokensDialog onOpenChange={setIsAddTokensDialogOpen} />
       ) : null}
-      <DropdownMenu>
-        <DropdownMenu.Trigger asChild>
-          <IconButton size={2} data-test-id="admin-nav-action-menu-button">
-            <DotsHorizontalIcon />
-          </IconButton>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content className={styles["navbar-action-menu-content"]}>
+      <Menu>
+        <Menu.Trigger
+          render={
+            <IconButton size={2} data-test-id="admin-nav-action-menu-button">
+              <DotsHorizontalIcon />
+            </IconButton>
+          }
+        />
+        <Menu.Content className={styles["navbar-action-menu-content"]}>
           {items.map((item) =>
             item?.subItems ? (
-              <DropdownMenu key={item.label}>
-                <DropdownMenu.TriggerItem>
+              <Menu.Submenu key={item.label}>
+                <Menu.SubmenuTrigger>
                   {item.label}
-                </DropdownMenu.TriggerItem>
-                <DropdownMenu.Content>
-                  <DropdownMenu>
-                    {item.subItems.map((subItem) => (
-                      <DropdownItem
-                        item={subItem}
-                        key={`${item.label}---${subItem.label}`}
-                      />
-                    ))}
-                  </DropdownMenu>
-                </DropdownMenu.Content>
-              </DropdownMenu>
+                </Menu.SubmenuTrigger>
+                <Menu.SubmenuContent>
+                  {item.subItems.map((subItem) => (
+                    <DropdownItem
+                      item={subItem}
+                      key={`${item.label}---${subItem.label}`}
+                    />
+                  ))}
+                </Menu.SubmenuContent>
+              </Menu.Submenu>
             ) : (
               <DropdownItem item={item} key={item.label} />
             ),
           )}
-        </DropdownMenu.Content>
-      </DropdownMenu>
+        </Menu.Content>
+      </Menu>
     </>
   );
 };
@@ -253,10 +253,11 @@ const NavLinks = ({
         return (
           <Chip
             key={link.path + i}
-            data-state={isActive ? "active" : ""}
+            data-state={isActive ? "active" : undefined}
             variant={"filled"}
             className={styles["nav-chip"]}
             onClick={() => onNavigate(link.path)}
+            data-test-id={`admin-nav-link-${link.name}`}
           >
             {link.name}
           </Chip>
diff --git a/web/sdk/admin/views/organizations/details/members/columns.tsx b/web/sdk/admin/views/organizations/details/members/columns.tsx
index a102f1926..64da56500 100644
--- a/web/sdk/admin/views/organizations/details/members/columns.tsx
+++ b/web/sdk/admin/views/organizations/details/members/columns.tsx
@@ -4,8 +4,8 @@ import {
   Avatar,
   Flex,
   Text,
-  DropdownMenu,
-} from "@raystack/apsara";
+  Menu,
+} from "@raystack/apsara-v1";
 import type {
   SearchOrganizationUsersResponse_OrganizationUser,
   Role,
@@ -137,25 +137,23 @@ export const getColumns = ({
       },
       cell: ({ row }) => {
         return (
-          <DropdownMenu>
-            <DropdownMenu.Trigger asChild>
-              <DotsHorizontalIcon />
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content className={styles["table-action-dropdown"]}>
-              <DropdownMenu.Item
+          <Menu>
+            <Menu.Trigger render={<DotsHorizontalIcon />} />
+            <Menu.Content className={styles["table-action-dropdown"]}>
+              <Menu.Item
                 onClick={() => handleAssignRoleAction(row.original)}
                 data-test-id="admin-assign-role-action"
               >
                 Assign role...
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
+              </Menu.Item>
+              <Menu.Item
                 onClick={() => handleRemoveMemberAction(row.original)}
                 data-test-id="admin-remove-member-action"
               >
                 Remove...
-              </DropdownMenu.Item>
-            </DropdownMenu.Content>
-          </DropdownMenu>
+              </Menu.Item>
+            </Menu.Content>
+          </Menu>
         );
       },
     },
diff --git a/web/sdk/admin/views/organizations/details/members/index.tsx b/web/sdk/admin/views/organizations/details/members/index.tsx
index d92970259..995a712af 100644
--- a/web/sdk/admin/views/organizations/details/members/index.tsx
+++ b/web/sdk/admin/views/organizations/details/members/index.tsx
@@ -1,5 +1,5 @@
-import { DataTable, EmptyState, Flex } from "@raystack/apsara";
-import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
+import { DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
+import type { DataTableQuery, DataTableSort } from "@raystack/apsara-v1";
 import { PageTitle } from "../../../../components/PageTitle";
 import styles from "./members.module.css";
 import { useContext, useEffect, useMemo, useState } from "react";
diff --git a/web/sdk/admin/views/organizations/details/members/remove-member.tsx b/web/sdk/admin/views/organizations/details/members/remove-member.tsx
index e33b4397d..91a427cfa 100644
--- a/web/sdk/admin/views/organizations/details/members/remove-member.tsx
+++ b/web/sdk/admin/views/organizations/details/members/remove-member.tsx
@@ -5,7 +5,7 @@ import {
 } from "@raystack/proton/frontier";
 import { create } from "@bufbuild/protobuf";
 import { useMutation } from "@connectrpc/connect-query";
-import { Button, Dialog, Flex, Text, toast } from "@raystack/apsara";
+import { Button, Dialog, Flex, Text, toastManager } from "@raystack/apsara-v1";
 import { ConnectError } from "@connectrpc/connect";
 import { useTerminology } from "../../../../hooks/useTerminology";
 
@@ -40,13 +40,13 @@ export const RemoveMember = ({
       if (onRemove) {
         onRemove(user);
       }
-      toast.success(`${t.member({ case: "capital" })} removed successfully`);
+      toastManager.add({ title: `${t.member({ case: "capital" })} removed successfully`, type: "success" });
     } catch (error) {
       const message =
         error instanceof ConnectError
           ? error.message
           : "Unknown error";
-      toast.error(`Failed to remove ${t.member({ case: "lower" })}: ${message}`);
+      toastManager.add({ title: `Failed to remove ${t.member({ case: "lower" })}: ${message}`, type: "error" });
       console.error(error);
     }
   }
@@ -71,16 +71,18 @@ export const RemoveMember = ({
           </Flex>
         </Dialog.Body>
         <Dialog.Footer>
-          <Dialog.Close asChild>
-            <Button
-              type="button"
-              variant="outline"
-              color="neutral"
-              data-test-id="remove-member-cancel-button"
-            >
-              Cancel
-            </Button>
-          </Dialog.Close>
+          <Dialog.Close
+            render={
+              <Button
+                type="button"
+                variant="outline"
+                color="neutral"
+                data-test-id="remove-member-cancel-button"
+              >
+                Cancel
+              </Button>
+            }
+          />
           <Button
             type="submit"
             data-test-id="remove-member-submit-button"
diff --git a/web/sdk/admin/views/organizations/details/pat/columns.tsx b/web/sdk/admin/views/organizations/details/pat/columns.tsx
index 6ae66ee0b..a8d7cbcce 100644
--- a/web/sdk/admin/views/organizations/details/pat/columns.tsx
+++ b/web/sdk/admin/views/organizations/details/pat/columns.tsx
@@ -4,7 +4,7 @@ import {
   getAvatarColor,
   Text,
   type DataTableColumnDef,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import type {
diff --git a/web/sdk/admin/views/organizations/details/pat/components/pat-details-dialog.tsx b/web/sdk/admin/views/organizations/details/pat/components/pat-details-dialog.tsx
index a6f7d0cef..092bd0be1 100644
--- a/web/sdk/admin/views/organizations/details/pat/components/pat-details-dialog.tsx
+++ b/web/sdk/admin/views/organizations/details/pat/components/pat-details-dialog.tsx
@@ -5,7 +5,7 @@ import {
   Skeleton,
   Tabs,
   Text,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import { useQuery } from "@connectrpc/connect-query";
 import {
   FrontierServiceQueries,
@@ -104,12 +104,12 @@ export function PatDetailsDialog({
         <Dialog.Body className={styles["dialog-body"]}>
           <Tabs defaultValue="projects" className={styles["tab-root"]}>
             <Tabs.List>
-              <Tabs.Trigger value="projects">
+              <Tabs.Tab value="projects">
                 {t.project({ plural: true, case: "capital" })} ({projectCount})
-              </Tabs.Trigger>
-              <Tabs.Trigger value="roles">
+              </Tabs.Tab>
+              <Tabs.Tab value="roles">
                 Roles ({roleEntries.length})
-              </Tabs.Trigger>
+              </Tabs.Tab>
             </Tabs.List>
             <Tabs.Content value="projects" className={styles["tab-content"]}>
               {scopeProjects.length === 0 ? null : (
diff --git a/web/sdk/admin/views/organizations/details/pat/index.tsx b/web/sdk/admin/views/organizations/details/pat/index.tsx
index 455ea7b39..d5a5e4bfd 100644
--- a/web/sdk/admin/views/organizations/details/pat/index.tsx
+++ b/web/sdk/admin/views/organizations/details/pat/index.tsx
@@ -1,5 +1,5 @@
-import { DataTable, EmptyState, Flex } from "@raystack/apsara";
-import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
+import { DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
+import type { DataTableQuery, DataTableSort } from "@raystack/apsara-v1";
 import { LockClosedIcon, ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useInfiniteQuery, useQuery } from "@connectrpc/connect-query";
diff --git a/web/sdk/admin/views/organizations/details/projects/columns.tsx b/web/sdk/admin/views/organizations/details/projects/columns.tsx
index 2df65f022..4e4958ee3 100644
--- a/web/sdk/admin/views/organizations/details/projects/columns.tsx
+++ b/web/sdk/admin/views/organizations/details/projects/columns.tsx
@@ -4,9 +4,9 @@ import {
   Avatar,
   Flex,
   Text,
-  DropdownMenu,
-} from "@raystack/apsara";
-import type { DataTableColumnDef } from "@raystack/apsara";
+  Menu,
+} from "@raystack/apsara-v1";
+import type { DataTableColumnDef } from "@raystack/apsara-v1";
 import type {
   SearchOrganizationProjectsResponse_OrganizationProject,
   User,
@@ -30,15 +30,15 @@ import { useTerminology, TerminologyEntity } from "../../../../hooks/useTerminol
 const DropdownLoader = () => {
   return (
     <>
-      <DropdownMenu.Item>
+      <Menu.Item>
         <Skeleton containerClassName={styles["flex1"]} />
-      </DropdownMenu.Item>
-      <DropdownMenu.Item>
+      </Menu.Item>
+      <Menu.Item>
         <Skeleton containerClassName={styles["flex1"]} />
-      </DropdownMenu.Item>
-      <DropdownMenu.Item>
+      </Menu.Item>
+      <Menu.Item>
         <Skeleton containerClassName={styles["flex1"]} />
-      </DropdownMenu.Item>
+      </Menu.Item>
     </>
   );
 };
@@ -60,21 +60,21 @@ function AddMemberDropdown({
 }: AddMemberDropdownProps) {
   const t = useTerminology();
   return (
-    <DropdownMenu
+    <Menu.Submenu
       autocomplete
       autocompleteMode="manual"
-      onSearch={setSearchQuery}
+      onInputValueChange={setSearchQuery}
     >
-      <DropdownMenu.TriggerItem data-test-id="add-members">
+      <Menu.SubmenuTrigger data-test-id="add-members">
         Add {t.member({ case: "lower" })}
-      </DropdownMenu.TriggerItem>
-      <DropdownMenu.Content>
+      </Menu.SubmenuTrigger>
+      <Menu.SubmenuContent>
         {isLoading ? (
           <DropdownLoader />
         ) : (
           <>
             {eligibleMembers?.slice(0, 5).map((user) => (
-              <DropdownMenu.Item
+              <Menu.Item
                 key={user.id}
                 onClick={onAddMember(user?.id || "")}
                 data-test-id={`admin-add-member-${user.id}`}
@@ -88,12 +88,12 @@ function AddMemberDropdown({
                 }
               >
                 <Text>{user.title || user.email}</Text>
-              </DropdownMenu.Item>
+              </Menu.Item>
             ))}
           </>
         )}
-      </DropdownMenu.Content>
-    </DropdownMenu>
+      </Menu.SubmenuContent>
+    </Menu.Submenu>
   );
 }
 
@@ -136,12 +136,12 @@ function ProjectActionsContent({
         isLoading={isLoading}
         setSearchQuery={setSearchQuery}
       />
-      <DropdownMenu.Item
+      <Menu.Item
         onClick={handleRenameOptionClick}
         data-test-id="rename-project"
       >
         Rename {t.project({ case: "lower" })}...
-      </DropdownMenu.Item>
+      </Menu.Item>
     </>
   );
 }
@@ -184,24 +184,23 @@ function ProjectActions({
           onRename={handleProjectUpdate}
         />
       ) : null}
-      <DropdownMenu open={open} onOpenChange={handleOpen}>
-        <DropdownMenu.Trigger asChild>
-          <DotsHorizontalIcon
-            onClick={preventClickBubbling}
-            data-test-id="admin-project-actions"
-          />
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          className={styles["table-action-dropdown"]}
-          unmountOnHide={true}
-        >
+      <Menu open={open} onOpenChange={handleOpen}>
+        <Menu.Trigger
+          render={
+            <DotsHorizontalIcon
+              onClick={preventClickBubbling}
+              data-test-id="admin-project-actions"
+            />
+          }
+        />
+        <Menu.Content className={styles["table-action-dropdown"]}>
           <ProjectActionsContent
             project={project}
             handleProjectUpdate={handleProjectUpdate}
             handleRenameOptionOpen={handleRenameOptionOpen}
           />
-        </DropdownMenu.Content>
-      </DropdownMenu>
+        </Menu.Content>
+      </Menu>
     </>
   );
 }
diff --git a/web/sdk/admin/views/organizations/details/projects/index.tsx b/web/sdk/admin/views/organizations/details/projects/index.tsx
index 7f24dc73d..1b3f87d4d 100644
--- a/web/sdk/admin/views/organizations/details/projects/index.tsx
+++ b/web/sdk/admin/views/organizations/details/projects/index.tsx
@@ -4,7 +4,7 @@ import {
   Flex,
   type DataTableQuery,
   type DataTableSort,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import { PageTitle } from "../../../../components/PageTitle";
 import styles from "./projects.module.css";
 import { useContext, useEffect, useMemo, useState } from "react";
diff --git a/web/sdk/admin/views/organizations/details/projects/members/add-members-dropdown.tsx b/web/sdk/admin/views/organizations/details/projects/members/add-members-dropdown.tsx
index 1f5f26f3b..8b6ffa0b8 100644
--- a/web/sdk/admin/views/organizations/details/projects/members/add-members-dropdown.tsx
+++ b/web/sdk/admin/views/organizations/details/projects/members/add-members-dropdown.tsx
@@ -1,11 +1,11 @@
 import {
   Avatar,
   Button,
-  DropdownMenu,
+  Menu,
   Flex,
   getAvatarColor,
   Text,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import type React from "react";
 import Skeleton from "react-loading-skeleton";
 import styles from "./members.module.css";
@@ -20,9 +20,9 @@ function Loader() {
   return (
     <>
       {[...new Array(5)].map((_, i) => (
-        <DropdownMenu.Item key={i}>
+        <Menu.Item key={i}>
           <Skeleton containerClassName={styles.flex1} />
-        </DropdownMenu.Item>
+        </Menu.Item>
       ))}
     </>
   );
@@ -46,16 +46,17 @@ export function AddMembersDropdown({
   }
 
   return (
-    <DropdownMenu
+    <Menu
       autocomplete
-      placement="bottom-end"
-      onSearch={setSearchQuery}
+      onInputValueChange={setSearchQuery}
       autocompleteMode="manual"
     >
-      <DropdownMenu.Trigger asChild>
-        <Button data-test-id="add-project-member-btn">Add member</Button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content
+      <Menu.Trigger
+        render={<Button data-test-id="add-project-member-btn">Add member</Button>}
+      />
+      <Menu.Content
+        side="bottom"
+        align="end"
         className={styles["add-member-dropdown"]}
         //  @ts-ignore
         portal={false}
@@ -65,7 +66,7 @@ export function AddMembersDropdown({
         ) : (
           <>
             {eligibleMembers?.slice(0, 7).map((user) => (
-              <DropdownMenu.Item
+              <Menu.Item
                 key={user.id}
                 onClick={onAddMember(user?.id || "")}
                 data-test-id={`admin-add-member-${user.id}`}
@@ -82,11 +83,11 @@ export function AddMembersDropdown({
                 <Text className={styles["add-member-dropdown-member-name"]}>
                   {user.title || user.email}
                 </Text>
-              </DropdownMenu.Item>
+              </Menu.Item>
             ))}
           </>
         )}
-      </DropdownMenu.Content>
-    </DropdownMenu>
+      </Menu.Content>
+    </Menu>
   );
 }
diff --git a/web/sdk/admin/views/organizations/details/projects/members/assign-role.tsx b/web/sdk/admin/views/organizations/details/projects/members/assign-role.tsx
index 0fe3e3bbd..459ef4f06 100644
--- a/web/sdk/admin/views/organizations/details/projects/members/assign-role.tsx
+++ b/web/sdk/admin/views/organizations/details/projects/members/assign-role.tsx
@@ -5,8 +5,8 @@ import {
   Flex,
   Label,
   Text,
-  toast,
-} from "@raystack/apsara";
+  toastManager,
+} from "@raystack/apsara-v1";
 import styles from "./members.module.css";
 import type {
   SearchProjectUsersResponse_ProjectUser,
@@ -82,9 +82,9 @@ export const AssignRole = ({
         } as SearchProjectUsersResponse_ProjectUser);
       }
 
-      toast.success("Role assigned successfully");
+      toastManager.add({ title: "Role assigned successfully", type: "success" });
     } catch (error) {
-      toast.error("Failed to assign role");
+      toastManager.add({ title: "Failed to assign role", type: "error" });
       console.error(error);
     }
   };
@@ -93,12 +93,11 @@ export const AssignRole = ({
     <Dialog open onOpenChange={onClose}>
       <Dialog.Content
         width={400}
-        overlayClassName={styles["action-dialog-overlay"]}
+        overlay={{ className: styles["action-dialog-overlay"] }}
         className={styles["action-dialog-content"]}
       >
         <Dialog.Header>
           <Dialog.Title>Assign Role</Dialog.Title>
-          <Dialog.CloseButton data-test-id="assign-role-close-button" />
         </Dialog.Header>
         <form onSubmit={handleSubmit(onSubmit)} noValidate>
           <Dialog.Body>
@@ -136,16 +135,18 @@ export const AssignRole = ({
             </Flex>
           </Dialog.Body>
           <Dialog.Footer>
-            <Dialog.Close asChild>
-              <Button
-                type="button"
-                variant="outline"
-                color="neutral"
-                data-test-id="assign-role-cancel-button"
-              >
-                Cancel
-              </Button>
-            </Dialog.Close>
+            <Dialog.Close
+              render={
+                <Button
+                  type="button"
+                  variant="outline"
+                  color="neutral"
+                  data-test-id="assign-role-cancel-button"
+                >
+                  Cancel
+                </Button>
+              }
+            />
             <Button
               type="submit"
               disabled={!isDirty}
diff --git a/web/sdk/admin/views/organizations/details/projects/members/columns.tsx b/web/sdk/admin/views/organizations/details/projects/members/columns.tsx
index e60fb66c1..e7ca55115 100644
--- a/web/sdk/admin/views/organizations/details/projects/members/columns.tsx
+++ b/web/sdk/admin/views/organizations/details/projects/members/columns.tsx
@@ -5,12 +5,12 @@ import type {
 import styles from "./members.module.css";
 import {
   Avatar,
-  DropdownMenu,
+  Menu,
   Flex,
   getAvatarColor,
   Text,
-} from "@raystack/apsara";
-import type { DataTableColumnDef } from "@raystack/apsara";
+} from "@raystack/apsara-v1";
+import type { DataTableColumnDef } from "@raystack/apsara-v1";
 import { DotsHorizontalIcon } from "@radix-ui/react-icons";
 
 interface getColumnsOptions {
@@ -87,29 +87,29 @@ export const getColumns = ({
       },
       cell: ({ row }) => {
         return (
-          <DropdownMenu placement="bottom-end">
-            <DropdownMenu.Trigger asChild>
-              <DotsHorizontalIcon />
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
+          <Menu>
+            <Menu.Trigger render={<DotsHorizontalIcon />} />
+            <Menu.Content
+              side="bottom"
+              align="end"
               className={styles["table-action-dropdown"]}
               //  @ts-ignore
               portal={false}
             >
-              <DropdownMenu.Item
+              <Menu.Item
                 onClick={() => handleAssignRoleAction(row.original)}
                 data-test-id="admin-assign-role-action"
               >
                 Assign role...
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
+              </Menu.Item>
+              <Menu.Item
                 onClick={() => handleRemoveAction(row.original)}
                 data-test-id="admin-remove-user-action"
               >
                 Remove user...
-              </DropdownMenu.Item>
-            </DropdownMenu.Content>
-          </DropdownMenu>
+              </Menu.Item>
+            </Menu.Content>
+          </Menu>
         );
       },
     },
diff --git a/web/sdk/admin/views/organizations/details/projects/members/index.tsx b/web/sdk/admin/views/organizations/details/projects/members/index.tsx
index fdf2fad6c..8a5dbdb11 100644
--- a/web/sdk/admin/views/organizations/details/projects/members/index.tsx
+++ b/web/sdk/admin/views/organizations/details/projects/members/index.tsx
@@ -1,5 +1,5 @@
-import { DataTable, Dialog, EmptyState, Flex } from "@raystack/apsara";
-import type { DataTableQuery } from "@raystack/apsara";
+import { DataTable, Dialog, EmptyState, Flex } from "@raystack/apsara-v1";
+import type { DataTableQuery } from "@raystack/apsara-v1";
 import { useCallback, useMemo, useState } from "react";
 import Skeleton from "react-loading-skeleton";
 import {
@@ -12,7 +12,7 @@ import {
 } from "@raystack/proton/frontier";
 import { create } from "@bufbuild/protobuf";
 import { useQuery, useInfiniteQuery } from "@connectrpc/connect-query";
-import { useDebouncedState } from "@raystack/apsara/hooks";
+import { useDebouncedState } from "@raystack/apsara-v1/hooks";
 import styles from "./members.module.css";
 import { UsersIcon } from "../../../../../assets/icons/UsersIcon";
 import { getColumns } from "./columns";
@@ -243,7 +243,7 @@ export const ProjectMembersDialog = ({
                 gap={5}
                 className={styles["table-content-wrapper"]}
               >
-                <Flex>
+                <Flex gap={4} align="center">
                   <DataTable.Search className={styles["table-search"]} />
                   <AddMembersDropdown
                     projectId={projectId}
diff --git a/web/sdk/admin/views/organizations/details/projects/members/members.module.css b/web/sdk/admin/views/organizations/details/projects/members/members.module.css
index c56a690e1..74bfa3544 100644
--- a/web/sdk/admin/views/organizations/details/projects/members/members.module.css
+++ b/web/sdk/admin/views/organizations/details/projects/members/members.module.css
@@ -53,10 +53,6 @@
     min-width: 150px;
 }
 
-.action-dialog-overlay {
-    z-index: 10001;
-}
-
 .action-dialog-content {
     z-index: 10002;
 }
diff --git a/web/sdk/admin/views/organizations/details/projects/members/remove-member.tsx b/web/sdk/admin/views/organizations/details/projects/members/remove-member.tsx
index de3cbcc01..8519c2353 100644
--- a/web/sdk/admin/views/organizations/details/projects/members/remove-member.tsx
+++ b/web/sdk/admin/views/organizations/details/projects/members/remove-member.tsx
@@ -8,7 +8,7 @@ import { create } from "@bufbuild/protobuf";
 import { useMutation } from "@connectrpc/connect-query";
 import styles from "./members.module.css";
 
-import { Button, Dialog, Flex, Text, toast } from "@raystack/apsara";
+import { Button, Dialog, Flex, Text, toastManager } from "@raystack/apsara-v1";
 import { useTerminology } from "../../../../../hooks/useTerminology";
 
 interface RemoveMemberProps {
@@ -47,9 +47,9 @@ export const RemoveMember = ({
         onRemove(user);
       }
 
-      toast.success(`${t.member({ case: "capital" })} removed successfully`);
+      toastManager.add({ title: `${t.member({ case: "capital" })} removed successfully`, type: "success" });
     } catch (error) {
-      toast.error(`Failed to remove ${t.member({ case: "lower" })}`);
+      toastManager.add({ title: `Failed to remove ${t.member({ case: "lower" })}`, type: "error" });
       console.error(error);
     } finally {
       setIsSubmitting(false);
@@ -60,12 +60,11 @@ export const RemoveMember = ({
     <Dialog open onOpenChange={onClose}>
       <Dialog.Content
         width={400}
-        overlayClassName={styles["action-dialog-overlay"]}
+        overlay={{ className: styles["action-dialog-overlay"] }}
         className={styles["action-dialog-content"]}
       >
         <Dialog.Header>
           <Dialog.Title>Remove {t.member({ case: "capital" })}</Dialog.Title>
-          <Dialog.CloseButton data-test-id="remove-member-close-button" />
         </Dialog.Header>
         <Dialog.Body>
           <Flex direction="column" gap={7}>
@@ -80,16 +79,18 @@ export const RemoveMember = ({
           </Flex>
         </Dialog.Body>
         <Dialog.Footer>
-          <Dialog.Close asChild>
-            <Button
-              type="button"
-              variant="outline"
-              color="neutral"
-              data-test-id="remove-member-cancel-button"
-            >
-              Cancel
-            </Button>
-          </Dialog.Close>
+          <Dialog.Close
+            render={
+              <Button
+                type="button"
+                variant="outline"
+                color="neutral"
+                data-test-id="remove-member-cancel-button"
+              >
+                Cancel
+              </Button>
+            }
+          />
           <Button
             type="submit"
             data-test-id="remove-member-submit-button"
diff --git a/web/sdk/admin/views/organizations/details/projects/rename-project.tsx b/web/sdk/admin/views/organizations/details/projects/rename-project.tsx
index 6fc213694..e9ab130c9 100644
--- a/web/sdk/admin/views/organizations/details/projects/rename-project.tsx
+++ b/web/sdk/admin/views/organizations/details/projects/rename-project.tsx
@@ -1,4 +1,4 @@
-import { Button, Dialog, Flex, InputField, toast } from "@raystack/apsara";
+import { Button, Dialog, Field, Flex, Input, toastManager } from "@raystack/apsara-v1";
 import {
   FrontierServiceQueries,
   UpdateProjectRequestSchema,
@@ -66,7 +66,7 @@ export function RenameProjectDialog({
       const newProject = resp.project;
 
       if (newProject) {
-        toast.success(`${t.project({ case: "capital" })} renamed successfully`);
+        toastManager.add({ title: `${t.project({ case: "capital" })} renamed successfully`, type: "success" });
         onRename({
           ...project,
           title: newProject.title,
@@ -74,7 +74,7 @@ export function RenameProjectDialog({
         });
       }
     } catch (error) {
-      toast.error(`Failed to rename ${t.project({ case: "lower" })}`);
+      toastManager.add({ title: `Failed to rename ${t.project({ case: "lower" })}`, type: "error" });
       console.error(error);
     }
   };
@@ -89,7 +89,6 @@ export function RenameProjectDialog({
         <form onSubmit={handleSubmit(submit)}>
           <Dialog.Header>
             <Dialog.Title>Rename {t.project({ case: "capital" })}</Dialog.Title>
-            <Dialog.CloseButton data-test-id="rename-project-close-button" />
           </Dialog.Header>
           <Dialog.Body>
             <Flex direction="column" gap={5}>
@@ -97,27 +96,30 @@ export function RenameProjectDialog({
                 name="title"
                 control={control}
                 render={({ field }) => (
-                  <InputField
-                    {...field}
-                    label={`${t.project({ case: "capital" })} name`}
-                    placeholder={`${t.project({ case: "capital" })} name`}
-                    data-test-id="rename-project-title-input"
-                  />
+                  <Field label={`${t.project({ case: "capital" })} name`}>
+                    <Input
+                      {...field}
+                      placeholder={`${t.project({ case: "capital" })} name`}
+                      data-test-id="rename-project-title-input"
+                    />
+                  </Field>
                 )}
               />
             </Flex>
           </Dialog.Body>
           <Dialog.Footer>
-            <Dialog.Close asChild>
-              <Button
-                type="button"
-                variant="outline"
-                color="neutral"
-                data-test-id="rename-project-cancel-button"
-              >
-                Cancel
-              </Button>
-            </Dialog.Close>
+            <Dialog.Close
+              render={
+                <Button
+                  type="button"
+                  variant="outline"
+                  color="neutral"
+                  data-test-id="rename-project-cancel-button"
+                >
+                  Cancel
+                </Button>
+              }
+            />
             <Button
               type="submit"
               data-test-id="rename-project-update-button"
diff --git a/web/sdk/admin/views/organizations/details/projects/use-add-project-members.tsx b/web/sdk/admin/views/organizations/details/projects/use-add-project-members.tsx
index 5cadaddc6..9c882c1ab 100644
--- a/web/sdk/admin/views/organizations/details/projects/use-add-project-members.tsx
+++ b/web/sdk/admin/views/organizations/details/projects/use-add-project-members.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useContext, useMemo, useState } from "react";
 import { OrganizationContext } from "../contexts/organization-context";
-import { toast } from "@raystack/apsara";
+import { toastManager } from "@raystack/apsara-v1";
 import { DEFAULT_ROLES, SCOPES } from "~/admin/utils/constants";
 import { useQuery, useMutation } from "@connectrpc/connect-query";
 import { FrontierServiceQueries, ListProjectUsersRequestSchema, ListRolesRequestSchema, SetProjectMemberRoleRequestSchema } from "@raystack/proton/frontier";
@@ -78,15 +78,15 @@ export function useAddProjectMembers({ projectId }: useAddProjectMembersProps) {
             roleId: viewerRoleId,
           }),
         );
-        toast.success(`${memberLabel} added`);
+        toastManager.add({ title: `${memberLabel} added`, type: "success" });
         await refetch();
         return projectMembers;
       } catch (error: unknown) {
         handleConnectError(error, {
-          AlreadyExists: () => toast.error(`${memberLabel} already exists in this project`),
-          PermissionDenied: () => toast.error("You don't have permission to perform this action"),
-          InvalidArgument: (err) => toast.error('Invalid input', { description: err.message }),
-          Default: (err) => toast.error('Something went wrong', { description: err.message }),
+          AlreadyExists: () => toastManager.add({ title: `${memberLabel} already exists in this project`, type: "error" }),
+          PermissionDenied: () => toastManager.add({ title: "You don't have permission to perform this action", type: "error" }),
+          InvalidArgument: (err) => toastManager.add({ title: 'Invalid input', description: err.message, type: "error" }),
+          Default: (err) => toastManager.add({ title: 'Something went wrong', description: err.message, type: "error" }),
         });
       }
     },
diff --git a/web/sdk/admin/views/organizations/details/security/block-organization.tsx b/web/sdk/admin/views/organizations/details/security/block-organization.tsx
index ac165c448..59669a652 100644
--- a/web/sdk/admin/views/organizations/details/security/block-organization.tsx
+++ b/web/sdk/admin/views/organizations/details/security/block-organization.tsx
@@ -1,4 +1,4 @@
-import { Button, Dialog, Flex, Text, toast } from "@raystack/apsara";
+import { Button, Dialog, Flex, Text, toastManager } from "@raystack/apsara-v1";
 import { useContext, useState } from "react";
 import { OrganizationStatus } from "../types";
 import { OrganizationContext } from "../contexts/organization-context";
@@ -40,11 +40,13 @@ const BlockOrganizationDialog = () => {
           }),
         });
         setIsDialogOpen(false);
-        toast.success(`${t.organization({ case: "capital" })} blocked`);
+        toastManager.add({ title: `${t.organization({ case: "capital" })} blocked`, type: "success" });
       },
       onError: (error) => {
-        toast.error("Something went wrong", {
+        toastManager.add({
+          title: "Something went wrong",
           description: error.message,
+          type: "error",
         });
         console.error("Failed to block organization:", error);
       },
@@ -64,11 +66,13 @@ const BlockOrganizationDialog = () => {
           }),
         });
         setIsDialogOpen(false);
-        toast.success(`${t.organization({ case: "capital" })} unblocked`);
+        toastManager.add({ title: `${t.organization({ case: "capital" })} unblocked`, type: "success" });
       },
       onError: (error) => {
-        toast.error("Something went wrong", {
+        toastManager.add({
+          title: "Something went wrong",
           description: error.message,
+          type: "error",
         });
         console.error("Failed to unblock organization:", error);
       },
@@ -122,16 +126,18 @@ const BlockOrganizationDialog = () => {
 
   return (
     <Dialog open={isDialogOpen} onOpenChange={onOpenChange}>
-      <Dialog.Trigger asChild>
-        <Button
-          color={componentConfig.btnColor}
-          size="small"
-          data-test-id="block-orgnanization-button"
-        >
-          {componentConfig.btnText}
-        </Button>
-      </Dialog.Trigger>
-      <Dialog.Content width={400} ariaLabel="Block Organization">
+      <Dialog.Trigger
+        render={
+          <Button
+            color={componentConfig.btnColor}
+            size="small"
+            data-test-id="block-orgnanization-button"
+          >
+            {componentConfig.btnText}
+          </Button>
+        }
+      />
+      <Dialog.Content width={400} aria-label="Block Organization">
         <Dialog.Body>
           <Dialog.Title>{componentConfig.dialogTitle}</Dialog.Title>
           <Dialog.Description>
@@ -139,15 +145,17 @@ const BlockOrganizationDialog = () => {
           </Dialog.Description>
         </Dialog.Body>
         <Dialog.Footer>
-          <Dialog.Close asChild>
-            <Button
-              color="neutral"
-              variant="outline"
-              data-test-id="block-organization-cancel-button"
-            >
-              {componentConfig.dialogCancelText}
-            </Button>
-          </Dialog.Close>
+          <Dialog.Close
+            render={
+              <Button
+                color="neutral"
+                variant="outline"
+                data-test-id="block-organization-cancel-button"
+              >
+                {componentConfig.dialogCancelText}
+              </Button>
+            }
+          />
           <Button
             color={componentConfig.btnColor}
             data-test-id="block-organization-submit-button"
@@ -167,8 +175,8 @@ export const BlockOrganizationSection = () => {
   return (
     <Flex gap={5} justify="between">
       <Flex direction="column" gap={3}>
-        <Text size={5}>Block organization</Text>
-        <Text size={3} variant="secondary">
+        <Text size="large">Block organization</Text>
+        <Text size="small" variant="secondary">
           Restrict access to safeguard platform integrity and prevent
           unauthorized activities.
         </Text>
diff --git a/web/sdk/admin/views/organizations/details/security/domains-list.tsx b/web/sdk/admin/views/organizations/details/security/domains-list.tsx
index 31610472c..c7b13858e 100644
--- a/web/sdk/admin/views/organizations/details/security/domains-list.tsx
+++ b/web/sdk/admin/views/organizations/details/security/domains-list.tsx
@@ -4,8 +4,8 @@ import {
   Flex,
   IconButton,
   Text,
-  toast,
-} from "@raystack/apsara";
+  toastManager,
+} from "@raystack/apsara-v1";
 import styles from "./security.module.css";
 import { CheckCircledIcon, TrashIcon } from "@radix-ui/react-icons";
 import Skeleton from "react-loading-skeleton";
@@ -41,11 +41,13 @@ const DeleteDomainDialog = ({
           }),
         });
         setIsDialogOpen(false);
-        toast.success("Domain deleted");
+        toastManager.add({ title: "Domain deleted", type: "success" });
       },
       onError: (error) => {
-        toast.error("Something went wrong", {
+        toastManager.add({
+          title: "Something went wrong",
           description: error.message,
+          type: "error",
         });
         console.error("Unable to delete domain:", error);
       },
@@ -67,11 +69,13 @@ const DeleteDomainDialog = ({
 
   return (
     <Dialog open={isDialogOpen} onOpenChange={onOpenChange}>
-      <Dialog.Trigger asChild>
-        <IconButton size={3} data-test-id="delete-domain-button">
-          <TrashIcon />
-        </IconButton>
-      </Dialog.Trigger>
+      <Dialog.Trigger
+        render={
+          <IconButton size={3} data-test-id="delete-domain-button">
+            <TrashIcon />
+          </IconButton>
+        }
+      />
       <Dialog.Content width={400}>
         <Dialog.Body>
           <Dialog.Title>Delete email domain</Dialog.Title>
@@ -80,15 +84,17 @@ const DeleteDomainDialog = ({
           </Dialog.Description>
         </Dialog.Body>
         <Dialog.Footer>
-          <Dialog.Close asChild>
-            <Button
-              color="neutral"
-              variant="outline"
-              data-test-id="delete-domain-cancel-button"
-            >
-              Cancel
-            </Button>
-          </Dialog.Close>
+          <Dialog.Close
+            render={
+              <Button
+                color="neutral"
+                variant="outline"
+                data-test-id="delete-domain-cancel-button"
+              >
+                Cancel
+              </Button>
+            }
+          />
           <Button
             color={"danger"}
             data-test-id="delete-domain-submit-button"
@@ -112,7 +118,7 @@ const DomainItem = ({ domain }: DomainItemProps) => {
   return (
     <Flex className={styles["domains-list-item"]} justify="between">
       <Flex gap={3}>
-        <Text size={3}>{domain?.name}</Text>
+        <Text size="small">{domain?.name}</Text>
         {domain.state === "verified" ? (
           <CheckCircledIcon
             color={"var(--rs-color-foreground-success-primary)"}
diff --git a/web/sdk/admin/views/organizations/details/security/index.tsx b/web/sdk/admin/views/organizations/details/security/index.tsx
index 9359d2383..06c74965b 100644
--- a/web/sdk/admin/views/organizations/details/security/index.tsx
+++ b/web/sdk/admin/views/organizations/details/security/index.tsx
@@ -5,8 +5,8 @@ import {
   Separator,
   Text,
   Tooltip,
-  toast,
-} from "@raystack/apsara";
+  toastManager,
+} from "@raystack/apsara-v1";
 
 import styles from './security.module.css';
 import { PlusIcon } from '@radix-ui/react-icons';
@@ -27,23 +27,28 @@ const AddDomainSection = () => {
   return (
     <Flex gap={5} justify="between">
       <Flex direction="column" gap={3}>
-        <Text size={5}>Allowed email domains</Text>
-        <Text size={3} variant="secondary">
+        <Text size="large">Allowed email domains</Text>
+        <Text size="small" variant="secondary">
           Anyone with an email address at these domains is allowed to sign up
           for this workspace.
         </Text>
       </Flex>
-      <Tooltip message="Coming soon">
-        <Button
-          variant="outline"
-          color="neutral"
-          leadingIcon={<PlusIcon />}
-          size="small"
-          data-test-id="add-domain-button"
-          disabled={true}
-        >
-          Add domain
-        </Button>
+      <Tooltip>
+        <Tooltip.Trigger
+          render={
+            <Button
+              variant="outline"
+              color="neutral"
+              leadingIcon={<PlusIcon />}
+              size="small"
+              data-test-id="add-domain-button"
+              disabled={true}
+            >
+              Add domain
+            </Button>
+          }
+        />
+        <Tooltip.Content>Coming soon</Tooltip.Content>
       </Tooltip>
     </Flex>
   );
@@ -65,8 +70,10 @@ export const OrganizationSecurity = () => {
 
   useEffect(() => {
     if (error) {
-      toast.error("Something went wrong", {
+      toastManager.add({
+        title: "Something went wrong",
         description: "Unable to fetch domains",
+        type: "error",
       });
       console.error("Unable to fetch domains:", error);
     }
diff --git a/web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx b/web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx
index d296f9208..d4f05bf8b 100644
--- a/web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx
+++ b/web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx
@@ -1,10 +1,10 @@
-import { CopyButton, Flex, Link, List, Text } from "@raystack/apsara";
+import { CopyButton, Flex, Link, List, Text } from "@raystack/apsara-v1";
 import styles from "./side-panel.module.css";
 import { convertBillingAddressToString } from "../../../../utils/helper";
 import Skeleton from "react-loading-skeleton";
 import { useContext, useEffect } from "react";
 import { CalendarIcon } from "@radix-ui/react-icons";
-import { Amount } from "@raystack/apsara";
+import { Amount } from "@raystack/apsara-v1";
 import { OrganizationContext } from "../contexts/organization-context";
 import { useQuery } from "@connectrpc/connect-query";
 import { FrontierServiceQueries, GetUpcomingInvoiceRequestSchema } from "@raystack/proton/frontier";
diff --git a/web/sdk/admin/views/organizations/details/side-panel/index.tsx b/web/sdk/admin/views/organizations/details/side-panel/index.tsx
index 7c0bde4a8..f794c11f5 100644
--- a/web/sdk/admin/views/organizations/details/side-panel/index.tsx
+++ b/web/sdk/admin/views/organizations/details/side-panel/index.tsx
@@ -1,4 +1,4 @@
-import { Avatar, getAvatarColor, SidePanel } from "@raystack/apsara";
+import { Avatar, getAvatarColor, SidePanel } from "@raystack/apsara-v1";
 import { OrganizationDetailsSection } from "./org-details-section";
 import { KYCDetailsSection } from "./kyc-section";
 import { PlanDetailsSection } from "./plan-details-section";
@@ -23,7 +23,7 @@ export function OrgSidePanel({ organization }: SidePanelProps) {
   const t = useTerminology();
   const avatarColor = getAvatarColor(organization?.id || "");
   return (
-    <SidePanel data-test-id="admin-sidepanel">
+    <SidePanel data-test-id="admin-sidepanel" style={{ height: "100%" }}>
       <SidePanel.Header
         title={organization?.title || t.organization({ case: "capital" })}
         icon={
diff --git a/web/sdk/admin/views/organizations/details/side-panel/kyc-section.tsx b/web/sdk/admin/views/organizations/details/side-panel/kyc-section.tsx
index ef625f28c..f722c1458 100644
--- a/web/sdk/admin/views/organizations/details/side-panel/kyc-section.tsx
+++ b/web/sdk/admin/views/organizations/details/side-panel/kyc-section.tsx
@@ -1,11 +1,11 @@
-import { Flex, List, Text, Link, Tooltip } from "@raystack/apsara";
+import { Flex, List, Text, Link, Tooltip } from "@raystack/apsara-v1";
 import { useContext } from "react";
 import styles from "./side-panel.module.css";
 import Skeleton from "react-loading-skeleton";
 import {
   CheckCircleFilledIcon,
   CrossCircleFilledIcon,
-} from "@raystack/apsara/icons";
+} from "@raystack/apsara-v1/icons";
 import { Link2Icon } from "@radix-ui/react-icons";
 import { OrganizationContext } from "../contexts/organization-context";
 
@@ -52,15 +52,20 @@ export const KYCDetailsSection = () => {
               {kycDetails?.link ? (
                 <>
                   <Link2Icon />
-                  <Tooltip message={kycDetails?.link}>
-                    <Link
-                      href={kycDetails?.link}
-                      target="_blank"
-                      data-test-id="kyc-link"
-                      className={styles["kyc_link"]}
-                    >
-                      {kycDetails?.link}
-                    </Link>
+                  <Tooltip>
+                    <Tooltip.Trigger
+                      render={
+                        <Link
+                          href={kycDetails?.link}
+                          target="_blank"
+                          data-test-id="kyc-link"
+                          className={styles["kyc_link"]}
+                        >
+                          {kycDetails?.link}
+                        </Link>
+                      }
+                    />
+                    <Tooltip.Content>{kycDetails?.link}</Tooltip.Content>
                   </Tooltip>
                 </>
               ) : (
diff --git a/web/sdk/admin/views/organizations/details/side-panel/org-details-section.tsx b/web/sdk/admin/views/organizations/details/side-panel/org-details-section.tsx
index d100edee6..b942a01cf 100644
--- a/web/sdk/admin/views/organizations/details/side-panel/org-details-section.tsx
+++ b/web/sdk/admin/views/organizations/details/side-panel/org-details-section.tsx
@@ -1,5 +1,5 @@
 import { CalendarIcon } from "@radix-ui/react-icons";
-import { Flex, List, Text, CopyButton, Tooltip } from "@raystack/apsara";
+import { Flex, List, Text, CopyButton, Tooltip } from "@raystack/apsara-v1";
 import styles from "./side-panel.module.css";
 import dayjs from "dayjs";
 import { useContext } from "react";
@@ -41,10 +41,15 @@ export const OrganizationDetailsSection = ({
               text={organization.id || ""}
               data-test-id="copy-button"
             />
-            <Tooltip message={organization.id}>
-              <Text className={styles["org-details-section-org-id"]}>
-                {organization.id}
-              </Text>
+            <Tooltip>
+              <Tooltip.Trigger
+                render={
+                  <Text className={styles["org-details-section-org-id"]}>
+                    {organization.id}
+                  </Text>
+                }
+              />
+              <Tooltip.Content>{organization.id}</Tooltip.Content>
             </Tooltip>
           </Flex>
         </List.Value>
diff --git a/web/sdk/admin/views/organizations/details/side-panel/plan-details-section.tsx b/web/sdk/admin/views/organizations/details/side-panel/plan-details-section.tsx
index 7a570f75d..9699d07b6 100644
--- a/web/sdk/admin/views/organizations/details/side-panel/plan-details-section.tsx
+++ b/web/sdk/admin/views/organizations/details/side-panel/plan-details-section.tsx
@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { List, Text, Flex } from "@raystack/apsara";
+import { List, Text, Flex } from "@raystack/apsara-v1";
 import styles from "./side-panel.module.css";
 import { CalendarIcon } from "@radix-ui/react-icons";
 import Skeleton from "react-loading-skeleton";
diff --git a/web/sdk/admin/views/organizations/details/side-panel/tokens-details-section.tsx b/web/sdk/admin/views/organizations/details/side-panel/tokens-details-section.tsx
index cc5027e30..463c018d4 100644
--- a/web/sdk/admin/views/organizations/details/side-panel/tokens-details-section.tsx
+++ b/web/sdk/admin/views/organizations/details/side-panel/tokens-details-section.tsx
@@ -1,5 +1,5 @@
-import { List, Text, Flex } from "@raystack/apsara";
-import { CoinIcon, CoinColoredIcon } from "@raystack/apsara/icons";
+import { List, Text, Flex } from "@raystack/apsara-v1";
+import { CoinIcon, CoinColoredIcon } from "@raystack/apsara-v1/icons";
 import styles from "./side-panel.module.css";
 import { useContext, useEffect } from "react";
 import Skeleton from "react-loading-skeleton";
diff --git a/web/sdk/admin/views/organizations/details/tokens/columns.tsx b/web/sdk/admin/views/organizations/details/tokens/columns.tsx
index d64c4f1a6..4497499d9 100644
--- a/web/sdk/admin/views/organizations/details/tokens/columns.tsx
+++ b/web/sdk/admin/views/organizations/details/tokens/columns.tsx
@@ -8,7 +8,7 @@ import {
   getAvatarColor,
   Text,
   Tooltip,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import type {
   SearchOrganizationTokensResponse_OrganizationToken,
 } from "@raystack/proton/frontier";
@@ -70,8 +70,11 @@ export const getColumns = ({ t }: GetColumnsOptions): DataTableColumnDef<
         const text = (getValue() as string) ?? "";
         if (!text) return text;
         return (
-          <Tooltip message={text} delayDuration={500}>
-            <span className={styles["truncate-text"]}>{text}</span>
+          <Tooltip>
+            <Tooltip.Trigger
+              render={<span className={styles["truncate-text"]}>{text}</span>}
+            />
+            <Tooltip.Content>{text}</Tooltip.Content>
           </Tooltip>
         );
       },
diff --git a/web/sdk/admin/views/organizations/details/tokens/index.tsx b/web/sdk/admin/views/organizations/details/tokens/index.tsx
index 95e35896b..4cd4ad1d0 100644
--- a/web/sdk/admin/views/organizations/details/tokens/index.tsx
+++ b/web/sdk/admin/views/organizations/details/tokens/index.tsx
@@ -1,7 +1,7 @@
-import { DataTable, EmptyState, Flex } from "@raystack/apsara";
-import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
+import { DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
+import type { DataTableQuery, DataTableSort } from "@raystack/apsara-v1";
 import styles from "./tokens.module.css";
-import { CoinIcon } from "@raystack/apsara/icons";
+import { CoinIcon } from "@raystack/apsara-v1/icons";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { OrganizationContext } from "../contexts/organization-context";
diff --git a/web/sdk/admin/views/organizations/list/columns.tsx b/web/sdk/admin/views/organizations/list/columns.tsx
index b3b57abeb..8ce98f291 100644
--- a/web/sdk/admin/views/organizations/list/columns.tsx
+++ b/web/sdk/admin/views/organizations/list/columns.tsx
@@ -5,7 +5,7 @@ import {
   Flex,
   getAvatarColor,
   Text,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import type {
   SearchOrganizationsResponse_OrganizationResult,
   Plan,
diff --git a/web/sdk/admin/views/organizations/list/create.tsx b/web/sdk/admin/views/organizations/list/create.tsx
index e44260d3e..11ffa851e 100644
--- a/web/sdk/admin/views/organizations/list/create.tsx
+++ b/web/sdk/admin/views/organizations/list/create.tsx
@@ -3,15 +3,16 @@ import styles from "./list.module.css";
 import { useTerminology } from "../../../hooks/useTerminology";
 import {
   Button,
+  Field,
   Flex,
   IconButton,
-  InputField,
+  Input,
   Select,
-  Sheet,
+  Drawer,
   SidePanel,
   Text,
   Label,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import { Cross1Icon } from "@radix-ui/react-icons";
 import { AvatarUpload } from "../../../../react/components/avatar-upload";
 import { z } from "zod";
@@ -126,8 +127,8 @@ export function CreateOrganizationPanel({
   const showOtherTypeField = watch("type", "other") === "other";
 
   return (
-    <Sheet open>
-      <Sheet.Content className={styles["drawer-content"]}>
+    <Drawer open>
+      <Drawer.Content showCloseButton={false} className={styles["drawer-content"]}>
         <SidePanel
           data-test-id="edit-org-panel"
           className={styles["side-panel"]}
@@ -161,7 +162,7 @@ export function CreateOrganizationPanel({
                     <>
                       <Flex
                         align="center"
-                        gap="medium"
+                        gap={5}
                         style={{ width: "100%" }}
                       >
                         <AvatarUpload {...field} data-test-id="avatar-upload" />
@@ -171,25 +172,28 @@ export function CreateOrganizationPanel({
                   );
                 }}
               />
-              <InputField {...register("title")} label={`${t.organization({ case: "capital" })} title`} />
-              <InputField
-                {...register("orgOwnerEmail")}
+              <Field label={`${t.organization({ case: "capital" })} title`}>
+                <Input {...register("title")} />
+              </Field>
+              <Field
                 label={`${t.organization({ case: "capital" })} owner`}
                 error={errors.orgOwnerEmail?.message}
-              />
-              <InputField
-                {...register("name")}
-                prefix={appUrl}
+              >
+                <Input {...register("orgOwnerEmail")} />
+              </Field>
+              <Field
                 label={`${t.organization({ case: "capital" })} URL`}
-                helperText={`This will be your ${t.organization({ case: "lower" })} unique web address`}
+                description={`This will be your ${t.organization({ case: "lower" })} unique web address`}
                 error={errors.name?.message}
-              />
-              <InputField
-                {...register("size")}
-                type="number"
+              >
+                <Input {...register("name")} prefix={appUrl} />
+              </Field>
+              <Field
                 label={`${t.organization({ case: "capital" })} size`}
                 error={errors.size?.message}
-              />
+              >
+                <Input {...register("size")} type="number" />
+              </Field>
               <Controller
                 name="type"
                 control={control}
@@ -209,7 +213,6 @@ export function CreateOrganizationPanel({
                         <Select.Trigger>
                           <Select.Value
                             placeholder="Select an industry"
-                            className={styles["select-value"]}
                             id="org-type-select"
                           />
                         </Select.Trigger>
@@ -227,11 +230,12 @@ export function CreateOrganizationPanel({
                 }}
               />
               {showOtherTypeField ? (
-                <InputField
+                <Field
                   label={`${t.organization({ case: "capital" })} industry (other)`}
-                  {...register("otherType")}
                   error={errors.otherType?.message}
-                />
+                >
+                  <Input {...register("otherType")} />
+                </Field>
               ) : null}
               <Controller
                 name="country"
@@ -251,7 +255,6 @@ export function CreateOrganizationPanel({
                         <Select.Trigger>
                           <Select.Value
                             placeholder="Select a country"
-                            className={styles["select-value"]}
                             id="country-select"
                           />
                         </Select.Trigger>
@@ -288,7 +291,7 @@ export function CreateOrganizationPanel({
             </Flex>
           </form>
         </SidePanel>
-      </Sheet.Content>
-    </Sheet>
+      </Drawer.Content>
+    </Drawer>
   );
 }
diff --git a/web/sdk/admin/views/organizations/list/index.tsx b/web/sdk/admin/views/organizations/list/index.tsx
index ea42216a9..bd563e53f 100644
--- a/web/sdk/admin/views/organizations/list/index.tsx
+++ b/web/sdk/admin/views/organizations/list/index.tsx
@@ -1,5 +1,5 @@
-import { DataTable, EmptyState, Flex, type DataTableQuery, type DataTableSort } from "@raystack/apsara";
-import { OrganizationIcon } from "@raystack/apsara/icons";
+import { DataTable, EmptyState, Flex, type DataTableQuery, type DataTableSort } from "@raystack/apsara-v1";
+import { OrganizationIcon } from "@raystack/apsara-v1/icons";
 import { useEffect, useState } from "react";
 import { OrganizationsNavabar } from "./navbar";
 import styles from "./list.module.css";
@@ -23,7 +23,7 @@ import {
 } from "~/utils/connect-pagination";
 import { transformDataTableQueryToRQLRequest } from "~/utils/transform-query";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
-import { useDebouncedState } from "@raystack/apsara/hooks";
+import { useDebouncedState } from "@raystack/apsara-v1/hooks";
 import { useTerminology } from "../../../hooks/useTerminology";
 
 const NoOrganizations = () => {
diff --git a/web/sdk/admin/views/organizations/list/list.module.css b/web/sdk/admin/views/organizations/list/list.module.css
index cc9fd4554..91d53154e 100644
--- a/web/sdk/admin/views/organizations/list/list.module.css
+++ b/web/sdk/admin/views/organizations/list/list.module.css
@@ -80,10 +80,6 @@
   padding: var(--rs-space-5) var(--rs-space-7);
 }
 
-.select-value {
-  width: 100%;
-}
-
 .select-content {
   max-height: 400px;
 }
diff --git a/web/sdk/admin/views/organizations/list/navbar.tsx b/web/sdk/admin/views/organizations/list/navbar.tsx
index d41f56cd7..fd63c3ff4 100644
--- a/web/sdk/admin/views/organizations/list/navbar.tsx
+++ b/web/sdk/admin/views/organizations/list/navbar.tsx
@@ -6,8 +6,8 @@ import {
   Separator,
   IconButton,
   Spinner,
-} from "@raystack/apsara";
-import { OrganizationIcon } from "@raystack/apsara/icons";
+} from "@raystack/apsara-v1";
+import { OrganizationIcon } from "@raystack/apsara-v1/icons";
 import styles from "./list.module.css";
 import {
   DownloadIcon,
@@ -59,7 +59,7 @@ export const OrganizationsNavabar = ({
     <nav className={styles.navbar}>
       <Flex gap={2}>
         <OrganizationIcon />
-        <Text size={2} weight={500}>
+        <Text size="small" weight="medium">
           {t.organization({ plural: true, case: "capital" })}
         </Text>
       </Flex>
diff --git a/web/sdk/admin/views/plans/columns.tsx b/web/sdk/admin/views/plans/columns.tsx
index e2da52e07..c32b040e6 100644
--- a/web/sdk/admin/views/plans/columns.tsx
+++ b/web/sdk/admin/views/plans/columns.tsx
@@ -1,4 +1,4 @@
-import { Text, type DataTableColumnDef } from "@raystack/apsara";
+import { Text, type DataTableColumnDef } from "@raystack/apsara-v1";
 import type { Plan } from "@raystack/proton/frontier";
 import { timestampToDate, type TimeStamp } from "../../utils/connect-timestamp";
 
diff --git a/web/sdk/admin/views/plans/details.tsx b/web/sdk/admin/views/plans/details.tsx
index b41f7c985..d60a9429e 100644
--- a/web/sdk/admin/views/plans/details.tsx
+++ b/web/sdk/admin/views/plans/details.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text, Grid } from "@raystack/apsara";
+import { Flex, Text, Grid } from "@raystack/apsara-v1";
 import type { Plan } from "@raystack/proton/frontier";
 import { timestampToDate } from "../../utils/connect-timestamp";
 
@@ -6,19 +6,19 @@ export default function PlanDetails({ plan }: { plan: Plan | null }) {
 
   return (
     <Flex direction="column" gap={9}>
-      <Text size={4}>{plan?.name}</Text>
+      <Text size="regular">{plan?.name}</Text>
       <Flex direction="column" gap={9}>
-        <Grid columns={2} gap="small">
-          <Text size={1}>Name</Text>
-          <Text size={1}>{plan?.name}</Text>
+        <Grid columns={2} gap={3}>
+          <Text size="mini">Name</Text>
+          <Text size="mini">{plan?.name}</Text>
         </Grid>
-        <Grid columns={2} gap="small">
-          <Text size={1}>Interval</Text>
-          <Text size={1}>{plan?.interval}</Text>
+        <Grid columns={2} gap={3}>
+          <Text size="mini">Interval</Text>
+          <Text size="mini">{plan?.interval}</Text>
         </Grid>
-        <Grid columns={2} gap="small">
-          <Text size={1}>Created At</Text>
-          <Text size={1}>
+        <Grid columns={2} gap={3}>
+          <Text size="mini">Created At</Text>
+          <Text size="mini">
             {(() => {
               const date = timestampToDate(plan?.createdAt);
               return date ? date.toLocaleString("en", {
diff --git a/web/sdk/admin/views/plans/header.tsx b/web/sdk/admin/views/plans/header.tsx
index 713ce3f6b..69302bd6a 100644
--- a/web/sdk/admin/views/plans/header.tsx
+++ b/web/sdk/admin/views/plans/header.tsx
@@ -1,4 +1,4 @@
-import { DataTable } from "@raystack/apsara";
+import { DataTable } from "@raystack/apsara-v1";
 import { PageHeader } from "../../components/PageHeader";
 import styles from "./plans.module.css";
 
diff --git a/web/sdk/admin/views/plans/index.tsx b/web/sdk/admin/views/plans/index.tsx
index 1cd3da83b..76354c8ac 100644
--- a/web/sdk/admin/views/plans/index.tsx
+++ b/web/sdk/admin/views/plans/index.tsx
@@ -1,4 +1,4 @@
-import { EmptyState, Flex, DataTable, Sheet } from "@raystack/apsara";
+import { EmptyState, Flex, DataTable, Drawer } from "@raystack/apsara-v1";
 import type { Plan } from "@raystack/proton/frontier";
 import { reduceByKey } from "../../utils/helper";
 import { getColumns } from "./columns";
@@ -76,16 +76,16 @@ export default function PlansView({
           classNames={{ root: styles.tableRoot, table: styles.table }}
         />
       </Flex>
-      <Sheet open={selectedPlanId !== undefined}>
-        <Sheet.Content className={styles.sheetContent}>
+      <Drawer open={selectedPlanId !== undefined}>
+        <Drawer.Content showCloseButton={false} className={styles.sheetContent}>
           <SheetHeader title="Plan Details" onClick={onCloseDetail ?? (() => {})} />
           <Flex className={styles.sheetContentBody}>
             <PlanDetails
               plan={selectedPlanId ? planMapById[selectedPlanId] ?? null : null}
             />
           </Flex>
-        </Sheet.Content>
-      </Sheet>
+        </Drawer.Content>
+      </Drawer>
     </DataTable>
   );
 }
diff --git a/web/sdk/admin/views/preferences/PreferencesView.tsx b/web/sdk/admin/views/preferences/PreferencesView.tsx
index 48580e5ed..4f87dbb37 100644
--- a/web/sdk/admin/views/preferences/PreferencesView.tsx
+++ b/web/sdk/admin/views/preferences/PreferencesView.tsx
@@ -1,4 +1,4 @@
-import { Flex, EmptyState } from "@raystack/apsara";
+import { Flex, EmptyState } from "@raystack/apsara-v1";
 import { createQueryOptions, useTransport } from "@connectrpc/connect-query";
 import {
   AdminServiceQueries,
diff --git a/web/sdk/admin/views/preferences/columns.tsx b/web/sdk/admin/views/preferences/columns.tsx
index 45aa588e0..f195fb0cb 100644
--- a/web/sdk/admin/views/preferences/columns.tsx
+++ b/web/sdk/admin/views/preferences/columns.tsx
@@ -1,4 +1,4 @@
-import { Text, type DataTableColumnDef } from "@raystack/apsara";
+import { Text, type DataTableColumnDef } from "@raystack/apsara-v1";
 import { Preference, PreferenceTrait } from "@raystack/proton/frontier";
 import styles from "./preferences.module.css";
 
diff --git a/web/sdk/admin/views/preferences/details.tsx b/web/sdk/admin/views/preferences/details.tsx
index 09b1a7d5d..1508a2e09 100644
--- a/web/sdk/admin/views/preferences/details.tsx
+++ b/web/sdk/admin/views/preferences/details.tsx
@@ -6,12 +6,12 @@ import {
   Separator,
   Switch,
   Text,
-  InputField,
-} from "@raystack/apsara";
-import { useCallback, useEffect, useState } from "react";
+  Input,
+  toastManager,
+} from "@raystack/apsara-v1";
+import React, { useCallback, useEffect, useState } from "react";
 import Skeleton from "react-loading-skeleton";
 import dayjs from "dayjs";
-import { toast } from "sonner";
 import { useMutation, createConnectQueryKey, useTransport } from "@connectrpc/connect-query";
 import { AdminServiceQueries, CreatePreferencesRequestSchema, ListPreferencesResponse } from "@raystack/proton/frontier";
 import { Preference, PreferenceTrait, PreferenceTrait_InputType } from "@raystack/proton/frontier";
@@ -40,9 +40,9 @@ function PreferenceValue({ value, trait, onChange }: PreferenceValueProps) {
     trait.inputType === PreferenceTrait_InputType.TEXTAREA
   ) {
     return (
-      <InputField
+      <Input
         value={value}
-        onChange={(e) => onChange(e.target.value)}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
         data-test-id="admin-preference-value-input"
       />
     );
@@ -183,10 +183,10 @@ export default function PreferenceDetails({
           },
         ],
       }));
-      toast.success("preference updated");
+      toastManager.add({ title: "preference updated", type: "success" });
     } catch (err) {
       console.error("ConnectRPC Error:", err);
-      toast.error("something went wrong");
+      toastManager.add({ title: "something went wrong", type: "error" });
     }
   }, [name, value, createPreferences]);
 
@@ -204,16 +204,16 @@ export default function PreferenceDetails({
       <Flex direction="column" gap={9} style={{ padding: "0 24px" }}>
         {detailList.map((detailItem) =>
           isLoading ? (
-            <Grid columns={2} gap="small" key={detailItem.key}>
+            <Grid columns={2} gap={3} key={detailItem.key}>
               <Skeleton />
               <Skeleton />
             </Grid>
           ) : (
-            <Grid columns={2} gap="small" key={detailItem.key}>
-              <Text size={1} weight={500}>
+            <Grid columns={2} gap={3} key={detailItem.key}>
+              <Text size="mini" weight="medium">
                 {detailItem.key}
               </Text>
-              <Text size={1}>{detailItem.value}</Text>
+              <Text size="mini">{detailItem.value}</Text>
             </Grid>
           ),
         )}
@@ -221,12 +221,12 @@ export default function PreferenceDetails({
         {isLoading ? (
           <Skeleton />
         ) : (
-          <Text size={1} weight={500}>
+          <Text size="mini" weight="medium">
             Value
           </Text>
         )}
         {trait ? (
-          <Flex direction="column" gap={"medium"} data-test-id="preference-value-save">
+          <Flex direction="column" gap={5} data-test-id="preference-value-save">
             <PreferenceValue
               trait={trait}
               value={value}
diff --git a/web/sdk/admin/views/preferences/index.tsx b/web/sdk/admin/views/preferences/index.tsx
index 28787af11..e3cfa148e 100644
--- a/web/sdk/admin/views/preferences/index.tsx
+++ b/web/sdk/admin/views/preferences/index.tsx
@@ -1,4 +1,4 @@
-import { EmptyState, DataTable, Flex } from "@raystack/apsara";
+import { EmptyState, DataTable, Flex } from "@raystack/apsara-v1";
 import { Preference, PreferenceTrait } from "@raystack/proton/frontier";
 import { PageHeader } from "../../components/PageHeader";
 import { getColumns } from "./columns";
diff --git a/web/sdk/admin/views/products/columns.tsx b/web/sdk/admin/views/products/columns.tsx
index e426e50eb..2e221235e 100644
--- a/web/sdk/admin/views/products/columns.tsx
+++ b/web/sdk/admin/views/products/columns.tsx
@@ -1,4 +1,4 @@
-import { Flex, Image, Amount, type DataTableColumnDef } from "@raystack/apsara";
+import { Flex, Image, Amount, type DataTableColumnDef } from "@raystack/apsara-v1";
 import type { Product } from "@raystack/proton/frontier";
 import { timestampToDate, TimeStamp } from "../../utils/connect-timestamp";
 
@@ -64,7 +64,7 @@ export const getColumns = (
           );
 
         return (
-          <Flex direction="column" gap="extra-small">
+          <Flex direction="column" gap={2}>
             <Flex>{row?.original?.title}</Flex>
             <Flex>{priceComp}</Flex>
           </Flex>
diff --git a/web/sdk/admin/views/products/details.tsx b/web/sdk/admin/views/products/details.tsx
index beb49b28f..a9d3df443 100644
--- a/web/sdk/admin/views/products/details.tsx
+++ b/web/sdk/admin/views/products/details.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text, Grid, Sheet } from "@raystack/apsara";
+import { Flex, Text, Grid, Drawer } from "@raystack/apsara-v1";
 import type { Product } from "@raystack/proton/frontier";
 import styles from "./products.module.css";
 import { SheetHeader } from "../../components/SheetHeader";
@@ -15,19 +15,19 @@ export default function ProductDetails({
   onNavigateToPrices,
 }: ProductDetailsProps) {
   return (
-    <Sheet open>
-      <Sheet.Content className={styles.sheetContent}>
+    <Drawer open>
+      <Drawer.Content showCloseButton={false} className={styles.sheetContent}>
         <SheetHeader title="Product Details" onClick={onClose} />
         <Flex className={styles.sheetContentBody} direction="column" gap={9}>
-          <Text size={4}>{product?.title}</Text>
+          <Text size="regular">{product?.title}</Text>
           <Flex direction="column" gap={9}>
-            <Grid columns={2} gap="small">
-              <Text size={1}>Name</Text>
-              <Text size={1}>{product?.title}</Text>
+            <Grid columns={2} gap={3}>
+              <Text size="mini">Name</Text>
+              <Text size="mini">{product?.title}</Text>
             </Grid>
-            <Grid columns={2} gap="small">
-              <Text size={1}>Prices</Text>
-              <Text size={1}>
+            <Grid columns={2} gap={3}>
+              <Text size="mini">Prices</Text>
+              <Text size="mini">
                 <button
                   type="button"
                   className={styles.linkButton}
@@ -40,7 +40,7 @@ export default function ProductDetails({
             </Grid>
           </Flex>
         </Flex>
-      </Sheet.Content>
-    </Sheet>
+      </Drawer.Content>
+    </Drawer>
   );
 }
diff --git a/web/sdk/admin/views/products/header.tsx b/web/sdk/admin/views/products/header.tsx
index 1fb5fc402..7a8af2bd1 100644
--- a/web/sdk/admin/views/products/header.tsx
+++ b/web/sdk/admin/views/products/header.tsx
@@ -1,4 +1,4 @@
-import { DataTable } from "@raystack/apsara";
+import { DataTable } from "@raystack/apsara-v1";
 import { PageHeader } from "../../components/PageHeader";
 import styles from "./products.module.css";
 
diff --git a/web/sdk/admin/views/products/index.tsx b/web/sdk/admin/views/products/index.tsx
index 520c2d8e4..a2ee1bb1f 100644
--- a/web/sdk/admin/views/products/index.tsx
+++ b/web/sdk/admin/views/products/index.tsx
@@ -1,4 +1,4 @@
-import { EmptyState, Flex, DataTable } from "@raystack/apsara";
+import { EmptyState, Flex, DataTable } from "@raystack/apsara-v1";
 import { useQuery } from "@connectrpc/connect-query";
 import { FrontierServiceQueries } from "@raystack/proton/frontier";
 import type { Product } from "@raystack/proton/frontier";
diff --git a/web/sdk/admin/views/products/prices/columns.tsx b/web/sdk/admin/views/products/prices/columns.tsx
index a5a200bef..51f7a1424 100644
--- a/web/sdk/admin/views/products/prices/columns.tsx
+++ b/web/sdk/admin/views/products/prices/columns.tsx
@@ -1,6 +1,6 @@
 import type { Price as PriceType } from "@raystack/proton/frontier";
-import { Amount } from "@raystack/apsara";
-import type { DataTableColumnDef } from "@raystack/apsara";
+import { Amount } from "@raystack/apsara-v1";
+import type { DataTableColumnDef } from "@raystack/apsara-v1";
 import { timestampToDate, TimeStamp } from "../../../utils/connect-timestamp";
 
 export const getColumns = (
diff --git a/web/sdk/admin/views/products/prices/index.tsx b/web/sdk/admin/views/products/prices/index.tsx
index cfa313f95..07a546a90 100644
--- a/web/sdk/admin/views/products/prices/index.tsx
+++ b/web/sdk/admin/views/products/prices/index.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { Flex, EmptyState, DataTable } from "@raystack/apsara";
+import { Flex, EmptyState, DataTable } from "@raystack/apsara-v1";
 import { useQuery } from "@connectrpc/connect-query";
 import { FrontierServiceQueries, type Product } from "@raystack/proton/frontier";
 import { ProductsHeader } from "../header";
diff --git a/web/sdk/admin/views/roles/columns.tsx b/web/sdk/admin/views/roles/columns.tsx
index 2c53069c6..5b546ef67 100644
--- a/web/sdk/admin/views/roles/columns.tsx
+++ b/web/sdk/admin/views/roles/columns.tsx
@@ -1,4 +1,4 @@
-import { type DataTableColumnDef, Flex } from "@raystack/apsara";
+import { type DataTableColumnDef, Flex } from "@raystack/apsara-v1";
 import type { Role } from "@raystack/proton/frontier";
 import styles from "./roles.module.css";
 export const getColumns: () => DataTableColumnDef<Role, unknown>[] = () => {
diff --git a/web/sdk/admin/views/roles/details.tsx b/web/sdk/admin/views/roles/details.tsx
index 517b1a11b..9d3bc91c0 100644
--- a/web/sdk/admin/views/roles/details.tsx
+++ b/web/sdk/admin/views/roles/details.tsx
@@ -1,14 +1,14 @@
-import { Flex, Text, Grid } from "@raystack/apsara";
+import { Flex, Text, Grid } from "@raystack/apsara-v1";
 import type { Role } from "@raystack/proton/frontier";
 
 export default function RoleDetails({ role }: { role: Role | null }) {
   return (
     <Flex direction="column" gap={9}>
-      <Text size={4}>{role?.name}</Text>
+      <Text size="regular">{role?.name}</Text>
       <Flex direction="column" gap={9}>
-        <Grid columns={2} gap="small">
-          <Text size={1}>Name</Text>
-          <Text size={1}>{role?.name}</Text>
+        <Grid columns={2} gap={3}>
+          <Text size="mini">Name</Text>
+          <Text size="mini">{role?.name}</Text>
         </Grid>
       </Flex>
     </Flex>
diff --git a/web/sdk/admin/views/roles/header.tsx b/web/sdk/admin/views/roles/header.tsx
index 1f7cd1977..c5968c7c4 100644
--- a/web/sdk/admin/views/roles/header.tsx
+++ b/web/sdk/admin/views/roles/header.tsx
@@ -1,4 +1,4 @@
-import { DataTable } from "@raystack/apsara";
+import { DataTable } from "@raystack/apsara-v1";
 import { PageHeader } from "../../components/PageHeader";
 import styles from "./roles.module.css";
 
diff --git a/web/sdk/admin/views/roles/index.tsx b/web/sdk/admin/views/roles/index.tsx
index 998a9a383..8c55c5794 100644
--- a/web/sdk/admin/views/roles/index.tsx
+++ b/web/sdk/admin/views/roles/index.tsx
@@ -1,4 +1,4 @@
-import { EmptyState, Flex, DataTable, Sheet } from "@raystack/apsara";
+import { EmptyState, Flex, DataTable, Drawer } from "@raystack/apsara-v1";
 import { useCallback, useState } from "react";
 
 import { reduceByKey } from "../../utils/helper";
@@ -90,8 +90,8 @@ export default function RolesView({
             table: styles.table,
           }}
         />
-        <Sheet open={selectedRoleId !== undefined}>
-          <Sheet.Content className={styles.sheetContent}>
+        <Drawer open={selectedRoleId !== undefined}>
+          <Drawer.Content showCloseButton={false} className={styles.sheetContent}>
             <SheetHeader
               title="Role Details"
               onClick={handleClose}
@@ -102,8 +102,8 @@ export default function RolesView({
                 role={selectedRoleId ? roleMapByName[selectedRoleId] ?? null : null}
               />
             </Flex>
-          </Sheet.Content>
-        </Sheet>
+          </Drawer.Content>
+        </Drawer>
       </Flex>
     </DataTable>
   );
diff --git a/web/sdk/admin/views/users/details/layout/layout.tsx b/web/sdk/admin/views/users/details/layout/layout.tsx
index 57a955a3c..79eee6452 100644
--- a/web/sdk/admin/views/users/details/layout/layout.tsx
+++ b/web/sdk/admin/views/users/details/layout/layout.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, useState } from "react";
-import { Flex } from "@raystack/apsara";
+import { Flex } from "@raystack/apsara-v1";
 import { UserDetailsSidePanel } from "./side-panel";
 import styles from "./layout.module.css";
 import { UserDetailsNavbar } from "./navbar";
diff --git a/web/sdk/admin/views/users/details/layout/membership-dropdown.tsx b/web/sdk/admin/views/users/details/layout/membership-dropdown.tsx
index ff74b30a0..bfbd22fca 100644
--- a/web/sdk/admin/views/users/details/layout/membership-dropdown.tsx
+++ b/web/sdk/admin/views/users/details/layout/membership-dropdown.tsx
@@ -1,4 +1,4 @@
-import { Text, DropdownMenu, Skeleton } from "@raystack/apsara";
+import { Text, Menu, Skeleton } from "@raystack/apsara-v1";
 import styles from "./side-panel.module.css";
 import { useMemo, useState } from "react";
 import {
@@ -117,26 +117,26 @@ export const MembershipDropdown = ({
           onSubmit={onSuspend}
         />
       )}
-      <DropdownMenu>
-        <DropdownMenu.Trigger className={styles["dropdown-menu-trigger"]}>
-          <Text className={styles["text-overflow"]} as="p">
+      <Menu>
+        <Menu.Trigger className={styles["dropdown-menu-trigger"]}>
+          <Text className={styles["text-overflow"]} render={<p />}>
             {data?.roleTitles?.join(", ") ?? "-"}
           </Text>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content>
-          <DropdownMenu.Item
+        </Menu.Trigger>
+        <Menu.Content>
+          <Menu.Item
             onClick={toggleAssignRoleDialog}
             data-test-id="admin-user-details-assign-role">
             Assign role...
-          </DropdownMenu.Item>
+          </Menu.Item>
           {/* TODO: Removed for now */}
-          {/* <DropdownMenu.Item
+          {/* <Menu.Item
             onClick={toggleSuspendDialog}
             data-test-id="admin-user-details-suspend-user">
             Suspend...
-          </DropdownMenu.Item> */}
-        </DropdownMenu.Content>
-      </DropdownMenu>
+          </Menu.Item> */}
+        </Menu.Content>
+      </Menu>
     </>
   );
 };
diff --git a/web/sdk/admin/views/users/details/layout/navbar.tsx b/web/sdk/admin/views/users/details/layout/navbar.tsx
index 860837bff..914fdbdeb 100644
--- a/web/sdk/admin/views/users/details/layout/navbar.tsx
+++ b/web/sdk/admin/views/users/details/layout/navbar.tsx
@@ -5,8 +5,8 @@ import {
   Flex,
   IconButton,
   getAvatarColor,
-} from "@raystack/apsara";
-import { SidebarIcon } from "@raystack/apsara/icons";
+} from "@raystack/apsara-v1";
+import { SidebarIcon } from "@raystack/apsara-v1/icons";
 import UserIcon from "../../../../assets/icons/UsersIcon";
 import styles from "./navbar.module.css";
 import { getUserName } from "../../util";
@@ -33,7 +33,7 @@ export const UserDetailsNavbar = ({
 
   return (
     <nav className={styles.navbar}>
-      <Flex gap="medium" align="center">
+      <Flex gap={5} align="center">
         <Breadcrumb size="small">
           <Breadcrumb.Item
             href={`/${paths.users}`}
@@ -56,7 +56,7 @@ export const UserDetailsNavbar = ({
             {getUserName(user)}
           </Breadcrumb.Item>
         </Breadcrumb>
-        <Flex gap="small">
+        <Flex gap={3}>
           {links.map((link, index) => {
             const isActive = currentPath.startsWith(link.path);
             return (
@@ -65,7 +65,8 @@ export const UserDetailsNavbar = ({
                 data-state={isActive ? "active" : undefined}
                 variant="filled"
                 className={styles["nav-chip"]}
-                onClick={() => onNavigate?.(link.path)}>
+                onClick={() => onNavigate?.(link.path)}
+                data-test-id={`admin-nav-link-${link.name}`}>
                 {link.name}
               </Chip>
             );
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 58805c576..982b4c55a 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
@@ -1,4 +1,4 @@
-import { Flex, List, Text, CopyButton, Tooltip } from "@raystack/apsara";
+import { Flex, List, Text, CopyButton, Tooltip } from "@raystack/apsara-v1";
 import { CalendarIcon } from "@radix-ui/react-icons";
 import styles from "./side-panel.module.css";
 import { UserState, USER_STATES } from "../../util";
@@ -16,8 +16,11 @@ export const SidePanelDetails = () => {
         <List.Value>
           <Flex gap={3} style={{ width: "100%" }}>
             <CopyButton text={user?.id || ""} data-test-id="copy-button" />
-            <Tooltip message={user?.id || ""}>
-              <Text className={styles["text-overflow"]}>{user?.id}</Text>
+            <Tooltip>
+              <Tooltip.Trigger
+                render={<Text className={styles["text-overflow"]}>{user?.id}</Text>}
+              />
+              <Tooltip.Content>{user?.id || ""}</Tooltip.Content>
             </Tooltip>
           </Flex>
         </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..36930e4f4 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
@@ -1,4 +1,4 @@
-import { Flex, List, Text, Avatar } from "@raystack/apsara";
+import { Flex, List, Text, Avatar } from "@raystack/apsara-v1";
 import dayjs from "dayjs";
 import { CalendarIcon } from "@radix-ui/react-icons";
 import Skeleton from "react-loading-skeleton";
diff --git a/web/sdk/admin/views/users/details/layout/side-panel.tsx b/web/sdk/admin/views/users/details/layout/side-panel.tsx
index 23fe1842a..edbc94677 100644
--- a/web/sdk/admin/views/users/details/layout/side-panel.tsx
+++ b/web/sdk/admin/views/users/details/layout/side-panel.tsx
@@ -1,4 +1,4 @@
-import { Avatar, getAvatarColor, SidePanel, Text } from "@raystack/apsara";
+import { Avatar, getAvatarColor, SidePanel, Text } from "@raystack/apsara-v1";
 import { SidePanelDetails } from "./side-panel-details";
 import { SidePanelMembership } from "./side-panel-membership";
 import styles from "./side-panel.module.css";
diff --git a/web/sdk/admin/views/users/details/layout/suspend-user.tsx b/web/sdk/admin/views/users/details/layout/suspend-user.tsx
index 37b45c4f4..3938f696f 100644
--- a/web/sdk/admin/views/users/details/layout/suspend-user.tsx
+++ b/web/sdk/admin/views/users/details/layout/suspend-user.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Button, Dialog, Flex, Text, toast } from "@raystack/apsara";
+import { Button, Dialog, Flex, Text, toastManager } from "@raystack/apsara-v1";
 import { useTerminology } from "../../../../hooks/useTerminology";
 
 interface SuspendDropdownProps {
@@ -19,7 +19,7 @@ export const SuspendUser = ({
   const handleSuspend = async () => {
     try {
       setIsSubmitting(true);
-      toast.success(`${t.user({ case: "capital" })} suspended successfully`);
+      toastManager.add({ title: `${t.user({ case: "capital" })} suspended successfully`, type: "success" });
       onSubmit?.();
     } catch (error) {
       console.error(error);
@@ -32,7 +32,7 @@ export const SuspendUser = ({
     <Dialog open onOpenChange={onClose}>
       <Dialog.Content width={400}>
         <Dialog.Body>
-          <Flex direction="column" gap="small">
+          <Flex direction="column" gap={3}>
             <Dialog.Title>Suspend {t.user({ case: "capital" })}</Dialog.Title>
             <Text variant="secondary">
               Suspending this {t.user({ case: "lower" })} will permanently restrict access to its
@@ -42,16 +42,18 @@ export const SuspendUser = ({
           </Flex>
         </Dialog.Body>
         <Dialog.Footer>
-          <Dialog.Close asChild>
-            <Button
-              type="button"
-              variant="outline"
-              color="neutral"
-              data-test-id="admin-user-details-suspend-cancel"
-            >
-              Cancel
-            </Button>
-          </Dialog.Close>
+          <Dialog.Close
+            render={
+              <Button
+                type="button"
+                variant="outline"
+                color="neutral"
+                data-test-id="admin-user-details-suspend-cancel"
+              >
+                Cancel
+              </Button>
+            }
+          />
           <Button
             type="button"
             variant="solid"
diff --git a/web/sdk/admin/views/users/details/security/block-user.tsx b/web/sdk/admin/views/users/details/security/block-user.tsx
index 74d6fcba1..2fe320ca6 100644
--- a/web/sdk/admin/views/users/details/security/block-user.tsx
+++ b/web/sdk/admin/views/users/details/security/block-user.tsx
@@ -1,5 +1,5 @@
 import { ComponentProps, useCallback, useState } from "react";
-import { Button, Dialog, toast } from "@raystack/apsara";
+import { Button, Dialog, toastManager } from "@raystack/apsara-v1";
 import { useUser } from "../user-context";
 import { getUserName } from "../../util";
 import {
@@ -61,7 +61,7 @@ export const BlockUserDialog = () => {
     FrontierServiceQueries.disableUser,
     {
       onSuccess: () => {
-        toast.success(`${t.user({ case: "capital" })} blocked successfully`);
+        toastManager.add({ title: `${t.user({ case: "capital" })} blocked successfully`, type: "success" });
         optimisticUpdateState("disabled");
         reset?.();
         onOpenChange(false);
@@ -72,7 +72,7 @@ export const BlockUserDialog = () => {
     FrontierServiceQueries.enableUser,
     {
       onSuccess: () => {
-        toast.success(`${t.user({ case: "capital" })} unblocked successfully`);
+        toastManager.add({ title: `${t.user({ case: "capital" })} unblocked successfully`, type: "success" });
         optimisticUpdateState("enabled");
         reset?.();
         onOpenChange(false);
@@ -91,9 +91,9 @@ export const BlockUserDialog = () => {
       await action({ id: user?.id || "" });
     } catch (error) {
       handleConnectError(error, {
-        PermissionDenied: () => toast.error("You don't have permission to perform this action"),
-        NotFound: (err) => toast.error('Not found', { description: err.message }),
-        Default: (err) => toast.error(errorMessage, { description: err.message }),
+        PermissionDenied: () => toastManager.add({ title: "You don't have permission to perform this action", type: "error" }),
+        NotFound: (err) => toastManager.add({ title: 'Not found', description: err.message, type: "error" }),
+        Default: (err) => toastManager.add({ title: errorMessage, description: err.message, type: "error" }),
       });
     }
   };
@@ -120,32 +120,36 @@ export const BlockUserDialog = () => {
 
   return (
     <Dialog open={isDialogOpen} onOpenChange={onOpenChange}>
-      <Dialog.Trigger asChild>
-        <Button
-          color={config.btnColor}
-          size="normal"
-          style={{
-            alignSelf: "flex-end",
-          }}
-          width={70}
-          data-test-id="admin-security-block-user">
-          {config.btnText}
-        </Button>
-      </Dialog.Trigger>
-      <Dialog.Content width={400} ariaLabel={config.dialogTitle}>
+      <Dialog.Trigger
+        render={
+          <Button
+            color={config.btnColor}
+            size="normal"
+            style={{
+              alignSelf: "flex-end",
+            }}
+            width={70}
+            data-test-id="admin-security-block-user">
+            {config.btnText}
+          </Button>
+        }
+      />
+      <Dialog.Content width={400} aria-label={config.dialogTitle}>
         <Dialog.Body>
           <Dialog.Title>{config.dialogTitle}</Dialog.Title>
           <Dialog.Description>{config.dialogDescription}</Dialog.Description>
         </Dialog.Body>
         <Dialog.Footer>
-          <Dialog.Close asChild>
-            <Button
-              color="neutral"
-              variant="outline"
-              data-test-id="admin-security-block-user-cancel">
-              Cancel
-            </Button>
-          </Dialog.Close>
+          <Dialog.Close
+            render={
+              <Button
+                color="neutral"
+                variant="outline"
+                data-test-id="admin-security-block-user-cancel">
+                Cancel
+              </Button>
+            }
+          />
           <Button
             color={config.btnColor}
             data-test-id="admin-security-block-user-submit"
diff --git a/web/sdk/admin/views/users/details/security/security.tsx b/web/sdk/admin/views/users/details/security/security.tsx
index 57598d028..8420681c9 100644
--- a/web/sdk/admin/views/users/details/security/security.tsx
+++ b/web/sdk/admin/views/users/details/security/security.tsx
@@ -1,4 +1,4 @@
-import { Flex, Separator, Text } from "@raystack/apsara";
+import { Flex, Separator, Text } from "@raystack/apsara-v1";
 import { PageTitle } from "../../../../components/PageTitle";
 import { useUser } from "../user-context";
 import { BlockUserDialog } from "./block-user";
diff --git a/web/sdk/admin/views/users/details/security/sessions/index.tsx b/web/sdk/admin/views/users/details/security/sessions/index.tsx
index a8480a43a..57cc89e5b 100644
--- a/web/sdk/admin/views/users/details/security/sessions/index.tsx
+++ b/web/sdk/admin/views/users/details/security/sessions/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Flex, Text, Button, toast } from "@raystack/apsara";
+import { Flex, Text, Button, toastManager } from "@raystack/apsara-v1";
 import { useUser } from "../../user-context";
 import { RevokeSessionConfirm } from "./revoke-session-confirm";
 import { SessionSkeleton } from "./session-skeleton";
@@ -96,11 +96,13 @@ export const UserSessions = () => {
           cardinality: "finite",
         }),
       });
-      toast.success('Session revoked successfully');
+      toastManager.add({ title: 'Session revoked successfully', type: "success" });
     },
     onError: (error: any) => {
-      toast.error('Failed to revoke session', {
-        description: getErrorMessage(error)
+      toastManager.add({
+        title: 'Failed to revoke session',
+        description: getErrorMessage(error),
+        type: "error",
       });
     },
   });
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 67c372145..27405c715 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
@@ -5,7 +5,7 @@ import {
   Flex,
   List,
   Text
-} from '@raystack/apsara';
+} from '@raystack/apsara-v1';
 import { RevokeSessionFinalConfirm } from './revoke-session-final-confirm';
 import { formatDeviceDisplay } from './index';
 import styles from './sessions.module.css';
diff --git a/web/sdk/admin/views/users/details/security/sessions/revoke-session-final-confirm.tsx b/web/sdk/admin/views/users/details/security/sessions/revoke-session-final-confirm.tsx
index 57162ba9d..2c995ce06 100644
--- a/web/sdk/admin/views/users/details/security/sessions/revoke-session-final-confirm.tsx
+++ b/web/sdk/admin/views/users/details/security/sessions/revoke-session-final-confirm.tsx
@@ -1,10 +1,10 @@
 import {
   Button,
-  toast,
+  toastManager,
   Dialog,
   Flex,
   Text
-} from '@raystack/apsara';
+} from '@raystack/apsara-v1';
 import styles from './sessions.module.css';
 
 interface RevokeSessionFinalConfirmProps {
@@ -25,8 +25,10 @@ export const RevokeSessionFinalConfirm = ({
       onConfirm();
       onOpenChange(false);
     } catch (error: any) {
-      toast.error('Failed to revoke session', {
-        description: error.message || 'Something went wrong'
+      toastManager.add({
+        title: 'Failed to revoke session',
+        description: error.message || 'Something went wrong',
+        type: "error",
       });
     }
   };
diff --git a/web/sdk/admin/views/users/details/security/sessions/session-skeleton.tsx b/web/sdk/admin/views/users/details/security/sessions/session-skeleton.tsx
index 00b607051..a9d2de34b 100644
--- a/web/sdk/admin/views/users/details/security/sessions/session-skeleton.tsx
+++ b/web/sdk/admin/views/users/details/security/sessions/session-skeleton.tsx
@@ -1,4 +1,4 @@
-import { Flex, Skeleton } from "@raystack/apsara";
+import { Flex, Skeleton } from "@raystack/apsara-v1";
 import styles from "./sessions.module.css";
 
 export const SessionSkeleton = ({ count = 3 }: { count?: number }) => {
diff --git a/web/sdk/admin/views/users/details/user-details.tsx b/web/sdk/admin/views/users/details/user-details.tsx
index 6befd997b..40c4bc1be 100644
--- a/web/sdk/admin/views/users/details/user-details.tsx
+++ b/web/sdk/admin/views/users/details/user-details.tsx
@@ -1,4 +1,4 @@
-import { Flex, EmptyState, Spinner } from "@raystack/apsara";
+import { Flex, EmptyState, Spinner } from "@raystack/apsara-v1";
 import { PageTitle } from "../../../components/PageTitle";
 import UserIcon from "../../../assets/icons/UsersIcon";
 import { UserDetailsLayout } from "./layout";
diff --git a/web/sdk/admin/views/users/list/columns.tsx b/web/sdk/admin/views/users/list/columns.tsx
index 0083dc7d7..652a5331e 100644
--- a/web/sdk/admin/views/users/list/columns.tsx
+++ b/web/sdk/admin/views/users/list/columns.tsx
@@ -5,7 +5,7 @@ import {
   Flex,
   getAvatarColor,
   Text,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import dayjs from "dayjs";
 import styles from "./list.module.css";
 import { getUserName, USER_STATES, UserState } from "../util";
diff --git a/web/sdk/admin/views/users/list/invite-users.tsx b/web/sdk/admin/views/users/list/invite-users.tsx
index 384c0e6d9..9b998f108 100644
--- a/web/sdk/admin/views/users/list/invite-users.tsx
+++ b/web/sdk/admin/views/users/list/invite-users.tsx
@@ -7,8 +7,8 @@ import {
   Select,
   Text,
   TextArea,
-  toast,
-} from "@raystack/apsara";
+  toastManager,
+} from "@raystack/apsara-v1";
 import { PlusIcon } from "@radix-ui/react-icons";
 import * as z from "zod";
 import { Controller, useForm } from "react-hook-form";
@@ -101,9 +101,10 @@ export const InviteUser = () => {
     {
       onSuccess: (data: CreateOrganizationInvitationResponse) => {
         const invitedCount = data?.invitations?.length ?? 0;
-        toast.success(
-          `${t.user({ case: "capital", plural: invitedCount !== 1 })} invited`,
-        );
+        toastManager.add({
+          title: `${t.user({ case: "capital", plural: invitedCount !== 1 })} invited`,
+          type: "success",
+        });
         reset({ role: defaultRoleId });
         onOpenChange(false);
       },
@@ -120,30 +121,31 @@ export const InviteUser = () => {
       });
     } catch (error) {
       handleConnectError(error, {
-        AlreadyExists: () => toast.error('Invitation already exists'),
-        InvalidArgument: (err) => toast.error('Invalid input', { description: err.message }),
-        PermissionDenied: () => toast.error("You don't have permission to perform this action"),
-        Default: (err) => toast.error('Something went wrong', { description: err.message }),
+        AlreadyExists: () => toastManager.add({ title: 'Invitation already exists', type: "error" }),
+        InvalidArgument: (err) => toastManager.add({ title: 'Invalid input', description: err.message, type: "error" }),
+        PermissionDenied: () => toastManager.add({ title: "You don't have permission to perform this action", type: "error" }),
+        Default: (err) => toastManager.add({ title: 'Something went wrong', description: err.message, type: "error" }),
       });
     }
   };
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <Dialog.Trigger asChild>
-        <Button
-          variant="text"
-          color="neutral"
-          leadingIcon={<PlusIcon />}
-          data-test-id="users-list-invite-user-btn">
-          Invite {t.user({ case: "capital" })}
-        </Button>
-      </Dialog.Trigger>
+      <Dialog.Trigger
+        render={
+          <Button
+            variant="text"
+            color="neutral"
+            leadingIcon={<PlusIcon />}
+            data-test-id="users-list-invite-user-btn">
+            Invite {t.user({ case: "capital" })}
+          </Button>
+        }
+      />
       <Dialog.Content width={600}>
         <form onSubmit={handleSubmit(onSubmit)}>
           <Dialog.Header>
             <Dialog.Title>Invite {t.user({ case: "lower" })}</Dialog.Title>
-            <Dialog.CloseButton data-test-id="users-list-invite-user-close-btn" />
           </Dialog.Header>
           <Dialog.Body className={styles["invite-users-dialog-body"]}>
             <Flex direction="column" gap={7}>
@@ -154,17 +156,20 @@ export const InviteUser = () => {
                 <Controller
                   name="emails"
                   control={control}
-                  render={({ field }) => (
-                    <TextArea
-                      {...field}
-                      // @ts-expect-error placeholder props not defined in TS
-                      placeholder="abc@example.com, xyz@example.com"
-                      className={styles["invite-users-emails-textarea"]}
-                    />
-                  )}
+                  render={({ field }) => {
+                    const { value, ...rest } = field;
+                    return (
+                      <TextArea
+                        {...rest}
+                        value={Array.isArray(value) ? value.join(", ") : (value ?? "") as string}
+                        placeholder="abc@example.com, xyz@example.com"
+                        className={styles["invite-users-emails-textarea"]}
+                      />
+                    );
+                  }}
                 />
                 {(errors?.emails?.message || errors?.emails?.length) && (
-                  <Text size={1} className={styles["form-error-message"]}>
+                  <Text size="mini" className={styles["form-error-message"]}>
                     {errors?.emails?.message || errors?.emails?.[0]?.message}
                   </Text>
                 )}
@@ -200,7 +205,7 @@ export const InviteUser = () => {
                         </Select>
                         {error && (
                           <Text
-                            size={1}
+                            size="mini"
                             className={styles["form-error-message"]}>
                             {error?.message}
                           </Text>
@@ -246,7 +251,7 @@ export const InviteUser = () => {
                         </Select>
                         {error && (
                           <Text
-                            size={1}
+                            size="mini"
                             className={styles["form-error-message"]}>
                             {error?.message}
                           </Text>
diff --git a/web/sdk/admin/views/users/list/list.tsx b/web/sdk/admin/views/users/list/list.tsx
index 7c9fd2d6b..67cb40829 100644
--- a/web/sdk/admin/views/users/list/list.tsx
+++ b/web/sdk/admin/views/users/list/list.tsx
@@ -1,5 +1,5 @@
-import { DataTable, EmptyState, Flex } from "@raystack/apsara";
-import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
+import { DataTable, EmptyState, Flex } from "@raystack/apsara-v1";
+import type { DataTableQuery, DataTableSort } from "@raystack/apsara-v1";
 import Navbar from "./navbar";
 import styles from "./list.module.css";
 import { getColumns } from "./columns";
@@ -14,7 +14,7 @@ import {
 } from "~/utils/connect-pagination";
 import { transformDataTableQueryToRQLRequest } from "~/utils/transform-query";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
-import { useDebouncedState } from "@raystack/apsara/hooks";
+import { useDebouncedState } from "@raystack/apsara-v1/hooks";
 import { useTerminology } from "../../../hooks/useTerminology";
 
 const NoUsers = () => {
diff --git a/web/sdk/admin/views/users/list/navbar.tsx b/web/sdk/admin/views/users/list/navbar.tsx
index 7b4cfa893..89526eb10 100644
--- a/web/sdk/admin/views/users/list/navbar.tsx
+++ b/web/sdk/admin/views/users/list/navbar.tsx
@@ -5,7 +5,7 @@ import {
   Separator,
   IconButton,
   Spinner,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import styles from "./list.module.css";
 import { DownloadIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import UserIcon from "../../../assets/icons/UsersIcon";
@@ -48,7 +48,7 @@ const Navbar = ({ searchQuery, onExportUsers }: NavbarProps) => {
     <nav className={styles.navbar}>
       <Flex gap={2}>
         <UserIcon />
-        <Text size={2} weight={500}>
+        <Text size="small" weight="medium">
           Users
         </Text>
       </Flex>
diff --git a/web/sdk/admin/views/webhooks/webhooks/columns.tsx b/web/sdk/admin/views/webhooks/webhooks/columns.tsx
index 53b28085d..da3e2e0b3 100644
--- a/web/sdk/admin/views/webhooks/webhooks/columns.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/columns.tsx
@@ -1,10 +1,10 @@
 import { DotsVerticalIcon, TrashIcon, UpdateIcon } from "@radix-ui/react-icons";
 import {
-  DropdownMenu,
+  Menu,
   Flex,
   Text,
   type DataTableColumnDef,
-} from "@raystack/apsara";
+} from "@raystack/apsara-v1";
 import styles from "./webhooks.module.css";
 import { type Webhook } from "@raystack/proton/frontier";
 import {
@@ -70,37 +70,37 @@ export const getColumns: (
           return (
             <>
               {/* @ts-ignore */}
-              <DropdownMenu style={{ padding: "0 !important" }}>
-                <DropdownMenu.Trigger asChild style={{ cursor: "pointer" }}>
-                  <DotsVerticalIcon />
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content>
-                  <DropdownMenu.Group style={{ padding: 0 }}>
-                    <DropdownMenu.Item style={{ padding: 0 }}>
+              <Menu style={{ padding: "0 !important" }}>
+                <Menu.Trigger
+                  render={<DotsVerticalIcon style={{ cursor: "pointer" }} />}
+                />
+                <Menu.Content>
+                  <Menu.Group style={{ padding: 0 }}>
+                    <Menu.Item style={{ padding: 0 }}>
                       <Flex
                         style={{ padding: "12px" }}
-                        gap={"small"}
+                        gap={3}
                         data-test-id="admin-webhook-update-btn"
                         onClick={() => openEditPage(webhookId)}
                       >
                         <UpdateIcon />
                         Update
                       </Flex>
-                    </DropdownMenu.Item>
-                    <DropdownMenu.Item style={{ padding: 0 }} disabled={!enableDelete}>
+                    </Menu.Item>
+                    <Menu.Item style={{ padding: 0 }} disabled={!enableDelete}>
                       <Flex
                         className={styles.deleteMenuItem}
-                        gap={"small"}
+                        gap={3}
                         data-test-id="admin-webhook-delete-btn"
                         onClick={() => enableDelete && setIsDeleteDialogOpen(true)}
                       >
                         <TrashIcon />
                         Delete
                       </Flex>
-                    </DropdownMenu.Item>
-                  </DropdownMenu.Group>
-                </DropdownMenu.Content>
-              </DropdownMenu>
+                    </Menu.Item>
+                  </Menu.Group>
+                </Menu.Content>
+              </Menu>
 
               <DeleteWebhookDialog
                 isOpen={isDeleteDialogOpen}
diff --git a/web/sdk/admin/views/webhooks/webhooks/create/index.tsx b/web/sdk/admin/views/webhooks/webhooks/create/index.tsx
index 3db2e6813..0062ef87e 100644
--- a/web/sdk/admin/views/webhooks/webhooks/create/index.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/create/index.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { Button, Flex, Sheet } from "@raystack/apsara";
+import { Button, Flex, Drawer, toastManager } from "@raystack/apsara-v1";
 import { SheetHeader } from "../../../../components/SheetHeader";
 import { SheetFooter } from "../../../../components/SheetFooter";
 import * as z from "zod";
@@ -8,7 +8,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Form, FormSubmit } from "@radix-ui/react-form";
 import { CustomFieldName } from "../../../../components/CustomField";
 import events from "../../../../utils/webhook-events";
-import { toast } from "sonner";
 import { useMutation } from "@connectrpc/connect-query";
 import {
   AdminServiceQueries,
@@ -63,19 +62,19 @@ export default function CreateWebhooks({ onClose: onCloseProp }: CreateWebhooksP
       const resp = await createWebhook({ body });
 
       if (resp?.webhook) {
-        toast.success("Webhook created");
+        toastManager.add({ title: "Webhook created", type: "success" });
         await invalidateWebhooksList();
         onOpenChange();
       }
     } catch (err) {
       console.error("Failed to create webhook:", err);
-      toast.error("Something went wrong");
+      toastManager.add({ title: "Something went wrong", type: "error" });
     }
   };
 
   return (
-    <Sheet open={true}>
-      <Sheet.Content
+    <Drawer open={true}>
+      <Drawer.Content
         side="right"
         // @ts-ignore
         style={{
@@ -83,7 +82,7 @@ export default function CreateWebhooks({ onClose: onCloseProp }: CreateWebhooksP
           padding: 0,
           boxShadow: "var(--rs-shadow-soft)",
         }}
-        close={false}
+        showCloseButton={false}
       >
         <FormProvider {...methods}>
           <Form onSubmit={methods.handleSubmit(onSubmit)}>
@@ -136,8 +135,8 @@ export default function CreateWebhooks({ onClose: onCloseProp }: CreateWebhooksP
             </SheetFooter>
           </Form>
         </FormProvider>
-      </Sheet.Content>
-    </Sheet>
+      </Drawer.Content>
+    </Drawer>
   );
 }
 
diff --git a/web/sdk/admin/views/webhooks/webhooks/delete/index.tsx b/web/sdk/admin/views/webhooks/webhooks/delete/index.tsx
index 8997d5ad0..85b6e66be 100644
--- a/web/sdk/admin/views/webhooks/webhooks/delete/index.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/delete/index.tsx
@@ -1,5 +1,4 @@
-import { Button, Dialog, Flex, Text } from "@raystack/apsara";
-import { toast } from "sonner";
+import { Button, Dialog, Flex, Text, toastManager } from "@raystack/apsara-v1";
 import type { useMutation } from "@connectrpc/connect-query";
 
 interface DeleteWebhookDialogProps {
@@ -20,11 +19,11 @@ export function DeleteWebhookDialog({
   const handleDelete = async () => {
     try {
       await deleteWebhookMutation.mutateAsync({ id: webhookId });
-      toast.success("Webhook deleted");
+      toastManager.add({ title: "Webhook deleted", type: "success" });
       onOpenChange(false);
     } catch (err) {
       console.error("Failed to delete webhook:", err);
-      toast.error("Failed to delete webhook");
+      toastManager.add({ title: "Failed to delete webhook", type: "error" });
     }
   };
 
@@ -33,9 +32,9 @@ export function DeleteWebhookDialog({
       <Dialog.Content
         style={{ padding: 0, maxWidth: '600px', width: '100%' }}
       >
-        <Flex direction="column" gap="large" style={{ padding: "24px" }}>
-          <Flex direction="column" gap="medium">
-            <Text size={5} weight={500}>
+        <Flex direction="column" gap={9} style={{ padding: "24px" }}>
+          <Flex direction="column" gap={5}>
+            <Text size="large" weight="medium">
               Delete Webhook
             </Text>
             <Text>
diff --git a/web/sdk/admin/views/webhooks/webhooks/header.tsx b/web/sdk/admin/views/webhooks/webhooks/header.tsx
index baeeedfda..7f9935da1 100644
--- a/web/sdk/admin/views/webhooks/webhooks/header.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/header.tsx
@@ -1,6 +1,6 @@
 import { PlusIcon } from "@radix-ui/react-icons";
 
-import { Button, Flex, DataTable } from "@raystack/apsara";
+import { Button, Flex, DataTable } from "@raystack/apsara-v1";
 import { PageHeader } from "../../../components/PageHeader";
 import styles from "./webhooks.module.css";
 
diff --git a/web/sdk/admin/views/webhooks/webhooks/index.tsx b/web/sdk/admin/views/webhooks/webhooks/index.tsx
index 575c2adba..6ea92337d 100644
--- a/web/sdk/admin/views/webhooks/webhooks/index.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/index.tsx
@@ -1,4 +1,4 @@
-import { Flex, DataTable, EmptyState } from "@raystack/apsara";
+import { Flex, DataTable, EmptyState } from "@raystack/apsara-v1";
 import { useCallback } from "react";
 import { getColumns } from "./columns";
 import { WebhooksHeader } from "./header";
diff --git a/web/sdk/admin/views/webhooks/webhooks/update/index.tsx b/web/sdk/admin/views/webhooks/webhooks/update/index.tsx
index 5e929eacc..5cdecd122 100644
--- a/web/sdk/admin/views/webhooks/webhooks/update/index.tsx
+++ b/web/sdk/admin/views/webhooks/webhooks/update/index.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from "react";
-import { Button, Flex, Sheet } from "@raystack/apsara";
+import { Button, Flex, Drawer, toastManager } from "@raystack/apsara-v1";
 import { SheetHeader } from "../../../../components/SheetHeader";
 import { SheetFooter } from "../../../../components/SheetFooter";
 import * as z from "zod";
@@ -8,7 +8,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Form, FormSubmit } from "@radix-ui/react-form";
 import { CustomFieldName } from "../../../../components/CustomField";
 import events from "../../../../utils/webhook-events";
-import { toast } from "sonner";
 import { useMutation } from "@connectrpc/connect-query";
 import {
   AdminServiceQueries,
@@ -79,13 +78,13 @@ export default function UpdateWebhooks({ webhookId: webhookIdProp, onClose: onCl
       });
 
       if (resp?.webhook) {
-        toast.success("Webhook updated");
+        toastManager.add({ title: "Webhook updated", type: "success" });
         await invalidateWebhooksList();
         onClose();
       }
     } catch (err) {
       console.error("Failed to update webhook:", err);
-      toast.error("Something went wrong");
+      toastManager.add({ title: "Something went wrong", type: "error" });
     }
   };
 
@@ -101,8 +100,8 @@ export default function UpdateWebhooks({ webhookId: webhookIdProp, onClose: onCl
   }, [webhook, methods.reset]);
 
   return (
-    <Sheet open={true}>
-      <Sheet.Content
+    <Drawer open={true}>
+      <Drawer.Content
         side="right"
         // @ts-ignore
         style={{
@@ -110,7 +109,7 @@ export default function UpdateWebhooks({ webhookId: webhookIdProp, onClose: onCl
           padding: 0,
           boxShadow: "var(--rs-shadow-soft)",
         }}
-        close={false}
+        showCloseButton={false}
       >
         <FormProvider {...methods}>
           <Form onSubmit={methods.handleSubmit(onSubmit)}>
@@ -176,8 +175,8 @@ export default function UpdateWebhooks({ webhookId: webhookIdProp, onClose: onCl
             </SheetFooter>
           </Form>
         </FormProvider>
-      </Sheet.Content>
-    </Sheet>
+      </Drawer.Content>
+    </Drawer>
   );
 }
 
diff --git a/web/sdk/react/components/auth-header/auth-header.tsx b/web/sdk/react/components/auth-header/auth-header.tsx
index a1c3156a6..2cb8f62b2 100644
--- a/web/sdk/react/components/auth-header/auth-header.tsx
+++ b/web/sdk/react/components/auth-header/auth-header.tsx
@@ -22,7 +22,7 @@ export const AuthHeader = ({ title, logo }: AuthHeaderProps) => {
       gap={9}
     >
       <div>{logo ? logo : defaultLogo}</div>
-      <Headline size="t2" weight="regular">{title}</Headline>
+      <Headline size="t2" weight="regular" align="center">{title}</Headline>
     </Flex>
   );
 };