diff --git a/my-blog/static/css/style.css b/my-blog/static/css/style.css
index a1d3398..6cb092d 100644
--- a/my-blog/static/css/style.css
+++ b/my-blog/static/css/style.css
@@ -59,7 +59,7 @@ a.view-markdown:any-link {
 .container {
     min-height: 100vh;
     display: grid;
-    grid-template-rows: auto auto 1fr auto;
+    grid-template-rows: auto 0fr 1fr auto;
     grid-template-areas: 
         "header"
         "ask-ai"
@@ -158,6 +158,15 @@ a.view-markdown:any-link {
     background: #f6f8fa;
     border-bottom: 1px solid #d1d9e0;
     padding: 24px;
+    overflow: hidden;
+}
+
+.ask-ai-panel[style*="block"] {
+    display: block !important;
+}
+
+.container:has(.ask-ai-panel[style*="block"]) {
+    grid-template-rows: auto auto 1fr auto;
 }
 
 .ask-ai-content {
@@ -193,13 +202,15 @@ a.view-markdown:any-link {
     grid-area: main;
     max-width: 1000px;
     margin: 0 auto;
-    padding: 24px;
+    /* padding: 24px; */
+    padding-top: 80px;
     width: 100%;
 }
 
 @media (max-width: 1000px) {
     .main-content {
-        padding: 20px;
+        /* padding: 20px; */
+        padding: 0px;
         max-width: 100%;
     }
 }
@@ -324,6 +335,10 @@ a.view-markdown:any-link {
     margin: 0 auto;
 }
 
+article.article-content {
+    padding: 10px;
+}
+
 .article-meta {
     display: flex;
     gap: 16px;
@@ -818,13 +833,13 @@ a.view-markdown:any-link {
         justify-self: end;
     }
     
-    /* Ask AI button mobile style */
+    /* Ask AI button mobile style - icon only */
     .ask-ai-btn {
         padding: 8px;
         min-width: 40px;
         justify-content: center;
-        font-size: 0;
         gap: 0;
+        font-size: 0; /* Hide all text content */
     }
     
     .ask-ai-btn .ai-icon {
diff --git a/my-blog/static/js/ask-ai.js b/my-blog/static/js/ask-ai.js
index 7afc9f7..ca3fb78 100644
--- a/my-blog/static/js/ask-ai.js
+++ b/my-blog/static/js/ask-ai.js
@@ -186,12 +186,7 @@ function updateAskAIButton() {
     const button = document.getElementById('askAiButton');
     if (!button) return;
     
-    const iconSpan = button.querySelector('.ai-icon');
-    
-    if (aiProfileData && aiProfileData.avatar && iconSpan) {
-        iconSpan.innerHTML = `<img src="${aiProfileData.avatar}" alt="${aiProfileData.displayName || 'AI'}" class="ai-avatar-small">`;
-    }
-    
+    // Only update text, never modify the icon
     if (aiProfileData && aiProfileData.displayName) {
         const textNode = button.childNodes[2] || button.lastChild;
         if (textNode && textNode.nodeType === Node.TEXT_NODE) {