diff --git a/content/tutorials/cross-chain-governance/_dir.yml b/content/tutorials/cross-chain-governance/_dir.yml
index 969f0539..05b22bf0 100644
--- a/content/tutorials/cross-chain-governance/_dir.yml
+++ b/content/tutorials/cross-chain-governance/_dir.yml
@@ -7,8 +7,7 @@ authors:
 github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - smart contracts
-  - L1-L2
-  - tutorial
+  - cross-chain
 summary: Build and deploy a smart contract in L1 and send transactions that update the state of a contract in ZKsync.
 description:
   In this tutorial we'll deploy a simple smart contract in ZKsync. Then we'll deploy another smart contract in L1 and
diff --git a/content/tutorials/custom-zk-chain/_dir.yml b/content/tutorials/custom-zk-chain/_dir.yml
index 34906af4..5575efbd 100644
--- a/content/tutorials/custom-zk-chain/_dir.yml
+++ b/content/tutorials/custom-zk-chain/_dir.yml
@@ -7,8 +7,6 @@ authors:
 github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - elastic chain
-  - zk chain
-  - tutorial
 summary: Create, customize, and run your first ZK chain locally.
 description:
   In this tutorial, you will get familiar with the ZK Inception CLI. You will create a local Elastic Chain ecosystem and
diff --git a/content/tutorials/daily-spend-limit-account/_dir.yml b/content/tutorials/daily-spend-limit-account/_dir.yml
index cedbd5f2..77802871 100644
--- a/content/tutorials/daily-spend-limit-account/_dir.yml
+++ b/content/tutorials/daily-spend-limit-account/_dir.yml
@@ -8,7 +8,6 @@ github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - account abstraction
   - smart contracts
-  - tutorial
 summary: Build a native smart contract account that has a daily spend limit.
 description:
   This tutorial will guide you through the process of building a smart contract account that has a daily spend limit.
diff --git a/content/tutorials/dapp-nft-paymaster/_dir.yml b/content/tutorials/dapp-nft-paymaster/_dir.yml
index 3fb86297..279dbfb6 100644
--- a/content/tutorials/dapp-nft-paymaster/_dir.yml
+++ b/content/tutorials/dapp-nft-paymaster/_dir.yml
@@ -8,8 +8,7 @@ tags:
   - paymaster
   - frontend
   - next.js
-  - tutorial
-  - ERC721
+  - erc721
 summary: Build a frontend that allows users to interact smart contracts with zero transaction fees wif they hold an NFT.
 description:
   This tutorial will guide you through the process of building a frontend that interacts with smart contracts on ZKsync.
diff --git a/content/tutorials/erc20-paymaster/_dir.yml b/content/tutorials/erc20-paymaster/_dir.yml
index ba74de67..a33499bb 100644
--- a/content/tutorials/erc20-paymaster/_dir.yml
+++ b/content/tutorials/erc20-paymaster/_dir.yml
@@ -9,7 +9,7 @@ tags:
   - account abstraction
   - paymaster
   - smart contracts
-  - tutorial
+  - erc20
 summary: Build a paymaster that accepts any ERC20 token in exchange for transaction fees.
 description:
   This tutorial will guide you through the process of building a paymaster that accepts a fixed amount of any ERC20
diff --git a/content/tutorials/foundry-era-test-node/_dir.yml b/content/tutorials/foundry-era-test-node/_dir.yml
index 7add06e0..fb4b079e 100644
--- a/content/tutorials/foundry-era-test-node/_dir.yml
+++ b/content/tutorials/foundry-era-test-node/_dir.yml
@@ -10,7 +10,6 @@ tags:
   - foundry
   - cast
   - uniswap
-  - tutorial
 summary: Set up a local ZKsync Era environment and perform token swaps using Foundry.
 description: |
   In this tutorial, you will set up a local ZKsync Era environment using era_test_node, leverage Foundry's cast tool to interact with contracts, and perform token swaps on Uniswap. You will learn how to check balances, deposit ETH for WETH, transfer WETH, and swap tokens using Uniswap's Swap Router.
diff --git a/content/tutorials/frontend-paymaster/_dir.yml b/content/tutorials/frontend-paymaster/_dir.yml
index 326b771d..6fa8856d 100644
--- a/content/tutorials/frontend-paymaster/_dir.yml
+++ b/content/tutorials/frontend-paymaster/_dir.yml
@@ -8,7 +8,6 @@ tags:
   - paymaster
   - frontend
   - vue.js
-  - tutorial
 summary: Build a frontend that allows users to interact smart contracts paying fees with ERC20 tokens on ZKsync.
 description:
   This tutorial will guide you through the process of building a frontend that interacts with smart contracts on ZKsync.
diff --git a/content/tutorials/guide-subquery/_dir.yml b/content/tutorials/guide-subquery/_dir.yml
index b50ae47c..cf942519 100644
--- a/content/tutorials/guide-subquery/_dir.yml
+++ b/content/tutorials/guide-subquery/_dir.yml
@@ -6,7 +6,7 @@ authors:
 github_repo: https://github.com/subquery
 tags:
   - guide
-  - SubQuery
+  - subquery
 summary: This page will guide you through the steps to index smart contract events using SubQuery.
 description:
   This guide outlines the process of indexing all transfers and approval events from the Wrapped ETH on ZKsync Era
diff --git a/content/tutorials/guide-the-graph/_dir.yml b/content/tutorials/guide-the-graph/_dir.yml
index fab199b5..8cd3694a 100644
--- a/content/tutorials/guide-the-graph/_dir.yml
+++ b/content/tutorials/guide-the-graph/_dir.yml
@@ -6,7 +6,7 @@ authors:
 github_repo: https://github.com/graphprotocol
 tags:
   - guide
-  - theGraph
+  - the graph
 summary: This page will guide you through the steps to index smart contract data using theGraph.
 description:
   This guide outlines the process of indexing all transfers and approval events from the Wrapped ETH on ZKsync Era
diff --git a/content/tutorials/guide-walletconnect/_dir.yml b/content/tutorials/guide-walletconnect/_dir.yml
index 70c53e91..38d29c8f 100644
--- a/content/tutorials/guide-walletconnect/_dir.yml
+++ b/content/tutorials/guide-walletconnect/_dir.yml
@@ -6,7 +6,7 @@ authors:
 github_repo: https://github.com/matter-labs
 tags:
   - guide
-  - WalletConnect
+  - walletconnect
 summary: Learn how to use WalletConnect to create React apps that interact with contracts on ZKsync.
 description:
   This guide outlines how to use WalletConnect and Web3Modal to create React apps that interact with contracts on ZKsync
diff --git a/content/tutorials/guide-web3js/_dir.yml b/content/tutorials/guide-web3js/_dir.yml
index c6c2d38a..a380720e 100644
--- a/content/tutorials/guide-web3js/_dir.yml
+++ b/content/tutorials/guide-web3js/_dir.yml
@@ -7,7 +7,7 @@ authors:
 github_repo: https://github.com/ChainSafe
 tags:
   - guide
-  - Web3.js
+  - web3.js
 summary:
   This guide will teach you how to set up and use Web3.js to interact with ZKsync, leveraging the ZKsync Web3.js plugin.
 description:
diff --git a/content/tutorials/how-to-deposit-erc20/_dir.yml b/content/tutorials/how-to-deposit-erc20/_dir.yml
index 29e9fc89..fdb703d2 100644
--- a/content/tutorials/how-to-deposit-erc20/_dir.yml
+++ b/content/tutorials/how-to-deposit-erc20/_dir.yml
@@ -8,6 +8,7 @@ tags:
   - hardhat
   - how-to
   - erc20
+  - cross-chain
 summary: Learn how to deposit ERC20 tokens ZKsync.
 description: This how-to guide explains how to create a script that deposits any ERC20 token to ZKsync.
 what_you_will_learn:
diff --git a/content/tutorials/how-to-deposit-eth/_dir.yml b/content/tutorials/how-to-deposit-eth/_dir.yml
index a5542e6e..277f4e23 100644
--- a/content/tutorials/how-to-deposit-eth/_dir.yml
+++ b/content/tutorials/how-to-deposit-eth/_dir.yml
@@ -7,7 +7,6 @@ github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - hardhat
   - how-to
-  - Ether
 summary: Learn how to deposit Ether to ZKsync.
 description: This how-to guide explains how to create a script that deposits Ether to ZKsync.
 what_you_will_learn:
diff --git a/content/tutorials/how-to-send-l1-l2-transaction/_dir.yml b/content/tutorials/how-to-send-l1-l2-transaction/_dir.yml
index 5d1dd230..478517eb 100644
--- a/content/tutorials/how-to-send-l1-l2-transaction/_dir.yml
+++ b/content/tutorials/how-to-send-l1-l2-transaction/_dir.yml
@@ -7,7 +7,7 @@ github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - smart contracts
   - how-to
-  - L2-L1 communication
+  - cross-chain
 summary: Learn how to send a transaction from Ethereum that to ZKsync
 description:
   This how-to guide explains how to send a transaction from Ethereum that interacts with a contract deployed on ZKsync.
diff --git a/content/tutorials/how-to-send-l2-l1-message/_dir.yml b/content/tutorials/how-to-send-l2-l1-message/_dir.yml
index 91defc15..06c0cf68 100644
--- a/content/tutorials/how-to-send-l2-l1-message/_dir.yml
+++ b/content/tutorials/how-to-send-l2-l1-message/_dir.yml
@@ -7,7 +7,7 @@ github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - smart contracts
   - how-to
-  - L2-L1 communication
+  - cross-chain
 summary: Learn how to send a message from ZKsync to Ethereum L1.
 description: This how-to guide explains how to send an arbitrary message from ZKsync to Ethereum L1.
 what_you_will_learn:
diff --git a/content/tutorials/how-to-withdraw-eth/_dir.yml b/content/tutorials/how-to-withdraw-eth/_dir.yml
index 6ffa1616..1974b8f6 100644
--- a/content/tutorials/how-to-withdraw-eth/_dir.yml
+++ b/content/tutorials/how-to-withdraw-eth/_dir.yml
@@ -7,7 +7,7 @@ github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - hardhat
   - how-to
-  - Ether
+  - cross-chain
 summary: Learn how to withdraw Ether from ZKsync.
 description: This how-to guide explains how to create a script that withdraws Ether from ZKsync.
 what_you_will_learn:
diff --git a/content/tutorials/native-aa-multisig/_dir.yml b/content/tutorials/native-aa-multisig/_dir.yml
index ca80b1d9..d0e60eb6 100644
--- a/content/tutorials/native-aa-multisig/_dir.yml
+++ b/content/tutorials/native-aa-multisig/_dir.yml
@@ -7,7 +7,6 @@ github_repo: https://github.com/ZKsync-Community-Hub
 tags:
   - account abstraction
   - smart contracts
-  - tutorial
 summary: Build a native smart contract account that requires multiple signatures.
 description:
   This tutorial will guide you through the process of building a smart contract account that requires two ECDSA
diff --git a/content/tutorials/permissionless-paymaster/_dir.yml b/content/tutorials/permissionless-paymaster/_dir.yml
index a7ba4c63..c2f8c2a7 100644
--- a/content/tutorials/permissionless-paymaster/_dir.yml
+++ b/content/tutorials/permissionless-paymaster/_dir.yml
@@ -7,9 +7,7 @@ authors:
 github_repo: https://github.com/ondefy/permissionless-multisigner-paymaster
 tags:
   - paymaster
-  - gas sponsorship
-  - tutorial
-  - eip-712
+  - account abstraction
 summary:
   Integrate Zyfi's signature based permissionless multi-signer paymaster in your Dapp to sponsor gas funds for your
   users.
diff --git a/content/tutorials/signing-transactions-with-webauthn/_dir.yml b/content/tutorials/signing-transactions-with-webauthn/_dir.yml
index cf73dd15..bb433a15 100644
--- a/content/tutorials/signing-transactions-with-webauthn/_dir.yml
+++ b/content/tutorials/signing-transactions-with-webauthn/_dir.yml
@@ -6,8 +6,11 @@ authors:
     avatar: https://avatars.githubusercontent.com/u/58856580?v=4
 github_repo: https://github.com/ZKsync-Community-Hub
 tags:
-  - webauthn
   - account abstraction
+  - paymaster
+  - smart contracts
+  - frontend
+  - next.js
 summary: Learn how to use WebAuthn to sign transactions for smart accounts.
 description: In this tutorial, you will learn how to use WebAuthn to sign transactions for smart accounts.
 what_you_will_learn:
diff --git a/pages/tutorials/index.vue b/pages/tutorials/index.vue
index 16627662..65d63a9a 100644
--- a/pages/tutorials/index.vue
+++ b/pages/tutorials/index.vue
@@ -1,12 +1,42 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/types';
 
-const navigation = inject<Ref<NavItem[]>>('navigation');
+const navigation = inject<Ref<NavItem[]>>('navigation', ref([]));
 
-const guides = computed(() => {
-  const tutorialPath = navigation?.value.find((item) => item._path === '/tutorials') ?? { children: [] };
+interface Guide {
+  title: string;
+  description: string;
+  _path: string;
+  tags: string[];
+  authors: Array<{ name: string; url: string; avatar: string }>;
+}
 
-  return tutorialPath.children;
+const guides = computed<Guide[]>(() => {
+  const tutorialPath = navigation.value.find((item) => item._path === '/tutorials');
+  return tutorialPath?.children || [];
+});
+
+const allTags = computed(() => {
+  return guides.value.reduce<string[]>((acc, guide) => {
+    return acc.concat(guide.tags || []);
+  }, []);
+});
+
+const uniqueTags = computed(() => [...new Set(allTags.value)]);
+
+const activeTag = ref(uniqueTags.value[0] || '');
+const isExpanded = ref(false);
+const defaultCount = 6;
+
+const visibleTags = computed(() => {
+  return isExpanded.value ? uniqueTags.value : uniqueTags.value.slice(0, defaultCount);
+});
+
+const showToggleButton = computed(() => uniqueTags.value.length > defaultCount);
+
+const filteredGuides = computed(() => {
+  if (!activeTag.value) return guides.value;
+  return guides.value.filter((guide) => guide.tags?.includes(activeTag.value));
 });
 </script>
 
@@ -20,9 +50,32 @@ const guides = computed(() => {
           icon="i-zkicon-zksync"
         />
 
+        <div class="mb-4 mt-4 flex flex-wrap gap-1">
+          <UBadge
+            v-for="tag in visibleTags"
+            :key="tag"
+            :label="tag"
+            color="blue"
+            size="sm"
+            :variant="activeTag === tag ? 'solid' : 'subtle'"
+            class="cursor-pointer p-2"
+            @click="activeTag = tag === activeTag ? '' : tag"
+          />
+
+          <UButton
+            v-if="showToggleButton"
+            size="xs"
+            variant="ghost"
+            :ui="{ rounded: 'rounded' }"
+            @click="isExpanded = !isExpanded"
+          >
+            {{ isExpanded ? 'Show Less' : 'Show More' }}
+          </UButton>
+        </div>
+
         <ULandingCard
-          v-for="(guide, index) of guides"
-          :key="index"
+          v-for="guide in filteredGuides"
+          :key="guide._path"
           :title="guide.title"
           :to="guide._path"
           class="mb-4"
diff --git a/tests/configs/signing-txns-with-webauthn.ts b/tests/configs/signing-txns-with-webauthn.ts
index 7e54114e..35c36311 100644
--- a/tests/configs/signing-txns-with-webauthn.ts
+++ b/tests/configs/signing-txns-with-webauthn.ts
@@ -108,7 +108,8 @@ const frontendPart1Steps: IStepConfig = {
   'init-next-app': {
     action: 'runCommand',
     commandFolder: 'tests-output/zksync-webauthn',
-    preCommand: '<COMMAND> --ts --eslint --src-dir --use-npm --no-app --no-tailwind --import-alias "@/*" frontend',
+    preCommand:
+      '<COMMAND> frontend --ts --no-eslint --no-tailwind --src-dir --import-alias "@/*" --use-npm --skip-git --no-app --yes',
   },
   'wait-for-nextjs-init': {
     action: 'wait',