diff --git a/pages/advanced/smart-account-overview.md b/pages/advanced/smart-account-overview.md
deleted file mode 100644
index 598c468d..00000000
--- a/pages/advanced/smart-account-overview.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Safe Smart Account
-
-The vision for Safe Smart Accounts is to become the standard core used in all smart contract-based wallets. It also aims to make the benefits of Account Abstraction accessible to users and developers.
-
-The architectural design of Safe Smart Account keeps the following principles in mind:
-
-- **Secure default**
-    - Uses a multi-signature logic where a threshold of owners must confirm a transaction before execution to provide a secure default without trusting any additional contract. For example, a module, guard, or fallback handler (explained below).
-
-- **Minimal gas costs**
-    - Optimises gas costs by storing the transaction data that should be executed and the confirmations off-chain.
-    - Uses a proxy pattern to reduce setup costs.
-
-- **Maximum flexibility**
-    - Support Modules are contracts that can use alternative access patterns (instead of multi-signature) to execute transactions.
-    - Supports the `delegatecall` function, which introduces complex execution logic by loading instructions from other contracts and executing via a Safe Smart Account.
-
-Here are some core components of a Safe Smart Account that you will learn about:
-
-## Safe Modules
-
-[Safe Modules](smart-account-modules.mdx) are smart contracts that extend Safe's functionality with added custom features while the module logic remains separate from Safe's core contracts. 
-
-## Safe Guards
-
-[Safe Guards](smart-account-guards.mdx) make checks before and after a Safe transaction.
-
-## Signatures
-
-Safe contracts support alternative signature schemes such as [EIP-1271](https://eips.ethereum.org/EIPS/eip-1271) and [EIP-712](https://eips.ethereum.org/EIPS/eip-712) and relaying by making the confirmation/verification logic independent of `msg.sender`. Read more about the [signature schemes](https://github.com/safe-global/safe-contracts/blob/main/docs/signatures.md) supported by Safe.
diff --git a/pages/advanced/smart-account-overview.mdx b/pages/advanced/smart-account-overview.mdx
new file mode 100644
index 00000000..fd641e38
--- /dev/null
+++ b/pages/advanced/smart-account-overview.mdx
@@ -0,0 +1,63 @@
+import { Grid } from '@mui/material'
+import SafeCoreSDK from '../../assets/svg/ic-sdk.svg'
+import SafeSmartAccount from '../../assets/svg/ic-smart-account.svg'
+import SafeCoreAPI from '../../assets/svg/ic-api.svg'
+import CustomCard from '../../components/CustomCard'
+
+# Safe Smart Account
+
+The vision for Safe Smart Accounts is to become the standard core used in all smart contract-based wallets. It also aims to make the benefits of Account Abstraction accessible to users and developers.
+
+The architectural design of Safe Smart Account keeps the following principles in mind.
+
+<Grid
+  container
+  spacing={2}
+  display='flex'
+  alignContent='flex-start'
+  mt={3}
+>
+  <Grid item xs={12} md={12}>
+    <CustomCard
+      title={'Secure default'}
+      description={'Uses a multi-signature logic where a threshold of owners must confirm a transaction before execution to provide a secure default without trusting any additional contract. For example, a module, guard, or fallback handler (explained below).'}
+      url={''}
+      icon={<SafeCoreSDK />}
+      newTab={false}
+    />
+  </Grid>
+  <Grid item xs={12} md={6}>
+    <CustomCard
+      title={'Minimal gas costs'}
+      description={'Optimises gas costs by storing the transaction data that should be executed and the confirmations off-chain. Also uses a proxy pattern to reduce setup costs.'}
+      url={''}
+      icon={<SafeCoreAPI />}
+      newTab={false}
+    />
+  </Grid>
+  <Grid item xs={12} md={6}>
+    <CustomCard
+      title={'Maximum flexibility'}
+      description={'Supports modules that execute transactions using alternative access patterns (instead of multi-signature). Also supports the delegatecall function, which introduces complex execution logic by loading instructions from other contracts and executing via a Safe Smart Account.'}
+      url={''}
+      icon={<SafeSmartAccount />}
+      newTab={false}
+      />
+  </Grid>
+</Grid>
+
+## Components
+
+Here are some core components of a Safe Smart Account that you will learn about:
+
+### Safe Modules
+
+[Safe Modules](smart-account-modules.mdx) are smart contracts that extend Safe's functionality with added custom features while the module logic remains separate from Safe's core contracts. 
+
+### Safe Guards
+
+[Safe Guards](smart-account-guards.mdx) make checks before and after a Safe transaction.
+
+### Signatures
+
+Safe contracts support alternative signature schemes such as [EIP-1271](https://eips.ethereum.org/EIPS/eip-1271) and [EIP-712](https://eips.ethereum.org/EIPS/eip-712) and relaying by making the confirmation/verification logic independent of `msg.sender`. Read more about the [signature schemes](https://github.com/safe-global/safe-contracts/blob/main/docs/signatures.md) supported by Safe.