diff --git a/apps/native/App.tsx b/apps/native/App.tsx
index 6b7a473..7e48d82 100644
--- a/apps/native/App.tsx
+++ b/apps/native/App.tsx
@@ -2,12 +2,47 @@ import "@vaariance/ui/styles.css";
 
 import { StatusBar } from "expo-status-bar";
 import { View } from "react-native";
-import { Text } from "@vaariance/ui";
+import { Text, Button } from "@vaariance/ui";
+import Cosmr1CredentialHandlerModule from "@vaariance/cred-native";
 
 export default function App() {
+  const credentialManager = Cosmr1CredentialHandlerModule;
+
+  const register = async () => {
+    const result = await credentialManager.register({
+      attestation: "none",
+      challenge: btoa("register me"),
+      rp: {
+        id: "localhost",
+        name: "localhost",
+      },
+      user: {
+        displayName: "user",
+        id: btoa("user id"),
+        name: "user@localhost.3000",
+      },
+      timeout: 60000,
+    });
+    console.log(result);
+  };
+
+  const authenticate = async () => {
+    const result = await credentialManager.authenticate({
+      challenge: btoa("sign this"),
+      timeout: 6000,
+      userVerification: "required",
+      rpId: "localhost",
+    });
+    console.log(result);
+  };
   return (
-    <View className="flex-1 items-center justify-center">
-      <Text>Open up App.tsx to start working on your app!</Text>
+    <View className="flex-1 items-center justify-center flex-col-reverse bg-background gap-5">
+      <Button variant={"default"} onPress={register}>
+        <Text>Create A Passkey</Text>
+      </Button>
+      <Button variant={"default"} onPress={authenticate}>
+        <Text>Sign in with Passkey</Text>
+      </Button>
       <StatusBar style="auto" />
     </View>
   );
diff --git a/apps/native/android/app/src/main/res/values/strings.xml b/apps/native/android/app/src/main/res/values/strings.xml
index 6aaf2e7..9d4a5c0 100644
--- a/apps/native/android/app/src/main/res/values/strings.xml
+++ b/apps/native/android/app/src/main/res/values/strings.xml
@@ -2,4 +2,5 @@
   <string name="app_name">native</string>
   <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
   <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
+  <string name="expo_system_ui_user_interface_style" translatable="false">light</string>
 </resources>
\ No newline at end of file
diff --git a/apps/native/android/build.gradle b/apps/native/android/build.gradle
index 932bf7b..1e8dbd9 100644
--- a/apps/native/android/build.gradle
+++ b/apps/native/android/build.gradle
@@ -3,7 +3,7 @@
 buildscript {
     ext {
         buildToolsVersion = findProperty('android.buildToolsVersion') ?: '34.0.0'
-        minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '23')
+        minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '28')
         compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '34')
         targetSdkVersion = Integer.parseInt(findProperty('android.targetSdkVersion') ?: '34')
         kotlinVersion = findProperty('android.kotlinVersion') ?: '1.9.23'
diff --git a/apps/native/ios/native.xcodeproj/project.pbxproj b/apps/native/ios/native.xcodeproj/project.pbxproj
index c7a1ce7..a113a40 100644
--- a/apps/native/ios/native.xcodeproj/project.pbxproj
+++ b/apps/native/ios/native.xcodeproj/project.pbxproj
@@ -351,7 +351,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
 				PRODUCT_BUNDLE_IDENTIFIER = space.variance.internal;
-				PRODUCT_NAME = native;
+				PRODUCT_NAME = "native";
 				SWIFT_OBJC_BRIDGING_HEADER = "native/native-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -379,7 +379,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = space.variance.internal;
-				PRODUCT_NAME = native;
+				PRODUCT_NAME = "native";
 				SWIFT_OBJC_BRIDGING_HEADER = "native/native-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
diff --git a/apps/native/tsconfig.json b/apps/native/tsconfig.json
index 21a973b..2d3ae1a 100644
--- a/apps/native/tsconfig.json
+++ b/apps/native/tsconfig.json
@@ -1,7 +1,8 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "moduleResolution": "Bundler"
   },
   "include": [
     "**/*.ts",
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 061268c..ab3f237 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,12 +1,46 @@
 "use client";
 import "@vaariance/ui/styles.css";
-import { Button } from "@vaariance/ui";
+import { Button, Text } from "@vaariance/ui";
+import Cosmr1CredentialHandlerModule from "@vaariance/cred-web";
 
 export default function Web() {
+  const credentialManager = Cosmr1CredentialHandlerModule();
+
+  const register = async () => {
+    const result = await credentialManager.register({
+      attestation: "none",
+      challenge: Buffer.from(btoa("register me"), "base64"),
+      rp: {
+        id: "localhost",
+        name: "localhost",
+      },
+      user: {
+        displayName: "user",
+        id: Buffer.from(btoa("user id"), "base64"),
+        name: "user@localhost.3000",
+      },
+      timeout: 60000,
+    });
+    console.log(result);
+  };
+
+  const authenticate = async () => {
+    const result = await credentialManager.authenticate({
+      challenge: Buffer.from(btoa("sign this"), "base64"),
+      timeout: 6000,
+      userVerification: "required",
+      rpId: "localhost",
+    });
+    console.log(result);
+  };
   return (
-    <div className="flex-1 items-center justify-center">
-      <h1>Web</h1>
-      <Button onPress={() => console.log("Pressed!")}>click me</Button>
+    <div className="w-full h-screen flex flex-col-reverse items-center justify-center bg-background gap-5">
+      <Button variant={"default"} onPress={register}>
+        <Text>Create A Passkey</Text>
+      </Button>
+      <Button variant={"default"} onPress={authenticate}>
+        <Text>Sign in with Passkey</Text>
+      </Button>
     </div>
   );
 }
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index 4f11a03..40c3d68 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 71ca107..e4d1e94 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -1,5 +1,10 @@
 module.exports = {
   reactStrictMode: true,
+  transpilePackages: [
+    "nativewind",
+    "react-native-css-interop",
+    "@vaariance/ui",
+  ],
   webpack: (config) => {
     config.resolve.alias = {
       ...(config.resolve.alias || {}),
diff --git a/apps/web/package.json b/apps/web/package.json
index e562b0a..f9a703c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -16,13 +16,16 @@
     "react-native-web": "^0.19.10"
   },
   "devDependencies": {
-    "@vaariance/configs": "*",
     "@types/node": "^20.10.6",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
+    "@vaariance/configs": "*",
+    "autoprefixer": "^10.4.20",
     "babel-plugin-react-native-web": "^0.19.10",
     "eslint": "^8.56.0",
     "eslint-config-next": "14.0.4",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
     "typescript": "^5.3.3"
   }
 }
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index c5c52d0..f9090ce 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -1,6 +1,8 @@
 {
   "extends": "@vaariance/configs/typescript/nextjs.json",
   "compilerOptions": {
+    "moduleResolution": "Bundler",
+    "jsxImportSource": "nativewind",
     "plugins": [{ "name": "next" }]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
diff --git a/bun.lockb b/bun.lockb
index 8970059..43ceeee 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/configs/tailwind/tailwind.config.js b/packages/configs/tailwind/tailwind.config.js
index b508571..e3a864a 100644
--- a/packages/configs/tailwind/tailwind.config.js
+++ b/packages/configs/tailwind/tailwind.config.js
@@ -5,10 +5,10 @@ module.exports = {
   darkMode: "class",
   content: [
     "./app/**/*.{js,jsx,ts,tsx}",
-    "../../packages/ui/**/*.{js,ts,jsx,tsx}",
-    "./**/*.{js,ts,jsx,tsx}",
+    "../../packages/ui/src/**/*.{ts,tsx}",
   ],
   presets: [require("nativewind/preset")],
+  important: "html",
   theme: {
     extend: {
       colors: {
diff --git a/packages/cred-native/android/build.gradle b/packages/cred-native/android/build.gradle
index 52c62c2..4c1a232 100644
--- a/packages/cred-native/android/build.gradle
+++ b/packages/cred-native/android/build.gradle
@@ -25,7 +25,7 @@ if (useManagedAndroidSdkVersions) {
   project.android {
     compileSdkVersion safeExtGet("compileSdkVersion", 34)
     defaultConfig {
-      minSdkVersion safeExtGet("minSdkVersion", 21)
+      minSdkVersion safeExtGet("minSdkVersion", 28)
       targetSdkVersion safeExtGet("targetSdkVersion", 34)
     }
   }
@@ -44,8 +44,8 @@ android {
 
 dependencies {
   // Credentials and Google Sign-In
-  implementation "androidx.credentials:credentials:1.5.0-alpha05"
-  implementation "androidx.credentials:credentials-play-services-auth:1.5.0-alpha05"
+  implementation "androidx.credentials:credentials:1.2.2"
+  implementation "androidx.credentials:credentials-play-services-auth:1.2.2"
 
   // utility
   implementation 'com.google.code.gson:gson:2.9.0'
diff --git a/packages/cred-web/index.ts b/packages/cred-web/index.ts
index 22e9cf5..16c02b8 100644
--- a/packages/cred-web/index.ts
+++ b/packages/cred-web/index.ts
@@ -186,7 +186,7 @@ const Cosmr1CredentialHandlerModule = (
       }),
   };
 
-  return Object.assign(moduleObject, mainFunctions);
+  return Object.assign(moduleObject, helpers, mainFunctions);
 };
 
 export default Cosmr1CredentialHandlerModule;
diff --git a/packages/shared-types/nativewind-env.d.ts b/packages/ui/nativewind-env.d.ts
similarity index 100%
rename from packages/shared-types/nativewind-env.d.ts
rename to packages/ui/nativewind-env.d.ts
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 3eeeb26..2202ee7 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,20 +1,19 @@
 {
   "name": "@vaariance/ui",
   "version": "0.0.0",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "sideEffects": [
     "**/*.css"
   ],
+  "type": "module",
   "exports": {
-    ".": "./dist/index.js",
-    "./*": "./dist/*",
-    "./styles.css": "./styles.css"
+    ".": "./src/index.ts",
+    "./*": "./src/*",
+    "./styles.css": "./src/styles.css"
   },
   "scripts": {
-    "prebuild": "tsup",
-    "dev": "tsup --watch",
-    "clean": "rm -rf dist"
+    "dev": "pnpm build --watch",
+    "build": "tsc --noEmit",
+    "clean": "rm -rf .swc .turbo dist"
   },
   "devDependencies": {
     "@vaariance/configs": "*",
@@ -40,9 +39,5 @@
     "react-native": "*",
     "nativewind": "*",
     "tailwindcss-animate": "*"
-  },
-  "files": [
-    "dist",
-    "styles.css"
-  ]
+  }
 }
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
index 5e0e4a0..f7dc1c6 100644
--- a/packages/ui/src/components/ui/button.tsx
+++ b/packages/ui/src/components/ui/button.tsx
@@ -1,88 +1,91 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { Pressable } from 'react-native';
-import { TextClassContext } from '~/components/ui/text';
-import { cn } from '~/lib/utils';
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Pressable } from "react-native";
+import { TextClassContext } from "./text";
+import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
-  'group flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+  "group flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2",
   {
     variants: {
       variant: {
-        default: 'bg-primary web:hover:opacity-90 active:opacity-90',
-        destructive: 'bg-destructive web:hover:opacity-90 active:opacity-90',
+        default: "bg-primary web:hover:opacity-90 active:opacity-90",
+        destructive: "bg-destructive web:hover:opacity-90 active:opacity-90",
         outline:
-          'border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent',
-        secondary: 'bg-secondary web:hover:opacity-80 active:opacity-80',
-        ghost: 'web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent',
-        link: 'web:underline-offset-4 web:hover:underline web:focus:underline ',
+          "border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+        secondary: "bg-secondary web:hover:opacity-80 active:opacity-80",
+        ghost:
+          "web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+        link: "web:underline-offset-4 web:hover:underline web:focus:underline ",
       },
       size: {
-        default: 'h-10 px-4 py-2 native:h-12 native:px-5 native:py-3',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8 native:h-14',
-        icon: 'h-10 w-10',
+        default: "h-10 px-4 py-2 native:h-12 native:px-5 native:py-3",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8 native:h-14",
+        icon: "h-10 w-10",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
-  }
+  },
 );
 
 const buttonTextVariants = cva(
-  'web:whitespace-nowrap text-sm native:text-base font-medium text-foreground web:transition-colors',
+  "web:whitespace-nowrap text-sm native:text-base font-medium text-foreground web:transition-colors",
   {
     variants: {
       variant: {
-        default: 'text-primary-foreground',
-        destructive: 'text-destructive-foreground',
-        outline: 'group-active:text-accent-foreground',
-        secondary: 'text-secondary-foreground group-active:text-secondary-foreground',
-        ghost: 'group-active:text-accent-foreground',
-        link: 'text-primary group-active:underline',
+        default: "text-primary-foreground",
+        destructive: "text-destructive-foreground",
+        outline: "group-active:text-accent-foreground",
+        secondary:
+          "text-secondary-foreground group-active:text-secondary-foreground",
+        ghost: "group-active:text-accent-foreground",
+        link: "text-primary group-active:underline",
       },
       size: {
-        default: '',
-        sm: '',
-        lg: 'native:text-lg',
-        icon: '',
+        default: "",
+        sm: "",
+        lg: "native:text-lg",
+        icon: "",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
-  }
+  },
 );
 
 type ButtonProps = React.ComponentPropsWithoutRef<typeof Pressable> &
   VariantProps<typeof buttonVariants>;
 
-const Button = React.forwardRef<React.ElementRef<typeof Pressable>, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
-    return (
-      <TextClassContext.Provider
-        value={cn(
-          props.disabled && 'web:pointer-events-none',
-          buttonTextVariants({ variant, size })
+const Button = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ButtonProps
+>(({ className, variant, size, ...props }, ref) => {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        props.disabled && "web:pointer-events-none",
+        buttonTextVariants({ variant, size }),
+      )}
+    >
+      <Pressable
+        className={cn(
+          props.disabled && "opacity-50 web:pointer-events-none",
+          buttonVariants({ variant, size, className }),
         )}
-      >
-        <Pressable
-          className={cn(
-            props.disabled && 'opacity-50 web:pointer-events-none',
-            buttonVariants({ variant, size, className })
-          )}
-          ref={ref}
-          role='button'
-          {...props}
-        />
-      </TextClassContext.Provider>
-    );
-  }
-);
-Button.displayName = 'Button';
+        ref={ref}
+        role="button"
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+Button.displayName = "Button";
 
 export { Button, buttonTextVariants, buttonVariants };
 export type { ButtonProps };
diff --git a/packages/ui/src/components/ui/text.tsx b/packages/ui/src/components/ui/text.tsx
index 954c9dd..da0d9d1 100644
--- a/packages/ui/src/components/ui/text.tsx
+++ b/packages/ui/src/components/ui/text.tsx
@@ -1,8 +1,8 @@
-import * as Slot from '@rn-primitives/slot';
-import { SlottableTextProps, TextRef } from '@rn-primitives/types';
-import * as React from 'react';
-import { Text as RNText } from 'react-native';
-import { cn } from '~/lib/utils';
+import * as Slot from "@rn-primitives/slot";
+import { SlottableTextProps, TextRef } from "@rn-primitives/types";
+import * as React from "react";
+import { Text as RNText } from "react-native";
+import { cn } from "../../lib/utils";
 
 const TextClassContext = React.createContext<string | undefined>(undefined);
 
@@ -12,13 +12,17 @@ const Text = React.forwardRef<TextRef, SlottableTextProps>(
     const Component = asChild ? Slot.Text : RNText;
     return (
       <Component
-        className={cn('text-base text-foreground web:select-text', textClass, className)}
+        className={cn(
+          "text-base text-foreground web:select-text",
+          textClass,
+          className,
+        )}
         ref={ref}
         {...props}
       />
     );
-  }
+  },
 );
-Text.displayName = 'Text';
+Text.displayName = "Text";
 
 export { Text, TextClassContext };
diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.ts
similarity index 100%
rename from packages/ui/src/icons/index.tsx
rename to packages/ui/src/icons/index.ts
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.ts
similarity index 100%
rename from packages/ui/src/index.tsx
rename to packages/ui/src/index.ts
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 208a6dd..2095f64 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,13 +1,9 @@
 {
   "extends": "@vaariance/configs/typescript/react-native-library",
-  "include": ["src", "../shared-types/**/*.d.ts"],
+  "include": ["src", "nativewind-env.d.ts"],
   "exclude": ["dist", "build", "node_modules"],
   "compilerOptions": {
     "strict": true,
-    "rootDir": "src",
-    "baseUrl": "src",
-    "paths": {
-      "~/*": ["*"]
-    }
+    "rootDir": "src"
   }
 }
diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts
deleted file mode 100644
index 7104bc6..0000000
--- a/packages/ui/tsup.config.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defineConfig, Options } from "tsup";
-
-export default defineConfig((options: Options) => ({
-  entry: {
-    index: "src/index.tsx",
-  },
-  banner: {
-    js: "'use client'",
-  },
-  clean: true,
-  format: ["cjs", "esm"],
-  external: ["react"],
-  dts: true,
-  ...options,
-}));