diff --git a/app/globals.css b/app/globals.css
index eac5c96..837daa3 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -128,3 +128,22 @@
     margin-bottom: 10px; /* 增加元素之间的间距 */
   }
 }
+
+/* 输入框基本样式 */
+.textarea-focus-expand {
+  height: 50px; /* 默认高度 */
+  flex-grow: 1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px 15px;
+  margin-right: 8px;
+  color: #333;
+  transition: height 0.3s ease; /* 平滑过渡效果 */
+}
+
+/* 输入框获得焦点时的样式 */
+.textarea-focus-expand:focus {
+  height: 200px; /* 聚焦时的高度 */
+  border-color: #007bff; /* 改变边框颜色以提供视觉反馈 */
+}
diff --git a/app/page.tsx b/app/page.tsx
index ad9dba1..a803cc8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -29,7 +29,7 @@ export default function Index() {
   const isSupabaseConnected = canInitSupabaseClient();
 
   return (
-    <div className="flex-1 w-full flex flex-col gap-10 items-center">
+    <div className="flex-1 w-full flex flex-col gap-5 items-center">
       <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
         <div className="w-full max-w-4xl flex justify-between items-center p-3 text-sm">
           {/* <DeployButton /> */}
diff --git a/components/QuillEditor.tsx b/components/QuillEditor.tsx
index bc5c222..2cef65c 100644
--- a/components/QuillEditor.tsx
+++ b/components/QuillEditor.tsx
@@ -363,11 +363,10 @@ const QEditor = () => {
   return (
     <div>
       <div id="Qtoolbar" className="space-y-2 flex justify-between">
-        <input
-          type="text"
+        <textarea
           value={userInput}
           onChange={handleInputChange}
-          className="flex-grow shadow appearance-none border rounded py-2 px-3 mr-2 text-grey-darker"
+          className="textarea-focus-expand flex-grow shadow appearance-none border rounded py-2 px-3 mr-2 text-grey-darker"
           placeholder="点击AI Write就是正常的对话交流，点击Paper2AI会根据输入的主题词去寻找对应论文"
         />
         <button