diff --git a/.husky/commit-msg b/.husky/commit-msg
index 9e359542..9701dfed 100755
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -1,3 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+
 bunx --no-install commitlint --edit "$1"
diff --git a/.husky/pre-commit b/.husky/pre-commit
index 93f85662..84aec536 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,3 +1,2 @@
-#!/usr/bin/env sh
-. "$(dirname "$0")/_/husky.sh"
+
 bun lint-staged
diff --git a/.lintstagedrc.yml b/.lintstagedrc.yml
index 62c9d456..47a1035f 100644
--- a/.lintstagedrc.yml
+++ b/.lintstagedrc.yml
@@ -2,7 +2,7 @@
   - prettier --list-different
   - eslint
 '*.md':
-  - cspell lint --file
   - markdownlint-cli2
+  - cspell lint --quiet --no-must-find-files --files
 '*.{json,yml}':
   - prettier --list-different
diff --git a/bun.lockb b/bun.lockb
index 07d02c3e..121c6018 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/IconOrbit.vue b/components/IconOrbit.vue
index b27d17b9..0bc55de0 100644
--- a/components/IconOrbit.vue
+++ b/components/IconOrbit.vue
@@ -138,16 +138,7 @@
 
 <script setup lang="ts"></script>
 
-<style scoped lang="scss">
-$orbitItemSize: 1.6em;
-$map: (
-  ring-0: 4,
-  ring-1: 3,
-  ring-2: 8,
-  ring-3: 3,
-);
-$lastRing: 3;
-
+<style scoped>
 * {
   box-sizing: border-box;
 }
@@ -165,9 +156,9 @@ html {
 }
 
 .orbit-icon {
-  width: $orbitItemSize;
-  height: $orbitItemSize;
-  line-height: $orbitItemSize;
+  width: 1.6em;
+  height: 1.6em;
+  line-height: 1.6em;
   font-size: 1.2em;
   border-radius: 50%;
   background: #ccc;
@@ -176,85 +167,215 @@ html {
   display: block;
 }
 
-$orbit-ring-left: 50%;
-$orbit-ring-top: 18%;
-
 .orbit-wrap {
   height: 40em;
   list-style: none;
   font-size: 1.3em;
-
-  > li {
-    position: absolute;
-    left: $orbit-ring-left;
-    top: $orbit-ring-top;
-    transform: translate(-50%, -50%);
-  }
+}
+.orbit-wrap > li {
+  position: absolute;
+  left: 50%;
+  top: 18%;
+  transform: translate(-50%, -50%);
 }
 
 ul[class^='ring'] {
-  @extend %ring;
   transition: all 300ms ease-in-out;
   box-shadow: none !important;
+}
+ul[class^='ring'] li:not(.black-hole) {
+  transition: all 300ms ease-in-out;
+}
 
-  li:not(.black-hole) {
-    @extend %orbiting-object;
-    transition: all 300ms ease-in-out;
-  }
+.light img {
+  background: rgb(215, 241, 251) !important;
 }
 
-@mixin orbit-item($numItems, $numRing) {
-  @for $s from 1 through $numItems + 1 {
-    // Spread items over the ring
-    $deg: calc(380deg / $numItems);
+.ring-0 {
+  width: 42em;
+  height: 42em;
+  animation: clockwiseRotate 75s linear infinite;
+}
+.ring-0 i,
+.ring-0 img {
+  animation: counterClockwiseRotate 75s linear infinite;
+  width: 60px;
+  height: 35px;
+  background: rgba(148, 148, 148, 0.826);
+}
+.ring-0 .black-hole {
+  transform: none !important;
+  position: absolute;
+  width: 41.8em;
+  height: 41.8em;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  border-radius: 50%;
+  box-sizing: content-box;
+}
 
-    .ring-#{$numRing} > *:nth-of-type(#{$s}) {
-      transform: rotate($s * $deg) translate(21em - ($numRing * 4)) rotate(-$s * $deg);
-    }
-  }
+.ring-0 > *:nth-of-type(1) {
+  transform: rotate(95deg) translate(21em) rotate(-95deg);
 }
 
-.light img {
-  background: rgb(215, 241, 251) !important;
+.ring-0 > *:nth-of-type(2) {
+  transform: rotate(190deg) translate(21em) rotate(-190deg);
 }
 
-// Render rings
-@for $i from 0 through $lastRing {
-  .ring-#{$i} {
-    $size: 42em - ($i * 8);
-    $randomized: random(15);
-    // decrease each ring in size
-    width: $size;
-    height: $size;
-    animation: clockwiseRotate (75s - ($i * $randomized)) linear infinite;
-
-    i,
-    img {
-      animation: counterClockwiseRotate (75s - ($i * $randomized)) linear infinite;
-      width: 60px;
-      height: 35px;
-      background: rgba(148, 148, 148, 0.826);
-    }
-
-    .black-hole {
-      transform: none !important;
-      position: absolute;
-      // background: black;
-      width: $size - 0.2em;
-      height: $size - 0.2em;
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      border-radius: 50%;
-      box-sizing: content-box;
-    }
-  }
+.ring-0 > *:nth-of-type(3) {
+  transform: rotate(285deg) translate(21em) rotate(-285deg);
+}
+
+.ring-0 > *:nth-of-type(4) {
+  transform: rotate(380deg) translate(21em) rotate(-380deg);
+}
+
+.ring-0 > *:nth-of-type(5) {
+  transform: rotate(475deg) translate(21em) rotate(-475deg);
+}
+
+.ring-1 {
+  width: 34em;
+  height: 34em;
+  animation: clockwiseRotate 63s linear infinite;
+}
+.ring-1 i,
+.ring-1 img {
+  animation: counterClockwiseRotate 63s linear infinite;
+  width: 60px;
+  height: 35px;
+  background: rgba(148, 148, 148, 0.826);
+}
+.ring-1 .black-hole {
+  transform: none !important;
+  position: absolute;
+  width: 33.8em;
+  height: 33.8em;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  border-radius: 50%;
+  box-sizing: content-box;
+}
+
+.ring-1 > *:nth-of-type(1) {
+  transform: rotate(126.6666666667deg) translate(17em) rotate(-126.6666666667deg);
+}
+
+.ring-1 > *:nth-of-type(2) {
+  transform: rotate(253.3333333333deg) translate(17em) rotate(-253.3333333333deg);
+}
+
+.ring-1 > *:nth-of-type(3) {
+  transform: rotate(380deg) translate(17em) rotate(-380deg);
+}
+
+.ring-1 > *:nth-of-type(4) {
+  transform: rotate(506.6666666667deg) translate(17em) rotate(-506.6666666667deg);
+}
+
+.ring-2 {
+  width: 26em;
+  height: 26em;
+  animation: clockwiseRotate 63s linear infinite;
+}
+.ring-2 i,
+.ring-2 img {
+  animation: counterClockwiseRotate 63s linear infinite;
+  width: 60px;
+  height: 35px;
+  background: rgba(148, 148, 148, 0.826);
+}
+.ring-2 .black-hole {
+  transform: none !important;
+  position: absolute;
+  width: 25.8em;
+  height: 25.8em;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  border-radius: 50%;
+  box-sizing: content-box;
+}
+
+.ring-2 > *:nth-of-type(1) {
+  transform: rotate(47.5deg) translate(13em) rotate(-47.5deg);
+}
+
+.ring-2 > *:nth-of-type(2) {
+  transform: rotate(95deg) translate(13em) rotate(-95deg);
+}
+
+.ring-2 > *:nth-of-type(3) {
+  transform: rotate(142.5deg) translate(13em) rotate(-142.5deg);
+}
+
+.ring-2 > *:nth-of-type(4) {
+  transform: rotate(190deg) translate(13em) rotate(-190deg);
+}
+
+.ring-2 > *:nth-of-type(5) {
+  transform: rotate(237.5deg) translate(13em) rotate(-237.5deg);
+}
+
+.ring-2 > *:nth-of-type(6) {
+  transform: rotate(285deg) translate(13em) rotate(-285deg);
+}
+
+.ring-2 > *:nth-of-type(7) {
+  transform: rotate(332.5deg) translate(13em) rotate(-332.5deg);
+}
+
+.ring-2 > *:nth-of-type(8) {
+  transform: rotate(380deg) translate(13em) rotate(-380deg);
+}
+
+.ring-2 > *:nth-of-type(9) {
+  transform: rotate(427.5deg) translate(13em) rotate(-427.5deg);
+}
+
+.ring-3 {
+  width: 18em;
+  height: 18em;
+  animation: clockwiseRotate 60s linear infinite;
+}
+.ring-3 i,
+.ring-3 img {
+  animation: counterClockwiseRotate 60s linear infinite;
+  width: 60px;
+  height: 35px;
+  background: rgba(148, 148, 148, 0.826);
+}
+.ring-3 .black-hole {
+  transform: none !important;
+  position: absolute;
+  width: 17.8em;
+  height: 17.8em;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  border-radius: 50%;
+  box-sizing: content-box;
+}
+
+.ring-3 > *:nth-of-type(1) {
+  transform: rotate(126.6666666667deg) translate(9em) rotate(-126.6666666667deg);
+}
+
+.ring-3 > *:nth-of-type(2) {
+  transform: rotate(253.3333333333deg) translate(9em) rotate(-253.3333333333deg);
+}
 
-  @include orbit-item(map-get($map, ring-#{$i}), $i);
+.ring-3 > *:nth-of-type(3) {
+  transform: rotate(380deg) translate(9em) rotate(-380deg);
 }
 
-%ring {
-  // border: solid 1px rgb(125 116 153 / 60%);
+.ring-3 > *:nth-of-type(4) {
+  transform: rotate(506.6666666667deg) translate(9em) rotate(-506.6666666667deg);
+}
+
+ul[class^='ring'] {
   background: linear-gradient(
     to bottom right,
     rgba(184, 39, 252, 0.5) 0%,
@@ -270,14 +391,14 @@ ul[class^='ring'] {
   box-sizing: content-box;
 }
 
-%orbiting-object {
+ul[class^='ring'] li:not(.black-hole) {
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
-  width: $orbitItemSize;
-  height: $orbitItemSize;
-  margin: calc(-1 * $orbitItemSize / 2);
+  width: 1.6em;
+  height: 1.6em;
+  margin: -0.8em;
 }
 
 /*
@@ -293,6 +414,7 @@ ul[class^='ring'] {
   background: transparent;
   border-radius: 50%;
 }
+
 .orbit-center__icon {
   transform: rotateZ(-360deg);
   transition: all 300ms ease-in-out;
@@ -309,7 +431,6 @@ animations
     transform: rotate(360deg);
   }
 }
-
 @keyframes counterClockwiseRotate {
   0% {
     transform: rotate(0deg);
diff --git a/content/tutorials/custom-zk-chain/20.customizing-your-chain.md b/content/tutorials/custom-zk-chain/20.customizing-your-chain.md
index 8f017540..22046017 100644
--- a/content/tutorials/custom-zk-chain/20.customizing-your-chain.md
+++ b/content/tutorials/custom-zk-chain/20.customizing-your-chain.md
@@ -93,7 +93,7 @@ touch .env
 Add the `WALLET_PRIVATE_KEY` environment variable with the private key of the rich wallet we've been using
 so that we can deploy using a pre-funded address:
 
-```env
+```bash
 WALLET_PRIVATE_KEY=0x7726827caac94a7f9e1b160f7ea819f172f7b6f9d2a97f992c38edeab82d4110
 ```
 
diff --git a/content/tutorials/guide-viem/10.index.md b/content/tutorials/guide-viem/10.index.md
index f327781d..18c2546f 100644
--- a/content/tutorials/guide-viem/10.index.md
+++ b/content/tutorials/guide-viem/10.index.md
@@ -41,12 +41,14 @@ const client = createPublicClient({
 });
 ```
 
-:::info
+<!-- /*spellchecker: disable*/ -->
+::callout{icon="i-heroicons-information-circle" color="blue"}
 
 - To use the %%zk_testnet_name%%, specify `zkSyncSepoliaTestnet` as the chain.
 - For %%zk_mainnet_name%%, replace `zkSyncSepoliaTestnet` with `zkSync`.
 
-:::
+::
+<!-- /*spellchecker: enable*/ -->
 
 ### Reading Data
 
diff --git a/content/tutorials/guide-web3js/10.index.md b/content/tutorials/guide-web3js/10.index.md
index 014f0d8a..08a56910 100644
--- a/content/tutorials/guide-web3js/10.index.md
+++ b/content/tutorials/guide-web3js/10.index.md
@@ -63,10 +63,12 @@ from the `zks_` namespace of the [JSON-RPC API](https://docs.zksync.io/build/api
 
 #### Fetch the Main Contract Address
 
+<!-- /*spellchecker: disable*/ -->
 ```javascript
 const mainContract = await web3.zkSync.rpc.getMainContract();
 console.log(`Main contract: ${mainContract}`);
 ```
+<!-- /*spellchecker: enable*/ -->
 
 ### Wallet Configuration
 
diff --git a/content/tutorials/how-to-deploy-contract/10.index.md b/content/tutorials/how-to-deploy-contract/10.index.md
index bf4d6b62..ffb876e1 100644
--- a/content/tutorials/how-to-deploy-contract/10.index.md
+++ b/content/tutorials/how-to-deploy-contract/10.index.md
@@ -9,7 +9,6 @@ using capabilities of Hardhat together with the `hardhat-zksync-deploy` and `har
 ## Prerequisites
 
 - A [Node.js](https://nodejs.org/en/download) installation running at minimum Node.js version 14.
-- Yarn or npm Package Manager
 - Initialized Hardhat TypeScript project
 - A wallet with sufficient Sepolia `%%zk_testnet_currency_symbol%%` on Ethereum and %%zk_testnet_name%% to pay for deploying smart
   contracts. You can get Sepolia ETH from the [network faucets](https://docs.zksync.io/ecosystem/network-faucets).
@@ -28,18 +27,10 @@ Check **hardhat-zksync-deploy** documentation [here](https://docs.zksync.io/buil
 
 To install the **hardhat-zksync-deploy** plugin and additional necessary packages, execute the following command:
 
-::code-group
-
-```bash [yarn]
-yarn add -D @matterlabs/hardhat-zksync-deploy hardhat zksync-ethers ethers
-```
-
 ```bash [npm]
-npm i -D @matterlabs/hardhat-zksync-deploy
+npm install -D @matterlabs/hardhat-zksync-deploy hardhat zksync-ethers ethers
 ```
 
-::
-
 Once installed, add the plugin at the top of the **hardhat.config.ts** file.
 
 ```javascript
@@ -79,18 +70,10 @@ contract SimpleStorage {
 
 Before we continue with the deployment, we must include **hardhat-zksync-solc** plugin in order to compile our contracts.
 
-::code-group
-
 ```bash [npm]
-npm i -D @matterlabs/hardhat-zksync-solc
+npm install -D @matterlabs/hardhat-zksync-solc
 ```
 
-```bash [yarn]
-yarn add -D @matterlabs/hardhat-zksync-solc
-```
-
-::
-
 Add the plugin at the top of the **hardhat.config.ts** file:
 
 ```javascript [hardhat.config.ts]
@@ -145,8 +128,8 @@ Find more details about available configuration options in the [official documen
 
 Execute the following command in your terminal to run the compilation:
 
-```bash
-yarn hardhat compile
+```bash [npm]
+npx hardhat compile
 ```
 
 After successful compilation, you should see the output similar to this:
@@ -216,14 +199,14 @@ export default async function (hre: HardhatRuntimeEnvironment) {
 
 To deploy contract on %%zk_testnet_name%% that we already specified as the default network in our **hardhat.config.ts**, run command:
 
-```bash
-yarn hardhat deploy-zksync
+```bash [npm]
+npx hardhat deploy-zksync
 ```
 
 If you prefer to explicitly select network name within a command, you can run:
 
-```bash
-yarn hardhat deploy-zksync --network zkTestnet
+```bash [npm]
+npx hardhat deploy-zksync --network zkTestnet
 ```
 
 After successful deployment, your console output should look something like this:
@@ -248,18 +231,10 @@ that gives additional methods to use for faster development.
 
 In the root directory of your project, execute this command:
 
-:::code-tabs
-
-```bash [yarn]
-yarn add -D @matterlabs/hardhat-zksync-ethers hardhat zksync-ethers ethers
-```
-
 ```bash [npm]
-npm i -D @matterlabs/hardhat-zksync-ethers
+npm install -D @matterlabs/hardhat-zksync-ethers hardhat zksync-ethers ethers
 ```
 
-:::
-
 Add the plugin at the top of the **hardhat.config.ts** file:
 
 ```javascript [hardhat.config.ts]
@@ -404,7 +379,7 @@ main().catch((error) => {
 To deploy contract, execute command:
 
 ```bash
-yarn hardhat run scripts/deploy-simple-storage-with-name.ts
+npx hardhat run scripts/deploy-simple-storage-with-name.ts
 ```
 
 After successful execution, your console output should look something like this:
@@ -465,8 +440,8 @@ main().catch((error) => {
 
 To deploy contract, execute command:
 
-```bash
-yarn hardhat run scripts/deploy-simple-storage-with-abi-and-bytecode.ts
+```bash [npm]
+npx hardhat run scripts/deploy-simple-storage-with-abi-and-bytecode.ts
 ```
 
 After successful execution, your console output should look something like this:
@@ -515,8 +490,8 @@ main().catch((error) => {
 
 To deploy contract, execute command:
 
-```bash
-yarn hardhat run scripts/deploy-simple-storage.ts
+```bash [npm]
+npx hardhat run scripts/deploy-simple-storage.ts
 ```
 
 After successful execution, your console output should look something like this:
diff --git a/cspell-config/cspell-misc.txt b/cspell-config/cspell-misc.txt
index 01575bd8..3d1513c1 100644
--- a/cspell-config/cspell-misc.txt
+++ b/cspell-config/cspell-misc.txt
@@ -99,6 +99,7 @@ Zerion
 zext
 ZKBT
 ZKEVM
+zkicon
 zkout
 zksolc
 zkvyper
diff --git a/package.json b/package.json
index cfe52e03..3edede5d 100644
--- a/package.json
+++ b/package.json
@@ -20,16 +20,16 @@
     "release": "semantic-release"
   },
   "dependencies": {
-    "@matterlabs/docs-nuxt-template": "2.4.0",
-    "@nuxt/content": "^2.12.1",
-    "@nuxt/eslint": "^0.3.10",
+    "@matterlabs/docs-nuxt-template": "2.7.0",
+    "@nuxt/content": "^2.13.2",
+    "@nuxt/eslint": "^0.3.13",
     "@nuxt/fonts": "^0.5.1",
     "@nuxt/image": "^1.7.0",
-    "@nuxt/ui": "^2.16.0",
-    "@nuxt/ui-pro": "^1.1.0",
+    "@nuxt/ui": "^2.18.4",
+    "@nuxt/ui-pro": "^1.4.1",
     "@nuxtjs/seo": "^2.0.0-rc.10",
     "dayjs": "^1.11.10",
-    "nuxt": "^3.11.2",
+    "nuxt": "^3.12.4",
     "nuxt-gtag": "^2.0.6",
     "nuxt-headlessui": "^1.2.0",
     "nuxt-og-image": "^3.0.0-rc.53",
diff --git a/pages/index.vue b/pages/index.vue
index 346ff808..cf6353e2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -27,7 +27,7 @@ useSeoMeta({
       :links="[
         {
           label: 'Check out all the tutorials',
-          icon: 'i-zksync-zksync-logo',
+          icon: 'i-zkicon-zksync',
           trailingIcon: 'i-heroicons-arrow-right-20-solid',
           to: '/tutorials',
           size: 'xl',
diff --git a/pages/tutorials/[...slug].vue b/pages/tutorials/[...slug].vue
index 34beb27a..f148239a 100644
--- a/pages/tutorials/[...slug].vue
+++ b/pages/tutorials/[...slug].vue
@@ -185,7 +185,7 @@ const communityLinks = [
             </template>
           </div>
         </div>
-        <UDivider icon="i-zksync-zksync-logo" />
+        <UDivider icon="i-zkicon-zksync" />
       </UPage>
 
       <UPage>
diff --git a/pages/tutorials/index.vue b/pages/tutorials/index.vue
index e7ea648b..16627662 100644
--- a/pages/tutorials/index.vue
+++ b/pages/tutorials/index.vue
@@ -17,7 +17,7 @@ const guides = computed(() => {
         <UPageHeader
           title="Community Guides"
           description="Explore all the community contributed guides for ZKsync"
-          icon="i-zksync-logo"
+          icon="i-zkicon-zksync"
         />
 
         <ULandingCard