diff --git a/src/components/Simulator/screens/ConnectWeb3/Browser.tsx b/src/components/Simulator/screens/ConnectWeb3/Browser.tsx
index be8d5259425..0738d499162 100644
--- a/src/components/Simulator/screens/ConnectWeb3/Browser.tsx
+++ b/src/components/Simulator/screens/ConnectWeb3/Browser.tsx
@@ -1,17 +1,18 @@
-import React, { useEffect, useState } from "react"
+import React, { type HTMLAttributes, useEffect, useState } from "react"
 import { motion } from "framer-motion"
 import { BsTriangle } from "react-icons/bs"
 import { IoEllipsisHorizontalSharp } from "react-icons/io5"
 import { PiMagnifyingGlass } from "react-icons/pi"
 import { TbWorldWww } from "react-icons/tb"
-import { Box, Flex, type FlexProps, Icon, Text } from "@chakra-ui/react"
+
+import { Flex, HStack } from "@/components/ui/flex"
 
 import { BASE_ANIMATION_DELAY_SEC } from "../../constants"
 import { NotificationPopover } from "../../NotificationPopover"
 
 import { EXAMPLE_APP_URL } from "./constants"
 
-type BrowserProps = FlexProps
+type BrowserProps = HTMLAttributes<HTMLDivElement>
 
 export const Browser = ({ ...props }: BrowserProps) => {
   const [typing, setTyping] = useState(false)
@@ -35,67 +36,45 @@ export const Browser = ({ ...props }: BrowserProps) => {
   }
 
   return (
-    <Flex direction="column" h="full" bg="body.light" {...props}>
-      <Box bg="background.highlight" w="full" px={3} pt={9} pb={3}>
+    <Flex className="h-full flex-col bg-body-light" {...props}>
+      <div className="w-full bg-background-highlight px-3 pb-3 pt-9">
         <NotificationPopover
           title="Example walkthrough"
           content="Try logging into a real app with your wallet when finished here"
         >
-          <Flex
-            bg="background.base"
-            borderRadius="base"
-            px={3}
-            py={2}
-            align="center"
-            color="disabled"
-            cursor="default"
-          >
-            <Box
-              borderInlineEnd="1px"
-              borderColor="background.highlight"
-              flex={1}
-            >
+          <HStack className="cursor-default gap-0 rounded bg-background px-3 py-2 text-disabled">
+            <div className="flex-1 border-e border-background-highlight">
               {typing ? (
-                <Text
-                  as={motion.p}
+                <motion.p
+                  className="text-body-medium"
                   variants={sentence}
                   initial="hidden"
                   animate="visible"
-                  color="body.medium"
                 >
                   {EXAMPLE_APP_URL.split("").map((char, index) => (
                     <motion.span key={char + "-" + index} variants={letter}>
                       {char}
                     </motion.span>
                   ))}
-                </Text>
+                </motion.p>
               ) : (
-                <Text>Search or enter website</Text>
+                <p>Search or enter website</p>
               )}
-            </Box>
-            <Icon as={TbWorldWww} ms={3} />
-          </Flex>
+            </div>
+            <TbWorldWww className="ms-3" />
+          </HStack>
         </NotificationPopover>
-      </Box>
+      </div>
 
-      <Flex flex={1} justify="center" pt={{ base: 20, md: 24 }}>
-        <Icon as={TbWorldWww} fontSize="8xl" strokeWidth="1" color="disabled" />
+      <Flex className="flex-1 justify-center pt-20 md:pt-24">
+        <TbWorldWww className="stroke-1 text-8xl text-disabled" />
       </Flex>
 
-      <Flex
-        bg="background.highlight"
-        w="full"
-        px={3}
-        pb={9}
-        pt={4}
-        justify="space-around"
-        fontSize="xl"
-        color="disabled"
-      >
-        <Icon as={BsTriangle} transform="rotate(-90deg)" />
-        <Icon as={BsTriangle} transform="rotate(90deg)" />
-        <Icon as={PiMagnifyingGlass} />
-        <Icon as={IoEllipsisHorizontalSharp} />
+      <Flex className="w-full justify-around bg-background-highlight px-3 pb-9 pt-4 text-xl text-disabled">
+        <BsTriangle className="-rotate-90" />
+        <BsTriangle className="rotate-90" />
+        <PiMagnifyingGlass />
+        <IoEllipsisHorizontalSharp />
       </Flex>
     </Flex>
   )
diff --git a/src/components/Simulator/screens/ConnectWeb3/Slider.tsx b/src/components/Simulator/screens/ConnectWeb3/Slider.tsx
index 998ea050b11..99ab4418a05 100644
--- a/src/components/Simulator/screens/ConnectWeb3/Slider.tsx
+++ b/src/components/Simulator/screens/ConnectWeb3/Slider.tsx
@@ -1,61 +1,45 @@
-import React from "react"
+import { type ReactNode } from "react"
 import { motion } from "framer-motion"
 import { PiCheckThin } from "react-icons/pi"
-import { Box, Flex, Grid, Icon, Text, TextProps } from "@chakra-ui/react"
+
+import { HStack, VStack } from "@/components/ui/flex"
 
 import { EthGlyphIcon } from "../../icons"
 
-type SliderProps = Pick<TextProps, "children"> & {
+type SliderProps = {
   isConnected: boolean
   displayUrl: string
+  children: ReactNode
 }
 export const Slider = ({ isConnected, displayUrl, children }: SliderProps) => {
-  const ICON_SIZE = "4.5rem" as const
   return (
     <>
-      <Box
+      <motion.div
         key="backdrop"
-        as={motion.div}
-        position="absolute"
-        inset={0}
-        bg="blackAlpha.300"
-        backdropFilter="blur(2px)"
+        className="absolute inset-0 bg-black/15 backdrop-blur-[2px]"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
       />
       <motion.div
         key="slider"
-        style={{ position: "absolute", height: "360px", width: "100%" }}
+        className="absolute h-[360px] w-full"
         initial={{ bottom: "-100%" }}
         animate={{ bottom: 0 }}
         exit={{ bottom: "-100%" }}
         transition={{ duration: 0.75, ease: "easeOut" }}
+        data-testid="slider-box"
       >
-        <Flex
-          direction="column"
-          alignItems="center"
-          px={6}
-          py={8}
-          h="full"
-          w="full"
-          bg="background.base"
-          borderTopRadius="2xl"
-        >
+        <VStack className="size-full gap-0 rounded-t-2xl bg-background px-6 py-8">
           {isConnected ? (
-            <Flex direction="column" alignItems="center" pt={8} gap={4}>
+            <VStack className="gap-4 pt-8">
               <motion.div
                 key="checkmark"
                 initial={{ scale: 0 }}
                 animate={{ scale: 1 }}
                 transition={{ type: "spring", delay: 0.25 }}
               >
-                <Icon
-                  as={PiCheckThin}
-                  w={ICON_SIZE}
-                  h={ICON_SIZE}
-                  transform="rotate(-10deg)"
-                />
+                <PiCheckThin className="-rotate-[10deg] text-[4.5rem]" />
               </motion.div>
               <motion.div
                 key="text"
@@ -63,49 +47,29 @@ export const Slider = ({ isConnected, displayUrl, children }: SliderProps) => {
                 animate={{ opacity: 1 }}
                 transition={{ delay: 0.15 }}
               >
-                <Text textAlign="center" px={{ base: 4, md: 8 }}>
+                <p className="px-4 text-center md:px-8">
                   You&apos;re logged in!
-                </Text>
+                </p>
               </motion.div>
-            </Flex>
+            </VStack>
           ) : (
             <>
-              <Text textAlign="center" fontWeight="bold" fontSize="lg" mb={4}>
+              <p className="mb-4 text-center text-lg font-bold">
                 Connect account?
-              </Text>
+              </p>
               {/* URL Pill */}
-              <Flex
-                bg="blackAlpha.200"
-                px={2}
-                py={1}
-                borderRadius="full"
-                fontSize="xs"
-                alignItems="center"
-                gap={2}
-                mb={6}
-              >
-                <Grid
-                  borderRadius="full"
-                  bg="body.base"
-                  w={5}
-                  h={5}
-                  placeItems="center"
-                >
-                  <Icon
-                    as={EthGlyphIcon}
-                    color="background.base"
-                    fontSize="sm"
-                  />
-                </Grid>
-                <Text mb={0} me={0.5}>
-                  {displayUrl}
-                </Text>
-              </Flex>
+              <HStack className="mb-6 rounded-full bg-black/5 px-2 py-1 text-xs">
+                <div className="grid size-5 place-items-center rounded-full bg-body">
+                  {/* TODO: Remove important flags and `size` class when icon is migrated */}
+                  <EthGlyphIcon className="!size-[1em] !text-sm !text-background" />
+                </div>
+                <p className="me-0.5">{displayUrl}</p>
+              </HStack>
               {/* Information */}
-              <Text>{children}</Text>
+              <p>{children}</p>
             </>
           )}
-        </Flex>
+        </VStack>
       </motion.div>
     </>
   )
diff --git a/src/components/Simulator/screens/ConnectWeb3/Web3App.tsx b/src/components/Simulator/screens/ConnectWeb3/Web3App.tsx
index 7d11b6c0550..428ceeefe4f 100644
--- a/src/components/Simulator/screens/ConnectWeb3/Web3App.tsx
+++ b/src/components/Simulator/screens/ConnectWeb3/Web3App.tsx
@@ -1,19 +1,15 @@
-import React from "react"
+import React, { type HTMLAttributes } from "react"
 import { GrMenu } from "react-icons/gr"
-import {
-  Box,
-  type BoxProps,
-  Flex,
-  Icon,
-  Text,
-  useColorModeValue,
-} from "@chakra-ui/react"
+
+import { HStack } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
 
 import { FAKE_DEMO_ADDRESS } from "../../constants"
 import { EthGlyphIcon } from "../../icons"
 import { NotificationPopover } from "../../NotificationPopover"
 
-type Web3AppProps = BoxProps & {
+type Web3AppProps = HTMLAttributes<HTMLDivElement> & {
   displayUrl: string
   appName?: string
 }
@@ -21,37 +17,36 @@ export const Web3App = ({
   displayUrl,
   appName,
   children,
-  ...boxProps
+  className,
+  ...rest
 }: Web3AppProps) => {
-  const bg = useColorModeValue("#e8e8e8", "#171717")
-
   return (
-    <Box h="full" w="full" bg="background.highlight" {...boxProps}>
-      <Box p={1} bg={bg}>
-        <Text textAlign="center" fontSize="xs" m={0}>
-          {displayUrl}
-        </Text>
-      </Box>
+    <div
+      className={cn("size-full bg-background-highlight", className)}
+      {...rest}
+    >
+      <div className="bg-[#e8e8e8] p-1 dark:bg-[#171717]">
+        <p className="text-center text-xs">{displayUrl}</p>
+      </div>
       <NotificationPopover
         title="Example walkthrough"
         content="Try out a real Ethereum application when finished here"
       >
-        <Flex p={6} fontSize="4xl" gap={3} alignItems="center">
-          <Icon as={EthGlyphIcon} />
-          <Box flex={1} cursor="default">
+        <HStack className="gap-3 p-6 text-4xl">
+          {/* TODO: Remove 'size' class when icon is migrated */}
+          <EthGlyphIcon className="!size-[1em]" />
+          <div className="flex-1 cursor-default">
             {appName && (
               <>
-                <Text fontSize="md" fontWeight="bold">
-                  {appName}
-                </Text>
-                <Text fontSize="sm">{FAKE_DEMO_ADDRESS}</Text>
+                <p className="text-md font-bold">{appName}</p>
+                <p className="text-sm">{FAKE_DEMO_ADDRESS}</p>
               </>
             )}
-          </Box>
-          <Icon as={GrMenu} sx={{ path: { stroke: "body.base" } }} />
-        </Flex>
+          </div>
+          <GrMenu className="[&>path]:stroke-body" />
+        </HStack>
       </NotificationPopover>
       {children}
-    </Box>
+    </div>
   )
 }
diff --git a/src/components/Simulator/screens/ConnectWeb3/__stories__/ConnectWeb3.stories.tsx b/src/components/Simulator/screens/ConnectWeb3/__stories__/ConnectWeb3.stories.tsx
new file mode 100644
index 00000000000..2d24c60928e
--- /dev/null
+++ b/src/components/Simulator/screens/ConnectWeb3/__stories__/ConnectWeb3.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react/*"
+import { fn } from "@storybook/test"
+
+import { Phone } from "@/components/Simulator/Phone"
+import { Template } from "@/components/Simulator/Template"
+
+import { ConnectWeb3 as Component } from "../"
+
+const meta = {
+  title: "Molecules / Display Content / Simulator / ConnectWeb3 Screen",
+  component: Component,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="mx-auto mt-8">
+        <Template>
+          <Phone>
+            <Story />
+          </Phone>
+        </Template>
+      </div>
+    ),
+  ],
+  args: {
+    nav: {
+      progressStepper: fn(),
+      step: 0,
+      openPath: fn(),
+      regressStepper: fn(),
+      totalSteps: 3,
+    },
+    ctaLabel: "Visit NFT market",
+  },
+} satisfies Meta<typeof Component>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Initial: Story = {}
+
+export const SliderNotConnected: Story = {
+  args: {
+    nav: {
+      ...meta.args.nav,
+      step: 2,
+    },
+    ctaLabel: "Connect to app",
+  },
+}
+
+export const SliderConnected: Story = {
+  args: {
+    nav: {
+      ...meta.args.nav,
+      step: 3,
+    },
+    ctaLabel: "Go to account",
+  },
+}
+export const Account: Story = {
+  args: {
+    nav: {
+      ...meta.args.nav,
+      step: 4,
+    },
+    ctaLabel: "Finished",
+  },
+}
diff --git a/src/components/Simulator/screens/ConnectWeb3/index.tsx b/src/components/Simulator/screens/ConnectWeb3/index.tsx
index 4a83ea00c40..8267e9b7ac5 100644
--- a/src/components/Simulator/screens/ConnectWeb3/index.tsx
+++ b/src/components/Simulator/screens/ConnectWeb3/index.tsx
@@ -1,15 +1,16 @@
-import React, { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { AnimatePresence, motion } from "framer-motion"
 import {
   RiAuctionLine,
   RiFileTransferLine,
   RiPriceTag2Line,
 } from "react-icons/ri"
-import { Box, Button, Flex, Icon, Text } from "@chakra-ui/react"
 
 import type { PhoneScreenProps } from "@/lib/types"
 
-import { Image } from "@/components/Image"
+import { TwImage as Image } from "@/components/Image"
+import { Button } from "@/components/ui/buttons/Button"
+import { Flex } from "@/components/ui/flex"
 
 import { useEthPrice } from "../../../../hooks/useEthPrice"
 import {
@@ -80,36 +81,17 @@ export const ConnectWeb3 = ({ nav, ctaLabel }: PhoneScreenProps) => {
       {[0].includes(step) && <Browser />}
       {[1, 2, 3].includes(step) && (
         <Web3App displayUrl={EXAMPLE_APP_URL}>
-          <Flex
-            px={6}
-            py={{ base: 8, md: 16 }}
-            gap={{ base: 8, md: 16 }}
-            bg="background.highlight"
-            h="full"
-            direction="column"
-            textAlign="center"
-          >
-            <Text
-              as={motion.p}
-              fontSize={{ base: "xl", md: "2xl" }}
-              m={0}
+          <Flex className="bg-background.highlight h-full flex-col gap-8 px-6 py-8 text-center md:gap-16 md:py-16">
+            <motion.p
+              className="text-xl leading-[1.4] duration-700 md:text-2xl"
               {...fadeInProps}
-              transitionDuration="0.75s"
-              lineHeight={1.4}
             >
               Welcome to Web3
-              <Text as="span" display="block" mt={2} fontWeight="bold">
-                NFT Marketplace
-              </Text>
-            </Text>
-            <Text
-              as={motion.p}
-              {...fadeInProps}
-              transitionDuration="0.75s"
-              transitionDelay="0.5s"
-            >
+              <span className="mt-2 block font-bold">NFT Marketplace</span>
+            </motion.p>
+            <motion.p className="delay-500 duration-700" {...fadeInProps}>
               Connect your wallet to view your collection
-            </Text>
+            </motion.p>
           </Flex>
         </Web3App>
       )}
@@ -128,20 +110,13 @@ export const ConnectWeb3 = ({ nav, ctaLabel }: PhoneScreenProps) => {
           style={{ height: "100%" }}
         >
           <Web3App
-            bg="background.base"
+            className="bg-background"
             appName="NFT Marketplace"
             displayUrl="app.example.com"
           >
-            <Box
-              px={6}
-              py={{ base: 2, md: 6 }}
-              fontSize="lg"
-              sx={{ button: { textDecoration: "none" } }}
-            >
-              <Text fontWeight="bold" mb={4}>
-                Your collection (1)
-              </Text>
-              <Flex gap={2} mb={6}>
+            <div className="px-6 py-2 text-lg md:py-6 [&_button]:no-underline">
+              <p className="mb-4 font-bold">Your collection (1)</p>
+              <Flex className="mb-6 gap-2">
                 <Image
                   src={NFTs[0].image}
                   width={120}
@@ -153,35 +128,18 @@ export const ConnectWeb3 = ({ nav, ctaLabel }: PhoneScreenProps) => {
                   content="These are some things you could do as the owner of your NFTs"
                   side="top"
                 >
-                  <Flex
-                    direction="column"
-                    fontSize={{ base: "xs", sm: "sm" }}
-                    textAlign="start"
-                    alignItems="start"
-                    gap={1}
-                  >
-                    <Text fontWeight="bold" fontSize="md" mb="auto" ms={2}>
-                      Cool art
-                    </Text>
-                    <Button
-                      variant="link"
-                      isDisabled
-                      leftIcon={<Icon as={RiAuctionLine} fontSize="xs" />}
-                    >
+                  <Flex className="flex-col items-start gap-1 text-start text-xs sm:text-sm">
+                    <p className="mb-auto ms-2 text-md font-bold">Cool art</p>
+                    <Button variant="link" disabled>
+                      <RiAuctionLine className="text-xs" />
                       Set a price
                     </Button>
-                    <Button
-                      variant="link"
-                      isDisabled
-                      leftIcon={<Icon as={RiPriceTag2Line} fontSize="xs" />}
-                    >
+                    <Button variant="link" disabled>
+                      <RiPriceTag2Line className="text-xs" />
                       Auction item
                     </Button>
-                    <Button
-                      variant="link"
-                      isDisabled
-                      leftIcon={<Icon as={RiFileTransferLine} fontSize="xs" />}
-                    >
+                    <Button variant="link" disabled>
+                      <RiFileTransferLine className="text-xs" />
                       Transfer item
                     </Button>
                   </Flex>
@@ -192,16 +150,16 @@ export const ConnectWeb3 = ({ nav, ctaLabel }: PhoneScreenProps) => {
                 content="Try out a real Ethereum application when finished here"
                 side="top"
               >
-                <Box fontSize={{ base: "sm", md: "md" }}>
-                  <Button variant="link" isDisabled display="block">
+                <div className="text-sm md:text-md">
+                  <Button className="block" variant="link" disabled>
                     Browse other artwork
                   </Button>
-                  <Button variant="link" isDisabled>
+                  <Button variant="link" disabled>
                     Mint new NFT
                   </Button>
-                </Box>
+                </div>
               </NotificationPopover>
-            </Box>
+            </div>
           </Web3App>
         </motion.div>
       )}
diff --git a/src/components/ui/buttons/Button.tsx b/src/components/ui/buttons/Button.tsx
index 3b71e28a986..1072007ec4c 100644
--- a/src/components/ui/buttons/Button.tsx
+++ b/src/components/ui/buttons/Button.tsx
@@ -36,7 +36,7 @@ const buttonVariants = cva(
         ),
         outline: "", // Base styling
         ghost: "border-transparent hover:shadow-none",
-        link: "border-transparent hover:shadow-none underline py-0 px-1 active:text-primary",
+        link: "border-transparent hover:shadow-none underline !min-h-0 !py-0 !px-1 active:text-primary",
       },
       size: {
         lg: "text-lg py-3 px-8 [&>svg]:text-2xl rounded-lg focus-visible:rounded-lg",