diff --git a/src/components/Simulator/WalletHome/AddressPill.tsx b/src/components/Simulator/WalletHome/AddressPill.tsx
index bd8d77a4051..66bde434cbb 100644
--- a/src/components/Simulator/WalletHome/AddressPill.tsx
+++ b/src/components/Simulator/WalletHome/AddressPill.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import { MdContentCopy } from "react-icons/md"
-import { Flex, type FlexProps, Icon, Text } from "@chakra-ui/react"
+
+import { Flex, type FlexProps } from "@/components/ui/flex"
 
 import { FAKE_DEMO_ADDRESS } from "../constants"
 import { NotificationPopover } from "../NotificationPopover"
@@ -13,21 +14,11 @@ export const AddressPill = ({ ...btnProps }: AddressPillProps) => (
     content="Share your address (public identifier) from your own wallet when finished here"
   >
     <Flex
-      gap={2}
-      align="center"
-      borderRadius="full"
-      bg="background.highlight"
-      color="disabled"
-      border="1px"
-      borderColor="border"
-      py={1}
-      px={2}
-      alignSelf="center"
-      fontSize="xs"
+      className="gap-2 self-center rounded-full border border-border bg-background-highlight px-2 py-1 text-center text-xs text-disabled"
       {...btnProps}
     >
-      <Text m={0}>{FAKE_DEMO_ADDRESS}</Text>
-      <Icon as={MdContentCopy} w={4} fontSize="lg" />
+      <p>{FAKE_DEMO_ADDRESS}</p>
+      <MdContentCopy className="w-4 text-lg leading-none" />
     </Flex>
   </NotificationPopover>
 )
diff --git a/src/components/Simulator/WalletHome/CategoryTabs.tsx b/src/components/Simulator/WalletHome/CategoryTabs.tsx
index 496134aef12..8b5634d1fa6 100644
--- a/src/components/Simulator/WalletHome/CategoryTabs.tsx
+++ b/src/components/Simulator/WalletHome/CategoryTabs.tsx
@@ -1,7 +1,7 @@
-import React from "react"
-import { Flex, type FlexProps, Text } from "@chakra-ui/react"
+import { Button } from "@/components/ui/buttons/Button"
+import { Flex, type FlexProps } from "@/components/ui/flex"
 
-import { Button } from "../../Buttons"
+import { cn } from "@/lib/utils/cn"
 
 type CategoryTabsProps = FlexProps & {
   categories: Array<string>
@@ -12,31 +12,32 @@ export const CategoryTabs = ({
   categories,
   activeIndex = 0,
   setActiveIndex,
+  className,
   ...flexProps
 }: CategoryTabsProps) => (
-  <Flex gap={6} {...flexProps}>
-    {categories.map((category, index) =>
-      setActiveIndex ? (
+  <Flex className={cn("gap-6", className)} {...flexProps}>
+    {categories.map((category, index) => {
+      const isActiveIndex = activeIndex === index
+      const fontWeightClass = isActiveIndex && "font-bold"
+      return setActiveIndex ? (
         <Button
           key={category}
           variant="ghost"
-          fontWeight={activeIndex === index ? "bold" : "normal"}
+          className={cn(
+            fontWeightClass,
+            "p-0 pb-2 text-body",
+            isActiveIndex && "!text-[initial]"
+          )}
+          disabled={isActiveIndex}
           onClick={() => setActiveIndex(index)}
-          p={0}
-          pb={2}
-          color="body.base"
         >
           {category}
         </Button>
       ) : (
-        <Text
-          mb={2}
-          key={category}
-          fontWeight={activeIndex === index ? "bold" : "normal"}
-        >
+        <p className={cn(fontWeightClass, "mb-2")} key={category}>
           {category}
-        </Text>
+        </p>
       )
-    )}
+    })}
   </Flex>
 )
diff --git a/src/components/Simulator/WalletHome/NFTList.tsx b/src/components/Simulator/WalletHome/NFTList.tsx
index 29c072b4f4d..e9eff523ecc 100644
--- a/src/components/Simulator/WalletHome/NFTList.tsx
+++ b/src/components/Simulator/WalletHome/NFTList.tsx
@@ -1,7 +1,7 @@
-import React from "react"
-import { Box, Flex, type FlexProps, Text } from "@chakra-ui/react"
+import { TwImage as Image } from "@/components/Image"
+import { Flex, type FlexProps } from "@/components/ui/flex"
 
-import { Image } from "@/components/Image"
+import { cn } from "@/lib/utils/cn"
 
 import type { NFT } from "./interfaces"
 
@@ -11,26 +11,21 @@ type NFTListProps = FlexProps & {
   nfts: Array<NFT>
 }
 export const NFTList = ({ nfts, ...flexProps }: NFTListProps) => {
-  const size = useBreakpointValue({ base: 20, md: 24 })
+  const size = useBreakpointValue({
+    base: "max-w-20 max-h-20",
+    md: "max-w-24 max-h-24",
+  })
   return (
-    <Flex w="full" gap={4} h="full" flexWrap="wrap" {...flexProps}>
+    <Flex className="size-full flex-wrap gap-4" {...flexProps}>
       {nfts.length ? (
         nfts.map(({ title, image }) => (
-          <Box key={title} w="fit-content">
-            <Image
-              src={image}
-              alt=""
-              objectFit="contain"
-              maxW={size}
-              maxH={size}
-            />
-            <Text fontSize="xs" m={0}>
-              {title}
-            </Text>
-          </Box>
+          <div key={title} className="w-fit">
+            <Image src={image} alt="" className={cn("object-contain", size)} />
+            <p className="text-xs">{title}</p>
+          </div>
         ))
       ) : (
-        <Text>No NFTs yet!</Text>
+        <p>No NFTs yet!</p>
       )}
     </Flex>
   )
diff --git a/src/components/Simulator/WalletHome/SendReceiveButton.tsx b/src/components/Simulator/WalletHome/SendReceiveButton.tsx
index fdef8d9be05..947541cdba1 100644
--- a/src/components/Simulator/WalletHome/SendReceiveButton.tsx
+++ b/src/components/Simulator/WalletHome/SendReceiveButton.tsx
@@ -1,28 +1,25 @@
-import React from "react"
-import {
-  type As,
-  Box,
-  Grid,
-  Icon,
-  Text,
-  type TextProps,
-} from "@chakra-ui/react"
+import { type ReactNode } from "react"
+import type { IconType } from "react-icons/lib"
+
+import { Button } from "@/components/ui/buttons/Button"
+
+import { cn } from "@/lib/utils/cn"
 
-import { Button } from "../../Buttons"
 import { ClickAnimation } from "../ClickAnimation"
 import { PulseAnimation } from "../PulseAnimation"
 
-type SendReceiveButtonProps = Pick<TextProps, "children"> & {
-  icon: As
+type SendReceiveButtonProps = {
+  icon: IconType
   isHighlighted: boolean
   isDisabled: boolean
   onClick?: () => void
   isAnimated?: boolean
+  children: ReactNode
 }
 
 export const SendReceiveButton = ({
   children,
-  icon,
+  icon: Icon,
   isHighlighted,
   isDisabled,
   onClick,
@@ -30,51 +27,37 @@ export const SendReceiveButton = ({
 }: SendReceiveButtonProps) => (
   <Button
     variant="ghost"
-    display="flex"
-    flexDirection="column"
-    alignItems="center"
+    className="group flex-col items-center gap-4"
     data-group
-    isDisabled={isDisabled}
+    disabled={isDisabled}
     onClick={onClick}
-    gap={4}
   >
-    <Grid
-      bg="primary.base"
-      borderRadius="full"
-      placeItems="center"
-      w={{ base: 10, md: 16 }}
-      aspectRatio={1}
-      _groupHover={{ bg: "primary.hover" }}
-      _groupDisabled={{
-        background: isHighlighted ? "primary.base" : "body.light",
-      }}
-      position="relative"
+    <div
+      className={cn(
+        "relative grid aspect-square w-10 place-items-center rounded-full bg-primary group-hover:bg-primary-hover md:w-16",
+        isHighlighted
+          ? "group-disabled:bg-primary"
+          : "group-disabled:bg-body-light"
+      )}
     >
       {!isDisabled && isAnimated && <PulseAnimation type="circle" />}
-      <Icon
-        as={icon}
-        w={{ base: 4, md: 6 }}
-        h={{ base: 4, md: 6 }}
-        color="background.base"
-      />
-    </Grid>
-    <Box position="relative">
-      <Text
-        fontWeight="bold"
-        color="primary.base"
-        textAlign="center"
-        m={0}
-        _groupHover={{ color: "primary.hover" }}
-        _groupDisabled={{
-          color: isHighlighted ? "primary.base" : "body.medium",
-        }}
-        position="relative"
+      {/* TODO: Remove important flags from class utils when simulator icons are migrated to tailwind */}
+      <Icon className="!size-4 !text-background md:!size-6" />
+    </div>
+    <div className="relative">
+      <p
+        className={cn(
+          "relative text-center font-bold text-primary group-hover:text-primary-hover",
+          isHighlighted
+            ? "group-disabled:text-primary"
+            : "group-disabled:text-body-medium"
+        )}
       >
         {children}
-      </Text>
+      </p>
       {!isDisabled && isAnimated && (
         <ClickAnimation below>click!</ClickAnimation>
       )}
-    </Box>
+    </div>
   </Button>
 )
diff --git a/src/components/Simulator/WalletHome/SendReceiveButtons.tsx b/src/components/Simulator/WalletHome/SendReceiveButtons.tsx
index 210cbf74ae5..85421baef7b 100644
--- a/src/components/Simulator/WalletHome/SendReceiveButtons.tsx
+++ b/src/components/Simulator/WalletHome/SendReceiveButtons.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import { PiPaperPlaneRightFill } from "react-icons/pi"
-import { Flex } from "@chakra-ui/react"
+
+import { Flex } from "@/components/ui/flex"
 
 import { QrCodeIcon } from "../icons"
 import type { SimulatorNav } from "../interfaces"
@@ -26,7 +27,7 @@ export const SendReceiveButtons = ({
   const highlightSend = !nav || !disableSend
   const highlightReceive = !nav || !disableReceive
   return (
-    <Flex justify="space-around" w="full" gap={4}>
+    <Flex className="w-full justify-around gap-4">
       <SendReceiveButton
         onClick={nav?.progressStepper}
         isDisabled={disableSend}
@@ -39,6 +40,7 @@ export const SendReceiveButtons = ({
         onClick={nav?.progressStepper}
         isDisabled={disableReceive}
         isHighlighted={highlightReceive}
+        // @ts-expect-error icon component needs to be migrated to use react-icons base
         icon={QrCodeIcon}
         isAnimated
       >
diff --git a/src/components/Simulator/WalletHome/TokenBalanceItem.tsx b/src/components/Simulator/WalletHome/TokenBalanceItem.tsx
index 9b0ed1a945f..b95a3924c3f 100644
--- a/src/components/Simulator/WalletHome/TokenBalanceItem.tsx
+++ b/src/components/Simulator/WalletHome/TokenBalanceItem.tsx
@@ -1,17 +1,13 @@
-import React from "react"
-import { Box, Flex, type FlexProps, Text } from "@chakra-ui/react"
+import { Flex } from "@/components/ui/flex"
 
 import { getMaxFractionDigitsUsd } from "../utils"
 
 import { TokenBalance } from "./interfaces"
 
-type TokenBalanceItemProps = FlexProps & {
+type TokenBalanceItemProps = {
   item: TokenBalance
 }
-export const TokenBalanceItem = ({
-  item,
-  ...flexProps
-}: TokenBalanceItemProps) => {
+export const TokenBalanceItem = ({ item }: TokenBalanceItemProps) => {
   const { name, ticker, amount, usdConversion, Icon } = item
   const usdAmount = amount * usdConversion
   const usdValue = Intl.NumberFormat("en-US", {
@@ -24,23 +20,15 @@ export const TokenBalanceItem = ({
     maximumFractionDigits: 5,
   }).format(amount)
   return (
-    <Flex gap={4} {...flexProps}>
+    <Flex className="gap-4">
       <Icon />
-      <Text flex={1} fontWeight="medium">
-        {name}
-      </Text>
-      <Box
-        textAlign="end"
-        fontSize="sm"
-        lineHeight={1.5}
-        fontWeight="bold"
-        sx={{ p: { m: 0 } }}
-      >
-        <Text>{usdValue}</Text>
-        <Text color="body.medium">
+      <p className="flex-1 font-medium">{name}</p>
+      <div className="text-end text-sm font-bold leading-normal [&_p]:m-0">
+        <p>{usdValue}</p>
+        <p className="text-body-medium">
           {tokenAmount} {ticker}
-        </Text>
-      </Box>
+        </p>
+      </div>
     </Flex>
   )
 }
diff --git a/src/components/Simulator/WalletHome/TokenBalanceList.tsx b/src/components/Simulator/WalletHome/TokenBalanceList.tsx
index c8c095cbc3e..e473ccbebc9 100644
--- a/src/components/Simulator/WalletHome/TokenBalanceList.tsx
+++ b/src/components/Simulator/WalletHome/TokenBalanceList.tsx
@@ -1,18 +1,14 @@
-import React from "react"
-import { Flex, type FlexProps } from "@chakra-ui/react"
+import { Flex } from "@/components/ui/flex"
 
 import { type TokenBalance } from "./interfaces"
 import { TokenBalanceItem } from "./TokenBalanceItem"
 
-type TokenBalanceListProps = FlexProps & {
+type TokenBalanceListProps = {
   tokenBalances: Array<TokenBalance>
 }
-export const TokenBalanceList = ({
-  tokenBalances,
-  ...flexProps
-}: TokenBalanceListProps) => {
+export const TokenBalanceList = ({ tokenBalances }: TokenBalanceListProps) => {
   return (
-    <Flex direction="column" w="full" gap={4} {...flexProps}>
+    <Flex className="w-full flex-col gap-4">
       {tokenBalances.map((item) => (
         <TokenBalanceItem key={item.name} item={item} />
       ))}
diff --git a/src/components/Simulator/WalletHome/WalletBalance.tsx b/src/components/Simulator/WalletHome/WalletBalance.tsx
index 511ceec0cab..b5031c88136 100644
--- a/src/components/Simulator/WalletHome/WalletBalance.tsx
+++ b/src/components/Simulator/WalletHome/WalletBalance.tsx
@@ -1,36 +1,28 @@
 import React from "react"
-import { Box, type BoxProps, Flex, Text } from "@chakra-ui/react"
+
+import { Flex } from "@/components/ui/flex"
 
 import { getMaxFractionDigitsUsd } from "../utils"
 
 import { AddressPill } from "./AddressPill"
 
-type WalletBalanceProps = BoxProps & {
+type WalletBalanceProps = {
   usdAmount?: number
 }
 
-export const WalletBalance = ({
-  usdAmount = 0,
-  ...boxProps
-}: WalletBalanceProps) => (
-  <Box zIndex={1} {...boxProps}>
-    <Text textAlign="center" color="body.medium" mb={{ base: 2, md: 4 }}>
-      Your total
-    </Text>
-    <Text
-      textAlign="center"
-      fontSize={{ base: "3xl", md: "5xl" }}
-      fontWeight="bold"
-    >
+export const WalletBalance = ({ usdAmount = 0 }: WalletBalanceProps) => (
+  <div className="z-[1]">
+    <p className="mb-2 text-center text-body-medium md:mb-4">Your total</p>
+    <p className="text-center text-3xl font-bold !leading-base md:text-5xl">
       {Intl.NumberFormat("en-US", {
         style: "currency",
         currency: "USD",
         notation: "compact",
         maximumFractionDigits: getMaxFractionDigitsUsd(usdAmount),
       }).format(usdAmount)}
-    </Text>
-    <Flex justify="center" mb={4}>
+    </p>
+    <Flex className="mb-4 justify-center">
       <AddressPill />
     </Flex>
-  </Box>
+  </div>
 )
diff --git a/src/components/Simulator/WalletHome/__stories__/WalletHome.stories.tsx b/src/components/Simulator/WalletHome/__stories__/WalletHome.stories.tsx
new file mode 100644
index 00000000000..ac4924e837b
--- /dev/null
+++ b/src/components/Simulator/WalletHome/__stories__/WalletHome.stories.tsx
@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
+
+import { defaultTokenBalances } from "../../constants"
+import { Phone } from "../../Phone"
+import { Template } from "../../Template"
+import { WalletHome as Component } from ".."
+
+import NFTImage from "@/public/images/deep-panic.png"
+
+const meta = {
+  title: "Molecules / Display Content / Simulator / WalletHome",
+  component: Component,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="mt-8">
+        <Template>
+          <Phone>
+            <Story />
+          </Phone>
+        </Template>
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Component>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const ActiveButton: Story = {
+  args: {
+    isEnabled: [false, true],
+    nav: {
+      openPath: fn(),
+      progressStepper: fn(),
+      regressStepper: fn(),
+      step: 0,
+      totalSteps: 2,
+    },
+  },
+}
+
+export const NFTTab: Story = {
+  args: {
+    tokenBalances: defaultTokenBalances,
+    activeTabIndex: 1,
+    setActiveTabIndex: fn(),
+    nfts: [
+      {
+        title: "Cool art",
+        image: NFTImage,
+      },
+    ],
+  },
+}
+export const NFTTabEmpty: Story = {
+  args: {
+    ...NFTTab.args,
+    nfts: [],
+  },
+}
diff --git a/src/components/Simulator/WalletHome/index.tsx b/src/components/Simulator/WalletHome/index.tsx
index 2a81c72873e..1cd446c4b21 100644
--- a/src/components/Simulator/WalletHome/index.tsx
+++ b/src/components/Simulator/WalletHome/index.tsx
@@ -1,5 +1,6 @@
-import React, { type Dispatch, type SetStateAction } from "react"
-import { Flex } from "@chakra-ui/react"
+import { type Dispatch, type SetStateAction } from "react"
+
+import { Flex } from "@/components/ui/flex"
 
 import { defaultTokenBalances } from "../constants"
 import type { SimulatorNav } from "../interfaces"
@@ -35,34 +36,12 @@ export const WalletHome = ({
     0
   )
   return (
-    <Flex
-      direction="column"
-      alignItems="center"
-      bg="background.base"
-      position="absolute"
-      inset={0}
-    >
-      <Flex
-        direction="column"
-        flex={1}
-        pt={8}
-        pb={4}
-        px={6}
-        justify="space-between"
-        w="full"
-      >
+    <Flex className="absolute inset-0 flex-col items-center bg-background">
+      <Flex className="w-full flex-1 flex-col justify-between px-6 pb-4 pt-8">
         <WalletBalance usdAmount={totalAmounts} />
         <SendReceiveButtons nav={nav} isEnabled={isEnabled} />
       </Flex>
-      <Flex
-        direction="column"
-        flex={1}
-        p={6}
-        gap={6}
-        justify="space-between"
-        w="full"
-        bg="background.highlight"
-      >
+      <Flex className="w-full flex-1 flex-col justify-between gap-6 bg-background-highlight p-6">
         <CategoryTabs
           categories={["Crypto", "NFTs"]}
           activeIndex={activeTabIndex}
diff --git a/src/components/Simulator/__stories__/Phone.stories.tsx b/src/components/Simulator/__stories__/Phone.stories.tsx
deleted file mode 100644
index eac022eb69b..00000000000
--- a/src/components/Simulator/__stories__/Phone.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react/*"
-
-import { Center } from "@/components/ui/flex"
-
-import { Phone as PhoneComponent } from "../Phone"
-import { Template } from "../Template"
-
-const meta = {
-  title: "Molecules / Display Content / Simulator / Phone",
-  component: PhoneComponent,
-  parameters: {
-    layout: "fullscreen",
-  },
-  decorators: [
-    (Story) => (
-      <div className="mt-8">
-        <Template>
-          <Story />
-        </Template>
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof PhoneComponent>
-
-export default meta
-
-export const Phone: StoryObj<typeof meta> = {
-  render: () => (
-    <PhoneComponent>
-      <div className="grid size-full items-center">
-        <Center className="h-1/2 bg-gray-200">Centered Child Content</Center>
-      </div>
-    </PhoneComponent>
-  ),
-}
diff --git a/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx b/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx
index c1e3fc91f5f..49022ad1a7a 100644
--- a/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx
+++ b/src/components/Simulator/screens/SendReceive/SendFromContacts.tsx
@@ -45,7 +45,7 @@ export const SendFromContacts = ({
         <CategoryTabs
           categories={["My contacts", "Recent"]}
           activeIndex={1}
-          mb={4}
+          className="mb-4"
         />
         <Stack className="gap-4">
           {CONTACTS.map(({ name, lastAction }, i) => (