diff --git a/packages/client/src/components/BuildInfoCard.tsx b/packages/client/src/components/BuildInfoCard.tsx
new file mode 100644
index 0000000..7410357
--- /dev/null
+++ b/packages/client/src/components/BuildInfoCard.tsx
@@ -0,0 +1,45 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getBuildInfo } from "../util/env";
+import { Clock, GitBranch, GitCommit, Tag } from "lucide-react";
+
+export default function BuildInfoCard() {
+  const buildInfo = getBuildInfo();
+
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle className="text-2xl font-bold">Build Information</CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className="flex items-center space-x-4">
+          <GitBranch className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium leading-none">Git Branch</p>
+            <p className="text-sm text-muted-foreground">{buildInfo.gitBranch}</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <GitCommit className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium leading-none">Git Hash</p>
+            <p className="text-sm text-muted-foreground">{buildInfo.gitHash}</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <Clock className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium leading-none">Build Time</p>
+            <p className="text-sm text-muted-foreground">{buildInfo.buildTime}</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <Tag className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium leading-none">Build Version</p>
+            <p className="text-sm text-muted-foreground">{buildInfo.buildVersion}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/packages/client/src/page/settingPage.tsx b/packages/client/src/page/settingPage.tsx
index ef5deac..c66cdeb 100644
--- a/packages/client/src/page/settingPage.tsx
+++ b/packages/client/src/page/settingPage.tsx
@@ -2,6 +2,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { type TernaryDarkMode, useTernaryDarkMode, useMediaQuery } from "usehooks-ts";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Label } from "@/components/ui/label";
+import BuildInfoCard from "@/components/BuildInfoCard";
 
 function LightModeView() {
     return <div className="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
@@ -46,7 +47,7 @@ export function SettingPage() {
     const isSystemDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
 
     return (
-        <div className="p-4">
+        <div className="p-4 space-y-2">
             <Card>
                 <CardHeader>
                     <CardTitle className="text-2xl">Settings</CardTitle>
@@ -85,6 +86,7 @@ export function SettingPage() {
                     </div>
                 </CardContent>
             </Card>
+            <BuildInfoCard />
         </div>
     )
 }
diff --git a/packages/client/src/util/env.ts b/packages/client/src/util/env.ts
new file mode 100644
index 0000000..87d7be0
--- /dev/null
+++ b/packages/client/src/util/env.ts
@@ -0,0 +1,13 @@
+declare const __GIT_BRANCH__: string;
+declare const __GIT_HASH__: string;
+declare const __BUILD_TIME__: string;
+declare const __BUILD_VERSION__: string;
+
+export function getBuildInfo() {
+  return {
+    gitBranch: __GIT_BRANCH__,
+    gitHash: __GIT_HASH__,
+    buildTime: __BUILD_TIME__,
+    buildVersion: __BUILD_VERSION__,
+  };
+}
\ No newline at end of file
diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index 327a9e7..e2a2df3 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -2,11 +2,41 @@ import { defineConfig, loadEnv } from 'vite'
 import path from 'node:path'
 import react from '@vitejs/plugin-react-swc'
 
+import { execSync } from "child_process";
+
+function getCurrentGitHash(): string {
+  const gitHash = execSync("git rev-parse HEAD")
+    .toString()
+    .trim();
+  return gitHash;
+}
+
+function getBuildTime(): string {
+  return new Date().toISOString();
+}
+
+function getBuildVersion(): string {
+  return process.env.BUILD_VERSION ?? getCurrentGitHash();
+}
+
+function getCurrentGitBranch(): string {
+  const gitBranch = execSync("git rev-parse --abbrev-ref HEAD")
+    .toString()
+    .trim();
+  return gitBranch;
+}
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
   return {
   plugins: [react()],
+  define: {
+    __BUILD_TIME__: `"${getBuildTime()}"`,
+    __BUILD_VERSION__: `"${getBuildVersion()}"`,
+    __GIT_BRANCH__: `"${getCurrentGitBranch()}"`,
+    __GIT_HASH__: `"${getCurrentGitHash()}"`,
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),