New UI

docs/docs/fees/intro.mdx

@@ -4,8 +4,6 @@ sidebar_position: 0
 description: "Learn about fees in StakeWise protocol"
 ---
 
-import Admonition from '@theme/Admonition';
-
 # Fees
 
 ## Introduction

docs/docs/governance/stakewise-dao.mdx

@@ -3,6 +3,8 @@ title: StakeWise DAO
 sidebar_position: 1
 ---
 
+import Image from '@theme/IdealImage'
+
 # StakeWise DAO
 
 <p style={{fontSize: '1.2em', color: 'rgba(var(--moon-rgb), .5)', marginTop: '-10px', marginBottom: '20px'}}>Learn the basics of StakeWise DAO governance</p>
@@ -33,7 +35,7 @@ When choosing these parameters, the community will need to optimize for both its
 `0x48C3399719B582dD63eB5AADf12A40B4C3f52FA2`
 :::
 
-![Token Allocation & Emission Chart](/img/tokenomics.png)
+<Image img={require('/img/tokenomics.png')} alt="Token Allocation & Emission Chart" />
 <p style={{textAlign: 'center', fontSize: '0.9em', color: 'rgba(var(--moon-rgb), .5)', marginTop: '5px'}}>Token allocation and emission</p>
 
 Alignment of interests of the platform and its participants shall happen through an allocation of 51% of the governance token supply to the community and the existence of basic mechanisms that allow gaining voting power by simply staking with StakeWise. Other token holders will be investors and the development team behind StakeWise.

docs/docs/guides/defi/boost-feature.mdx

@@ -3,6 +3,8 @@ title: Boost Feature
 sidebar_position: 1
 ---
 
+import Image from '@theme/IdealImage'
+
 # Boost Feature
 
 ## How Boost Works
@@ -13,7 +15,7 @@ StakeWise Boost enhances staking rewards by using osTokens as collateral to borr
 - **14x looping** in Vaults with 100% LTV
 - **Up to 3x boost** in staking rewards compared to normal staking
 
-![boost_flow](./img/boost_flow.png)
+<Image img={require('./img/boost_flow.png')} alt="boost_flow" />
 
 :::custom-tips[Expected Returns]
 The strategy extracts the difference between additional staking rewards and Aave borrowing costs, historically delivering 4-6% APY with peaks around 7%.

docs/docs/guides/intro.mdx

@@ -7,17 +7,17 @@ sidebar_position: 0
 
 Welcome to the StakeWise Guides! This section provides step-by-step tutorials to help you get started with staking, running a Vault, and more.
 
-### <img src="/img/eth_coin.png" alt="ETH" style={{width: '36px', height: '36px', display: 'inline', verticalAlign: 'middle'}} /> [Staking →](/docs/guides/staking/intro)
+### <img src="/icons/stakewise/eth_coin.png" alt="ETH" style={{width: '36px', height: '36px', display: 'inline', verticalAlign: 'middle'}} /> [Staking →](/docs/guides/staking/intro)
 Learn how to stake your ETH and GNO with StakeWise. Choose from one-click staking, Vault staking, or solo staking options.
 
-### <img src="/img/vault1.png" alt="Vault" style={{width: '36px', height: '36px', display: 'inline', verticalAlign: 'middle'}} /> [Running a Vault →](/docs/guides/running-a-vault/intro)
+### <img src="/icons/stakewise/vault.png" alt="Vault" style={{width: '36px', height: '36px', display: 'inline', verticalAlign: 'middle'}} /> [Running a Vault →](/docs/guides/running-a-vault/intro)
 Create and manage your own StakeWise Vault. Set up custom parameters, branding, and start accepting deposits.
 
-### <img src="/img/rewards.png" alt="rewards" style={{width: '36px', height: '36px', display: 'inline', verticalAlign: 'middle'}} /> [Fee Splitter →](/docs/guides/fee-splitter)
+### <img src="/icons/stakewise/rewards.png" alt="rewards" style={{width: '36px', height: '36px', display: 'inline', verticalAlign: 'middle'}} /> [Fee Splitter →](/docs/guides/fee-splitter)
 Configure fee distribution among multiple shareholders for your Vault's staking rewards.
 
-### <img src="/img/sparks.png" alt="sparks" style={{width: '36px', height: '36px', display: 'inline', verticalAlign: 'middle'}} /> [DeFi →](/docs/guides/defi/intro)
+### <img src="/icons/stakewise/sparks.png" alt="sparks" style={{width: '36px', height: '36px', display: 'inline', verticalAlign: 'middle'}} /> [DeFi →](/docs/guides/defi/intro)
 Maximize your staking rewards with DeFi strategies like Boost and liquidity provision.
 
-### <img src="/img/process.png" alt="process" style={{width: '36px', height: '36px', display: 'inline', verticalAlign: 'middle'}} /> [StakeWise V2 →](/docs/guides/stakewise-v2/migrate-to-stakewise-v3-on-ethereum)
+### <img src="/icons/stakewise/process.png" alt="process" style={{width: '36px', height: '36px', display: 'inline', verticalAlign: 'middle'}} /> [StakeWise V2 →](/docs/guides/stakewise-v2/migrate-to-stakewise-v3-on-ethereum)
 Migration guides and resources for StakeWise V2 users.

docs/docs/guides/running-a-vault/setup-vault-infrastructure.mdx

@@ -3,16 +3,14 @@ title: Setup Vault Infrastructure
 sidebar_position: 2
 ---
 
-import Admonition from '@theme/Admonition';
-
 # Setup Vault Infrastructure
 
 To start accepting ETH in your Vault, your infrastructure must be properly set up.
 Follow the steps below to get everything running.
 
-**<img src="/img/rocket.png" alt="rocket" style={{width: '24px', height: '24px', verticalAlign: 'middle', display: 'inline'}} /> Setup difficulty:** Moderate – requires running Ethereum nodes and basic command-line familiarity.
+**<img src="/icons/stakewise/rocket.png" alt="rocket" style={{width: '24px', height: '24px', verticalAlign: 'middle', display: 'inline'}} /> Setup difficulty:** Moderate – requires running Ethereum nodes and basic command-line familiarity.
 
-## Setup Checklist <span style={{display: 'inline'}}><img src="/img/tick.png" alt="tick" style={{width: '36px', height: '36px', verticalAlign: 'middle', display: 'inline'}} /></span>
+## Setup Checklist <span style={{display: 'inline'}}><img src="/icons/stakewise/tick.png" alt="tick" style={{width: '36px', height: '36px', verticalAlign: 'middle', display: 'inline'}} /></span>
 
 **1. Execution Client** – A fully synced execution client that supports the [ETH Execution API specification ↗](https://ethereum.github.io/execution-apis/).
 Supported clients include Nethermind, Besu, Erigon, Geth, and Reth.

docs/docs/guides/running-a-vault/vault-administration.mdx

@@ -17,7 +17,7 @@ Once your Vault is created, you can manage all settings through the **"Settings"
 <Tabs groupId="vault-settings">
   <TabItem
     value="branding"
-    label={<span><img src="/img/color.png" alt="color" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} /> Branding</span>}
+    label={<span><img src="/icons/stakewise/color.png" alt="color" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} /> Branding</span>}
     default
   >
     **Update anytime:**
@@ -27,7 +27,7 @@ Once your Vault is created, you can manage all settings through the **"Settings"
   </TabItem>
   <TabItem
     value="fees"
-    label={<span><img src="/img/wallet.png" alt="wallet" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} /> Fees</span>}
+    label={<span><img src="/icons/stakewise/wallet.png" alt="wallet" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} /> Fees</span>}
   >
     **Manage fees:**
     - Set rates: 0-100% of staking rewards
@@ -36,7 +36,7 @@ Once your Vault is created, you can manage all settings through the **"Settings"
   </TabItem>
   <TabItem
     value="roles"
-    label={<span><img src="/img/game.png" alt="game" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} /> Roles</span>}
+    label={<span><img src="/icons/stakewise/game.png" alt="game" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} /> Roles</span>}
     default
   >
     **Delegate permissions:**

docs/docs/guides/stakewise-v2/01-migrate-to-stakewise-v3-on-ethereum.mdx

@@ -4,11 +4,6 @@ sidebar_position: 1
 
 # Migrate to StakeWise V3 on Ethereum
 
-```mdx-code-block
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-```
-
 <p style={{fontSize: '1.2em', color: 'rgba(var(--moon-rgb), .5)', marginTop: '-10px', marginBottom: '20px'}}>Migrating your stake in the legacy StakeWise Pool to StakeWise V3</p>
 
 This guide will walk you through the process of migrating your stake in the StakeWise Pool (known as StakeWise V2) to StakeWise V3. Follow the simple steps below to proceed.

docs/docs/guides/stakewise-v2/02-migrate-to-stakewise-v3-on-gnosis-chain.mdx

@@ -4,11 +4,6 @@ sidebar_position: 2
 
 # Migrate to StakeWise V3 on Gnosis Chain
 
-```mdx-code-block
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-```
-
 <p style={{fontSize: '1.2em', color: 'rgba(var(--moon-rgb), .5)', marginTop: '-10px', marginBottom: '20px'}}>Migrating your stake in the legacy StakeWise Pool to StakeWise V3</p>
 
 This guide will walk you through the process of migrating your stake in the StakeWise Pool (known as StakeWise V2) to StakeWise V3 on Gnosis Chain. Follow the simple steps below to proceed.
@@ -71,4 +66,4 @@ Once the transaction is finalized, you should see the total amount of tokens you
 
 ![Step 12](./img/migrate-v3-12.webp)
 
-This step marks the successful completion of the migration. Congratulations! <img src="/img/cup.png" alt="cup" style={{width: '24px', height: '24px', verticalAlign: 'middle', display: 'inline'}} />
+This step marks the successful completion of the migration. Congratulations! <img src="/icons/stakewise/cup.png" alt="cup" style={{width: '24px', height: '24px', verticalAlign: 'middle', display: 'inline'}} />

docs/docs/guides/stakewise-v2/03-change-solo-withdrawal-credentials-to-0x01-address.mdx

@@ -4,10 +4,8 @@ sidebar_position: 3
 
 # Change Solo Withdrawal Credentials to 0x01 Address
 
-```mdx-code-block
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-```
 
 <p style={{fontSize: '1.2em', color: 'rgba(var(--moon-rgb), .5)', marginTop: '-10px', marginBottom: '20px'}}>Learn how to change your withdrawal credentials to a 0x01 type</p>
 
@@ -19,7 +17,6 @@ We created a guide to walk you through the process of changing withdrawal creden
 
 To find the right guide for you, choose your operating system.
 
-````mdx-code-block
   <Tabs
     groupId="ostype"
     values={[
@@ -227,4 +224,3 @@ To find the right guide for you, choose your operating system.
         :::
     </TabItem>
   </Tabs>
-````

docs/docs/guides/staking/one-click-staking.mdx

@@ -3,13 +3,13 @@ title: One-Click Staking
 sidebar_position: 1
 ---
 
-import Admonition from '@theme/Admonition';
+import Image from '@theme/IdealImage'
 
 # How to stake with one click?
 
 One-click staking routes your assets through a MetaVault that automatically distributes them among selected Vaults. This converts your assets into osTokens, StakeWise's liquid staking tokens, while providing diversified exposure across multiple professional operators.
 
-![staking_flow](./img/staking_flow.png)
+<Image img={require('./img/staking_flow.png')} alt="staking_flow" />
 
 :::custom-notes[Wallet Requirements]
 You'll need an Ethereum wallet such as [Rabby Wallet ↗](https://rabby.io/).

docs/docs/guides/staking/solo-staking.mdx

@@ -3,8 +3,6 @@ title: Solo Staking
 sidebar_position: 3
 ---
 
-import Admonition from '@theme/Admonition';
-
 # Solo Staking with StakeWise
 
 For advanced users who want to run their own validators while maintaining liquidity, StakeWise offers solo staking through personal Vaults. This gives you maximum control and the highest potential yields.
@@ -14,10 +12,10 @@ Solo staking requires technical expertise to run Ethereum / Gnosis Chain validat
 :::
 
 **Benefits of solo staking with StakeWise:**
-- **<img src="/img/color.png" alt="color" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Full control** over your validators and staking setup
-- **<img src="/img/rewards.png" alt="rewards" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Highest yields** with minimal fees
-- **<img src="/img/osETH.png" alt="osETH" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Maintain liquidity** by minting osTokens against your stake
-- **<img src="/img/panels.png" alt="panels" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />MEV smoothing** for stable execution layer rewards
+- **<img src="/icons/stakewise/color.png" alt="color" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Full control** over your validators and staking setup
+- **<img src="/icons/stakewise/rewards.png" alt="rewards" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Highest yields** with minimal fees
+- **<img src="/icons/stakewise/osETH.png" alt="osETH" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Maintain liquidity** by minting osTokens against your stake
+- **<img src="/icons/stakewise/panels.png" alt="panels" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />MEV smoothing** for stable execution layer rewards
 
 **To get started with solo staking:**
 1. **Create your own Vault** using our [Vault creation guide →](/docs/guides/running-a-vault/how-to-create-a-vault)

docs/docs/guides/staking/staking-with-vaults.mdx

@@ -3,8 +3,6 @@ title: Staking with Vaults
 sidebar_position: 3
 ---
 
-import Admonition from '@theme/Admonition';
-
 # How to stake with Vaults?
 
 ## Understanding Vault Staking
@@ -48,8 +46,8 @@ Your osToken position has health levels (Healthy, Moderate, Risky, Unhealthy) ba
 
 Once staked in a Vault, you can:
 
-- **<img src="/img/cursor.png" alt="cursor" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Track Performance**: Monitor your Vault's APY and your earned rewards
-- **<img src="/img/osETH.png" alt="osETH" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Mint/Burn osTokens**: Adjust your liquid staking position as needed ([Learn about minting →](/docs/ostoken/how-ostoken-works#minting) | [Learn about burning →](/docs/ostoken/how-ostoken-works#burning))
-- **<img src="/img/rocket.png" alt="rocket" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Use Boost**: Increase your staking rewards with additional yield opportunities
-- **<img src="/img/key.png" alt="key" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Unstake**: Exit the Vault (requires burning all minted osTokens first)
-- **<img src="/img/vault1.png" alt="vault1" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Switch Vaults**: Unstake from one and stake in another for better terms
+- **<img src="/icons/stakewise/cursor.png" alt="cursor" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Track Performance**: Monitor your Vault's APY and your earned rewards
+- **<img src="/icons/stakewise/osETH.png" alt="osETH" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Mint/Burn osTokens**: Adjust your liquid staking position as needed ([Learn about minting →](/docs/ostoken/how-ostoken-works#minting) | [Learn about burning →](/docs/ostoken/how-ostoken-works#burning))
+- **<img src="/icons/stakewise/rocket.png" alt="rocket" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Use Boost**: Increase your staking rewards with additional yield opportunities
+- **<img src="/icons/stakewise/key.png" alt="key" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Unstake**: Exit the Vault (requires burning all minted osTokens first)
+- **<img src="/icons/stakewise/vault.png" alt="vault1" style={{width: '24px', height: '24px', display: 'inline', verticalAlign: 'middle'}} />Switch Vaults**: Unstake from one and stake in another for better terms

docs/docs/guides/staking/unstaking.mdx

@@ -3,13 +3,13 @@ title: Unstaking
 sidebar_position: 4
 ---
 
-import Admonition from '@theme/Admonition';
+import Image from '@theme/IdealImage'
 
 # How to Unstake?
 
 Unstaking is as simple and straightforward as staking, varying just slightly depending on how you staked your assets.
 
-![unstaking_flow](./img/unstaking_flow.png)
+<Image img={require('./img/unstaking_flow.png')} alt="unstaking_flow" />
 
 ## From One-Click Staking
 

docs/docs/oracles/intro.mdx

@@ -4,11 +4,6 @@ sidebar_position: 0
 description: "Learn how Oracles validate transactions and distribute rewards"
 ---
 
-import Admonition from '@theme/Admonition';
-
-```mdx-code-block
-import Tooltip from '@site/src/components/Tooltip/Tooltip';
-```
 
 # Oracles
 

docs/docs/oracles/oracle-duties.mdx

@@ -4,11 +4,7 @@ sidebar_position: 1
 description: "Learn about validator registration approval, reward distribution, and validator exits"
 ---
 
-import Admonition from '@theme/Admonition';
-
-```mdx-code-block
-import Tooltip from '@site/src/components/Tooltip/Tooltip';
-```
+import Image from '@theme/IdealImage'
 
 # Oracle Duties
 
@@ -18,7 +14,7 @@ Oracles run the [v3-oracle ↗](https://github.com/stakewise/v3-oracle) nodes an
 
 Oracles approve validator registration requests before they are submitted to the Beacon Chain [Deposit Contract ↗](https://etherscan.io/address/0x00000000219ab540356cbb839cbe05303d7705fa#code).
 
-![validator_registration_approval](./img/validator_registration_approval.png)
+<Image img={require('./img/validator_registration_approval.png')} alt="validator_registration_approval" />
 
 The [Operator Service →](../../operator/intro) periodically checks whether its Vaults have accumulated enough ETH for registering new validator(s).
 When the Vault has enough ETH, the operator sends a registration approval request to Oracles that includes encrypted exit signature(s) for the validator(s) it is attempting to create.
@@ -41,7 +37,7 @@ For details on how the Operator Service initiates and prepares validator registr
 
 ## Reward Distribution
 
-![reward_distribution](./img/reward_distribution.png)
+<Image img={require('./img/reward_distribution.png')} alt="reward_distribution" />
 
 Oracles periodically vote on the consensus rewards/penalties accumulated by the Vaults in the Beacon Chain and execution rewards (MEV & priority fees) for the Vaults connected to the Smoothing Pool.
 

docs/docs/ostoken/how-ostoken-works.mdx

@@ -4,7 +4,7 @@ sidebar_position: 1
 description: "Learn about osToken minting, burning, exchange rate, and peg maintenance"
 ---
 
-import Admonition from '@theme/Admonition';
+import Image from '@theme/IdealImage'
 
 # How osToken Works
 
@@ -76,7 +76,7 @@ Find step-by-step instructions for each staking option in the [Staking Guide →
 
 Position health is continuously tracked through LTV thresholds:
 
-![grade](./img/grade.png)
+<Image img={require('./img/grade.png')} alt="grade" />
 
 Positions that exceed **91.5% LTV** become eligible for [redemption](#redemption-mechanism), and those above **92% LTV** are subject to [liquidation](#liquidation-mechanism).
 

docs/docs/ostoken/intro.mdx

@@ -4,14 +4,16 @@ sidebar_position: 0
 description: "Learn what osToken is and how to get it"
 ---
 
+import Image from '@theme/IdealImage'
+
 # osToken
 
 osToken is a liquid staking token that accrues staking rewards when held. It is a generic name for StakeWise's network-specific ERC-20 tokens:
 
 - **osETH** on Ethereum
 - **osGNO** on Gnosis Chain
 
-![osToken_intro](./img/osToken_intro.png)
+<Image img={require('./img/osToken_intro.png')} alt="osToken_intro" />
 
 osToken is issued against assets staked in a Vault to allow using staked capital in decentralized applications to trade, borrow, lend, and restake. Hence, osTokens represent the underlying staked assets and the rewards earned.
 

docs/docs/stakewise-protocol/understanding-liquid-staking.mdx

@@ -5,9 +5,7 @@ toc_min_heading_level: 2
 toc_max_heading_level: 5
 ---
 
-```mdx-code-block
 import Tooltip from '@site/src/components/Tooltip/Tooltip';
-```
 
 # Understanding Liquid Staking
 

docs/docs/stakewise-protocol/what-is-stakewise.mdx

@@ -5,15 +5,14 @@ toc_min_heading_level: 2
 toc_max_heading_level: 5
 ---
 
-```mdx-code-block
-import Tooltip from '@site/src/components/Tooltip/Tooltip';
-```
+import Tooltip from '@site/src/components/Tooltip/Tooltip'
+import Image from '@theme/IdealImage'
 
 # What is StakeWise?
 
 StakeWise is a liquid staking protocol that gives you the benefits of permissionless and non-custodial liquid staking without the trade-offs.
 
-![what_is_stakewise](./img/what_is_stakewise.png)
+<Image img={require('./img/what_is_stakewise.png')} alt="what_is_stakewise" />
 
 Operating across Ethereum and Gnosis Chain, StakeWise creates a comprehensive staking network that serves diverse participants through three distinct approaches: