diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index afb850db4968..8ff6c7d10dac 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -8,23 +8,24 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import styles from './index.module.css';
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
 
-        <div className="flex justify-center items-center gap-4 max-w-md mx-auto">
+        <div className="flex justify-center items-center gap-4">
           <Link
-            className="button button--secondary button--md flex-1"
+            className="button button--secondary button--lg"
             to="https://links.tabbyml.com/live-demo">
-              View Live Demo 🚀
+            View Live Demo 🚀
           </Link>
           <Link
-            className="button button--primary border-neutral-800 bg-neutral-800 flex-1 hover:opacity-[0.85]"
+            className="button button--ghost button--lg flex flex-col items-center hover:opacity-80 font-medium"
             to="/docs/getting-started">
             Tutorial - 5min ⏱️
+            <div className='w-full h-[2px] bg-green-200 rounded-sm'></div>
           </Link>
         </div>
 
@@ -35,7 +36,7 @@ function HomepageHeader() {
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
       title={`Home`}