diff --git a/examples/with-html/index.html b/examples/with-html/index.html
index 29b790b8..fc9088bf 100644
--- a/examples/with-html/index.html
+++ b/examples/with-html/index.html
@@ -53,6 +53,7 @@ <h1 id="heading">idkit-js</h1>
 			})
 
 			document.getElementById('open-idkit').addEventListener('click', async () => {
+				console.log(IDKit.isInitialized)
 				await IDKit.open()
 			})
 		</script>
diff --git a/packages/react/package.json b/packages/react/package.json
index 52e236bb..6a5ce7a3 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -78,6 +78,7 @@
 		"@typescript-eslint/eslint-plugin": "^6.21.0",
 		"@typescript-eslint/parser": "^6.21.0",
 		"autoprefixer": "^10.4.19",
+		"clsx": "^2.1.1",
 		"eslint": "8.54.0",
 		"eslint-config-prettier": "^8.10.0",
 		"eslint-plugin-compat": "^4.2.0",
diff --git a/packages/react/src/components/IDKitWidget/BaseWidget.tsx b/packages/react/src/components/IDKitWidget/BaseWidget.tsx
index 8dc9b982..89cdd8d0 100644
--- a/packages/react/src/components/IDKitWidget/BaseWidget.tsx
+++ b/packages/react/src/components/IDKitWidget/BaseWidget.tsx
@@ -97,7 +97,7 @@ const IDKitWidget: FC<WidgetProps> = ({ children, ...config }) => {
 														<Toast.Viewport className="flex justify-center" />
 														<div className="mx-6 mb-12 flex items-center justify-between">
 															<Dialog.Close className="flex items-center justify-center rounded-full dark:text-white">
-																<XMarkIcon className="h-5 w-5" />
+																<XMarkIcon className="size-5" />
 															</Dialog.Close>
 														</div>
 														<div className="relative mx-6 mb-6 flex flex-1 flex-col items-center justify-center">
diff --git a/packages/react/src/components/IDKitWidget/States/WorldID/QRState.tsx b/packages/react/src/components/IDKitWidget/States/WorldID/QRState.tsx
index 32b4bd2e..2042fcc4 100644
--- a/packages/react/src/components/IDKitWidget/States/WorldID/QRState.tsx
+++ b/packages/react/src/components/IDKitWidget/States/WorldID/QRState.tsx
@@ -8,6 +8,7 @@ import { useCallback, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 import WorldcoinIcon from '@/components/Icons/WorldcoinIcon'
 import QRPlaceholderIcon from '@/components/Icons/QRPlaceholderIcon'
+import clsx from 'clsx'
 
 type Props = {
 	qrData: string | null
@@ -28,19 +29,19 @@ const QRState: FC<Props> = ({ qrData, showQR, setShowQR }) => {
 
 	return (
 		<>
-			<div className="mb-10 space-y-4 md:hidden">
+			<div className={clsx("md:hidden", {"mb-10 space-y-4": !showQR})}>
 				<motion.a
 					href={qrData ?? ''}
 					whileTap={{ scale: 0.95 }}
 					whileHover={{ scale: 1.05 }}
 					transition={{ layout: { duration: 0.15 } }}
 					layoutId={media == 'desktop' ? undefined : 'worldid-button'}
-					className={classNames(
-						'flex w-full space-x-2 items-center px-4 py-4 border border-transparent font-medium rounded-2xl shadow-sm',
-						'bg-0d151d dark:bg-white text-white dark:text-0d151d'
+					className={clsx(
+						'flex w-full items-center space-x-2 rounded-2xl border border-transparent p-4 font-medium shadow-sm',
+						'bg-0d151d text-white dark:bg-white dark:text-0d151d', {hidden: showQR}
 					)}
 				>
-					<WorldcoinIcon className="h-5 w-5" />
+					<WorldcoinIcon className="size-5" />
 					<motion.span
 						className="flex-1 text-center"
 						transition={{ layout: { duration: 0.15 } }}
@@ -49,8 +50,8 @@ const QRState: FC<Props> = ({ qrData, showQR, setShowQR }) => {
 						{__('Open Worldcoin App')}
 					</motion.span>
 				</motion.a>
-				<div className="space-y-4">
-					<div className="flex items-center space-x-4 ">
+				<div className={clsx("mb-3", {"space-y-4": !showQR})}>
+					<div className={clsx("flex items-center space-x-4 ", {hidden: showQR})}>
 						<hr className="flex-1" />
 						<span className="text-xs font-medium text-9ba3ae">or</span>
 						<hr className="flex-1" />
@@ -114,8 +115,8 @@ const QRState: FC<Props> = ({ qrData, showQR, setShowQR }) => {
 									<Qrcode data={qrData} size={244} />
 								</div>
 							) : (
-								<div className="flex h-[244px] w-[244px] items-center justify-center">
-									<QRPlaceholderIcon className="h-[244px] w-[244px] animate-pulse" />
+								<div className="flex size-[244px] items-center justify-center">
+									<QRPlaceholderIcon className="size-[244px] animate-pulse" />
 								</div>
 							)}
 						</div>
diff --git a/packages/react/src/components/IDKitWidget/States/WorldIDState.tsx b/packages/react/src/components/IDKitWidget/States/WorldIDState.tsx
index 5dc9a453..d6ffe71f 100644
--- a/packages/react/src/components/IDKitWidget/States/WorldIDState.tsx
+++ b/packages/react/src/components/IDKitWidget/States/WorldIDState.tsx
@@ -9,6 +9,7 @@ import { useWorldBridge } from '@/services/wld-bridge'
 import LoadingIcon from '@/components/Icons/LoadingIcon'
 import WorldcoinIcon from '@/components/Icons/WorldcoinIcon'
 import { AppErrorCodes, VerificationState, VerificationLevel } from '@worldcoin/idkit-core'
+import clsx from 'clsx'
 
 const getOptions = (store: IDKitStore) => ({
 	signal: store.signal,
@@ -67,7 +68,7 @@ const WorldIDState = () => {
 	}, [result, handleVerify, verificationState, setStage, errorCode, setErrorState, verification_level])
 
 	return (
-		<div className="-mt-6 space-y-10">
+		<div className={clsx("-mt-6 space-y-5", {"space-y-10": !showQR})}>
 			<div>
 				<div className="mb-4 flex items-center justify-center">
 					<WorldcoinIcon className="h-10 text-0d151d dark:text-white" />
@@ -82,7 +83,7 @@ const WorldIDState = () => {
 			<div className="relative">
 				{verificationState == VerificationState.WaitingForApp && (
 					<div className="absolute inset-0 flex flex-col items-center justify-center space-y-6">
-						<LoadingIcon className="h-6 w-6" />
+						<LoadingIcon className="size-6" />
 						<div>
 							<p className="font-bold text-657080">Verifying</p>
 							<p className="text-sm text-657080">Please continue in app</p>
diff --git a/packages/standalone/src/index.tsx b/packages/standalone/src/index.tsx
index bd1d7ad9..603c718a 100644
--- a/packages/standalone/src/index.tsx
+++ b/packages/standalone/src/index.tsx
@@ -54,6 +54,13 @@ const open = () => {
 	})
 }
 
+const close = () => {
+	return new Promise((_, reject) => {
+		if (!isInitialized) return reject(__('IDKitWidget is not initialized'))
+		useIDKitStore.setState({ open: false })
+	})
+}
+
 /**
  * Reset internal state. Useful for unit-testing
  */
@@ -65,7 +72,16 @@ const reset = () => {
 	useIDKitStore.destroy()
 }
 
-const IDKit = { init, update, open, reset }
+const IDKit = {
+	init,
+	update,
+	open,
+	close,
+	reset,
+	get isInitialized() {
+		return isInitialized
+	},
+}
 window.IDKit = IDKit
 
 declare global {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9df9cbc8..9838df39 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -141,6 +141,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.19(postcss@8.4.39)
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       eslint:
         specifier: 8.54.0
         version: 8.54.0
@@ -1506,6 +1509,10 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -5007,6 +5014,8 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  clsx@2.1.1: {}
+
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3