diff --git a/components/common/CommonPreviewPrompt.vue b/components/common/CommonPreviewPrompt.vue
index d6df37db..3b86c123 100644
--- a/components/common/CommonPreviewPrompt.vue
+++ b/components/common/CommonPreviewPrompt.vue
@@ -14,7 +14,7 @@ const build = useBuildInfo()
     <p>
       <i18n-t keypath="help.build_preview.desc1">
         <NuxtLink :href="`https://github.com/elk-zone/elk/commit/${build.commit}`" target="_blank" text-rose hover:underline>
-          <code>{{ build.commit.slice(0, 7) }}</code>
+          <code>{{ build.shortCommit }}</code>
         </NuxtLink>
       </i18n-t>
     </p>
diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index e72ec011..22946275 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const buildInfo = useAppConfig().buildInfo
+const buildInfo = useBuildInfo()
 const timeAgoOptions = useTimeAgoOptions()
 
 const userSettings = useUserSettings()
@@ -65,7 +65,7 @@ function toggleDark() {
           target="_blank"
           font-mono
         >
-          {{ buildInfo.commit.slice(0, 7) }}
+          {{ buildInfo.shortCommit }}
         </NuxtLink>
       </template>
     </div>
diff --git a/config/env.ts b/config/env.ts
index 030eed81..5e416469 100644
--- a/config/env.ts
+++ b/config/env.ts
@@ -31,11 +31,12 @@ const git = Git()
 export const getGitInfo = async () => {
   const branch = gitBranch || await git.revparse(['--abbrev-ref', 'HEAD'])
   const commit = await git.revparse(['HEAD'])
-  return { branch, commit }
+  const shortCommit = await git.revparse(['--short=7', 'HEAD'])
+  return { branch, commit, shortCommit }
 }
 
 export const getEnv = async () => {
-  const { commit, branch } = await getGitInfo()
+  const { commit, shortCommit, branch } = await getGitInfo()
   const env = isDevelopment
     ? 'dev'
     : isPreview
@@ -43,5 +44,5 @@ export const getEnv = async () => {
       : branch === 'main'
         ? 'canary'
         : 'release'
-  return { commit, branch, env } as const
+  return { commit, shortCommit, branch, env } as const
 }
diff --git a/modules/build-env.ts b/modules/build-env.ts
index bc0a0a09..3f5656d0 100644
--- a/modules/build-env.ts
+++ b/modules/build-env.ts
@@ -10,11 +10,12 @@ export default defineNuxtModule({
     name: 'elk:build-env',
   },
   async setup(_options, nuxt) {
-    const { env, commit, branch } = await getEnv()
+    const { env, commit, shortCommit, branch } = await getEnv()
     const buildInfo: BuildInfo = {
       version,
       time: +Date.now(),
       commit,
+      shortCommit,
       branch,
       env,
     }
diff --git a/pages/settings/about/index.vue b/pages/settings/about/index.vue
index 93af736c..267203b7 100644
--- a/pages/settings/about/index.vue
+++ b/pages/settings/about/index.vue
@@ -41,7 +41,7 @@ const handleShowCommit = () => {
         <template #content>
           <div font-mono>
             <span>{{ buildInfo.env === 'release' ? `v${buildInfo.version}` : buildInfo.env }}</span>
-            <span v-if="showCommit"> ({{ buildInfo.commit.slice(0, 7) }}@{{ buildInfo.branch }})</span>
+            <span v-if="showCommit"> ({{ buildInfo.shortCommit }}@{{ buildInfo.branch }})</span>
           </div>
         </template>
       </SettingsItem>
diff --git a/types/index.ts b/types/index.ts
index 04f1508d..15abd796 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -72,6 +72,7 @@ export interface ErrorDialogData {
 export interface BuildInfo {
   version: string
   commit: string
+  shortCommit: string
   time: number
   branch: string
   env: 'preview' | 'canary' | 'dev' | 'release'