diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
index aed033fa..7c888389 100644
--- a/.github/workflows/deploy-preview.yml
+++ b/.github/workflows/deploy-preview.yml
@@ -3,6 +3,9 @@ on:
   pull_request:
   workflow_dispatch:
 
+env:
+  NUXT_SITE_ENV: staging # used for NuxtSEO to disable things like indexing on staging
+
 permissions:
   checks: write
   contents: read
diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
index 19ef57fa..9303be1c 100644
--- a/.github/workflows/deploy-staging.yml
+++ b/.github/workflows/deploy-staging.yml
@@ -3,6 +3,9 @@ on:
   push:
     branches: [staging]
 
+env:
+  NUXT_SITE_ENV: staging # used for NuxtSEO to disable things like indexing on staging
+
 jobs:
   build_and_deploy:
     env:
diff --git a/app.vue b/app.vue
index 6a1cbbdf..2865946e 100644
--- a/app.vue
+++ b/app.vue
@@ -40,7 +40,9 @@ useSeoMeta({
   twitterImageAlt: 'zkSync — Accelerating the mass adoption of crypto for personal sovereignty.',
 });
 
-defineOgImage({ component: 'OgImageCommunityCode' });
+defineOgImage({
+  component: 'OgImageZK',
+});
 
 provide('navigation', navigation);
 </script>
@@ -49,7 +51,7 @@ provide('navigation', navigation);
   <div>
     <NuxtLoadingIndicator />
 
-    <HeaderComponent :links="[]" />
+    <HeaderComponent />
 
     <UMain>
       <NuxtLayout>
diff --git a/components/IconOrbit.vue b/components/IconOrbit.vue
new file mode 100644
index 00000000..b27d17b9
--- /dev/null
+++ b/components/IconOrbit.vue
@@ -0,0 +1,321 @@
+<template>
+  <div class="orbit">
+    <ul class="orbit-wrap">
+      <li class="orbit-center" />
+
+      <li>
+        <ul class="ring-0">
+          <li class="black-hole bg-white dark:bg-black" />
+          <li>
+            <img
+              src="/logos/alchemy.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/atlas_zk_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/remix_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/web3js.svg"
+              class="orbit-icon"
+            />
+          </li>
+        </ul>
+      </li>
+
+      <li>
+        <ul class="ring-1">
+          <li class="black-hole bg-white dark:bg-black" />
+          <li>
+            <img
+              src="/logos/hardhat.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/Vyper.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/ethereum.svg"
+              class="orbit-icon"
+            />
+          </li>
+        </ul>
+      </li>
+      <li>
+        <ul class="ring-2">
+          <li class="black-hole bg-white dark:bg-black" />
+          <li>
+            <img
+              src="/logos/alchemy.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/atlas_zk_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/ethereum.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/web3js.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/Solidity_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/atlas_zk_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/remix_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/web3js.svg"
+              class="orbit-icon"
+            />
+          </li>
+        </ul>
+      </li>
+      <li>
+        <ul class="ring-3">
+          <li class="black-hole bg-white dark:bg-black" />
+          <li>
+            <img
+              src="/logos/remix_logo.svg"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/viem.png"
+              class="orbit-icon"
+            />
+          </li>
+          <li>
+            <img
+              src="/logos/ethereum.svg"
+              class="orbit-icon"
+            />
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<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;
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 100%;
+}
+
+.orbit {
+  background: transparent;
+  float: left;
+  width: 100%;
+  min-width: 90vw;
+  min-height: 100vh;
+}
+
+.orbit-icon {
+  width: $orbitItemSize;
+  height: $orbitItemSize;
+  line-height: $orbitItemSize;
+  font-size: 1.2em;
+  border-radius: 50%;
+  background: #ccc;
+  color: #fff;
+  text-align: center;
+  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%);
+  }
+}
+
+ul[class^='ring'] {
+  @extend %ring;
+  transition: all 300ms ease-in-out;
+  box-shadow: none !important;
+
+  li:not(.black-hole) {
+    @extend %orbiting-object;
+    transition: all 300ms ease-in-out;
+  }
+}
+
+@mixin orbit-item($numItems, $numRing) {
+  @for $s from 1 through $numItems + 1 {
+    // Spread items over the ring
+    $deg: calc(380deg / $numItems);
+
+    .ring-#{$numRing} > *:nth-of-type(#{$s}) {
+      transform: rotate($s * $deg) translate(21em - ($numRing * 4)) rotate(-$s * $deg);
+    }
+  }
+}
+
+.light img {
+  background: rgb(215, 241, 251) !important;
+}
+
+// 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;
+    }
+  }
+
+  @include orbit-item(map-get($map, ring-#{$i}), $i);
+}
+
+%ring {
+  // border: solid 1px rgb(125 116 153 / 60%);
+  background: linear-gradient(
+    to bottom right,
+    rgba(184, 39, 252, 0.5) 0%,
+    rgba(44, 144, 252, 0.5) 25%,
+    rgba(184, 253, 51, 0.5) 50%,
+    rgba(254, 200, 55, 0.5) 75%,
+    rgba(253, 24, 146, 0.5) 100%
+  );
+  position: relative;
+  padding: 0;
+  border-radius: 50%;
+  list-style: none;
+  box-sizing: content-box;
+}
+
+%orbiting-object {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: $orbitItemSize;
+  height: $orbitItemSize;
+  margin: calc(-1 * $orbitItemSize / 2);
+}
+
+/*
+  center;
+*/
+.orbit-center {
+  z-index: 5;
+  font-size: 2em;
+  width: 1.8em;
+  height: 1.8em;
+  line-height: 1.8em;
+  text-align: center;
+  background: transparent;
+  border-radius: 50%;
+}
+.orbit-center__icon {
+  transform: rotateZ(-360deg);
+  transition: all 300ms ease-in-out;
+}
+
+/*
+animations
+*/
+@keyframes clockwiseRotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes counterClockwiseRotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+</style>
diff --git a/layouts/tutorials.vue b/layouts/tutorials.vue
index 6b07fb20..b28db037 100644
--- a/layouts/tutorials.vue
+++ b/layouts/tutorials.vue
@@ -4,10 +4,8 @@ const route = useRoute();
 if (!route.path) {
   throw new Error('Route path is not defined');
 }
-console.log('PATH', route);
 
 const { data: info } = await useAsyncData(`${route.path}-info`, () => {
-  console.log('ROUTE', route.fullPath);
   return queryContent(`${route.fullPath}/_info`).findOne();
 });
 
@@ -21,25 +19,6 @@ const { data: navigation } = await useAsyncData(`${route.path}-sidenav`, () => {
   return fetchContentNavigation(query);
 });
 
-// const links = computed(() => {
-//   const pageLinks = navigation.value;
-//   return [
-//     {
-//       label: 'Tutorials',
-//       icon: 'i-heroicons-arrow-left-circle',
-//       to: '/tutorials',
-//     },
-//     {
-//       label: info.value?.title || 'Guide',
-//       collapsible: false,
-//       children: pageLinks[0].children[0].children.map((item) => ({
-//         label: item.title,
-//         to: item._path,
-//       })),
-//     },
-//   ];
-// });
-console.log('WHY INFO', info.value);
 const links = [
   {
     label: 'Tutorials',
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f1223188..b7fd030e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,4 +2,9 @@
 export default defineNuxtConfig({
   extends: [['github:matter-labs/docs-nuxt-template', { install: true }]],
   modules: ['@nuxt/content', '@nuxt/ui', '@nuxt/eslint'],
+  runtimeConfig: {
+    public: {
+      app: 'code',
+    },
+  },
 });
diff --git a/pages/index.vue b/pages/index.vue
index 148af5f5..0734a5c7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -16,10 +16,29 @@ useSeoMeta({
 
 <template>
   <div>
+    <IconOrbit class="absolute hidden md:block" />
     <ULandingSection
-      :title="page.features.title"
-      :links="page.features.links"
+      class="relative"
+      title=""
+      description="Build Together: Discover Community-Driven Guides and Tutorials for zkSync"
+      :links="[
+        {
+          label: 'Check out all the tutorials',
+          icon: 'i-zksync-zksync-logo',
+          trailingIcon: 'i-heroicons-arrow-right-20-solid',
+          to: '/tutorials',
+          size: 'xl',
+        },
+      ]"
     >
+      <template #headline>
+        <NuxtImg
+          src="/logos/zksync-icon.svg"
+          width="240"
+          class="invert filter dark:filter-none"
+        />
+      </template>
+
       <UPageGrid>
         <SiteLink
           v-for="(guide, index) of guides"
diff --git a/pages/tutorials/index.vue b/pages/tutorials/index.vue
index d605f50a..4579aa2f 100644
--- a/pages/tutorials/index.vue
+++ b/pages/tutorials/index.vue
@@ -13,27 +13,36 @@ const { data: guides } = await useAsyncData('tutorials', () =>
           description="Explore all the community contributed guides for zkSync"
           icon="i-zksync-logo"
         />
-        <SiteLink
+
+        <ULandingCard
           v-for="(guide, index) of guides"
           :key="index"
+          :title="guide.title"
           :to="`/tutorials/${guide._dir}`"
-          class="hover:bg-zkSlate-100 dark:hover:bg-zkSlate-900 grid grid-cols-2 items-center gap-4 border-b border-gray-100 p-4 dark:border-gray-800"
+          class="mb-4"
         >
-          <div>
-            {{ guide.title }}
-          </div>
-          <div class="text-right">
-            <UBadge
-              v-for="tag in guide.tags"
-              :key="tag"
-              :label="tag"
-              color="blue"
-              size="sm"
-              variant="subtle"
-              class="mb-2 mr-2"
-            />
-          </div>
-        </SiteLink>
+          <template #description>
+            <p>{{ guide.description }}</p>
+            <div class="flex justify-between gap-2">
+              <AuthorsList
+                class="mb-4"
+                :authors="guide.authors"
+                :with-links="true"
+              />
+              <div>
+                <UBadge
+                  v-for="tag in guide.tags"
+                  :key="tag"
+                  :label="tag"
+                  color="blue"
+                  size="sm"
+                  variant="subtle"
+                  class="mb-2 mr-2"
+                />
+              </div>
+            </div>
+          </template>
+        </ULandingCard>
       </UPageBody>
     </UPage>
   </UContainer>
diff --git a/public/logos/Solidity_logo.svg b/public/logos/Solidity_logo.svg
new file mode 100644
index 00000000..e9b0b53d
--- /dev/null
+++ b/public/logos/Solidity_logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 523.9 813"><style type="text/css">.st0{opacity:0.45;enable-background:new;}.st1{opacity:0.6;enable-background:new;}.st2{opacity:0.8;enable-background:new;}</style><path class="st0" d="M391.9 0l-130.7 232.3H0L130.6 0 391.9 0"/><path class="st1" d="M261.2 232.3h261.3L391.9 0h-261.3L261.2 232.3z"/><path class="st2" d="M130.6 464.5l130.6-232.2L130.6 0 0 232.3 130.6 464.5z"/><path class="st0" d="M131.9 813l130.7-232.3h261.3L393.2 813H131.9"/><path class="st1" d="M262.6 580.7h-261.3L131.9 813H393.2L262.6 580.7z"/><path class="st2" d="M393.2 348.5l-130.6 232.2L393.2 813l130.7-232.3L393.2 348.5z"/></svg>
\ No newline at end of file
diff --git a/public/logos/Vyper.svg b/public/logos/Vyper.svg
new file mode 100644
index 00000000..44e65124
--- /dev/null
+++ b/public/logos/Vyper.svg
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+<polygon transform="matrix(.0625 0 0 .0625 3.75e-7 8.5744)" points="1280 1330.2 1024 886.81 768 1330.2 1024 1773.6" opacity=".8"/>
+<polygon transform="matrix(.0625 0 0 .0625 3.75e-7 8.5744)" points="1536 886.81 1280 443.41 1024 886.81 1280 1330.2" opacity=".6"/>
+<polygon transform="matrix(.0625 0 0 .0625 3.75e-7 8.5744)" points="1024 886.81 768 443.41 512 886.81 768 1330.2" opacity=".6"/>
+<polygon transform="matrix(.0625 0 0 .0625 3.75e-7 8.5744)" points="1792 443.41 1536 0 1280 443.41 1536 886.81" opacity=".45"/>
+<polygon transform="matrix(.0625 0 0 .0625 3.75e-7 8.5744)" points="768 443.41 1024 886.81 1280 443.41 1152 221.7 896 221.7" opacity=".45"/>
+<polygon transform="matrix(.0625 0 0 .0625 3.75e-7 8.5744)" points="768 443.41 512 0 256 443.41 512 886.81" opacity=".45"/>
+<polygon transform="matrix(.0625 0 0 .0625 3.75e-7 8.5744)" points="2048 0 1536 0 1792 443.4" opacity=".3"/>
+<polygon transform="matrix(.0625 0 0 .0625 3.75e-7 8.5744)" points="512 0 0 0 256 443.4" opacity=".3"/>
+</svg>
\ No newline at end of file
diff --git a/public/logos/alchemy.svg b/public/logos/alchemy.svg
new file mode 100644
index 00000000..095bd15a
--- /dev/null
+++ b/public/logos/alchemy.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><path d="M58.571,15.361L89.499,67.915L69.056,67.915L47.721,32.902L58.571,15.361Z" style="stroke:#000;stroke-width:1px;"/><path d="M42.854,41.249L11.762,94.243L32.54,94.243L53.714,59.099L42.854,41.249Z" style="stroke:#000;stroke-width:1px;"/><path d="M42.903,94.243L105.014,94.243L94.52,75.949L53.714,75.949L42.903,94.243Z" style="stroke:#000;stroke-width:1px;"/></svg>
\ No newline at end of file
diff --git a/public/logos/atlas_zk_logo.svg b/public/logos/atlas_zk_logo.svg
new file mode 100644
index 00000000..5d89d1eb
--- /dev/null
+++ b/public/logos/atlas_zk_logo.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 243 290" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <rect id="Artboard1" x="0" y="0" width="243" height="290" style="fill:none;"/>
+    <g id="AtlasZK-Logo" serif:id="AtlasZK Logo">
+        <path d="M60.634,194.081L60.488,194.325C39.83,176.782 25.952,150.584 25.952,121.386C25.952,68.619 68.792,25.778 121.559,25.778C174.326,25.778 217.167,68.619 217.167,121.386C217.167,150.529 204.099,176.644 183.509,194.186L172.398,175.395C173.257,171.604 177.422,166.187 181.753,165.956C186.615,165.697 186.528,154.02 186.567,151.052C186.607,148.084 192.053,147.415 194.995,143.267C197.938,139.12 198.117,119.764 196.606,119.716C195.577,121.598 194.884,132.58 193.478,132.771C192.071,132.963 190.054,127.839 189.923,121.311C189.792,114.782 184.503,112.03 182.287,111.988C180.071,111.945 178.632,112.577 178.323,115.365C178.014,118.153 176.795,123.62 167.949,124.348C159.103,125.076 156.115,113.606 155.118,109.549C153.326,113.203 156.484,128.462 165.465,127.09C174.446,125.718 172.196,132.19 172.196,135.27C172.196,138.295 160.537,149.564 157.814,150.729L122.118,90.359L94.796,135.308C94.393,135.324 94.125,135.37 94.01,135.449C92.227,136.687 86.901,133.533 85.564,130.426C84.227,127.319 87.361,118.909 87.361,114.503C87.361,110.096 93.219,103.115 98.193,101.034C103.167,98.952 98.354,96.609 96.396,95.6C94.438,94.591 94.721,87.199 97.437,86.86C100.153,86.52 105.173,87.45 105.417,83.186C105.661,78.922 97.83,81.74 97.162,79.269C96.495,76.798 104.494,69.142 106.965,69.142C109.436,69.142 108.985,71.713 108.985,73.584C108.985,75.456 112.788,78.776 114.807,78.328C116.825,77.881 117.993,67.327 117.953,64.917C117.914,62.507 120.89,57.32 123.529,56.823C126.167,56.327 127.497,57.889 130.257,57.92C133.018,57.951 137.198,55.53 139.665,55.237C142.133,54.945 143.156,58.573 143.503,59.964C143.849,61.355 147.436,62.896 150.92,63.073C154.403,63.251 158.782,59.099 158.594,58.258C158.407,57.417 146.264,46.836 121.925,46.836C97.587,46.836 83.232,57.349 82.165,58.048C81.098,58.748 83.091,60.455 83.091,61.857C83.091,63.259 82.385,64.726 82.175,66.773C81.964,68.82 84.441,74.24 84.441,75.223C84.441,76.207 77.94,77.151 75.259,77.151C72.579,77.151 72.085,81.77 71.863,84.945C71.641,88.12 62.487,87.23 61.778,88.047C61.068,88.865 61.912,90.147 57.477,92.62C53.043,95.093 47.346,100.594 46.899,118.409C46.452,136.224 53.304,132.864 55.301,133.992C57.298,135.12 55.963,136.499 55.963,138.385C55.963,140.271 58.249,143.616 61.039,144.789C63.829,145.962 63.263,143.891 66.983,143.891C70.702,143.891 72.768,149.013 72.768,149.013C72.768,149.013 73.909,157.164 73.322,159.493C72.735,161.822 74.029,164.329 74.718,167.146C75.407,169.962 73.391,171.594 71.13,172.567C69.358,173.329 70.215,175.529 70.669,176.447L60.555,193.722L60.634,194.081Z"/>
+        <path d="M45.371,239.855L122.021,110.465L197.991,239.855L155.193,239.855L122.021,183.68L88.236,239.855L45.371,239.855Z"/>
+        <path d="M122.021,218.493L100.451,239.855L122.021,264.352L143.785,239.855L122.021,218.493Z"/>
+    </g>
+</svg>
diff --git a/public/logos/ethereum.svg b/public/logos/ethereum.svg
new file mode 100644
index 00000000..668f2cc0
--- /dev/null
+++ b/public/logos/ethereum.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1920 1920" enable-background="new 0 0 1920 1920" xml:space="preserve">
+<g>
+	<polygon fill="#8A92B2" points="959.8,80.7 420.1,976.3 959.8,731 	"/>
+	<polygon fill="#62688F" points="959.8,731 420.1,976.3 959.8,1295.4 	"/>
+	<polygon fill="#62688F" points="1499.6,976.3 959.8,80.7 959.8,731 	"/>
+	<polygon fill="#454A75" points="959.8,1295.4 1499.6,976.3 959.8,731 	"/>
+	<polygon fill="#8A92B2" points="420.1,1078.7 959.8,1839.3 959.8,1397.6 	"/>
+	<polygon fill="#62688F" points="959.8,1397.6 959.8,1839.3 1499.9,1078.7 	"/>
+</g>
+</svg>
diff --git a/public/logos/hardhat.svg b/public/logos/hardhat.svg
new file mode 100644
index 00000000..e5a0da15
--- /dev/null
+++ b/public/logos/hardhat.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="177px" viewBox="0 0 256 177" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>Hardhat</title>
+    <g>
+				<path d="M256,148.406607 C256,148.406607 217.007253,142.629903 196.402559,140.973019 C176.615112,139.383307 153.166846,138.465303 128.011319,138.465303 C102.855792,138.465303 79.4075265,139.383307 59.6256766,140.973019 C39.0153847,142.652294 0.0282356755,150.668029 0.0282356755,150.668029 L0.0282356755,160.743674 C0.0282356755,169.699803 57.3306685,176.976658 128.011319,176.976658 C198.69197,176.976658 255.994402,169.699803 255.994402,160.743674 L256,148.406607 Z" fill="#F0D50C"></path>
+				<path d="M88.6603273,14.7643691 C41.9255225,31.4163803 10.7166742,75.664588 10.7140171,125.277403 L10.7140171,141.891023 C27.3914169,137.906683 44.3954335,135.441138 61.5176588,134.524607 C61.4019755,131.337717 61.342268,128.126572 61.3385362,124.89117 C61.355329,81.2972124 71.8787806,42.0693674 88.6603273,14.7643691 Z" fill="#F0D50C"></path>
+				<path d="M245.30315,125.277403 C245.343126,98.0545432 235.873361,71.6726454 218.529795,50.6896416 C226.048491,74.7037573 229.794938,99.7392358 229.635395,124.902365 C229.635395,129.481186 229.517846,134.007763 229.282748,138.482096 C234.620105,139.303585 239.906987,140.424875 245.118303,141.840644 L245.30315,125.277403 Z" fill="#FFF04D"></path>
+				<path d="M245.30315,125.277403 C245.343126,98.0545432 235.873361,71.6726454 218.529795,50.6896416 C226.048491,74.7037573 229.794938,99.7392358 229.635395,124.902365 C229.635395,129.481186 229.517846,134.007763 229.282748,138.482096 C234.620105,139.303585 239.906987,140.424875 245.118303,141.840644 L245.30315,125.277403 Z" fill="#FFEA00"></path>
+				<path d="M218.529795,50.684044 C187.104313,12.5902868 135.200193,-1.76612429 88.6659248,14.7643691 C71.873183,42.0693674 61.355329,81.2972124 61.355329,124.896768 C61.355329,128.132169 61.4150365,131.343315 61.5344516,134.530204 C78.9989031,133.181187 99.2173643,132.347148 120.868806,132.196013 C120.868806,132.196013 125.78908,132.196013 128.022514,132.196013 C161.889262,131.789594 195.739449,133.898215 229.293943,138.504486 C229.521578,134.026422 229.639127,129.499845 229.64659,124.924756 C229.8055,99.7516578 226.055239,74.7064879 218.529795,50.684044 L218.529795,50.684044 Z" fill="#FFF04D"></path>
+				<g transform="translate(81.394668, 0.000000)" fill="#FFF04D">
+						<path d="M93.7986585,58.4422907 L86.3650714,11.9823716 C85.8370184,8.56415712 83.3879084,5.75552474 80.0733908,4.76709013 C58.4140349,-1.58903004 35.3846237,-1.58903004 13.7252677,4.76709013 C10.4129329,5.75734065 7.96632131,8.56560629 7.43918465,11.9823716 L0,58.4422907"></path>
+				</g>
+				<path d="M128.022514,131.210839 C125.783482,131.210839 123.561242,131.210839 121.355796,131.210839 L121.109502,131.210839 L120.863209,131.210839 C53.507521,131.681036 0.0338332561,138.756378 0.0338332561,147.415835 L0.0338332561,159.96561 C-0.075292123,160.701057 0.0815069892,161.451311 0.476042125,162.081496 C3.8969084,159.512263 7.8289966,157.706557 12.0070582,156.786185 C22.6478093,154.197131 33.4629332,152.386191 44.3666718,151.367727 C50.5593216,150.688461 56.7447402,152.70744 61.3441338,156.909331 C69.765567,164.618976 80.76931,168.894659 92.1868031,168.893752 L163.835835,168.893752 C175.253226,168.893752 186.256779,164.618506 194.678504,156.909331 L194.678504,156.909331 C199.277546,152.702584 205.466059,150.68122 211.661564,151.362129 C222.56347,152.380489 233.376741,154.191432 244.01558,156.780587 C247.972386,157.541461 251.709264,159.176584 254.953252,161.566519 C255.137973,161.751239 255.350681,161.913569 255.51301,162.081496 C255.91028,161.448201 256.069033,160.694128 255.960817,159.954415 L255.960817,147.40464 C256,138.476498 198.697567,131.210839 128.022514,131.210839 Z" fill="#FFF04D"></path>
+				<polygon fill="#6E6F70" points="154.980462 93.942147 127.988929 110.555766 127.988929 132.13444"></polygon>
+				<polygon fill="#0A0A0A" points="128.016917 132.13444 128.016917 110.555766 101.025383 93.942147"></polygon>
+				<polygon fill="#0A0A0A" points="101.025383 84.0848076 101.025383 84.0848076 128.016917 99.6908623 128.016917 40.4292763"></polygon>
+				<polygon fill="#6E6F70" points="154.980462 84.0848076 127.988929 40.4236787 127.988929 40.4236787 127.988929 68.4731552 127.988929 68.4731552 127.988929 99.6852648 154.980462 84.07921 154.980462 84.07921"></polygon>
+		</g>
+</svg>
diff --git a/public/logos/remix_logo.svg b/public/logos/remix_logo.svg
new file mode 100644
index 00000000..db337c4f
--- /dev/null
+++ b/public/logos/remix_logo.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 448 392" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <rect id="Artboard1" x="0" y="0" width="448" height="392" style="fill:none;"/>
+    <g id="Remix-Logo" serif:id="Remix Logo">
+        <path d="M224.621,372L118.621,265L224.621,300L331.621,265L224.621,372Z"/>
+        <path d="M99.02,244.718C103.08,253.481 107.488,261 107.488,261C107.488,261 56.429,271.834 41.499,254.1C26.568,236.366 14.29,187.388 22.787,161.862C29.269,142.387 62.617,143.795 65.928,143.984C83.624,72.81 148.004,20 224.621,20C301.227,20 365.599,72.795 383.306,143.953C388.911,143.711 419.64,143.251 425.834,161.862C434.331,187.388 422.053,236.366 407.122,254.1C392.192,271.834 341.133,261 341.133,261C341.133,261 344.694,255.861 348.555,248.165L348.482,248.156C349.057,247.057 349.619,245.949 350.165,244.833C351.392,242.193 352.575,239.572 353.717,236.973C360.553,220.502 364.327,202.444 364.327,183.512C364.327,106.405 301.727,43.805 224.621,43.805C147.515,43.805 84.914,106.405 84.914,183.512C84.914,197.551 86.99,211.11 90.85,223.897C93.767,232.151 96.572,239.434 99.02,244.718Z"/>
+        <path d="M119.065,241.151C113.058,230.365 108.683,218.563 106.272,206.074L130.808,192.304L104.121,183.716C104.121,183.644 104.121,183.572 104.121,183.5C104.121,173.766 105.297,164.302 107.516,155.24L134.176,152.974L114.513,134.913C118.499,126.052 123.54,117.76 129.479,110.193L153.786,118.588L143.394,95.261C150.678,88.662 158.781,82.937 167.533,78.255L185.836,95.2L185.923,70.306C194.923,67.277 204.401,65.275 214.212,64.441L224.621,86.894L234.856,64.426C244.658,65.245 254.128,67.23 263.124,70.241L263.35,95.2L282.18,78.509C290.77,83.153 298.728,88.805 305.893,95.302L295.458,118.588L319.957,110.442C325.73,117.837 330.648,125.921 334.564,134.548L314.85,152.63L341.65,154.933C343.913,164.07 345.116,173.618 345.121,183.441L319.033,191.961L343.141,205.171C340.738,218.155 336.217,230.407 329.946,241.562L224.621,276.899L119.065,241.151Z"/>
+    </g>
+</svg>
diff --git a/public/logos/viem-icon.png b/public/logos/viem-icon.png
new file mode 100644
index 00000000..dae92c2c
Binary files /dev/null and b/public/logos/viem-icon.png differ
diff --git a/public/logos/viem.png b/public/logos/viem.png
new file mode 100644
index 00000000..d0a3575c
Binary files /dev/null and b/public/logos/viem.png differ
diff --git a/public/logos/web3js-icon.png b/public/logos/web3js-icon.png
new file mode 100644
index 00000000..3061fa20
Binary files /dev/null and b/public/logos/web3js-icon.png differ
diff --git a/public/logos/web3js.svg b/public/logos/web3js.svg
new file mode 100644
index 00000000..6fd6bd80
--- /dev/null
+++ b/public/logos/web3js.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="240px" viewBox="0 0 256 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>web3js</title>
+    <g>
+				<path d="M85.3674598,43.7843098 C85.3674598,43.7843098 75.8802906,49.2616143 75.8802906,60.1991602 C75.8802906,71.1537692 75.8802906,114.869826 75.8802906,114.869826 C75.8802906,114.869826 75.8802906,125.824435 66.3931214,120.347131 C56.9059521,114.869826 56.9059521,103.93228 56.9059521,103.93228 C56.9059521,103.93228 56.9059521,60.1991602 56.9059521,49.2616143 C56.9059521,48.5790842 56.9400787,47.9136173 57.0083317,47.2652136 C58.0491902,37.6415384 66.3760581,32.8297007 66.3760581,32.8297007 L47.4187829,21.8921549 C47.4187829,21.8921549 47.4017197,21.8921549 47.3846564,21.9092182 C46.821569,22.23342 37.9316137,27.7107245 37.9316137,38.3070053 C37.9316137,49.2616143 37.9316137,92.9776711 37.9316137,92.9776711 C37.9316137,92.9776711 37.9316137,103.93228 28.4444444,98.4549757 C18.9572752,92.9776711 18.9572752,82.0401253 18.9572752,82.0401253 C18.9572752,82.0401253 18.9572752,38.3070053 18.9572752,27.3694594 C18.9572752,16.4319136 28.4444444,10.9546091 28.4444444,10.9546091 L9.48716923,-9.69933695e-15 C9.48716923,-9.69933695e-15 3.87973478e-14,5.47730454 3.87973478e-14,16.4148504 C3.87973478e-14,27.3694594 3.87973478e-14,71.0855162 3.87973478e-14,71.0855162 C3.87973478e-14,71.0855162 3.87973478e-14,103.93228 28.4444444,120.347131 C37.1637672,125.380791 43.2041592,125.773245 47.4017197,123.913351 C51.5992801,130.619209 57.6396721,137.205626 66.3589949,142.239285 C94.8034393,158.654136 94.8034393,125.824435 94.8034393,125.824435 C94.8034393,125.824435 94.8034393,82.0913151 94.8034393,71.1537692 C94.8034393,60.1991602 104.290609,54.7389189 104.290609,54.7389189 C101.374381,51.0705179 98.781296,48.5792828 96.511354,47.2652136 C94.5761519,46.1449253 90.8615205,44.984624 85.3674598,43.7843098 Z" fill="#808285"></path>
+				<path d="M189.641005,136.813171 C189.641005,104.392988 218.08545,120.39832 218.08545,120.39832 L218.08545,120.39832 L256,142.290475 L256,164.18263 L218.08545,142.290475 C218.08545,142.290475 217.965922,142.221467 217.753698,142.114458 L217.628908,142.052508 C215.73539,141.126763 208.59828,138.268597 208.59828,147.784843 C208.59828,158.722389 218.08545,164.199693 218.08545,164.199693 L218.08545,164.199693 L237.042725,175.137239 C237.042725,175.137239 256,186.091848 256,218.921549 C256,251.75125 227.555556,235.336399 227.555556,235.336399 L227.555556,235.336399 L189.641005,213.444244 L189.641005,191.55209 L227.572619,213.444244 C227.572619,213.444244 237.059788,218.921549 237.059788,207.96694 C237.059788,197.029394 227.572619,191.55209 227.572619,191.55209 L227.572619,191.55209 L218.08545,186.074785 C217.519405,185.736399 189.641005,168.909152 189.641005,136.813171 Z M161.196561,87.5686196 C166.865803,88.2201533 170.709106,89.1287944 172.726468,90.294543 C174.921834,91.563152 177.397623,94.3060472 180.153836,98.5232287 C180.153836,98.5232287 170.666667,104.000533 170.666667,114.938079 L170.666667,114.938079 L170.665899,169.695169 C170.641067,171.534207 169.813333,201.946 142.222222,186.023595 C114.631111,170.10119 113.803378,138.717998 113.778546,136.849337 L113.777778,136.761981 L132.735053,147.71659 L132.735053,147.71659 L132.735416,147.753244 C132.745833,148.447749 133.054845,158.838764 142.222222,164.13144 C151.418968,169.441072 151.700501,159.309428 151.709119,158.684147 L151.709391,103.98347 C151.709391,93.0459241 161.196561,87.5686196 161.196561,87.5686196 Z M113.811904,93.1653669 L132.769179,104.102913 L132.769179,125.995068 L113.811904,115.057522 L113.811904,93.1653669 Z" fill="#BCBEC0"></path>
+				<path d="M218.08545,43.7843098 C209.349064,38.7335866 201.51703,36.276478 194.845298,35.2868093 C193.104846,31.4817037 188.839032,27.0111311 180.170899,22.0627874 C151.726455,5.81856962 123.299074,21.8921549 123.299074,21.8921549 L85.3674598,43.7843098 L104.324735,54.7218556 L142.239285,32.8297007 C142.239285,32.8297007 151.726455,27.3523962 161.196561,32.8297007 C170.68373,38.3070053 161.196561,43.7843098 161.196561,43.7843098 L123.28201,65.6764647 L123.28201,65.6764647 L123.28201,65.6764647 L142.239285,76.6140105 L180.187962,54.7047924 C180.75105,54.3805905 189.93108,49.4151836 199.111111,54.7218556 C208.59828,60.1991602 199.111111,65.6594015 199.111111,65.6594015 L161.196561,87.5515564 L180.153836,98.5061654 L227.555556,71.136706 C227.555556,71.136706 246.512831,60.1991602 218.08545,43.7843098 Z" fill="#F16822"></path>
+		</g>
+</svg>
diff --git a/public/logos/zksync-icon.svg b/public/logos/zksync-icon.svg
new file mode 100644
index 00000000..c3564cdd
--- /dev/null
+++ b/public/logos/zksync-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 440 275" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="0" y="0" width="439.631" height="274.249" style="fill:none;"/><g><path d="M414.636,137.208L304.044,27.113L304.044,107.694L194.282,188.441L304.044,188.441L304.044,247.302L414.636,137.208Z" style="fill:#fff;"/><path d="M24.995,137.208L135.587,247.302L135.587,167.218L245.349,85.808L135.587,85.808L135.587,26.948L24.995,137.208Z" style="fill:#fff;"/></g></svg>
\ No newline at end of file