diff --git a/.editorconfig b/.editorconfig
index b21e6055..63627032 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -2,7 +2,7 @@ root = true
 
 [*]
 indent_style = tab
-indent_size = 2
+indent_size = 4
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
diff --git a/packages/react/src/components/IDKitWidget/States/ErrorState.tsx b/packages/react/src/components/IDKitWidget/States/ErrorState.tsx
index c2564977..e858406b 100644
--- a/packages/react/src/components/IDKitWidget/States/ErrorState.tsx
+++ b/packages/react/src/components/IDKitWidget/States/ErrorState.tsx
@@ -3,6 +3,7 @@ import useIDKitStore from '@/store/idkit'
 import type { IDKitStore } from '@/store/idkit'
 import ErrorIcon from '@/components/Icons/ErrorIcon'
 import { AppErrorCodes } from '@worldcoin/idkit-core'
+import ReloadIcon from '@/components/Icons/ReloadIcon'
 
 const getParams = ({ retryFlow, errorState }: IDKitStore) => ({ retryFlow, errorState })
 
@@ -54,8 +55,9 @@ const ErrorState = () => {
 				<button
 					type="button"
 					onClick={retryFlow}
-					className="inline-flex items-center rounded-full border border-transparent bg-indigo-600 px-8 py-3 font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-indigo-600"
+					className="inline-flex items-center rounded-lg border border-ebecef bg-transparent px-8 py-3 font-medium text-3c424b shadow-sm transition duration-300 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40"
 				>
+					<ReloadIcon className="mr-1.5 h-5 w-5" />
 					{__('Try Again')}
 				</button>
 			</div>
diff --git a/packages/react/src/components/IDKitWidget/States/WorldID/QRState.tsx b/packages/react/src/components/IDKitWidget/States/WorldID/QRState.tsx
index aa119f37..4a064779 100644
--- a/packages/react/src/components/IDKitWidget/States/WorldID/QRState.tsx
+++ b/packages/react/src/components/IDKitWidget/States/WorldID/QRState.tsx
@@ -6,7 +6,6 @@ import { classNames } from '@/lib/utils'
 import Qrcode from '@/components/QRCode'
 import { useCallback, useState } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
-import LoadingIcon from '@/components/Icons/LoadingIcon'
 import WorldcoinIcon from '@/components/Icons/WorldcoinIcon'
 import QRPlaceholderIcon from '@/components/Icons/QRPlaceholderIcon'
 
@@ -45,7 +44,7 @@ const QRState: FC<Props> = ({ qrData, showQR, setShowQR }) => {
 										opacity: 1,
 										height: 'auto',
 										marginTop: 8,
-										y: 6,
+										y: -20,
 										transition: {
 											duration: 0.25,
 											opacity: { delay: 0.05, duration: 0.2 },
diff --git a/packages/react/src/components/IDKitWidget/States/WorldIDState.tsx b/packages/react/src/components/IDKitWidget/States/WorldIDState.tsx
index 72692ff3..33c660d6 100644
--- a/packages/react/src/components/IDKitWidget/States/WorldIDState.tsx
+++ b/packages/react/src/components/IDKitWidget/States/WorldIDState.tsx
@@ -82,13 +82,26 @@ const WorldIDState = () => {
 					Please use your World App to scan the QR code
 				</p>
 			</div>
-			{verificationState === VerificationState.WaitingForApp ? (
-				<div className="flex items-center justify-center">
-					<LoadingIcon className="h-20 w-20" />
+			<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" />
+						<div>
+							<p className="font-bold text-657080">Verifying</p>
+							<p className="text-sm text-657080">Please continue in app</p>
+						</div>
+					</div>
+				)}
+				<div
+					className={
+						verificationState === VerificationState.WaitingForApp
+							? 'opacity-40 blur-lg transition duration-500 ease-in-out'
+							: 'transition duration-500 ease-in-out'
+					}
+				>
+					<QRState showQR={showQR} setShowQR={setShowQR} qrData={connectorURI} />
 				</div>
-			) : (
-				<QRState showQR={showQR} setShowQR={setShowQR} qrData={connectorURI} />
-			)}
+			</div>
 		</div>
 	)
 }
diff --git a/packages/react/src/components/Icons/LoadingIcon.tsx b/packages/react/src/components/Icons/LoadingIcon.tsx
index 58efd14d..a34a68d8 100644
--- a/packages/react/src/components/Icons/LoadingIcon.tsx
+++ b/packages/react/src/components/Icons/LoadingIcon.tsx
@@ -1,16 +1,19 @@
-import { __ } from '@/lang'
+import type { SVGAttributes } from 'react'
 
-const LoadingIcon = ({ className = '' }: { className?: string }) => (
-	<div className="flex items-center justify-center">
-		<div
-			className={`inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] ${className}`}
-			role="status"
-		>
-			<span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
-				{__('Loading...')}
-			</span>
-		</div>
-	</div>
+const LoadingIcon = ({ className, ...props }: SVGAttributes<SVGElement>) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		className={`animate-spin motion-reduce:animate-[spin_1.5s_linear_infinite] ${className}`}
+		{...props}
+	>
+		<circle cx="12" cy="12" r="10.75" stroke="#191C20" strokeOpacity=".16" strokeWidth="2.5" />
+		<path
+			fill="#191C20"
+			d="M17.28 2.633c.338-.6.127-1.368-.505-1.642A12 12 0 0 0 7.459.892c-.638.261-.864 1.024-.539 1.632.326.607 1.08.827 1.725.584a9.504 9.504 0 0 1 6.897.073c.64.257 1.399.053 1.737-.548Z"
+		/>
+	</svg>
 )
 
 export default LoadingIcon
diff --git a/packages/react/src/components/Icons/ReloadIcon.tsx b/packages/react/src/components/Icons/ReloadIcon.tsx
new file mode 100644
index 00000000..a1cc1445
--- /dev/null
+++ b/packages/react/src/components/Icons/ReloadIcon.tsx
@@ -0,0 +1,15 @@
+import type { SVGAttributes } from 'react'
+
+const ReloadIcon = (props: SVGAttributes<SVGElement>) => (
+	<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+		<path
+			d="M12.3809 1.6665L13.3626 4.24214C12.3754 3.66434 11.2263 3.33317 9.99992 3.33317C6.31802 3.33317 3.33325 6.31794 3.33325 9.99984C3.33325 11.2141 3.6579 12.3526 4.22513 13.3332M7.61897 18.3332L6.63719 15.7575C7.62438 16.3353 8.77348 16.6665 9.99992 16.6665C13.6818 16.6665 16.6666 13.6817 16.6666 9.99984C16.6666 8.78555 16.3419 7.64708 15.7747 6.6665"
+			stroke="#3C424B"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+)
+
+export default ReloadIcon
diff --git a/packages/react/src/types/config.ts b/packages/react/src/types/config.ts
index 25299ebe..06f99e90 100644
--- a/packages/react/src/types/config.ts
+++ b/packages/react/src/types/config.ts
@@ -22,7 +22,10 @@ export type WidgetConfig = {
 
 export type Config = Required<Pick<IDKitConfig, 'action'>> &
 	WidgetConfig &
-	((Exclude<IDKitConfig, 'app_id'> & { advanced: { self_hosted: true } }) | (IDKitConfig & { advanced?: { self_hosted?: false } }))
+	(
+		| (Exclude<IDKitConfig, 'app_id'> & { advanced: { self_hosted: true } })
+		| (IDKitConfig & { advanced?: { self_hosted?: false } })
+	)
 
 export type WidgetProps = Config & {
 	children?: ({ open }: { open: () => void }) => JSX.Element
diff --git a/packages/react/tailwind.config.cjs b/packages/react/tailwind.config.cjs
index e401be1b..099456ab 100644
--- a/packages/react/tailwind.config.cjs
+++ b/packages/react/tailwind.config.cjs
@@ -27,19 +27,19 @@ module.exports = {
 	darkMode: 'class',
 	theme: {
 		fontSize: {
-			xs: ["12px", { lineHeight: "16px" }],
-			sm: ["14px", { lineHeight: "20px" }],
-			base: ["16px", { lineHeight: "24px" }],
-			lg: ["18px", { lineHeight: "28px" }],
-			xl: ["20px", { lineHeight: "28px" }],
-			"2xl": ["24px", { lineHeight: "32px" }],
-			"3xl": ["30px", { lineHeight: "36px" }],
-			"4xl": ["36px", { lineHeight: "36px" }],
-			"5xl": ["48px", { lineHeight: "1" }],
-			"6xl": ["60px", { lineHeight: "1" }],
-			"7xl": ["72px", { lineHeight: "1" }],
-			"8xl": ["96px", { lineHeight: "1" }],
-			"9xl": ["144px", { lineHeight: "1" }],
+			xs: ['12px', { lineHeight: '16px' }],
+			sm: ['14px', { lineHeight: '20px' }],
+			base: ['16px', { lineHeight: '24px' }],
+			lg: ['18px', { lineHeight: '28px' }],
+			xl: ['20px', { lineHeight: '28px' }],
+			'2xl': ['24px', { lineHeight: '32px' }],
+			'3xl': ['30px', { lineHeight: '36px' }],
+			'4xl': ['36px', { lineHeight: '36px' }],
+			'5xl': ['48px', { lineHeight: '1' }],
+			'6xl': ['60px', { lineHeight: '1' }],
+			'7xl': ['72px', { lineHeight: '1' }],
+			'8xl': ['96px', { lineHeight: '1' }],
+			'9xl': ['144px', { lineHeight: '1' }],
 		},
 		spacing: {
 			px: '1px',
@@ -110,6 +110,7 @@ module.exports = {
 					'#0d151d',
 					'#1e40af',
 					'#29343f',
+					'#3c424b',
 					'#4940e0',
 					'#596673',
 					'#657080',
@@ -117,6 +118,7 @@ module.exports = {
 					'#9eafc0',
 					'#d3dfea',
 					'#e5e7eb',
+					'#ebecef',
 					'#ece8fb',
 					'#f1f5f8',
 					'#f2f5f9',