diff --git a/nym-wallet/src/components/Buy/Tutorial.tsx b/nym-wallet/src/components/Buy/Tutorial.tsx
index 1d4b40fc58..b9df4b4f0c 100644
--- a/nym-wallet/src/components/Buy/Tutorial.tsx
+++ b/nym-wallet/src/components/Buy/Tutorial.tsx
@@ -1,90 +1,119 @@
 import React, { useState } from 'react';
-import { Box, Button, Stack, Typography, Grid, Link } from '@mui/material';
+import { Button, Stack, Typography, Grid, Link } from '@mui/material';
+import { Tune as TuneIcon, BorderColor as BorderColorIcon, Paid as PaidIcon } from '@mui/icons-material';
 import { NymCard } from '../NymCard';
-import { ModalDivider } from '../Modals/ModalDivider';
 import { SignMessageModal } from './SignMessageModal';
 
+const borderColor = 'rgba(141, 147, 153, 0.2)';
+
+const TutorialStep = ({
+  step,
+  title,
+  text,
+  icon,
+  divider,
+}: {
+  step: number;
+  title: string;
+  text: string | React.ReactNode;
+  icon: React.ReactNode;
+  divider?: boolean;
+}) => (
+  <Grid
+    item
+    md={4}
+    pb={2}
+    pr={1}
+    sx={{
+      borderRight: divider ? `1px solid ${borderColor}` : null,
+    }}
+  >
+    <Stack gap={2}>
+      <Stack direction="row" gap={1} alignItems="center">
+        {icon}
+        <Typography fontWeight={600} fontSize="12px">
+          {`STEP ${step}`}
+        </Typography>
+      </Stack>
+      <Typography fontWeight={600} variant="h6">
+        {title}
+      </Typography>
+      {typeof text === 'string' ? (
+        <Typography sx={{ color: (t) => t.palette.nym.text.muted }}>{text}</Typography>
+      ) : (
+        text
+      )}
+    </Stack>
+  </Grid>
+);
+
 export const Tutorial = () => {
   const [showSignModal, setShowSignModal] = useState(false);
 
   return (
-    <Box>
+    <NymCard borderless title="Buy NYM with BTC without KYC" sx={{ mt: 4 }}>
+      <Typography mb={2}>
+        Follow below 3 steps to quickly and easily to buy NYM tokens. You can purchase up to 1000 Swiss Francs per day
+        without KYC.
+      </Typography>
       {showSignModal && <SignMessageModal onClose={() => setShowSignModal(false)} />}
-      <Stack direction="row" justifyContent="space-between" sx={{ mb: 3, mt: 2 }}>
-        <Box>
-          <Typography variant="h5" sx={{ fontWeight: 600, mb: 1 }}>
-            How to buy NYM with Bity?
-          </Typography>
-          <Typography variant="subtitle1">Follow these 3 steps below to quickly and easily buy NYM tokens</Typography>
-        </Box>
-        <Button variant="contained" color="primary" onClick={() => {}}>
+      <Grid
+        container
+        spacing={2}
+        mb={3}
+        mt={3}
+        sx={{
+          border: `1px solid ${borderColor}`,
+          borderRadius: '8px',
+        }}
+      >
+        <TutorialStep
+          step={1}
+          title="Define purchase details"
+          icon={<TuneIcon fontSize="small" />}
+          text={
+            <Typography sx={{ color: (t) => t.palette.nym.text.muted }}>
+              Click on{' '}
+              <Typography display="inline" fontWeight={600}>
+                Buy NYM
+              </Typography>{' '}
+              button and follow the steps in the browser window that opens. You will be asked for purchase details i.e.
+              amount, wallet address, etc.
+            </Typography>
+          }
+          divider
+        />
+        <TutorialStep
+          step={2}
+          title="Sign a message with your Nym wallet"
+          icon={<BorderColorIcon fontSize="small" />}
+          text={
+            <Typography sx={{ color: (t) => t.palette.nym.text.muted }}>
+              When asked for signature, copy the message and sign it using{' '}
+              <Typography display="inline" fontWeight={600}>
+                Sign message
+              </Typography>{' '}
+              button bellow. Then copy and paste your signature back in the browser window.
+            </Typography>
+          }
+          divider
+        />
+        <TutorialStep
+          step={3}
+          title="Make BTC tx and receive NYM"
+          icon={<PaidIcon fontSize="small" />}
+          text="Send BTC to the given address. When the transaction is confirmed your purchased NYM tokens will be
+              transfered in your wallet."
+        />
+      </Grid>
+      <Stack direction="row" gap={2} justifyContent="flex-end" mt={5}>
+        <Button variant="outlined" size="large" onClick={() => {}}>
+          Sign message
+        </Button>
+        <Button variant="contained" size="large" onClick={() => {}}>
           Buy Nym
         </Button>
       </Stack>
-      <Box sx={{ flexGrow: 1 }}>
-        <Grid container spacing={2}>
-          <Grid item md={4}>
-            <NymCard title="1. Define the purchase amount" sx={{ height: 440 }} sxTitle={{ fontSize: 16 }} borderless>
-              <ModalDivider />
-              <Typography>
-                Click on{' '}
-                <Typography display="inline" fontWeight={600}>
-                  Buy NYM button to go to Bity’s website.
-                </Typography>{' '}
-                Select the amount and currency for your purchase. Follow the steps and provide the required info i.e.{' '}
-                <Typography display="inline" fontWeight={600}>
-                  IBAN, wallet address, etc.
-                </Typography>
-              </Typography>
-            </NymCard>
-          </Grid>
-          <Grid item md={4}>
-            <NymCard
-              title="2. Sign a message with your Nym wallet"
-              sx={{ height: 440 }}
-              sxTitle={{ fontSize: 16 }}
-              borderless
-            >
-              <ModalDivider />
-              <Typography>
-                When asked for signature, copy Bity’s message and{' '}
-                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                <Link
-                  component="button"
-                  variant="body1"
-                  sx={{ fontWeight: 600 }}
-                  onClick={() => setShowSignModal(true)}
-                >
-                  sign it using this link
-                </Link>
-                {'. '}
-                Then{' '}
-                <Typography display="inline" fontWeight={600}>
-                  copy and paste your signature on Bity website
-                </Typography>{' '}
-                as shown above.
-              </Typography>
-            </NymCard>
-          </Grid>
-          <Grid item md={4}>
-            <NymCard
-              title="3. Transfer funds and receive NYM"
-              sx={{ height: 440 }}
-              sxTitle={{ fontSize: 16 }}
-              borderless
-            >
-              <ModalDivider />
-              <Typography>
-                Make the transfer to Bity’s address. Once Bity receives the amount and transaction is confirmed they
-                will{' '}
-                <Typography display="inline" fontWeight={600}>
-                  deposit NYM tokens to your wallet.
-                </Typography>
-              </Typography>
-            </NymCard>
-          </Grid>
-        </Grid>
-      </Box>
-    </Box>
+    </NymCard>
   );
 };