diff --git a/.firebaserc b/.firebaserc
index 22c8cdce..6a496bc8 100644
--- a/.firebaserc
+++ b/.firebaserc
@@ -1,5 +1,18 @@
 {
   "projects": {
-    "default": "zksync-docs-staging"
-  }
+    "default": "zksync-docs"
+  },
+  "targets": {
+    "zksync-docs": {
+      "hosting": {
+        "prod": [
+          "zksync-docs"
+        ],
+        "staging": [
+          "zksync-docs-staging"
+        ]
+      }
+    }
+  },
+  "etags": {}
 }
diff --git a/.github/workflows/checks.yaml b/.github/workflows/checks.yaml
index b8862165..115b9e1f 100644
--- a/.github/workflows/checks.yaml
+++ b/.github/workflows/checks.yaml
@@ -1,22 +1,21 @@
-name: clean 🧹
+name: check 🕵️
 
 on:
   pull_request:
     branches: [main, staging]
-
   workflow_dispatch:
 
 jobs:
   format:
-    name: format
+    name: code_format
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v1
-      - name: Runs prettier formatter
-        run: |
-          bun install
-          bun run lint:prettier
+      - name: Install Dependencies
+        run: bun install
+      - name: Runs Prettier Formatter
+        run: bun run lint:prettier
 
   spelling:
     name: spelling
@@ -24,18 +23,29 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v1
-      - name: Runs cspell spell checker 
-        run: |
-           bun install
-           bun run lint:spelling
+      - name: Install Dependencies
+        run: bun install
+      - name: Runs cSpell Spell Checker
+        run: bun run lint:spelling
+
+  markdown-lint:
+    name: markdown_lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+      - name: Install Dependencies
+        run: bun install
+      - name: Runs Markdown Linter
+        run: bun run lint:markdown
 
-  lint:
-    name: lint markdown
+  eslint:
+    name: code_lint
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v1
-      - name: Runs mdl markdown linter
-        run: |
-            bun install
-            bun run lint:markdown
\ No newline at end of file
+      - name: Install Dependencies
+        run: bun install
+      - name: Runs ESLint
+        run: bun run lint:eslint
diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
new file mode 100644
index 00000000..036839f2
--- /dev/null
+++ b/.github/workflows/deploy-preview.yml
@@ -0,0 +1,31 @@
+name: "preview builder 👀"
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  build_and_preview:
+    env:
+      NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }}
+      NUXT_PUBLIC_SITE_URL: ${{ secrets.NUXT_PUBLIC_SITE_URL }}
+    if: ${{ github.event_name == 'workflow_dispatch' || github.event.pull_request.head.repo.full_name == github.repository }}
+    runs-on: ubuntu-latest
+    outputs:
+      output_urls: "${{ steps.preview_deploy.outputs.urls }}"
+    steps:
+      - uses: actions/checkout@v4 # v4
+
+      - uses: oven-sh/setup-bun@v1
+
+      - name: "Install dependencies"
+        run: bun install
+      - name: "Deploy target: staging"
+        run: bun run build && bun run generate 
+
+      - name: "Deploy preview"
+        uses: matter-labs/action-hosting-deploy@main
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZKSYNC_DOCS }}"
+          target: staging
+          projectId: zksync-docs
\ No newline at end of file
diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml
new file mode 100644
index 00000000..bb76800e
--- /dev/null
+++ b/.github/workflows/deploy-prod.yml
@@ -0,0 +1,56 @@
+name: "deploy 🚀"
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build_and_deploy:
+    env:
+      NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }}
+    if: ${{ github.event.repository.full_name == github.repository }}
+    runs-on: ubuntu-latest
+    environment: prod
+    steps:
+      - uses: actions/checkout@v4 # v4
+        with:
+          fetch-depth: 0
+          # Whether to configure the token or SSH key with the local git config
+          # Default: true
+          persist-credentials: false # <--- checking this in commit context
+
+      - uses: oven-sh/setup-bun@v1
+
+      - name: "Install dependencies"
+        run: bun install
+      - name: "Deploy target: staging"
+        run: bun run build && bun run generate 
+        # TODO: ask about below
+        # env:
+        #   RUDDERSTACK_WRITE_KEY: "${{ secrets.RUDDERSTACK_WRITE_KEY }}"
+        #   RUDDERSTACK_DATA_PLANE_URL: "${{ secrets.RUDDERSTACK_DATA_PLANE_URL }}"
+
+      - uses: matter-labs/action-hosting-deploy@main
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZKSYNC_DOCS }}"
+          target: prod
+          projectId: zksync-docs
+          channelId: live
+
+      # TODO: re-enable once we are closer to production deployment
+      # - name: Purge cf cache
+      #   uses: nathanvaughn/actions-cloudflare-purge@db8c58f61ba4c3ec77229c8fa14ddebb3b59932f # v3.1.0
+      #   with:
+      #     cf_zone: ${{ secrets.CLOUDFLARE_ZONE }}
+      #     cf_auth: ${{ secrets.CLOUDFLARE_AUTH_KEY }}
+      #     hosts: |
+      #       docs.zksync.io
+      #       era.zksync.io
+      #       v2-docs.zksync.io
+
+      # TODO: Implement reindex task tracking instead of blindly exiting on task submit
+      # - name: Trigger Algolia reindex
+      #   run: |
+      #     curl -X POST "${{ secrets.ALGOLIA_CRAWLER_BASE_URL }}/crawlers/${{ secrets.ALGOLIA_CRAWLER_ID }}/reindex" \
+      #       -H "Content-Type: application/json" \
+      #       --user "${{ secrets.ALGOLIA_CRAWLER_USER_ID }}:${{ secrets.ALGOLIA_CRAWLER_API_KEY }}"
\ No newline at end of file
diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
new file mode 100644
index 00000000..9d33ea0c
--- /dev/null
+++ b/.github/workflows/deploy-staging.yml
@@ -0,0 +1,31 @@
+name: "deploy staging 🏗️"
+on:
+  push:
+    branches: [staging]
+
+jobs:
+  build_and_deploy:
+    env:
+      NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }}
+      NUXT_PUBLIC_SITE_URL: ${{ secrets.NUXT_PUBLIC_SITE_URL }}
+    if: ${{ github.event.repository.full_name == github.repository }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4 # v4
+        with:
+          ref: "${{ github.event.inputs.ref }}"
+
+      - uses: oven-sh/setup-bun@v1
+
+      - name: "Install dependencies"
+        run: bun install
+      - name: "Deploy target: staging"
+        run: bun run build && bun run generate 
+
+      - uses: matter-labs/action-hosting-deploy@main
+        with:
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZKSYNC_DOCS }}"
+          target: staging
+          projectId: zksync-docs
+          channelId: live
\ No newline at end of file
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
deleted file mode 100644
index 9af63385..00000000
--- a/.github/workflows/firebase-hosting-merge.yml
+++ /dev/null
@@ -1,20 +0,0 @@
-# This file was auto-generated by the Firebase CLI
-# https://github.com/firebase/firebase-tools
-
-name: Deploy to Firebase Hosting on merge
-'on':
-  push:
-    branches:
-      - main
-jobs:
-  build_and_deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - run: bun run build
-      - uses: FirebaseExtended/action-hosting-deploy@v0
-        with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZKSYNC_DOCS }}'
-          channelId: live
-          projectId: zksync-docs
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
deleted file mode 100644
index df1d4f35..00000000
--- a/.github/workflows/firebase-hosting-pull-request.yml
+++ /dev/null
@@ -1,21 +0,0 @@
-# This file was auto-generated by the Firebase CLI
-# https://github.com/firebase/firebase-tools
-
-name: Deploy to Firebase Hosting on PR
-'on': pull_request
-permissions:
-  checks: write
-  contents: read
-  pull-requests: write
-jobs:
-  build_and_preview:
-    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - run: bun run build
-      - uses: FirebaseExtended/action-hosting-deploy@v0
-        with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZKSYNC_DOCS }}'
-          projectId: zksync-docs
diff --git a/.github/workflows/secrets_scanner.yaml b/.github/workflows/secrets_scanner.yaml
index 4be8437d..ff4ff92f 100644
--- a/.github/workflows/secrets_scanner.yaml
+++ b/.github/workflows/secrets_scanner.yaml
@@ -1,9 +1,9 @@
-name: Leaked Secrets Scan
+name: secret 🔍
 on:
   pull_request:
   merge_group:
 jobs:
-  TruffleHog:
+  scan:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
diff --git a/.gitignore b/.gitignore
index feb2e8b6..763090fe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -99,3 +99,4 @@ yarn.lock
 .nitro
 .cache
 dist
+.firebase
\ No newline at end of file
diff --git a/app.vue b/app.vue
index 6a1a44f8..b31c0f44 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types';
+import FooterComponent from './components/FooterComponent.vue';
+import HeaderComponent from './components/HeaderComponent.vue';
 
 const { seo } = useAppConfig();
 
@@ -52,7 +54,7 @@ provide('navigation', navigation);
   <div>
     <NuxtLoadingIndicator />
 
-    <Header />
+    <HeaderComponent />
 
     <UMain>
       <NuxtLayout>
@@ -60,7 +62,7 @@ provide('navigation', navigation);
       </NuxtLayout>
     </UMain>
 
-    <Footer />
+    <FooterComponent />
 
     <ClientOnly>
       <LazyUContentSearch
diff --git a/bun.lockb b/bun.lockb
index b4d45b0a..4cc36ba5 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/Footer.vue b/components/FooterComponent.vue
similarity index 100%
rename from components/Footer.vue
rename to components/FooterComponent.vue
diff --git a/components/Header.vue b/components/HeaderComponent.vue
similarity index 100%
rename from components/Header.vue
rename to components/HeaderComponent.vue
diff --git a/firebase.json b/firebase.json
index e7829392..a8ac073e 100644
--- a/firebase.json
+++ b/firebase.json
@@ -1,10 +1,16 @@
 {
-  "hosting": {
-    "public": "public",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ]
-  }
+  "hosting": [
+    {
+      "target": "staging",
+      "public": ".output/public",
+      "cleanUrls": true,
+      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
+    },
+    {
+      "target": "prod",
+      "public": ".output/public",
+      "cleanUrls": true,
+      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
+    }
+  ]
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index fd163662..a0e8a290 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -54,7 +54,6 @@ export default defineNuxtConfig({
       },
     },
   },
-  // deployment settings for Firebase
   nitro: {
     firebase: {
       gen: 2,
diff --git a/package.json b/package.json
index 62384881..02d16b01 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "husky": "^9.0.11",
     "markdownlint": "^0.33.0",
     "markdownlint-cli2": "^0.12.1",
+    "particles.vue3": "^2.12.0",
     "prettier": "^3.1.0",
     "prettier-eslint": "^16.1.2",
     "prettier-plugin-tailwindcss": "^0.5.12",
@@ -50,7 +51,9 @@
     "lint:markdown": "markdownlint-cli2 \"content/**/*.md\" --config \".markdownlint.json\"",
     "lint:eslint": "eslint .",
     "lint:prettier": "prettier --check .",
+    "fix:prettier": "prettier --write .",
     "prepare": "husky",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "ci:check": "bun run lint:eslint && bun run lint:prettier && bun run lint:spelling && bun run lint:markdown"
   }
 }
diff --git a/pages/about-us.vue b/pages/about-us.vue
index 8b7ce673..604b2380 100644
--- a/pages/about-us.vue
+++ b/pages/about-us.vue
@@ -1,3 +1,3 @@
 <script setup lang="ts"></script>
 
-<template>This is the about page.</template>
+<template><div>This is the about page.</div></template>
diff --git a/pages/index.vue b/pages/index.vue
index 414cbb11..a74d277f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -19,7 +19,6 @@ const particlesLoaded = async (container: unknown) => {
     <div>
       <vue-particles
         id="tsparticles"
-        @particles-loaded="particlesLoaded"
         :options="{
           fpsLimit: 120,
           interactivity: {
@@ -86,6 +85,7 @@ const particlesLoaded = async (container: unknown) => {
           },
           detectRetina: true,
         }"
+        @particles-loaded="particlesLoaded"
       />
       <ULandingHero
         v-if="page.hero"
diff --git a/public/404.html b/public/404.html
deleted file mode 100644
index 829eda8f..00000000
--- a/public/404.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Page Not Found</title>
-
-    <style media="screen">
-      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
-      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
-      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
-      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
-      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
-      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
-      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
-      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
-      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
-      @media (max-width: 600px) {
-        body, #message { margin-top: 0; background: white; box-shadow: none; }
-        body { border-top: 16px solid #ffa100; }
-      }
-    </style>
-  </head>
-  <body>
-    <div id="message">
-      <h2>404</h2>
-      <h1>Page Not Found</h1>
-      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
-      <h3>Why am I seeing this?</h3>
-      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
-    </div>
-  </body>
-</html>
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index a8785d73..00000000
--- a/public/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Welcome to Firebase Hosting</title>
-
-    <!-- update the version number as needed -->
-    <script defer src="/__/firebase/10.9.0/firebase-app-compat.js"></script>
-    <!-- include only the Firebase features as you need -->
-    <script defer src="/__/firebase/10.9.0/firebase-auth-compat.js"></script>
-    <script defer src="/__/firebase/10.9.0/firebase-database-compat.js"></script>
-    <script defer src="/__/firebase/10.9.0/firebase-firestore-compat.js"></script>
-    <script defer src="/__/firebase/10.9.0/firebase-functions-compat.js"></script>
-    <script defer src="/__/firebase/10.9.0/firebase-messaging-compat.js"></script>
-    <script defer src="/__/firebase/10.9.0/firebase-storage-compat.js"></script>
-    <script defer src="/__/firebase/10.9.0/firebase-analytics-compat.js"></script>
-    <script defer src="/__/firebase/10.9.0/firebase-remote-config-compat.js"></script>
-    <script defer src="/__/firebase/10.9.0/firebase-performance-compat.js"></script>
-    <!-- 
-      initialize the SDK after all desired features are loaded, set useEmulator to false
-      to avoid connecting the SDK to running emulators.
-    -->
-    <script defer src="/__/firebase/init.js?useEmulator=true"></script>
-
-    <style media="screen">
-      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
-      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
-      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
-      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
-      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
-      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
-      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
-      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
-      @media (max-width: 600px) {
-        body, #message { margin-top: 0; background: white; box-shadow: none; }
-        body { border-top: 16px solid #ffa100; }
-      }
-    </style>
-  </head>
-  <body>
-    <div id="message">
-      <h2>Welcome</h2>
-      <h1>Firebase Hosting Setup Complete</h1>
-      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
-      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
-    </div>
-    <p id="load">Firebase SDK Loading&hellip;</p>
-
-    <script>
-      document.addEventListener('DOMContentLoaded', function() {
-        const loadEl = document.querySelector('#load');
-        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
-        // // The Firebase SDK is initialized and available here!
-        //
-        // firebase.auth().onAuthStateChanged(user => { });
-        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
-        // firebase.firestore().doc('/foo/bar').get().then(() => { });
-        // firebase.functions().httpsCallable('yourFunction')().then(() => { });
-        // firebase.messaging().requestPermission().then(() => { });
-        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
-        // firebase.analytics(); // call to activate
-        // firebase.analytics().logEvent('tutorial_completed');
-        // firebase.performance(); // call to activate
-        //
-        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
-
-        try {
-          let app = firebase.app();
-          let features = [
-            'auth', 
-            'database', 
-            'firestore',
-            'functions',
-            'messaging', 
-            'storage', 
-            'analytics', 
-            'remoteConfig',
-            'performance',
-          ].filter(feature => typeof app[feature] === 'function');
-          loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
-        } catch (e) {
-          console.error(e);
-          loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
-        }
-      });
-    </script>
-  </body>
-</html>