diff --git a/docs/.vitepress/components/Home.vue b/docs/.vitepress/components/Home.vue
index 447fb4383..ca88c0c88 100644
--- a/docs/.vitepress/components/Home.vue
+++ b/docs/.vitepress/components/Home.vue
@@ -26,7 +26,7 @@ function handleClickTryLive() {
         <div class="relative z-10 w-full flex justify-center gap-4">
           <a
             :class="[
-              'rounded-xl px-5 py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none',
+              'rounded-xl px-3 py-2 lg:px-5 lg:py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none text-nowrap text-sm md:text-base',
               'text-slate-700 dark:text-cyan-200',
             ]"
             bg="primary/20 dark:primary/30 dark:hover:primary/40"
@@ -38,7 +38,7 @@ function handleClickTryLive() {
           <a
             href="https://github.com/moeru-ai/airi/releases/latest"
             :class="[
-              'rounded-xl px-5 py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none',
+              'rounded-xl px-3 py-2 lg:px-5 lg:py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none text-nowrap text-sm md:text-base',
               'text-slate-700 dark:text-slate-100',
             ]"
             bg="black/4 dark:white/20 dark:hover:white/30"
@@ -49,7 +49,7 @@ function handleClickTryLive() {
           <a
             href="./docs/overview/"
             :class="[
-              'rounded-xl px-5 py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none',
+              'rounded-xl px-3 py-2 lg:px-5 lg:py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none text-nowrap text-sm md:text-base',
               'text-slate-700 dark:text-slate-100',
             ]"
             bg="black/4 dark:white/20 dark:hover:white/30"