diff --git a/src/nb/components/composites/Alert/basic.tsx b/src/nb/components/composites/Alert/basic.tsx
index 2b9b233..1d3b99e 100644
--- a/src/nb/components/composites/Alert/basic.tsx
+++ b/src/nb/components/composites/Alert/basic.tsx
@@ -13,26 +13,26 @@ import {
 export const Example = () => {
   return (
     <Center>
-      <Alert w="90%" maxW="400" colorScheme="info">
-        <VStack space={1} flexShrink={1} w="100%">
+      <Alert w='90%' _web={{ maxWidth: '400' }} colorScheme='info'>
+        <VStack space={1} flexShrink={1} w='100%'>
           <HStack
             flexShrink={1}
             space={2}
-            alignItems="center"
-            justifyContent="space-between"
+            alignItems='center'
+            justifyContent='space-between'
           >
-            <HStack space={2} flexShrink={1} alignItems="center">
+            <HStack space={2} flexShrink={1} alignItems='center'>
               <Alert.Icon />
-              <Heading fontSize="md" fontWeight="medium" color="coolGray.800">
+              <Heading fontSize='md' fontWeight='medium' color='coolGray.800'>
                 We are going live in July!
               </Heading>
             </HStack>
             <IconButton
-              variant="unstyled"
-              icon={<CloseIcon size="3" color="coolGray.600" />}
+              variant='unstyled'
+              icon={<CloseIcon size='3' color='coolGray.600' />}
             />
           </HStack>
-          <Box pl="6" _text={{ color: 'coolGray.600' }}>
+          <Box pl='6' _text={{ color: 'coolGray.600' }}>
             We are happy to announce that we are going live on July 28th. Get
             ready!
           </Box>
diff --git a/src/nb/components/composites/Alert/usage.tsx b/src/nb/components/composites/Alert/usage.tsx
index 8fec435..a510e17 100644
--- a/src/nb/components/composites/Alert/usage.tsx
+++ b/src/nb/components/composites/Alert/usage.tsx
@@ -12,26 +12,26 @@ import {
 export function Example() {
   return (
     <Center>
-      <Alert w="90%" maxW="400" status="info" colorScheme="info">
-        <VStack space={2} flexShrink={1} w="100%">
+      <Alert w='90%' _web={{ maxW: '400' }} status='info' colorScheme='info'>
+        <VStack space={2} flexShrink={1} w='100%'>
           <HStack
             flexShrink={1}
             space={2}
-            alignItems="center"
-            justifyContent="space-between"
+            alignItems='center'
+            justifyContent='space-between'
           >
-            <HStack flexShrink={1} space={2} alignItems="center">
+            <HStack flexShrink={1} space={2} alignItems='center'>
               <Alert.Icon />
-              <Text fontSize="md" fontWeight="medium" color="coolGray.800">
+              <Text fontSize='md' fontWeight='medium' color='coolGray.800'>
                 We are going live in July!
               </Text>
             </HStack>
             <IconButton
-              variant="unstyled"
-              icon={<CloseIcon size="3" color="coolGray.600" />}
+              variant='unstyled'
+              icon={<CloseIcon size='3' color='coolGray.600' />}
             />
           </HStack>
-          <Box pl="6" _text={{ color: 'coolGray.600' }}>
+          <Box pl='6' _text={{ color: 'coolGray.600' }}>
             We are happy to announce that we are going live on July 28th. Get
             ready!
           </Box>