diff --git a/docs/agentcube/docusaurus.config.ts b/docs/agentcube/docusaurus.config.ts
index e3d89c4fd..ac840c6b1 100644
--- a/docs/agentcube/docusaurus.config.ts
+++ b/docs/agentcube/docusaurus.config.ts
@@ -1,13 +1,13 @@
-import {themes as prismThemes} from 'prism-react-renderer';
-import type {Config} from '@docusaurus/types';
-import type * as Preset from '@docusaurus/preset-classic';
+import { themes as prismThemes } from "prism-react-renderer";
+import type { Config } from "@docusaurus/types";
+import type * as Preset from "@docusaurus/preset-classic";
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const config: Config = {
-  title: 'AgentCube',
-  tagline: 'Native AI Agent Workload Management for Kubernetes',
-  favicon: 'img/favicon.ico',
+  title: "AgentCube",
+  tagline: "Native AI Agent Workload Management for Kubernetes",
+  favicon: "img/favicon.ico",
 
   // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
   future: {
@@ -15,58 +15,56 @@ const config: Config = {
   },
 
   // Set the production url of your site here
-  url: 'https://your-docusaurus-site.example.com',
+  url: "https://agentcube.volcano.sh",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: '/',
+  baseUrl: "/",
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'volcano-sh', // Usually your GitHub org/user name.
-  projectName: 'agentcube', // Usually your repo name.
+  organizationName: "volcano-sh", // Usually your GitHub org/user name.
+  projectName: "agentcube", // Usually your repo name.
 
-  onBrokenLinks: 'throw',
+  onBrokenLinks: "throw",
   markdown: {
     mermaid: true,
   },
-  themes: ['@docusaurus/theme-mermaid'],
+  themes: ["@docusaurus/theme-mermaid"],
 
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
   // may want to replace "en" with "zh-Hans".
   i18n: {
-    defaultLocale: 'en',
-    locales: ['en'],
+    defaultLocale: "en",
+    locales: ["en"],
   },
 
   presets: [
     [
-      'classic',
+      "classic",
       {
         docs: {
-          sidebarPath: './sidebars.ts',
+          sidebarPath: "./sidebars.ts",
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/volcano-sh/agentcube/tree/main/docs',
+          editUrl: "https://github.com/volcano-sh/agentcube/tree/main/docs",
         },
         blog: {
           showReadingTime: true,
           feedOptions: {
-            type: ['rss', 'atom'],
+            type: ["rss", "atom"],
             xslt: true,
           },
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/volcano-sh/agentcube/tree/main/docs',
+          editUrl: "https://github.com/volcano-sh/agentcube/tree/main/docs",
           // Useful options to enforce blogging best practices
-          onInlineTags: 'warn',
-          onInlineAuthors: 'warn',
-          onUntruncatedBlogPosts: 'warn',
+          onInlineTags: "warn",
+          onInlineAuthors: "warn",
+          onUntruncatedBlogPosts: "warn",
         },
         theme: {
-          customCss: './src/css/custom.css',
+          customCss: "./src/css/custom.css",
         },
       } satisfies Preset.Options,
     ],
@@ -74,74 +72,74 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: 'img/docusaurus-social-card.jpg',
+    image: "img/docusaurus-social-card.jpg",
     colorMode: {
       respectPrefersColorScheme: true,
     },
     navbar: {
-      title: 'AgentCube',
+      title: "AgentCube",
       logo: {
-        alt: 'My Site Logo',
-        src: 'img/logo.svg',
+        alt: "AgentCube Logo",
+        src: "img/logo.svg",
       },
       items: [
         {
-          type: 'docSidebar',
-          sidebarId: 'tutorialSidebar',
-          position: 'left',
-          label: 'Documentation',
+          type: "docSidebar",
+          sidebarId: "tutorialSidebar",
+          position: "left",
+          label: "Documentation",
         },
-        {to: '/blog', label: 'Blog', position: 'left'},
+        { to: "/blog", label: "Blog", position: "left" },
         {
-          href: 'https://github.com/volcano-sh/agentcube',
-          label: 'GitHub',
-          position: 'right',
+          href: "https://github.com/volcano-sh/agentcube",
+          label: "GitHub",
+          position: "right",
         },
       ],
     },
     footer: {
-      style: 'dark',
+      style: "light",
       links: [
         {
-          title: 'Docs',
+          title: "Docs",
           items: [
             {
-              label: 'Getting Started',
-              to: '/docs/getting-started',
+              label: "Getting Started",
+              to: "/docs/getting-started",
             },
             {
-              label: 'Developer Guide',
-              to: '/docs/developer-guide/intro',
+              label: "Developer Guide",
+              to: "/docs/developer-guide/intro",
             },
           ],
         },
         {
-          title: 'Community',
+          title: "Community",
           items: [
             {
-              label: 'Issues',
-              href: 'https://github.com/volcano-sh/agentcube/issues',
+              label: "Issues",
+              href: "https://github.com/volcano-sh/agentcube/issues",
             },
             {
-              label: 'Discussions',
-              href: 'https://github.com/volcano-sh/agentcube',
+              label: "Discussions",
+              href: "https://github.com/volcano-sh/agentcube/discussions",
             },
             {
-              label: 'Volcano',
-              href: 'https://volcano.sh/en/',
+              label: "Volcano",
+              href: "https://volcano.sh/en/",
             },
           ],
         },
         {
-          title: 'More',
+          title: "More",
           items: [
             {
-              label: 'Blog',
-              to: '/blog',
+              label: "Blog",
+              to: "/blog",
             },
             {
-              label: 'GitHub',
-              href: 'https://github.com/volcano-sh/agentcube',
+              label: "GitHub",
+              href: "https://github.com/volcano-sh/agentcube",
             },
           ],
         },
diff --git a/docs/agentcube/src/components/HomepageFeatures/index.tsx b/docs/agentcube/src/components/HomepageFeatures/index.tsx
index 33033ce42..327c022f8 100644
--- a/docs/agentcube/src/components/HomepageFeatures/index.tsx
+++ b/docs/agentcube/src/components/HomepageFeatures/index.tsx
@@ -1,56 +1,138 @@
-import type {ReactNode} from 'react';
-import clsx from 'clsx';
-import Heading from '@theme/Heading';
-import styles from './styles.module.css';
+import type { ReactNode } from "react";
+import clsx from "clsx";
+import Heading from "@theme/Heading";
+import styles from "./styles.module.css";
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  icon: ReactNode;
   description: ReactNode;
 };
 
+const LowLatencyIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    className={styles.featureSvg}
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    role="img"
+    aria-label="Low-latency agent scheduling icon"
+  >
+    <path d="M12 2a10 10 0 0 1 10 10" strokeDasharray="2 2" />
+    <path d="M22 12a10 10 0 0 1-18 6" />
+    <path d="M12 2a10 10 0 0 0-8 4" />
+    <circle cx="12" cy="12" r="6" />
+    <polyline points="12 9 12 12 14.5 13.5" />
+    <line x1="2" y1="8" x2="6" y2="8" />
+    <line x1="1" y1="12" x2="4" y2="12" />
+    <line x1="3" y1="16" x2="7" y2="16" />
+  </svg>
+);
+
+const StatefulLifecycleIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    className={styles.featureSvg}
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    role="img"
+    aria-label="Stateful agent lifecycle icon"
+  >
+    <polygon points="12 2 22 7 12 12 2 7" />
+    <polygon points="2 7 12 12 12 22 2 17" />
+    <polygon points="12 12 22 7 22 17 12 22" />
+    <line x1="12" y1="12" x2="12" y2="22" />
+    <line x1="12" y1="7" x2="2" y2="12" />
+    <line x1="12" y1="7" x2="22" y2="12" />
+    <path d="M4 11.5 L12 15.5 M12 15.5 L20 11.5" />
+    <path d="M6 16.5 L12 19.5 M12 19.5 L18 16.5" />
+  </svg>
+);
+
+const ResourceUtilizationIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    className={styles.featureSvg}
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    role="img"
+    aria-label="Efficient resource utilization icon"
+  >
+    <circle cx="12" cy="12" r="3" fill="currentColor" fillOpacity="0.1" />
+    <circle cx="12" cy="4" r="2" />
+    <circle cx="4" cy="18" r="2" />
+    <circle cx="20" cy="18" r="2" />
+    <line x1="12" y1="6" x2="12" y2="9" />
+    <line x1="5.5" y1="16.5" x2="10" y2="13.5" />
+    <line x1="18.5" y1="16.5" x2="14" y2="13.5" />
+    <path d="M12 2 L22 17 L2 17 Z" strokeDasharray="2 2" />
+    <line x1="8" y1="21" x2="16" y2="21" strokeWidth="2" />
+    <line
+      x1="10"
+      y1="21"
+      x2="14"
+      y2="21"
+      stroke="var(--brand-red)"
+      strokeWidth="2"
+    />
+  </svg>
+);
+
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Low-Latency Agent Scheduling',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    title: "Low-Latency Agent Scheduling",
+    icon: <LowLatencyIcon />,
     description: (
       <>
-        Fast startup and resume for interactive AI agents.
-        Optimized scheduling paths enable sub-second agent startup and rapid resume from idle states.
+        Fast startup and resume for interactive AI agents. Optimized scheduling
+        paths enable sub-second agent startup and rapid resume from idle states.
       </>
     ),
   },
   {
-    title: 'Stateful Agent Lifecycle',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    title: "Stateful Agent Lifecycle",
+    icon: <StatefulLifecycleIcon />,
     description: (
       <>
-        Built-in state preservation and sleep/resume semantics.
-        Agents retain context across long-running sessions while idle resources are safely released.
+        Built-in state preservation and sleep/resume semantics. Agents retain
+        context across long-running sessions while idle resources are safely
+        released.
       </>
     ),
   },
   {
-    title: 'Efficient Resource Utilization',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    title: "Efficient Resource Utilization",
+    icon: <ResourceUtilizationIcon />,
     description: (
       <>
-        High-density placement with performance isolation.
-        Advanced bin-packing maximizes cluster utilization under strict resource and isolation guarantees.
+        High-density placement with performance isolation. Advanced bin-packing
+        maximizes cluster utilization under strict resource and isolation
+        guarantees.
       </>
     ),
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({ title, icon, description }: FeatureItem) {
   return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <Heading as="h3">{title}</Heading>
-        <p>{description}</p>
+    <div className={clsx("col col--4")}>
+      <div className={styles.featureCard}>
+        <div className={styles.featureIconContainer}>{icon}</div>
+        <div className={styles.featureContent}>
+          <Heading as="h3" className={styles.featureCardTitle}>
+            {title}
+          </Heading>
+          <p className={styles.featureCardDescription}>{description}</p>
+        </div>
       </div>
     </div>
   );
diff --git a/docs/agentcube/src/components/HomepageFeatures/styles.module.css b/docs/agentcube/src/components/HomepageFeatures/styles.module.css
index b248eb2e5..541c1f603 100644
--- a/docs/agentcube/src/components/HomepageFeatures/styles.module.css
+++ b/docs/agentcube/src/components/HomepageFeatures/styles.module.css
@@ -1,11 +1,78 @@
 .features {
+  padding: 6rem 0;
+  background-color: var(--hero-bg);
+  transition: background-color 0.25s ease;
+}
+
+.featureCard {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 2.5rem 2rem;
+  background-color: var(--card-bg);
+  border: 1px solid var(--card-border-color);
+  border-radius: 12px;
+  box-shadow: var(--card-shadow);
+  transition:
+    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.25s ease;
+}
+
+.featureCard:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--card-shadow-hover);
+  border-color: var(--card-hover-border-color);
+}
+
+.featureIconContainer {
   display: flex;
   align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+  justify-content: center;
+  margin-bottom: 2rem;
+  color: var(--brand-blue);
+  transition: color 0.25s ease;
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  height: 96px;
+  width: 96px;
+  transition: transform 0.22s ease;
+}
+
+.featureCard:hover .featureSvg {
+  transform: scale(1.05);
+}
+
+.featureContent {
+  text-align: center;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.featureCardTitle {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  color: var(--card-title-color, var(--ifm-font-color-base));
+  line-height: 1.4;
+}
+
+.featureCardDescription {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--card-text-color, var(--ifm-color-emphasis-700));
+  margin: 0;
+}
+
+@media screen and (max-width: 996px) {
+  .features {
+    padding: 4rem 0;
+  }
+  .featureCard {
+    padding: 2rem 1.5rem;
+    margin-bottom: 1.5rem;
+  }
 }
diff --git a/docs/agentcube/src/css/custom.css b/docs/agentcube/src/css/custom.css
index 4129a810c..a2a9e46d3 100644
--- a/docs/agentcube/src/css/custom.css
+++ b/docs/agentcube/src/css/custom.css
@@ -1,48 +1,205 @@
 :root {
-  /* AgentCube Primary (CNCF-style Infra Blue) */
-  --ifm-color-primary: #0b5ed7;
-  --ifm-color-primary-dark: #0a54c1;
-  --ifm-color-primary-darker: #094fb6;
-  --ifm-color-primary-darkest: #073f93;
-  --ifm-color-primary-light: #2b73e0;
-  --ifm-color-primary-lighter: #4d8be7;
-  --ifm-color-primary-lightest: #8cb4f2;
-
-  /* Subtle Agent Accent */
-  --agentcube-accent: #22b8cf;
+  /* Brand colors */
+  --brand-red: #d94841;
+  --brand-blue: #2563eb;
+
+  /* Theme-wide styles */
+  --hero-bg: #ffffff;
+  --hero-title-color: #0f172a;
+  --hero-subtitle-color: #475569;
+
+  --card-bg: #ffffff;
+  --card-border-color: #e2e8f0;
+  --card-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --card-shadow-hover:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --card-hover-border-color: #cbd5e1;
+
+  --nav-border-color: #e2e8f0;
+  --nav-hover-color: var(--brand-red);
+
+  --footer-bg: #f8fafc;
+  --footer-border-color: #e2e8f0;
+  --footer-text-color: #475569;
+  --footer-link-hover-color: var(--brand-red);
+
+  /* Audited Theme Overrides - preserve existing typography and primary values */
+  --ifm-color-primary: var(--brand-blue);
+  --ifm-color-primary-dark: #1d4ed8;
+  --ifm-color-primary-darker: #1e40af;
+  --ifm-color-primary-darkest: #1e3a8a;
+  --ifm-color-primary-light: #3b82f6;
+  --ifm-color-primary-lighter: #60a5fa;
+  --ifm-color-primary-lightest: #93c5fd;
+
+  --agentcube-accent: var(--brand-red);
 
   /* Typography */
-  --ifm-font-family-base: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --ifm-font-family-base:
+    Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   --ifm-code-font-size: 95%;
 
   /* UI */
   --ifm-link-color: var(--ifm-color-primary);
   --ifm-navbar-background-color: #ffffff;
-  --ifm-footer-background-color: #f8fafc;
+  --ifm-navbar-shadow: 0 1px 0 0 var(--nav-border-color);
+  --ifm-footer-background-color: var(--footer-bg);
 
-  --docusaurus-highlighted-code-line-bg: rgba(11, 94, 215, 0.08);
+  --docusaurus-highlighted-code-line-bg: rgba(37, 99, 235, 0.08);
 }
 
-[data-theme='dark'] {
-  --ifm-color-primary: #6ea8fe;
-  --ifm-color-primary-dark: #4c8dff;
-  --ifm-color-primary-darker: #3b82f6;
-  --ifm-color-primary-darkest: #2563eb;
-  --ifm-color-primary-light: #8bbcff;
-  --ifm-color-primary-lighter: #b6d1ff;
-  --ifm-color-primary-lightest: #dbe7ff;
+[data-theme="dark"] {
+  --brand-red: #f87171; /* lighter red/coral for dark mode readability */
+  --brand-blue: #60a5fa;
+
+  --hero-bg: #0b1220;
+  --hero-title-color: #f8fafc;
+  --hero-subtitle-color: #94a3b8;
+
+  --card-bg: #0f172a;
+  --card-border-color: rgba(255, 255, 255, 0.08);
+  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+  --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+  --card-hover-border-color: rgba(255, 255, 255, 0.15);
+
+  --nav-border-color: rgba(255, 255, 255, 0.08);
+  --nav-hover-color: var(--brand-red);
+
+  --footer-bg: #0b1220;
+  --footer-border-color: rgba(255, 255, 255, 0.08);
+  --footer-text-color: #94a3b8;
+
+  --ifm-color-primary: #60a5fa;
+  --ifm-color-primary-dark: #3b82f6;
+  --ifm-color-primary-darker: #2563eb;
+  --ifm-color-primary-darkest: #1d4ed8;
+  --ifm-color-primary-light: #93c5fd;
+  --ifm-color-primary-lighter: #bfdbfe;
+  --ifm-color-primary-lightest: #dbeafe;
 
-  --agentcube-accent: #22d3ee;
+  --agentcube-accent: var(--brand-red);
 
   --ifm-background-color: #0b1220;
   --ifm-navbar-background-color: #0b1220;
-  --ifm-footer-background-color: #0b1220;
+  --ifm-navbar-shadow: 0 1px 0 0 var(--nav-border-color);
+  --ifm-footer-background-color: var(--footer-bg);
+
+  --docusaurus-highlighted-code-line-bg: rgba(96, 165, 250, 0.25);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+/* Keyboard focus ring — visible only for keyboard navigation */
+:focus-visible {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Navbar refinements */
+.navbar {
+  border-bottom: 1px solid var(--nav-border-color) !important;
+  box-shadow: var(--ifm-navbar-shadow) !important;
+  transition:
+    background-color 0.25s ease,
+    border-color 0.25s ease;
+}
+
+.navbar__link {
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.navbar__link:hover,
+.navbar__link--active {
+  color: var(--nav-hover-color) !important;
+}
+
+/* Footer refinements */
+.footer {
+  border-top: 1px solid var(--footer-border-color) !important;
+  background-color: var(--footer-bg) !important;
+  padding: 4rem 2rem 3rem !important;
+  transition:
+    background-color 0.25s ease,
+    border-color 0.25s ease;
+}
+
+.footer__title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 1rem;
+  color: var(--ifm-font-color-base);
+}
+
+.footer__link-item {
+  color: var(--footer-text-color) !important;
+  transition: color 0.2s ease;
+}
+
+.footer__link-item:hover {
+  color: var(--footer-link-hover-color) !important;
+  text-decoration: none;
+}
 
-  --docusaurus-highlighted-code-line-bg: rgba(110, 168, 254, 0.25);
+.footer__copyright {
+  margin-top: 2rem;
+  font-size: 0.8rem;
+  color: var(--footer-text-color);
+  opacity: 0.7;
 }
 
-.container_lyt7 {
-    max-width: 100%;
-    display: flex;
-    justify-content: space-evenly;
-}
\ No newline at end of file
+/* Custom Button Styles */
+.button--brand-primary {
+  background-color: var(--brand-red) !important;
+  color: #ffffff !important;
+  border: 1px solid var(--brand-red) !important;
+  font-weight: 600;
+  border-radius: 6px;
+  transition: all 0.2s ease-in-out;
+}
+
+.button--brand-primary:hover {
+  background-color: #c53c35 !important;
+  border-color: #c53c35 !important;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(217, 72, 65, 0.25);
+  text-decoration: none;
+}
+
+.button--brand-secondary {
+  background-color: transparent !important;
+  color: var(--brand-blue) !important;
+  border: 1px solid var(--brand-blue) !important;
+  font-weight: 500;
+  border-radius: 6px;
+  transition: all 0.2s ease-in-out;
+}
+
+.button--brand-secondary:hover {
+  background-color: rgba(37, 99, 235, 0.04) !important;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .button--brand-secondary {
+  color: var(--brand-blue) !important;
+  border-color: var(--brand-blue) !important;
+}
+
+[data-theme="dark"] .button--brand-secondary:hover {
+  background-color: rgba(96, 165, 250, 0.06) !important;
+  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.12);
+}
diff --git a/docs/agentcube/src/pages/index.module.css b/docs/agentcube/src/pages/index.module.css
index 9f71a5da7..8176fc4d2 100644
--- a/docs/agentcube/src/pages/index.module.css
+++ b/docs/agentcube/src/pages/index.module.css
@@ -3,21 +3,55 @@
  * and scoped locally.
  */
 
-.heroBanner {
-  padding: 4rem 0;
+.heroSection {
+  background-color: var(--hero-bg);
+  padding: 6.5rem 0 5.5rem;
   text-align: center;
   position: relative;
   overflow: hidden;
+  border-bottom: 1px solid var(--nav-border-color);
+  transition:
+    background-color 0.25s ease,
+    border-color 0.25s ease;
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+.heroTitle {
+  font-size: 3.5rem;
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: var(--hero-title-color);
+  margin-bottom: 1.25rem;
+  font-family: var(--ifm-font-family-base);
+}
+
+.heroSubtitle {
+  font-size: 1.35rem;
+  font-weight: 400;
+  line-height: 1.6;
+  max-width: 720px;
+  margin: 0 auto 2.5rem;
+  color: var(--hero-subtitle-color);
+  font-family: var(--ifm-font-family-base);
 }
 
 .buttons {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
+  gap: 1.25rem;
+}
+
+@media screen and (max-width: 996px) {
+  .heroSection {
+    padding: 4.5rem 1.5rem 4rem;
+  }
+  .heroTitle {
+    font-size: 2.5rem;
+  }
+  .heroSubtitle {
+    font-size: 1.15rem;
+    margin-bottom: 2rem;
+  }
 }
diff --git a/docs/agentcube/src/pages/index.tsx b/docs/agentcube/src/pages/index.tsx
index c2e659369..896bca490 100644
--- a/docs/agentcube/src/pages/index.tsx
+++ b/docs/agentcube/src/pages/index.tsx
@@ -1,27 +1,33 @@
-import type {ReactNode} from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import Heading from '@theme/Heading';
+import type { ReactNode } from "react";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import Heading from "@theme/Heading";
 
-import styles from './index.module.css';
+import styles from "./index.module.css";
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={styles.heroSection}>
       <div className="container">
-        <Heading as="h1" className="hero__title">
+        <Heading as="h1" className={styles.heroTitle}>
           {siteConfig.title}
         </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link
-            className="button button--secondary button--lg"
-            to="/docs/intro">
-            Get Started with AgentCube
+            className="button button--brand-primary button--lg"
+            to="/docs/intro"
+          >
+            Get Started
+          </Link>
+          <Link
+            className="button button--brand-secondary button--lg"
+            href="https://github.com/volcano-sh/agentcube"
+          >
+            View on GitHub
           </Link>
         </div>
       </div>
@@ -30,11 +36,12 @@ function HomepageHeader() {
 }
 
 export default function Home(): ReactNode {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      title="Native AI Agent Workload Management"
+      description="Native AI Agent Workload Management for Kubernetes. Fast scheduling, stateful lifecycle, and efficient resource utilization for AI agents."
+    >
       <HomepageHeader />
       <main>
         <HomepageFeatures />