diff --git a/app.vue b/app.vue
index c96267b93..608b24e44 100644
--- a/app.vue
+++ b/app.vue
@@ -66,15 +66,15 @@ onMounted(() => {
     <NuxtLoadingIndicator />
 
     <AppBanner
-      id="nuxt-tips"
-      to="https://michaelnthiessen.com/nuxt-tips-collection?aff=J0Emk"
+      id="nuxt-cert-date"
+      to="https://certificates.dev/nuxt?utm_source=nuxt&utm_medium=website&utm_campaign=affiliate&friend=NUXT"
     >
       <div class="flex items-center gap-1">
         <UIcon
-          name="i-ph-magic-wand"
-          class="w-5 h-5 flex-shrink-0 pointer-events-none hidden lg:inline-block mr-1"
+          name="i-ph-circle-wavy-check-duotone"
+          class="w-5 h-5 flex-shrink-0 pointer-events-none hidden sm:inline-block"
         />
-        <span>Изучите Nuxt с коллекцией из 100+ советов!</span>
+        <span><span class="hidden lg:inline">Official</span> Nuxt mid-level certification launch date announced!</span>
         <UButton
           label="Узнать больше"
           color="white"
diff --git a/composables/useModules.ts b/composables/useModules.ts
index d0c69fe7f..0890ad5d1 100644
--- a/composables/useModules.ts
+++ b/composables/useModules.ts
@@ -1,4 +1,4 @@
-import type { Module, Filter } from '../types'
+import type { Module, Filter, Stats } from '../types'
 
 const iconsMap = {
   Analytics: 'i-ph-chart-bar',
@@ -43,6 +43,11 @@ export const useModules = () => {
 
   const route = useRoute()
   const router = useRouter()
+  const stats = useState<Stats>('module-stats', () => ({
+    maintainers: 0,
+    contributors: 0,
+    modules: 0
+  }))
   const modules = useState<Module[]>('modules', () => [])
   const module = useState<Module>('module', () => ({} as Module))
 
@@ -52,9 +57,10 @@ export const useModules = () => {
       return
     }
 
-    const res = await $fetch<{ modules: Module[] }>('https://api.nuxt.com/modules')
+    const res = await $fetch<{ modules: Module[], stats: Stats }>('https://api.nuxt.com/modules')
     if (res?.modules) {
       modules.value = res.modules
+      stats.value = res.stats
     }
   }
 
@@ -179,13 +185,19 @@ export const useModules = () => {
     return route.query.q as string
   })
 
-  const isSponsor = (a: Module, b: Module) => {
+  const isSponsorOrOfficial = (a: Module, b: Module) => {
     if (a.sponsor && !b.sponsor) {
       return -1
     }
     else if (!a.sponsor && b.sponsor) {
       return 1
     }
+    else if (a.type === 'official' && b.type !== 'official') {
+      return -1
+    }
+    else if (a.type !== 'official' && b.type === 'official') {
+      return 1
+    }
     else {
       return 0
     }
@@ -234,8 +246,11 @@ export const useModules = () => {
       filteredModules = filteredModules.reverse()
     }
 
-    // sponsored modules in first place
-    return filteredModules.sort(isSponsor)
+    // sponsored & official modules in first place if no sort or order by
+    if (!route.query.sortBy && !route.query.orderBy) {
+      return filteredModules.sort(isSponsorOrOfficial)
+    }
+    return filteredModules
   })
 
   return {
@@ -246,6 +261,7 @@ export const useModules = () => {
     sorts,
     orders,
     // Computed
+    stats,
     modules,
     filteredModules,
     module,
diff --git a/composables/useNavigation.ts b/composables/useNavigation.ts
index 0a8b1b40f..7556a8052 100644
--- a/composables/useNavigation.ts
+++ b/composables/useNavigation.ts
@@ -93,17 +93,20 @@ const _useNavigation = () => {
         label: 'Nuxt UI Pro',
         to: 'https://ui.nuxt.com/pro?utm_source=nuxt-website&utm_medium=header',
         description: 'Премиальные компоненты Vue для Nuxt.',
-        icon: 'i-ph-layout'
+        icon: 'i-ph-layout',
+        target: '_blank'
       }, {
         label: 'Nuxt Studio',
         to: 'https://nuxt.studio/?utm_source=nuxt-website&utm_medium=header',
         description: 'CMS для Nuxt, основанная на Git',
-        icon: 'i-ph-pen'
+        icon: 'i-ph-pen',
+        target: '_blank'
       }, {
         label: 'NuxtHub',
         to: 'https://hub.nuxt.com/?utm_source=nuxt-website&utm_medium=header',
         description: 'Создавайте, развертывайте и управляйте приложениями Nuxt, которые масштабируются.',
-        icon: 'i-ph-rocket-launch'
+        icon: 'i-ph-rocket-launch',
+        target: '_blank'
       }]
     }, {
       label: 'Сервисы',
@@ -217,10 +220,13 @@ const _useNavigation = () => {
         .filter(module => ['name', 'npm', 'repo'].map(field => module[field]).filter(Boolean).some(value => value.search(searchTextRegExp(q)) !== -1))
         .map(module => ({
           id: `module-${module.name}`,
-          label: module.name,
+          label: module.npm,
           suffix: module.description,
           avatar: {
-            src: moduleImage(module.icon)
+            src: moduleImage(module.icon),
+            ui: {
+              rounded: 'rounded-md'
+            }
           },
           to: `/modules/${module.name}`
         }))
diff --git a/content/2.modules.yml b/content/2.modules.yml
index c949f8881..46a42723e 100644
--- a/content/2.modules.yml
+++ b/content/2.modules.yml
@@ -2,15 +2,14 @@ navigation.title: Модули
 title: Nuxt модули
 description: Откройте для себя наш список модулей, которые помогут вам усовершенствовать ваш проект Nuxt. Создан командой и сообществом Nuxt.
 navigation.icon: i-ph-puzzle-piece
+align: center
 links:
-  - label: 'Руководство для автора модуля'
-    icon: i-ph-book-open
+  - label: 'Создайте Nuxt модуль'
     to: '/docs/guide/going-further/modules'
     color: black
-    size: md
+    size: sm
   - label: 'Список модулей'
-    icon: 'i-ph-plus-circle'
     to: 'https://github.com/nuxt/modules#addupdate-a-module'
     target: '_blank'
     color: gray
-    size: md
+    size: sm
diff --git a/content/3.deploy.yml b/content/3.deploy.yml
index 78fa3862a..b20ece1f6 100644
--- a/content/3.deploy.yml
+++ b/content/3.deploy.yml
@@ -2,9 +2,10 @@ navigation.title: Развертывание
 title: Развертывание приложения Nuxt
 description: Узнайте о различных способах развертывания проекта Nuxt на различных хостинг-провайдерах.
 navigation.icon: i-ph-rocket-launch
+align: center
 links:
   - label: 'Руководство по развертыванию'
     icon: i-ph-cloud
     to: '/docs/getting-started/deployment'
     color: black
-    size: md
+    size: sm
diff --git a/content/3.deploy/firebase.md b/content/3.deploy/firebase.md
index e9fe523bd..c37caeb20 100644
--- a/content/3.deploy/firebase.md
+++ b/content/3.deploy/firebase.md
@@ -154,3 +154,20 @@ firebase deploy --only functions:server,hosting
 ::read-more{to="https://firebase.google.com/docs/hosting/manage-cache#using_cookies" target="\_blank"}
 Для получения дополнительной информации обратитесь к документации **Firebase**.
 ::
+
+## Working with Environment Variables
+
+To set environment variables for your Firebase functions, you need to copy the `.env` file to the `.output/server` directory.
+You can do this by adding a `postbuild` script to your `package.json`, that will automatically run after the build command:
+
+```json [package.json]
+{
+  "scripts": {
+    "postbuild": "cp .env .output/server/.env"
+  }
+}
+```
+
+::read-more{to="https://firebase.google.com/docs/functions/config-env?gen=2nd#env-variables" target="\_blank"}
+For more information, refer to the **Firebase documentation**.
+::
\ No newline at end of file
diff --git a/content/3.deploy/github-pages.md b/content/3.deploy/github-pages.md
index c58f7d611..04fa955aa 100644
--- a/content/3.deploy/github-pages.md
+++ b/content/3.deploy/github-pages.md
@@ -39,9 +39,9 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - run: corepack enable
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: "20"
       # Выберите свой собственный менеджер пакетов и сценарий сборки
diff --git a/content/4.templates.yml b/content/4.templates.yml
index 5be0019e5..1bd3632c0 100644
--- a/content/4.templates.yml
+++ b/content/4.templates.yml
@@ -3,19 +3,20 @@ title: Шаблоны Nuxt
 navigation.title: Шаблоны
 description: 'Изучите шаблоны сообществ, чтобы начать работу за несколько секунд.'
 navigation.icon: i-ph-browsers
+align: center
 links:
   - label: 'Список шаблонов'
     to: 'https://github.com/nuxt/nuxt.com/tree/main#add-a-nuxt-template'
     icon: 'i-ph-plus-circle'
     target: '_blank'
     color: gray
-    size: md
-  - label: 'Nuxt Starters'
-    to: 'https://nuxt.new'
-    icon: 'i-simple-icons-nuxtdotjs'
+    size: sm
+  - label: 'Full-stack templates'
+    to: 'https://hub.nuxt.com/templates'
     target: '_blank'
+    variant: ghost
     color: gray
-    size: md
+    size: sm
 templates:
   - name: 'Movies'
     slug: 'movies'
diff --git a/content/5.video-courses.yml b/content/5.video-courses.yml
index 05d5680f4..5131cb6b3 100644
--- a/content/5.video-courses.yml
+++ b/content/5.video-courses.yml
@@ -3,6 +3,7 @@ title: Видеокурсы Nuxt
 navigation.title: Видеокурсы
 description: 'Смотрите видеокурсы от сообщества, чтобы изучить Vue 3 и Nuxt 3.'
 navigation.icon: i-ph-graduation-cap
+align: center
 courses:
   - name: 'Основы работы с Nuxt 3'
     slug: 'vc-nuxt-3-fundamentals'
@@ -68,7 +69,7 @@ courses:
     description: 'Глубокое погружение в Vue 3 с Эваном Ю.'
     url: 'https://www.vuemastery.com/courses/vue3-deep-dive-with-evan-you/vue3-overview?fpr=nuxt'
     badge: Премиум
-  - name: 'Nuxt 3 - краш-курс'
+  - name: 'Nuxt 3 - Краш-курс'
     slug: 'nuxt-3-crash-course-prismic'
     description: 'Раскройте возможности Prismic в качестве Headless конструктора сайтов вместе с Nuxt.'
     url: 'https://www.youtube.com/watch?v=8GmfcbuYOWE'
diff --git a/content/6.showcase.yml b/content/6.showcase.yml
index 7d2fda1ff..765810c76 100644
--- a/content/6.showcase.yml
+++ b/content/6.showcase.yml
@@ -2,21 +2,22 @@ title: Витрина
 head.title: Nuxt витрина
 description: Откройте для себя нашу подборку сайтов, созданных с помощью Nuxt. Эта коллекция создана на основе VueTelescope.
 navigation.icon: i-ph-projector-screen
+align: center
 links:
   - label: 'Chrome'
-    size: 'md'
+    size: 'sm'
     color: 'gray'
     to: 'https://chrome.google.com/webstore/detail/vue-telescope/neaebjphlfplgdhedjdhcnpjkndddbpd'
     icon: 'i-logos-chrome'
     target: '_blank'
   - label: 'Firefox'
-    size: 'md'
+    size: 'sm'
     color: 'gray'
     to: 'https://addons.mozilla.org/en/firefox/addon/vue-telescope/'
     icon: 'i-logos-firefox'
     target: '_blank'
   - label: 'Edge'
-    size: 'md'
+    size: 'sm'
     color: 'gray'
     to: 'https://microsoftedge.microsoft.com/addons/detail/vue-telescope/icgcillpgelpleniodgkmohgdmeogodl'
     icon: 'i-logos-microsoft-edge'
diff --git a/content/8.enterprise/1.support.yml b/content/8.enterprise/1.support.yml
index addbd255a..f5d6f54fd 100644
--- a/content/8.enterprise/1.support.yml
+++ b/content/8.enterprise/1.support.yml
@@ -9,7 +9,7 @@ hero:
   - label: Поговорите с экспертом
     color: black
     to: 'https://calendly.com/ferdinand-nuxt/nuxtlabs-ferdinand'
-    size: lg
+    size: sm
     target: '_blank'
 logos:
   - light: '/assets/enterprise/support/light/malt.svg'
diff --git a/content/8.enterprise/2.agencies.yml b/content/8.enterprise/2.agencies.yml
index fb9879db7..9adf0d104 100644
--- a/content/8.enterprise/2.agencies.yml
+++ b/content/8.enterprise/2.agencies.yml
@@ -4,9 +4,10 @@ description: Ищете надежного партнера с сильной э
 head.title: Партнерские агентства Nuxt
 head.description: Обратитесь к нашему каталогу партнерских агентств и найдите агентство рядом с вами, обладающее необходимым набором навыков.
 navigation.icon: i-ph-handshake
+align: center
 links:
   - label: 'Отправить мое агентство'
     to: 'https://docs.google.com/forms/d/e/1FAIpQLSf85qskit5QqmGJcruGkGF0U7240Bh9MeN0pHB18UiOMWC8dA/viewform'
     color: black
-    size: 'lg'
+    size: 'sm'
     target: '_blank'
diff --git a/content/8.enterprise/3.sponsors.yml b/content/8.enterprise/3.sponsors.yml
index 9eb1220c9..d1f53fea1 100644
--- a/content/8.enterprise/3.sponsors.yml
+++ b/content/8.enterprise/3.sponsors.yml
@@ -3,9 +3,10 @@ description: Nuxt - это фреймворк с открытым исходны
 navigation.title: Спонсоры
 head.description: Nuxt - это фреймворк с открытым исходным кодом, бесплатно доступный для использования благодаря нашим щедрым спонсорам.
 navigation.icon: i-ph-hand-heart
+align: center
 links:
   - label: 'Стать спонсором'
     to: 'https://github.com/sponsors/nuxt'
     color: 'black'
-    size: 'lg'
+    size: 'sm'
     target: '_blank'
diff --git a/pages/enterprise/support.vue b/pages/enterprise/support.vue
index 96368f4a0..ccc109909 100644
--- a/pages/enterprise/support.vue
+++ b/pages/enterprise/support.vue
@@ -61,14 +61,23 @@ onBeforeUnmount(() => {
       </UPageHero>
     </UContainer>
 
-    <ULandingSection>
+    <ULandingSection class="py-8 sm:py-8">
       <EnterpriseSupportLogoCarousel :logos="page.logos" />
     </ULandingSection>
 
-    <ULandingSection v-bind="page.service" align="left">
-      <UPageGrid :ui="{ wrapper: 'xl:grid-cols-2' }">
-        <UPageCard v-for="service in page.service.services" :key="service.title" v-bind="service" :ui="{ background: 'card-bg', icon: { base: 'size-8' } }" />
-      </UPageGrid>
+    <ULandingSection
+      v-bind="page.service"
+      align="center"
+      :ui="{
+        container: 'gap-12 sm:gap-y-12',
+        base: 'text-left items-start'
+      }"
+    >
+      <template #links>
+        <UPageGrid :ui="{ wrapper: 'xl:grid-cols-4' }">
+          <UPageCard v-for="service in page.service.services" :key="service.title" v-bind="service" :ui="{ background: 'card-bg', icon: { base: 'size-8' } }" />
+        </UPageGrid>
+      </template>
     </ULandingSection>
 
     <ULandingSection v-bind="page.expertise">
diff --git a/pages/modules/[slug].vue b/pages/modules/[slug].vue
index b9b089fdb..56533c0f0 100644
--- a/pages/modules/[slug].vue
+++ b/pages/modules/[slug].vue
@@ -41,15 +41,27 @@ const links = computed(() => [{
   target: '_blank'
 }].filter(Boolean))
 
-const contributors = computed(() => module.value.contributors.map(contributor => ({
-  label: contributor.username,
-  to: `https://github.com/${contributor.username}`,
-  avatar: {
-    src: `https://ipx.nuxt.com/f_auto,s_20x20/gh_avatar/${contributor.username}`,
-    srcset: `https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/${contributor.username} 2x`,
-    alt: contributor.username
+const contributors = computed(() => {
+  const allContributors = module.value.contributors.map(contributor => ({
+    label: contributor.username,
+    to: `https://github.com/${contributor.username}`,
+    avatar: {
+      src: `https://ipx.nuxt.com/f_auto,s_20x20/gh_avatar/${contributor.username}`,
+      srcset: `https://ipx.nuxt.com/f_auto,s_40x40/gh_avatar/${contributor.username} 2x`,
+      alt: contributor.username
+    }
+  }))
+  if (allContributors.length > 10) {
+    return [...allContributors.slice(0, 10), {
+      label: 'View all contributors',
+      to: `https://github.com/${module.value.repo}/graphs/contributors`,
+      external: true,
+      target: '_blank'
+    }]
   }
-})))
+
+  return allContributors
+})
 
 const title = module.value.name.charAt(0).toUpperCase() + module.value.name.slice(1)
 const description = module.value.description || 'Модуль Nuxt'
@@ -85,7 +97,7 @@ defineOgImageComponent('Docs', {
     </div>
     <UPageHeader :description="module.description" :ui="{ headline: 'mb-8' }">
       <template #headline>
-        <UBreadcrumb :links="[{ label: 'Модули', to: '/modules', icon: 'i-ph-puzzle-piece' }, { to: { name: 'modules', query: { category: module.category } }, label: module.category }, { label: module.npm }]" />
+        <UBreadcrumb :links="[{ label: 'Модули', to: '/modules' }, { to: { name: 'modules', query: { category: module.category } }, label: module.category }, { label: module.npm }]" />
       </template>
       <template #title>
         <div class="flex items-center gap-4">
@@ -99,7 +111,7 @@ defineOgImageComponent('Docs', {
           />
 
           <div>
-            {{ module.name }}
+            {{ module.npm }}
 
             <UTooltip v-if="module.type === 'official'" text="Official module" class="tracking-normal">
               <UIcon name="i-ph-medal" class="h-6 w-6 text-primary" />
@@ -153,11 +165,9 @@ defineOgImageComponent('Docs', {
       </UPageBody>
 
       <template #right>
-        <UContentToc :links="module.readme.toc?.links">
+        <UContentToc>
           <template #bottom>
-            <div class="hidden lg:block space-y-6" :class="{ '!mt-6': module.readme?.toc?.links?.length }">
-              <UDivider v-if="module.readme?.toc?.links?.length" type="dashed" />
-
+            <div class="hidden lg:block space-y-6">
               <UPageLinks title="Links" :links="links" />
 
               <UDivider type="dashed" />
diff --git a/pages/modules/index.vue b/pages/modules/index.vue
index 2b3df7f87..466679b39 100644
--- a/pages/modules/index.vue
+++ b/pages/modules/index.vue
@@ -7,21 +7,10 @@ const inputRef = ref()
 
 const route = useRoute()
 const { replaceRoute } = useFilters('modules')
-const { fetchList, filteredModules, q, categories, selectedOrder, sorts, selectedSort } = useModules()
+const { fetchList, filteredModules, q, categories, stats, selectedOrder, sorts, selectedSort } = useModules()
 
 const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
 
-const links = [{
-  icon: 'i-ph-book-open',
-  label: 'Руководство для авторов модулей',
-  to: '/docs/guide/going-further/modules'
-}, {
-  icon: 'i-ph-plus-circle',
-  label: 'Составьте список модулей',
-  to: 'https://github.com/nuxt/modules#addupdate-a-module',
-  target: '_blank'
-}]
-
 const title = page.value.head?.title || page.value.title
 const description = page.value.head?.description || page.value.description
 useSeoMeta({
@@ -47,75 +36,35 @@ const { copy } = useCopyToClipboard()
 <template>
   <UContainer>
     <UPageHero v-bind="page" class="z-30">
-      <div class="lg:pl-10">
-        <UPageGrid :ui="{ wrapper: 'grid-cols-2 sm:grid-cols-2 xl:grid-cols-2 gap-4' }">
-          <UPageCard
-            to="https://image.nuxt.com/?utm_source=nuxt_website&utm_medium=modules"
-            target="_blank"
-            description="Оптимизация изображений по принципу «подключи и работай»."
-          >
-            <template #title>
-              Nuxt Image
-              <UIcon name="i-ph-medal" class="h-4 w-4 text-primary pointer-events-none" />
-            </template>
-          </UPageCard>
-          <UPageCard
-            to="https://content.nuxt.com/?utm_source=nuxt_website&utm_medium=modules"
-            target="_blank"
-            title="Nuxt Content"
-            description="CMS на основе Git с поддержкой Markdown."
-          >
-            <template #title>
-              Nuxt Content
-              <UIcon name="i-ph-medal" class="h-4 w-4 text-primary pointer-events-none" />
-            </template>
-          </UPageCard>
-          <UPageCard
-            to="https://devtools.nuxt.com/?utm_source=nuxt_website&utm_medium=modules"
-            target="_blank"
-            description="Визуальные инструменты, которые помогут вам лучше узнать свое приложение."
-          >
-            <template #title>
-              Nuxt DevTools
-              <UIcon name="i-ph-medal" class="h-4 w-4 text-primary pointer-events-none" />
-            </template>
-          </UPageCard>
-          <UPageCard
-            to="https://ui.nuxt.com/?utm_source=nuxt_website&utm_medium=modules"
-            target="_blank"
-            description="Полностью стилизованные и настраиваемые компоненты."
-          >
-            <template #title>
-              Nuxt UI
-              <UIcon name="i-ph-medal" class="h-4 w-4 text-primary pointer-events-none" />
-            </template>
-          </UPageCard>
-        </UPageGrid>
-      </div>
+      <template #description>
+        <p>{{ page.description }}</p>
+        <div class="flex flex-wrap items-center gap-x-6 gap-y-2 mt-4 justify-center">
+          <div class="flex items-center gap-1.5">
+            <UIcon name="i-ph-user-circle-fill" class="w-4 h-4 flex-shrink-0 dark:text-gray-200 text-gray-700" />
+            <span class="text-sm font-medium">{{ formatNumber(stats.maintainers) }} Maintainers</span>
+          </div>
+          <div class="flex items-center gap-1.5">
+            <UIcon name="i-ph-users-three-fill" class="w-4 h-4 flex-shrink-0 dark:text-gray-200 text-gray-700" />
+            <span class="text-sm font-medium">{{ formatNumber(stats.contributors) }} Contributors</span>
+          </div>
+          <div class="flex items-center gap-1.5">
+            <UIcon name="i-ph-puzzle-piece-fill" class="w-4 h-4 flex-shrink-0 dark:text-gray-200 text-gray-700" />
+            <span class="text-sm font-medium">{{ formatNumber(stats.modules) }} Modules</span>
+          </div>
+        </div>
+      </template>
     </UPageHero>
 
     <UPage id="smooth" class="pt-20 -mt-20">
       <template #left>
         <UAside>
-          <UNavigationTree :links="[{ label: 'Categories', disabled: true, children: categories }]" />
-
-          <template #bottom>
-            <UDivider type="dashed" class="my-6" />
-
-            <UPageLinks :links="links" />
-          </template>
-        </UAside>
-      </template>
-
-      <UPageBody>
-        <div class="flex items-center justify-between gap-3 mb-8">
           <UInput
             ref="inputRef"
             :model-value="q"
             name="q"
             icon="i-ph-magnifying-glass"
             placeholder="Поиск..."
-            class="w-56"
+            class="w-full mb-2"
             size="md"
             autocomplete="off"
             :ui="{ icon: { trailing: { pointer: '' } } }"
@@ -136,35 +85,69 @@ const { copy } = useCopyToClipboard()
               </UKbd>
             </template>
           </UInput>
-
-          <UButtonGroup>
+          <UButtonGroup class="mb-4 w-full">
+            <USelectMenu
+              :model-value="selectedSort"
+              :options="sorts"
+              size="md"
+              color="white"
+              class="w-full"
+              @update:model-value="replaceRoute('sortBy', $event)"
+            />
             <UButton
               :icon="selectedOrder.icon"
               size="md"
               color="gray"
               @click="replaceRoute('orderBy', selectedOrder.key === 'desc' ? 'asc' : 'desc')"
             />
+          </UButtonGroup>
+          <UNavigationTree :links="[{ label: 'Категории', disabled: true, children: categories }]" />
+        </UAside>
+      </template>
+
+      <UPageBody class="lg:pl-8">
+        <div class="lg:hidden mb-6 flex items-center gap-2">
+          <UInput
+            ref="inputRef"
+            type="search"
+            :model-value="q"
+            name="q"
+            icon="i-ph-magnifying-glass"
+            placeholder="Search a module..."
+            class="w-full"
+            size="sm"
+            autocomplete="off"
+            :ui="{ icon: { trailing: { pointer: '' } } }"
+            @update:model-value="replaceRoute('q', $event)"
+          />
+          <UButtonGroup>
             <USelectMenu
               :model-value="selectedSort"
               :options="sorts"
               size="md"
               color="white"
-              class="w-32"
               @update:model-value="replaceRoute('sortBy', $event)"
             />
+            <UButton
+              :icon="selectedOrder.icon"
+              size="md"
+              color="gray"
+              @click="replaceRoute('orderBy', selectedOrder.key === 'desc' ? 'asc' : 'desc')"
+            />
           </UButtonGroup>
         </div>
-
         <UPageGrid v-if="filteredModules?.length">
           <UPageCard
             v-for="(module, index) in filteredModules"
             :key="index"
             :to="`/modules/${module.name}`"
-            :title="module.name"
+            :title="module.npm"
             class="flex flex-col overflow-hidden group"
             :ui="{
-              body: { base: 'flex-1' },
-              footer: { base: 'bg-gray-100/50 dark:bg-gray-800/50' }
+              to: 'hover:bg-white hover:ring-1',
+              icon: { wrapper: 'mb-2' },
+              body: { padding: 'p-4 sm:p-4', base: 'flex-1 dark:bg-gray-950' },
+              footer: { base: 'dark:bg-gray-950 border-none', padding: 'px-4 sm:px-4 pt-0' }
             }"
           >
             <template #icon>
@@ -172,96 +155,71 @@ const { copy } = useCopyToClipboard()
                 :src="moduleImage(module.icon)"
                 :icon="moduleIcon(module.category)"
                 :alt="module.name"
-                size="lg"
-                :ui="{ rounded: 'rounded-lg' }"
+                size="xs"
+                :ui="{ rounded: 'rounded-md' }"
                 class="pointer-events-none"
               />
             </template>
 
-            <template #title>
-              <div class="flex items-center space-x-2">
-                <span>{{ module.name }}</span>
-
-                <!-- <UTooltip v-if="module.type === 'official'" text="Official module"> -->
-                <UBadge
-                  v-if="module.type === 'official'"
-                  class="space-x-1 shine text-sm items-center justitfy-center pointer-events-none"
-                  size="xs"
-                  variant="subtle"
-                  :ui="{ base: '!flex' }"
-                >
-                  <UIcon name="i-ph-medal" class="w-4 h-4" />
-                  <span>Официальный</span>
-                </UBadge>
-
-                <UBadge
-                  v-if="module.sponsor"
-                  class="space-x-1 shine text-sm items-center justitfy-center pointer-events-none"
-                  size="xs"
-                  variant="subtle"
-                  color="pink"
-                  :ui="{ base: '!flex' }"
-                >
-                  <UIcon name="i-ph-hand-heart" class="w-4 h-4" />
-                  <span>Спонсор</span>
-                </UBadge>
-              </div>
-
-              <!-- </UTooltip> -->
-            </template>
-
             <template #description>
-              <span class="line-clamp-2">{{ module.description }}</span>
+              <span class="line-clamp-2 dark:text-gray-400 text-gray-500 text-sm">{{ module.description }}</span>
             </template>
 
-            <UTooltip
-              class="hidden lg:inline-flex absolute top-6 right-6 group-hover:opacity-100 opacity-0 transition"
-              :text="`Скопируйте команду установки`"
+            <UBadge
+              v-if="module.type === 'official'"
+              class="space-x-1 shine text-sm items-center justitfy-center pointer-events-none absolute top-4 right-4"
+              size="xs"
+              variant="subtle"
             >
-              <UButton
-                icon="i-ph-package"
-                color="white"
-                @click="copy(`npx nuxi@latest module add ${module.name}`, { title: 'Команда скопирована в буфер обмена:', description: `npx nuxi@latest module add ${module.name}` })"
-              />
-            </UTooltip>
+              <span>Official</span>
+            </UBadge>
+
+            <UBadge
+              v-if="module.sponsor"
+              class="space-x-1 shine text-sm items-center justitfy-center pointer-events-none absolute top-4 right-4"
+              size="xs"
+              variant="subtle"
+              color="pink"
+            >
+              <span>Sponsor</span>
+            </UBadge>
 
             <template #footer>
+              <UDivider type="dashed" class="mb-4" />
               <div class="flex items-center justify-between gap-3 -my-1 text-gray-600 dark:text-gray-300">
                 <div class="flex items-center gap-3">
                   <UTooltip text="Ежемесячное количество загрузок NPM">
                     <NuxtLink
-                      class="flex items-center gap-1"
+                      class="flex items-center gap-1 hover:text-gray-900 hover:dark:text-white"
                       :to="`https://npmjs.org/package/${module.npm}`"
                       target="_blank"
-                      :class="[selectedSort.key === 'downloads' && 'text-gray-900 dark:text-white']"
                     >
-                      <UIcon name="i-ph-arrow-circle-down" class="w-5 h-5 flex-shrink-0" />
+                      <UIcon name="i-ph-arrow-circle-down" class="w-4 h-4 flex-shrink-0" />
                       <span class="text-sm font-medium">{{ formatNumber(module.stats.downloads) }}</span>
                     </NuxtLink>
                   </UTooltip>
 
                   <UTooltip text="GitHub Stars">
                     <NuxtLink
-                      class="flex items-center gap-1"
+                      class="flex items-center gap-1 hover:text-gray-900 hover:dark:text-white"
                       :to="`https://github.com/${module.repo}`"
                       target="_blank"
-                      :class="[selectedSort.key === 'stars' && 'text-gray-900 dark:text-white']"
                     >
-                      <UIcon name="i-ph-star" class="w-5 h-5 flex-shrink-0" />
+                      <UIcon name="i-ph-star" class="w-4 h-4 flex-shrink-0" />
                       <span class="text-sm font-medium">{{ formatNumber(module.stats.stars || 0) }}</span>
                     </NuxtLink>
                   </UTooltip>
                 </div>
 
-                <UTooltip text="Contributors">
-                  <NuxtLink
-                    class="flex items-center gap-1"
-                    :to="`https://github.com/${module.repo}/graphs/contributors`"
-                    target="_blank"
-                  >
-                    <UIcon name="i-ph-user-circle-gear" class="w-5 h-5 flex-shrink-0" />
-                    <span class="text-sm font-medium">{{ module.contributors.length }}</span>
-                  </NuxtLink>
+                <UTooltip
+                  :text="`Copy install command`"
+                >
+                  <UButton
+                    icon="i-ph-terminal"
+                    color="white"
+                    size="2xs"
+                    @click="copy(`npx nuxi@latest module add ${module.name}`, { title: 'Command copied to clipboard:', description: `npx nuxi@latest module add ${module.name}` })"
+                  />
                 </UTooltip>
               </div>
             </template>
@@ -288,7 +246,6 @@ const { copy } = useCopyToClipboard()
 .group:hover .shine {
   text-decoration: none;
   display: inline-block;
-  position: relative;
   mask-image: linear-gradient(-75deg, rgba(255,255,255,.8) 30%, #fff 50%, rgba(255,255,255,.8) 70%);
   mask-size: 200%;
   animation: shine 2s linear infinite;
diff --git a/pages/video-courses.vue b/pages/video-courses.vue
index 1e975edd8..56394cb17 100644
--- a/pages/video-courses.vue
+++ b/pages/video-courses.vue
@@ -26,54 +26,52 @@ defineOgImageComponent('Docs')
     <UPageHero v-bind="page" />
     <UPage>
       <UPageBody>
-        <UPageGrid class="lg:grid-cols-3">
-          <UPageCard
-            v-for="(course, index) in courses"
-            :key="course.slug"
-            :description="course.description"
-            :to="course.url"
-            target="_blank"
-            :ui="{
-              header: { base: 'aspect-w-4 aspect-h-2', padding: '' },
-              body: { padding: '!p-4' },
-              description: 'line-clamp-2 sm:min-h-[45px]'
-            }"
-            class="overflow-hidden"
-          >
-            <template #header>
-              <NuxtImg
-                :src="`/assets/video-courses/${course.slug}.png`"
-                class="object-cover object-top w-full h-full xl:hidden"
-                :alt="course.name"
-                width="600"
-                height="300"
-                format="webp"
-                :modifiers="{ pos: 'top' }"
-                :loading="index > 3 ? 'lazy' : undefined"
-              />
-              <NuxtImg
-                :src="`/assets/video-courses/${course.slug}.png`"
-                class="object-cover object-top w-full h-full hidden xl:block"
-                :alt="course.name"
-                width="384"
-                height="192"
-                format="webp"
-                :modifiers="{ pos: 'top' }"
-                :loading="index > 3 ? 'lazy' : undefined"
-              />
-            </template>
-            <template #title>
-              <span class="flex-1">{{ course.name }}</span>
-              <UBadge
-                v-if="course.badge"
-                :label="course.badge"
-                variant="subtle"
-                size="xs"
-                class="rounded-full"
-              />
-            </template>
-          </UPageCard>
-        </UPageGrid>
+        <ul class="divide-y divide-gray-200 dark:divide-gray-800">
+          <li v-for="(course, index) in courses" :key="course.slug" class="flex items-center py-3 gap-2">
+            <NuxtImg
+              :src="`/assets/video-courses/${course.slug}.png`"
+              :alt="course.name"
+              width="58"
+              height="32"
+              format="webp"
+              :modifiers="{ pos: 'top' }"
+              :loading="index > 3 ? 'lazy' : undefined"
+              class="rounded border dark:border-gray-800 object-cover mr-2 hidden lg:block"
+            />
+            <h3 class="text-base font-medium text-gray-700 dark:text-gray-200 flex-grow lg:flex-grow-0">
+              {{ course.name }}
+            </h3>
+            <p class="text-sm dark:text-gray-400 text-gray-500 hidden lg:block flex-grow">
+              {{ course.description }}
+            </p>
+            <UBadge
+              v-if="course.badge"
+              :label="course.badge"
+              variant="subtle"
+              size="xs"
+              class="rounded-full"
+            />
+            <UBadge
+              v-else
+              label="Free"
+              color="blue"
+              variant="subtle"
+              size="xs"
+              class="rounded-full"
+            />
+            <UButton
+              :to="course.url"
+              target="_blank"
+              trailing-icon="i-ph-arrow-right"
+              variant="link"
+              :padded="false"
+              size="2xs"
+              color="gray"
+            >
+              Discover course
+            </UButton>
+          </li>
+        </ul>
       </UPageBody>
     </UPage>
   </UContainer>
diff --git a/types/modules.ts b/types/modules.ts
index 424bf42b1..9190375e1 100644
--- a/types/modules.ts
+++ b/types/modules.ts
@@ -1,5 +1,11 @@
 import type { ParsedContent } from '@nuxt/content'
 
+export interface Stats {
+  maintainers: number
+  contributors: number
+  modules: number
+}
+
 export interface ModuleUser {
   name: string
   github: string