diff --git a/.yarn/versions/7cecd77a.yml b/.yarn/versions/7cecd77a.yml
new file mode 100644
index 0000000..660287d
--- /dev/null
+++ b/.yarn/versions/7cecd77a.yml
@@ -0,0 +1,2 @@
+releases:
+  "@aoi-js/frontend": patch
diff --git a/apps/frontend/src/components/aoi/AoiBar.vue b/apps/frontend/src/components/aoi/AoiBar.vue
index a8f1b8b..e31a440 100644
--- a/apps/frontend/src/components/aoi/AoiBar.vue
+++ b/apps/frontend/src/components/aoi/AoiBar.vue
@@ -1,12 +1,18 @@
 <template>
-  <VAppBar border>
+  <VAppBar border :density="appState.navBarExtension ? 'compact' : 'default'">
     <VAppBarNavIcon @click="appState.navBar = !appState.navBar" />
     <VToolbarItems>
       <VBtn to="/" rounded="lg" :active="false">
         <template #prepend>
-          <VIcon size="48"><AoiLogo /></VIcon>
+          <VIcon :size="appState.navBarExtension ? '32' : '48'">
+            <AoiLogo />
+          </VIcon>
         </template>
-        <div v-if="mdAndUp" class="text-none u-pl-4 u-font-mono u-text-3xl">
+        <div
+          v-if="mdAndUp"
+          class="text-none u-pl-4 u-font-mono"
+          :class="[appState.navBarExtension ? 'u-text-2xl' : 'u-text-3xl']"
+        >
           {{ appName }}
         </div>
       </VBtn>
diff --git a/apps/frontend/src/components/aoi/AoiFooter.vue b/apps/frontend/src/components/aoi/AoiFooter.vue
index 7838a38..511675e 100644
--- a/apps/frontend/src/components/aoi/AoiFooter.vue
+++ b/apps/frontend/src/components/aoi/AoiFooter.vue
@@ -1,8 +1,8 @@
 <template>
   <VFooter app absolute>
     <VRow no-gutters>
-      <VCol cols="12" class="text-center" v-if="extraFooterText">
-        <span>{{ extraFooterText }}</span>
+      <VCol cols="12" class="text-center" v-if="extraFooter">
+        <div v-html="extraFooter" />
       </VCol>
       <VCol cols="12" class="text-center text-caption u-opacity-70">
         <I18nT keypath="powered-by">
@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-import { extraFooterText } from '@/utils/flags'
+import { extraFooter } from '@/utils/flags'
 
 const { t } = useI18n()
 </script>
diff --git a/apps/frontend/src/components/aoi/AoiNavDrawer.vue b/apps/frontend/src/components/aoi/AoiNavDrawer.vue
index 78216fd..ab94ad9 100644
--- a/apps/frontend/src/components/aoi/AoiNavDrawer.vue
+++ b/apps/frontend/src/components/aoi/AoiNavDrawer.vue
@@ -13,7 +13,7 @@
               AOI-UI v{{ appBuildInfo.version }}
             </div>
             <div class="u-text-xs u-font-mono u-tracking-tighter u-text-blue-900">
-              {{ appBuildInfo.hash }}@{{ appBuildInfo.branch }}
+              {{ appBuildInfo.hash }}
             </div>
           </div>
         </VBtn>
diff --git a/apps/frontend/src/pages/org/[orgId]/contest/[contestId]/problem/[problemId].vue b/apps/frontend/src/pages/org/[orgId]/contest/[contestId]/problem/[problemId].vue
index 426ef3f..3f4a172 100644
--- a/apps/frontend/src/pages/org/[orgId]/contest/[contestId]/problem/[problemId].vue
+++ b/apps/frontend/src/pages/org/[orgId]/contest/[contestId]/problem/[problemId].vue
@@ -1,67 +1,136 @@
 <template>
   <AsyncState v-if="contestProblem" :state="problem" hide-when-loading>
     <template v-slot="{ value }">
-      <VCard :class="$style.header">
-        <VCardTitle>
-          <div class="d-flex justify-space-between align-center">
-            <div>
-              <span class="text-h4">{{ value.title }}</span>
-            </div>
-            <div>
-              <VChipGroup class="justify-end">
-                <VChip v-for="tag in value.tags" class="mx-2" :key="tag">
-                  {{ tag }}
-                </VChip>
-              </VChipGroup>
+      <div v-intersect="{ handler: onIntersect, options: { rootMargin } }"></div>
+      <VCard :class="$style.header" :density="shrinkHeader ? 'compact' : 'default'">
+        <VFadeTransition mode="out-in">
+          <div v-if="shrinkHeader">
+            <VCardTitle class="pb-0">
+              <div class="d-flex justify-space-between align-center">
+                <div>
+                  <span class="text-h6">{{ value.title }}</span>
+                </div>
+                <div>
+                  <VChipGroup class="justify-end">
+                    <VChip v-for="tag in value.tags" class="mx-2" :key="tag" density="compact">
+                      {{ tag }}
+                    </VChip>
+                  </VChipGroup>
+                </div>
+              </div>
+            </VCardTitle>
+            <div class="d-flex justify-space-between align-center">
+              <VTabs v-model="currentTab" density="compact">
+                <VTab prepend-icon="mdi-book-outline" value="desc">
+                  {{ t('tabs.problem-description') }}
+                </VTab>
+                <VTab
+                  prepend-icon="mdi-upload-outline"
+                  value="submit"
+                  v-if="value.config && (settings.solutionEnabled || admin)"
+                >
+                  {{ t('tabs.submit') }}
+                </VTab>
+                <VTab
+                  prepend-icon="mdi-timer-sand"
+                  :to="{
+                    path: `/org/${orgId}/contest/${contestId}/solution`,
+                    query: { problemId }
+                  }"
+                >
+                  {{ t('tabs.solutions') }}
+                </VTab>
+                <VTab prepend-icon="mdi-attachment" value="attachments">
+                  {{ t('tabs.attachments') }}
+                </VTab>
+                <VTab prepend-icon="mdi-cog-outline" value="management" v-if="admin">
+                  {{ t('tabs.management') }}
+                </VTab>
+              </VTabs>
+              <div class="u-flex u-px-2 u-space-x-2">
+                <VChip
+                  color="info"
+                  variant="outlined"
+                  prepend-icon="mdi-star-four-points"
+                  density="compact"
+                  :text="'' + contestProblem.settings.score"
+                />
+                <VChip
+                  :color="solutionCountLimit.color"
+                  variant="outlined"
+                  prepend-icon="mdi-format-vertical-align-top"
+                  density="compact"
+                  :text="'' + solutionCountLimit.limit"
+                />
+              </div>
             </div>
           </div>
-          <div class="d-flex u-gap-2 pt-2">
-            <VChip
-              color="info"
-              variant="outlined"
-              prepend-icon="mdi-star-four-points"
-              :text="t('score', { score: contestProblem.settings.score })"
-            />
-            <VChip
-              :color="solutionCountLimit.color"
-              variant="outlined"
-              prepend-icon="mdi-format-vertical-align-top"
-              :text="t('solution-count-limit', { limit: solutionCountLimit.limit })"
-            />
-            <VChip
-              v-if="admin"
-              color="primary"
-              variant="outlined"
-              prepend-icon="mdi-arrow-top-left"
-              :text="t('jump-to-problem')"
-              :to="`/org/${orgId}/problem/${problemId}`"
-            />
+          <div v-else>
+            <VCardTitle>
+              <div class="d-flex justify-space-between align-center">
+                <div>
+                  <span class="text-h4">{{ value.title }}</span>
+                </div>
+                <div>
+                  <VChipGroup class="justify-end">
+                    <VChip v-for="tag in value.tags" class="mx-2" :key="tag">
+                      {{ tag }}
+                    </VChip>
+                  </VChipGroup>
+                </div>
+              </div>
+              <div class="d-flex u-space-x-2 pt-2">
+                <VChip
+                  color="info"
+                  variant="outlined"
+                  prepend-icon="mdi-star-four-points"
+                  :text="t('score', { score: contestProblem.settings.score })"
+                />
+                <VChip
+                  :color="solutionCountLimit.color"
+                  variant="outlined"
+                  prepend-icon="mdi-format-vertical-align-top"
+                  :text="t('solution-count-limit', { limit: solutionCountLimit.limit })"
+                />
+                <VChip
+                  v-if="admin"
+                  color="primary"
+                  variant="outlined"
+                  prepend-icon="mdi-arrow-top-left"
+                  :text="t('jump-to-problem')"
+                  :to="`/org/${orgId}/problem/${problemId}`"
+                />
+              </div>
+            </VCardTitle>
+            <VTabs v-model="currentTab">
+              <VTab prepend-icon="mdi-book-outline" value="desc">
+                {{ t('tabs.problem-description') }}
+              </VTab>
+              <VTab
+                prepend-icon="mdi-upload-outline"
+                value="submit"
+                v-if="value.config && (settings.solutionEnabled || admin)"
+              >
+                {{ t('tabs.submit') }}
+              </VTab>
+              <VTab
+                prepend-icon="mdi-timer-sand"
+                :to="{
+                  path: `/org/${orgId}/contest/${contestId}/solution`,
+                  query: { problemId }
+                }"
+              >
+                {{ t('tabs.solutions') }}
+              </VTab>
+              <VTab prepend-icon="mdi-attachment" value="attachments">
+                {{ t('tabs.attachments') }}
+              </VTab>
+              <VTab prepend-icon="mdi-cog-outline" value="management" v-if="admin">
+                {{ t('tabs.management') }}
+              </VTab>
+            </VTabs>
           </div>
-        </VCardTitle>
-        <VTabs v-model="currentTab">
-          <VTab prepend-icon="mdi-book-outline" value="desc">
-            {{ t('tabs.problem-description') }}
-          </VTab>
-          <VTab
-            prepend-icon="mdi-upload-outline"
-            value="submit"
-            v-if="value.config && (settings.solutionEnabled || admin)"
-          >
-            {{ t('tabs.submit') }}
-          </VTab>
-          <VTab
-            prepend-icon="mdi-timer-sand"
-            :to="{ path: `/org/${orgId}/contest/${contestId}/solution`, query: { problemId } }"
-          >
-            {{ t('tabs.solutions') }}
-          </VTab>
-          <VTab prepend-icon="mdi-attachment" value="attachments">
-            {{ t('tabs.attachments') }}
-          </VTab>
-          <VTab prepend-icon="mdi-cog-outline" value="management" v-if="admin">
-            {{ t('tabs.management') }}
-          </VTab>
-        </VTabs>
+        </VFadeTransition>
       </VCard>
       <VCard class="mt-2">
         <VWindow v-model="currentTab">
@@ -93,7 +162,7 @@
 import { useAsyncState } from '@vueuse/core'
 import { ref, watch, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useLayout } from 'vuetify'
+import { useDisplay, useLayout } from 'vuetify'
 
 import ProblemTabAdmin from '@/components/contest/ProblemTabAdmin.vue'
 import ProblemTabAttachments from '@/components/contest/ProblemTabAttachments.vue'
@@ -133,6 +202,13 @@ const problem = useAsyncState(async () => {
 
 const app = useAppState()
 const layout = useLayout()
+const display = useDisplay()
+const rootMargin = computed(() => `-${layout.mainRect.value.top}px 0px 0px 0px`)
+const shouldShrinkHeader = ref(false)
+const shrinkHeader = computed(() => display.lgAndDown.value && shouldShrinkHeader.value)
+function onIntersect(isIntersecting: boolean) {
+  shouldShrinkHeader.value = !isIntersecting
+}
 
 const solutionCount = useAsyncState(
   async () => {
diff --git a/apps/frontend/src/utils/build.ts b/apps/frontend/src/utils/build.ts
index 1bc01a8..3b8d1ca 100644
--- a/apps/frontend/src/utils/build.ts
+++ b/apps/frontend/src/utils/build.ts
@@ -6,3 +6,10 @@ export const appBuildInfo = {
   branch: __GIT_BRANCH__,
   time: __BUILD_TIME__
 }
+
+console.log(
+  `%cAOI-UI%c${version}%c${__GIT_HASH__}@${__GIT_BRANCH__} ${__BUILD_TIME__}`,
+  'background: #35495e; color: #fff; padding: 2px 4px; border-radius: 4px 0 0 4px',
+  'background: #1966c0; color: #fff; padding: 2px 4px',
+  'background: #afddff; color: #000; padding: 2px 4px; border-radius: 0 4px 4px 0'
+)
diff --git a/apps/frontend/src/utils/flags.ts b/apps/frontend/src/utils/flags.ts
index 8484730..b0d2d79 100644
--- a/apps/frontend/src/utils/flags.ts
+++ b/apps/frontend/src/utils/flags.ts
@@ -2,7 +2,7 @@ export const gravatarBase = import.meta.env.VITE_GRAVATAR_BASE ?? `https://www.g
 export const enableMfa = !import.meta.env.VITE_DISABLE_MFA_BIND
 export const appName = import.meta.env.VITE_APP_NAME ?? 'AOI'
 export const showCountdown = !!import.meta.env.VITE_APPBAR_SHOW_COUNTDOWN
-export const extraFooterText = import.meta.env.VITE_EXTRA_FOOTER_TEXT
+export const extraFooter = import.meta.env.VITE_EXTRA_FOOTER
 export const loginHint = import.meta.env.VITE_LOGIN_HINT
 export const verifyHint = import.meta.env.VITE_VERIFY_HINT
 export const enableOverview = !!import.meta.env.VITE_ENABLE_OVERVIEW