diff --git a/zbook_backend/util/lang.go b/zbook_backend/util/lang.go
index e88640c..dc8dc57 100644
--- a/zbook_backend/util/lang.go
+++ b/zbook_backend/util/lang.go
@@ -3,4 +3,5 @@ package util
 const (
 	LangZh = "zh"
 	LangEn = "en"
+	LangDe = "de"
 )
diff --git a/zbook_backend/val/validator.go b/zbook_backend/val/validator.go
index 1035943..d39a7e6 100644
--- a/zbook_backend/val/validator.go
+++ b/zbook_backend/val/validator.go
@@ -47,7 +47,7 @@ func ValidateRepoSideBarTheme(value string) error {
 	return nil
 }
 func ValidateLang(value string) error {
-	if value != util.LangEn && value != util.LangZh {
+	if value != util.LangEn && value != util.LangZh && value != util.LangDe {
 		return fmt.Errorf("invalid language")
 	}
 	return nil
diff --git a/zbook_frontend/global.d.ts b/zbook_frontend/global.d.ts
index 6493a90..ea08f98 100644
--- a/zbook_frontend/global.d.ts
+++ b/zbook_frontend/global.d.ts
@@ -1,11 +1,13 @@
 import en from "./messages/en.json";
 import zh from "./messages/zh.json";
+import de from "./messages/de.json";
 
 // Ensure all language files conform to the Messages type
 type EnMessages = typeof en;
 type ZhMessages = typeof zh;
+type DeMessages = typeof de;
 
 declare global {
   // Use type safe message keys with `next-intl`
-  interface IntlMessages extends ZhMessages, EnMessages {}
+  interface IntlMessages extends ZhMessages, EnMessages, DeMessages {}
 }
diff --git a/zbook_frontend/src/components/home/MainTabGroup.tsx b/zbook_frontend/src/components/home/MainTabGroup.tsx
index 98acb84..65e2de1 100644
--- a/zbook_frontend/src/components/home/MainTabGroup.tsx
+++ b/zbook_frontend/src/components/home/MainTabGroup.tsx
@@ -42,7 +42,7 @@ export default function MainTabGroup() {
   return (
     <div className="max-w-5xl mx-auto py-24 px-2 md:px-4 pb-2 md:pb-4">
       <Tab.Group>
-        <Tab.List className="flex space-x-1 p-1 max-w-xl mx-auto border border-[#65b1e8]/50 rounded-full">
+        <Tab.List className="flex space-x-1 p-1 max-w-xl lg:max-w-2xl mx-auto border border-[#65b1e8]/50 rounded-full overflow-scroll">
           {categories.map(({ label, icon: Icon }, index) => (
             <Tab
               key={index}
diff --git a/zbook_frontend/src/components/navbars/NavLang.tsx b/zbook_frontend/src/components/navbars/NavLang.tsx
index f5b078c..6f403a5 100644
--- a/zbook_frontend/src/components/navbars/NavLang.tsx
+++ b/zbook_frontend/src/components/navbars/NavLang.tsx
@@ -8,6 +8,7 @@ import { usePathname, Link, locales } from "../../navigation";
 const localeMap = {
   en: "English",
   zh: "简体中文",
+  de: "Deutsch",
   // Add other locales here
 };
 export default function NavLink() {
diff --git a/zbook_frontend/src/navigation.ts b/zbook_frontend/src/navigation.ts
index 00a6c1c..9141f1a 100644
--- a/zbook_frontend/src/navigation.ts
+++ b/zbook_frontend/src/navigation.ts
@@ -1,5 +1,5 @@
 import { createSharedPathnamesNavigation } from "next-intl/navigation";
 
-export const locales = ["en", "zh"] as const;
+export const locales = ["en", "zh", "de"] as const;
 export const { Link, redirect, usePathname, useRouter } =
   createSharedPathnamesNavigation({ locales });