diff --git a/.env.example b/.env.example
index 894f291..0a09ae2 100644
--- a/.env.example
+++ b/.env.example
@@ -10,3 +10,5 @@ VITE_MSAL_TENANT_ID=msal-tenant-id
 #     - US: United States
 #     - DE: Germany
 VITE_DEFAULT_REGION_ABBREVIATION=GB
+# Application title
+VITE_APP_TITLE='OnixByte Technology Co., Ltd'
diff --git a/src/layouts/dashboard-layout/index.tsx b/src/layouts/dashboard-layout/index.tsx
index 3a18e6f..5931888 100644
--- a/src/layouts/dashboard-layout/index.tsx
+++ b/src/layouts/dashboard-layout/index.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import { useNavigate } from "react-router"
-import { Avatar, Breadcrumb, Dropdown, Layout, Menu, type MenuProps, Modal, Space } from "antd"
+import { App, Avatar, Breadcrumb, Dropdown, Layout, Menu, type MenuProps, Modal, Space } from "antd"
 import { DownOutlined } from "@ant-design/icons"
 import { ApplicationLogo } from "@/components/icon"
 import { useAppDispatch, useAppSelector } from "@/store"
@@ -10,6 +10,7 @@ import { MenuApi } from "@/api"
 import type { AxiosError } from "axios"
 import type { TreeNode } from "@/types/tree"
 import type { MenuItem } from "@/types/entity"
+import { AppUtils } from "@/utils"
 
 const { Header, Footer, Sider, Content } = Layout
 type AntMenuItem = Required<MenuProps>["items"][number]
@@ -82,12 +83,14 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
     },
   ]
 
+  const appTitle = useMemo<string>(() => AppUtils.getAppTitle(), [])
+
   return (
-    <Layout className="h-[100%]">
-      <Header className="flex items-center justify-between bg-gradient-to-br from-blue-50 to-indigo-100">
+    <Layout className="h-full">
+      <Header className="flex items-center justify-between bg-linear-to-br from-blue-50 to-indigo-100">
         <div className="flex gap-4 items-center">
           <ApplicationLogo className="text-4xl" />
-          <span className="text-xl">Onixbyte Hi-Tech Co., Ltd</span>
+          <span className="text-xl">{appTitle}</span>
         </div>
 
         <div className="flex gap-4 items-center">
diff --git a/src/utils/app-utils/index.ts b/src/utils/app-utils/index.ts
new file mode 100644
index 0000000..8a4f302
--- /dev/null
+++ b/src/utils/app-utils/index.ts
@@ -0,0 +1,6 @@
+/**
+ * Get application title.
+ */
+export function getAppTitle(): string {
+  return import.meta.env.VITE_APP_TITLE ?? "Helix"
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 16ecaf0..106472a 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,3 +1,4 @@
 export * as PhoneNumberUtils from "./phone-number-utils"
 export * as DepartmentUtils from "./department-utils"
 export * as AntUtils from "./ant-utils"
+export * as AppUtils from "./app-utils"
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index b133581..8c4ddc0 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -19,7 +19,15 @@ interface ImportMetaEnv {
    */
   readonly VITE_MSAL_TENANT_ID: string
 
+  /**
+   * Default region for new users
+   */
   readonly VITE_DEFAULT_REGION_ABBREVIATION: RegionAbbreviation
+
+  /**
+   * Application title, can be set to any preferred string as your wish.
+   */
+  readonly VITE_APP_TITLE: string
 }
 
 interface ImportMeta {